/* Cascading Style Sheet */

/* TOELICHTING BIJ DEZE CASCADING STYLE SHEET
    	1 Gebruik geen hoofdletters in de naam dat geeft fouten 
		2 Deze style sheet Wordt gebruikt op de site van 4defence

INHOUDSOPGAVE
0030	DE ELEMENTS vanaf regel 030

0300	DE ID'S      VANAF REGEL 300
		ID's beginnen met een #
		Met behulp van een ID-attribuut, kun je een naam geven aan een element. 
		Deze naam is uniek in de pagina, zodat zowel CSS als JavaScript dit element aan kunnen roepen om er wat mee te doen. 
		 
		Let op een id mag maar 1x gebruikt wordten in een document 
		Het kan meerdere keren gebruikt worden maar dan maak je een fout 

		Class vs ID
		
		The difference between ID and class is that an ID selector can be called only once in a document, 
		while a class selector can be called multiple times in a document. 
		
		The second difference is that ID can be called by Javascript's getElementByID function.
		There is no hard rule on when to use ID and when to use Class. 
		
		My suggestion is to use class as much as possible for maximum flexibility, with the only exception being when you want to use 
		Javascript's getElementByID function, in which case you need use ID.
		
		Class and ID names are both case sensitive. For example, .classone and .ClassOne are two different classes. 



0400	DE CLASSES De CLASS-selector heeft als basis een punt gevolgd door een class-naam.  vanaf regel 400
		ID's beginnen met een #	*/

		














/* =Elements. De elements staan hieronder
----------------------------------------------------------------------------------------------- */

		
	tbody {
		display:table-row-group;
		vertical-align:middle;
		}
		
		
	a:active {
		text-decoration: underline;
		}
		
	a:hover {
		text-decoration: underline;
		background-color:yellow; 
		}
		
	a:link {
		text-decoration: underline;
		}
		
	a:visited {
		text-decoration: underline;
		}
		
	body {
		/* commentaar bij deze style sheet bepaalt de achtergrondkleur*/
		/*font-size: 12px; */
		background-color: transparent;
		background-repeat: repeat;
		background-attachment: scroll; 
		/* margin-bottom:50; */;
		/* font-family: "Times New Roman", Times, serif;*/
		/* font-style: italic;*/
		/* background-image: url(''); */
		color: #000000;
		font-size: 18px; /* margin-top: 80px; */;
		font-weight: 500;
		font-style: normal;
		}
		
	dl{
		margin: 15px;
		padding: 10px;
		border: 2px solid #12127D;
		background: #C8C8FF;
		}
		
	dt{
		font-weight: bold;
		color: #12127D;
		padding: 0 0 0 10px;
		}
		
	dd{
		color: #1919B3;
		padding: 0 0 20px 25px;
		background: url(uitroepteken.gif) no-repeat 0 0;
		} 
		
	datumagenda {
		color: #0000ff;
		font-family: "Arial Black";
		font-weight: normal;
		}
		
	div.box4kol1en2 {
		background-color: orange; 
		/*height: 80px; */
		}
		
	div.box4 {
		/* bevat kolom 1,2 en 3 kol 1=20, kol 2=62, kol 3=18    */
		background-color: purple; 
		float: left;
		width: 100%;
		/*height: 80px; */
		}
		
	div plaatje1 {
		left: 180px;
		}
		
	div.lekkercompact {
		/*    background-color: red;*/
		line-height: 16px;
		margin: 6px;
		}
		
	div.rechtsdivers {
		left: 10px;
		position: absolute;
		}
		
	h1 {
		font-size: 12pt;
		margin-left: 30px;
		font-weight: normal;
		color: black; /*Stel de letterkleur in*/;
		margin-top: 1px; /*alineaafstand boven*/;
		margin-bottom: 12px;
		}
		
	h2 {
		font-size: 12pt; /*1*/;
		margin-left: 60px; /*2*/;
		font-weight: normal; /*4*/;
		color: black; /*5*/;
		margin-top: 1px; /*6 alineaafstand boven*/;
		margin-bottom: 12px; /*7*/
		}
		
	h3 {
		font-size: 10px;
		margin-left: 50px;
		margin-top: -10px;
		margin-bottom: -20px;
		color: red; /* border-style: double; */
		}
		
	h4 {
		font-size: 16px;
		margin-left: 10px;
		color: blue;
		list-style-type: decimal;
		}
		
	h5 {
		font-size: 12px;
		}
		
	h6 {
		font-size: 10px;
		}
		
	linkerKolom {
		left: 05px;
		position: absolute;
		top: 741px;
		width: 160px;
		border: solid;
		}
		
	middenkolom {
		left: 180px;
		position: absolute;
		top: 195px; /* width: 500; */;
		border: solid;
		}

	middenkolom1 {
		left: 250px;
		position: absolute;
		/* width: 500;  */
		}
		
	p {
		/* commentaar bij deze style sheet de alineas die niet zijn ingedeeld */
		/*margin-left: 90px; */
		/*margin-top: 5 px; */
		/*margin-bottom: 10 px; */
		/*top: 165px; */
		/*left: 187px; */
		}
		
	RechterKolom {
		left: 690px;
		position: absolute;
		top: 195px;
		width: 210px;
		border: solid;
		}
		
	TekeningMidden {
		left: 180px;
		border: solid;
		}
		
	ul {
		margin-left: 0.4cm;
		}



