/*html { overflow-y: hidden; }/* om de scroll bar te laten verdwijnen*/

html, body{
	margin:0px;
	padding:0px;
	border:0px;
	height:100%;
	}

body{
	background-color:#AACEC0;
	width:100%;
	}

p, h1, h2, h3, h4, h5, h6, a, ul, td, th, label, hr, legend{
	margin: 5px 0 0;
	font-size:14px;
	color: #006666;
	font-family: Arial, Helvetica, sans-serif;
	}

h1, h3, h6, legend{
	color: #963629;
	}

h1, h4{
	font-size: 20px;
	}
	
h1 + h2 {
	margin:0px;
	}

h3 {
	font-size:16px;
	}

p + h3, div > h3 {
	margin-top:15px;
	}
	
legend + h3{
	margin:0px;
	}

legend {
	margin:0px;
	width:auto;
	font-weight:bold;
	}
	
img{
	margin:0 auto;
	padding:0px;
	float:left;
	border:0;
	}

hr{
	margin:0px;
	border-width: 2px;
	border-style:solid;
	}
	
ul{
	list-style:disc;
	padding-left:10px;
	margin-left: 10px;
	}
	
/* --- items die standaard uit staan --- */
#navicon, #menu, #overlay {
	display:none;
	}

/* --- Menubalk --- */
#centeredmenu {
	clear:both;
	float:left;
	margin:0;
	padding:0;
	border-bottom:1px solid #000; /* black line below menu */
	width:100%;
	font-family:Verdana, Geneva, sans-serif; /* Menu font */
	font-size:90%; /* Menu text size */
	z-index:1000; /* This makes the dropdown menus appear above the page content below */
	position:relative;
	}

/* Top menu items */
#centeredmenu {
width:100%;
background-color:#6D8E85 /*84A0AB*/;
	}
	
#centeredmenu ul {
	margin:0;
	padding:0;
	list-style:none;
	float:right;
	position:relative;
	right:50%;
	width:auto;
	}

#centeredmenu ul li {
   margin:0 0 0 1px;
   padding:0;
   float:left;
   position:relative;
   left:50%;
   top:1px;
	}

#centeredmenu ul li a {
   display:block;
   margin:0;
   padding:.6em .5em .4em;
   font-size:1em;
   line-height:1em;
   background:#6D8E85 ;
   text-decoration:none;
   color:#FFF;
   font-weight:bold;
   border-bottom:1px solid #000;
	}

#centeredmenu ul li.active a {
   color:#000;
   background:#000;
	}

#centeredmenu ul li a:hover {
   background:#AABDB0; /* Top menu items background colour */
   color:#000;
   border-bottom:1px solid #03f;
	}

#centeredmenu ul li:hover a,
#centeredmenu ul li.hover a { /* This line is required for IE 6 and below */
   background:#AABDB0; /* Top menu items background colour */
   color:#000;
   border-bottom:1px solid #03f;
	}

/* Submenu items */
#centeredmenu ul ul {
   display:none; /* Sub menus are hiden by default */
   position:absolute;
   list-style:none;
   top:2em;
   left:0;
   right:auto; /*resets the right:50% on the parent ul */
   width:10em; /* width of the drop-down menus */
	}

#centeredmenu ul ul li {
   left:auto;  /*resets the left:50% on the parent li */
   margin:0; /* Reset the 1px margin from the top menu */
   clear:left;
   width:100%;
	}

#centeredmenu ul ul li a,
#centeredmenu ul li.active li a,
#centeredmenu ul li:hover ul li a,
#centeredmenu ul li.hover ul li a { /* This line is required for IE 6 and below */
   font-size:.8em;
   font-weight:normal; /* resets the bold set for the top level menu items */
   background:#eee;
   color:#444;
   line-height:1.4em; /* overwrite line-height value from top menu */
   border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
	}

#centeredmenu ul ul li a:hover,
#centeredmenu ul li.active ul li a:hover,
#centeredmenu ul li:hover ul li a:hover,
#centeredmenu ul li.hover ul li a:hover { /* This line is required for IE 6 and below */
   background:#36f; /* Sub menu items background colour */
   color:#fff;
	}

/* Flip the last submenu so it stays within the page */
#centeredmenu ul ul.last {
   left:auto; /* reset left:0; value */
   right:0; /* Set right value instead */
	}

/* Make the sub menus appear on hover */
#centeredmenu ul li:hover ul,
#centeredmenu ul li.hover ul { /* This line is required for IE 6 and below */
   display:block; /* Show the sub menus */
	}

/* --- Tabel --- */

table{
	border-style: solid;
	border-width: 1px 0px 0px 1px;
	border-color: red;
	background-color: #FFFFCC;
}

th{
	background: #006666;
	color: #FFFFCC;
	font-weight: bold;
	}

