/* COMMON BUGS
IE7, hover margin bug fix			: try to use padding instead;
FF, z-index bug fix				: use position:relative to force higher z-index
*/

/* COLORS
Purple		#a357e6
Purple (light)	#afa1f1
Green (light)	#aad200
Green		#6d9700
Green (dark)	#3a4e00
Yellow		#ffcc00
Blue (dark)	#0f2b79
Blue		#2b8af1
Red		#d0005a
Orange		#f05a28
*/

/*** RESET CONFIGURATION *********/
* { margin: 0; padding: 0; } /* remove all browser specific default spacing */
html { font-size: 1em; }
html { font-size: 62.5%; height: 100%; }  /* 62.5% makes 1em ~ 10px */
body {
	color: #595657;
	font: normal 1.0em/1.33 Arial, sans-serif;
	height: 100%;
	overflow-y: scroll; /* Scrollbar always visible: prevents sideMenu slide to 'shake' the page. */
}
*:first-child+html body {overflow-y: visible !important;} /* IE7 always draws the scrollbar. Prevents double scrollbar, though it's still a hack (bad!) */

table{ border-collapse: collapse; border-spacing: 0; }

h1 { color: #004fa1; font: normal 2.7em Arial, sans-serif; font-style: italic; font-weight: bold; } /* Titles */
h2 { color: #004fa1; font: normal 1.7em Arial, sans-serif; font-style: italic; font-weight: bold; } /* Paragraph titles */
h3 { color: #004fa1; font: normal 1.6em/1 Arial, sans-serif; font-weight: bold; }
h4 { color: #004fa1; font: normal 1.4em/1 Arial, sans-serif; font-weight: bold; }
h5 { color: #9bd5ff; font: normal 1.3em/1 Arial, sans-serif; }
h6 { color: #004fa1; font: normal 1.1em/1 Arial, sans-serif; }
h1{ margin: 0; }
/*h2, h3, h4, h5, h6 { margin: 25px 0 0; }*/
h2, h3, h4, h5, h6 { margin: 10px 0 3px 0; }

canvas{ margin: 0; padding: 0; line-height: 0;}

img {	border: 0; display: block; /* white-space fix */ }
a { color: #0580dc; text-decoration: none; }
a:hover { text-decoration: underline; color: #0580dc; }
a:focus, a:active { outline: none; /* removes dashed border in FF */ color: #0580dc; }
a em { cursor: pointer; }
p { font-size: 1.2em; margin: 0 0 1.0em 0; line-height: 1.6em; }
ul { font-size: 1.2em; list-style: disc outside; margin: 0.5em 0 0.5em 2em; }
ol { font-size: 1.2em; list-style: decimal outside; margin: 0.5em 0 0.5em 2.4em; }
object {	
	display: block; /* white-space fix */
	outline: none; /* removes dashed border in FF */
}

fieldset { border: 0; }
legend {
	color: #000;
	font: bold 1.5em/1 Arial, sans-serif;
	margin-left: -7px; /* for IE */
}
label { cursor: pointer; font: normal 1.2em Arial, sans-serif; }
input, textarea, select { 
	border: 1px solid #000;
	height: 16px;
	font: normal 1.2em/1.2 Arial, sans-serif;
	padding: 2px 2px 0 2px;
}
input[type=hidden]{ display: none; } /* for FF */
textarea { height: 80px; padding: 2px; }
select { padding: 0 0 0 2px; height: auto; }
option, optgroup { padding-left: 3px; }
optgroup option {	padding: 0; }
optgroup { font-style: normal; }

.active{ color: #d0005a; }

/* 1.2 HELPER CLASSES ~ read only */
.clearAfter { zoom: 1; /* IE6, IE7 */ }
.clearAfter:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
}
.dim { color: #ddd; }
.hidden { display: none !important; }
.left { float: left !important; }
.right { float: right !important; }
.center{ text-align: center !important; }
.offScreen { margin-left: -9999px; position: absolute; }
.noMarginRight{ margin-right: 0 !important; }
.noBorder{ border: none !important; }

.marginTop40{ margin-top: 40px; }

/*** Fonts ***/
@font-face {
    font-family: 'dearJoeCasual';
	/* Use a '?' to trick IE into thinking the rest of the src declaration is a query-string */
    src: url('../fonts/dj5ctrial.eot?') format('eot'),
         url('../fonts/dj5ctrial.woff') format('woff'),
         url('../fonts/dj5ctrial.svg#dj5ctrial') format('svg');
	/*url('../fonts/1dj5ctrial.ttf') format('truetype'), breaks in Safari due to line-height*/
}


/*** LAYOUT *********/
* html, *:first-child+html{
	overflow-x: hidden; /* prevents horizontal scrollbar in IE6 and 7  */
}
body { 
	background-color: #f3f3f3;
	overflow-x: hidden; /* prevents horizontal scrollbar on screen widths < 1040px */
	width: 100%; 
}

.wrapper{
	background: url('../images/shadow-bottom.png') no-repeat left bottom;
	left: 50%;
	margin: 0 0 0 -527px;
	padding-bottom: 9px;
	position: absolute;
	width: 1058px;
}
	.logo{
		display: block;
		margin: 22px auto 0;
	}
	.wrapper-inner{
		background: url('../images/shadow.png') no-repeat left top;
		margin-top: 10px;
		padding-top: 9px;
		position: relative;
	}
		.headerMenu{
			background: url('../images/menu-bg.png') no-repeat left top;
			display: block;
			height: 41px;
			left: 50%;
			margin: 0 0 0 -201px;
			position: absolute;
			top: 9px;
			width: 402px;
			z-index: 20;
		}
			.headerMenu li:first-child{ margin-left: 20px; }
			.headerMenu li{
				display: inline-block;
				float: left;
				list-style: none;
				margin: 9px 5px 0 0;
			}
				.headerMenu li a{
					color: white;
					display: inline-block;
					font-weight: bold;
					margin-left: 8px;
					padding: 2px 8px 0 0;
					text-shadow: #15476d 0 -1px 1px;
				}
				.headerMenu li a:hover{
					text-decoration: none;
					text-shadow: white 0 0 3px;
				}
			.headerMenu li.selected{
				background: url('../images/menu-button.png') no-repeat left top;
				height: 21px;
			}
				.headerMenu li.selected a{
					background: url('../images/menu-button.png') no-repeat right -25px;
					color: #0580dc;
					height: 21px;
					text-shadow: none;
				}
	.page{
		height: 735px;
		margin: 0 9px;
		overflow: hidden;
		position: relative;
		width: 1040px;
	}
		.stippenlijn{
			left: 50px;
			position: absolute;
			top: 20px;
			z-index: 10;
		}
.overlay {
	background: #000;
	display: none;
	filter: alpha(opacity=40);
	height: 100%;
	left: 0;
	opacity: 0.4;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 3000;
}

#welkom{ background: black url('../media/hi-res/welkom.jpg') no-repeat fixed center center; }
#over-mij{ background: black url('../media/hi-res/over-mij.jpg') no-repeat fixed center center; }
#diensten{ background: black url('../media/hi-res/diensten.jpg') no-repeat fixed center center; }
#ervaring{ background: black url('../media/hi-res/ervaring.jpg') no-repeat fixed center center; }
#opdrachten{ background: black url('../media/hi-res/opdrachten.jpg') no-repeat fixed center center; }
#contact{ background: black url('../media/hi-res/contact.jpg') no-repeat fixed center center; }

.papiertje{
	background: url('../images/papiertje.png') no-repeat left top;
	height: 455px;
	left: 280px;
	position: absolute;
	top: 150px;
	width: 498px;
	z-index: 15; /* z-index for all content elements; menu = 20, stippenlijn = 10 */
}
	.papiertje p{
		display: block;
		font-family: 'dearJoeCasual';
		font-size: 2.2em;
		line-height: 1.3em;
		margin-bottom: -3px;
		padding-top: 30px;
		padding-left: 40px;
		padding-right: 20px;
		padding-bottom: 3px;
	}
	.papiertje span{ color: #0580dc; }
.over-mij{
	background-color: white;
	box-shadow: #999 0 0 2px;
	-moz-box-shadow: #999 0 0 2px;
	-webkit-box-shadow: #999 0 0 2px;
	left: 130px;
	overflow: hidden;
	padding: 25px 20px 0;
	position: absolute;
	top: 860px;
	width: 520px; /* 520 + ( 2 * 20 ) = 560px */
	z-index: 15;
}
	.over-mij h2{
		color: #0580dc;
		display: block;
		font-family: 'dearJoeCasual';
		font-size: 2.2em;
		font-weight: normal;
		margin: 0 0 20px 0;
	}
	.over-mij p{
		margin-bottom: 25px;
	}
	.noortje-foto{
		right: 110px;
		position: absolute;
		top: 815px;
		z-index: 16;
	}
	.aanbeveling{
		background-color: white;
		box-shadow: #999 0 0 2px;
		-moz-box-shadow: #999 0 0 2px;
		-webkit-box-shadow: #999 0 0 2px;
		padding: 15px 10px;
		position: absolute;
		right: 130px;
		top: 1020px;
		width: 155px;
		z-index: 15;
	}
		.aanbeveling p{
			font-size: 1.1em;
			line-height: 1.4em;
			text-align: justify;
		}
		.aanbeveling em{ 
			color: #0580dc;
			display: block;
			font-size: 1.1em;
			text-align: justify;
		}
.titel-diensten{
	left: 300px;
	position: absolute;
	top: 1510px;
	z-index: 15;
}
.diensten{
	left: 305px;
	position: absolute;
	top: 1635px;
	z-index: 15;
}
.titel-ervaring{
	left: 170px;
	position: absolute;
	top: 2265px;
	z-index: 15;
}
	.box{
		background-color: white;
		box-shadow: #999 0 0 2px;
		-moz-box-shadow: #999 0 0 2px;
		-webkit-box-shadow: #999 0 0 2px;
		height: 420px; /* 420 + ( 2 * 15 ) = 450px */
		padding: 15px 20px;
		position: absolute;
		right: 260px;
		top: 2385px;
		width: 300px; /* 300 + ( 2 * 20 ) = 340px */
		z-index: 15;
	}
	.box h2{
		color: #0580dc;
		display: block;
		font-family: 'dearJoeCasual';
		font-size: 2.2em;
		font-weight: normal;
		margin: 0 0 10px 0;
	}
	.transparant-link-box{
		left: 135px;
		position: absolute;
		top: 2457px;
		width: 283px;
		z-index: 16;
	}
		.transparant-link-box a{ 
			cursor: pointer;
			display: block; 
		}
		.transparant-link-box #link1{ height: 62px; }
		.transparant-link-box #link2{ height: 57px; }
		.transparant-link-box #link3{ height: 57px; }
		.transparant-link-box #link4{ height: 57px; }
		.transparant-link-box #link5{ height: 50px; }
	.box ul{ 
		line-height: 1.5em;
		list-style-image: url('../images/bullet.gif');
		list-style-position: outside;
		margin: 0 0 0 15px;
	}
	/* .box li:before{
		color: #0580dc;
		content: "» ";
	} */
.titel-opdrachten{
	display: block;
	left: 160px;
	position: absolute;
	top: 3120px;
	z-index: 15;
}
	.bedrijven{
		background-color: white;
		box-shadow: #999 0 0 2px;
		-moz-box-shadow: #999 0 0 2px;
		-webkit-box-shadow: #999 0 0 2px;
		height: 280px;
		position: absolute;
		right: 65px;
		top: 3165px;
		width: 500px;
		z-index: 14;
	}
		.bedrijven a{ display: block; }
.titel-contact{
	display: block;
	left: 150px;
	position: absolute;
	top: 3725px;
	z-index: 15;
}
	.visitekaartje{
		background: url('../images/visitekaartje.png') no-repeat left top;
		height: 111px; /* 111 + ( 70 ) = 181px */
		left: 200px;
		padding: 70px 0 0 33px;
		position: absolute;
		top: 3795px;
		width: 266px; /* 266 + ( 33 ) = 299px */
		z-index: 15;
	}
		.visitekaartje p{ line-height: 1.4; }
.contact-form{
	background: url('../images/contact-formulier-bg.png') no-repeat left top;
	height: 332px;
	position: absolute;
	right: 169px;
	top: 3955px;
	width: 333px;
	z-index: 15;
}
	.contact-form input[type='text']{
		color: #404040;
		border: none;
		font-size: 1.2em;
		height: 18px;
		width: 120px;
	}
	.contact-form #naam{
		left: 29px;
		position: absolute;
		top: 47px;
	}
	.contact-form #bedrijfsnaam{
		left: 179px;
		position: absolute;
		top: 47px;
	}
	.contact-form #email{
		left: 29px;
		position: absolute;
		top: 107px;
	}
	.contact-form #telefoon{
		left: 179px;
		position: absolute;
		top: 107px;
	}
	.contact-form textarea{
		border: none;
		color: #404040;
		height: 105px;
		left: 29px;
		position: absolute;
		top: 168px;
		width: 270px;
	}
	.contact-form a{
		height: 20px;
		position: absolute;
		right: 26px;
		top: 285px;
		width: 60px;
	}