#lightbox {z-index: 100; left: 0px; width: 100%; line-height: 0; position: absolute; text-align: center;}
#lightbox img {width: auto; height: auto;}

#outerImageContainer {margin: 0px auto; width: 250px; position: relative; height: 250px; background-color: #fff;}
#imageContainer {padding: 10px;}
#loading {left: 0%; width: 100%; line-height: 0; position: absolute; top: 40%; height: 25%; text-align: center;}
#hoverNav {z-index: 10; left: 0px; width: 100%; position: absolute; top: 0px; height: 100%;}
#imageContainer > #hoverNav {left: 0px;}
#hoverNav A {outline: none;}
#prevLink {display: block; background: url(/images/prev.gif) no-repeat 0 50px; width: 50%; height: 100%}
#nextLink {display: block; background: url(/images/next.gif) no-repeat 100% 50px; width: 49%; height: 100%}
#prevLink {left: 0px; float: left;}
#nextLink {right: 0px; float: right;}
#prevLink:hover {background: url(/images/prev.gif) no-repeat 0 50px;}
#prevLink:hover:visited {background: url(/images/prev.gif) no-repeat 0 50px;}
#nextLink:hover {background: url(/images/next.gif) no-repeat 100% 50px;}
#nextLink:hover:visited {background: url(/images/next.gif) no-repeat 100% 50px;}
#imageDataContainer {margin: 0px auto; font: 10px Verdana, Helvetica, sans-serif; overflow: auto; width: 100%; background-color: #fff}
#imageData {padding:0 10px; color: #666;}
#imageData #imageDetails {float: left; width: 70%; text-align: left;}
#imageData #caption {font-weight: bold;}
#imageData #numberdisplay {clear: left; display: block;}
#imageData #bottomNavClose {float: right; padding-bottom: 0.7em; width: 15px; outline: none;}
#overlay {z-index: 90; left: 0px; width: 100%; position: absolute; top: 0px; height: 500px; background-color: #000}

