/* 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:15px; height:32px; background:url(../img/prev-horizontal.png) no-repeat; float:left; margin: 38px 0px; cursor:pointer; }

/* mouseover state */
    a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover{background-position: -32px; border-bottom: 0px;}

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

/* next button uses another background image */
    a.next, a.nextPage{background: url(../img/next-horizontal.png); clear:right}

/*********** navigator ***********/
/* position and dimensions of the navigator */
    div.navi{margin: 0px; width:678px; height:20px; border-left: 1px solid #ccc; border-right: 1px solid #ccc;}

/* items inside navigator */
    div.navi a{width:8px; height:8px; float:left; margin:3px; background:url(../img/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}