@import url('shadowbox.css');
/* reset css */
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, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, 
form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; background: transparent; }
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q {	quotes: none; }
ins { text-decoration: none; }
del { text-decoration: line-through; } 
table { border-collapse: collapse; border-spacing: 0; }
q:before, blockquote:before { content: ''; }
q:after, blockquote:after 	{ content: ''; }


/* site css */
html {
    background			: #e0e4e1 url(../img/html-bg.png) repeat left top;
}

body {
	font				: 0.75em Verdana, Arial, sans-serif;
	background			: url(../img/body-bg.png) repeat-x left top;
}

.toegankelijkheid {
	position			: absolute;
	left				: -999em;
}

.clear {
	clear				: both;
}
	

/* --------------------------------	*/
/* background					 	*/
/* --------------------------------	*/
#background {
	background-image	: url(../img/background/homepage.jpg);
	background-repeat	: no-repeat;
	background-position	: center 83px;
}

.pagina-groenprojecten #background 	{ background-image: url(../img/background/groenprojecten.jpg); }
.pagina-ontwerp #background 		{ background-image: url(../img/background/ontwerp.jpg); }
.pagina-onderhoud #background 		{ background-image: url(../img/background/onderhoud.jpg); }
.pagina-visie #background 			{ background-image: url(../img/background/visie.jpg); }
.pagina-links #background 			{ background-image: url(../img/background/links.jpg); }
.pagina-contact #background 		{ background-image: url(../img/background/contact.jpg); }


/* --------------------------------	*/
/* container					 	*/
/* --------------------------------	*/
#container {
	position			: relative;
	width				: 984px;
	margin				: 0 auto;
}


/* --------------------------------	*/
/* header						 	*/
/* --------------------------------	*/
#header {
	position			: relative;
	z-index				: 20;
	height				: 83px;
}

#header a.logo {
	position			: absolute;
	top					: 0;
	left				: 14px;
}


/* --------------------------------	*/
/* menu							 	*/
/* --------------------------------	*/
#menu {
	position			: absolute;
	top					: 0;
	left				: 260px;
	z-index				: 10;
	font				: 1.2em 'Century Gothic', sans-serif;
}

#menu > li {
	float				: left;
	height				: 83px;
}

#menu > li > a {
	float				: left;
	position			: relative;
	z-index				: 10;
	height				: 48px;
	padding				: 35px 5px 0 5px;
	text-decoration		: none;
	text-transform		: uppercase;
	color				: #2D2B2C;
}

#menu > li > a span {
	display				: block;
	padding				: 5px 10px 5px 5px;
}

#menu > li > a strong {
	font-weight			: normal;
	font-size			: 0.85em;
	color				: #FFF;
}

#menu > li:hover > a span,
#menu > li.actief > a span {
	background			: #97BE0D;
}

/* Submenu */
#menu > li > div {
	display				: none;
	position			: absolute;
	top					: 83px;
	left				: -246px;
	z-index				: 5;
	width				: 956px;
	background			: #2D2B2C;	
}

#menu > li > div ul {
	position			: relative;
	width				: 180px;
	padding				: 5px;
	background			: #202020;	
}

#menu > li > div li {
	margin				: 0 0 1px 0;	
}

#menu > li:hover > div,
#menu > li.hover > div {
	display				: block;
}

#menu > li > div a {
	display				: block;
	padding				: 3px 3px 3px 10px;
	text-decoration		: none;
	word-wrap			: break-word;
	color				: #FFF;	
}

#menu > li > div a:hover,
#menu > li > div li.actief a {
	background			: #97BE0D;
}

/* Subbalk */
#header .subbalk {
	position			: absolute;
	left				: 14px;
	top					: 83px;
	z-index				: 5;
	width				: 956px;
	height				: 25px;
	background			: #2D2B2C;
}


/* --------------------------------	*/
/* main							 	*/
/* --------------------------------	*/
#main {
	position			: relative;
	z-index				: 10;
	min-height			: 500px;
	padding				: 0 14px 14px 14px;
	background			: #FFF;
}


/* --------------------------------	*/
/* content						 	*/
/* --------------------------------	*/
#content {
	position			: relative;
	padding				: 15px 0 20px 28px;
	line-height			: 1.6em;
}

#content h1 {
	margin				: 0 0 20px 0;
	font				: 2em 'Century Gothic', sans-serif;
}

#content h2 {
	margin				: 0 0 20px 0;
	font				: 1.8em 'Century Gothic', sans-serif;
	color				: #939393;
}

#content a 			{ color: #008a2f; }
#content a:hover 	{ color: #C00; }

/* iwes opmaak */
#content .iwes a:visited 	{ color: #999; }
#content .iwes blockquote {
	margin				: 0 0 10px 30px;
}

#content .iwes ul {
	margin				: 0 0 10px 30px;
	list-style			: square;
}

#content .iwes ol {
	margin				: 0 0 10px 30px;
	list-style			: decimal;
}

