@charset "UTF-8";
/* CSS Document */

@import url('selectbox.css');
@import url('jquery.qnavigation.css');


@font-face {  
    font-family:"Olsen-Bold";  
    src: url("/fonts/OlsenBol.eot");
    src: local("Olsen-Bold"), url("/fonts/OlsenBol.ttf") format("truetype");  
}

@font-face {  
    font-family:"Olsen-Regular";  
    src: url("/fonts/OlsenReg.eot");
    src: local("Olsen-Regular"), url("/fonts/OlsenReg.ttf") format("truetype");  
}

* {
	padding:0;
	margin:0;
	border:0;
	outline:0;
}

HTML {
	width:100%;
	overflow:scroll;
	overflow-x:hidden;
}

BODY {
	position:relative;
	width:100%;
	font-family:Arial;
	font-size:12px;
	color:#fff;
	background:#211B1A url(../images/backgrounds/line.png) repeat-x left 62px;
}

a { color:#70655A; text-decoration:none; }
a:hover{ text-decoration:underline; }

a img{ cursor:pointer; }

ul{ list-style:none; }
ul li{ list-style:none; }

h1, h2 {
	font-size:20px;
	margin:0 0 0 0;
	padding:0;
}

h2{
	font-size:12px;
}

fieldset{
	padding:0;
	margin:0;
}


/* SITE OPBOUW */

#site {
	position:relative;
	margin:0 auto;
	width:1000px;
	background: url(../images/backgrounds/bg_kennis.png) no-repeat center 123px;
	min-height:710px;
	_height:710px;
}

#header{
	position:relative;
	width:100%;
	height:1px;
	top:62px;
	background:#211B1A url(../images/backgrounds/line.png) repeat-x left top;
}

#header #logo{
	position:absolute;
	left:25px;
	top:-42px;
	padding:0 15px;
	background:#211B1A;
}

#header h1{
	position:absolute;
	right:65px;
	bottom:-5px;
	color:#444440;
	font-size:24px;
	font-family:"Olsen-Regular", "Times New Roman", "Arial";
	letter-spacing:2px;
	font-weight:normal;
}

	

#header #zoeken{
	position:absolute;
	top:-12px;
	right:37px;
	width:275px;
	height:24px;
}

#header ul{
	border-left:1px solid #393433;
	border-right:1px solid #393433;
	display:inline-block;
	height:26px;
	left:360px;
	line-height:26px;
	margin:0;
	padding:0;
	position:absolute;
	top:-13px;
}

#header li{
	background:#211B1A;
	display:inline-block;
	margin:0;
	padding:0;
}

#header a{
	color:#fff;
	display:inline-block;
	font-family:"Olsen-Regular", "Times New Roman", "Arial";
	letter-spacing:1px;
	height:26px;
	width:115px;
	text-align:center;
}

#header .active a{
	background:#75705F;
}

#menu{
	height:36px;
	margin:131px 0 0 0;
}


#menu ul li{
	float:left;
	padding:0 2px;
	_width:0px;
	_white-space:nowrap;
}

#menu ul.menu li.active{
	float:left;
	padding:0 1px;
	border-left:1px solid #4F4B4A;
	border-right:1px solid #4F4B4A;
}

#menu ul.menu li.first{
	border-right:1px solid #4F4B4A;
}


#menu ul li a{
	display:block;
	height:36px;
	line-height:36px;
	padding:0 15px;
	color:#FFF;
	text-align:center;
	font-family:"Olsen-Regular", "Times New Roman", Arial;
	letter-spacing:0;
	font-size:12px;
}

#menu ul li a:hover{
	text-decoration:none;
}

#menu .menu{
	float:left;
	margin:0 0 0 27px;
}

#menu .submenu{
	float:right;
	margin:0 6px 0 0;
}

#menu .submenu li{
	padding:0 1px;
	border-right:1px solid #4F4B4A;
}

#menu ul.submenu li.active{
	float:left;
	border-left:0;
}

#menu .submenu li.active2{
	background:#70655A;
}

#menu .submenu li a{
	width:auto;
	padding:0 15px;
}




#slogan{
	position:absolute;
	top:167px;
	left:0;
	width:100%;
	height:175px;
	text-align:center;
	background:#70655A;
}

#slogan ul{
	text-align:left;
	width:275px;
	float:left;
	margin:25px 0;
	overflow:hidden;
}

#slogan div.vacatures{
	position:relative;
	width:900px;
	padding:0 0 0 100px;
	height:175px;
	margin:0 auto;
	
}

#slogan div.vacatures span.small{
	font-size:15px;
	padding:0 3px 0 0;
}

#slogan ul li{
	padding:0 15px;
	cursor:pointer;
}