/* =ID's HIERONDER STAAN DE ID'S  
----------------------------------------------------------------------------------------------- */

/* ID beginnen met een #
Met behulp van een ID-attribuut, kun je een naam geven aan een element. 
Deze naam is uniek in de pagina, zodat zowel CSS als JavaScript dit element aan kunnen roepen om er wat mee te doen. 
 
Let op een id mag maar 1x gebruikt wordten in een document 
Het kan meerdere keren gebruikt worden maar dan maak je een fout */

	#alineaafstandnul {
	/*DOEL : Onderstaande regel zorgt voor het volgende
			1. stelt de regeltussenafstand in op de waarde bij line height	*/ 
	line-height: 18px;
	}
	
	#antwoord {
		list-style-type: circle;
		list-style-position: inside;
		border-left: 20px;
		border-style: solid;
		font-size: 14px;
	}
		
	#tekeninginspringen {
		/* commentaar bij deze style sheet 
	    met deze kun je een tekening laten inspringen*/
	    margin-left: 0px; 
	    /* margin-top: 40px; */ 
	    /*border: thin solid Red;*/
	}
	
	
	





























































































































	
/* 	=CLASSES HIERONDER STAAN DE CLASSES  
----------------------------------------------------------------------------------------------- */
/*	classes mogen meerdere keren gebruikt worden
	De CLASS-selector heeft als basis een punt gevolgd door een class-naam. 
*/		
	
	.alleenschuin {
		/* Dit moet de linkerkolom worden   */	
		/* background-color: #00FF00; */
		/* Achtergrond voor de duidelijkheid en om beter te herkennnen   */
		font-style: italic; 
		}
	
	.alleenvet {
		/* Dit moet de linkerkolom worden   */	
		/* background-color: #00FF00; */
		/* Achtergrond voor de duidelijkheid en om beter te herkennnen   */
		font-weight: bold;
		}
	
	.alinkerkolom {
		/* Dit moet de linkerkolom worden   */	
		position: absolute;
		width: 160px;
		height: 150px;
		z-index: 5;
		left: 181px;
		/* background-color: #00FF00; */
		/* Achtergrond voor de duidelijkheid en om beter te herkennnen   */
		top: 1617px;
		}
	
	.amiddenkolom {
		/* Dit moet de middenkolom worden   */	
		position: absolute;
		width: 449px;
		height: auto;
		top: 220px;
		left: 187px;
		background-color: #FFCC99; 
		/* Achtergrond voor de duidelijkheid en om beter te herkennnen   */
		}
	
	.amiddenenrechterkolom {
		/* Dit moet de rechterkolom worden   */	
		position: absolute;
		width: 676px; /*height: 879px; */;
		z-index: 3;
		top: 165px;
		left: 187px;
		/* background-color: #FF00FF; /* Achtergrond voor de duidelijkheid en om beter te herkennnen   */
		}
	
	.bovenste_menu01Kolom2 {
		/* Dit moet. de bovenste houder voor het horizontale menu worden   */	
		background-color: Red;
		width: 62%;
		height: 137px;
		}
	
	.broodtekst {
		/* commentaar bij deze style sheet */
		color: #000000;;
		font-size: 18px; /* margin-top: 80px; */;
		font-weight: 500;
		font-style: normal;
		}
	
	.broodtekstvet {
		/* commentaar bij deze style sheet */
		color: #000000;
		font-size: 18px; /* margin-top: 80px; */;
		font-weight: 900;
		font-style: normal;
		}
	
	.broodtekstvetrood {
		/* commentaar bij deze style sheet */
		color: red;
		font-size: 20px; /* margin-top: 80px; */;
		font-weight: 900;
		font-style: normal;
		}
	
	.broodtekstvetblauw {
		/* commentaar bij deze style sheet */
		color: blue;
		font-size: 18px; /* margin-top: 80px; */;
		font-weight: 900;
		font-style: normal;
		}

	.houder_voor_het_google_zoekmenu{
		/* Dit is de houder voor de tekening aan de bovenkant van de pagina  */	
		/*background-color:LightCoral;*/
		/*background-image: url('detective zoekenjpg02.jpg*/
		/*	background-image: url('Logo_voor_de bovenkant_vd_homepage_van_4defence01.jpg');*/
		/* background-image: url('DetectiveZoeken.gif'); */
		height:29px;
		left:75px;
		position:absolute;
		top:87px;
		width:162px;
		z-index:6
		}

	.houder_voor_het_google_zoekmenu_vd_lds_site{
		/* Dit is de houder voor de tekening aan de bovenkant van de pagina  */	
		/*background-color:LightCoral;*/
		/*background-image: url('detective zoekenjpg02.jpg*/
		/*	background-image: url('Logo_voor_de bovenkant_vd_homepage_van_4defence01.jpg');*/
		/* background-image: url('DetectiveZoeken.gif'); */
		height:29px;
		left:6;
		position:absolute;
		top:4px;
		width:166px;
		z-index:10;
		}



	.horizontaal_menu01 {
		/* Dit moet. de bovenste houder voor het horizontale menu worden   */	
		/* background-color:green;*/
		position:absolute;
		height:30px;
		left:25px;
		top:14px;
		width:950px;
		z-index:5;
		}
			
	.horizontaal_menu01_van_den_aker {
		/* Dit is de bovenste houder voor het horizontale menu van de homepage vd familie van den aker  */	
		height:30px;
		left:20px;
		position:absolute;
		top:118px;
		width:950px;
		z-index:5;
		}
		
	
	
	.ik_bepaal_de_plaats_vh_menu_op_de_lagere_detailhandel_schoool{
		/* 
		Dit is de bovenste houder voor het horizontale menu van de homepage vd familie van den aker bepaalt de plaats vh menu
		op de pagina 
		*/	
		height:30px;
		left:10px;
		position:absolute;
		top:78px;
		width:950px;
		z-index:6;
		}

	.ik_bepaal_de_plaats_vd_annimated_gif_op_lagere_detailhandel_schoool{
		/* 
		Dit is de bovenste houder voor het horizontale menu van de homepage vd familie van den aker bepaalt de plaats vh menu
		op de pagina 
		*/	
		height:116px;
		left:0px;
		position:absolute;
		top:0px;
		width:907px;
		z-index:5;
		}

	
	.ik_bepaal_de_plaats_vd_tekst_voor_op_het_vakantieplaatje{
		/* 
		Dit is de bovenste houder voor het horizontale menu van de homepage vd familie van den aker bepaalt de plaats vh menu
		op de pagina 
		*/	
		height:40px;
		left:760px;
		position:absolute;
		top:354px;
		width:210px;
		z-index:9;
	text-align: center;
}

	
	
	.inspringen10{
		position: relative;
		top: 0px;
		left: 10px;
	/*	background: #F60;*/
	} 	
		
	.inspringen20{
		position: relative;
		top: 0px;
		left: 20px;
		/*background: #F60;*/
	} 	
		

		
	.inspringen01{
		margin: 0px;
		border: 1px solid #D12003;
		background: #0000FF;
		padding: 0px 0px 0px 15px;
		font-weight: bolder;
		font-size: large;
		height: 1px;
		color: #FFFFFF;
		}
	
	.inspringen02{
		/*	wordt gebruikt voor zes weken gratis sporten
		 en mogelijk ook voor andere pagina's
		*/
		border:1px dotted blue;
		margin:8px 8px 14px 25px;
		}
	
	.inspringen03{
		/*	wordt gebruikt voor zes weken gratis sporten
		 en mogelijk ook voor andere pagina's
		*/
		border:1px dotted blue;
		margin:8px 8px 14px 50px;
		}
	
		
	.kolom1 {
		/*background-color:orange;*/
		height:450px;
		left:8px;
		position:absolute;
		top:195px;
		width:150px;
		z-index:4;
		}
	
	.kolom2 {
		/* background-color:yellow;*/
		height:200px;
		left:200px;
		position:absolute;
		top:195px;
		width:550px;
		z-index:1;
		}
	
	.kolom3 {
		/* background-color:cyan; */
		height:200px;
		left:750px;
		position:absolute;
		top:195px;
		width:223px;
		z-index:3;
		}	
	
	.kolom1en2en3 {
		/*background-color:transparent;*/
		height:200px;
		left:8px;
		position:absolute;
		top:0px;
		width:970px;
		z-index:3;
		}
	
	
	.kolom2en3 {
		/*background-color:yellow;*/
		height:405px;
		left:200px;
		position:absolute;
		top:195px;
		width:761px;
		z-index:3;
	}

	.kolom1van1tm4   {
		/*DOEL : De pagina in 4 gelijke helften verdelen voor 1040 px pagina is o.a. gebruikt op de boxpagina 
		met vanaf boven 700 stel je de hoogte in*/
		/*background-color:green;*/
		border: 1px solid blue;
		padding: 10px;
		left:2px;
		position:absolute;
		width:220px;
		z-index:3;
		}
	
	.kolom2van1tm4   {
		/*DOEL : De pagina in 4 gelijke helften verdelen voor 1040 px pagina is o.a. gebruikt op de boxpagina 
		met vanaf boven 700 stel je de hoogte in*/
		/*background-color:green;*/
		border: 1px solid blue;
		padding: 10px;
		left:252px;
		position:absolute;
		width:220px;
		z-index:3;
		}
			
	.kolom3van1tm4   {
		/*DOEL : De pagina in 4 gelijke helften verdelen voor 1040 px pagina is o.a. gebruikt op de boxpagina 
		met vanaf boven 700 stel je de hoogte in*/
		/*background-color:green;*/
		border: 1px solid blue;
		padding: 10px;
		left:502px;
		position:absolute;
		width:220px;
		z-index:3;
	}
	.kolom4van1tm4   {
		/*DOEL : De pagina in 4 gelijke helften verdelen voor 1040 px pagina is o.a. gebruikt op de boxpagina 
		met vanaf boven 700 stel je de hoogte in*/
		/*background-color:green;*/
		border: 1px solid blue;
		padding: 10px;
		left:751px;
		/*top:1175px;*/
		position:absolute;
		width:220px;
		z-index:3;
				top: -1px;
}

	.kolom1en2van1tm4   {
		/*DOEL : De pagina in 2 gelijke helften verdelen voor 1040 px pagina is o.a. gebruikt op de boxpagina 
		met vanaf boven 700 stel je de hoogte in*/
		/*background-color:green;*/
		border: 1px solid blue;
		padding: 10px;
		/*	height:200px; */
		left:2px;
		position:absolute;
		/*top:1175px;*/
		width:470px;
		z-index:3;
		/*top: 0px;*/
		}
	

	.kolom1en2en3van1tm4   {
		/*DOEL : De pagina in 2 gelijke helften verdelen voor 1040 px pagina is o.a. gebruikt op de boxpagina 
		met vanaf boven 700 stel je de hoogte in*/
		/*background-color:green;*/
		border: 1px solid blue;
		padding: 10px;
		/*	height:200px; */
		left:2px;
		position:absolute;
		/*top:1175px;*/
		width:722px;
		z-index:3;
		top: 0px;
		}
	
	.kolom3en4van1tm4{
		/*DOEL : De pagina in 2 gelijke helften verdelen voor 1040 px pagina is o.a. gebruikt op de boxpagina 
		met vanaf boven 700 stel je de hoogte in*/
		/*background-color:green;*/
		position:absolute;
		left:500px;
		border: 1px solid blue;
		padding: 10px;
		width:470px;
		z-index:3;
		top: 0px;
		}

	.kolom3en4van1tm4AlleenOpIndexpagina{
		/*DOEL : De pagina in 2 gelijke helften verdelen voor 1040 px pagina is o.a. gebruikt op de boxpagina 
		met vanaf boven 700 stel je de hoogte in*/
		/*background-color:green;*/
		position:absolute;
		left:510px;
		border: 1px solid blue;
		padding: 10px;
		width:470px;
		z-index:3;
		top: 1513px;
		}

		
	.kolom3en4van1tm4OnderKolom3   {
		/*deze staat automatisch onder kolom 3 daarom is de linkse positie aangepast*/
		/* height:200px; */
		left:-245px;
		position:absolute;
		/*top:1175px;*/
		width:470px;
		z-index:3;
	
		padding-left:10px;
		border-left:1px solid blue;
		padding-top:10px;
		border-top:1px solid blue;
		padding-right:10px;
		border-right:1px solid blue;
		padding-bottom:10px;
		border-bottom:1px solid blue;
		}


	.lettergrootte_06{
		/* Deze maakt de letter 12 punten groot  */	
		font-size: 6pt; /*1*/;
		}

	.lettergrootte_08{
		/* Deze maakt de letter 12 punten groot  */	
		font-size: 8pt; /*1*/;
		}

	.lettergrootte_10{
		/* Deze maakt de letter 12 punten groot  */	
		font-size: 10pt; /*1*/;
		}
	
	.lettergrootte_12{
		/* Deze maakt de letter 12 punten groot  */	
		font-size: 12pt; /*1*/;
		}


	.lettergrootte_06_en_schuin{
		/* Deze maakt de letter 12 punten groot  */	
		font-size: 6pt;
		font-style: italic;
		}

	.lettergrootte_08_en_schuin{
		/* Deze maakt de letter 12 punten groot  */	
		font-size: 8pt;
		font-style: italic;
		}


	.lettergrootte_10_en_schuin{
		/* Deze maakt de letter 12 punten groot  */	
		font-size: 10pt;
		font-style: italic;
		}

	.lettergrootte_12_en_schuin{
		/* Deze maakt de letter 12 punten groot  */	
		font-size: 12pt;
		font-style: italic;
		}

	
	.letterkleur_wit{
		/* Deze maakt de letterkleur wit  */	
		color: white; /*1*/;
		}

	.lettertype_Courier_10{
		/* Deze maakt de letterkleur wit  */	
		font-size: 10pt;
		font-family: "Courier New";
		}

	.NaarBenedenOnderDeKopbalk{
		/* 
		Datum gemaakt :		29-11-2009
		Datum aangepast:	29-11-2009
		Doelstelling  : 	De kolommen eenduidig onder de kopbalk uitlijnen. 
							Zodat je later met een klik alle pagina's kan aanpassen als de Kopbalk verandert van grootte.
		*/
		position: absolute;
		top:186px;
		}

	.NaarBenedenOnderHetLinkerMenu{
		/* 
		Datum gemaakt :		29-11-2009
		Datum aangepast:	29-11-2009
		Doelstelling  : 	De kolommen eenduidig onder het linkermenu uitlijnen. 
							Zodat je later met een klik alle pagina's kan aanpassen als het Linkermenu verandert van grootte.
		*/

		position: absolute;
		top:700px;
		}


	.newStyle2 {
		font-size: larger;
		border-left: 50px;
		text-decoration: underline overline;
		text-indent: 40px;
		text-align: left;
		}
	
	.newStyle3 {
		background-color: #CCCCCC;
		border-left: 20px;
		}
	

	.schuin{
		/* Deze maakt de letter schuin oftwel italic   */	
		font-style:oblique
		}

	.tekening_bovenkant_pagina{
		/* Dit is de houder voor de tekening aan de bovenkant van de pagina  */	
		/*background-color:LightCoral;*/
		/*background-image: url('Logo_voor_de bovenkant_vd_homepage_van_4defence01.jpg');*/
		/*background-image: url('LogoVoorDeBovenkantVdHomepage.gif'); */
	

		height:140px;
		left:4px;
		/*border-width:2px; */
		position:absolute;
		top:-2px;
		width:800px;

		/*width:1005px;*/
		z-index:4;
		}
	
		

	
			
	.sidekop {
		/*color:#FFFFFF; */
		color:white;
		font-family:Arial,Helvetica,sans-serif;
		font-size:8pt;
		font-weight:bold;
		text-transform:uppercase;
		}



	.tekening_bovenkant_pagina_van_den_aker {
		background-image:url(vda_GroepsfotoBovenkantPaginaVanDenAker.jpg);
		height:166px;
		left:-23px;
		position:absolute;
		top:-3px;
		width:1040px;
		z-index:4;
		}
	
	
	.vanafboven010 {
		/*background-color:yellow; */
		position:absolute; 
		top:10px;
		}	
	
	.vanafboven020 {
		/*background-color:yellow; */
		position:absolute; 
		top:20px;
		}	
	
	.vanafboven050 {
		/*background-color:yellow; */
		position:absolute; 
		top:50px;
		}	
	
	.vanafboven075 {
		/*background-color:yellow; */
		position:absolute; 
		top:75px;
		}	
	
	.vanafboven100 {
		/*background-color:yellow; */
		position:absolute; 
		top:100px;
		}	
	
	.vanafboven193 {
		/*background-color:yellow; */
		position:absolute; 
		top:193px;
		}	


	.vanafboven240 {
		/*background-color:yellow; */
		position:absolute; 
		top:240px;
		}	
	
	.vanafboven700 {
		/*background-color:yellow; */
		position:absolute; 
		top:700px;
		/* height: 15px; */
		}	
	
	.vanafboven717 {
		/*background-color:yellow; */
		position:absolute; 
		top:717px;
		left: 10px;
}
	
	.vraag {
		/* commentaar bij deze style sheet */
	
		background-color:yellow;
		border-color:yellow;
		border-style:solid;
		border-width:7px 0px 7px 0px;
		color: #333333;
		font-size:16px;
		font-style: italic;
		line-height:209%;
		margin-left:0;
		}
	.vraagdichtopelkaar {
		/* commentaar bij deze style sheet */
	
		/*background-color:yellow;*/
		border-color:yellow;
		border-style:solid;
		border-width:0px 0 0px 0;
		color:#333333;
		font-size:16px;
		font-style:italic;
		line-height:120%;
		margin-left:0;
		}

	.vraaggroot {
		/* commentaar bij deze style sheet */
		
		background-color:red;
		border-color:red;
		border-style:solid;
		border-width:7px 0px 7px 0px;
		color:white;
		font-size:18px;
		line-height:209%;
		margin-left:0;
		}		
	
	.vraaggrootdichtopelkaar {
		/* commentaar bij deze style sheet */
		
		background-color:red;
		border-color:red;
		border-style:solid;
		border-width:0px 0px 0px 0px;
		color:white;
		font-size:18px;
		line-height:110%;
		margin-left:0;	
		z-index:10;	
	}