/*  ==========================================================================================
	Project: 					Din Solutions Website
	Company:						Din Solutions
	Original authors :		Gaston Jamin (g.jamin@nexwork.nl)
	                        Nexwork, Maastricht (www.nexwork.nl)	
 	------------------------------------------------------------------------------------------
	Last change by :			Gaston Jamin, 23-11-04
	========================================================================================== */
	
	
/*	-----------------------------------------------------------------------------------------
	Basisitems. Container omvat alle blokelementen. Is de eigenlijke pagina.
	------------------------------------------------------------------------------------------ */	

body {
	margin: 0;
	padding: 0;   
	background: white;
	text-align: center;		
	}
	
html {
	margin: 0;
	padding: 0; 		
	}

H1{
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 17px;
	line-height: 18px; 
	color: #FF8700;
	margin-top: 15px;
	margin-bottom: 15px;
}

H2{
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px; 
	color: #A20509;
	margin: 0px;
	padding-top: 10px;	
}
a{
	color: #A20509;
	text-decoration: underline;
	}
a:hover{
	color: #A20509;
	text-decoration: none;
	}
	
#container { 
	margin: 0 auto; 
	width: 750px;
	text-align: left;
	}		
	
/*	-----------------------------------------------------------------------------------------	
	Header (bovenste blok met utilities, achtergrond fade en logo.
	------------------------------------------------------------------------------------------ */	
	
#header { 
height: 70px;
background-color: white;
background-image: url(../media/header_bg.jpg);
background-repeat: repeat-y;
} 

#header .logo {
width: 127px;
height: 47px;
background-image: url(../media/header_logo.gif);
background-repeat: no-repeat;
margin-top: 10px;
float: right;
} 

#header #utilities { 
	height: 21px;
	width: 100px;
	padding-top: 11px;
	padding-left: 11px;
	float: left;				
			}
			#header #utilities .homebutton{
				height: 21px;
				width: 21px;			
				background: transparent url(../media/BTN_home2.gif) right bottom no-repeat;	
				margin-right: 5px;
				float: left;										
			}
			#header #utilities .homebutton:hover{		
				background-position: right top;
			}
			#header #utilities .printbutton{
				height: 21px;
				width: 21px;				
				background: transparent url(../media/BTN_print2.gif) right bottom no-repeat;	
				margin-right: 5px;
				float: left;					
			}
			#header #utilities .printbutton:hover{		
				background-position: right top;
			}							
			#header #utilities .mailbutton{
				height: 21px;
				width: 21px;				
				background: transparent url(../media/BTN_mail2.gif) right bottom no-repeat;	
				margin-right: 5px;	
				float: left;										
			}
			#header #utilities .mailbutton:hover{		
				background-position: right top;		
			}			

/*	-----------------------------------------------------------------------------------------
	Menu	
	Het menu is opgemaakt in een unordered List, die ook gelijk als container wordt gebruikt
	voor de verschillende List-items. Het maakt gebruik van zogenaamde "sliding doors", waarbij
	een linker en een rechterplaatje het tabje rekbaar maken in hoogte en breedte. Voor meer 
	info over de "sliding doors" techniek kun je kijken op http://www.alistapart.com/articles/slidingdoors/
------------------------------------------------------------------------------------------ */	

#menu {
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	float:left;
   width:100%;
   background: url("../media/header_bg.jpg");
	background-repeat: repeat-y;
   }
#menu a {
	color: white;
	font-weight: bold;
   display: block;
   background:url("../media/tab_rechts.gif") no-repeat right top;
   padding:5px 15px 7px 9px;
	text-decoration: none;		 
   }
#menu a:hover {
	color: #FF8700;
	 
   }	
#menu ul {
    margin: 0px;
    padding: 0px;
    list-style:none;
    }	 
#menu li {
	text-decoration: none;
   float:left;
   background:url("../media/tab_links.gif") no-repeat left top;
   margin:0;
   padding:0 0 0 6px;
   }
#menu #actief {
   background-image:url("../media/tab_links-actief.gif");
   }
#menu #actief a {
   background-image:url("../media/tab_rechts-actief.gif");
   padding-bottom:5px;
   }	
	
