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

/** =COLORS **
*/



/** =BASIC **/

body {
	background: #2eb396 url('/image/bg.jpg') repeat-x;
	}


/** =CLASSES **/

.clearfix {
	display: block;
	clear: both;
	}

.readmore {
	}
.readmore a {
	width: 110px;
	display: block;
	padding-right: 20px;
	margin-left: -2px;
	text-decoration: none;
	background: url('/image/readmore-right.png') no-repeat right top;
	}
.readmore a span {
	display: block;
	height: 22px;
	line-height: 22px;
	padding-bottom: 2px;
	padding-left: 15px;
	padding-right: 10px;
	background: url('/image/readmore-left.png') no-repeat left top;
	}

.sidebar-block {
	padding-left: 23px;
	padding-bottom: 20px;
	}

.photo {
	margin-bottom: 10px;
	}
.photo img {
	display: block;
	border: 1px solid #b9b9b9;
	}


/** =LAYOUT **/

.shadow-margin {
	margin: 15px -4px 0px -4px;
	}

#shadow-top {
	width: 934px;
	margin: 15px auto;
	padding-top: 14px;
	background: url('/image/shadow-top.png') no-repeat center top;
	}
#shadow-btm {
	padding-bottom: 14px;
	background: url('/image/shadow-btm.png') no-repeat center bottom;
	}
#container {
	padding: 0px 4px;
	padding: 0px 13px;
	background: url('/image/shadow.png') repeat-y center top;
	}

#shadow-cont-top {
	width: 915px;
	padding-top: 13px;
	background: url('/image/content-shadow-top.gif') no-repeat center top;
	}
#shadow-cont-btm {
	padding-bottom: 16px;
	background: url('/image/content-shadow-btm.gif') no-repeat center bottom;
	}
#wrapper {
	min-height: 200px;
	background: url('/image/content-shadow.gif') repeat-y left top;
	}
#hp #wrapper {
	background-color: #ffffff;
	}


/** =HEADER **/

#header {
	background: url('/image/bg-dots-top.gif') no-repeat left top;
	}

#logo {
	width: 111px;
	height: 117px;
	margin-left: 516px;
	}

#navigation {
	clear: both;
	height: 53px;
	background: #2eb396 url('/image/bg-nav.png') repeat-x;
	}


/** =CONTENT - HOMEPAGE **/

#visual {
	height: 364px;
	height: 393px;
	position: relative;
	background: url('/image/home-shadow.gif') no-repeat;
	}
#visual .figure {
	display: block;
	position: absolute;
	top: 14px;
	left: 14px;
	}
#selector {
	font-size: 90%;
	width: 398px;
	height: 364px;
	margin: 0;
	list-style: none;
	position: absolute;
	top: 14px;
	right: 14px;
	background: url('/image/bg-selector.jpg') no-repeat right top;
	}
#selector li {
	height: 91px;
	}
#selector li a {
	width: 356px;
	width: 358px;
	width: 318px;
	height: 91px;
	color: #ffffff;
	display: block;
	margin-left: 40px;
	/* padding-top: 8px; */
	padding-left: 20px;
	padding-right: 20px;
	text-decoration: none;
	}

#selector li a strong {

}

#selector li a:hover,
#selector li.active a {
	margin-left: 0;
	padding-left: 60px;
	background-image: url('/image/selector-1.png');
	background-repeat: no-repeat;
	background-position: right top;
	}
#selector li#slct-1 a:hover,
#selector li.active a {
	background-image: url('/image/selector-1.png');
	}
#selector li#slct-2 a:hover {
	background-image: url('/image/selector-2.png');
	}
#selector li#slct-3 a:hover {
	background-image: url('/image/selector-3.png');
	}
#selector li#slct-4 a:hover {
	background-image: url('/image/selector-4.png');
	}
#selector li strong {
	display: block;
	padding-top: 10px;
	font-size: 130%;
	line-height: 1.2;
	text-transform: lowercase;
	}
#selector li br {
	display: none;
	}

#contact-info {
	float: left;
	margin-top: 2px;
	margin-left: 200px;
	}
#contact-info p {
	}

#home-icons {
	width: auto;
	float: right;
	margin-top: 25px;
	}
#home-icons p {
	float: left;
	width: auto;
	height: 36px;
	padding-right: 15px;
	}
#home-icons a {
	margin-left: 10px;
	}
#home-icons img {
	vertical-align: middle;
	}



/** CONTENT - DEFAULT **/

#content {
	float: left;
	width: 688px;
	width: 548px;
	min-height: 200px;
	margin-left: 4px;
	margin-left: 14px;
	margin-right: 10px;
	padding: 10px 30px;
	padding: 10px 60px;
	background: url('/image/bg-content.gif') repeat-x top left;
	}

#extra {
	height: 90px;
	border-right: 1px solid #ffffff;
	background: #e6e6e6 url('/image/bg-extra.gif') repeat-x left bottom;
	}
#hp #extra {
	border-left: 4px solid #ffffff;
	border-right: 4px solid #ffffff;
	}

#sidebar {
	float: left;
	width: 219px;
	border-top: 1px solid #b5b5b5;
	}

#sidebar h2 {
	height: 27px;
	line-height: 27px;
	font-size: 110%;
	font-weight: normal;
	color: #333333;
	}


/** =FOOTER **/

#flag {
	width: 176px;
	height: 168px;
	z-index: 10;
	position: absolute;
	margin-top: -110px;
	margin-left: 20px;
	background: url('/image/flag.png') no-repeat;
	}
#footer {
	height: 110px;
	clear: both;
	position: relative;
	background: url('/image/bg-dots-top.gif') no-repeat left top;
	}
#footer p {
	bottom: 0;
	right: 0;
	position: absolute;
	}
#logo-footer {
	width: 123px;
	display: inline-block;
	text-indent: -999em;
	background: url('/image/logo-footer.gif') no-repeat;
	}
#footer a {
	}


ul#news {
	list-style: none;
	margin-left: 0;
}

span.date {
	color: #B5B5B5;
}

img.newsimage {
	float: right;
}

div.img {
	float: left;
	margin-left: 5px;
	height: 80px;
	width: 120px;
}

div.img a {
	display: block;
	height: 75px;
	overflow: hidden;
	width: 119px;
}

img.generator_content_image_right  {
	margin-left: 5px;
}

span#rel {
	margin-right: 10px;
}

/* 		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; }