/*Start all these rules with .divGallery or some container to prevent conflicts with other parts of the page*/
.divGallery{width:446px;margin: 0 auto;  visibility: hidden;/*initially*/}
.divGalleryEmpty{width:446px;margin: 20px auto; display:none; text-align:center;}
.divGallery td{ vertical-align:top; text-align:left;}
.divGallery .pics{ width:400px; height:400px;margin: 0 23px; overflow:hidden; background:url(images/gallery/loadanime.gif) no-repeat center center;}
.mainImageCropBox{width:400px; height:400px;overflow: hidden;}
.divGallery .pics img{display:block;}

/*Slide Control Box*/
.divGallery .divSlideControls{background:url(images/gallery/topbox.jpg) no-repeat top right;width: 250px;margin: 0 auto; padding: 19px 0px 15px 0px;}
.divGallery .divSlideControls table{ margin: 0px 20px;}
.divGallery .divSlideControls .prev2, .divGallery .divSlideControls .next2{width:87px; height:20px; cursor:pointer;display:inline-block;}
.divGallery .divSlideControls .prev2{background:url(images/gallery/previous.jpg) no-repeat;}
.divGallery .divSlideControls .next2{background:url(images/gallery/next.jpg) no-repeat;}
.divGallery .divSlideControls .sPagerState{display:inline-block; width:42px; height:17px; overflow:hidden; text-align:center;
                                           padding-top:3px; font-size:13px;}
.divGallery .divSlideControls .divStartStop{cursor:pointer; display:block; width:105px; margin: 0 auto; text-align:center;padding-left:24px; 
                                            background:url(images/gallery/photoicon.jpg) no-repeat top left;margin-top:7px; font-size:13px;}
.divGallery .divSlideControls .divStartStop:hover{text-decoration:underline;}


/*Instructions Box*/
.divGallery .divInstBack{width:100%; margin:0 auto; height:45px; background:url(images/gallery/greydot.jpg) repeat-x left 23px;}
.divGallery .divInstBack .divInst{width:313px; margin: 0 auto;background-color:White; text-align:center;
                                  font-style:italic;padding-top:15px;font-size:13px;}

/*Thumbnail List Box*/
.divGallery .divFilmStrip{background:url(images/gallery/bottomBox.jpg) no-repeat left bottom;}
.divGallery .tblFilmStrip{ width:446px; }
.divGallery .divNavFrame{ height:136px;width:380px; position:relative; overflow:hidden;}
.divGallery .nav {position:absolute;top:0px;left:0px;height:100%;margin:0;padding:0;width:10000px;}
.divGallery .nav li {width:83px;/*width=77+3+3*/ float: left; margin:0 6px 0 6px; list-style: none; padding:0px; background:none; }
.thumbCropBox{width:77px; height:77px;overflow: hidden; position:relative;}
.divGallery .nav span{font-size:0.8em;line-height: 0.9em; }
.divGallery .nav a:hover{cursor:pointer;text-decoration: underline;}
.divThumbStatus{padding:3px;width:77px;margin-bottom:2px;display:block;}
.divGallery .nav .activeSlide .divThumbStatus{background:#afaeac;}
.divGallery .nav a:focus {outline-style:none;}
.divGallery .thumb{border:none;}

.divGallery .tPagerPrev, .divGallery .tPagerNext{width:21px; height:35px; overflow:hidden; cursor:pointer;position:relative;top:16px;}
.divGallery .tPagerPrev{ background:url(images/gallery/leftarrow.jpg) no-repeat;margin: 0px 2px 0px 10px;}
.divGallery .tPagerNext{ background:url(images/gallery/rightarrow.jpg) no-repeat; margin: 0px 10px 0px 2px;}
.divGallery .tdPrevArrow{width:33px;text-align:right;}
.divGallery .tdNextArrow{width:33px;text-align:left;}

.divGallery .hiddenLabel{display:none;}

/*Title and Content*/
#mainImageTitle{width:400px;margin: 0 23px;padding: 5px 0;overflow: hidden; text-align:center;}
/*Content: Idea: When content exists display small icon in corner of main image. Upon hover show content in trans container over main image.*/
.divGallery .divContent{width:400px; margin:0 23px; padding: 23px 0; text-align:left; overflow-x:hidden; overflow-y:auto;}