@import url(/include/css/editor.php);

body {
	text-align:center;
	}

#styleElement {
	position:absolute;
	top:60px;
	right:0;
	width:763px;
	height:275px;
	}

/* Layout */

#container {
	width:970px;
	margin:0 auto;
	text-align:left;
	position:relative;
	}

#logo {
	height:46px;
	padding:23px 0;
	margin-left:7px;
	}

#siteSwitch {
	background:url('/image/bg-switch.gif') right top no-repeat;
	display:block;
	width:318px;
	height:32px;
	top:0;
	right:0;
	position:absolute;
	padding-left:80px;
	}
#siteSwitch li {
	display:block;
	height:32px;
	width:120px;
	float:left;
	}
#siteSwitch #build { background-image:url('/image/switch-build-off.gif'); }
#siteSwitch #build.active { background-image:url('/image/switch-build-on.gif'); }
#siteSwitch #fire { background-image:url('/image/switch-fire-off.gif'); }
#siteSwitch #fire.active { background-image:url('/image/switch-fire-on.gif'); }
#siteSwitch a {
	display:block;
	background-position:center top;
	background-repeat:no-repeat;
	width:119px;
	height:32px;
	overflow:hidden;
	}
#siteSwitch a span {
	display:block;
	margin-top:-32px;
	}

#navigation {
	height:36px;
	width:630px;
	margin-left:8px;
	}


/* Intro text */

#intro {
	position:relative;
	width:635px;
	height:122px;
	padding-top:25px;
	}

#intro p {
	width:455px;
	margin-left:8px;
	line-height:1.8;
	font-weight:bold;
	}


/* Project module */

#projects {
	padding-left:15px;
	position:absolute;
	width:134px;
	height: 132px;
	padding-top:31px;
	top:0;
	right:0px;
	margin-right:-24px; /* Also see ie6.css */
	}
#projects #thumbs {
	position: absolute;
	top: 30px;
	}

#projects p {
	width:134px;
	}
#projects .readmore {
	position: absolute;
	bottom: 20px;
	right: 0;
	clear:both;
	background:url('/image/arrow.gif') right center no-repeat;
	width:10px;
	float:right;
	margin-right:2px;
	}
#projects .readmore a {
	display:block;
	text-indent:-999em;
	position:relative;
	margin-top:3px;
	}

#projects a.thumb {
	display:block;
	position:relative;
	float:left;
	width:38px;
	height:38px;
	margin:2px 2px 3px 2px;
	cursor: default;
	}
#projects a .hovereffect {
	display:none;
	visibility:hidden;
	position:absolute;
	width:34px;
	height:34px;
	top:0;
	left:0;
	border:2px solid #ffffff;
	overflow: hidden;

	}


/* #projects a:hover .hovereffect, */
#projects a.active .hovereffect {
	display:block;
	visibility:visible;
	}

#projects a img,
#fullImage {
	background: white;
	z-index: 1;
}
#fullImage img {
	display:block;

	}

#projects #fullImage {
	width:198px;
	height: 263px;
	margin-top: 2px;
	margin-left: 143px;
	/* position:absolute;
	top:33px;
	top:2px;
	left:150px;
	left:135px; */
	border:5px solid #ffffff;
	}

#projects div#title_bp {
	position: absolute;
	top: 280px;
	left: 163px;
	width: 198px;
	height: 22px;

	background: #FF0106;
		filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;

	z-index: 2;
}

#projects div#title_ab {
	position: absolute;
	top: 280px;
	left: 163px;
	width: 198px;
	height: 22px;

	background: #549ED3;
		filter:alpha(opacity=50);
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity: 0.5;

	z-index: 2;
}

p#title {

	position: absolute;
	top: 280px;
	left: 163px;
	width: 200px;

	color: white !important;
	z-index: 3;
}

/* Shadow */

#shadow {
	margin-top:5px;
	width:665px;
	float:left;
	}
#shadowtop {
	padding:8px 8px 0 8px;
	}
#shadowbottom {
	padding-bottom:7px;
	}


/* Content */