#slogan ul li a{
	height:30px;
	line-height:30px;
	color:#FFF;
}

#slogan .nav{
	position:absolute;
	right:0;
	bottom:0;
	height:22px;
}

#slogan .nav a{
	color:#511322;
	display:block;
	float:left;
	width:30px;
	height:22px;
	text-align:center;
	border-left:1px solid #511322;
}



.werken-met #slogan .nav a{
	color:#0C7C68;
	border-left:1px solid #0C7C68;
}

#slogan .nav a.active2{
	color:#fff;
}



#slogan img.slp-flexibiliteit,
#slogan img.slp-perfectie,
#slogan img.slp-zekerheid,
#slogan img.slp-innovatie,
#slogan img.slp-kennis,
#slogan img.slp-kennis2,
#slogan img.slp-transparantie{
	position:absolute;
	left:50%;
	margin-left:500px;
	
}

#slogan img.slp-flexibiliteit{  top:82px; margin-left:346px; height:124px; width:154px; }
#slogan img.slp-perfectie{ top:39px; margin-left:345px; height:173px; width:187px; }
#slogan img.slp-zekerheid{ top:30px; margin-left:355px; height:177px; width:95px; }
#slogan img.slp-transparantie{ top:73px; margin-left:355px; height:126px; width:178px; }
#slogan img.slp-innovatie{ top:65px; margin-left:337px; height:135px; width:223px; }

#slogan img.slp-kennis{ top:90px; margin-left:327px; height:108px; width:168px; }
#slogan img.slp-kennis2{ top:7px; left:0; margin-left:0; height:160px; width:112px; }


#content{
	width:960px;
	padding:0 0 40px 0;
	min-height:300px;
	_height:300px;
}

#footer {
	position:relative;
	width:960px;
	margin:0 auto;
	height:100px;
	line-height:50px;
	text-align:center;
	color:#7E7E7E;
	font-size:11px;
	border-top:1px solid #CFCFCF;
}

#login{
	width:100%;
	height:175px;
	background:#FFF;
	color:#838383;
	font-size:11px;
	line-height:180%;
}

#login{
	white-space:nowrap;
}

#login .container{
	width:1000px;
	height:100%;
	margin:0 auto;
}

#login .inloggen{
	float:left;
	width:240px;
	margin:0 0 0 auto;
	padding:20px 70px 20px 70px;
	_padding:20px 62px 20px 61px;
}

#login .inloggen h1{
	margin: 0 0 10px 0;
	font-family:"Olsen-Regular", "Times New Roman", Arial;
	font-size:14px;
	letter-spacing:2px;
	color:#686564;
	white-space:nowrap;
}

#login .contact{
	float:left;
	width:530px;
	height:175px;
	margin:0 auto 0 0;
	border-left:1px solid #BFBDBD;
	padding:0 35px;
}

#login .contact .vestigingen{
	float:left;
	padding:20px 25px;
	_padding:20px 12px;
	white-space:nowrap;
}

#login .contact .vestigingen dl{
	margin:15px 0 0 0;
}

#login .contact .vestigingen dl dt{
	width:13px;
	height:19px;
	font-weight:bold;
}

#login .contact .vestigingen dl dd{
	width:90px;
	height:19px;
	margin:-19px 0 0 13px;
}





/* CONTENT ELEMENTEN */

.content {
	line-height:195%;
}

.content h1{
	margin-bottom:20px;
	font-family:"Olsen-Regular", "Times New Roman", Arial;
	font-weight:normal;
	letter-spacing:2px;
	color:#8D8376;
	font-size:18px;
}

.content h2{
	margin:0;
	font-size:12px;
	font-weight:bold;
}

.content P, .content UL, .content OL, .content TABLE {
	margin-bottom:20px;
}

.content UL{
	list-style:disc outside;
	margin:0 0 20px 15px;
}

.content LI {
	list-style:disc outside;
}

.content STRONG, .content B {
	font-weight:bold;
}

.content A {
	text-decoration:none;
}

.content A:hover {
	text-decoration:underline;
}

.content A.active {
	text-decoration:underline;
}

.content .small{
	font-size:9px;
}	


/* FORMULIEREN */

.login dl dt{
	display:none;
}

.login dl dd{
	width:210px;
	min-height:30px;
	_height:30px;
	line-height:30px;
}



.form dl dt{
	width:95px;
	min-height:24px;
	_height:24px;
	line-height:24px;
}

.form dl dd{
	width:225px;
	min-height:24px;
	_height:24px;
	line-height:24px;
	margin:-24px 0 0 95px;
	position:relative;
}

