/**
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="images" />
		<div class="captions" />
		<div class="controller" />
		<div class="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;
}


/**
HTML:
	<div class="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 {
height : 214px;
width : 190px;
overflow : auto;
position : relative;
}
.slideshow-images-visible {
opacity : 1.0;
}
.slideshow-images-prev {
opacity : 0.0;
}
.slideshow-images-next {
opacity : 0.0;
}
.slideshow-images img {
position : static;
}
.slideshow-images ul {
list-style-type : none;
margin : 0;
padding : 0;
width : 950px;
position : absolute;
top : 0;
left : 0;
}
.slideshow-images ul.two{width:1140px}
.slideshow-images ul li {
float : left;
margin : auto auto;
}
.slideshow {background: #fff; color:#ddd;
height : 218px;
margin : 0 auto;
width : 190px;
top : 0px; border: outset 1px;
}
.slideshow a img {
border : 0;
}
.slideshow-captions {
background : #fff;
bottom : 0;
color : #999;
font : normal 12px/22px Arial, sans-serif;
left : 0;
overflow : hidden;
position : absolute;
text-indent : 10px;
width : 100%;
z-index : 10000;
}
.slideshow-captions-hidden {
height : 0;
opacity : 0.0;
}
.slideshow-captions-visible {
height : 22px;
opacity : 0.7;
}


/**
HTML:
	<div class="controller">
		<ul>
			<li class="first"><a /></li>
			<li class="prev"><a /></li>
			<li class="pause play"><a /></li>
			<li class="next"><a /></li>
			<li class="last"><a /></li>
		</ul>
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the controller animation.
*/

.slideshow-controller {
/*background : url(noise1.gif) 0 50% repeat-x;*/
height: 58px;/*was42*/
left: 50%;/*was50*/
margin: 30px/*was 90px*/ 0 10px/*was0*/ -119px;
overflow: hidden; 
position: absolute;
top: 82%; /*was50%*/
width: 238px;
z-index: 10000;
}

.slideshow-controller * {
margin : 0;
padding : 0;
}
.slideshow-controller-hidden {
opacity : 1.0;/*was0*/
}
.slideshow-controller-visible {
opacity : 1.0;
}
.slideshow-controller a {
cursor : pointer;
display : block;
height : 19px;
overflow : hidden;
position : absolute;
top : 12px;background: #ccc; color: #fc9; border: 1px outset #ddd;
}
.slideshow-controller a.active {
background-position : 0 19px; background: #666; color: #fc9; border: 1px outset #ccc;
}


.slideshow-controller li {
list-style : none;
}
.slideshow-controller li.first a {
background-image : url(2controller-first.gif);
left : 56px;/*was33*/
width : 19px;
}
.slideshow-controller li.last a {
background-image : url(2controller-last.gif);
left : 163px;/*was186*/
width : 19px;
}
.slideshow-controller li.next a {
background-image : url(2controller-next.gif);
left : 135px;/*was145*/
width : 28px;
}
.slideshow-controller li.pause a {
background-image : url(2controller-pause.gif);
left : 109px;
width : 20px;
}
.slideshow-controller li.play a {
background-image : url(80controller-play.gif);
}
.slideshow-controller li.prev a {
background-image : url(2controller-prev.gif);
left : 75px;/*was65*/
width : 28px;
}
.slideshow-loader {
height : 28px;
right : 0;
position : absolute;
top : 0;
width : 28px;
z-index : 10001;
}
.slideshow-loader-hidden {
opacity : 0.0;
}
.slideshow-loader-visible {
opacity : 1.0;
}