/* dit is de stylesheet die de vormgeving voor de site verzorgt
	elk onderdeel van de site heeft z'n eigen stijl elementen die samen voor de vormgeving zorgen */

*	/*sommige html elementen zoals de paragraph <p> tag hebben verborgen attributen zoals margin en padding
		hier zet ik deze attributen voor de hele site op nul, op die manier kan ik per onderdeel bekijken
		welke waarden de attributen moeten krijgen */		
		{
		margin: 0 0 0 0; /* de volgorde van de waarden is top right bottom left */
		padding: 0 0 0 0;
		border: 0 0 0 0;
		}
		
body  /* body slaat op de body van het html document, hier zet ik dus de achtergrond kleur en een marge van 20 pixels
			vanaf de bovenkant van het scherm. */	
		{
		background-color: #6e6868;
		margin: 20px 0 400px 0;
		font: 90% arial, verdana, sans-serif;
		}

.site_container /* deze container bevat de gehele site, door deze te centreren in de browser centreert de gehele site zich.
					voor het centreren maakt hij gebruik van de breedte van deze container. */
		{
		margin: 0 auto;
		width: 703px;
		height: 500px;
		}
		
		
.container_menu /* deze container bevat het hele menu gedeelte van de site, de Z-index waarde geeft aan op welke "laag"
					het menu zich bevind, z-index: 2; houd dus in dat het menu 1 laag hoger ligt dan de standaard z-index van 1 */
		{
		z-index:2;
		float:right;
		margin: 140px 0 0 0;
		}
					
.container_content /* deze container bevat het hoofd gedeelte van de site, float: right; houd in dat deze div zo ver mogelijk naar rechts
						probeert te gaan liggen.
						de negatieve linker margin zorgt ervoor dat de menu container naast de content 47 pixels naar binnen valt wat zorgt
						voor de overlapping. */
		{
		float: right;
		margin: 0 0 0 -57px;
		}

.menu_top 			/*deze div bevat de bovenkant van de website, er wordt gebruik gemaakt van een plaatje dat eenmalig als achtergrond image
						wordt gebruikt. */		
		{
		background: url('images/menu_top.gif') no-repeat top;
		width:221px;
		height:61px;
		}

.menu_content 
		{
		background: url('images/menu_width.gif') repeat-y;
		width: 191px;
		padding: 5px 15px 5px 25px; /* deze waarden zorgen voor de marge tussen het menu en de links in het menu, dit heeft echter ook invloed op de breedte van de site dus als je 20 pixels bij de linker marge op teld moet je ook de negatieve marge van de  .container_content 20 pixels groter maken*/
		}
		
.menu_bottom 
		{
		background: url('images/menu_bottom.gif') no-repeat top;
		width:221px;
		height:61px;
		}
	
.content_top 
		{
		background: url('images/content_top.gif') no-repeat top;
		width: 529px;
		height:100px;
		}
	
.content_bar 
		{
		background: url('images/content_bar.jpg') repeat-y;
		width: 499px;
		height: 20px;
		padding: 0 15px 0 15px;
		text-align: right;
		}
	
.content_main 
		{
		background: url('images/content_main.jpg') repeat-y;
		width: 459px;
		padding: 5px 15px 10px 55px;
		}
		
.extra_height
		{
		height:125px;
		}	
	
.content_footer 
		{
		background: url('images/content_footer_width.jpg') repeat-Y;
		width: 529px;
		padding: 4px 0 0 0 ;
		text-align: center;
		}
	
.content_bottom 
		{
		background: url('images/content_footer.jpg') no-repeat top;
		width: 529px;
		height: 30px;
		}
		
.logo 	{
		padding: 20px 0 0 20px;
		}
		
.pijl	{
		padding: 5px 0 0 5px;
		vertical-align:text-top;
		float: right;
		}
		
.film 	
		{
		position: absolute;
		top: 0;
		left: 0;
		width: 312px;
		height: 261px;
		}
		
.center_video
		{
		padding: 0 0 0 0;
		/*text-align:center; */
		} 
		
		
p		/* opmaak stijl voor alle paragraph tags, de font-size is weergegeven in een percentage van de default setting van de gebruiker,
			je kunt ook een pixel formaat gebruiken maar in dat geval kunnen gebruikers de fontsize in hun browser niet aanpassen.
			een percentage zorgt ervoor dat de gebruiker altijd het formaat naar eigen wens kan aanpassen. */
		{
		margin: 5px 25px 5px 5px; /* pas de paragraph style aan als je meer of minder marge of padding wilt */
		font: 90% arial, verdana, sans-serif; /*het gebruikte font is arial maar mocht de gebruiker dit niet op zijn computer hebben staan */
		color: #4F4949;							/* dan wordt er gezocht naar verdana of sans-serif */
		}
		
