#lightbox
{ position: absolute; left: 0; width: 100%; z-index: 100; text-align: 
center; line-height: 0;} #lightbox img{ width: auto; height: auto;} 

#lightbox 
a img{ border: none; } #outerImageContainer{ position: relative; background-color: 
#433D38; width: 250px; height: 250px; margin: 0 auto; } 

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

#hoverNav{ position: absolute; top: 
0; left: 0; height: 100%; width: 100%; z-index: 10; } 

#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;} 

#nextLink { right: 0; float: right;} 

#prevLink:hover, #prevLink:visited:hover { background: url(../graphics/arrow-left.gif) 
left 15% no-repeat; } 

#nextLink:hover, #nextLink:visited:hover { background: url(../graphics/arrow-right.gif) 
right 15% no-repeat;} 

#imageDataContainer{ font: 11px Calibri, Arial, Helvetica, sans-serif; color: #999999;
background-color: #433D38; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 
100% ; } 

#imageData{ padding:0 4px; color: #ffff; } 

#imageData #imageDetails{width: 100%; float: left; text-align: center; } 
#imageData #caption{ font: 12px Calibri, Arial, Helvetica, sans-serif; color:white; font-style:italic} 

#imageData 
#numberDisplay{ display: block; clear: left; padding-bottom: 
1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 
0.7em; outline: none;} 

#overlay{ position: absolute; top: 0; left: 0; z-index: 
90; width: 100%; height: 500px; background-color: #433D38; } 

#outerImageContainer #bottomNav{ position: absolute; top: 0px; right: 0px; z-index: 200; padding:2px;}