#overlay {
position : absolute;
top : 0;
left : 0;
z-index : 90;
width : 100%;
height : auto;
background-color : #00aaff;
}
#lightbox {
position : absolute;
top : 20px;
left : 0;
width : 100%;
z-index : 100;
text-align : center;
color : #707070;
line-height : 0;
}
#lightbox a, #lightbox a:hover {
border-bottom : none;
color : #707070;
text-decoration : underline;
}
#lightbox a img {
border : none;
}
#outerImageContainer {
width : auto;
height : auto;
margin : 0 auto;
position : relative;
}
#lightboxImage {
width : 100%;
height : 100%;
}
#imageContainerMain {
margin : 0 auto;
overflow : visible;
position : relative;
font-size : 0;
}
#imageContainer {
width : 50px;
height : 50px;
margin : 0 auto;
overflow : hidden;
position : relative;
font-size : 0;
}
#loading {
position : absolute;
top : 40%;
left : 0;
height : 25%;
width : 100%;
text-align : center;
font-size : 10px;
z-index : 1;
}
#loadingLink {
display : block;
margin : 0 auto;
padding : 0;
width : 60%;
height : 32px;
background : url(../images/loading.gif) center center no-repeat;
text-indent : -9999px;
}
#hoverNav {
position : absolute;
top : 0;
left : 0;
height : 100%;
width : 100%;
z-index : 10;
}
#imageContainer > #hoverNav {
left : 0;
}
#prevLinkImg, #nextLinkImg {
top : 0;
width : 48px;
height : 100%;
position : absolute;
z-index : 20;
outline-style : none;
display : block;
text-indent : -9999px;
}
#prevLinkImg {
left : 0;
}
#nextLinkImg {
right : 0;
}
#prevLinkImg:hover, #prevLinkImg.hover, #prevLinkImg:visited:hover {
background : url(../images/prev.png) 5% center no-repeat;
}
#nextLinkImg:hover, #nextLinkImg.hover, #nextLinkImg:visited:hover {
background : url(../images/next.png) 97% center no-repeat;
}
#imageDataContainer {
font : 12px/1.231 Trebuchet MS, "Lucida Grande", Arial;
width : 100%;
}
#imageData {
overflow : hidden;
width : 100%;
}
#imageDetails {
width : 70%;
float : left;
text-align : left;
padding : 10px 10px 0 0;
}
#caption {
display : block;
}
#numberDisplay {
display : block;
float : left;
padding : 2px 10px 0 0;
color : #339EFF;
}
#detailsNav {
display : block;
float : left;
padding : 0;
}
#prevLinkDetails, #nextLinkDetails, #slideShowControl {
background-repeat : no-repeat;
outline-style : none;
display : block;
float : left;
}
#prevLinkDetails {
margin : 2px;
width : 18px;
height : 18px;
background-position : left 100%;
background-image : url(../images/navigation.gif);
}
#prevLinkDetails:hover {
background-position : 0 0;
}
#nextLinkDetails {
margin : 2px;
width : 18px;
height : 18px;
background-position : right 100%;
background-image : url(../images/navigation.gif);
}
#nextLinkDetails:hover {
background-position : 100% 0;
}
#slideShowControl {
display : block;
width : 18px;
height : 18px;
float : left;
margin : 2px;
background-image : url(../images/navigation.gif);
background-position : -18px 100%;
background-repeat : no-repeat;
}
#slideShowControl:hover {
background-position : -18px 0;
}
#slideShowControl.started {
background-position : -36px 100%;
}
#slideShowControl.started:hover {
background-position : -36px 0;
}
#close {
padding : 16px 0 0;
float : right;
}
#closeLink {
display : block;
outline-style : none;
margin : 0;
padding : 0;
text-decoration : none;
width : 32px;
height : 32px;
background : url(../images/close.gif) 0 100% no-repeat;
}
#closeLink:hover {
background-position : 0 0;
}
.clearfix:after {
content : ".";
display : block;
height : 0;
clear : both;
visibility : hidden;
}
* html > body .clearfix {
display : inline-block;
width : 100%;
}
* html .clearfix {
height : 1%;
}
#outerImageFrame {
height : 100%;
width : 100%;
position : absolute;
}
#outerImageContainer {
overflow : visible;
}
#outerImageContainer td {
text-align : center;
padding : 0;
}
#lightboxFrameBody {
background : white;
}
#outerImageContainer td, #outerImageContainer tr {
font-size : 0;
border : none 0;
}
#outerImageContainer td.tl, #outerImageContainer td.br {
height : 50px;
width : 50px;
}