/***************************************************************** 
BODY EN BOX DECLARATIONS
*****************************************************************/ 

body		{
		  padding: 0px;
		  margin: 0px 0px 0px 0px;
		  background-color: #fff;
		  font-family: verdana, arial, helvetica, sans-serif;
		  font-size: 76%;
		}

.clearboth { clear: both; }

#container	{ position: relative; width: 881px; margin: 0px auto;  }

	#logo		{ position: absolute; left: 0px; top: 0px;   width: 165px; height: 131px; margin: 0px; padding: 0px; }		
	#navigation	{ position: absolute; left: 0px; top: 131px; width: 165px; height: 484px; margin: 0px; padding: 0px; background: #fff; }
	img#dnc		{ position: absolute; left: 0px;   top: 560px; }
	#header		{ position: absolute; left: 165px; top: 0px;   width: 716px; height: 110px;  }
	#contentcontainer	{ position: absolute; left: 165px; top: 110px; width: 714px; height: 605px; background: #fff; border: 1px solid #999999; border-top: 0px;   }
	#content		{ position: absolute; left: 0px;   top: 0px;   width: 540px; height: 473px; padding: 32px 0px 0px 0px; background: #fff; }


	#mensen_bart		{ position: absolute; left: 0px;   top: 0px;   width: 714px; height: 473px; padding: 32px 0px 0px 0px; }
	#mensen_mariejose	{ position: absolute; left: 0px;   top: 0px;   width: 714px; height: 473px; padding: 32px 0px 0px 0px; }
	#mensen_jeroen		{ position: absolute; left: 0px;   top: 0px;   width: 714px; height: 473px; padding: 32px 0px 0px 0px; }
	#mensen_rob		{ position: absolute; left: 0px;   top: 0px;   width: 714px; height: 473px; padding: 32px 0px 0px 0px; }
	#mensen_lizbeth		{ position: absolute; left: 0px;   top: 0px;   width: 714px; height: 473px; padding: 32px 0px 0px 0px; }
	#mensen_tom		{ position: absolute; left: 0px;   top: 0px;   width: 714px; height: 473px; padding: 32px 0px 0px 0px; }
	#mensen_bernard		{ position: absolute; left: 0px;   top: 0px;   width: 714px; height: 473px; padding: 32px 0px 0px 0px; }
	#mensen_bas		{ position: absolute; left: 0px;   top: 0px;   width: 714px; height: 473px; padding: 32px 0px 0px 0px; }

	#project			{ position: absolute; left: 0px;   top: 0px;   width: 714px; height: 505px; padding: 0px; background: #fff; }
		#projectcontent		{ position: absolute; left: 21px;  top: 18px;  width: 675px; height: 432px; padding: 0px; background: #fff; }
		#projectheader		{ position: absolute; left: 0px;   top: 0px;   width: 675px; height: 36px;  padding: 0px; }
		#projecttext		{ position: absolute; left: 0px;   top: 36px;  width: 242px; height: 366px; padding: 0px; overflow-y: auto; }
		#projecttext1		{ position: absolute; left: 0px;   top: 36px;  width: 242px; height: 366px; padding: 0px; overflow-y: auto; }
		#projecttext2		{ position: absolute; left: 0px;   top: 36px;  width: 242px; height: 366px; padding: 0px; overflow-y: auto; }
		#projectfoto		{ position: absolute; left: 242px; top: 36px;  width: 433px; height: 366px; padding: 0px; }
		#projectfooter		{ position: absolute; left: 0px;   bottom: 0px; width: 575px; height: 30px;  padding: 4px 0px 0px 100px;  }
/***************************************************************** 
DROPDOWN MENU DECLARATION
diverted from the magnificent and famous 'Suckerfish dropdown' method
Do we really still need the commented backslash hack???
Is there an alternative for IE5 MAC
source: http://www.htmldog.com/articles/suckerfish/example/
*****************************************************************/ 
/* Commented Backslash HACK (to hide this from IE5 MAC) \*/

ul#nav_list		{ list-style-type: none;
			  padding: 0px;
			  margin: 20px 0px 0px 0px; 
			}

  #nav_list li 		{ display: none;
			  float: left;
			  position: relative; 
			  display: inline;
			  width: 165px;
			  font-size: 100%;
			  font-weight: bold;
			}

  #nav_list li ul	{ display: none;
			  float: left;
			  position: relative; 
			  margin: 0px 0px 0px 0px; 
			  padding: 0px 0px 8px 0px; 
			  width: 165px;
			}

  #nav_list li ul.act	{ display: block; }

  #nav_list li ul li	{ display: block;
			  float: left;
			  position: relative; 
			  display: inline;
			  margin: 0px 0px 5px 0px; 
			  padding: 0px 0px 0px 0px; 
			  width: 165px;
			  font-size: 100%;
			  font-weight: bold;
			}

