﻿* { 
 margin: 0; 
 padding: 0; 
}
 
body {  
 font-family: helvetica, "sans-serif";
 color: black;
 font-size: 0.95em;
 background-color: darkgray;
 background-image: url('achtergrondgrijs.png');
 <strong>user-select: none;</strong>
}

#websitevak {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 96.5%;
max-width:896px; 
margin: auto;
border: 1px solid darkslateblue; chocolate;
/*border: 9px solid sienna;*/
padding: 0.8em 1em 0em 1em;
background-color: ivory;
overflow: auto;
}

@media screen and (max-width: 800px) {
	#websitevak { position: static; width: 95%; border: none; }
}

@media screen and (min-width: 1441px) {
	#websitevak { width: 60%; }
}

#balkboven { 
 width:100%;
 height: 0.2em;
 background-color: ivory;
 background-image: url('vaandel7b.jpg');
 background-repeat: no-repeat;
 background-size: contain;
 background-position: 80% center;
 }

/* waarom apenstaartje op regel 51 */ 
@media screen and (max-width:800px) {
@	#balkboven { height: 8em; }
}

@#balkboven p { 
 width:60%;
 position: relative;
 top: 35%;
 left: 2%;
 /*font-family: helvetica, sans-serif;
 font-size: 2.4em;
 font-weight: normal;
 text-transform: uppercase;*/
 }

@media screen and (max-width: 800px) {
	#balkboven p { font-size: 1.6em; }
}

@media screen and (max-width: 400px) {
	#balkboven p { font-size: 1.2em; }
}

#balkboven p a {
color: ivory;
 text-decoration: none;
 }
  
#fotobalkboven {
 display: none;
}

#middenstuk {
} 
 
#menu { 
 	width: 886px; 
	float: left;
 	border-top: 4px solid ivory;
	background-color:Maroon;
 }

#menu ul {
 	list-style-type: none;
 }

#menu ol { 
 	list-style-type: none;
 }


#hoofdmenu > li {
 	float: left;
	position: relative;
}

@media screen and (max-width: 800px) {
	#hoofdmenu > li { float: none; }
}

#hoofdmenu > li > a {
 	display: inline-block;
	background-color: Maroon;
 	color: white;
 	font-weight: bold;
 	font-size: 0.96em;
 	padding: .7em 1.3em .7em 1.3em;
 	text-decoration: none;
 	text-align: left;
}

@media screen and (max-width: 800px) {
	#hoofdmenu > li > a { display: block; border-bottom: 1px solid white; }
}

#hoofdmenu > li > a:hover {
 	background-color: darkslateblue;
 }

#hoofdmenu > li:hover ul {
 	display: block;
 	position: absolute;
 	top: 2.5em;
 	left: 0;
 	z-index: 2;
}

@media screen and (max-width: 800px) {
	#hoofdmenu > li:hover ul { position: absolute; top: 0; left: 9em; }
}

.submenu > ul {
 	display: none;
}

.submenu > ul ul ul > {
	display: none;			
}

.submenu > ul > li > a{
 	display: block;
 	background-color: midnightblue;
 	color: white;
 	width: 7.3em;
 	padding: 0.5em 0.5em 0.3em 0.9em;
 	text-decoration: none;
 	border-top: 0.5px solid ivory;
}

@media screen and (max-width: 800px) 	{ 
	.submenu > ul > li > a { background-color: white; color: midnightblue; min-width: 92%; border-top: 0; border-bottom: 1px solid midnightblue; }

}
.submenu > ul > li > a:hover {
 	background-color: darkslateblue;
}

@media screen and (max-width: 800px) 	{ 
	.submenu > ul > li > a:hover { color: white;}
}
   
#hoofdvak { 
 clear: both;
/*width: 98%;*/
 width: 94%;
/* margin: 1em auto 1em auto;*/
 margin: auto auto auto auto;
 overflow: auto;
}

