#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: #111; width: 10px; height: 10px; margin: 0 auto; }

#imageContainer{ padding: 5px; }



#loading{ position: absolute; top: 50%; 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: 50%; 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/prev.png) left 50% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(../images/next.png) right 50% no-repeat; }



#imageDataContainer{ 
	font: 0.85em
	font-family:Helvetica,Arial,Verdana,Sans-Serif;
	background-color: #111; 
	margin: 0 auto; 
	line-height: 1.2em; 
	overflow: auto; 
	width: 100%	; 
}



#imageData{	
	padding: 5px; color: #fff; 
}


#imageData #imageDetails{ 
	width: 70%; 
	float: left; 
	text-align: left; 
}
	

#imageData #caption{ 
	font-weight: thin;
}


#imageData #numberDisplay{
	display: block; 
	clear: left; 
	padding-bottom: 0.1em;	
}
			

#imageData #bottomNavClose{ 
width: 9px;
float: right;
padding-top: 2px; 
outline: none;
}
	 	


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