/* stylesheet: Maaike's eigen site! */
/* versie: 1.16 - 6 augustus 2009 */
/* Maaike de Laat - maaike@onwaarschijnlijk.org */


/*  schone start geïnspireerd op eric meyer: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/
-------------------------------------------- */

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}

body {
	color:#3c3c3c;
	background-color:#fff;
	font-size:100%;
}

ol, ul {
	list-style: none;
}

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

caption, th, td {
	text-align: left;
	font-weight: normal;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}

blockquote, q {
	quotes: "" "";
}

/*  basis typografie
-------------------------------------------- */
h1,h2,h3,h4,h5,h6 {
	font-weight:normal;
	background-color:#fff;
}

p {
	background-color:#fff;
	color:#3c3c3c;
}

em {
	font-style:italic;
}

.verstoppen {
	position:absolute;
	top:-5000px;
	left:0;
}

a {
	text-decoration:none;
	color:#ea7208;
	border-bottom:1px dotted #ea7208;
}

a:visited {
	color:#797979;
	border-bottom:1px dotted #797979;
}

a:hover, a:active {
	text-decoration:none;
	color:#797979;
	border-bottom:1px dotted #797979;
}

strong {
	font-weight:bold;
}

/*  basislayout
-------------------------------------------- */
html {
	height:100%;
}

body {
	font-size:12px;
	line-height:16.7px;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	background:url(../img/body_bg.gif) center -2px repeat;
	height:100%;
}

#headerhouder {
	position:absolute;
	top:0;
	left:0;
	height:50px;
	background:#2f2f2f url(../img/header_bg_gr.gif) bottom center repeat-x;
	width:100%;
	z-index:1;
	color:#fff;
}

#header {
	width:1000px;
	margin:0 auto;
	position:relative;
}

.b_index #header h1 {
	background:none;
	color:#fff;
	width:200px;
	height:18px;
	padding:4px 0 0 0;
}

#header a {
	color:#fff;
	font-weight:bold;
	border:none;
	height:18px;
}

#header em {
	width:200px;
	height:18px;
	padding:24px 0 0 0;
	display:block;
}

#header em a {
	color:#fff;
	background:url(../img/header_maaike_mo.gif) 25px 0 no-repeat;
	display:block;
	text-indent:-5000px;
	width:150px;
}

#header em a:hover {
	border:none;
	background:url(../img/header_maaike_mo.gif) 25px -20px no-repeat;
}

#header img {
	margin: 20px 0 0 25px;
}

#header #nav {
	position:absolute;
	top:24px;
	left:775px;
	z-index:1000;
}

#header #nav li {
	height:18px;
	width:50px;
	float:left;
}

#header #nav li.active {
	margin-top:34px;
	text-indent:-5000px;
}

#header #nav li#nav_wat.active {
	background:url(../img/header_wat_act.gif) 0 0 no-repeat;
}

#header #nav li#nav_waar.active {
	background:url(../img/header_waar_act.gif) 0 0 no-repeat;
}

#header #nav li#nav_wie.active {
	background:url(../img/header_wie_act.gif) 0 0 no-repeat;
}


#header #nav li a {
	color:#fff;
	display:block;
	text-indent:-5000px;
	position:relative;
}

#header #nav li a:hover {
	border:none;
}

#header #nav li#nav_wie a {
	background:url(../img/header_wie.gif) 0 0 no-repeat;
}

#header #nav li#nav_wie a:hover {
	background:url(../img/header_wie.gif) 0 -20px no-repeat;
}

#header #nav li#nav_wat a {
	background:url(../img/header_wat.gif) 0 0 no-repeat;
}

#header #nav li#nav_wat a:hover {
	background:url(../img/header_wat.gif) 0 -20px no-repeat;
}

#header #nav li#nav_waar a {
	background:url(../img/header_waar.gif) 0 0 no-repeat;
}

#header #nav li#nav_waar a:hover {
	background:url(../img/header_waar.gif) 0 -20px no-repeat;
}

#content {
	width:1000px;
	margin:0 auto;
	position:relative;
	min-height:100%;
}

#footerhouder {
	width:100%;
	/*background-color:#FBF7D6;*/
	background:#fff url(../img/boomtoppen2.jpg) bottom center repeat-x;
	position:relative;
	margin-top:-13em;
	height:13em;
}

#footer {
	width:1000px;
	margin:0 auto;
	position:relative;
	padding-top:0;
}