td, th {
	border-style: solid;
	border-color: #FF0000;
	border-width: 0px 1px 1px 0px;
	}
	
td {
	text-align:center;
	}
	
td:first-child, th:first-child {
	text-align:left;	
	}

.small{
	width:650px;
	}

.wide{
	width:650px;
	}
	
/* ------- DIVs ------- */
.page {
	overflow:hidden;
	margin: 0px auto;
	width: 1330px;
	min-height: 100%;
	position: relative;
	background-color: #FFFFCC;
	}

.header{
	width: 100%;
	float:left;
	clear:both;
	margin-bottom:10px;
	}
 
.header img{ /* SBlogo*/
	margin-bottom:10px;
	margin-right: 10px;
	}

.headerfotolijst{
	width:100%;
	height:auto;
	float:left;
	margin-bottom:10px;
	clear:both;
	}

.headerfotolijst img{
	width:calc(100% / 3);
	width:33.333332%;
	height:auto;
	margin:0px;
	}

.content {
	width:1310px;
	width:calc(100% - 10px);
	float:left;
	margin:0px auto;
	padding:0 5px 140px; 
	position:relative;
	}
	
.midden {
	margin:0px auto 10px;
	width: 650px;
	position: relative;
	padding:0px;
	}

.clear{
	clear:both;
	}

.footer{
	position:absolute;
	bottom:0;
	height:140px;
	width:1310px;
	width:calc(100% - 10px);
	background-color:#6D8E85;
	padding:0px 5px;
	}

.footer ul{
	list-style-type:none;
	padding:0px;
	}
	
.footer ul li{
	/*height:20px;*/
	margin:10px 0px;			
	}
	
.boxtxt{
	float:left;
	position:relative;
	width:220px;
	margin:0 10px;
	}
	
/* --- twee Kolommen --- */

.tweekolommen{
	overflow:hidden;
	}
	
.tweekolommen .small{
	width:320px;
	}
	
.tweekolommen div {
	float:left;
	width:320px;
	}
	
.twongelijk div:first-child {
	width:calc(100% - 225px);
	margin-left:5px;
	}
 	
.middden > .twongelijk div:first-child {
	width:480px;
	}
	
.twongelijk div:last-child {
	width:160px;
/*	max-width:160px;
	margin-left:10px;*/
	float:right;
	}
	
.tweekolommen img{
	max-width:320px;
	margin-top:5px;
	}
	
.tweedekolom { /* om ruitme tussen de kolommen te creeeren */
	margin-left:10px;
	}

.kenmerken ul{
	font-size: 12px;
	color: #963629;
	font-weight: bold;
}
	
/* --- strip --- */ 
.strip {
	position:relative;
    width:calc(100% - 10px);
    height:80px;
    margin:0 auto 10px;
	background-color:#96b480;
	overflow:hidden;
	}

.strip h2{
	width:calc(100% - 40px)/*1310px*/;
    margin: 0px;
    padding:0 20px;
    position:absolute;
	top:50% ;
	-ms-transform: translate(0, -50%); /* IE 9 */
    -webkit-transform: translate(0,-50%); /* Safari */
	transform: translate(0, -50%);
 	font-size:25px;
	color:white;
	text-align: center;
	line-height:40px;
	}
	
.strip img{
	position:absolute;
	left:33%;
    -ms-transform: translate(-33%, 0); /* IE 9 */
    -webkit-transform: translate(-33%, 0); /* Safari */
	transform: translate(-33%, 0);
	}

.strip .links {
	text-align: left;
	}

.strip .rechts {
	text-align: right;
	}

/* --- menubox --- */
.menubox { /* algemene box */
	float:left;
    width:320px;
    padding:0px;
    border:0px;
    margin:0 5px 10px;
    background-color:#963629;
	}
	
.menubox a{
	text-decoration:none;	
	}

.menubox div{
	float:left;	
	}

.menuimage { 
    width:320px;
    max-height:160px;
    overflow:hidden;
    position:relative;
	}
	
.menuimage p{
	right:0;
	top:15px;
	position:absolute;
	z-index:100;
    padding:4px;
    font-size:12px;
    font-weight:bold;
    text-align:left;
    background-color:#FFD700;
    margin:0px;
	}

.menuheader {
    height:30px;
    margin:0px;
    width:100%;
	}

.menuheader h1 {
	color:black;
	height:30px;
	line-height:30px;
 	margin:0px;
  	padding:0% 2%; 
 	width:96%;
	}
	
.menuheader h2 {
	color:white;
	height:20px;
  	padding:0% 2%; 
 	width:96%;
	}
	
.menuheader p { /* alleen bedoeld voor lijst */
	color:white;
	font-size:12px;
  	padding:0% 2%; 
 	width:96%;
	}
	