#content {
	border-width:5px;
	border-style:solid;
	padding:18px;
	overflow: auto;
	}


/* Producten */

#products {
	margin-top:172px;
	margin-left:3px;
	width:184px;
	padding:12px;
	float:left;
	}


#products h3,#products h2 {
	color:#ffffff;
	margin-top:15px;
	font-weight: bold;
	}

#products h1.kop_info {
	color: white;
}

#products p {
	color: white;
}

#products a {
	color: white;

}
/*
#products a:hover {
	text-decoration: underline;
}*/


/* Footer */

#footer {
	clear:both;
	margin:10px 0;
	margin-left: 7px;
	}


/* Splash */

#splash {
	width:656px;
	margin:144px auto 0 auto;
	}

.splashBox {
	width:319px;
	height:390px;
	background:url('/image/splash-shadow.gif') left bottom repeat-x;
	float:left;
	margin:3px;
	}

#splash .logo {
	height:55px;
	}
#splash .textbox {
	height:255px;
	position:relative;
	padding:20px 40px 0px 40px;
	text-align:left;
	}
#splash .textbox * {
	color:#ffffff;
	}

#build .textbox { background:#549ed3 url('/image/splash-build.gif') right top no-repeat; }
#fire .textbox { background:#fe0207 url('/image/splash-fire.gif') left top no-repeat; }

#splash .readmore a {

	position:absolute;
	width:200px;
	height:10px;
	bottom:33px;
	text-indent:-999em;
	}
#build .readmore a { background:url('/image/splash-button-build.gif') 1px 0px no-repeat; }
#fire .readmore a { background:url('/image/splash-button-fire.gif') 1px 0px no-repeat; }


/* Default styles */

.border	{border : 1px solid #000000;}

.height1 { /* als je een divje wilt gebruiken ipv pixel.gif dan dien je in IE deze class te gebruiken en daarnaast de juiste
				hoogte en breedte te geven, zonder deze class krijgt je altijd een aantal pixels onder een div */
	height:1px;
	line-height:1px;
	font-size:1px;
	overflow:hidden;
	}


/* 		VERTICAL ALIGN
Width en Height kunnen aangepast en/of via een
andere class toegewezen worden.

Moet altijd de volgende HTML hebben:
<div class="verticalalign">
<div>
<div>
	<!-- element dat gecentreerd moet -->
</div>
</div>
</div>
*/
.verticalalign { width:400px; height:300px; }
.verticalalign { display: table;  overflow: hidden; text-align:left; }
.verticalalign * { display: table-cell; vertical-align: middle; overflow:visible; }
.verticalalign * * { display:auto; vertical-align:none; }

/* Projects */
div#photos {
	padding-top: 10px;
	overflow: auto;
	padding: 0 0 5px 0;
}
div#photos .first {
	margin-left: 0 !important;
}


div#photos .photo {
	float: left;
	margin-top: 9px;
	margin-left: 19px;
	border: 2px solid #549ED3;
}

div#photos .bpphoto {
	float: left;
	margin-top: 9px;
	margin-left: 19px;
	border: 2px solid #FF0106 !important;
}

div#photos .photo a img, div#photos .bpphoto a img {
	display: block;
	border: none;
}


p.legend {
	font-weight: bold;
}

.generator_content_blok img {
	margin-right: 5px;
}
/*
.rood td p, .rood td {
	color: #FC7C62;
}

#id18 #content td {
	text-align: center;
}

#id18 #content td p, #id18 #content td h3, #id18 #content td h2, #id18 #content td h1 {
	text-align: left;
}*/

/* Contact */
div#route_ab, div#route_bp {
	overflow: auto; clear: both;
}

div#beschrijving {
	width: 200px;
	float: left;
	margin-right: 5px;
}

div#map {
	width: 200px;
	height: 200px;
	float: left;
	overflow: hidden;
}

div#route_ab div#map {
	border: 2px solid  #549ed3;
}

div#route_bp div#map {
	border: 2px solid #ff0106;
}

ol {
	list-style-type: decimal;
	list-style-position: inside;
	margin: 5px 0;
	margin-left: 15px;
}