.input-file,
.input-calendar,
.input-search,
.input-textarea,
.input-password,
.input-text {
	width:217px;
	height:16px;
	padding:3px;
	font-size:11px;
	color:#918E8E;
	margin:0 0 10px 0;
	border:1px solid #4F4B4A;
	background:#231D1C;
}

.input-textarea {
	height:142px;
	overflow:auto;
}

.input-calendar {
	width:196px; /* input-text - 5px margin-left - 16px img */
	margin:0 5px 10px 0;
}

.input-submit {
	cursor:pointer;
	height:20px;
	width:96px;
	background:url(../images/buttons/df-verzenden.png) no-repeat center center;
	margin:0 0 10px 0;
}

.file-replace{
	top:1px;
}

img.ui-datepicker-trigger{

}




.input-search {
	position:absolute;
	top:0;
	left:0;
	width:239px;
	background:#2C2422;
}

.submit-search {
	cursor:pointer;
	position:absolute;
	top:0;
	right:0;
	background:url(../images/buttons/zoeken.png) no-repeat center center;
	width:28px;
	height:24px;
}

.input-login {
	width:249px;
	height:16px;
	padding:3px;
	border:1px solid #ccc;
	font-size:11px;
	color:#777777;
}

.submit-login {
	cursor:pointer;
	height:24px;
	font-family:"Olsen-Regular", "Times New Roman", Arial;
	letter-spacing:2px;
	color:#96887C;
	font-size:11px;
	background:#fff;
}


label {
	cursor:pointer;
	padding: 2px 0 2px 20px;
	background: url(../images/buttons/icon_checkbox.png) 0 -40px no-repeat;
}

label.disabled {
	color: #333;
	opacity: 0.8;
}

label.focus {
	background-position: 0 -114px;
}

label.input-checkbox.checked {
	background-position: 0 0;
}
label.input-checkbox.checked.focus {
	background-position: 0 -74px;
}

label.input-radio.checked {
	background-position: 0 -160px;
}
label.input-radio.checked.focus {
	background-position: 0 -199px;
}





/* GOOGLE MAPS */

#gmaps div a,
#gmaps div span,
#gmaps span.gmnoprint a img{
	display:none;
}

#gmaps div.gmnoprint{

}


/* HULPELEMENTEN */

.clear {
	clear:both;
	overflow:hidden;
	height:0;
	width:0;
}

.tussenruimte {
	height:20px;
}

.kantlijn {
	padding:20px;
}

.container {
	position:relative;
	width:100%;
	height:100%;
}

.horline{
	position:absolute;
	top:93px;
	left:0;
	height:1px;
	width:100%;
	background:#fff;
	overflow:hidden;
	
	filter:alpha(opacity=20);
	-moz-opacity:0.2;
	opacity: 0.2;

}

.verline{
	position:absolute;
	bottom:0;
	left:380px;
	height:143px;
	width:1px;
	background:#4F4B4A;
	overflow:hidden;
}

.inline{
	float:left;
	margin:0 25px 25px 0;
}

.garantie{
	height:108px;
	width:108px;
}

.left{
	float:left;
	width:315px;
}

.right{
	float:right;
	width:550px;
}

/*** PAGES HOME ***/

#home{
	position:relative;
	width:628px;
	height:367px;
	margin:190px auto 0 auto;
	background:url(../images/backgrounds/line-vertical.png) no-repeat center 23px;
}

#home h1{
	color:#96887C;
	font-family:"Olsen-Regular", "Times New Roman";
	font-size:25px;
}

#home a{
	font-family:"Olsen-Regular", "Times New Roman", Arial;
	letter-spacing:2px;
	color:#fff;
	font-size:14px;
}

#home a:hover{ text-decoration:none; }

#home .wb,
#home .wm{
	width:240px;
	height:287px;
	float:left;
	padding:41px 24px;
	cursor:pointer;
}

#home .wb{ margin:0 25px 0 0; }
#home .wm{ margin:0 0 0 25px; }

#home .hover{ background:#726E5E; }
#home .hover h1{ color:#FFF; }

/*** CONTENT ***/

#content{
	position:relative;
	padding:40px 20px 60px 20px;
	margin:175px 0 0 0;
}

.functiegroepen{
	display:none;
}

.functiegroepen strong, .content H3 {
	background:#2A2422 url(../images/common/arrows.gif) no-repeat 10px center;
	text-indent:30px;
	height:30px;
	line-height:30px;
	width:100%;
	display:block;
	font-weight:normal;
	margin:10px 0;
	font-size:12px;
}

.functiegroepen p, .functiegroepen ul{
	padding:0 0 0 30px;
}

.functiegroepen p strong{
	margin:0;
}


.ttm-nav{
	position:relative;
	height:190px;
	width:240px;
}