@media screen and (max-width: 800px) 	{ 
	#hoofdvak { margin: 21em auto 1em auto; }
}
	
#tekstvak { 
 }

#tekstvak p { 
 font-size: 0.95em;
 line-height: 1em;
 margin-bottom: 1em;

 }

#tekstvak ol { 
 font-size: 0.95em;
 line-height: 1em;
 margin-bottom: 1em;
 margin-left: 2em;
 }

#tekstvak ul { 
 font-size: 0.95em;
 line-height: 1em;
 margin-bottom: 1em;
 margin-left: 2em;
 }

#tekstvak ol li {
 position: relative;
 left: 2em;
 padding-right: 2em;
 }

#tekstvak ul li {
 position: relative;
 left: 2em;
 padding-right: 2em;
 }

@media screen and (max-width: 800px) 	{ 
	#tekstvak ol li { position: static; left: 0; padding-right: 0; }
	#tekstvak ul li { position: static; left: 0; padding-right: 0; }
}
 
#tekstvak h1 { 
 font-family: Arial, sans-serif;
 font-size: 1.3em;
 font-weight: bold;
 color: indigo;
 margin: 0 0 1.2em 0;
 padding: 1em 0 0 0;
 }
 
#tekstvak h2 { 
 font-family: Arial, sans-serif;
 font-size: 1.2em;
/* font-size: 0.95em;*/
 color: midnightblue;
 padding-top: 0.25em;
 margin-bottom: 0.25em;
 }

#tekstvak h3 {
 font-family: Arial, sans-serif;
 font-size:0.8em;
 color: darkslategray;
 font-variant: small-caps;
 padding-bottom: 0.5em;
 text-align:center
 }

/*#tekstvak img { 
max-width: 95%;*/
}

#extravak  {
 width: 80% 
 margin: 0 auto;
 padding: 0.5em;
/* border: 1px ridge darkgray;*/
 }

 }
@media screen and (max-width: 800px) 	{ 
	#extravak { width: 98%; padding: 0.5em 0; }
}

#inhoudextravak {
 margin: 0 auto;
 text-align: center;
 }
  
#inhoudextravak > h3 {
 font-family: Arial, sans-serif;
 font-size: 0.90em;
 color: darkslategray;
 font-variant: small-caps;
 padding-bottom: 0em;
 }
 
#inhoudextravak > p {
 font-size: 0.8em;
 color: black;
 padding: 0.2em 0.2em 0.6em 0.2em;
 }

#balkbeneden { 
 clear: both;
 width: 100%;
 background-color: Dimgray;
/*  background-color: Darkslategray;*/
 margin-bottom: 0.4em;
 }

#inhoudbalkbeneden {
 width: 100%;
 padding: 0.5em 0em;
 text-align: center;
}

#inhoudbalkbeneden span {
 display: inline-block;
 padding: 0.1em 3em;
 font-size: 0.85em;
 color: white;
 white-space: nowrap; 
 border-right: 0px solid white;
}

@media screen and (max-width: 800px) 	{ 
	#inhoudbalkbeneden span { width: 100%; padding: 0.5em 0em; border-right: 0; border-bottom: 1px solid white; }
}

#inhoudbalkbeneden span:last-child {
  border-right: none;
  border-bottom: none;
}

#inhoudbalkbeneden span a {
 text-decoration: none;
 color: white;
}
 
 .clearfix:after {
  content: "";
  display: table;
  clear: both;
}  

 .clearfix:before {
  content: "";
  display: table;
  clear: both;
}  

.links {
  padding: 0.2em 0.8em 0.6em 0;
  float: left;
 }
  
.rechts {
  padding: 0.2em 0em 0.6em 0.8em;
  float: right;
  }
  
.gecentreerd {
 display: block;
 margin: 0 auto 1em auto;
 }
 
.socialmedia {
 border: 0;
 padding: 0.5em 0.2em;
 ]
 
