/* root element for horizontal scrollables */
	.scrollable {
		position:relative;
		overflow:hidden;
		height: 150px;
		width:930px;
		margin: 0px 0px 0px 19px;
		padding: 0px 0px 0px 0px;
	}
	
	/* root element for scrollable items */
	.scrollable .items {
		width:20000em;
		position:absolute;
		clear:both;
	}
	

	
	.items .block {
		float :left;
		width:215px;
		height: 150px;
		margin: 16px 18px 0px 0px;
		padding: 0px 0px 0px 0px;
		position: relative;
	}
	.items .block img {
		z-index: 9;
	}
	
	.items .block a:link,  .items .block a:visited {
		float: left;
		margin: 0px 0px 0px 0px;
		padding: 0px 0px 0px 0px;
		text-decoration: none;
		border: 3px solid #2e2f35;
	}
	.items .block a:hover {
		border: 3px solid #1c1d21;
	}
	
	

	

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


/* prev, next, prevPage and nextPage buttons */
a.browse {
	display:block;
	width:40px;
	height:50px;
	position: absolute;
	top: 50px;
	margin:0px 0px;
	cursor:pointer;
	font-size:1px;
	background:  url("../images/arrows.gif") no-repeat 0px 0px;
	z-index: 999;
			-moz-transition: all 0.2s ease-out;  /* FF3.7+ */
       -o-transition: all 0.2s ease-out;  /* Opera 10.5 */
  -webkit-transition: all 0.2s ease-out;  /* Saf3.2+, Chrome */
          transition: all 0.2s ease-out; 
}

/* right */
a.right 				{ 
	background:  url("../images/arrow-next.gif") no-repeat -40px 0px;
	right:-10px; 
	clear:right; 
}
a.right:hover 		{ background-position: 0px 0px; }
a.right:focus 		{ background-position: 0px 0px; }
a.right:active 	{ background-position:0px 0px; } 


/* left */
a.left				{ 
	left: -10px; 
	background:  url("../images/arrow-prev.gif") no-repeat 0px 0px;
} 
a.left:hover  		{ background-position:-40px 0px; }
a.left:focus 		{ background-position: -40px 0px; }
a.left:active  	{ background-position:-40px 0px; }


/* disabled navigational button */
a.left.disabled {
	background:  url("../images/arrow-prev.gif") no-repeat -80px 0px;
} 	
a.right.disabled {
	background:  url("../images/arrow-next.gif") no-repeat -80px 0px;
} 	


/* Tabjes 
---------------------------------------------------------------*/


/* root element for tabs  */
ul.tabs { 
	position: absolute;
	top: -41px;
	left: 0px;
	list-style:none; 
	margin:0 !important; 
	padding:0px 0px 0px 0px;	
	height:41px;
}


/* single tab */
ul.tabs li { 
	float:left;	 
	text-indent:0;
	padding:0;
	margin:0 1px 0 0 !important;
	list-style-image:none !important; 
	height:41px;

}
/* link inside the tab. uses a background image */
ul.tabs a {
	font-family: 'PT Serif', georgia, arial, serif;
	float:left;
	font-size: 13px; font-weight: normal;
	display:block;
	height: 36px; 
	line-height:36px;
	padding: 0px 20px 0px 20px;
	text-align:left;
	text-transform: uppercase;
	text-decoration:none;
	color: #fff;
	margin:4px 0px 0px 0px;	
	position:relative;
	background: #009ed7;
}
* html ul.tabs a {
	margin:0px 1px 0px 0px;	
}

ul.tabs a:active {
	outline:none;	
}

/* when mouse enters the tab move the background image */
ul.tabs a:hover {
	color: #1c1d21;
	text-decoration: none;
}

/* active tab uses a class name "current". it's highlight is also done by moving the background image. */
ul.tabs a.current, ul.tabs a.current:hover, ul.tabs li.current a {
	cursor:default !important; 
	text-decoration: none;
	color: #e0992d;
	font-size: 16px;
	line-height:41px;
	height: 41px;
	margin:0px 0px 0px 0px;	
	padding: 0px 20px 0px 20px;
	background: #2e2f35;
}

/* Different widths for tabs: use a class name: w1, w2, w3 or w2 */


