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

/** =COLORS **
*/

a {
	color: #0077D5;
	text-decoration: none;
	}

h1 {
	color: #777777;
	font-size: 12px;
	font-weight: bold;
	margin: 12px 0px 0px 0px;
	}

body {
	background: #FFFFFF;
	color: #777777;
	font-size: 12px;
	}

html, body {
	margin: 0 !important;
}


/** =LAYOUT **/

#container {
	overflow: hidden;
	}


/** =HEADER **/

#hp #header {
	height: 449px;
}

#cp #header {
	height: 257px;
	}

#header {
	clear: both;
	overflow: visible;
	position: relative;
	}
.width {
	margin: 0 auto;
	padding: 0 0 0 0px;
	width: 966px;
}

#hp #bgHeaderImage {
	background: url("/image/bg-header.jpg") no-repeat scroll center top transparent;
	}

#cp #bgHeaderImage {
	background: url("/image/bg-header-content.jpg") no-repeat scroll center top transparent;
	}
#hp #logo {
	/* padding: 48px 0 76px; */
	}
#cp #logo {
	/* padding: 48px 0 34px; */
	}
#hp div#logo {
	width: 410px;
	height: 275px;
	padding-top: 25px;
	background: url("/image/logo-bg.png") left top no-repeat;
}
#cp div#logo {
	width: 410px;
	height: 132px;
	padding-top: 25px;
	background: url("/image/logo-bg.png") left top no-repeat;
}

#hp #navigation {
	width: 920px;
	height: 30px;
	margin: 40px 0px 0px 0px;
	background: url("/image/bg-menu.png") no-repeat scroll left top transparent;
	overflow: hidden;
	}
#cp #navigation {
	width: 920px;
	height: 30px;
	margin: 0px 0px 0px 0px;
	background: url("/image/bg-menu.png") no-repeat scroll left top transparent;
	overflow: hidden;
	}

#hp #headerText {
	margin: 0px 0px 0px 0px;
	width: 820px;
	}
#cp #headerText {
	width: 820px;
	margin: 24px 0px 0px 0px;
	}

#hp #headerText h1 {
	color: #ffffff;
	height: 79px;
	line-height: 79px;
	margin: 0px 0px 0px 16px;
	font-size: 18pt;
	font-weight: normal;
}
#cp #headerText h1 {
	color: #ffffff;
	line-height: 24px;
	margin: 0px 0px 0px 16px;
	font-size: 18pt;
	font-weight: normal;
}


/** =CONTENT - HOMEPAGE **/

#home-intro {
	}

#hp #wrapper {
	width: 966px;
	min-height: 400px;
	padding: 0px;
	background: #f1f1f1;
	overflow: auto;
	}

#cp #wrapper {
	width: 966px;
	padding: 0px;
	background: #ffffff;
	margin: 0px auto;
	overflow: auto;
	}

/** CONTENT - DEFAULT **/

#content {
	width: 710px;
	min-height: 400px;
	padding: 30px 15px 30px 15px;
	float: left;
	background: #f1f1f1;
	}

#content h1 {
	margin: 0px 0px 30px 0px;
	}
#content table img {
	margin-right: 5px;
	}
#content table td {
	vertical-align: top;
	}
#content .pro h1 {
	margin: 0px;
	}
#content .proEnd h1 {
	margin: 0px;
	}
#content h1.vacature {
	color: #777777;
	font-size: 18px;
	margin-bottom: 10px;
	}
#content h2.vacature {
	color: #777777;
	font-size: 12px;
	margin-bottom: 10px;
	}
#content .pro {
	width: 225px;
	background: #ffffff;
	margin: 0px 12px 12px 0px;
	float: left;
	border: 1px solid #e3e3e3;
	}
#content .proEnd {
	width: 225px;
	background: #ffffff;
	margin: 0px 0px 12px 0px;
	float: left;
	border: 1px solid #e3e3e3;
	}
#content .pro img {
	float: left;
	margin: 0px 5px 0px 0px;
	}
#content .proEnd img {
	float: left;
	margin: 0px 5px 0px 0px;
	}

#content .title {
	width: 600px;
	float: left;
	}
#content .topNav {
	width: 110px;
	float: left;
	text-align: right;
	}

#content .image {
	width: 500px;
	float: left;
	margin: 0px 12px 30px 0px;
	padding: 15px;
	background: #ffffff;
	border: 1px solid #e3e3e3;
	}
#content .thumbs {
	width: 125px;
	float: left;
	}
