html, body{
width:100%;
height:100%;	
}

body{
width:100%;
height:100%;
background: #FEB800 url('../media/body_bg.jpg') left top repeat-x;	
text-align:center; 			/*Om te zorgen dat #wrapper wordt gecentreerd in IE6*/
}

div, li, a, dl{border:0px solid gray;}

#wrapper{
text-align:left;			/*Om de vorige IE6 hack op te heffen */
width:1000px;
margin:0 auto;				/*Om te zorgen dat #wrapper wordt gecentreerd in moderne browsers*/
background-color:white;
min-height:100%;			/*Om te zorgen dat #wrapper minstens de hoogte neemt van het hele venster in moderne browsers	*/
height:auto !important;		/*Min height hack, zie http://www.dustindiaz.com/min-height-fast-hack/ 							*/
height:100%;				/*Min height hack, zie http://www.dustindiaz.com/min-height-fast-hack/ 							*/
position:relative;			/*#wrapper kan als ancestor gebruikt worden voor de footer			 							*/
}

#header{
width:1000px;
height:311px;
position:relative;	
}

#supernav{
position:absolute;			/*Op deze manier wordt de navigatie OVER de header en de afbeelding van de header geplaatst, #header wordt als ancenstor gebruikt	*/
width:1000px;
height:74px;
right:0;					/*Op deze manier wordt de navigatie naar rechts uitgeleind	*/
bottom:0;					/*Op deze manier wordt de navigatie naar beneden uitgeleind	*/
background: url('../media/supernav_bg.png') right top no-repeat;
}



* html #supernav{
background: url('../media/supernav_bg_ie.jpg') left top no-repeat;		
}									/*Op deze gebruikt IE6 en lager geen pngplaatje, maar een jpg-plaatje	*/

* + html #supernav{
background: url('../media/supernav_bg_ie.jpg') right top no-repeat;	
}									/*Op deze gebruikt IE7 geen pngplaatje, maar een jpg-plaatje	*/

#supernav ul{
float:right;
padding-right:42px;	
}

#supernav ul li{
position:relative;
float:left;
}

#supernav ul li a{	
display:block;
text-indent:-9999px;
width:100%;
height:100%;
}

ul li#nav_overu							{width:79px; height:67px;}
ul li#nav_overu	a						{background: 	url('../media/nav_overu.jpg') 		left top no-repeat;}
ul li#nav_overons						{width:106px; height:67px; }
ul li#nav_overons	a					{background: url('../media/nav_overons.jpg') 		left top no-repeat;}
ul li#nav_diensten						{width:106px; height:67px;}
ul li#nav_diensten a					{background: url('../media/nav_diensten.jpg') 	left top no-repeat;}
ul li#nav_home							{width:73px; height:67px; }
ul li#nav_home	a						{background: 	url('../media/nav_home.jpg') 			left top no-repeat;}

#supernav ul li#nav_diensten 		a:hover,	
#supernav ul li#nav_home			a:hover,		
#supernav ul li#nav_overons			a:hover,
#supernav ul li#nav_overu			a:hover		
{background-position:right top;}

#supernav ul li.active 	a{background-position:right top;}

#content{
position:relative;				/* -------------------------------------------------------------------------------------------------------- */
top:-9px;									/*Op deze manier wordt de rounded corners naar boven verplaatst terwijl de content op haar plaats blijft		*/
padding-top:9px;					/* -------------------------------------------------------------------------------------------------------- */
width:1000px;
background:	url('../media/content_top.png') left top no-repeat;
min-height:309px;
padding-bottom:200px;		/*Op deze manier wordt er ruimte gecreerd voor de footer, anders zou de inhoud over de footer komen te liggen.	*/
}

#content h1{
margin: 55px 0 .5em 65px;
}

#content:after {				/*Op deze manier wordt de inhoud gecleard, anders zou de pagina inhoud over de layout heen komen te liggen.	*/
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
}


#content_inside_wrapper{
width:525px;
padding: 0 55px 0 65px;				/*Ik zet expres geen width: 100%; erin, anders dan gaat dat fout in IE6 vanwege de incorrecte boxmodel.	*/
float:left;
height: 1%;										/*Volgens mij is dit om de float te clearen in IE6, die last heeft van een haslayout bug.*/
}

#content_inside_wrapper_home{
width:870px;
padding: 0 55px 0 65px;				/*Ik zet expres geen width: 100%; erin, anders dan gaat dat fout in IE6 vanwege de incorrecte boxmodel.	*/
float:left;
height: 1%;	
}

#navigation{
width:323px;
padding: 0 0 0 0;	
float:right;
}

#casus_detail{
width:100%;
float:left;
clear:left;
}

.portofolio_image{
margin:0 0;
float:left;
padding-left:65px;
padding-top:20px;
}


.home .portofolio_image{
padding-left:0;
}

.portofolio_image img{
border:3px solid #e9e9e9;
display:block;
}

.portofolio_image img:hover{
border:3px solid #ccc;
}

.portofolio_discription{
background: url('../media/dotted.gif') left top repeat-x;
width:258px;
margin:20px 65px 0 0;
padding-top:1.8em;
display:block;								/* Double margin bug IE6*/
float:right;
clear:right;
display:inline;	
}



#footer{
width:100%;
position:absolute;			/*Op deze manier blijft de Footer altijd aan de onderkant van de pagina geplakt.	*/
background: white url('../media/footer_bg.gif') left bottom no-repeat;
height:120px;
bottom:0;
}