/* #0 Table of Contents
-------------------------------------------
	#0: Table of Contents
	#1: Imports
	#2: General CSS
	#3: Wrappers
	#4: Content
		#4.1: Header
		#4.2: Afbeelding
		#4.3: Inhoud
		#4.4: Footer

	#99: Functies en Tweaks
*/

/* #1 Imports
------------------------------------------- */
	/* Reset css: fix margin/paddings etc */
	@import url('reset.css');

/* #2 General CSS 
------------------------------------------- */
	body{	
		background:#fff url('images/headerbg.png') repeat-x top center;
		margin:0px auto;	
		color: #000;
		font: 11pt 'Arial', sans-serif;
		letter-spacing:0.01em;
	}

	a, a:link, a:visited{
		text-decoration:none;
		color:#0066DE;
	}
	a:hover,
	a:active{
		text-decoration:underline;
	}
	a.ctatext{
		color:#0066de;
		font-weight:bold;
	}

	h1,h2,h3{
		font: 14pt "Myriad Pro", "Arial", sans-serif;
		color:#0066de;
	}
	h4,h5,h6{
		font: 10pt "Myriad Pro", "Arial", sans-serif;
		color: #000;
		font-weight:bold;
	}

	strong{
		font-weight:bold;
	}

	p{
		margin-bottom:10px;
	}

	ul{
		list-style:disc;
		margin-bottom:10px;
	}
	ul li{
		margin-left:15px;
	}
	th{
		font-weight:bold;
	}

	div.projectContainer{
		clear:both;
	}
	img.projectImg{
		display: block;
		float:left;
		width: 100px;
		height: 100px;
		margin-right: 5px;
		margin-bottom:10px;
		overflow:hidden;
		padding:2px;
		background:#fff;
		border: 1px solid #0066DE;
	}
/*	
	###
	### TABLE ROW COLORING
	###
	
	tr:nth-child(odd){
		background:#eee;
	}
	tr:nth-child(even){
		background:#ddd;
	}
	th{
		background:#ddd;
	}

*/
	table{
		text-align:left;
		margin-bottom:10px;
	}

	table tr th{
		text-align: left;
	}

	/* Buttons */
	a.button{
		color:#fff;
		text-shadow: 0px 1px 1px #000;
		padding-top:9px;
		text-align:center;
		width:156px;
		height:30px;
		border-radius:5px;
	}
	a.button:hover, a.button:active{
		text-decoration:none;
	}
	a.ctaofferte{
		background: url('images/ctablue.png') no-repeat 0 0;
		float:left;
	}
	a.ectaofferte{
		background: url('images/ctabluearrow.png') no-repeat 0 0;
		float:left;
	}
	a.ctameer{
		background: url('images/ctayellow.png') no-repeat 0 0;
		width:127px; /* Different width */
		float:left;
	}

	span.nadruk{
		text-transform: capitalize;
		color: #0066de;
		font-weight:bold;
	}

/* #3 Wrappers
------------------------------------------- */
	div.contentwrap{
		width:960px;
		margin: 0 auto;
		overflow:hidden;
	}

