/* 
    root element for the scrollable. 
    when scrolling occurs this element stays still. 
*/ 
div.scrollable { 
    /* required settings */ 
    position: relative; 
    overflow: hidden; 
    width: 720px; 
    height: 320px; 
} 
 
/* 
    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. 
*/ 

.scrollable .items img {
	float: left;
	margin: 0 20px 0 0;
	padding: 0;
	width: 158px;
	height: 318px;
	border: solid 1px #aaa;
}


div.imgs {
	padding: 0;
	margin: 20px 0;
	display: block;
	color: #999;
	font-size: 11px;
	font-style: italic;
}


div.double span {
	width: 340px;
	margin: 0 20px 0 0;
	float: left;
}

div.double img {
	border: solid 1px #aaa;
}

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

/* position and dimensions of the navigator */
.navi {
	width: 200px;
	padding-top: 14px;
	height: 26px;
}

/* items inside navigator */
.navi a {
	width: 8px;
	height: 8px;
	float: left;
	margin: 3px;
	background: url('../media/imgs/scrollable/arrow/navigator.png') 0 0 no-repeat;
	display: block;
	font-size: 1px;
	text-decoration: none;
	border-bottom: none;
	cursor: pointer;
}

/* mouseover state */
.navi a:hover {
	background-position: 0 -8px;      
	text-decoration: none;
	cursor: pointer;
}

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