/* ph_slideshow.css */

#Container {background-color: #dedede; border: 1px solid #999; font-size: 0px; height: 200px; margin: 0 auto; position: relative; top: 50px; width: 200px;} /* Note: "border: 1px solid #999;" is also set in slideshow.js to double this value. Somehow, they interact at a 1:2 ratio. Originally: border: 5px solid #bcbcbc; */
#CaptionContainer {background-color: #111; color: #bbb; font-size: 12px; font-weight: normal; margin: 0 auto;}
#CaptionContainer p {background-color: #111; margin: 53px 0 0 0; padding: 0;}
#Counter {background-color: #bbb; color: #000; font-size: 10px; font-weight: bold;}
#Caption {/* empty */}
#Photo {left: 0; position: absolute; top: 0; z-index: 5;}
#Loading {height: 25%; left: 0%; line-height: 0; position: absolute; text-align: center; top: 40%; width: 100%; z-index: 0;}
#LinkContainer {height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 10; /* filter:alpha(opacity:80); /* Specify opacity for IE */}
#PrevLink, #NextLink {background: transparent url(../images/slideshow/slideshow_dot.gif) no-repeat; cursor: pointer; display: block; height: 100%; width: 48%;} /* Background setting tricks IE into showing hover */
#PrevLink span, #NextLink span {display: none;}
#PrevLink {left: 0; float: left;}
#NextLink {right: 0; float: right;}

/* background image for IE */
#PrevLink:hover, #PrevLink:visited:hover {background: url(../images/slideshow/slideshow_prev.png) 20% 50% no-repeat;}
#NextLink:hover, #NextLink:visited:hover {background: url(../images/slideshow/slideshow_next.png) 80% 50% no-repeat;}

/* background image for compliant browsers */
#LinkContainer>#PrevLink:hover, #LinkContainer>#PrevLink:visited:hover {background: url(../images/slideshow/slideshow_prev.png) 20% 50% no-repeat;}
#LinkContainer>#NextLink:hover, #LinkContainer>#NextLink:visited:hover {background: url(../images/slideshow/slideshow_next.png) 80% 50% no-repeat;}