html {height:100%;}





body {
	margin: 0;
	padding: 0;
	height:100%;
	color:#231508;
	background-color: #69C;
}



.wrapper {
	max-width: 1200px;
	margin: 0 auto;
	z-index:300;
	position:relative;
	box-shadow: 0 0 60px #3e3025;
	background-image: url(img/bg_blauw.png);

	

}







.header, .footer { width: 100%; height:160px;  position:relative;  }

.header .logopic {float:left; max-width:60%; margin: 0 0 0 0;}



.topmenubar {

	margin-left:2%;
	background-image: url(img/bg_blauw.png);
}



.contentbox {
	width: 70%;
	float:left;
	background-color: #A8D3FF;
	margin: 2%;
}

.contentbox .inner {min-height:330px; margin: 15px 3% 20px 4%;}

.contentbox .inner p img {max-width:100%; height: auto ! important;}



.contentboxwide {width: 96% ! important;  }



.rightbox {width: 24.5%; float:right; margin-top:15px;  border-right:none; }

.rightbox .inner {padding:16px 16px 0 16px;}

.rightbox .inner img { margin-left:-2px; border:2px solid #fff;padding:4px;}

.rightbox .inner p img {max-width:99%; height: auto ! important; border:2px solid #fff;}

.rightbox.inner h1, .rightbox .inner h2, .rightbox .inner h3, .rightbox .inner h4, .rightbox .inner strong {color: #fff;}







#bigcontent #outervideobox {float:left; }



#bigcontent .videosize1 {width: 67%;  }

#bigcontent .videosize2, #bigcontent .videosizedefault {width: 100%;  }

#bigcontent .videosize3 {width:  126%; margin-left:-13%;}



.resizevideoswitch {display:block; float:right; width:80px; height:30px; margin: 3px 0.2% 0 0;}

.resizevideoswitch a {display:block; float:right; width:28px; height:20px; color:#fff; font-weight:bold; opacity:0.3}

.resizevideoswitch a:hover {opacity:0.6}

a#videoswitch2 {background: transparent url(img/vminus.png) no-repeat;}

a#videoswitch1 {background: transparent url(img/vplus.png) no-repeat;}

#bigcontent .videosize3 .resizevideoswitch{margin: 3px 15% 0 0;}









.footer {
	width:  100%;
	height:80px;
	clear:both;

}

.footer .inner {
	position:absolute;
	top:10px;
	left: 10%;
	width:80%;
	font-size:0.9em;
	text-align:center;
	line-height:110%;
	color: #000 ! important
}

.footer .inner span { font-size:0.8em;}





#flecken {width:100%; height:100%; display:block; position:fixed; top:0; left:0; z-index:1;}

.fleck { position:absolute; z-index:10;}

#flecken h3 {width:50%; margin-left:-10%; font-size:160px; line-height:60%; opacity:0.2; color:#3e3025; text-align:center; font-family: 'Tangerine', cursive;}









/***********************************

	menu

************************************/



a#mobilemenu {

    display:  none;   

}

a#mobilemenu span {display:block; padding: 10px 15px ; font-weight: bold;}







.search_box {float:right;  width:130px; text-align:right; margin-top:10px;}

.search_box .searchstring {	

	width:80px;	

	font-size:12px;

	padding:2px;

	background:#fff;

}

.search_box .submitbutton {

	vertical-align: top; margin:0 0 0 0;  background: none; border: none;

}



#showlogin {display:block; float:right; position:relative;  width:30px; text-align:right; margin:10px 6px 0 0; }

#login-box {position:absolute; z-index:2000; width:200px; left:-190px; top:25px; padding:10px; font-size:11px; background:#fff;}

#login-box table td {background:#fff;}

#login-box .inputfield {width:80px; border: 1px solid #c9e8f9; padding:1px;}







/* Link Formatting */

ul.nav, ul.extramenu { 

	list-style-type: none;

	/* *zoom: 1; */

	margin: 0; padding: 0;

	position: relative; 

	

}



ul.nav li {

	float: left; 

	list-style-type: none;

	list-style-image: none;

	position: relative;  

	font-weight: normal; 	

	margin: 0; padding: 0;

	border-right: 1px solid #9e8d7b;

}





.nav li a {

	display: block; 	

	text-decoration: none; 

	font-weight: normal;

	line-height:140%;

	font-size:14px;

	/*text-shadow: 1px 1px 1px #000;*/

	padding: 10px 10px;

    color:#fff;

}





/* Hover Formatting */

.nav  li a:hover, .nav li a:focus, .nav li a:active, .nav li a.active, .nav a.menu-current, .nav a.menu-parent {

	 background-color: #9e8d7b;  color: #fff;

}







/* 2 level */

.nav li ul {

    display: none;

    width: 15em; 

    margin: 0; padding:0;

    position: absolute;

}



.nav li ul li {

	width: 15em; 

	text-align: left; 

	font-weight: normal; 

	margin: 0; 

	padding: 0;

	border-top: 1px solid #cdc2b6;

	border-right: none;

	background-color:#9e8d7b;

}

.nav li ul li a {

	

    color: #fff;

    font-weight: normal;

	padding: 6px 10px;

    

}





/* 2 level hover */

.nav li ul a:hover,  .nav li ul a.menu-current { background-color: #cdc2b6;  color: #000;}





/* Show and hide */

.nav li:hover ul, .nav li a:focus ul {display: block; }

.nav li ul ul { display: none;}

.nav li:hover ul ul {display: none;}

.nav li:hover>ul, .nav  li li:hover>ul {display: block;  z-index: 1000;}





/* 3 Ebene  */

.nav li ul li ul	{ 

	margin: -20px 0 0 70%; 

	padding:0;

	z-index: 9999;  

	display: none;

	width: 11em; 

}

.nav li ul li ul li	{width: 11em;}





/* Positioning hover */

.nav li {position: relative;}







.nav li:hover {

	z-index: 10000;	

	white-space: normal;

							

}











/*==================================================================================================*/



/*Overview List*/

.mod_topic_loop a.videoblock {

	display: block;

	float:left;

	width: 200px;

	max-width:35%;

	height: 110px;

	overflow: hidden;

	margin: 0 10px 10px 0;

	background:#000;

}

.mod_topic_loop a.videoblock img {

	width: 100%;

	opacity:0.8;

}



.mod_topic_loop a:hover.videoblock img {

	width: 130% ! important;

	height:auto;

	margin-left: -15% ! important;

	margin-top: -30px ! important;

	opacity:1;

}



/*Topic Sidebar:*/

.mod_topic_prevnext div {clear:left; font-size:11px; margin-top:20px;}



.mod_topic_prevnext a.videoblock {

	display: block;

	float:left;

	width: 100px;

	max-width:50%;

	height: 60px;

	overflow: hidden;

	margin: 0 5px 0 0;

	background:#000;

}



.mod_topic_prevnext a.videoblock img {

	width: 100%;

	height:auto;

	opacity:0.8;

}



.mod_topic_prevnext a:hover.videoblock img {

	width: 130% ! important;

	height:auto;

	margin-left: -15% ! important;

	margin-top: -5px ! important;

	opacity:1;

}













/*Big Video Box:*/

#videobox {

    position: relative;

    padding-bottom: 56.25%;

    padding-top: 30px; 

	height: 0; 

	overflow: hidden;

}

 

#videobox  iframe,

#videobox  object,

#videobox  embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}



/*frontteaserblock*/



.frontteaserblock {margin:30px 0; width:100%; overflow:hidden;}

.frontteaserblock div {width:103.3%;}

.frontteaserblock div a {float:left; display:block; width:31%; margin-right:2%; opacity:0.9; background:#fff;}

.frontteaserblock div a img {width:100%; }

.frontteaserblock div a .mt_title {display:block; margin:10px 5px 0 10px; height:40px; font-size:16px; lineheight:120%; font-weight:bold; }

.frontteaserblock div a .mt_desc {display:block; margin:0 5px 0 10px; height:90px }

.frontteaserblock div a:hover  {opacity:1;}









.mobiles_only {display: none;}

.desktops_only {}



.mod_topic_commentbox {

	background: transparent;

}



/* ================================================================================================= */

/* Smaller Screens */

@media screen and (max-width: 768px) {



	body { background-image: none; }





	.mobiles_only {display: block;}

	.desktops_only {display: none;}

	

	

	

	.search_box {margin-top:-30px;}

	#showlogin {display:none;}

	

	

	#bigcontent #outervideobox {}

	#bigcontent .videosize1 {width: 100%;  }

	#bigcontent .videosize2 {width: 100%;  }

	#bigcontent .videosize3 {width:  100%; margin-left:0;}

	

	.resizevideoswitch {display:none ! important;  }

	

	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

	.container { width: 100%; border-left: none;	border-right: none;}

	

	.mainbox {margin: 20px 0 20px 0;}

	.contentbox {width: 100%;}

	.rightbox {width: 100%; border-left: none;  border-right: none; }

	#flecken {display:none ! important;  }

	

	.footer { width: 100%; }

	.contentbox .inner {margin: 10px;  }

	

	

	

	

	

	a#mobilemenu { 

		display:  block;  

		background: #9e8d7b;   

		color: #fff;

		width:100%;

		clear: both;

		font-size:16px;

	}

	

	ul#mobile, ul#mobile ul, ul#mobile ul ul {width:100% ! important; position: static ! important; margin: 0 0 0 0 ! important; display: none}

	

	ul#mobile ul {}

	ul#mobile li, ul#mobile li li, ul#mobile li li li {

		width:100% ! important;

		float: left;

		border-right: none; 	

		display: block;

		border-bottom: 1px solid #fff;

		XXbackground-color: #cdc2b6;	

	}

	

	

	ul#mobile li.menu-parent > ul, ul#mobile li.menu-current > ul {display: block}

	ul#mobile {display: block}

	

	ul#mobile a {padding: 10px 5px; color:#fff;}

	

	ul#mobile a.menu-expand {	 no-repeat right center ! important;}

	ul#mobile a.menu-parent { color: #000; background: #cdc2b6 url(img/down.png) no-repeat right center;}

	

	

	ul#mobile {display:none;}

	

	

	.tp_picture  {max-width:40%;}

	.tp_picture .tp_pic {max-width:100%;}

	.container  .mod_topic_loop .tp_thumb { float: left; margin: 4px 2% 0 0; max-width:25%;}

	

	

	.frontteaserblock div {width:100%;}

	.frontteaserblock div a {width:100%; clear:left; margin-bottom:30px;}

	.frontteaserblock div .row1 {clear:left;}

	.frontteaserblock div a img {width:48%; float:left; margin-right:4%;}

	.frontteaserblock div a .mt_title {height:auto; margin-bottom:20px;}

	.frontteaserblock div a .mt_desc {height:auto; }

	

	

}





/* ================================================================================================= */

/* Smaller Screens */

@media screen and (max-width: 400px) {



	.frontteaserblock div a img {width:100%; float:none;}

	.frontteaserblock div a .mt_title {clear:both; height:auto; margin:10px 5px 5px 10px;}

	.frontteaserblock div a .mt_desc { margin:0 5px 30px 10px; }

	







}




/*
	99Lime.com HTML KickStart by Joshua Gatcke
	kickstart-grids.css
	
	DO NOT EDIT THIS FILE unless you know what you are doing. 
*/
/*---------------------------------
	GRID/COLUMNS
-----------------------------------
	tinyfluidgrid.com
	& girlfriendnyc.com
	with changes by 99Lime
-----------------------------------*/
 /*
 & Columns : 12 
 & Gutter %: 20% 
 & MaxWidth: 1280px
 */
 
.grid{
max-width:1220px;
margin:0 auto;
/* padding:0 2em; */
}

.grid.flex{
width:100%;
max-width:100%;
padding:0 2%;
padding:2em;
}

.row{
display:block;
overflow:hidden;
clear:both;
}

*[class*="col_"].alpha{margin-left:0;}
*[class*="col_"].omega{margin-right:0;}
 
.col_1  { width: 6.6666666666667%; }
.col_2  { width: 15%; }
.col_3  { width: 23.333333333333%; }
.col_4  { width: 31.666666666667%; }
.col_5  { width: 40%; }
.col_6  { width: 48.333333333333%; }
.col_7  { width: 56.666666666667%; }
.col_8  { width: 65%; }
.col_9  { width: 73.333333333333%; }
.col_10 { width: 81.666666666667%; }
.col_11 { width: 90%; }
.col_12 { width: 98.333333333333%; }

*[class*="col_"]{
margin-left: 0.83333333333333%;
margin-right: 0.83333333333333%;
margin-top:0.5em;
margin-bottom:0.5em;
float: left;
display: block;
}

.grid img{
max-width: 100%;
height:auto;
}

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0}
.clearfix:after{clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0}
* html .clearfix, *:first-child+html .clearfix{zoom:1}

/* Viewable Grids 
	To view your grids, add the class .visible to any grid container.
	This will add a background color so you can see the layout of your grids. 
*/
*[class*="col_"].visible{
background:#eee;
border:1px dotted #ccc;
}


/*---------------------------------
	Responsive Grid Media Queries - 1280, 1024, 768, 480
	1280-1024 	- desktop (default grid)
	1024-768 	- tablet landscape
	768-480 	- tablet 
	480-less 	- phone landscape & smaller
-----------------------------------*/
@media all and (min-width: 1024px) and (max-width: 1280px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 1024px;}
	.show-desktop	{display:block;}
	.hide-desktop	{display:none;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}

@media all and (min-width: 768px) and (max-width: 1024px) {
	
	.grid *[class*="col_"]{}
	.grid{max-width: 768px;}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}


@media all and (min-width: 480px) and (max-width: 768px) {

	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 480px;}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:block;}
	.hide-tablet	{display:none;}
	.show-phone		{display:none;}
	.hide-phone		{display:block;}
	
}

@media all and (max-width: 480px) {
	
	.grid *[class*="col_"]{
	float:none;
	width:auto;
	clear:both;
	display:block;
	}
	
	/* columns inside of columns */
	.grid *[class*="col_"] [class*="col_"]{
	margin-left:0;
	margin-right:0;
	width:100%;
	}
	
	.grid{max-width: 100%;/*320*/}
	.show-desktop	{display:none;}
	.hide-desktop	{display:block;}
	.show-tablet	{display:none;}
	.hide-tablet	{display:block;}
	.show-phone		{display:block;}
	.hide-phone		{display:none;}
	
}

.video-js.vjs-fluid, .video-js.vjs-16-9, .video-js.vjs-4-3, .video-js.vjs-9-16, .video-js.vjs-1-1 {
    padding-top: 120% !important;
    /* background: #A8D3FF; */
    background: #84b2e1;
}