#mainContainer, #imgsContainer { margin: 0 auto; width: 360px; text-align: left; background-color: #FFF; padding: 0px; border: 0px solid #317082; float: left; width: 360px; }
.clear { clear: both; }
/* End of demo CSS */
#DHTMLgoodies_panel_one, #DHTMLgoodies_arrows, #DHTMLgoodies_thumbs { /* Width of divs for thumbnails */ width: 356px; border: solid 0px green; }
#DHTMLgoodies_panel_one { float: left; }
#DHTMLgoodies_arrows { margin-top: 2px; float: left; width: 348px; height: 31px; vertical-align: top; margin-left: 3px; background-color: #CACED9; }
#DHTMLgoodies_arrows img { border-top: solid 1px #CACED9; }
.DHTMLgoodies_thumbs {  overflow: hidden; /* Don't change this */ height: 160px; /*Height of thumbnail div */ position: relative; /* Never change this */ float: left; background-color: White; }
.DHTMLgoodies_thumbsSmall {  overflow: hidden; /* Don't change this */ height: 80px; /*Height of thumbnail div */ position: relative; /* Never change this */ float: left; background-color: White; }
#DHTMLgoodies_largeImage {/* Large image div */ width: 360px; /* Width of large image div */ /*     height:310px;*/ /* Height of large image div */ float: left; padding-left: 3px; /* "Air" */ padding-right: 0px; }
#DHTMLgoodies_largeImage table { /* Used table to get both horizontal and vertical center alignement of large image */ width: 100%; height: 100%; text-align: left; }
#DHTMLgoodies_largeImage img { /* Large image */ border: 0px solid #317082; /* Border around large image */ }

.strip_of_thumbnails { /* A vertical strip of thumbnails */ width: 86px; /* Width of strip */ padding: 1px; /* "Air" inside filmstrip div */ position: absolute; border: solid 0px red; }
.strip_of_thumbnails div { width: 84px; height: 70px; padding: 2px; text-align: center; }
.strip_of_thumbnails img, .strip_of_thumbnails .activeImage { border: 0px; padding: 2px; width: 80px; height: 60px; }

.leftArrow { float: left; }
.rightArrow { float: right; }
#DHTMLgoodies_thumbs_inner { position: relative; /* Never change this */ width: 1000px; }
/* light box */
#lightbox { position: absolute; top: 0px; left: 0; width: 100%; z-index: 100; text-align: center; }

#lightbox a img { border: none; }

#outerImageContainer { position: relative; background-color: #f7f6f1; width: 250px; height: 250px; margin: 0 auto; border: 1px #CCC solid; border-bottom: 0px; }

#imageContainer { padding: 10px; }

#loading { position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; }
#hoverNav { position: absolute; top: 0; left: 0; height: 0px; width: 0px; z-index: 0; }
#imageContainer > #hoverNav { left: 0; }
#hoverNav a { outline: none; }

#prevLink, #nextLink { width: 49%; height: 100%; background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left; }
#nextLink { right: 0; float: right; }
#prevLink2, #nextLink2 { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #21314B; font-weight: bold; cursor: pointer; }

#imageDataContainer { font: 14px Arial, Helvetica, sans-serif; background-color: #f7f6f1; height: 35px; border: 1px #ccc solid; border-top: 0px; margin: auto; }

#imageData { padding: 0px 10px 10px 10px; }
#imageData #imageDetails { width: 50%; float: left; text-align: left; }
#imageData #caption { font-weight: bold; font-size: 11px; color: #666; max-height: 20px; }
#imageData #numberDisplay { display: block; clear: left; font-weight: normal; font-size: 11px; color: #333; padding-bottom: 5px; }
#imageData #slideshowLink { width: 55px; float: right; padding: 5px 0px 0 0px; }
#imageData #bottomNavClose { width: 55px; float: right; padding: 5px 0px 0 0px; }

#overlay { position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }

* html > body .clearfix { display: inline; width: 100%; }

* html .clearfix { /* Hides from IE-mac \*/ height: 1%; /* End hide from IE-mac */ }
.img350 { max-width: 350px; width: auto !important; width: 350px; width: expression( this.scrollWidth > 350 ?   "350px" : "auto" ); }


