/* root element for the whole scrollable setup */
div.scrollable {  
        position:relative;
        overflow:hidden;
        width: 670px;    
        height:386px;
		margin:0px;   
}

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

/* style when mouse is over the item */
#thumbs div.hover {
        background-color:#444;  
}

/* style when element is active (clicked) */
#thumbs div.active {
        background-color:#066;
        cursor:default;
}

#thumbs h3, #thumbs p, #thumbs span {
        margin:13px;            
        font-family:"bitstream vera sans";
        font-size:13px;
        color:#fff;     
}

#thumbs h3 em {
        font-style:normal;
        color:yellow;
}

/* items inside navigator */
div.navi {
        float:right;
}

div.navi a {
        width:8px;
        height:8px;
        float:left;
        margin:5px 0px 5px 5px;
        background:url(/themes/main/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;     
}