@charset "utf-8";
/* CSS Document */

/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {
	/* required settings */
	position:relative;
	overflow:hidden;
	width: 470px;
	height: 130px;
	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 the width and height for the root element and
	not for this element.
*/
.scrollable .items {
	/* this cannot be too large */
	width:10000px;
	position:absolute;
	clear:both;
}
.scrollable  /* single scrollable item */
.post {
	float:left;
	cursor:pointer;
	width:470px;
	height:120px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
}


/* active item */
.scrollable .active {
	border:2px solid #000;
	z-index:9999;
	position:relative;
}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:15px;
	height:120px;
	float:left;
	cursor:pointer;
	background-color: #6D94AF;
}

/* right */
a.right 				{
	clear:right;
	margin-right: 10px;
}
a.right:hover 		{ background-color: #8BACC2; }
a.right:active 	{ background-color: #6D94AF; } 


/* left */
a.left				{
	margin-left: 10px;
	clear: left;
} 
a.left:hover  		{ background-color: #8BACC2; }
a.left:active  	{ background-color: #6D94AF; }


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

/* position and dimensions of the navigator */
.navi {
	height:15px;
	margin: 0px auto 5px;
	width: 84px;
}


/* items inside navigator */
.navi a {
	width:8px;
	height:8px;
	float:left;
	margin:3px;
	display:block;
	background-color: #B5D2E6;
}

/* mouseover state */
.navi a:hover { background-color: #8BACC2; 
}

/* active state (current page state) */
.navi a.active { background-color: #6D94AF; 
}