/* width 1 */
ul.tabs a.tab 			{ color: #353a41;}
ul.tabs a.tab:hover 	{  }
ul.tabs a.tab.current  { color: #f6861f;  }



/* initially all panes are hidden */ 
div.panes div.pane {
	display:none;
}

/* override single pane */ 
div.panes div.tekst { 
    float:left; 
    display:block;
    width: 960px;
    padding: 0px 0px 0px 0px;
    margin: 0px 0px 0px 0px;
    min-height: 150px;
}




.boxgrid{ 
				width: 215px; 
				height: 111px; 
				float:left; 
				background: none; 
				overflow: hidden; 
				position: relative; 
				text-decoration: none;
			}
				
				
			.boxcaption { 
				position: absolute;
				top: 0px; 
				right: 0px;
				color: #fff;
				font-weight: normal;
				text-shadow: none;
				text-decoration: none;
				text-align: left;
				background-color: transparent;
  background-color: rgba(0, 158, 215, 0.6);  /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
            filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99009ED7,endColorstr=#99009ED7); /* IE6ÐIE9 */
            zoom: 1;
				height: 103px; 
				width: 195px;
				margin: 0px 0px 0px 0px;
				padding: 8px 10px 0px 10px;
				font-family: 'Vollkorn', Georgia,arial, serif; 
				font-size: 14px;
				text-transform: uppercase;
				}
				 			

 				.caption .boxcaption {
 					top:80px;
 					left: 0px;
 				}
				
			.boxcaption span.slideup {
				font-family: 'PT Sans', Georgia,arial, serif; 
				margin: 0px 0px 0px 0px;
				padding: 0px 0px 0px 0px;
				line-height: 16px;
				font-size: 12px;
				color: #fff;
				display: block;
				font-weight: normal;
				text-transform: none;			}		
				
				
				
	
	
		/*		Scrollable Videobox		 */ 
		
		
		
		div.videoscroll { 
			/* required settings */
			position: absolute;
			top: 50px;
			left: 21px;
			overflow:hidden;
			width: 280px;
			height: 250px;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
		} 

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

	
		/* Carousel */
		div.videoscroll div.items div.video {
			float:left;
			width: 280px;
			height: 250px;
			margin: 0px 0px 0px 0px;
			padding: 0px;
			cursor: pointer;
			position: relative;

		}
		

		div.videoscroll div.items div.video img {
			float:left;
			width: 280px;
			height: 190px;
			border: 0px solid #f5f4f0;
			margin: 0px 0px 0px 0px;
			padding: 0px 0px 0px 0px;
		}
		div.videoscroll div.items div.video p {
			font-family: 'PT Serif', georgia, arial, serif;

	display: block; 
	line-height: 20px;
	padding: 0px 0px 0px 0px;
	background: none;
	margin: 0px 0px 0px 0px;
	text-decoration: none;
	 text-align: left;
	 color: #e0992d;
	 position: relative;
	 top: 0px;
	 font-weight: normal;
	 font-size: 12px;
		}
		div.videoscroll div.items div.video a {
			float: left;
			display: block;
			width: 284px;
			height: 250px;
			text-decoration: none;
			border: 0px;
			cursor: pointer;
			padding: 0px;
			margin: 0px 0px 0px 0px;
			z-index: 100;
			position: relative;
			
		}		
		
		div.videoscroll div.items div.video a .play {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 280px;
			height: 190px;
			background:  url("../images/play.png") no-repeat 0px 0px;
			z-index: 99;

		}
		div.videoscroll div.items div.video  a:hover .play {
			position: absolute;
			top: 0px;
			left: 0px;
			width: 280px;
			height: 190px;
			background: url("../images/play2.png") no-repeat 0px 0px;
		}

		
		/* position and dimensions of the navigator */ 
#videobox .navi { 
    position: absolute;
    top: 15px;
    right: 0px;
    width:80px; 
    height:20px; 
}
 
 
 
/* items inside navigator */ 
#videobox .navi a {
    width:14px; 
    height: 13px; 
    float:left; 
    margin:3px; 
    background: #5f5f61; 
    display:block; 
    font-size:1px;
    cursor: pointer;
    -moz-transition: all 0.2s ease-out;  /* FF3.7+ */
       -o-transition: all 0.2s ease-out;  /* Opera 10.5 */
  -webkit-transition: all 0.2s ease-out;  /* Saf3.2+, Chrome */
          transition: all 0.2s ease-out; 
} 
 
/* mouseover state */ 
#videobox .navi a:hover { 
    background-color: #edeff1;     
} 
 
/* active state (current page state) */ 
#videobox .navi a.active { 
    background-color: #009ed7;
}