#footer p.vcard a, body #footer p.vcard a:visited {
	border-bottom:1px dotted #3c3c3c;
	position:relative;
	color:#3c3c3c;
	
}

#footer h2 {
	background:none;
	position:absolute;
	top:0;
	left:275px;
	font-weight:bold;
}

#footer p {
	background:none;
	position:absolute;
	top:25px;
	left:275px;
	width:425px;
}

#footer span, #footer a, #footer em, #footer abbr {
	background-color:#fff;
}

#footer #toggler {
	background:none;
	position:absolute;
	top:0;
	left:775px;
	width:200px;
	padding-left:20px;
}

#footer #toggler h2 {
	position:static;
	margin:0 0 8px -20px;
	background-color:#fff;
}

#footer #toggler input {
	margin:0 5px 2px -20px;
	float:left;
	background-color:#fff;
}

#footer #toggler label {
	display:block;
	float:left;
	background-color:#fff;
}

#footer form {
	width:200px;
	margin:0 0 0 25px;
}

#footer form label {
	margin:0 0 7px 0;
	display:block;
	font-weight:bold;
}

#footer form input {
	width:130px;
	position:absolute;
	top:28px;
	left:25px;
	font-family:Helvetica, Arial, Verdana, sans-serif;
	padding:1px;
	color:#3c3c3c;
}

#footer form button {
	display:block;
	border:0;
	margin:0;
	background:none;
	position:absolute;
	top:24px;
	left:165px;
	cursor:pointer;
}

#footer form em {
	position:absolute;
	top:55px;
	left:25px;
}

#footer em.resultaat {
	margin-left:25px;
	width:200px;
	display:block;
}

#footer #feedBack em {
	width:200px;
	font-size:90%;
	font-style:normal;
	line-height:1.2;
}

.vcard .url {
	display:none;
}

/*  index
-------------------------------------------- */
.b_index p.inleiding {
	position:absolute;
	top:138px;
	left:24px;
	width:445px;
	font-size:150%;
	line-height:1.65;
	padding-bottom:27px;
}

#inleiding {
	width:435px;
	padding:143px 10px 19em 24px;
}

.b_wie #inleiding {
	min-height:210px;
}

#inleiding p.inleiding {
	/*font-size:150%;
	line-height:1.65;*/
	font-weight:bold;
	padding-bottom:18px;
}

#inleiding p, #content #inleiding ul {
	font-size:110%;
	line-height:1.53;
	padding-bottom:20px;
}

#content #inleiding ul {
	margin-top:-20px;
	background-color:#fff;
	width:445px;
}

#nieuws {
	width:190px;
	padding:114px 0 17em 525px;
	min-height:475px;
}

#nieuws li {
	padding-bottom:2px;
	background-color:#fff;
}

#nieuws ul {
	margin-top:7px;
}

#nieuws em {
	color:#545454;
	font-style:normal;
	background-color:#fff;
	margin-bottom:14.7px;
	display:block;
	font-size:92%;
}

#nieuws p em {
	color:#3c3c3c;
	font-style:italic;
	background:none;
	margin-bottom:0;
	display:inline;
}

#werk {
	width:202px;
	position:absolute;
	top:113px;
	left:775px;
}

.b_wie #werk {
	top:137px;
}

#werk ul {
	padding:11px 2px 0 0;
	background-color:#fff;
	
}

#werk ul img {
	background:url(../img/img_bg.gif) 0 0 no-repeat;
	padding:1px 3px 3px 1px;
}

#werk li {
	height:125px;
	margin-bottom:25px;
	position:relative;
}

#werk li a {
	color:#fff;
	text-decoration:none;
	position:absolute;
	top:102px;
	left:2px;
	background:url(../img/werk_pijl.gif) bottom right no-repeat;
	display:block;
	padding:2px 15px 5px 5px;
	border:none;
	font-size:95%;
}

#werk li a:hover,#werk li a:active {
	border:none;
	text-decoration:underline;
	color:#fff;
}

/*  vervolgpagina's
-------------------------------------------- */
.b_werk #plaatjes {
	min-height:400px;
	width:450px;
	padding:96px 0 18em 25px;
}

.b_werk #plaatjes img {
	display:block;
	padding-top:25px;
	background-color:#fff;
}


#omschrijving {
	width:200px;
	position:absolute;
	top:116px;
	left:525px;
}

#omschrijving h1, #omschrijving h2, #klanten h1, #omschrijving em {
	font-weight:bold;
	font-style:normal;
}

#omschrijving h1 {
	margin-bottom:5px;
}

