/* 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; /* CSS3 styling for latest browsers */ -moz-box-shadow:0 0 90px 5px #000; -webkit-box-shadow: 0 0 90px #000}
/* close button positioned on upper right corner */ .simple_overlay .close {background-image:url(../images/overlay/close.png); position:absolute; right:-15px; top:-15px; cursor:pointer; height:35px; width:35px}
/* the large image. we use a gray border around it */ #img {border:1px solid #666}
/* "next image" and "prev image" links */ .next, .prev {/* absolute positioning relative to the overlay */ position:absolute; top:40%; border:1px solid #666; cursor:pointer; display:block; padding:10px 20px; color:#fff; font-size:11px; /* upcoming CSS3 features */ -moz-border-radius:5px; -webkit-border-radius:5px}
.prev {left:0; border-left:0; -moz-border-radius-topleft:0; -moz-border-radius-bottomleft:0; -webkit-border-bottom-left-radius:0; -webkit-border-top-left-radius:0}
.next {right:0; border-right:0; -moz-border-radius-topright:0; -moz-border-radius-bottomright:0; -webkit-border-bottom-right-radius:0; -webkit-border-top-right-radius:0}
.next:hover, .prev:hover {text-decoration:underline; background-color:#000}
/* 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; background:rgba(0, 0, 0, 0.6) url(/img/global/gradient/h80.png) repeat-x}
/* root element for the scrollable. when scrolling occurs this element stays still. */ .scrollable {/* required settings */ position:relative; overflow:hidden; width: 705px; height: 140px; /* custom decorations */ border:1px solid #ccc; background:url(/images/global/gradient/h300.png) repeat-x}
/* root element for scrollable items. Must be absolutely positioned and it should have a extremely large width to accomodate scrollable items. it's enough that you set the width and height for the root element and not for this element. */ .scrollable .items {/* this cannot be too large */ width:20000em; position:absolute; clear:both}
.scrollable .items .item {float:left; position:relative}
.scrollable .items .item span {position:absolute; top:5px; right:5px}
.scrollable .items .item span img {height:20px; width:20px; background:transparent}
/* single scrollable item */ .scrollable img {float:left; margin:10px 5px 10px 11px; background-color:#fff; padding:2px; border:1px solid #ccc; cursor:pointer; width:152px; height:115px; -moz-border-radius:4px; -webkit-border-radius:4px}
/* active item */ .scrollable .active {border:2px solid #000; z-index:9999; position:relative}
/* this makes it possible to add next button beside scrollable */ .scrollable {float:left}
/* prev, next, prevPage and nextPage buttons */ a.browse {background:url(../images/scrollable/arrow/hori_large.png) no-repeat; display:block; width:30px; height:30px; float:left; margin:40px 10px; cursor:pointer; font-size:1px}
/* right */ a.right {background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover {background-position:-30px -30px}
a.right:active {background-position:-60px -30px}
/* left */ a.left {margin-left: 0px}
a.left:hover {background-position:-30px 0}
a.left:active {background-position:-60px 0}
/* up and down */ a.up, a.down {background:url(../img/scrollable/arrow/vert_large.png) no-repeat; float: none; margin: 10px 50px}
/* up */ a.up:hover {background-position:-30px 0}
a.up:active {background-position:-60px 0}
/* down */ a.down {background-position: 0 -30px}
a.down:hover {background-position:-30px -30px}
a.down:active {background-position:-60px -30px}
/* disabled navigational button */ a.disabled {visibility:hidden !important}