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

	/* required settings */
	position:relative;
	overflow:hidden;
	width: 950px;
	height:350px;
}

	.videoscroll {
		position:relative;
		overflow: hidden;
		width: 370px;
		height: 295px;
	}

	.home .scrollable {
		height: 200px;
	}

/*
	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;
}

	.videoscroll .items {
		/* this cannot be too large */
		width:20000em;
		position:absolute;
		clear:both;
	}



/* single scrollable item */
.scrollable a.event_block img {
	float:left;
	margin:0 15px 0 0;
	width:178px;
	height:146px;
}

.scrollable a.event_block img {
	height: auto;
	width: auto;
	float: none;
	border: 4px #e8e8e8 solid;
}

.scrollable a.event_block:hover img {
	border-color: #e8e0d2;
}

.scrollable .event_block {
	display: block;
	float:left;
	margin:0 15px 0 0;
	width:948px;
	height:348px;
	text-decoration: none;
}

	.home .event_block,
	.scrollable .event_block a {
		height:150px;
		width:176px;
	}
	
		* html .home .event_block {
			width: 161px;
			margin-right: 0;
		}
	
	.scrollable .event_block .event.med {
		height: 144px;
	}
	
	.videoscroll .items div.video {
		display: block;
		float:left;
		margin:0 15px 0 0;
	}

.scrollable a.event_block h4 {
	font-size: 1.3em;
	color: #000;
	margin-top: 10px;
	margin-bottom: -6px;
	height: 47px;
	line-height: 116%;
	overflow: hidden;
}

.content .scrollable a p {
	margin: 1px 0 2px;
	font-size: 13px;
}

	.content .scrollable a p.date {
		margin-bottom: 8px;
	}


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


/* this makes it possible to add next button beside scrollable */
.scrollable {
	float:left;	
}

	.events_page .scrollable {
		position: absolute;
		top: 49px;
		left: 40px;
	}

/* prev, next, prevPage and nextPage buttons */
a.browse {
	background:url(images/arrows.gif) no-repeat;
	display:block;
	width:35px;
	height:32px;
	float:left;
	margin:40px 5px;
	cursor:pointer;
	font-size:1px;
}

	.events_page a.browse {
		margin-top: 136px;
	}

/* right */
a.right 				{ background-position: 0 -33px; float: right; margin-right: 0px;}
.home a.right 				{ clear:right; float: left;}
a.right:hover 		{ background-position:-30px -33px; }
a.right:active 	{ background-position:-60px -33px; } 


/* left */
a.left				{ margin-left: 0px; } 
a.left:hover  		{ background-position:-30px 0; }
a.left:active  	{ background-position:-60px 0; }


	.special a.left {
		position: absolute;
		top: 162px;
		left: -30px;
	}
	
	.special a.right {
		position: absolute;
		top: 162px;
		right: -30px;
	}


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

/* position and dimensions of the navigator */ 
.navi { 
    margin-left:470px; 
    width:200px; 
    height:20px; 
	position: relative;
	bottom: 16px;
} 

	#sidebar .navi {
		margin-left: 167px;
		margin-top: -15px;
	}
 
 
/* items inside navigator */ 
.navi a { 
    width:11px; 
    height:11px; 
    float:left; 
    margin:3px; 
	margin-right: 20px;
    background:url(images/navigator.png) 0 -1px no-repeat; 
    display:block; 
    font-size:1px; 
} 
 
/* mouseover state */ 
.navi a:hover { 
    background-position:0 -12px;       
} 
 
/* active state (current page state) */ 
.navi a.active { 
    background-position:0 -23px;      
}