div.scrollable {
        position: relative;
        overflow: hidden;
        width: 120px;
        height: 160px;
        margin: 20px 0 0 0;
    }
    /*
        root element for scrollable items. It is
        absolutely positioned with large width.
*/
    #thumbs {
        position: absolute;
        width: 20000em;
        clear: both;
    }
    /* custom positioning for navigational links */
    a.prev, a.next {
        /*margin-top: 118px;*/
    }
    /* single item */
    #thumbs div {
        float: left;
        width: 120px;
        height: 160px;
        cursor: pointer;
        text-align: center;
    }
/* 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:inline;
        width:20px;
        height:39px;
        background:url(../images/left.png) no-repeat;
        float:left;
        margin: 63px 5px;
        cursor:pointer;
}

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

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

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



/*********** 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(../images/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;
}