p.answer		
		{
		margin: 5px 25px 25px 25px; 
		font: 90% arial, verdana, sans-serif; 
		color: #776D6D;	
		}
		
p.question
		{
		margin: 5px 25px 5px 5px;
		font: 90% arial, verdana, sans-serif;
		color: #4F4949;
		font-weight: bold;		
		}
		
h1		
		{
		margin: 15px 5px 5px 5px;
		font: 95% arial, verdana, sans-serif;
		font-weight:bold;
		color: #C91618;
		}
		
h2		
		{
		margin: 15px 5px 5px 5px;
		font: 95% arial, verdana, sans-serif;
		font-weight:bold;
		color:  #4F4949;
		}
		
img 	{
		border:none;
		}
		
table 	
		{
		align: top;
		margin: 5px 25px 5px 10px;
		font: 90% arial, verdana, sans-serif; 
		color: #4F4949;
		}

ul.none
		{
		list-style: none;
		margin:0;
		border:0;
		padding:0;
		line-height:135%;	/*zorgt voor de verticale ruimte tussen de regels van het menu */
		}
		
li.none
		{
		margin: 0;
		border: 0;
		padding: 0 0 0 5px;
		font-size: 100%;
		font-weight: bold;
		}
		
li.indent {
		margin: 0;
		border: 0;
		padding: 0 0 0 15px;
		font-size: 100%;
		
		}
		
a.menu:link	
		{
		font-size: 90%;
		font-weight: bold;
		text-decoration: none;
		color: #c91618;
		background: transparant;
		border: none;
		}
		
a.menu:visited
		{
		font-size: 90%;
		font-weight: bold;
		text-decoration: none;
		color: #c91618;
		background: transparant;
		border:none;
		}
			
a.menu:hover
		{
		font-size: 90%
		font-weight: bold;
		text-decoration: underline;
		color:  #c94b4c;
		background: transparant;
		border:none;
		}
a.menu:active				/*deze link style maakt gebruik van een class, alle links <a> met de class "menu" gebruiken deze style, dankzij class stijlen kun je deze link style toepassen om sommige links zonder dat alle links in het document deze stijl krijgen */
		{
		font-size: 90%
		font-weight: bold;
		text-decoration: none;
		color: #c94b4c;
		background: transparant;
		border:none;
		}

a.bar:link	
		{
		font-size: 90%;
		text-decoration: none;
		color: #00638e;
		background: transparant;
		border: none;
		}

a.bar:visited
		{
		font-size: 90%;
		text-decoration: none;
		color: #00638e;
		background: transparant;
		border:none;
		}
			
a.bar:hover
		{
		font-size: 90%
		text-decoration: underline;
		color:  #0096d7; 
		background: transparant;
		border:none;
		}

a.bar:active
		{
		font-size: 90%
		text-decoration: none;
		color: #0096d7;
		background: transparant;
		border:none;
		}
	
a.bar02:link	
		{
		font-size: 90%;
		text-decoration: none;
		color: #ffffff;
		background: transparant;
		border: none;
		}

a.bar02:visited
		{
		font-size: 90%;
		text-decoration: none;
		color: #ffffff;
		background: transparant;
		border:none;
		}
			
a.bar02:hover
		{
		font-size: 90%
		text-decoration: underline;
		color:  #0096d7; 
		background: transparant;
		border:none;
		}

a.bar02:active
		{
		font-size: 90%
		text-decoration: none;
		color: #ffffff;
		background: transparant;
		border:none;
		}	
		
ul 	
		{
		list-style:square; 
		font: 90%  arial, verdana, sans-serif;
		/*margin: 10px 10px 10px 10px;*/
		color: #4F4949;
		}
		
li 
		{
		margin: 0 10px 0 15px;
		}
		
li.menu_list 
		{
		display: inline;
		list-style-type: none;
		}	
		
ul.menu_list
		{
		margin:0 0 0 0;
		text-align:center;
		vertical-align:middle;
		}	
	
img.text_picture 
		{
		padding: 0 0 0 0; margin: 0 0 0 0; border: 0 0 0 0;
		padding: 5px 5px 0 5px;
		}