/* Enhanced gallery styles */

#photoGallery {clear: both; display: none; position: relative; padding: 0 0 35px; width: 680px; height: 730px;}

/* TODO filter drop-downs */
#projectFilters {margin: 15px 0 5px; font-size: 12px;}
#projectFilters select {margin: 0; font-size: 11px; width: 115px; vertical-align: top;}
#projectFilters input {vertical-align: top;}

form#matchingProjects {margin: 0 0 10px; font-size: 12px;}
form#matchingProjects select {font-size: 11px; width: 115px;}

/* Main image area (left) */
#photoGalleryMain {position: relative; float: left; margin: 0; padding: 0; width: 480px; height: 640px;}
.slideshow-container,
.loader,
.slideshow a.advance-link {width: 480px;} /* This should be set to be at least the width of the largest image in the slideshow with padding */

.loader,
.slideshow a.advance-link,
.caption-container {height: 322px;} /* This should be set to be at least the height of the largest image in the slideshow with padding */

.slideshow-container {position: absolute; left: 0; top: 0; width: 480px; height: 322px;}
.loader {position: absolute; top: 0; left: 0; width: 480px; height: 322px; background-image: url('/loadingIcon.gif'); background-repeat: no-repeat; background-position: center;}

.slideshow {position: absolute; top: 0; left: 0; width: 480px; height: 322px;}
.slideshow span.image-wrapper {display: block; position: absolute; top: 0; left: 0; top: 0; left: 0; width: 480px; height: 322px;}
.slideshow a.advance-link {position: absolute; left: 0; top: 0; display: block; width: 480px; height: 322px; line-height: 427px; text-align: center; text-decoration: none !important; outline: none;} /* This  should be set to be at least the height of the largest image in the  slideshow with padding */
.slideshow img {border: 0; position: absolute; left: 0; top: 0;}

.controls {position: absolute; left: 0; top: 0; width: 480px; height: 322px;}
.controls a {outline: none;}
.controls .ss-controls {position: absolute; left: 0; top: 0; width: 20px; height: 20px;}
.controls .ss-controls .play {float: left; display: block; width: 20px; height: 20px; text-indent: -999px; background: url('/gallery-button-play.gif') no-repeat; overflow: hidden; font-size: 0px; line-height: 0px;}
.controls .ss-controls .pause {float: left; display: block; width: 20px; height: 20px; text-indent: -999px; background: url('/gallery-button-pause.gif') no-repeat; overflow: hidden; font-size: 0px; line-height: 0px;}
.controls .nav-controls {position: absolute; left: 0; top: 0;}
.controls .nav-controls .prev {position: absolute; left: 0; top: 115px; display: block; width: 30px; height: 75px; text-indent: -999px; background: url('/gallery-prev-slide.png') no-repeat; overflow: hidden; font-size: 0px; line-height: 0px;}
.controls .nav-controls .next {position: absolute; left: 450px; top: 115px; display: block; width: 30px; height: 75px; text-indent: -999px; background: url('/gallery-next-slide.png') no-repeat; overflow: hidden; font-size: 0px; line-height: 0px;}

.caption-container {display: none;}
.photo-index {position: absolute; bottom: 0; left: 0; padding: 0 12px;}

span.image-caption {display: block; position: absolute; top: 0; left: 0;}
.caption-container, span.image-caption {width: 480px;}

#projectDetails {position: absolute; left: 0; top: 326px; width: 476px; border: solid 2px #ccc; background: #F2ECEC;}
#projectDetails .inner {padding: 5px; font-size: 11px; line-height: 18px;}
#projectDetailLeft {float: left; margin: 5px 0 0; width: 30%;}
#projectDetailRight {float: left; margin: 5px 0 0; width: 66%;}
#projectDetailRight .productThumb {float: left; margin: 0 0 0 15px; width: 60px; text-align: center;}
#projectDetailRight .productThumb a img {text-decoration: none; outline: none;}

/* Thumbnail nav area (right) */
#photoGalleryThumbs {position: relative; float: left; margin: 0 0 0 6px; padding: 0; width: 194px; height: 640px;}
#thumbsHeader {position: absolute; left: 0; top: -30px; width: 194px; height: 20px; line-height: 20px; font-size: 11px; font-weight: bold; text-align: center;}
#thumbs {position: relative; width: 194px; height: 640px; overflow: hidden; text-align: center;}
#thumbs a.pageLink {width: 100px; height: 30px;}
ul.thumbs {list-style: none; margin: 0 auto; padding: 0; width: 150px;}
li.thumb {display: block; margin: 0; padding: 0;}
a.thumb {float: left; display: block; margin: 0 0 5px; width: 150px; outline: none; text-align: center;}
a.thumb img {vertical-align: bottom; margin: 0 auto;}
ul.thumbs img {}
li.thumb a {text-decoration: none !important; outline: none;}