/* ------------------------------------------------- */
/* Common rules
/* ------------------------------------------------- */
	* {margin:0;padding:0;} 
	html, body { background: #d8d8d8 url(../img/bg-main.png) repeat-y center; font-family:Helvetica, Arial, sans-serif; font-size:12px; }
	h1 { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 22px; font-weight:bold; text-transform:uppercase; line-height:28px; letter-spacing:2px; color:#333; margin-bottom:12px; }
	h2 {  }
	h3 {  }
	h4 {  }
	h5 {  }
	a { color:#333e44; }
	a:hover { color:#306a8a; text-decoration:none; }
	img {  }
	input { outline:none; }
	
/* ------------------------------------------------- */
/* Lay-out rules
/* ------------------------------------------------- */
	#wrapper {  }
	#header { padding: 0; position: fixed; top:18px; left:29px; z-index:8;}
	#content-wrapper { position:absolute; top:50%; left:50%; margin-top: -200px; margin-left: -300px; width:600px; height:400px; z-index:5; }
	#content { width:580px; overflow:hidden; }
	#footer { width:100%; }

/* ------------------------------------------------- */
/* Taalkeuze rules
/* ------------------------------------------------- */
	body.taalkeuze { background:#1a1a1b url(../img/bg-taalkeuze.jpg) no-repeat center;}
	body.taalkeuze #wrapper {  }
	body.taalkeuze #content-wrapper { position:absolute; top:50%; left:50%; margin-top: -100px; margin-left: -400px; width:200px; height:160px; }
	body.taalkeuze #logo {background: url(../img/logo-marein-niville.png) no-repeat; width:185px; height:79px; display:block; }
	body.taalkeuze #logo span { display:none; }
	body.taalkeuze #taalkeuze { width:145px; float:left; padding: 20px 0 0 40px; }
	body.taalkeuze #taalkeuze a { background-image:url(../img/taalkeuze.gif); background-repeat:no-repeat; width:49px; height:50px; display:block; float:left; }
	body.taalkeuze #taalkeuze a.nl { background-position: 0px 0px; }
	body.taalkeuze #taalkeuze a.fr { background-position: -49px 0px; }
	body.taalkeuze #taalkeuze a.nl:hover { background-position: 0px -50px; }
	body.taalkeuze #taalkeuze a.fr:hover { background-position: -49px -50px; }
	body.taalkeuze #taalkeuze a span { display:none; }
	
/* ------------------------------------------------- */
/* Grid rules
/* ------------------------------------------------- */
	div.collinks { width:270px; margin-right:24px; float:left; text-align:right; }
	div.colrechts { width:270px; float:left; text-align:left; }
	div.span-2 {  }
	div.span-3 {  }
	
/* ------------------------------------------------- */
/* Menu styles
/* ------------------------------------------------- */
	#menu { background:#; height:200px; width:200px; position: absolute; top: 50%; left:0px; margin-top: -100px; z-index:10;}	

	#menu ul { font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 16px; font-weight:bold; text-transform:uppercase; list-style:none; padding: 0 0 0 22px; }	
	#menu ul li {}	
	#menu a, #menu a:visited { text-decoration:none; display:block; color:#333; height:23px; margin:1px; letter-spacing:2px; padding-left:14px;}	
	#menu a:hover, #menu a:active { color:#306a8a; background-image:url(../img/lijst-bolleke.gif); background-repeat: no-repeat; background-position: 0px 8px; }	
	
	#menu ul li ul { font-size: 11px; font-weight:normal; padding: 0 0 2px 0;}	
	#menu ul li ul li {}	
	#menu ul li ul li a, #menu ul li ul li a:visited {height:16px; letter-spacing:1px; }	
	#menu ul li ul li a:hover, #menu ul li ul li a:active { background-position: 0px 5px;}	

/* ------------------------------------------------- */
/* Photo holder styles
/* ------------------------------------------------- */
	#photoholder { background: url(../img/bg-photoholder.png) no-repeat top left; height:270px; width:292px; position: absolute; top: 50%; right:0px; margin-top: -135px; z-index:9;}	
	#photoholder a { padding: 5px 0 5px 32px; display:block;}	

/* ------------------------------------------------- */
/* Header rules
/* ------------------------------------------------- */
	#header a { background: url(../img/logo-marein-niville.png) no-repeat; width:185px; height:79px; display:block; }
	#header a span { display:none; }
	
/* ------------------------------------------------- */
/* Content rules
/* ------------------------------------------------- */
	#content { line-height:18px;}
	#content h1 { text-align:right; font-size: 22px; font-weight:bold; text-transform:uppercase; line-height:28px; letter-spacing:2px; width:270px;  }
	
	#content ul { list-style:none;}
	#content ul li { background-image:url(../img/lijst-pijlke.png); background-repeat: no-repeat; background-position: 0px 6px; padding: 0 0 0 10px; }

	body.homepage #content { background: url(../img/plus-bol.png) no-repeat 253px 26px; }

	body #content div.collinks h1 { height:38px; padding:7px 0 0 0; margin-top:174px; }
	
	body.contact #content div.colrechts { margin-top:38px; }
	body.marein-niville #content div.colrechts { margin-top:60px; }


/* ------------------------------------------------- */
/* CASES rules
/* ------------------------------------------------- */
	body.cases #content-wrapper { position:absolute; top:50%; left:50%; margin-top: -130px; margin-left: -315px; width:630px; height:260px; z-index:5; }

	body.cases #content { position: relative; width: auto; height: auto; overflow:auto; }

	body.cases #content ul.box li { position:relative; margin:5px; padding:0; background: url(../img/bg-case-tmb.png) no-repeat; overflow:hidden; width:200px; height:120px; float:left; }
	body.cases #content ul.box li .over { position:absolute; top:0px; left:0; width:200px; height:198px; z-index:10; background: url(../img/case-loupe.png) no-repeat;}
	body.cases #content ul.box li:hover div.over { position:absolute; top:-120px; left:0; z-index:10;}
	body.cases #content ul.box li h1 {position:absolute; bottom:0px; font-size:10px; color:#fff; text-align:center; padding:10px 0; margin: 0 0 2px 5px; text-transform:uppercase; font-weight:normal; line-height:normal; letter-spacing:2px; width:190px; background:#333; }
	

	body.cases #content ul.box li img { position:relative; top:5px; left:5px; width:190px; height:110px; margin:0; padding:0; }

/* ------------------------------------------------- */
/* KLANTEN rules
/* ------------------------------------------------- */
	body.klanten #content-wrapper { position:absolute; top:50%; left:50%; margin-top: -220px; margin-left: -330px; width:660px; height:440px; z-index:5; }

	body.klanten #content { position: relative; width: auto; height: auto; overflow:auto; }

	body.klanten #content ul.box li { position:relative; margin:5px; padding:0; background: url(../img/bg-klanten-tmb.png) no-repeat; overflow:hidden; width:210px; height:210px; float:left; }
	body.klanten #content ul.box li img { position:relative; top:5px; left:5px; width:200px; height:200px; margin:0; padding:0; }


/* ------------------------------------------------- */
/* Footer styles
/* ------------------------------------------------- */
	#footer { position:fixed; bottom:0px; height:34px; border-top: 1px solid #babdbf; background:#fff; z-index:6;}
	#footer-content { width:960px; margin:0 auto; padding:11px 0 0 0; position:relative; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size: 11px; text-transform:uppercase; letter-spacing:1px;}
	#footer-content h1 { padding:0 0 0 20px; position:absolute; left:20px; font-weight:bold; font-size: 11px; line-height:normal; margin:0; background:none;}
	
	#footer-content p { position:absolute; left:175px; margin:0; line-height:normal;}
	#footer-content p span { padding-right:18px;}
	
/* ------------------------------------------------- */
/* CLEAR FIX by Jeff Starr 
/* ------------------------------------------------- */
	.clearfix:after { visibility:hidden; display:block; font-size:0; content:" "; clear:both; height:0; }
	* html .clearfix { zoom:1; } /* IE6 */
	*:first-child+html .clearfix { zoom:1; } /* IE7 */
	
/* ------------------------------------------------- */
/* Sticky footer solution 
/* ------------------------------------------------- */
	html, body { height:100%; }
	#wrapper { min-height:100%; }
	/*#content-wrapper { overflow:auto; padding-bottom:34px; }
	#footer {position: relative; margin-top:-34px; height:34px; clear:both; }*/
	/*Opera Fix*/
	/* thank you Erik J - negate effect of float*/
	body:before { content:""; height:100%; float:left; width:0; margin-top:-32767px; }