.ttm-nav a{
	display:block;
	position:absolute;
	z-index:1;
}

.ttm-nav a:hover{
	z-index:5;
}


.ttm-nav .ttm-4{
	top:30px;
	left:185px;
}

.ttm-nav .ttm-1{
	top:2px;
	left:0;
}

.ttm-nav .ttm-2{
	top:0;
	left:50px;
}

.ttm-nav .ttm-3{
	top:50px;
	left:82px;
}

.ttm-nav .ttm-0{
	top:1px;
	left:145px;
}



.ttm img{
	float:left;
	margin:0 10px 0 0;
}

.testimonials{
	position:relative;
	left:-30px;
	list-style:none;
	margin:0;
	padding:0;
}

.testimonials li{
	list-style:none;
	margin:0;
	height:29px;
	line-height:29px;
	padding:0 0 0 15px;
	width:260px;
	cursor:pointer;
}

.testimonials li.active{
	background:#7C1D34;
}

.testimonials li a{
	color:#FFF !important;
}

.testimonials li a:hover{
	text-decoration:none;
}

.testimonial{
	position:relative;
	height:650px;
}

.testimonial div{
	position:absolute;
	overflow:hidden;
	cursor:pointer;
}

.testimonial div .line{
	position:absolute;
	background:#474343;
}

.testimonial div img{
	position:absolute;
}

.testimonial strong{
	color:#70655A;
}

.testimonial span{
	color:#8D8376;
}

.testimonial .test-0{
	top:185px;
	left:0;
	height:145px;
	width:170px;
	padding: 40px 155px 0 0;
}

.testimonial .test-0 .line{
	top:30px;
	left:30px;
}

.testimonial .test-1{
	top:400px;
	left:0;
	height:130px;
	width:230px;
	padding: 110px 0 0 135px;
}

.testimonial .test-1 .line{
	top:95px;
	left:45px;
}

.testimonial .test-2{
	top:335px;
	left:190px;
	height:140px;
	width:280px;
	padding: 30px 130px 0 0;
}

.testimonial .test-2 .line{
	top:25px;
	left:110px;
}

.testimonial .test-3{
	top:0;
	left:0;
	height:155px;
	width:235px;
	padding: 20px 0 0 140px;
}

.testimonial .test-3 .line{
	top:15px;
	left:50px;
}

.testimonial .test-4{
	top:80px;
	left:350px;
	height:90px;
	width:215px;
	padding: 145px 0 0 70px;
}

.testimonial .test-4 .line{
	top:110px;
	left:50px;
}

.testimonial .test-0 .line,
.testimonial .test-1 .line,
.testimonial .test-2 .line,
.testimonial .test-3 .line{
	width:223px;
	height:1px;
}

.testimonial .test-4 .line{
	width:1px;
	height:133px;
}

.testimonial .test-1 img,
.testimonial .test-3 img,
.testimonial .test-4 img{
	top:0;
	left:0;
}

.testimonial .test-0 img,
.testimonial .test-2 img{
	top:0;
	right:0;
}

ul.nieuws{
	list-style:none;
	margin:0;
	padding:0;
}

ul.nieuws li{
	list-style:none;
	padding:0 0 0 5px;
	margin:0;
	color:#8D8376;
}

ul.nieuws li span.small{
	font-size:15px;
	padding:0 6px 0 3px;
	color:#fff;
}

ul.nieuws li a{
	margin:0 0 0 10px;
	color:#fff;
	text-decoration:underline;
}

ul.nieuws li a:hover{
	text-decoration:none;
}


/*** THEMAS rood ***/
#red-theme ul.menu li.active a,
#red-theme #slogan{
	background:#7C1D34;
}

#red-theme #login a,
#red-theme .submenu li.active a,
#red-theme .ttm strong,
#red-theme .testimonial strong,
#red-theme .submit-login {
	color:#7C1D34;
}

#red-theme #slogan ul li.active{
	background:#601D2C;
}

#red-theme .input-submit {
	background:url(../images/buttons/wb-verzenden.png) no-repeat center center;
}


/*** THEMAS groen ***/
#green-theme ul.menu li.active a,
#green-theme #slogan{
	background:#109F85;
}

#green-theme #login a,
#green-theme .submenu li.active a,
#green-theme .ttm strong,
#green-theme .testimonial strong,
#green-theme .submit-login {
	color:#109F85;
}

#green-theme #slogan ul li.active {
	background:#0C7C68;
}

#green-theme .input-submit {
	background:url(../images/buttons/wm-verzenden.png) no-repeat center center;
}



#web-footer{
	position:absolute;
	bottom:22px;
	left:22px;
	font-size:11px;
	color:#64605F;
}

#web-footer a{
	color:#64605F;
	
}