#omschrijving h2 {
	margin-bottom:5px;
	line-height:140%;
}

#omschrijving em {
	display:block;
	margin-bottom:7px;
}

#omschrijving p em {
	display:inline;
	margin-bottom:0;
	font-weight:normal;
	font-style:italic;
}

#omschrijving p {
	padding:1em 10px 0 0;
	line-height:1.4;
}

#omschrijving ul, #omschrijving ol {
	background-color:#fff;
	padding:2px 0 2px 0;
}

#klanten {
	width:200px;
	position:absolute;
	top:146px;
	left:525px;
}

#klanten h1 {
	padding:0 10px 0 0;
}

#klanten ul {
	background-color:#fff;
	margin-top:15px;
	padding-bottom:5px;
}

#omschrijving ul li, #klanten li {
	background:url(../img/link_bullet.gif) 0 4px no-repeat;
	padding:0 10px 4px 12px;
}

#omschrijving ol li {
	list-style:outside decimal;
	margin-left:1.5em;
}

#omschrijving li a, #klanten li a {
	color:#797979;
	border:none;
}

#omschrijving li a:hover, #klanten li a:hover {
	color:#797979;
	border-bottom:1px dotted #797979;
}

#portfolio {
	width:202px;
	position:absolute;
	top:111px;
	left:775px;
}

#portfolio h3 {
	clear:left;
	margin:0 0 12px -1px;
	height:20px;
	padding:0;
	font-weight:bold;
}

#portfolio h3:first-child {
	margin-top:5px;
}

#portfolio ul {
	padding:0 0 15px 0;
	float:left;
	margin-bottom:3px;
}

#portfolio img {
position:relative;
}

#portfolio ul li {
	margin:0;
	height:49px;
	width:49px;
	float:left;
	background:url(../img/portfolio_bg.gif) 0 0 no-repeat;
	padding:1px 0 0 1px;
	position:relative;
}

#portfolio li a {
	border:none;
	height:49px;
	width:49px;
	position:absolute;
	top:-1px;
	left:-1px;
	text-indent:-5000px;
	z-index:1000;
}

#portfolio li a.active {
	background:transparent url(../img/pijltje.png) 32px 32px no-repeat;
}

#portfolio li a:visited {
	background:transparent url(../img/vinkje.png) 32px 32px no-repeat;
}

.b_404 h1 {
	font-size:150%;
	line-height:1.65;
	padding-bottom:27px;
}

#contactform {
	width:304px;
	position:absolute;
	top:145px;
	left:525px;
	background-color:#fff;
}

#contactform h1, h2 {
	font-weight:bold;
}

#contactform em {
	display:block;
	margin-bottom:17px;
}

#contactform div {
	position:relative;
	height:50px;
}

#contactform button {
	display:inline;
	border:0;
	margin:10px 0 0 93px;
	background:none;
	cursor:pointer;
	float:left;
	clear:both;
}

#contactform label {
	display:block;
	position:absolute;
	top:0;
	left:0;
}

#contactform input {
	float:right;
	clear:right;
	width:200px;
	border:1px solid #545454;
	font:.9em/1.4 Verdana, Arial, Helvetica, sans-serif;
	padding:2px;
}

#contactform textarea {
	float:right;
	clear:right;
	width:200px;
	height:160px;
	border:1px solid #545454;
	font:.9em/1.4 Verdana, Arial, Helvetica, sans-serif;
	padding:2px;
}

#contactform input:focus, #contactform textarea:focus {
	background-color:#FFF8EC;
}

#contactform #error {
	position:absolute;
	top:45px;
	left:315px;
	background-color:#fff;
	font-size:90%;
	line-height:1.3;
	width:75px;
	height:auto;
	color:#ea7208 !important;
}

#contactform #error p {
	color:#ea7208 !important;
}

#contactform #error em, #contactform #error h2 {
	display:block;
	margin:5px 0;
}

#contactform #error h2 {
	
	
}

#contactform label.foutje {
	color:#ea7208;
}

#contactform input.foutje, #contactform textarea.foutje {
	border-color:#ea7208;
}

#map {
	height:350px;
	width:425px;
}

#qr_img {
	margin-top:7px;
}

/* Tooltips in het portfolio */
body div#toolTip { 
	position:absolute;
	z-index:1000;
	width:auto;
	min-height:1em;
	padding-top:5px;
}

body div#toolTip p { 
	margin:0;
	background:#ea7208;
	padding:3px 6px 3px 6px;
	color:#fff;
	font-size:94%;
	line-height:1.2;
}