.menutext {
	height:118px;
	width:319px; /* standaard 320  -1 border */
	margin:1px 1px 1px 0px;
	background-color:#FFFFCC;
	padding:5px;
	}
	
.menutext p {
	padding:0 2%;
 	width:96%;  
	margin:0px;
	font-size:13.25px;
	}
	
.tweerheader { /* gebruik voor een bij een ondertitel*/
	height:50px;
	}

.tweerheader + .menutext{ /* maakt de textbox kleiner om ruimte te maken voor de ondertitel*/
	height:98px;/*103px;*/
	}

.menubox:hover {
	background-color:#96B480;
	}
		
/* --- menubox met extra text --- */
/* --- text verplaatst tussen: naast en onder het plaatje --- */
.bside {
	width:650px;
	}

.bside h1{
	color:white;
	}
	
.bside .menuheader{
	width:320px;
	margin:0 5px; /*vulling van de ruimte tussen de kolommen */
	}
	
	/* --- css voor beschrijvingen --- */
.midden > div,
	{ /* algemeen */
	width:100%;
	}
	
.midden .menutext{
	width: 638px;
	width: calc(100% - 12px);
	height: auto; /*!important;*/
	margin: 1px;
	}
	
.midden .menutext p{
	padding: 0px; /*!important;*/
	width: auto; /* !important;*/
}	

/* --- plaatjes naast de info --- */
	
.sideimg{
	width:320px;
	position:absolute;
	top:90px;
	margin-bottom:10px;
	}

.sideimg img{
	width:100%;
	height:auto;
	margin-bottom:10px;
	}

.sil{
	left:10px;
	}

.sir{
	right:10px;
	}

.close, .open, .inv, .inv2{/* hide */
	display:none;
	}
	
@media screen and (max-width: 1329px) {/* 3 kolommen */
.page{
	width:1000px;
	}
	
.content, .footer{
	width:990px;
	}

.menutext {
	margin:1px;
	width:318px; /* standaard 320 - 2 margin */
	padding:5px 0px;
	}

.bside, .bside .menuheader {/* text naast het plaatje */
	width:320px;
	}
	
.bside .menuheader {/* text naast het plaatje */
	margin:0px;
	}	

.sideimg{
	width:160px;
	}
	
.midden > div,
	{ /* algemeen */
	width:100%;
	}
	
.midden .menutext{
	width:calc(100% - 2px);
	height:auto; /*!important;*/
	}
	
.midden .menutext p{
	padding: 0px; /*!important;*/
	width: auto; /* !important;*/
	}	

.midden .bside {
	width:100%;
	}
}

@media screen and (max-width: 999px) {/* 2 kolommen */
.page{
	width:670px;
	}
	
.content, .footer{
	width:660px;
	}
	
	.content {
	padding-bottom:400px;
	}

.footer {
	height:400px;
	}

.menutext {
	width:319px; /* standaard 320 + 10 margin tussen de menubox - 1 border */
	margin:1px 1px 1px 0px;
	padding:5px;
	}

.bside {/* text naast het plaatje */
	width:650px;
	}

.bside .menuheader{
	width:320px;
	margin:0 5px;
	}
	
.sideimg{
	width:320px;
	}

.sideimg img{
	display:none;
	}
	
.sideimg img:first-child{
	display:inline-block;
	}
	
.midden:before{
	content: "";
    display: block;
    height: 160px;
	}

.nospace:before{ /*extra ruimte weghalen bij geen plaatsjes */
	display:none;
	}

.remove{
	display:none;
	}
	
.inv{
	display:list-item;
	}
}

@media screen and (max-width: 669px) {/* 1 kolom */
.page{
	width:340px;
	}
		
.content, .footer{
	width:330px;
	}
	
.content {
	padding-bottom:460px;
	}
	
.footer {
	height:460px;
	}

.headerfotolijst{
	display:none;
	}

.header img{
	margin:0 10% ;
	width:80%;
	height:auto;
	clear:both;
	}

.header{
	text-align:center;
	}

.header h2{
	display:none;
	}

.midden {
	width:320px;
	}
	
.small{
	width:320px;
	}
	
.menutext {
	margin:1px;
	width:318px; /* standaard 320 - 2 margin */
	padding:5px 0px;
	}

.bside, .bside .menuheader {/* text naast het plaatje */
	width:320px;
	padding:0px;
	}
	
.bside .menuheader {/* text naast het plaatje */
	margin:0px;
	}

.tweekolommen div{
	width:100%;
	}
	
.tweedekolom { /* om ruitme tussen de kolommen te creeeren */
	margin-left:0px;
	}
	
.twongelijk div:first-child {
	width:320px;
	}
	
.twongelijk div:last-child{
/*	display:none;*/
	float:left;
	}
	
.sir{
	display:none;
	}
	
.remove2{
	display:none;
	}
	
.inv2{
	display:list-item;
	}

/* --- collapse options --- */
.close{
	display:none;
	}

.open{
	display:inline;
	}

.collapse{
	height:200px;
	overflow:hidden;
	border-bottom:2px #006666 solid;
	box-shadow:inset 0px -15px 10px -10px grey;
	}

.open:target {
	display:none;
	}

.open:target + .close {
	display:inline;
	}

.open:target ~ .collapse{
	height:100%;
	}
}