#content .thumbs img {
	margin: 0px 0px 5px 0px;
	padding: 15px;
	background: #ffffff;
	border: 1px solid #e3e3e3;
	}
#content .information {
	clear: both;
	}
#content .information table {
	width: 100%;
	margin: 0px 0px 30px 0px;
	}
#content .information td.title {
	width: 125px;
	}
#content .information td.spacing {
	width: 25px;
	}

#content .item {
	width: 218px;
	height: 410px;
	margin: 0px 10px 10px 0px;
	padding: 5px;
	background: #ffffff;
	border: 1px solid #e3e3e3;
	float: left;
	overflow: hidden;
	}
#content .itemLast {
	width: 218px;
	height: 410px;
	margin: 0px 0px 10px 0px;
	padding: 5px;
	background: #ffffff;
	border: 1px solid #e3e3e3;
	float: left;
	overflow: hidden;
	}

#content #news-list {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#sidebar {
	width: 211px;
	float: left;
	background: #ffffff;
	padding: 0px;
	overflow: hidden;
	}
#sidebar h1 {
	margin: 30px 0px 20px 16px;
	}


/** =CLASSES **/





.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;
}

body {
	scrollbar-arrow-color: #000000;
	scrollbar-3dlight-color: #FFFFFF;
	scrollbar-highlight-color: #000000;
	scrollbar-face-color: #FFFFFF;
	scrollbar-shadow-color: #000000;
	scrollbar-track-color: #FFFFFF;
	scrollbar-darkshadow-color: #FFFFFF;
	overflow: -moz-scrollbars-vertical;
	}

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

div#content table.categories {
	width: 400px;
	}
div#content table.categories td h1 {
	margin: 0px;
	}
div#content table.categories select {
	height: 20px;
	font-size: 12px;
	color: #777777;
	border: 1px solid #777777;
	}

div#about {
	width: 270px;
	float: left;
	background: #f1f1f1;
	padding: 0px 15px 0px 15px;
}

div#about p {
	margin: 12px 0px 0px 0px;
}

div#projects {
	width: 448px;
	min-height: 400px;
	background: #ffffff;
	float: left;
	padding: 0px 0px 0px 20px;
}
div#right {
	float: left;
	overflow: auto;
}
.project {
	float: left;
	margin-top: 0px;
	margin-right: 25px;
	}
.project img {
	margin-top: 14px;
}
.lastProject {
	float: left;
	margin-top: 14px;
	margin-right: 0px;
	}
.project, .lastProject p {
	width: 198px;
	}

#op-kaart {
	width: 198px;
	min-height: 400px;
	float: left;
	background: #ffffff;
	}

#op-kaart h1 {
	margin-bottom: 14px;
	}

div#blueBanner {
	min-height: 197px;
	width: 966px;
	margin: 0 auto;
	background: #D1E6F7;
	clear: both;
	border-top: 3px solid #B2D6F2;
	border-bottom: 10px solid #B2D6F2;
	overflow: auto;
	}
div#blueBanner a {
	color: #777777;
	}
div#blueBanner p {
	margin: 0px 0px 12px 0px
	}
div#blueBanner #news {
	width: 200px;
	float: left;
	margin-left: 40px
	}

div#blueBanner #workingProjects {
	width: 200px;
	float: left;
	margin-left: 35px
	}
div#blueBanner #vacatures {
	width: 200px;
	float: left;
	margin-left: 35px
	}
div#blueBanner #contact {
	width: 200px;
	float: left;
	margin-left: 35px
	}

/** =FOOTER **/

#footer {
	margin: 0px 0px 0px 0px;
	clear: both;
	}
#footer p {
	float: left;
	margin: 21px 0px 0px 0px;
	}
#footer img {
	float: right;
	}
#footer a {
	color: #777777;
	}
#footer a:hover {
	text-decoration: underline;
	}

table.afdelingen {
	width: 490px;
}
table.afdelingen td.links {
	width: 180px;
}

div#twitterHolder {
	background: #ffffff;
	clear: both;
	padding-bottom: 20px;
	width: 666px;
}
div.twitterContainer {
	background: #D1E6F7;
	margin-left: 20px;
	padding: 20px;
	width: 410px;
}
div.twitterContainer p.twitlink {
	float: right;
}
div.twitterContainer h3 {
	background: url('/image/twitter.png') right top no-repeat;
	color: #777777;
	height: 25px;
	text-transform: uppercase;
	width: 160px;
}
div.twitterContainer div.image {
	display: none;
}
div.twitterContainer div.text {
	font-style: italic;
}
div.twitterContainer span.time {
	font-size: 10px;
}