/* -------------------------------------------------------------- 
  
   Loosely based on -- Good old simple and semantic Boilerplate 
   http://code.google.com/p/css-boilerplate/
   
-------------------------------------------------------------- */

/* @group reset ---------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, 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 { line-height: 1.6; background: #fff; color: #7d7d7d; margin: 0 0 1em; }
table { border-collapse: collapse; border-spacing: 0; }
caption, th, td { text-align: left; font-weight:400; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; }
blockquote, q { quotes: "" ""; }
img { border: none; }
input,textarea { margin: 0; }

/* Removes Firefox imposed outline */
a { outline: none; }

/* Clearing floats without extra markup  */
.wrapper { display: inline-block; }
.wrapper:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .wrapper { height: 1%; }
.wrapper { display: block; }
/* @end reset ----------------------------------------------------- */

/* @group typography ---------------------------------------------- */
body { font-size: 100%; }

/* Default fonts and colors. */
body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: Arial, sans-serif; margin-bottom: 0.125em; line-height: 1.5em; }

/* Headings
-------------------------------------------------------------- */

h1,h2,h3,h4,h5,h6 { color: #036; line-height: 1.33; }

h1 { font-size: 1.25em; }
h2 { font-size: 1.125em; }
h3 { font-size: 1em; }
h4 { font-size: 0.875em; }
h5 { font-size: 0.75em;  }
h6 { font-size: 0.625em;}

h5 a{ color: #36C; }
h2.crosseyed { color: #f60; margin-bottom: 0.125em; }

/* Text elements
-------------------------------------------------------------- */

p { margin: 0 0 1em; font-size: 0.875em;}

ul, ol { margin: 0 1.125em 1.125em; font-size: 0.875em; }
ul.level_1, ul.level_2, ul.level_3, ul.level_4, ul.level_5 { margin-bottom: 0;} /* sitemap */
ul { list-style-type: circle; }
ol { list-style-type: decimal; }

dl { margin: 0 0 1.125em 0; color: black; }
dl dt { font-weight: bold; }
dl dd { margin-left: 1.125em; }

ul#sitetest li {
	height: 20px;
	line-height: 20px;
	text-indent: 18px;	
	background: url(../img/bullet.gif) no-repeat 5px 55%;	
}
ul#av { font-size: 0.75em; }
ul#av h6 { font-size: 1em; color: #f60; margin: 1em 0 0; }

a { color: #5f87ab; text-decoration: none; }
a:hover { text-decoration: underline; }
dt a { color: black; text-decoration: underline;}

blockquote { margin: 1.125em; }
strong { font-weight: bold; }
/* @end typography */

/* @group default styles */
/* Tables
-------------------------------------------------------------- */

table { margin-bottom: 0.5em; }
th { border-bottom: 1px solid #ddd; font-weight: bold; }
td { border-bottom: 1px solid #ddd; }
th,td { padding: 4px 10px 4px 0; }
tfoot { font-style: italic; }

/* Some default classes
-------------------------------------------------------------- */

.small { font-size: .625em; margin-bottom: 1em; line-height: 1.4em; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.quiet { color: #999; }

.hide { display: none; }
.highlight { background: #ffc; }

.top { margin-top: 0; padding-top: 0; }
.bottom { margin-bottom: 0; padding-bottom: 0; }
.clear { clear: both; }

/* Site
-------------------------------------------------------------- */
html { background: #fff;}

div.flashdata {
	width: 268px;
	padding: 10px 0;
	margin-top: 20px;
	background-color: #f60;
	text-align: center;
	color: white;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border: 1px solid #f60;
}
div.flashdata.testform { width: 150px; margin: 4px 0 0 20px; }

/* @end default styles */

/* @group Site-layout ------------------------------------------------ */
div#header {     
	position: relative;
    margin: 15px auto 20px;
    width: 830px;
    height: 343px;
    background: transparent url(../img/header.png) no-repeat left bottom;
    /* overflow: hidden; */ 
}
#header h1, #header h5, #header h6 { color: white; }
img#headerTxt { position: absolute; left: 25px; top: 36px; }
/*
div#header div#hoofdtekst {  
	position: absolute; 
	left: 35px; 
	top: 100px;
	width: 460px;
	color: white;
	}
	div#hoofdtekst p, div#hoofdtekst h1 { letter-spacing: 0.0156em; }
	div#hoofdtekst p { line-height: 1.6; font-size: 1em;}
	div#hoofdtekst ul { list-style: none; }
	#hoofdtekst ul a {color: white; text-decoration: underline; }
*/	
div#header img#sitename {position: absolute; left: 10px; top: 0px;}
div#header #topNavigatie {
	position: absolute;
	top: 8px;
	right: 20px;
	width: auto;
	margin: 0;
	white-space: nowrap;
	}
	div#header ul#topNavigatie { margin: 0; padding: 0; }
	#topNavigatie li { 
		float: left; 
		display: inline; 
		margin: 0 2px 0 0;
		padding: 0;
	}
	#topNavigatie li.active {background: #6087AB url(../img/tab_right.png) no-repeat right top;}
	#topNavigatie a { 
		float: left;
		color: #FF6600; 
		font-size: 14px; /* woehaha */
		padding: 5px 7px 0; 
		height: 23px;
	}
	#topNavigatie a.active{ background: url(../img/tab_left.png) no-repeat; color: white; }

div#header #portfolio { 
	position: relative;
	left: 519px;
	top:  50px;
	padding: 10px 10px 10px 35px;
	width: 252px;
	height: 253px;
	color: white;
	background: url(../img/portfolio.gif) no-repeat right top;
	overflow: hidden; 
	}
	#portfolio h1 { letter-spacing: 0.0625em; margin: 0 15px 0 0; display: inline; }
	#portfolio h5 { font-weight: bold; margin: 3px 0 0; }
	#portfolio h6 { display: inline; position: relative; bottom: 2px; margin: 0 0 0 5px;}
	#portfolio h5#firstline { font-weight: normal; margin:0 0 5px;}
	#portfolio img { float: left; clear: left; display: block; margin: 0 10px 5px 0;}
	#portfolio p {	line-height: 1.3; font-size: 0.75em; color: #b9b9b9; margin: 1px 0; }
	
#contactgegevens { margin-top: 10px; }
div#midden {
	position: relative;
	width: 830px;
	margin: 20px auto 10px;
	}
	div#midden #aanvullendeInfo {
		float: left;
		position: relative;
		width: 220px;
		padding-left: 10px;
		}
		#aanvullendeInfo img#test { padding: 15px 0 0 15px; display: block; }
		#aanvullendeInfo img#shade{ padding: 0 0 15px 15px;}
		#aanvullendeInfo img.port { margin: 10px 0; padding: 0; }
		#aanvullendeInfo div.portfolioVoorbeeld { float: left; height: 187px; width: 200px; margin: 0 0 0px 20px; padding: 7px 0 15px; border-bottom: 1px solid silver; }

	div#midden #brood {
		float: right;
		width: 540px;
		min-height: 200px;
		padding-right: 10px;
		background-color: white;
		}
		#brood ul { list-style: none; }
		#brood ul a {
			display: block;
			height: 20px;
			line-height: 20px;
			text-indent: 18px;	
			text-decoration: underline;
			background: url(../img/bullet.gif) no-repeat 5px 55%;
		}
		#brood ul a:hover{text-decoration: none;}
		#brood ul#contactgegevens a {background: none; text-indent: 0;}
		#brood div.fold { padding: 10px 15px 0; }
		.noflash #brood div.fold { display: none; } 
		#brood .inlineImg { display: inline; margin: 15px 5px 5px 0; }
		#brood a { text-decoration: underline; }
		#brood a:hover { text-decoration: none; }
	
