@charset "utf-8";
/* CSS Document */
/* in een stylesheet zet je op deze manier commentaar. */

/*
Tekst-tags
Dit zijn de standaard html-tags.
*/
body {
	background-color: black;
	background-color: gray;
	}
	
h1 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:24px;
	color: black;
	}

h2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	font-weight:200;
	color: black;
	}

h3 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	color: black;
	}

p {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:14px;
	color: black;
			
}

/* Je kunt ook eigenschappen voor verschillende tags in één keer definiëren. Zet dan tussen de tagnamen een komma.
   Hieronder zijn de eigenschappen gedefinieerd voor de link (a) en voor de link als je er met de muis overheen gaat (a:hover).
   */
a:hover {
	color: #00CCFF;
	text-decoration:none
}

a {
	color: #00CCFF;
	text-decoration:none
}

/* Opmaak-tags */
/* Bevatten de definitie van de grote lijnen, welk vlak komt waar te staan in de website en hoe is dat opgemaakt */

/* container: plaatst de website in het midden */
#container {
	position: relative;
	top: 1%;
	width: 1024px;
	min-height:768px;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size: small;
	margin: auto;
	background-color: #FFFFFF; 
	border: 1px solid #e9e9e7;
	border: 1px solid #555d36;
	z-index: 1;
    }
/* banner: de kop van de website  */
#banner {
	position: relative;
	top: -250px;
	left: 1px;
	right: 0px;
	width: 1024px;
	height: 50px;
	padding-left: 23px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:58px;
	color: black;	
	background-color: none;
	z-index: 10;
	border: 0px;
	}
	
/* menubalk: bevat het hoofdmenu */
#menubalk {
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 1024px;
	height: 30px;
	padding-left: 0px;
	padding-top: 8px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	font-weight:300;
	color: #FFFFFF;
	background-color: #00003C; 
	z-index: 10;
	word-spacing: 5px;
    }

#facebooklogo  {
	position:absolute;
	left: 856px; top: 136px;
	width:40px; height: 40px;
	z-index: 10;
    }
    
#twitterlogo  {
	position:absolute;
	left: 806px; top: 136px;
	width:40px; height: 40px;
	z-index: 10;
    }
    
#googlepluslogo  {
	position:absolute;
	left: 906px; top: 136px;
	width:40px; height: 40px;
	z-index: 10;
    }
    
#linkedinlogo  {
	position:absolute;
	left: 956px; top: 136px;
	width:40px; height: 40px;
	z-index: 10;
    }


#nederlandsevlag  {
	position:absolute;
	left: 50px; top: 140px;
	width:40px; height: 28px;
	z-index: 10;
    }
#engelsevlag  {
	position:absolute;
	left: 100px; top: 140px;
	width:40px; height: 28px;
	z-index: 10;
    }


	
/* 
submenubalk: bevat het submenu. Het submenu is niet altijd gevuld. De division is er wel altijd,
             om te voorkomen dat de vlakken eronder verspingen
*/
#submenubalk {
	position: relative;
	top: 0px;
	left: 0px;
	right: 0px;
	width: 877px;
	height: 22px;
	padding-left: 23px;
	padding-top: 3px;
	padding-bottom: 3px;
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:16px;
	font-weight:400;
	color:#555d36;
	background-color: #FFFFFF; 
	border-top: 1px solid #625a57;
	border-Bottom: 1px solid #625a57;
	z-index: 10;
    }
	
/* tekstkolommen: een linker en een rechterkolom om de leesbaarheid te vergoten */
/* NB: hier kun je mee spelen, door bijvoorbeeld een division te definieren ter breedte van beide kolommen,
   zodat je een grotere afbeelding op je website kunt plaatsen */
#kolomcontact {
	float:left;
	margin-left: 62px;
	margin-top: 15px;
	margin-bottom: 25px;
	width: 900px;
	min-height: 50px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color: black;
	background-color: #FFFFFF; 
	z-index: 1;
    }

#kolomprojecten {
	float:left;
	margin-left: 62px;
	margin-top: 15px;
	margin-bottom: 0px;
	width: 900px;
	min-height: 50px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color: black;
	background-color: #FFFFFF; 
	z-index: 1;
    }


#kolomovermij {
	float:left;
	margin-left: 62px;
	margin-top: 25px;
	margin-bottom: 25px;
	width: 900px;
	min-height: 50px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color: black;
	background-color: #FFFFFF; 
	z-index: 1;
    }

#kolomlinks {
	float:left;
	margin-left: 62px;
	margin-top: 10px;
	margin-bottom:10px;
	padding-bottom:10px;
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	width: 330px;
	min-height: 200px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color:black;
	background-color: #FFFFFF; 
	z-index: 1;
    }

#kolomlinks1 {
	float:left;
	margin-left: 62px;
	margin-top: 7px;
	margin-bottom:10px;
	width: 250px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color:black;
	background-color: #FFFFFF; 
	z-index: 1;
    }