/*	-----------------------------------------------------------------------------------------
	Mainbar
	------------------------------------------------------------------------------------------ */
	
#mainbar{
	width: 100%;
	height: 248px;
	background-color:#EECCDD;
}	
#mainbar .oranjeblok{
	width: 249px;
	height: 248px;
	background-color:#FF8700;
	float: left;
	padding-top: 0px;
	line-height: 50px;	
	text-align: right;
}
#mainbar .link{
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	background-image: url(../media/oranjeblok_pijltje.gif);
	background-position: right;
	background-repeat: no-repeat;
	padding-right: 35px;
	margin-top: 31px;
	}	
		* html #mainbar .link{  /* dit is een correctie voor IE.  */
		width: 249px;	
		}
#mainbar .link a{
	color: #A20509;
	text-decoration: underline;
	}
#mainbar .link a:hover{
	color: #FFFFFF;
	}					
	
#mainbar .fotoblok{
	width: 501px;
	height: 248px;
	background-color:#FF8700;
	
	/*Begin aanpassingen door: Don
		Onderstaande bgimage heb ik op nonactief gezet omdat deze dynamisch moet worden gevuld in de website*/
	/*background-image: url(../media/mainbar_foto_01.jpg);	*/
	/*	einde aanpassing door: Don	*/		
	float: left;
}	

/*	-----------------------------------------------------------------------------------------		
	* html #mainbar .fotoblok{
	width: 400px;
	}	
	
	Bovenstaand * html element kun je gebruiken om een variant te maken voor IE. Deze browser is namelijk
	de enige browser die dat kan lezen. Dus in plaats van pielen om het in Netscape ok te krijgen kun je 
	andersom het afstemmen op Netscape en vervolgens corrigeren voor IE.
	
	border: 1px;
	border-color: #ffffff;
	border-style: solid;
	
	border: 1px;
	border-color: #000000;
	border-style: solid;
		------------------------------------------------------------------------------------------ */
			
	
/*	-----------------------------------------------------------------------------------------
	Basiscontainer voor het drie-kolommen model.
	------------------------------------------------------------------------------------------ */		

#cont1 {  
	padding: 0px;  
	width: 750px;
	text-align: left;
	background-image: url(../media/kolomlijnen2kol.gif);
	background-repeat: repeat-y;			
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
	border-color: #5D6967;
	border-left-style: dotted;
	display: block;
	float: left;	
	}	
#cont1Home {  
	padding: 0px;  
	width: 750px;
	text-align: left;
	background-image: url(../media/kolomlijnen3kol.gif);
	background-repeat: repeat-y;			
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
	border-color: #5D6967;
	border-left-style: dotted;
	display: block;
	float: left;
	}
	#cont1nieuws {  
	padding: 0px;  
	width: 750px;
	text-align: left;
	background-image: url(../media/kolomlijnen2kolwit.gif);
	background-repeat: repeat-y;			
	border-left: 0px;
	border-right: 0px;
	border-top: 0px;
	border-bottom: 0px;
	border-color: #5D6967;
	border-left-style: dotted;
	display: block;
	float: left;	
	}		
	 
/* SET FLOatED DIVS TO DISPLAY INLINE TO AVOID POTENTIAL IE ERRORS */ 

#cont1nieuws, #cont1Home, #cont1, #cont2, #mainContent, #rightColumn, #leftColumn { 
display: inline; 
} 

/*	-----------------------------------------------------------------------------------------	
	Basiscontainers van de verschillende kolommen (linkerkolom, content en rechterkolom)
	
	Let op de correcties voor de breedte van de kolommen; dit is een correctie voor IE. 
	De padding in de verschillende kolommen zorgen er namelijk
	voor dat er verschillen optreden in FF en IE. In FF wordt de padding opgeteld 
	bij de breedte van de div waardoor de div's niet meer naast elkaar passen en alles 
	uit het verband wordt gerukt. IE negeert dit. De maten zijn dus aangepast voor FF,
	en vervolgens gecorrigeerd voor IE
	------------------------------------------------------------------------------------------ */	

