/**

Stylesheet: Slideshow.css

	CSS for Slideshow.



License:

	MIT-style license.



Copyright:

	Copyright (c) 2008 [Aeron Glemann](http://www.electricprism.com/aeron/).

	

HTML:

	<div class="slideshow">

		<div class="slideshow-images" />

		<div class="slideshow-captions" />

		<div class="slideshow-controller" />

		<div class="slideshow-loader" />

		<div class="slideshow-thumbnails" />

	</div>

	

Notes:

	These next four rules are set by the Slideshow script.

	You can override any of them with the !important keyword but the slideshow probably will not work as intended.

*/



.slideshow {

	display: block;

	position: relative;

	z-index: 0;

}

.slideshow-images {

	display: block;

	overflow: hidden;

	position: relative;

}		

.slideshow-images img {

	display: block;

	position: absolute;

	z-index: 1;

}		

.slideshow-thumbnails {

	overflow: hidden;

}



/**

Notes:

	These are examples of user-defined styles.

	Customize these classes to your usage of Slideshow.

*/



.slideshow {

	width: 340px;

	height: 160px;

	margin: 0 auto;

	background: url("../images/back.png") no-repeat scroll 0 0 transparent; 

}

.slideshow a img {

	border: 0;

}

/**

HTML:

	<div class="slideshow-images">

		<img />

		<img />

	</div>

	

Notes:

	The images div is where the slides are shown.

	Customize the visible / prev / next classes to effect the slideshow transitions: fading, wiping, etc.

*/



.slideshow-images {

	width: 300px;

	height: 120px;

	left: 20px;

	top: 20px;

}		

.slideshow-images-visible { 

	opacity: 1;

}	

.slideshow-images-prev { 

	opacity: 0; 

}

.slideshow-images-next { 

	opacity: 0; 

}

.slideshow-images img {

	float: left;

	left: 0;

	top: 0;

	position: static;

}