#overlay {
   position: absolute;
   top: 0; left: 0;
   z-index: 90;
   width: 100%; height: 100%;
   background-color: #8C8C8C;
   }


#lightbox {
   position: absolute;
   margin-left: 100px;
   margin-top: 0px;
   z-index: 100;
   border: 0;
   background-color: #ffffff;
   }


   #imageDataContainer {
      font: 10px Verdana, Helvetica, sans-serif;
      background-color: #ffffff;
      overflow: auto;
      }

      #imageData {padding-top:10px; padding-left:10px; color: #666;}
         #imageData #imageDetails {width: 300px; float: left; text-align: left;}
         #imageData #caption {font-weight: bold;}
         #imageData #numberDisplay {display: block; clear: left; color: #CB1709;}
         #imageData #bottomNavClose {width: 150px; float: right; outline: none;}


   #outerImageContainer {
      position: relative;
      background-color: #ffffff;
      }
      #imageContainer {padding-left: 10px; padding-right:10px; padding-bottom:0px;}

         #lightbox img {width: auto; height: auto;}
         #lightbox a img {border: none;}


         #hoverNav {
            position: absolute; top: 0px; left: 0px;
            height: 413px; width: 520px;
            }
         #imageContainer>#hoverNav {left: 0;}
         #hoverNav a {outline: none;}

            #prevLink, #nextLink {
               width: 49%; height: 100%;
               background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */
               display: block;
               }
            #prevLink {left: 0; float: left; background: url(../images/prevlabel.gif) left 55% no-repeat;}
            #nextLink {right: 0; float: right; background: url(../images/nextlabel.gif) right 55% no-repeat;}

         #loading {
           position: absolute; top: 40%; left: 0%;
           height: 25%; width: 100%;
           text-align: center;
           line-height: 0;
           }