/* position and dimensions of the navigator */ 
.navi { 
    margin-left:428px; 
    width:200px; 
    height:20px; 
} 

/* items inside navigator */ 
.navi a { 
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background:url(../_img/arrow/navigator.png) 0 0 no-repeat;
    display:block;
    font-size:1px;
} 

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

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





/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
    
    /* required settings */ 
    position:relative; 
    overflow:hidden; 
    width: 816px; 
    height: 300px;
    float: left;
} 

/*
    root element for scrollable items. Must be absolutely positioned 
    and it should have a extremely 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 in horizontal scrolling. 
    typically, this element is the one that *you* will style 
    the most. 
*/ 
div.scrollable div.items div { 
    float: left;
    width: 196px;
    height: 280px;
    border: 1px solid #cccccc;
    margin-right: 2px;
    padding: 2px;
}

div.scrollable div.items div .titolo {
    background-color: #cccccc;
    display: block;
    padding: 2px;
    color: #ff0000;
    font-weight: bold;
}

/* you may want to setup some decorations to active the item */ 
div.items div.active { 
    border:1px #ff0000; 
    background-color:#fff;
    color: inherit;
}