/*
	root element for the scrollable.
	when scrolling occurs this element stays still.
*/
.scrollable {

	/* required settings */
	position:absolute;
	top: 40px;
	left: 15px;
	overflow:hidden;
	width: 670px;
	height: 226px;
	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:20000em;
	position:absolute;
	clear:both;
}

/* single scrollable item 
a.carouselitem:link, a.carouselitem:visited {
	float:left;
	margin:0px 13px 0px 0px;
	background:  url("../images/bg_carouselitem.png") no-repeat 0px 0px;
	padding: 0px;
	cursor:pointer;
	width:215px;
	height:208px;
	position: relative;
	color: #6f858e;
	text-shadow: #fff 1px 1px 0px;	
}
a.carouselitem:hover {
	color: #162e44;
}

*/

.carouselitem {
	float:left;
	margin:0px 13px 0px 0px;
	background:  url("../images/bg_carouselitem.png") no-repeat 0px 0px;
	padding: 0px;
	cursor:pointer;
	width:215px;
	height:208px;
	position: relative;
	color: #6f858e;
	text-shadow: #fff 1px 1px 0px;	
}
/* Fix voor IE */
	* html .carouselitem
	{
		background-image:none;
		filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( src='/themes/maran/images/bg_carouselitem.png', sizingMethod='crop');
	}

.carouselitem img {
	float:left;
	margin:3px 0px 8px 3px;
}




.play {
	position: absolute;
	top: 40px;
	left: 80px;
	width: 38px;
	height: 38px;
	background:  url("../images/play.png") no-repeat 0px 0px;
}

/* active item */
.scrollable .active {
	z-index:9999;
	position:relative;
	background: #33a4ca;
}


/* position and dimensions of the navigator */
.navi {
	position: absolute;
	top: 8px;
	right: 5px;
	margin:0px;
	width:60px;
	height:30px;
}


/* items inside navigator */
.navi a {
	width:15px;
	height:15px;
	float:left;
	margin: 3px;
	background: #315475;
	display:block;
	font-size:1px;
	-moz-border-radius:2px;
	-webkit-border-radius:2px;
	cursor:pointer;
}

/* mouseover state */
.navi a:hover {
	background: #266c8b;     
}

/* active state (current page state) */
.navi a.active {
	background: #33a4ca;  
}