/* #4 Content
------------------------------------------- */


	/* #4.1 Header
	------------------------------------------- */
		div#header{
			height:77px;
		}
		div#header a#logo{
			display:block;
			background: url('images/logo.png') no-repeat center center;
			width:220px;
			height:56px;
			margin: 10px 0;
			float:left;
		}
		div#header a#logo h1{
			display:none;
		}
		div#header a.ectaofferte,
		div#header a.ctaofferte{
			margin-top: 15px;
			float:right;
		}

	/* #4.2 Afbeelding
	------------------------------------------- */
		div#scape{
			position:relative;
			height:400px;
			overflow:hidden;

			-webkit-transition: height 1s;
			-moz-transition: height 1s;
			-o-transition: height 1s;
			transition: height 1s;
		}
		
		div#scape img{

			-webkit-transition: height 1s;
			-moz-transition: height 1s;
			-o-transition: height 1s;
			transition: height 1s;
		}
		
		div#scape div#scapeoverlay{
			background: url('images/imgoverlay.png') repeat top left;
			position:absolute;
			top:0;
			left:0;
			width: 100%;
			height:100%;
		}

		/* Navigatie 
		------------------------------------------- */
		div#scape div#scapeoverlay #nav{
			margin: 30px 0;
			background: url('images/menubg.png') repeat-x 0 0;
			min-height:58px;
			border-left:1px solid #8c8c8c;
			border-right:1px solid #8c8c8c;
			list-style:none;

			text-align:left;
		}

		div#scape div#scapeoverlay #nav li{
			margin:0px;
		}
		div#scape div#scapeoverlay #nav li a{
			padding: 0px 20px;
			margin: 1px 0px;
			line-height: 55px;
			float: left;
			display:block;
			border-right: 1px solid #bbc2c3;
			font-size:11pt;
		}
		div#scape div#scapeoverlay #nav li a,
		div#scape div#scapeoverlay #nav li a:link,
		div#scape div#scapeoverlay #nav li a:visited{
			color:#454545;
			font-family: "Myriad Pro", "Arial", sans-serif;
		}
		div#scape div#scapeoverlay #nav li a:active,
		div#scape div#scapeoverlay #nav li a:hover,
		div#scape div#scapeoverlay #nav li.current-menu-ancestor a,
		div#scape div#scapeoverlay #nav li.current-menu-item a,
		div#scape div#scapeoverlay #nav li a.hover{
			background: #fff;
			text-decoration:none;
		}

		/* Overtuiging 
		------------------------------------------- */
		div#scape div#scapeoverlay h1{
			font: 30pt "Myriad Pro", "Arial", sans-serif;
			color: #4068ad;
			text-shadow: 0px 0px 3px #fff;
			line-height:170%;
			width:100%;
			text-align:left;
			float:left;
			margin-top:25px;
		}

		/* Buttons
		------------------------------------------- */
		div#scape div#scapeoverlay div.buttonwrap{
			position:absolute;
			bottom:80px;
		}
		div#scape div#scapeoverlay a.button{
			margin-right:15px;
		}

		/* Uitgelicht
		------------------------------------------- */
		div#scape div#scapeoverlay div#uitgelicht{
			width:240px;
			height:220px;
			background: #fff;
			padding: 10px;
			margin-right: 40px;
			float:right;
		}
		div#scape div#scapeoverlay div#uitgelicht h3{
			font-size:12pt;
			padding: 5px 0;
		}
		div#scape div#scapeoverlay div#uitgelicht a{
			font-weight:bold;
			font-size:10pt;
		}
		div#scape div#scapeoverlay div#uitgelicht img{
			border: 1px solid #b9babd;
		}

	/* #4.3 Inhoud
	------------------------------------------- */

		div#inhoud h2,
		div#inhoud h3{
			padding-bottom:10px;
			padding-top:25px;
		}


		/* Links
		------------------------------------------- */
			div#content{
				/*width:600px;*/
				width: 100%;
				float:left;
				padding-right: 20px;
				letter-spacing: 0.03em;
				line-height:130%;
			}

			div#content.wide{
				width:100%;
				padding-right: 0;
			}

		/* Rechts
		------------------------------------------- */
			div#sidebar{
				display:none;
				float:right;
				width:338px;
				border-left: 1px solid #ddd;
			}

			div#sidebar div.blok{
				padding: 0 0 20px 30px;
				border-bottom: 1px solid #ddd;
			}
			div#sidebar div.blok:last-of-type{
				border-bottom: none;
			}


	/* #4.4 Formulieren
	------------------------------------------- */
	div#contactFormContainer {
		float:left;
		width: 500px;
	}
	div#contactFormContainer h3{
		padding-top:0;
	}
	div#wpcf7-f117-p21-o1 form div{
		padding:5px 0; 
		width:100%;
	}
	div#wpcf7-f117-p21-o1 form div.exception{
		width: 100%;
		padding: 0;
	}
	div#wpcf7-f117-p21-o1 form div.exception p{
		margin: 0;
	}
	div#wpcf7-f117-p21-o1 form div.topspace{
		padding-top:10px;
	}
	div#wpcf7-f117-p21-o1 form label{
		width:150px; 
		display:block;
		float:left;
	}
	div#wpcf7-f117-p21-o1 form label.wide{
		width:100%;
	}
	div#wpcf7-f117-p21-o1 form input{
		width:250px;
	}
	div#wpcf7-f117-p21-o1 form select{
		width:257px; /* Somethings bugs it... Needs 7px more */
	}
	div#wpcf7-f117-p21-o1 form input.short{
		width:49px;
	}
	div#wpcf7-f117-p21-o1 form input[type="submit"]{
		float:right; 
		width:100px;
		margin-right:3px;
	}
	div#wpcf7-f117-p21-o1 form textarea{
		width:400px; 
		min-height:140px;
	}

	input, textarea, select{
		border: 1px solid #999;
		font-family: "Arial", sans-serif;
		font-size:13px;
		padding: 2px 3px;
	}

	input:focus,
	textarea:focus,
	select:focus{
		outline:none;
		box-shadow: none;
		border: 1px solid #666;
	}

	div#wpcf7-f117-p21-o1 form div#aanvraagContainer{
		display:none;
	}

	div.contactErrorContainer{
		background: rgba(130,0,0,0.1);
		border: 1px solid #c00;
		padding: 5px;
	}

	/* Contactinfo */
	div#contactInfo{
		float:left;
		width: 300px;
		margin-left:25px;
	}
	div#contactInfo{
		float:left;
	}
	div#contactInfo ul {
		list-style:none;
		padding: 0;
		margin: 0;
		float:left;
		}
	div#contactInfo ul li{
		list-style:none;
		padding: 0;
			margin: 0;
		}
	div#contactInfo ul li.spacer{
		margin-bottom:15px;
	}

	div#contactInfo ul li span{
		color: #0066de;
		display:inline-block;
		width: 50px;
	}

	/* #4.4 Footer
	------------------------------------------- */
		div#footer{
			border-top: 1px solid #ddd;
			margin:15px auto;
			padding-top:10px;
			font-size: 10pt;
		}

		div#footer p{
			padding-top:7px;
			float:left;
			width:862px;
		}

		div#footer a.designedby{
			/*float:right;
			background:url('images/54seconds.png') no-repeat 0 0;
			display:block;
			width:98px;
			height:28px;*/
		}

