html {height:100%;}
/* apply a natural box layout model to all elements */ *, *:before, *:after { -moz-box-sizing: border-box; box-sizing: border-box; }

body	{font: 0.88em/140% 'Open Sans', Arial, Verdana, Helvetica, sans-serif;}

body, html {
	margin: 0; padding: 0; 
	height:100%;
	color: rgba(31, 28, 28, 1);
	}
	
/* basics */	
html { overflow-y: scroll }

area, usemap {border:0;}

a img  { border: 0px;}
	
a { color: #9B3543;
text-decoration: none; }

p {	margin: 5px 10px 15px 0; }

table {	
	border-collapse:collapse;	
	border-top: 1px solid #c9bd7a;
	margin-top: 3px;
	margin-bottom:5px;
	width:100%;
	font: 0.85em;	
}
table caption {font-size:1.1em; text-align:left; }
table th {font-size:0.9em; padding: 4px; text-align:left; vertical-align: top;  background:transparent url(images/bg75.png); border-bottom: 1px solid #c9bd7a;}
table tbody td {font-size:0.9em; padding: 4px; vertical-align: top;  background:transparent url(images/bg50.png); border-bottom: 1px solid #c9bd7a;}
/*table tbody tr:hover td {background-color:#fff;}*/
tbody td p, tbody td h1, tbody td h2, tbody td h3, tbody td h4 {margin: 0; line-height: 150%;}


.bodybox {
	max-width: 970px;
    width: 98%;  
    margin: 0 auto;
	position:relative;
}
	
.container {
	margin: 0 20px 0 20px;
}

.containershadowleft {
position:absolute; 
top:0; 
left:0; 
width:20px; 
height:500px; 
background: transparent url(img/shadowleft.png)  no-repeat;}

.containershadowright {position:absolute; top:0; right:0; width:20px; height:500px;background: transparent url(img/shadowright.png)  no-repeat;}

.header { width: 100%; height: 115px;}
.header img.headerpic  {max-width:100%; float:left; padding: 40px 0 25px 0; }

/* .header .infobox {position:absolute; top:10px; left: 15px; width: 75%; height:100%; overflow:hidden; font-family: 'Times New Roman'}
.header .infobox h1 {font-size:2.8em; line-height:110%;}
.header .infobox h3 {font-size:0.95em; line-height:130%;}
.header .infobox a, .header .infobox h3 {color:#fff; font-weight:normal;}
.header .infobox a img {max-width:100%} */

.mainbox {margin: 0 0 0 0; }

.contentbox {width: 73%; float:right; }
.contentbox .inner {min-height:330px; padding:10px 25px 20px 15px;}

.contentbox .inner a: {color: #9B3543;
text-decoration: none;}

/* Kopjes */
h1, h2, h3, h4 {
	padding: 0;
	margin: 5px 0 5px 0;

}

h3 { font-size: 1.0em; }
h4 { font-size: 0.9em; }
h5 { font-size: 0.8em;}
h6 { font-size: 0.7em;}

.contentbox .inner h1 {
font-family: 'PT Serif', serif;
font-size: 2.1em;
color: #916757;
line-height:110%;
/* font-weight: 600; */
padding: 2% 0 12px 0;
font-weight: 700;
font-style: italic;
}

.contentbox .inner h2 {	
font-family: 'Roboto Slab', serif;
color: #054cb6;
font-size: 1.5em;
line-height:110%;
/* font-weight: 300; */
}

.contentbox .inner li {
	list-style-type: square;
}


.contentbox img {
-moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px; /* future proofing */
   -khtml-border-radius: 4px; /* for old Konqueror browsers */
}
.sm {font-size: 12px;
    line-height: 16px;}
    
.sm  img {margin-right: 10px;


-moz-border-radius: 6px;
   -webkit-border-radius: 6px;
   border-radius: 6px; /* future proofing */
   -khtml-border-radius: 6px; /* for old Konqueror browsers */
   }

 /* Probleem met opsomming naast afbeelding opgelost
http://perishablepress.com/margin-list-floated-image/ 
.contentbox .inner ul, .contentbox .inner ol {
width: auto;
overflow: hidden;
}*/


.sidebar {width: 28%; float:left; margin: -8px; }
.sidebar .inner {margin-top:40px}
.sidebar .inner  {font-size:1.1em; line-height:120%; font-style: italic; color: #666666;}

.sidebar .inner p {
    border: 0px solid #30728B;
    line-height: 140%;
 /*   padding: 3px 2px 4px 3px;
 	margin-right: -12px; */
}

.sidebar .inner h1, .sidebar .inner h2 {}
.sidebar .inner h3 {}

.sidebar .inner img {margin-left:-0%; max-width:100%;}

#contentwide {width: 100%; }

.footer {
   	max-width: 950px;
    width: 96%;
	height:60px;
    margin: 0 auto 0 auto;
	position:relative;
}

.footer .footerpic {width:100%; height:100%;}

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

.footer .inner a {
color: #666666;}
.footer .inner span { font-size:0.7em;}



.clearer {height:10px; clear:both;}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
/* http://webdesign.tutsplus.com/tutorials/site-elements/big-menus-small-screens-responsive-multi-level-navigation/ */
/* http://tessathornton.com/ */

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


/***********************************
	header-menu
************************************/

.topmenubar {background-color:#9B3543; width:100%; clear:both;}


.zoeken {
padding-top: 12px;
}

.zoeken input {
width: 97%;
color: black;
}

.zoeken input.textbox {
color: #000000 !important;}

#showlogin {
display:block; 
float:right; 
position:relative;  
width:30px; 
text-align:right; 
margin-top:3px; }

#login-box {
position:absolute; 
width:200px; 
left:-190px; 
top:25px; 
padding:10px; 
font-size:11px; 
background:transparent url(img/bg75.png);}

#login-box .inputfield {
width:80px; 
border: 1px solid #0c2109; 
padding:1px;}
.printbutton  {
display:block; 
float:right; 
padding-right: 10px;}

.breadcrumbs {
padding:5px 5px 4px 15px; 
clear:both; 
background:#FFFFFF;
color: #666666;}

.breadcrumbs span {
}

.breadcrumbs  .menu-current a {
color: #004000;
}
.breadcrumbs a {
font-size: 12px;
color: #666666;
}
.breadcrumbs span.menu-current a {
font-weight:bold; }

.childpages {width: 23%; 
float:left; 
margin: 1% 0 0 0;
min-width:130px; 
margin-right:0%; 
font-size: 1.0em;  
background:/* #30728B #D41500*/ #FFFFFF;}


.childpages ul, .childpages li {
	list-style-type: none;
	list-style-image: none;
	margin: 20px 0 0 0 ; 
	padding: 0;
	border-top: 0px solid #ECECEC;
	background: url(img/pijlrechts-zwart-6px.jpg) no-repeat 3px 12px;
}

.childpages li a {
	display: block; 	
	text-decoration: none; 
	font-weight: bold;
	line-height:120%;
	/*text-shadow: 1px 1px 1px #000;*/
	padding: 8px 2px 8px 20px;
    color: rgba(10, 0, 0, 0.67);
}

.childpages .menu-current a {
color: #aaa;
}

.childpages h3 {
color: #000;
}

ul.nav { 
	list-style-type: none;
	margin: 0; padding: 0;
	position: relative; 
float: right;	
}

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 #fff;
	background-color:#9B3543;
	
	
	-moz-border-radius: 4px;
   -webkit-border-radius: 4px;
   border-radius: 4px; /* future proofing */
   -khtml-border-radius: 4px; /* for old Konqueror browsers */
   
   
}
ul.nav li li {background:none;}

.nav li a {
	display: block; 	
	text-decoration: none; 
	font-weight: bold;
	line-height:120%;
	/*text-shadow: 1px 1px 1px #000;*/
	padding: 7px 15px;
    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: #aaaaaa;  color: #9B3543;
}

/* 2 Ebene */
.nav li ul {
	background: #AAAAAA ;
    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 #30728B;
	border-right: none;
}
.nav li ul li a {
    font-weight: normal;
	padding: 6px 6px 6px 15px;
	font-size: 0.9em;
	color: #054CB6;
}

/* 2 Ebene hover */
.nav li ul a:hover,  .nav li ul a.menu-current,  .nav li ul a.menu-parent  { color: #000000;}

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

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

.nav li:hover {
	z-index: 10000;	
	white-space: normal;						
}

/* media screen and (max-width: 768px) */

@media screen and (max-width: 768px) {
	a#mobilemenu { 
		display:  block;  
		background: #30728B;   
		color: #fff;
		width:100%;
	}
	
    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 li, ul#mobile li li, ul#mobile li li li {
			float: none;
			border-right: none; 
			width:100%  ! important;
			display: block;
			border-bottom: 1px solid #fff;
	}
	
	
	ul#mobile li.menu-parent > ul, ul#mobile li.menu-current > ul {display: block}
	ul#mobile {display: block}
	
	ul#mobile a.menu-parent { color: #fff; }
	#mobile a.menu-expand {
		background-image: url(img/downArrow2.png);
		background-repeat: no-repeat;
		background-position: right 50%;
	}
		
	#mobile a.menu-parent { color: #000;
		background-image: url(img/downArrow.png);
		background-repeat: no-repeat;
		background-position: right 50%;
		}
	

	ul#mobile {display:none;}


}

/*~~~~~~~~~~ media screen and (max-width: 480px) ~~~~~~~~~~~~~~*/

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

	.search_box {margin-top:-30px;}
	.printbutton, #showlogin {display:none;}
	
	.header .infobox {top:0; left: 2%; width: 60%; }
	.header .infobox h1 {font-size:1.4em; line-height:100%;}
	.header .infobox h2 {font-size:1.1em; line-height:100%;}
	.header .infobox h3 {display:none}
	
	
/* Tables */

table {border-collapse:collapse;}
td {vertical-align: top; font: 0.85em} 

table { 
		width: 100%; 
		border-collapse: collapse; 
	}
	/* Zebra striping 
	tr:nth-of-type(odd) { 
		background: #eee; 
	}
	th { 
		background: #333; 
		color: white; 
		font-weight: bold; 
	}*/
	td, th { 
		padding: 6px; 
		border: 1px solid #ccc; 
		text-align: left; 
	}
	
	/* Force table to not be like tables anymore */
		table, thead, tbody, th, td, tr { 
			display: block; 
		}
		
		/* Hide table headers (but not display: none;, for accessibility) */
		thead tr { 
			position: absolute;
			top: -9999px;
			left: -9999px;
		}
		
		tr { border: 1px solid #ccc; }
		
		td { 
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee; 
			position: relative;
			padding-left: 50%; 
		}
		
		td:before { 
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 6px;
			left: 6px;
			width: 45%; 
			padding-right: 10px; 
			white-space: nowrap;
		}
	
	
	/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
	.bodybox{ width: 100%; }
	
	.mainbox {margin: 20px 0 20px 0;}
	.contentbox {width: 100%;
	}

	.sidebar {display:none;}
	.footer { width: 100%; }
	
	.childpages {width: 60%; float:left; margin-left:3%;}
	
	.container { margin: 0 3% 0 3%; }
	.containershadowleft, .containershadowright{display:none; }

	
	.showonmobiles {display:block ! important;}
}