body {  margin:0;padding:0;background: #FFF url("/images/body.bg.jpg") top left repeat-x;text-align:center;margin:0;font-family:Verdana, Arial, Helvetica, sans-serif;font-size: 11px;color:#569AA9; }
img { border:0;}

a { text-decoration:none;color:#569AA9; font-weight:bold;}
a:hover { text-decoration:underline;color: #FF9900;}

#wrapper { text-align:left;margin:20px auto 0 auto;width: 940px;text-align:left;padding:0;clear:both; }

#header { height: 138px; clear:both; position:relative; margin-bottom: 10px;}
#header h1 { font-size: 30px;display:block; position:absolute;right:0; top:-23px; background:#FFF; height: 36px;color:#569AA9;padding: 91px 10px 0 10px; text-transform: uppercase; font-weight:normal; font-family: Century Gothic, Lucida Sans, Arial }

#logo { float:left; }



#blockmain { width: 710px; float:right; }

/* menu
------------------------------------------------------------- */
#menu { float:left; display:block; width: 172px; background: #FFF; padding-bottom: 180px; padding-left: 8px;}
#mainnav { overflow:hidden;list-style:none;margin:0;padding:0; }
#mainnav a { float: left; padding: 42px 0 0 0; overflow: hidden;width: 164px; height: 0px !important; height /**/: 42px; /* for IE5/Win only */}
#mainnav li { list-style:none;margin:0;padding:0; width: 164px; height: 42px;}
#mainnav a:hover,#mainnav a.active, #mainnav a.selected,#mainnav a.selected:hover {
	background-position: 0 -42px;
}

#blockmain ul { list-style:none;margin:0;padding:0;}
#blockmain ul li { padding: 8px 0 8px 23px;background:url("/images/li.gif") 6px 8px no-repeat;}
#blockmain ul li a { text-decoration:none;}
#blockmain ul li a:hover { text-decoration:underline;}

/* submenu
------------------------------------------------------------- */
#submenu { background: #FFF; width: 100%; height: 27px; margin-bottom: 10px; }

ul#subnav { position: relative;overflow: hidden;list-style: none;margin: 1px;padding: 0;}
ul#subnav a { float: left; padding: 25px 0 0 0; overflow: hidden; height: 0px !important; height /**/: 25px; /* for IE5/Win only */}
ul#subnav li { display: inline; list-style: none; margin:0;
	padding:0;
	height: 25px;

}
#subnav a:hover,#subnav a.active, #subnav a.selected,#subnav a.selected:hover {
	background-position: 0 -25px;
}

#li-home a {background: url("/images/nav/home.gif") top left no-repeat;}
#li-referentiespersector a {background: url("/images/nav/referentiespersector.gif") top left no-repeat;}
#li-referentiesperproductgroep a {background: url("/images/nav/referentiesperproductgroep.gif") top left no-repeat}
#li-vacatures a {background: url("/images/nav/vacatures.gif") top left no-repeat;}
#li-contact a {background: url("/images/nav/contact.gif") top left no-repeat;}

#li-bedrijf a {background: url("/images/nav/bedrijf.gif") top left no-repeat;width: 56px;}
#li-historiek a {background: url("/images/nav/historiek.gif") top left no-repeat;width: 74px;}
#li-productie a {background: url("/images/nav/productie.gif") top left no-repeat;width: 79px;}

#li-kantoren a {background: url("/images/nav/kantoren.gif") top left no-repeat;width: 74px;}
#li-bankenwinkelinrichtingen a {background: url("/images/nav/bankenwinkelinrichtingen.gif") top left no-repeat;width: 169px;}
#li-scholen a {background: url("/images/nav/scholen.gif") top left no-repeat;width: 240px;}
#li-woninginrichtingen a {background: url("/images/nav/woninginrichtingen.gif") top left no-repeat;width: 145px;}
#li-renovaties a {background: url("/images/nav/renovaties.gif") top left no-repeat;width: 76px;}

