/*
general styles
	body styles
	reset
	links
	headings
	other elements, tags
helper styles
	forms
	notifications and errors
	consistant items with normally just one class
page structure
	skeleton including page furniture,
page components
	most of your styles will be in here
overrides
*/

/* -------------------------------------*/
/* --------------RESET------------------*/
/* -------------------------------------*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0; 
  	padding:0; 
} 
	
table { 
    border-collapse:collapse; 
    border-spacing:0; 
} 	

fieldset,img {  
    border:0; 
} 


ol,ul { 
    list-style:none; 
} 


h1,h2,h3,h4,h5,h6 { 
font-size:100%; 
font-weight:normal; 
} 



/* ---------------------------------------*/
/* ----------------- BODY ----------------*/
/* ---------------------------------------*/
	
	

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

body{
font-family: Georgia, Serif;
font-size:0.75em;		/*12px - Basis is 12px*/
width:100%;
height:100%;
background: black;
text-align:left; 			/*Om te zorgen dat #wrapper wordt gecentreerd in IE6*/
}

p,span,dl,dt,dd,ul,h1,h2,h3,h4,h5,h6{
padding:0;
}

span,blockquote,ul,ol,dl{
color:#58585a;
}

p{
color:#58585a;	
}



a{
color:#bd0926;	
}

a:hover{
text-decoration:underline;	
}

p,dt,dd,li{
font-size:1em;			 /*12px - Basis is 12px*/
line-height:1.667em;	 /*20px - Basis is 12px*/
}

p,ul{
margin-bottom:1.667em;	 /*20px - Basis is 12px*/
}

#content_inside ul{
margin-top:-1.667em;	 /*20px - Basis is 12px*/	
}

a{
text-decoration:none;	
}

h1,h2,h3,h4,h5,h6{
color:#bd0926;
font-size:1.333em; 		/*16px - Basis is 12px*/
line-height:1.25em; 	/*20px - Basis is 16px*/
padding-bottom:0.375em;
margin-bottom:0.875em;
}

h1{
margin-right:0px;
background: url('../media/header_bg.gif') left bottom repeat-x;
}

h2,h3{
background: url('../media/side_bg.gif') left bottom repeat-x;
}

#content_inside h2,
#content_inside h3{
margin-right:20px;
}

h1 span,
h2 span{
font-size:0.5625em;
line-height:2.222em;
float:right;
}	

blockquote p{
padding:1.375em 0;
color:#000;
}





#wrapper{
text-align:left;			/*Om de vorige IE6 hack op te heffen */
width:920px;
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;
}

#header{
height:231px;
position:relative;	
background: url('../media/navigatie_bg.jpg') left top no-repeat;
}

ul#supernav{
position:absolute;
height:28px;
bottom:28px;
margin:0 0 0 110px;
}

ul#supernav li{
float:left;
height:100%;
text-indent:-9999px;
}

ul#supernav li a{
background-image: url('../media/navigatie.jpg');	
display:block;
height:100%;
width:100%;
}

ul li#nav_welkom				{width:98px;}
ul li#nav_welkom	a			{background-position:0px top;}
ul li#nav_portfolio				{width:109px;}
ul li#nav_portfolio	a			{background-position:-98px top;}
ul li#nav_diensten				{width:114px}
ul li#nav_diensten a			{background-position:-207px top;}
ul li#nav_contact				{width:89px;}
ul li#nav_contact	a			{background-position:-321px top;}


#supernav  li#nav_welkom a:hover,
#supernav  li#nav_welkom a.active		{background-position:0px bottom;}
#supernav  li#nav_portfolio	a:hover,
#supernav  li#nav_portfolio	a.active	{background-position:-98px bottom;}
#supernav  li#nav_diensten a:hover,
#supernav  li#nav_diensten a.active		{background-position:-207px bottom;}
#supernav  li#nav_contact a:hover,
#supernav  li#nav_contact a.active		{background-position:-321px bottom;}


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



#homepage #content{
background: url('../media/splitter.gif') 594px -16px repeat-y;
}

#content{
min-height:309px;
margin-top:1.667em;			/*20px - basis is 12px*/
padding-bottom:50px;		/*Op deze manier wordt er ruimte gecreerd voor de footer, anders zou de inhoud over de footer komen te liggen.	*/

}

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


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

#content_inside img,
#sidebar img{
max-width:100%;	
}

#sidebar{
width:319px;
padding: 0 0 0 0;
margin:0 0 0 0;	
float:right;
display:inline;
}

#sidebar h1,
#sidebar h2,
#sidebar h3,
#sidebar p,
#sidebar ul{
margin-left:10px;	
margin-right:100px;
}

body #subnav{
margin-left:0;
margin-right:92px;	
}

#subnav a{
display:block;
height:100%;
}

