/* 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:block;
    width:23px;
    height:17px;
    background:url(../images/left0000.png) no-repeat;
    float:left;
    margin:43px 7px;
    cursor:pointer;
}

/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {
    background-position:0px -17px;        
}

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

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



/*********** navigator ***********/


/* position and dimensions of the navigator */
div.navi {
	position:relative;
    margin:10px auto 0 !important;
    width:200px;
    height:18px;
    z-index:0;
}


/* items inside navigator */
div.navi a {
    width:8px;
    height:8px;
    float:left;
    margin:3px;
    background:url(../images/navigato.png) 0 0 no-repeat;     
    cursor:pointer;
    z-index:0;    
}

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

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





/* root element for the whole scrollable setup */
div.scrollable {  
    position:relative;
    overflow:hidden;
    width: 910px;
    height:320px;    
    border-left:1px dashed #CCC;
    border-right:1px dashed #CCC;
    z-index:0;
}


/* 
    root element for scrollable items. It is 
    absolutely positioned with large width. 
*/
#thumbs {    
    position:absolute;
    width:20000em;    
    clear:both;
	z-index:1;
    
}

/* custom positioning for navigational links */
a.prev, a.next {
    margin-top:140px;    
}




/* single item */
#thumbs div.prod {
    float:left;
    width:300px;
    height:300px;
    color:#333;

}