.bovenste { border-top: 1px solid silver; }
.portfolioText{ margin: 0 0 0px; padding: 15px 0 5px; min-height: 189px; border-bottom: 1px solid silver; }

div#pager { width: 220px; }
ul#pagination { float: right; margin: 8px 0 20px; clear: left; list-style-type: none; }
	#pagination li { float: right; margin-left: 6px;}
	ul#pagination a { 
		display: block;
		width: 70px;
		height: 18px;
		line-height: 18px;	
		font-size: 12px;
		color: white;
		background: #fff url(../img/nav_elements/volg_vorig.gif) no-repeat left top;
	}

a#volgende { padding:  0 10px 0 0; text-align: right; }
a#vorige { padding: 0 0 0 10px; }


div#footer {
	margin: 0 auto;
	position: relative;
	padding-left: 20px;
	width: 810px;
	height: 153px;
	background: transparent url(../img/cifooter.jpg) no-repeat left top;
}
div#footer a { color: white; }
div#footer a.footerlinks { 
	height: 1em; 
	line-height: 1em; 
	float: left; 
	margin: 100px 0 0 0; 
	font-size: 0.75em; 
	border-right: 1px solid #fff; 
	padding: 0 5px;
	text-decoration: underline;
}
div#footer a.footerlinks:hover { text-decoration: none;}
div#footer a#footercontact { text-decoration: underline; }
div#footer a#footercontact:hover { text-decoration: none; }
div#footer a#last { border: none; }
div#footer #contact { position: absolute; right: 2px; top: 15px; width: 160px; color: #036;} 
div#footer #contact p { font-size: 0.75em; }
/* @end Site-layout */

