/* the thumbnails */
#triggers {text-align:center;}
#triggers img {background-color:#fff;border:1px solid #ccc;margin:15px 2px;padding:2px;-moz-border-radius:4px;-webkit-border-radius:4px;}
/* the active thumbnail */
#triggers a.active img {outline:1px solid #000;z-index:9999;position:relative;}
/* the large image. we use a gray border around it */
#img {border:0;}
/* "next image" and "prev image" links */
.next, .prev {position:absolute;top:40%;border:1px solid #666;cursor:pointer;display:block;padding:10px 20px;color:#fff;font-size:11px;}
.prev {left:0;border-left:0;}
.next {right:0;border-right:0;}
.next:hover, .prev:hover {background-color:#000;text-decoration:underline;}
/* when there is no next or previous link available this class is added */
.disabled {visibility:hidden;}
/* the "information box" */
.info {position:absolute;bottom:0;left:0;padding:10px 15px;color:#fff;font-size:11px;border-top:1px solid #666;}
.info strong {display:block;}
/* progress indicator (animated gif). should be initially hidden */
.progress {position:absolute;top:45%;left:50%;display:none;}
/* everybody should know about RGBA colors. */
.next, .prev, .info {background:#333 !important;}
/* the overlayed element */
.simple_overlay {/* must be initially hidden */display:none;/* place overlay on top of other elements */z-index:10000;/* styling */background-color:#333;width:675px;min-height:200px;border:1px solid #666;}
/* close button positioned on upper right corner */
.simple_overlay .close {background-image:url(../img/close.gif);position:absolute;right:-15px;top:-15px;cursor:pointer;height:24px;width:24px;}