/* ------------------------------------------------------
    root element for the scrollable.
    when scrolling occurs this element stays still.
--------------------------------------------------------- */
div.scrollable { position:relative; overflow:hidden; width:690px; height:40px;
    /* not required */
    margin-bottom:2.5em; float:left;
}
 
/* ------------------------------------------------------
    root element for scrollable items. Must be absolutely positioned
    and it should have a super large width to accomodate scrollable items.
    it is enough that you set width and height for the root element and
    not for this element.
--------------------------------------------------------- */
div.scrollable div.items { width:20000em; position:absolute; } /* the width cannot be too large */

/* ------------------------------------------------------
    a single item. must be floated on horizontal scrolling
    typically this element is the one that *you* will style
    the most.
--------------------------------------------------------- */
div.scrollable div.items div { float:left; }

/* ------------------------------------------------------
    you may want to setup some decorations to active item
--------------------------------------------------------- */
div.items div.active a { color:#bbb; }
a.prev, a.next { text-decoration:none; float:left; color:black; cursor:pointer; margin:1em 0.5em 1em 0.5em;}


/*********** 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/scrollable/navigator.png) 0 0 no-repeat;   
}

/* mouseover state */
div.navi a:hover { background-position:0 -8px; }

/* active state (current page state) */
div.navi a.active { background-position:0 -16px; }