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

#slideshow-container {height: 530px;position: relative;}

.slideshow {display: block; position: relative;}
.slideshow-images {display: block;height: 308px;overflow: hidden;position: relative;width: 411px;top: 36px;left: 85px;}
.slideshow-images img {display: block;position: static;float: left;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: 400px; }
.slideshow-images-prev { left: 0; opacity: 0; top: -400px; }

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

.slideshow {height: 380px;margin: 0 auto;width: 580px;background: #fff url(../img/photo-bg.png) top center no-repeat;}
.slideshow a img {border: 0;}

.slideshow-captions {background: #000;bottom: -12px;color: #FFF;font: normal 11px/22px Arial, sans-serif;left: 65px;overflow: hidden;position: absolute;text-align: center;width: 450px;z-index: 10000;}
.slideshow-captions-hidden {height: 0;opacity: 0;}
.slideshow-captions-visible {height: 22px;opacity: .7;}

.slideshow-controller {background: url(../img/controller.png) no-repeat;height: 42px;left: 50%;margin: -21px 0 0 -119px;overflow: hidden;position: absolute;top: 50%;width: 238px;z-index: 10000;}
.slideshow-controller * {margin: 0;padding: 0;}
.slideshow-controller-hidden { opacity: 0;}
.slideshow-controller-visible {opacity: 1;}
.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;}

.slideshow-thumbnails {bottom: -120px;height: 100px;left: 0;position: absolute;width: 100%;overflow: auto;}
.slideshow-thumbnails * {margin: 0;padding: 0;}
.slideshow-thumbnails ul {height: 100px;left: 0;position: absolute;top: 0;width: 1400px;}
.slideshow-thumbnails li {float: left;list-style: none;margin: 2px 10px 2px 0;position: relative;}
.slideshow-thumbnails a {display: block;padding: 6px;position: relative;border: 1px solid #eaeaea;}

/*
Use the !important keyword to override any on-going javascript FX without affecting performance.
*/
.slideshow-thumbnails a:hover {border: 1px solid #999;opacity: 1 !important;}
.slideshow-thumbnails img {display: block;}
.slideshow-thumbnails-active {border: 1px solid #ccc;opacity: 1;}
.slideshow-thumbnails-inactive {background-color: #FFF;opacity: .5;}