#content .iwes tr td {
	padding				: 0 0 0 5px;
}

#content .iwes tr td:first-child {
	padding				: 0;	
}

/* formulieren */
#content .formmodule h4 {
	display				: none;
}

#content .formmodule ul {
	margin				: 0;
	list-style			: none;
}

#content input, 
#content select, 
#content textarea {
	margin				: 1px;
	padding				: 2px;
	border				: 1px solid #CCC;
	font				: 1em Verdana, Arial, sans-serif;
}

#content textarea {
	overflow			: auto;
}

#content input:hover,
#content select:hover,
#content textarea:hover {
	border				: 1px solid #97BE0D;
}

#content input:focus,
#content select:focus,
#content textarea:focus {
	margin				: 0;
	border				: 2px solid #97BE0D;
}

#content input[type=radio], 
#content input[type=checkbox] {
	padding				: 0;
	border				: none;
}

#content input.button,
#content button,
#content input[type=submit],
#content input[type=button]{
	margin				: 10px 0;
	padding				: 3px 10px;
	font-weight			: bold;
	background			: #97BE0D;
	font-size			: 1.1em;
	color				: #000;
	border				: 1px outset #97BE0D;
	cursor				: pointer;
}

#content input.fout, 
#content textarea.fout {
	margin				: 0;
	border				: 2px solid #F00;
}

#content .melding, 
#content label.fout {
	color				: #F00;
}

/* Errormelding */
#content .errormelding {
	padding				: 20px;
	border				: 4px solid #09C;
	font-weight			: bold;
	color				: #09C;
	background			: #ecf6f9;
}


/* --------------------------------	*/
/* Fotoslider					 	*/
/* --------------------------------	*/
#fotoslider {
	position			: relative;
	z-index				: 5;
	width				: 956px;
	height				: 660px;
}

#fotoslider ul {
	width				: 956px;
	height				: 660px;
	overflow			: hidden;
}

/* Titel */
#fotoslider .titel {
	position			: absolute;
	left				: 0;
	top					: 270px;
	z-index				: 20;
	width				: 400px;
	padding				: 15px;
	background			: #FFF;	
}

#fotoslider .titel h1,
#fotoslider .titel h2 {
	display				: inline;
	font				: 2.2em 'Century Gothic', sans-serif;
}

#fotoslider .titel h1 {
	display				: block;
}

#fotoslider .titel h2 {
	color				: #939393;
}

/* Navigatie (pijltjes) */
#main a.fotoprev,
#main a.fotonext {
	position			: absolute;
	top					: 170px;
	z-index				: 120;
	width				: 41px;
	height				: 41px;
	text-indent			: -900em;
	background			: url(../img/fotoslider-nav.png) no-repeat;
}

#main a.fotoprev {
	left				: -5px;
	background-position	: left top;
}

#main a.fotonext {
	left				: 948px;
	background-position	: right top;
}

#main a.fotoprev:hover 	{ background-position: left bottom; }
#main a.fotonext:hover	{ background-position: right bottom; }


/* --------------------------------	*/
/* Projectmenu					 	*/
/* --------------------------------	*/
#projectmenu {
	position			: absolute;
	left				: 14px;
	top					: 0;
	z-index				: 10;
	width				: 956px;
	height				: 188px;
	padding				: 500px 0 0 0;
	overflow			: auto;
	background			: url(../img/projectmenu-bg.png) repeat-x left 500px;
}

#projectmenu > ul {
	height				: 188px;
	padding				: 0 30px;
}

#projectmenu > ul > li {
	float				: left;
	position			: relative;
	width				: 171px;
	height				: 152px;
	padding				: 4px;
}

#projectmenu > ul > li h3 {
	width				: 171px;
	height				: 32px;
	padding				: 10px 0 0 0;
	overflow			: hidden;
	white-space			: nowrap;
	font				: 1.3em 'Century Gothic', sans-serif;
}

#projectmenu > ul > li > a {
	display				: block;
	position			: relative;
	width				: 153px;
	height				: 92px;
	overflow			: hidden;
	border				: 9px solid #FFF;
}

#projectmenu > ul > li > a img {
	position			: absolute;
	left				: 0;
	top					: 0;
}

#projectmenu > ul > li > a img.zw 	{ z-index: 5; }
#projectmenu > ul > li > a img.kleur { 
	display				: none;
	z-index				: 10; 
}

/* Actief */
#projectmenu > ul > li.actief {
	background			: #97BE0D;
}

#projectmenu > ul > li.actief img.kleur {
	display				: block;
}

#projectmenu > ul > li.actief h3 {
	color				: #FFF;
}

/* Hover */
#projectmenu > ul > li:hover {
	height				: 180px;
	background			: #97BE0D;
    overflow            : visible !important;
}

#projectmenu > ul > li:hover h3 {
	color				: #FFF;
}

#projectmenu > ul > li:hover > a {
	height				: 120px;
}

