/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/div.scrollable
    {
        /* required settings */
        position: relative;
        overflow: hidden;
        width: 710px;
        height: 150px;
    }
    /* 
    root element for scrollable items. Must be absolutely positioned 
    and it should have a super large width to accomodate scrollable items. 
    it's enough that you set width and height for the root element and 
    not for this element. 
*/div.scrollable div.items
    {
        /* this cannot be too large */
        width: 20000em;
        position: absolute;
    }
    /* 
    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;
        width: 702px;
        padding: 5px 5px 5px 5px;
    }
    /* you may want to setup some decorations to active item */div.items div.active
    {
    }
    /* position and dimensions of the navigator */div.navi
    {
        margin-left: 328px;
        width: 200px;
        height: 20px;
        position: relative;
    }
    /* items inside navigator */div.navi a
    {
        width: 8px;
        height: 8px;
        float: left;
        margin: 3px;
        background: url(../Images/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;
    }