/* root element for the whole scrollable setup */
div.scrollable { position:relative; overflow:hidden; width: 646px; height:300px; }
/* custom positioning for navigational links */
a.prev, a.next { margin-top:118px; }

/* this makes it possible to add next button beside scrollable */
div.scrollable { float:left; }
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage { display:block; width:18px; height:18px; background:url(../images/scrollable/left.png) no-repeat; float:left; margin:43px 10px; cursor:pointer; }
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover { background-position:0px -18px; }
/* disabled navigational button */
a.disabled { visibility:hidden !important;	 }
/* next button uses another background image */
a.next, a.nextPage { background-image:url(../images/scrollable/right.png); clear:right; }


/*********** navigator ***********/

/* position and dimensions of the navigator */
div.navi { width:200px; height:20px; }
/* items inside navigator */
div.navi a { width:8px; height:8px; float:left; margin:3px; background:url(../images/scrollable/navigator.png) 0 0 no-repeat; cursor:pointer; }
/* mouseover state */
div.navi a:hover { background-position:0 -8px; }
/* active state (current page state) */
div.navi a.active { background-position:0 -16px; }