/* Submenu */
#projectmenu ul ul {
	display				: none;
	position			: absolute;
	left				: -1px;
	bottom				: 188px;
	width				: 169px;
	padding				: 5px 5px 10px 5px;
	border				: 1px solid #FFF;
	border-width		: 1px 1px 0 1px;
	background			: #2D2B2C url(../img/projectmenu-sub-bg.png) no-repeat center bottom;	
}

#projectmenu > ul > li:hover ul {
	/*display				: block;*/
}

#projectmenu ul ul li {
	padding				: 2px 0;	
}

#projectmenu ul ul a {
	display				: block;
	padding				: 3px 3px 3px 5px;
	text-decoration		: none;
	font				: 1em 'Century Gothic', sans-serif;
	color				: #FFF;
	background			: #444;	
}

#projectmenu ul ul a:hover {
	color				: #4f5b20;
	background			: #e2e4db;	
}

#projectmenu ul ul li.actief a,
#projectmenu ul ul li.actief a:hover {
	color				: #FFF;
	background			: #97BE0D;	
}

/* --------------------------------	*/
/* Projectdetail				 	*/
/* --------------------------------	*/
#projectdetail {
	position			: relative;
	z-index				: 5;
	width				: 956px;
	height				: 660px;
	background			: url(../img/projectdetail-bg.png) repeat-x left bottom;
}

#projectdetail #content {
	z-index				: 20;
	height				: 465px;
	padding				: 10px 0 20px 28px;
	overflow			: hidden;
}

#projectdetail .info {
	float				: left;
	width				: 520px;
	padding				: 20px 0 0 0;
    height              : 465px;
    overflow            : auto;
}

#projectdetail h1 {
	margin				: 0;
}

/* Foto's */
#projectdetail .fotos {
	float				: right;
	width				: 390px;
}

#projectdetail .fotos .thumbs {
	overflow			: hidden;
	padding				: 15px 0 0 0;
}

#projectdetail .fotos .thumbs li {
	float				: left;
	margin				: 0 0 0 15px;
}

#projectdetail .fotos .thumbs li:first-child {
	margin				: 0;
}

/* Projectmenu */
#projectdetail #projectmenu {
	left				: 0;
}


/* --------------------------------	*/
/* googlemaps					 	*/
/* --------------------------------	*/
iframe.googlemaps {
	overflow			: hidden;
	border				: 1px solid #000;
}

#googlemaps {
	width				: 898px;
	height				: 300px;
	font				: 1em Verdana, Arial;
	text-align			: left;
	color				: #000;
	background			: #EEE;
}

#googlemaps a {
	color				: #000;
}


/* --------------------------------	*/
/* footer						 	*/
/* --------------------------------	*/
#footer {
	position			: relative;
	width				: 994px;
	margin				: 0 auto;
	padding				: 20px 0;
}

/* Adres */
#footer address {
	float				: left;	
	width				: 200px;
	font				: 1.5em 'Century Gothic', sans-serif;
	text-align			: right;
	line-height			: 1.5em;
	color				: #4f5b20;
}

#footer address span.org {
	display				: block;
	position			: absolute;
	left				: -900em;
}

#footer address span,
#footer address a {
	text-decoration		: none;
	color				: #000;
}

#footer address a:hover {
	text-decoration		: underline;
}

/* Laatste projecten */
#laatste-projecten {
	float				: right;
	width				: 720px;
}

#laatste-projecten .info {
	float				: left;
	width				: 300px;
	line-height			: 1.6em;
}

#laatste-projecten h4 {
	margin				: 0 0 5px 0;
	font				: 1.6em 'Century Gothic', sans-serif;
	color				: #4f5b20;	
}

#laatste-projecten ol {
	float				: right;
	width				: 380px;
	height				: 110px;
}

#laatste-projecten li {
	display				: inline;
	float				: left;
	position			: relative;
	margin				: 0 0 0 15px;
}

#laatste-projecten li:hover {
	z-index				: 10;
}

#laatste-projecten li a {
	float				: left;
	width				: 110px;
	height				: 110px;
}

#laatste-projecten li img {
	border				: 9px solid #FFF;
}

#laatste-projecten li div {
	display				: none;
	position			: absolute;
	left				: -52px;
	bottom				: 103px;
	width				: 205px;
	padding				: 5px 5px 20px 5px;
	text-align			: center;
	color				: #FFF;
	background			: url(../img/tooltip-bg.png) no-repeat left bottom;
}

#laatste-projecten li:hover div {
	display				: block;
}

#laatste-projecten li div strong {
	display				: block;
	color				: #97be0d;
}


/* Colofon */
#colofon {
	clear				: both;	
	padding				: 10px 0;
	text-align			: right;
	color				: #898888;
}

#colofon a {
	text-decoration		: none;
	color				: #898888;
}

#colofon a:hover {
	text-decoration		: underline;
	color				: #000;
}