div.scrollable {position:relative; overflow:hidden; width:394px; height:535px}
div.scrollable div.items {/* this cannot be too large */ width:20000em; position:absolute; z-index:999}
div.scrollable div.items div {float:left; text-align:center; width:394px}
/* 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:28px; height:41px; background:url(../images/prearrow1.gif) no-repeat; cursor:pointer; z-index:10000000000;}
a.prevPage,a.prev {position:absolute; left:0px; top:50%}
a.nextPage,a.next {position:absolute; right:0; top:50%}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {background-position:0px 0}
/* disabled navigational button */
a.disabled {visibility:hidden !important}
/* next button uses another background image */
a.next {background:url(../images/nxtarrow1.gif) center top no-repeat}
a.next:hover {background:url(../images/nxtarrow1_over.gif) center top no-repeat; right:0; top:50%; width:28px; height:41px;}
a.prev {background:url(../images/prearrow1.gif) center top no-repeat}
a.prev:hover {background:url(../images/prearrow1_over.gif) center top no-repeat; left:0px; top:50%; width:28px; height:41px;}

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