/* ---------------------------------------------------- */
/* SLIDESHOW
/* ---------------------------------------------------- */
.slideshow {
	width: 976px;
	height:268px;
	background-color: white;
	/* border:solid 1px gray; */
	position: relative;
	margin:auto;
	top:2px;
	z-index: 100;
}

.slideshow ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	height: 1%; /* IE fix */
}

.slideshow ul:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	visibility: hidden;
}            

/* ---------------------------------------------------- */
/* SLIDESHOW > SLIDES
/* ---------------------------------------------------- */
.slideshow .slides {
	overflow: hidden;
	background-color: #ffffff;
	width: 976px;
}

.slideshow .slides ul {
	width: 5856px; /* add 976px per additional slide */
}

.slideshow .slides li {
	width: 976px;
	height:268px;
	float: left;
}

.slideshow, .slideshow .slides h2 {
	margin-top: 0;
}

/* ---------------------------------------------------- */
/* SLIDESHOW > NAVIGATION
/* ---------------------------------------------------- */
.slideshow .slides-nav {
	width:120px; /* change according to how many slides are there */
	background-color: transparent;
	position:relative;
	top:-20px;
	left:855px;
	z-index: 100;
}

.slideshow .slides-nav li {
	width:12px; /* width + 2px for the border of each square assigned to each slide */
	height:12px;
	background-color: #ffffff;
	border: 1px solid #ccc;
	margin-left:5px;
	float: left;
}

.slideshow .slides-nav li a {
	display: block;
	padding: 6px;
	outline: none;
}

.js .slideshow .slides-nav li.on,
.js .slideshow .slides-nav li.on a {
	background-color: #000000; /* indicator for which slide is visible using a color fill */
}

.js .slideshow .slides-nav li.on a {
	position: relative;
}