/***************/
/*** Buttons ***/
/***************/
/* this makes it possible to add next button beside scrollable */
.scrollable { float:left; }
/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:30px;
	height:30px;
	float:left;
	margin:40px 10px;
	cursor:pointer;
	font-size:1px;
}
/* right */
a.right 		{ background-position: 0 -30px; clear:right; margin-right: 0px;}
a.right:hover 	{ background-position:-30px -30px; }
a.right:active 	{ background-position:-60px -30px; } 
/* left */
a.left	     	{ margin-left: 0px; } 
a.left:hover  	{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }
/* up and down */
a.up, a.down		{
	float: none;
	margin: 10px 50px;
}
/* up */
a.up:hover  		{ background-position:-30px 0; }
a.up:active  		{ background-position:-60px 0; }
/* down */
a.down 				{ background-position: 0 -30px; }
a.down:hover  		{ background-position:-30px -30px; }
a.down:active  	    { background-position:-60px -30px; } 
/* disabled navigational button */
a.disabled { visibility:hidden !important; } 	

/*****************/
/*** Navigator ***/
/*****************/
/* position and dimensions of the navigator */
.navi {margin:200px 0 0 328px;width:200px;height:20px;}
/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	background:url(../../images/scrollable/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;}


/******************/
/*** Horizontal ***/
/******************/
/*root element for the scrollable.when scrolling occurs this element stays still.*/
.scrollable {position:relative;overflow:hidden;width:400px;height:245px;}
/*
	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 the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:20000em;position:absolute;clear:both;}
/* single scrollable item */
.scrollable img {float:left;cursor:pointer;}
.scrollable  a { margin-top:20px;}
/* active item */
.scrollable .active {z-index:9999;position:relative;}
.item {cursor:pointer;float:left;height:200px;width:400px;}