/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
.scrollable{/* required settings */
position:relative;overflow:hidden;width:680px;height:120px;/* custom decorations */
border:1px solid #ccc;background:url(img/h300.png) repeat-x;margin-bottom:15px;}
/*
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;}
/* single scrollable item */
.scrollable img{float:left;margin:20px 5px 20px 21px;background-color:#fff;padding:2px;border:1px solid #ccc;cursor:pointer;width:100px;height:75px;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}
.scrollable img.hover{border-color:#333;}
/* active item */
.scrollable img.active{border:2px solid #333;z-index:9999;position:relative;}
#image_wrap{/* dimensions */
width:600px;position:relative;margin:0 0 15px 40px;padding:0;position:relative;/* some "skinning" */
background-color:#efefef;border:2px solid #fff;outline:1px solid #ddd;-moz-outline-radius:4px;}
#image_wrap img{position:absolute;padding:0;}
/* Now the buttons */
/* !!! Buttons CSS code Start */
/* this makes it possible to add next button beside scrollable */
.scrollable{float:left;}
/* prev,next,prevPage and nextPage buttons */
a.browse{background:url(img/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;}
/* disabled navigational button */
a.disabled{visibility:hidden !important;}
div.scrollable div.items div {float: left;}