body #cont2 { 
	float: right; 
	width: 501px;
	/*background-image: url(../media/kolomlijnen.gif);
	background-repeat: repeat-y; */ 

	} 
/*aangepast door Don-->branches titel image op homepage */	
body #cont2 table {
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 10px;
}


body #branchestitel{
	float: right;
	width: 228px;
	height: 35px;
	background-image: url(../media/Title_Branches.gif);
	background-repeat: no-repeat;
	margin-top: 7px;
	}
	
body #algemeentitel{
	float: right;
	width: 228px;
	height: 18px;
	background-image: url(../media/Title_actuele_vacatures.gif);
	background-repeat: no-repeat;
	margin-top: 7px;
	}
	
/* aangepast door Don.
maincontent gecopierd en mainhome van gemaakt voor de homepage template
*/
body #mainContent {
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 20px; 
	float: left; 
	width: 480px;
	padding: 10px;
	} 
	* html #mainContent{  /* dit is een correctie voor IE.  */
		width: 
		501px;			
		}
body #mainContent .sectietitel{
	width: 300px;
	height: 35px;
	margin-top:15px;
	}	
body #mainHome {
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 20px; 
	float: left; 
	width: 250px;
	} 
	* html #mainHome{  /* dit is een correctie voor IE.  */
		width: 251px;			
		}	
body #mainHome .sectietitel{
	width: 200px;
	height: 35px;
	margin:25px 10px 0 10px;	
	}			
		
	
body #rightColumn { 
	float: right; 
	width: 225px; 
	padding: 10px;

	} 
	* html #rightColumn{  /* dit is een correctie voor IE.  */
		width: 250px;	
		}	
body #leftColumn { 
	float: left;  
	width: 248px; 
	}
	
/*aangepast door Don
top button in content
*/
#topbutton
{
float: right;
width:21px;
Height:21px;
background:url("../media/BTN_Top.gif") no-repeat right top;
}

/*	-----------------------------------------------------------------------------------------	
	Nieuwsteasers homepage
	------------------------------------------------------------------------------------------ 	*/
	
#nieuwsteaser {
   margin: 0px;
	margin-bottom: 0px;
   padding-left:0px;
	padding-right: 0px;
	padding-top: 15px;
	width: 100%;
	float: left;

}		
#nieuwsteaser ul {
   margin:0px;
   padding: 0px;
	float: left;
	}	
			* html #nieuwsteaser ul{  /* dit is een correctie voor IE.   */
			margin-bottom: 10px;			
	}
			
#nieuwsteaser li {
   margin: 0px;
   padding: 0px;
	list-style: none;
	float: left;
	width: 245px;
	margin-bottom: 13px;
	
}
#nieuwsteaser p {
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	color: #000000;
	line-height: 16px;
	margin-top: 0px;
	margin-bottom: 0px;
	margin-left: 70px;
	margin-right: 0px;
	padding-top: 4px;
}
#nieuwsteaser .kop
{
	color: #A20509;
}
#nieuwsteaser .teaserimg {
	margin: 0 0px 0 0;
	border: 0px;
	float:left;
}
#nieuwsteaser a{
	text-decoration: none;
}
#nieuwsteaser a:hover{
	text-decoration: underline;
}		
#nieuwsteaser .adres {
	width: 95%;
	height: 185px;
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 18px;
	color: #A20509;
	background-image: url(../media/leftcol_adresbg.gif);
	background-repeat: no-repeat;
	margin-top: 0px;
	padding-left: 10px;
	padding-top: 25px;
	float: left;
	border-top: 1px;
	border-bottom: 0px;
	border-left: 0px;
	border-right: 0px;
	border-color: #000000;
	border-style: dashed;
	
	}	
		* html #nieuwsteaser .adres{  /* dit is een correctie voor IE.   */
			height: 150px;
			width: 100%;			
	}
