/*
Stylesheet: Slideshow.css
	Slideshow.css - CSS for Slideshow.

License:
	MIT-style license.

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

/*
These styles 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.

modified by tee peng (lotusseedsdesign.com)
*/
#show {float:left;width: 626px;background:#B9D8EF url(../images/slidebg.jpg) no-repeat center center;height: 201px;margin-left: 10px;padding: 3px;
}

.slideshow-images {
		/* height: height_of_slideshow_or_default_image */
	overflow: hidden;
	position: relative;
	/* width: width_of_slideshow_or_default_image */
}		
.slideshow-images img {
	display: block;left:  0;
	position: absolute;
	z-index: 1;
}		
.slideshow-thumbnails {
	overflow: hidden;
}

/*
The images div is where the slides are shown.
Customize these classes to effect the slideshow transitions: fading, wiping, etc.
*/

.slideshow-images-visible { 
	left: 0; 
	opacity: 1; 
	top: 0; 
}	
.slideshow-images-next { 
	left: 0; 
	opacity: 0; 
	top: 360px; 
}
.slideshow-images-prev { 
	left: 0; 
	opacity: 0; 
	top: -360px; 
}

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

.slideshow {

	height: 202px;
	margin: 0 auto;
	text-align: center;
	width:626px;
}
.slideshow img {width:626px;}

.slideshow-captions {
	background: #fff;
	bottom: 0;
	color: #000;
	font-size: .9em;;
	left: 0;text-align: left;
	overflow: hidden;
	position: absolute;
	text-indent: 10px;
	width: 100%;
	z-index: 10000;opacity: 0.26;}
.slideshow-captions-hidden {
	height: 0;
	opacity: 0;
}
.slideshow-captions-visible {
	height: 2em;
	opacity: 0.5;
}

.slideshow-controller {
	background: url(img/controller.png) no-repeat;
	height: 42px; 
left: 40%;top: 25%;
	overflow: hidden;
	position: absolute;	width: 500px;
	z-index: 10000;
}
.slideshow-controller * {	margin: 0;	padding: 0;}
.slideshow-controller-hidden { opacity: 0;}
.slideshow-controller-visible {opacity: .5;}
.slideshow-controller a {
	cursor: pointer;
	display: block;
	height: 18px;
	overflow: hidden;
	position: absolute;
	top: 12px;
}
.slideshow-controller a.active {
	background-position: 0 18px;
}
.slideshow-controller li {
	list-style: none;}
.slideshow-controller li.first a {
	background-image: url(img/controller-first.gif);
	left: 33px;width: 19px;}
.slideshow-controller li.last a {
	background-image: url(img/controller-last.gif);
	left: 186px;width: 19px;}
.slideshow-controller li.next a {
	background-image: url(img/controller-next.gif);
	left: 145px;width: 28px;}
.slideshow-controller li.pause a {
	background-image: url(img/controller-pause.gif);
left: 109px;width: 20px;}
.slideshow-controller li.play a {background-image: url(img/controller-play.gif);}
.slideshow-controller li.prev a {
	background-image: url(img/controller-prev.gif);
	left: 65px;width: 28px;}

.slideshow-images img { 	float: left;}	

.slideshow-loader {height: 28px;right: 0;position: absolute;
	top: 0;width: 28px;z-index: 10001;}
.slideshow-loader-hidden {opacity: 0;}
.slideshow-loader-visible {opacity: 1;}