/* @group forms */
form#site_testform {
	width: 205px; 
	position: relative; 
	padding: 0;
	margin-bottom: 10px;
	font-size: 0.8725em; 
	background: #fff url(../img/testform_bg.gif) no-repeat left bottom;
}
#site_testform fieldset { margin: 0; padding: 5px 10px; background: url(../img/testform_bg_top.gif) no-repeat left top; }
#site_testform input.text { width: 175px; line-height: 1.4em; padding: 1px; }
fieldset { position: relative; padding: 0; margin: 10px 0; }
label { display: block; margin: 10px 0 0 0; line-height: 1em; color: #036;}
textarea { width: 320px; height: 150px; }
input.text { width: 180px; height: 1.1em; }

.form_errors { width: 260px; margin: 10px 0; padding: 5px 0 5px 5px; border: 1px solid red; }
.form_errors p { font-size: 0.8em; margin-bottom: 0.2em; font-style: italic; }
#aanvullendeInfo .form_errors { width: 194px; padding-left: 8px; -moz-border-radius: 5px; -webkit-border-radius: 5px; }
#niet_invullen, span#forminv { display: none;}

/* @end forms */

/* @group jquery */
.itemsContainer { position: relative; overflow: hidden; width: 262px; height: 210px; }
.itemsContainer div.items { position: absolute; height: 600px; }
.itemsContainer div.item { float: left; clear: left; width: 252px; margin: 0 10px 4px 0; }

#portfolio a.navigation {
	position: absolute; 
	width: 18px; 
	height: 18px;
	left: 2px;
}

a.prev { top: 60px; background: url(../img/nav_elements/up.gif) no-repeat left top; cursor: pointer; }
a.prev:hover { background-position: 0 -18px; }
a.next { top: 244px; background: url(../img/nav_elements/down.gif) no-repeat left top; cursor: pointer; }
a.next:hover { background-position: 0 -18px; }
a.disabled {display: none;}
#brood a#naarboven {	
	float: right;
	background: url(../img/up_arrow.gif) no-repeat right top;
	height: 12px;
	width: 12px;
}
#brood a#naarboven:hover { background-position: right -14px;}

#brood ul.unfold a.current {text-decoration: none; font-style: italic; }
#brood ul.unfold { width: 340px; }
/* @end jquery */