/***************************************************************** 
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	{ display: none; }
	img#dnc		{ position: absolute; left: 0px;   top: 555px; }
	#header		{ position: absolute; left: 165px; top: 0px;   width: 716px; height: 110px; }
	#contentcontainer	{ position: absolute; left: 0px; top: 110px; width: 716px; height: 505px; background: #eee; }
	#content		{ position: absolute; left: 0px; top: 0px;   width: 540px; height: 473px; padding: 32px 0px 0px 0px; background: #ddd; }


	#mensen_bart		{ position: absolute; left: 0px;   top: 0px;   width: 716px; height: 473px; padding: 32px 0px 0px 0px; background: #ddd url(images/mensen/bart.jpg) 	  no-repeat 0px 0px; }
	#mensen_mariejose	{ position: absolute; left: 0px;   top: 0px;   width: 716px; height: 473px; padding: 32px 0px 0px 0px; background: #ddd url(images/mensen/mariejose.jpg)  no-repeat 0px 0px; }
	#mensen_jeroen		{ position: absolute; left: 0px;   top: 0px;   width: 716px; height: 473px; padding: 32px 0px 0px 0px; background: #ddd url(images/mensen/jeroen.jpg) 	  no-repeat 0px 0px; }
	#mensen_rob		{ position: absolute; left: 0px;   top: 0px;   width: 716px; height: 473px; padding: 32px 0px 0px 0px; background: #ddd url(images/mensen/rob.jpg) 	  no-repeat 0px 0px; }
	#mensen_lizbeth		{ position: absolute; left: 0px;   top: 0px;   width: 716px; height: 473px; padding: 32px 0px 0px 0px; background: #ddd url(images/mensen/lizbeth.jpg) 	  no-repeat 0px 0px; }
	#mensen_tom		{ position: absolute; left: 0px;   top: 0px;   width: 716px; height: 473px; padding: 32px 0px 0px 0px; background: #ddd url(images/mensen/tom.jpg) 	  no-repeat 0px 0px; }
	#mensen_bernard		{ position: absolute; left: 0px;   top: 0px;   width: 716px; height: 473px; padding: 32px 0px 0px 0px; background: #ddd url(images/mensen/bernard.jpg) 	  no-repeat 0px 0px; }

	#project		{ position: absolute; left: 0px;   top: 20px;   width: 716px; height: 505px; padding: 0px; background: #ddd; }
		#projectcontent		{ position: absolute; left: 21px;  top: 18px;   width: 675px; height: 425px; padding: 0px; background: #eee; }
		#projectheader		{ position: absolute; left: 0px;   top: 0px;    width: 675px; height: 24px; padding: 0px;}
		#projectfoto		{ position: absolute; left: 0px;   top: 24px;   width: 433px; height: 366px; padding: 0px;}
		#projecttmb		{ display: none;}
		#projecttmb img		{ margin: 0px 0px 5px 5px; }
		#projectbuttons		{ display: none; }


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

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

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

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



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


					
/***************************************************************** 
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: underline; color: #6666FF; }
A.mensen#active		{ text-decoration: none; color: #000;  font-size: 110%; }

#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; }