#lightbox
{position: absolute;
left: 0;
width: 100%;
z-index: 100;
text-align: center;
line-height: 0;
margin-top:-3em;}

#lightbox img
{width: auto;
height: auto;}

#lightbox a img
{border: none;}

#outerImageContainer
{position: relative;
background-color: #FFFFFF;
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(images/prevlabel.gif) left 15% no-repeat;}

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

#imageDataContainer
{font-family: Verdana, Helvetica, sans-serif;
font-size: 110%;
background-color: #FFFFFF;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%;}

#imageData
{padding:0 10px;
color: #666666;}

#imageData span
{font-size:85%;
font-weight:normal;}

#imageData a
{color: #CC9966;}

#imageData a:hover
{color: #990000;}

#imageData #imageDetails
{width: 70%;
float: left;
text-align: left;}
	
#imageData #caption
{font-weight: bold;}

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