#nieuwsteaser .maand {
	width: 100%;
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: bold;
	color: #A20509;
	height: 20px;
	padding-top: 5px;
	border-top: 1px;
	margin-top: 5px;
	margin-bottom: 13px;
	border-bottom: 1px;
	border-left: 0px;
	border-right: 0px;
	border-style: dashed;
	border-color: Black;
	float: left;
	}	
		* html #nieuwsteaser .maand{  /* dit is een correctie voor IE.   */
			height: 25px;
			margin-top: 10px;					
	}

/*	-----------------------------------------------------------------------------------------	
	SubContent
	
	Dit is de extra footer boven de zichtbare footer. Deze kan gebruikt worden, maar ook als het
	ontwerp niet voorziet in een extra footer moet deze geplaatst worden. Dat heeft te maken met
	de samenhang van de verschillende div's
	------------------------------------------------------------------------------------------ */	

#subContent { clear: both; } 

/*	-----------------------------------------------------------------------------------------	
	Footer
	------------------------------------------------------------------------------------------ */	

#footer {
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 10px;
	clear: both; 
	text-align: left; 
	padding-top:10px;
	padding-bottom: 20px;
	background: white;
}

/* USING NO HTML ELEMENT FOR CLEARING FLOATS */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix {
	padding:0px 0;
	margin:0 10px;
}
	
/*aangepast door don
	submenu branches op de homepage
	*/
#branchesmenu {
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 15px;
	float:left;
   width:228px; 

   
   /*background: url("../media/header_bg.jpg");
	background-repeat: repeat-y;*/
   }
#branchesmenu a {
	color: #A20509;
   display: block;
   background:url("../media/Branches_submenu_a.gif") no-repeat right top;
   padding:3px 15px 3px 9px;
	text-decoration: none;	
	width:198px;	
    }
* html #branchesmenu a {
 width:228px;	
}	
#branchesmenu a:hover {
	color: #FFFFFF;
	background:url("../media/Branches_submenu_b.gif") no-repeat right top; 
   }	
#branchesmenu ul {
    margin: 0px;
    padding: 0px;
    list-style:none;
    }	 
#branchesmenu li {
	text-decoration: none;
   float:left;
   /*padding:0 0 0 0px;*/
   margin-bottom:5px;
   }
   
#logocontainer {block;float:left; position:relative; width:250px;}	
#logocontainer  img{border-top: 1px dashed #000;}	

//* html #logocontainer  img{border-top:none; position:relative; top:10px; left:-12px;}	
//* html #logocontainer {width:250px; margin-top:67px; margin-left:0; border-top: 1px dashed #000; float: none; top:0;} /* IE */
/*aangepast door don
	submenu 
	*/
#submenu {
	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	line-height: 15px;
	float:left;
   width:228px;
	margin-left: 13px;
	margin-top: 15px;

	}
	* html #submenu {
 				margin-left: 6px;
   
   
   /*background: url("../media/header_bg.jpg");
	background-repeat: repeat-y;*/
   }
#submenu a {
	color: #A20509;
   display: block;
   background:url("../media/Branches_submenu_a.gif") no-repeat right top;
   padding:3px 15px 3px 9px;	
	text-decoration: none;	
	 width:198px;	
    }
	
* html #submenu a {
 width:228px;	
}
	
#submenu a:hover {
	color: #FFFFFF;
	background:url("../media/Branches_submenu_b.gif") no-repeat right top; 
   }	
#submenu ul {
    margin: 0px;
    padding: 0px;
    list-style:none;
    }	 
#submenu li {
	text-decoration: none;
   float:left;
   margin-bottom:5px;
   }

#submenu #actief {
  background:url("../media/Branches_submenu_b.gif") no-repeat right top; 
   }	
		
#submenu #actief a {
 background:url("../media/Branches_submenu_b.gif") no-repeat right top; 
 color: #FFFFFF;
   }
   
 #vacatureblok
 {
 	font-family: Verdana, Arial, tahoma, Geneva, Helvetica, sans-serif;
	font-size: 11px;
	padding: 0;
	margin: 14px 0 10px 0;
	float: left;
	overflow: hidden;
 }
 
 #vacatureblok ul
  {
   margin: 0;
   padding: 10px 16px;
  }
  
#vacatureblok li
  {
   margin: 0;
   padding: 2px 0;
  }