/**
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 five rules are required for Slideshow to work correctly.
	Override at your own risk.
*/

.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;
}
.slideshow-thumbnails ul {
	left: 0; position: absolute; top: 0; width: 100000px;
}
*/
/**
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 {
	height: 450px; width: 450px;
}		
.slideshow-images-visible { 
	opacity: 1;
}	
.slideshow-images-prev { 
	opacity: 0;
}
.slideshow-images-next { 
	opacity: 0;
}
.slideshow-images img {
	float: left; left: 0; top: 0;
}	

/**
Notes:
	These are examples of user-defined styles.
	Customize these classes to your usage of Slideshow.
*/

.slideshow { height: 300px; width: 500px; margin-top: 0; margin-right: auto; margin-bottom: 0; margin-left: auto; }
body { background-color: #000; }

.slideshow a img {
	border: 0;
}

/**
HTML:
	<div class="slideshow-captions">
		...
	</div>
	
Notes:
	Customize the hidden / visible classes to affect the captions animation.
*/

.slideshow-captions { background: #000; bottom: 20; color: #CCC; left: 0; overflow: hidden; position: absolute; text-indent: 10; width: 500px; z-index: 10000; font-family: Arial, sans-serif; font-size: 12px; font-style: normal; line-height: 22px; font-weight: normal; font-variant: normal; text-align: center; }
.slideshow-captions-hidden {
	height: 0; opacity: 0;
}
.slideshow-captions-visible {
	height: 22px; opacity: .7;
}


/*
.slideshow-thumbnails { /* [disabled]bottom: -150px; *//* [disabled]height: 100px; *//* [disabled]left: 0; */ position: absolute;/* [disabled]width: 100%; *//* }
.slideshow-thumbnails * { margin: 0; padding: 0; }
.slideshow-thumbnails li {
	float: left; list-style: none;
}
.slideshow-thumbnails a { display: block; float: left; outline: none; margin: 5px 5px 0 0; padding: 1px; }
.slideshow-thumbnails a:hover { background-color: #000 !important; opacity: 1 !important; }
.slideshow-thumbnails img {
	display: block;
}
.slideshow-thumbnails-hidden {
	background-color: #FFF; opacity: 0;
}
.slideshow-thumbnails-inactive { background-color: #FFF; opacity: .5; }
.slideshow-thumbnails-active { background-color: #CCC; opacity: 1; }
*/