/* #99 Functies en Tweaks
------------------------------------------- */

	/*  MediaQueries
	------------------------------------------- */
		@media all and (max-width: 1280px) {
			div#scape{
				height:300px;
				text-align:center;
			}

			div#scape img{
				max-width: 960px;
				height: 300px;
			}
		}

		@media all and (min-width: 1280px) and (max-width: 1600px){
			div#scape{
				height:350px;
				text-align:center;
			}

			div#scape img{
				max-width: 1400px;
				height: 350px;
			}
		}

		@media all and (min-width: 1600px){
			div#scape{
				height:400px;
				text-align:center;
			}

			div#scape img{
				max-width: 100%;
				height: 400px;
			}
		}


	/* Dropdownnavigatie
	------------------------------------------- */
		/* LEVEL ONE */
		div#scape div#scapeoverlay #nav{ 
			position: relative; 
		}
		div#scape div#scapeoverlay #nav li{ 
			float: left; 
			zoom: 1; 
		}
		div#scape div#scapeoverlay #nav li.hover,
		div#scape div#scapeoverlay #nav li:hover{ 
			position: relative; 
		}

		/* LEVEL TWO */
		div#scape div#scapeoverlay #nav li ul{
			width: 150px;
			visibility: hidden;
			position: absolute; 
			top: 56px; 
			left: -1px; 
			list-style:none;
			border:1px solid #8c8c8c;
			background: #fff;
			padding: 0;
			margin: 0;
		}

		div#scape div#scapeoverlay #nav li ul li{ 
			font-weight: normal; 
			background: #fff; 
			color: #000; 
			float: none; 
		}
		div#scape div#scapeoverlay #nav li ul li a{
			line-height:100%;
			display:block;
			height: 20px;
			width: 140px;
			margin: 0;
			padding: 8px 0px 0px 10px;
			border: none;
		}
		div#scape div#scapeoverlay #nav li ul li a:hover,
		div#scape div#scapeoverlay #nav li ul li.current-menu-ancestor a,
		div#scape div#scapeoverlay #nav li ul li.current-menu-item a
		{
			background: #ededed;
		}
											  
		/* IE 6 & 7 Needs Inline Block */
		div#scape div#scapeoverlay #nav ul{ 
			border-right: none; 
			width: 100%; 
			display: inline-block; 
		} 

		/* LEVEL THREE */
		div#scape div#scapeoverlay #nav ul ul{ 
			left: 100%; 
			top: 0; 
		}
		div#scape div#scapeoverlay #nav li:hover > ul{ 
			visibility: visible; 
		}