/*	http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  /*font-size: 100%;*/
  font-family: Helvetica, Arial, sans-serif;
  font: inherit;
  vertical-align: baseline;
}

/* img {
  vertical-align: text-bottom; /*this kills weird padding on images? amedeo added. it is in addition to above reset (img is in long list)
}*/

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1;
  font-family: Helvetica, Arial, sans-serif;
  background-color: #3c3c3c;
  /* border-bottom: 1px solid #e7e7e7;*/
}

ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Clearfix below, from gmail sign-in page. Not sure if it works for IE.
---------------------------*/

  /* For modern browsers */

  .clearfix:before,
  .clearfix:after {
  content: "";
  display: table;
  }
  .clearfix:after {
  clear: both;
  }
  /* For IE 6/7 (trigger hasLayout) */

  .clearfix {
  zoom:1;
  }


/* ### Start main CSS ### */ 

/* Set the body size equal to your images size. All images must be same size. This width gets inherited. */

/* The container for your images. */

.slider {
	width: 600px; /* this width is important, set to image width*/
	/* height: 405px; /* not necessary?*/
	overflow: scroll;
	float: left;

}

	.slider ul {
		width: 30000px;
		list-style: none;
	}

	.slider ul li {
		float: left;
	}

/* Slideshow navigation tools */

.nav-wrapper {
	clear:both;
	/* width: 723px; /* match image width*/
	background-color: #3c3c3c; /*white;/* #e7e7e7; *. /*black*/
	/* display: table;*/
	text-align: center;
}


#slider-nav { 

	display: inline-block; 
	background-color: #3c3c3c; /*white; /*black;*/
	vertical-align: top;
	margin-top: .25em;
	/* width: 723px; /*match image width if below image*/
}

	.button {
		padding: 6px;
		background-color: #b4b4b4; /* #4b4d53;*/
		color: #424242;/* #bec0c4;*/
		width: 15px;
		cursor: pointer;
		font-size: 1em;
		text-align: center;
		border-radius: 5px;
		border: 1px solid #F5BD18; /*#424242;*/
	}

	.button:hover {
		color: gray;
		background-color: #424242;
	}

	.button-left {
		float: left;
		margin: 0 4px 0;
	}

	.button-right {
		float: left;
		margin-right: 4px;
	}


/* The thumbnails. */

.thumbnails {
	background-color: #3c3c3c; /*white; /* #6F727B;*/
	display: inline-block;
}

	.thumbnails-messyList {
		list-style: none;
	}

	.thumbnails-items {
		display: inline-block;
		float: left;
		padding: .20em;
		margin: .10em;
		cursor: pointer;
	}

	.thumbnails li img {
		vertical-align: middle;
		text-align: center;
	}

	.thumbnails li:hover {
		background-color: #F5BD18;
	}

	.thumbnail-highlighted {
		background-color: #F5BD18;
	}

	/* .thumbnail-navigator { ## turned off for now, because no nav like this in this
		margin: .5em 0;
		width: 723px; /*match image width if below image
	} */

	/* .thumbnail-navigator-bar {
		background-color: #4b4d53;
		color: #bec0c4;
		padding: 5px;
		text-align: center;
		cursor: pointer;
	}

	.thumbnail-navigator-bar:hover {
		background-color: #424242;
		color: white;
	}

	.thumbnail-navigator-bar span {
		font-size: 1.1em;
	}*/

/* Caption container. */

.caption {
	background-color: #3c3c3c; /* white;*/
	width: 600px; /* match image width*/
	/* height: 140px; /*Adjustable*/
	overflow: scroll;
	/* float: left;*/
	clear: both;
}

	.caption ul {
		width: 30000px;
		list-style: none;
	}

	.caption ul li {
		float: left;
		width: 600px; /* width of image*/ 
		/*width: we are going to set this LI's width in JS, and make it equal to img width*/
	}

	.li-heading2 {
		font-size: 1.1em;
		padding: 15px 0 0 10px;
		color: gray;/* #F5BD18;*/
	}

	.caption-link {
		color: black; /*#F5BD18;*/
	}

	.caption a:hover {
		color: gray;
	}

	.caption-graf {
		color: white; /*gray;*/
		font-size: .9em;
		padding: .5em;
    background-color: #3c3c3c;
	}