#subnav li{
height:76px;
display:block;
text-indent:-9999px;	
background-image: url('../media/images/diensten_afbeelding.gif');
background-repeat:no-repeat;
overflow:hidden;
}

.dienst_redactie					{background-position:0 0}
.dienst_vormgeving					{background-position:0 -76px;}
.dienst_opmaakdtp					{background-position:0 -152px;}
.dienst_drukvormvervaardiging		{background-position:0 -228px;}
.dienst_drukken						{background-position:0 -304px;}
.dienst_afwerking					{background-position:0 -380px;}

.dienst_redactie:hover				{background-position:-222px 0}
.dienst_vormgeving:hover			{background-position:-222px -76px;}
.dienst_opmaakdtp:hover				{background-position:-222px -152px;}
.dienst_drukvormvervaardiging:hover	{background-position:-222px -228px;}
.dienst_drukken:hover				{background-position:-222px -304px;}
.dienst_afwerking:hover				{background-position:-222px -380px;}

#contact #content{
background:none;	
}

#footer{
width:100%;
position:absolute;			/*Op deze manier blijft de Footer altijd aan de onderkant van de pagina geplakt.	*/
height:50px;
bottom:0;
}

#portfolio h3{
margin-left:105px;
margin-right:105px;
z-index:2;
position:relative;
clear:both;
font-size:1em;
line-height:1.667em;
margin-bottom:1.1667em;
padding-bottom:0.5em;
color:#58585a;
}

#portfolio h1{
margin-left:105px;
margin-right:105px;
display:none;
clear:both;
}

#portfoliolijst{
margin:-33px 105px 18px 105px;	
float:left;
display:inline;
background: url('../media/portfolio_bg.gif') left -2px repeat;
}

#portfoliolijst li{
float:left;
width:78px;
height:85px;
margin-top:33px;
padding-top:0px;
margin-right:1px;
position:relative;	
z-index:1;
}


#portfoliolijst li.laatste	{margin-right:0;}
#portfoliolijst li img		{display:block;}

#portfoliolijst span.thumb{
overflow:hidden;	
display:block;
width:78px;
height:85px;
}

#portfoliolijst span.thumb{z-index:2;}
#portfoliolijst span	  {z-index:3;}
#portfoliolijst a		  {z-index:5;}

#portfoliolijst li.actief {z-index:3;}

#portfoliolijst span img{
margin-left:-10px;
margin-top:-10px;
}

#portfoliolijst span.glow img{visibility:hidden;}
#portfoliolijst span.mask img{visibility:visible;}
#portfoliolijst .actief span.glow img{visibility:visible;}
#portfoliolijst span.thumb img{visibility:visible;}
	
#portfoliolijst a{
width:78px;
height:85px;
display:block;
position:absolute;
background: url('../media/background.gif') repeat;
}



#portfoliolijst span{
position:absolute;
width:98px;
height:105px;
margin-top:-10px;
margin-left:-10px;
top:0px;
display:block;
overflow:hidden;	
}

#portfoliolijst span img{margin-top:0; margin-left:0;	}
#portfoliolijst span.thumb {margin-top:0; margin-left:0;	}

#portfoliolijst span.thumb img{
margin:0px;	
}

#portfoliolijst span.mask img{margin-top:-105px;}
#portfoliolijst li:hover span.mask img{margin-top:-210px;}

#portfoliolijst a img{
position:relative;

}
	
/*
#portfoliolijst li a		{z-index:1; display:block;}
#portfoliolijst li.actief a	{z-index:2;}
#portfoliolijst li a:hover	{z-index:3;}
*/

#portfoliogroot{
margin:20px 95px 40px 95px;	
clear:both;
background: url('../media/portfoliogrootbg.gif') left top repeat-y;
}

.bordertop{
height:11px;
background: url('../media/glowtop.gif') left bottom no-repeat;
margin:-20px 0 20px 0;
}

.borderbottom{
height:11px;
background: url('../media/glowbottom.gif') left bottom no-repeat;
margin:20px 0 -20px 0;
clear:both;
}

#portfoliogroot img{
float:left;
display:inline;
margin-bottom:20px;
margin-left:40px;
}

#portfoliogroot.breed img{
display:block;
float:none;
margin:0 auto 20px auto;	
}

#portfoliogroot h2,
#portfoliogroot p{
margin-left:40px;
margin-right:40px;
}	

#portfoliogroot.breed h2{
width:315px;
}

#portfoliogroot.breed p{
-moz-column-width: 315px;
-webkit-column-width: 310px;
-moz-column-gap: 15px;
-webkit-column-gap: 15px;
}

#portfolio #content>p{
margin-left:110px;	
margin-right:110px;
}


/*
Twitterbox
#twbox
*/
#twbox{
margin-left:10px;
margin-bottom:30px;
}
#twbox h1,
#twbox h2,
#twbox h3,
#twbox h4{
background: none;
}