/*
root element for the scrollable.
when scrolling occurs this element stays still.
*/
div.scroller {position:relative; width:654px; margin:0 auto; }


.scrollable {


/* required settings */
position:relative;
overflow:hidden;
width: 578px;
height:303px;


/* custom decorations */
border:1px solid #ccc;
background:#E0EAEF url('../../images/layout/h300.png') left bottom repeat-x;
/* add ons */
float:left; /* this makes it possible to add next button beside scrollable */
}


/*
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:10px 5px 10px 11px;
background-color:#fff;
padding:2px;
border:1px solid #ccc;
cursor:pointer;
width:550px;
height:275px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
}


/* active item */
.scrollable .active {
border:2px solid #000;
z-index:9999;
position:relative;
}




/* prev, next, prevPage and nextPage buttons */
.scroller a.browse {
background:url('../../images/plugins/scrollable-hori_large.png') no-repeat;
display:block;
width:27px;
height:27px;
float:left;
margin:135px 5px;
cursor:pointer;
font-size:1px;
}


/* right */
.scroller a.rightside { background-position: 0 -27px; clear:right; margin-right: 0px;}
.scroller a.rightside:hover { background-position:-27px -27px; }
.scroller a.rightside:active { background-position:-54px -27px; } 




/* left */
.scroller a.leftside { margin-left: 0px; } 
.scroller a.leftside:hover   { background-position:-27px 0; }
.scroller a.leftside:active   { background-position:-54px 0; }


/* up and down */
.scroller a.up, .scroller a.down { 
background:url('../../images/plugins/scrollable-vert_large.png') no-repeat; 
float: none;
margin: 10px 50px;
}


/* up */
.scroller a.up:hover   { background-position:-27px 0; }
.scroller a.up:active   { background-position:-54px 0; }


/* down */
.scroller a.down { background-position: 0 -27px; }
.scroller a.down:hover   { background-position:-27px -27px; }
.scroller a.down:active   { background-position:-54px -27px; } 




/* disabled navigational button */
.scroller a.disabled {
visibility:hidden !important; 
}