#kolomrechts {
	float:right;
	margin-top:180px;
	margin-bottom:33px;
	margin-right:62px;
	width: 550px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color:black;
	background-color: #FFFFFF; 
	vertical-align:top;
	z-index: 1;
    }

#kolomrechts1 {
	float:right;
	margin-top:7px;
	margin-bottom:10px;
	margin-right:62px;
	left: 440px;
	width: 250px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color:black;
	background-color: #FFFFFF; 
	vertical-align:top;
	z-index: 1;
    }
    
#kolomcenter {
	float:right;
	margin-top:7px;
	margin-bottom:10px;
	margin-right:68px;
	left: 440px;
	width: 250px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color:black;
	background-color: #FFFFFF; 
	vertical-align:top;
	z-index: 1;
    }

#homeimage {
	margin-bottom:50px;
	margin-top:29px;			
}


#contactvak {
	float:left;
	margin-left: 62px;
	margin-top: 10px;
	margin-bottom: 41px;
	width: 900px;
	min-height: 50px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color: black;
	background-color: #FFFFFF; 
	z-index: 1;
    }


#tekstovermij {
	float:right;
	margin-top:10px;
	margin-right:62px;
	margin-bottom:342px;
	right: 62px;
	width: 410px;
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color:black;
	background-color: #FFFFFF; 
	vertical-align:top;
	z-index: 1;
    }

#tekstcaravan {
	float:leftt;
	margin-top:10px;
	margin-left:62px;
	right: 62px;
	width: 400px;
	padding-left:0px;
	padding-top:10px;
	padding-bottom:10px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color:black;
	background-color: #FFFFFF; 
	vertical-align:top;
	z-index: 1;
    }

#tekstblikjes {
	float:right;
	margin-top:10px;
	margin-right:62px;
	right: 62px;
	width: 410px;
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color:black;
	background-color: #FFFFFF; 
	vertical-align:top;
	z-index: 1;
    }
    
#tekstkandelaar {
	float:right;
	margin-top:10px;
	margin-right:62px;
	right: 62px;
	width: 410px;
	padding-left:10px;
	padding-top:10px;
	padding-bottom:10px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:400;
	color:black;
	background-color: #FFFFFF; 
	vertical-align:top;
	z-index: 1;
    }

#tekst{
	padding-left:10px;
	padding-bottom:10px;			
}

#profielfoto {
	float:left;	
	margin-top:10px;
	margin-left:62px;
	margin-bottom:200px;
	}
	
#project1 {
	position:absolute;
	width: 250px;
	float:left;	
	margin-top:100px;
	margin-left:250px;
	margin-right:62px;
	margin-bottom:200px;
	}
	
#project2 {
	position:absolute;
	width: 250px;	
	margin-top:100px;
	margin-left:575px;
	margin-right:0px;
	margin-bottom:200px;
	}

#project3 {
	position:absolute;
	width: 250px;	
	float:right;
	margin-top:100px;
	margin-left:9000px;
	margin-right:62px;
	margin-bottom:200px;
	}

	
#profielfoto {
	float:left;	
	margin-top:10px;
	margin-left:62px;
	margin-bottom:200px;			
}

li {
list-style: none;
}

/*
footer: het balkje onderaan de pagina, sluit je de pagina netjes mee af en
        het is een indicatie voor de bezoeker dat het einde avnd e apgina bereikt is. 
        De footer wordt meestal gebruikt voor contactinformatie of een herhaling van het hoofdmenu
 */
#footer {
	clear: both;
	left: 0px;
	right: 0px;
	width: 1024px;
	height: 25px;
	padding-left: 0px;
	padding-top: 8px;
	padding-bottom: 0px;
	font-family:Verdana, Geneva, sans-serif;
	font-size:12px;
	font-weight:300;
	color: #FFFFFF;
	background-color: #00003C; 
	z-index: 2;
	word-spacing: 2px;
    }

/* CLASSES */
/* Een class gebruik je om een tag bepaalde eigenschappen te geven op een specifieke plek. 
   Je kunt een class aan verschillende tags koppelen, of specifieceren voor een specifieke tag
   Je moet een class altijd aan de tag koppelen op de html-pagina, via <naam-tag class="naam-class">
   */
   
/* De onderstaande classes zijn uniek voor de link (<a>). Te jherkennen aan de tagnaam voor de punt, waardoor de
   eigenschappen aalleen gelden voor die tag. Deze class gebruik je als volgt in de html:
   <a href="link" class="hoofdmenu">de tekst van de link</a>
   */

a.hoofdmenu
	{color: #FFF;}

a:hover.hoofdmenu
	{color:#e9e9e7;}

a.footermenu
	{color: #555d36;}

a:hover.footermenu
	{color:#e9e9e7;}

/* De onderstaande class is niet uniek voor een bepaalde tag. De eigenschappen kunnen aan elke tag gekoppeld worden.
   Te herkennen aan dat er geen tagnaam voor de punt staat. Deze class gebruik je als volgt in de html:
   <span class="onderschrift">het onderschrift</span>
   */


.onderschrift
	{font-size: 12px;
}