/* END Commented Backslash HACK */

	
/***************************************************************** 
TEXT DECLARATIONS
*****************************************************************/ 

h1	{ font-size: 110%;
	  font-weight: bold;
	  color: #444445;
	  margin: 0px;
	  padding: 10px 15px 0px 26px;
	}

h2	{ font-size: 100%;
	  font-weight: bold;
	  color: #444445;
	  margin: 0px;
	  padding: 10px 15px 0px 26px;
	}

p	{ font-size: 90%;
	  margin: 0px;
	  padding: 0px 10px 10px 26px;
	  line-height: 135%; 
	  text-align: left;
	}



#project h1	{ font-size: 110%;
		  font-weight: bold;
		  color: #444445;
		  margin: 0px;
		  padding: 8px 15px 0px 5px;
		}
#project p	{ font-size: 90%;
	  	  margin: 0px;
	  	  padding: 2px 10px 10px 5px;
	  	  line-height: 135%; 
	   	  text-align: left;
		}

ul.project	{ font-size: 90%; margin: -10px 0px 10px 22px; padding: 0px; }
ul.project li	{ margin: 0px; padding: 0px; }

ul.vacature { 
	font-size: 90%;
	margin: 0px;
	padding: 0px 10px 10px 36px; 
	list-style: none;
}
					
/***************************************************************** 
LINK, hover and visited should have diversions in color.
hover should be underlined, for extra clarity a normal link
could be underlined to emphasize its linklyness.
*****************************************************************/




A 		{ text-decoration: none; color: #444445; }
A:link		{ text-decoration: none; color: #444445; }
A:visited	{ text-decoration: none; color: #444445; }
A:active	{ text-decoration: none; color: #444445; }
A:hover		{ text-decoration: underline; color: #444445; }
A#active	{ text-decoration: none; color: #444445; font-weight: bold; font-size: 110%; }

A.mensen 		{ text-decoration: none; color: #666; }
A.mensen:link		{ text-decoration: none; color: #666; }
A.mensen:visited	{ text-decoration: none; color: #666; }
A.mensen:active		{ text-decoration: none; color: #000; }
A.mensen:hover		{ text-decoration: none; color: #6666FF; }
A.mensen#active		{ text-decoration: none; color: #000;  font-size: 110%; }


#nav_list A 		{  
			float: left;
			   display: block;
			   width: 165px;
 			   text-align: right;
 			   font-size: 100%;
			   font-weight: bold;
			   text-decoration: none;
 			}
 			
#nav_list A img {
				border: none;
}
 			
#nav_list A:link	{ display:block; text-decoration: none; color: #999; }
#nav_list A:visited	{ display:block; text-decoration: none; color: #999; }
#nav_list A:active	{ display:block; text-decoration: none; color: #000; }
#nav_list A:hover	{ display:block; text-decoration: none; color: #666; }
#nav_list A#active	{ display:block; text-decoration: none; color: #999; }

#nav_list li ul li A	 	{ background: none; margin: 0px 0px 0px 5px; width: 145px;}
#nav_list li ul li A:hover 	{ background: none; }
#nav_list li ul li A.act	{ background: none; color: #000;}
#nav_list li ul li A.act:hover 	{ background: none; color: #000;}






#projectbuttons A 	{  float: left;
			   display: block;
			   width: 218px;
			   height: 29px;
 			   background: #EFEFEF url(images/project.gif) no-repeat 0px 0px; 
 			   text-align: center;
 			   padding: 5px 0px 0px 0px;
 			   font-size: 100%;
			   font-weight: bold;
			   color: #fff;
			   text-decoration: none;
 			}

#projectbuttons A:hover		{  background: #EFEFEF url(images/project_on.gif) no-repeat 0px 0px; }
#projectbuttons A#active	{  background: #EFEFEF url(images/project_act.gif) no-repeat 0px 0px; }




A#meer1	{ cursor: pointer; font-weight: bold; color: #666; }
A#meer2	{ cursor: pointer; font-weight: bold; color: #666; }
A#meer3	{ cursor: pointer; font-weight: bold; color: #666; }

A#meer1:hover	{ color: #000; }
A#meer2:hover	{ color: #000; }
A#meer3:hover	{ color: #000; }


A#meer1.active {  color: #000;  }
A#meer2.active {  color: #000;  }
A#meer3.active {  color: #000;  }