@media screen and (max-width: 421px) {/* smaller dan een kolom */
.page{
	width:100%;
	}
	
.content{
	width:100%;
	margin:0px;
	padding: 0 0 120.0vw;
	}
	
.footer{
	padding:0px;
	width:100%;
	height:120.0vw;
	}
	
.midden {
	width:96.0vw;
	margin:0 2.0vw;
	}
	
h1 {
  font-size: 5.9vw;
	}
	
h3 {
	font-size:4.5vw;
	}
	
p, li, a, h2, td ,th {
  font-size: 4.2vw;
	}
	
.bside p{
	font-size: 3.8vw;
	}

.midden:before{
    height: 50.0vw;
	}
	
.menubox, .menuimage, .menuheader, .bside, .bside .menuheader, .strip{
	width:100vw;
	padding:0px;
	margin:0px;
	}
	
.menuimage{
	height:50.0vw;
	max-height:none;
	}
	
.menuimage img{
	width:100vw;
	}

.menutext{
	width:98.75vw;/*calc(100% - 4px);*/
	margin: 0.625vw 0.625vw; /* 2px 2px*/
	height:31vw;
	}

.tweerheader + .menutext{
	width:98.75vw;/*calc(100% - 4px);*/
	margin: 0.625vw 0.625vw; /* 2px 2px*/
	height:31vw;
	}
	
.menubox, .strip{
	margin:5px 0;
	}

.sideimg{
	margin:0 2.0vw;
	width:96.0vw;
	}
	
.twongelijk div:first-child{
	width:96.0vw;
	}
	
.kenmerken ul{
	margin-left: 2.0vw;
	padding-left:2.0vw;
	width: 92.0vw;
	}
	
.remove2, .remove{
	display:list-item;
	}
	
.inv2, .inv{
	display:none;
	}
	
.sil{
	left:0;
	}
/* --- menu voor op mobiel --- */	
#navicon {
	display:block;
	position:fixed;
	right:10px;
	top:10px;
	width: 24px;
	background-color: black;
	border-radius: 4px;
	padding: 2.5px 6px;
	z-index:5;
	}

#navicon>hr{
	border-radius: 2px;
	margin: 4px auto;
	border: 2px white solid;
	background-color: #FFFFCC;
	}
	
#overlay{
	position:fixed; 
	top:0; 
	left:0; 
	background:rgba(0,0,0,0.6); 
	z-index:10; 
	width:100%; 
	height:100%; 
	display:none;
	}

#centeredmenu {
	display:none;
	position:relative;
	background-color:transparent;
	z-index:11;
	width:100%;
	}
	
#centeredmenu li{
	width:100%;
	}
	
#centeredmenu ul>li>ul>li{
	display:none;
	}

#centeredmenu >a:hover{
	background-color:black;
	}

#centeredmenu:target, #centeredmenu:target + #overlay {
	display:block;
	opacity:2;
	}
}

@media print {

p, h1, h2, h3, h4, h5, h6, a, ul, td, th, label, hr, legend{
	margin: 5px 0 0;
	font-size:14px;
	font-family: Arial, Helvetica, sans-serif;
	color: black;
	}

h1, h3, h6, legend{
	color: #963629;
	}

h1, h4{
	font-size: 18px;
	page-break-after: avoid;
	}
	
h1 + h2 {
	margin:0px;
	}

h3 {
	font-size:16px;
	}
	
.strip img {
	width:100%;
	}

.bside .menuheader{
	width:320px;
	margin:0 5px; /*vulling van de ruimte tussen de kolommen */
	}
	
.midden > div{ /* algemeen */
	width:100%;
	}
	
.menutext{
	height:auto;
	}
	
.midden .menutext p{
	padding: 0px;
	width: auto;
	}	

/* Remove unwanted elements */
.headerfotolijst, .sideimg, .footer, #centeredmenu, #navicon {
	display: none;
	}

/* Ensure the content spans the full width */
.content, .midden, .header, .mideen .menubox, .strip, .page {
	width: 100%; margin: 0; padding: 0;
	}
	
/*divs which shouldn't float*/
.header, .midden, .content{
	float: none;
	}

/*no pagebreaks here*/	
.menubox img{
	page-break-inside:auto;
	}

.menubox {
	page-break-inside:avoid;
	margin-bottom:10px;
	}
	
.menutext p{
	page-break-before:avoid;
	}
	
.page, .menutext, table, th  {
	background-color: white;
	}
}