#lightbox{      position: absolute;     left: 0; width: 100%; z-index: 1000; text-align: left}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }

#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto;}
#imageContainer{padding:10px 10px 0px 10px; background: #FFF}
#imageContainer #caption,
#imageDataContainer #caption {font-weight: bold;font-size: 14px; margin: 5px; padding:5px 20px;text-align:center}
#imageContainer #bottomNavClose{ float: right; padding-bottom: 0.1em; outline: none;}
#imageContainer #numberDisplay{ font-size: 10px; display: block; text-align: right; padding-bottom: 0em; white-space: nowrap;}


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

#prevLink { width: 40px; height: 40px; display: block; background: url(/images/celticms/viewer/back.png) no-repeat scroll top left; float: left }
#nextLink { width: 40px; height: 40px; display: block; background: url(/images/celticms/viewer/next.png) no-repeat scroll top left; float: right }
#imageData #information { overflow: hidden; display: block; font-weight: bold; text-align: center; vertical-align: middle}

#imageDataContainer{ overflow: hidden; top: 0px; left: 0px; right: 0px; font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; width: 100%      ; }
* html body #imageDataContainer{ position: absolute; top: 0px}

#imageData #information {padding:0 10px; color: #666}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}

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