#li-balies a {background: url("/images/nav/balies.gif") top left no-repeat;width: 47px;}
#li-kastenwanden a {background: url("/images/nav/kastenwanden.gif") top left no-repeat;width: 103px;}
#li-designkeukens a {background: url("/images/nav/designkeukens.gif") top left no-repeat;width: 102px;}
#li-rustiekekeukens a {background: url("/images/nav/rustiekekeukens.gif") top left no-repeat;width: 114px;}
#li-badkamers a {background: url("/images/nav/badkamers.gif") top left no-repeat;width: 77px;}
#li-dressings a {background: url("/images/nav/dressings.gif") top left no-repeat;width: 71px;}
#li-buitenschrijnwerk a {background: url("/images/nav/buitenschrijnwerk.gif") top left no-repeat;width: 126px;}
#li-poorten a {background: url("/images/nav/poorten.gif") top left no-repeat;width: 63px;}


#blockcontent { background: #FFF; padding: 22px; float:left; width: 666px;}
#blockcontent p { line-height: 1.6em; }

#thumbnails { position:absolute; margin: 250px 0 0 310px;}
#footer { clear:both;text-align:right;width: 940px;margin:0 auto;color:#9AC2CB;font-size: 9px;}
#footer a { color: #9AC2CB;}


.cbox { padding: 0 5px;}
.col { float:left; width: 160px;}
p.small { font-size: 10px;color:#008080; }

/* HEADERS */
h1 {font-size: 15px;margin:3px 0;padding:3px 0;}
h1 a { }
h1 a:hover { color:#B8DEE1;text-decoration:none;}

h2 { color: #FF9900; font-size: 120%; margin-bottom: 0;}
.tp {}

#content { float:left; width: 245px; }
#extra { float: right; width: 400px;}

.picl img { border: 5px solid #569AA9; width: 390px;height: 260px; overflow:hidden;  }
.pics img { margin: 5px 5px 0 0;padding:0; border: 3px solid #569AA9;}
.pics-last img {margin:5px 0 0 0; padding:0; border: 3px solid #569AA9;}
.pics img.last { margin:5px 0 0 0; padding:0; border: 3px solid #569AA9; }
img.pic { border: 5px solid #569AA9; }

.readmore { display:block; color:#466256; font-size:9px; text-align:right; }


/* form 
------------------------------------------------------------- */

/* 
	The following information must not be removed:
	Awesome Form v2 CSS
	Written by: Paul Armstrong, Paul Armstrong Designs
	Site: http://paularmstrongdesigns.com
	Example & Documentation: http://paularmstrongdesigns.com/examples/css/awesome-form.html
	Thu Jun 22 22:38:54 2006

	Special thanks to Zach Johnson for helping and pushing me to make the changes.
	Site: http://tech.no.logi.es (those aren't dots, they are diamonds)

	This work is licensed under a Creative Commons Attribution-ShareAlike 2.5 License
	http://creativecommons.org/licenses/by-sa/2.5/
*/


/*
	In the following section, many of the values must be changed in reference to another.
	Items labeled as 'subjective' are not dependent and may be easily changed as you see fit.
*/

div.error { display:block;padding: .5em;margin-bottom: 1em; background: #FFF1F1}
div.error ul li { font-weight:bold; margin:0;padding:0; }
form.awesome fieldset { border: 0;}
form.awesome legend {display:none;}
form.awesome input.error { background: #FF9999; color: #FFF;}
form.awesome input, form.awesome textarea { font-family: Arial, Helvetica, sans-serif; }
form.awesome label { 
	width: 100px; /* label width *//* label margin = (input left margin) - (label width) */
	margin-right: 10px; /* label margin */
}
form.awesome label.long, form.awesome p.label {
	margin-left: 120px; /* subjective */
	width: 390px; /* (textarea width) + (label width) + (label margin) - (left margin) */
}
form.awesome label span {
	color: #900; /* color of required asterisk */
}
form.awesome input, form.awesome textarea, form.awesome select {
	margin-left: 120px; /* (label width) + (label margin) */
	width: 150px; /* subjective */
}
form.awesome textarea { 
	width: 150px; /* subjective, recommend: (3/2)(input width) */
}
form.awesome p.desc {
	margin-left: 210px; /* (label width) + (label margin) */
}
form.awesome .checks label {
	margin-left: 220px; /* (label width) + 2(label margin) */
}
form.awesome .checks input {
	margin-left: 210px; /* (label width) + (label margin) */
}

/*
	The following makes Internet Explorer 6.x play nicely. 
	These fix the double float margin bug.
*/
* html form.awesome .checks input { 
	margin-left: 105px;  /* (1/2)((label width) + (label margin)) */
}
* html form.awesome .checks label { 
	margin-left: 210px; /* (label width) + (label margin) */
	height: 1em; 
}


/*********************************************************************************
	DO NOT EDIT BELOW THIS LINE
*********************************************************************************/

form.awesome {
	margin: 0 0 1em;
}

form.awesome label {
	float: left;
	text-align: right;
	padding-top: 0.2em;
	font-weight: bold;
	font-size: 1em;
}

form.awesome label:after { 
	content: ":"; 
}

form.awesome label.long {
	float: none;
	display: block;
	text-align: left;
}

form.awesome label.long:after {
	content: "";
}

form.awesome input, form.awesome textarea, form.awesome select {
	display: block;
	margin-bottom: -0.5em;
}
form.awesome select[multiple="multiple"] {
	margin-left: 0px;
}
form.awesome br { 
	clear: left;
} 

form.awesome input[type="radio"], form.awesome input[type="checkbox"], 
form.awesome input[type="hidden"] { 
	width: auto; 
	height: 0.8em; 
	border: 0;
}

form.awesome input[type="hidden"] {
	display: none;
}

form.awesome p.desc {
	display: block;
	margin-top: -0.4em;
	margin-bottom: 1em;
	font-style: italic;
	font-size: 0.9em;
}

form.awesome .checks label {
	float: none;
	width: auto;
	clear: none;
	display: block;
	text-align: left;
	height: 2em;
	padding-top: 0;
	margin-bottom: -1em;
}

form.awesome .checks label:after { 
	content: ""; 
} 

form.awesome .checks input {
	float: left;
	text-align: right;
	margin-bottom: 0.5em;
	width: auto;
}
/*
	I found my own IE CSS display bug. I call it the "IE sucks, so it redraws the top border all over the fieldset like a jerk bug."
*/
* html form.awesome input, * html form.awesome textarea, * html form.awesome select,
* html form.awesome .checks input, * html form.awesome .checks label, 
* html form.awesome p.desc {
	margin-top: 0;
	margin-bottom: 0;
}
* html form.awesome fieldset br {
	line-height: 0.5em;
	font-size: 0.5em;
}

#lightbox{
	position: absolute;
	top: 40px;
	left: 0;
	width: 100%;
	z-index: 100;
	text-align: center;
	line-height: 0;
	}

#lightbox a img{ border: none; }

#outerImageContainer{
	position: relative;
	background-color: #fff;
	width: 250px;
	height: 250px;
	margin: 0 auto;
	}

#imageContainer{
	padding: 10px;
	}

#loading{
	position: absolute;
	top: 40%;
	left: 0%;
	height: 25%;
	width: 100%;
	text-align: center;
	line-height: 0;
	}
#hoverNav{
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 10;
	}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
	width: 49%;
	height: 100%;
	background: transparent url("/images/lightbox/blank.gif") no-repeat; /* Trick IE into showing hover */
	display: block;
	}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url("/images/lightbox/prev.gif") left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url("/images/lightbox/next.gif") right 15% no-repeat; }


#imageDataContainer{
	font: 10px Verdana, Helvetica, sans-serif;
	background-color: #fff;
	margin: 0 auto;
	line-height: 1.4em;
	}

#imageData{
	padding:0 10px;
	}
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 26px; float: right;  padding-bottom: 0.7em;	}	
		
#overlay{
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	width: 100%;
	height: 500px;
	background-color: #0C3F87;
	filter:alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	}
	

.clearfix:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
	}

* html>body .clearfix {
	display: inline-block; 
	width: 100%;
	}

* html .clearfix {
	/* Hides from IE-mac \*/
	height: 1%;
	/* End hide from IE-mac */
	}