* { margin: 0; padding: 0; }

html { background: #000 url(html-bg.jpg) center top no-repeat; /* font-family: "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 11pt; */ 
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11pt;
	cursor: default; }

#body { width: 800px; position: absolute; left: 50%; margin-left: -400px; }

#logo { text-indent: -1000em; width: 383px; height: 88px; background: url(logo.png) no-repeat; margin-top: 44px; margin-bottom: 39px; }
#logo a { text-indent: -1000em; display: block; width: 383px; height: 88px; position: absolute; top: 44px; outline: none; }

#navigation { width: 800px; height: 44px; background: url(navigation.png) no-repeat; position: relative; z-index: 2; }
#navigation ul { list-style-type: none; }
#navigation ul li { float: left; }
#menuItem1, #menuItem2, #menuItem3, #menuItem4, #menuItem5 { background: url(navigation.png) no-repeat; display: block; height: 44px; text-indent: -1000em; outline: none; }
#menuItem1 { width: 142px; background-position: 0px 0px; }
#menuItem2 { width: 150px; background-position: -142px 0px; }
#menuItem3 { width: 192px; background-position: -292px 0px; }
#menuItem4 { width: 157px; background-position: -484px 0px; }
#menuItem5 { width: 159px; background-position: -641px 0px; }
a#menuItem1:hover { width: 142px; background-position: 0px -44px; }
a#menuItem2:hover { width: 150px; background-position: -142px -44px; }
a#menuItem3:hover { width: 192px; background-position: -292px -44px; }
a#menuItem4:hover { width: 157px; background-position: -484px -44px; }
a#menuItem5:hover { width: 159px; background-position: -641px -44px; }
a#menuItem1.active { width: 142px; background-position: 0px -88px; }
a#menuItem2.active { width: 150px; background-position: -142px -88px; }
a#menuItem3.active { width: 192px; background-position: -292px -88px; }
a#menuItem4.active { width: 157px; background-position: -484px -88px; }
a#menuItem5.active { width: 159px; background-position: -641px -88px; }
#subMenu1 { width: 200px; /* height: 102px; */ background: url(submenu1.png) no-repeat; position: absolute; border-bottom: 4px solid #333; }
#subMenu1 ul li { clear: both; }
#subMenuItem1, #subMenuItem2, #subMenuItem3, #subMenuItem4, #subMenuItem5 { background: url(submenu1.png) no-repeat; display: block; width: 200px; height: 25px; text-indent: -1000em; }
#subMenuItem1 { background-position: 0px 0px; }
#subMenuItem2 { background-position: 0px -25px; }
#subMenuItem3 { background-position: 0px -50px; }
#subMenuItem4 { background-position: 0px -75px; }
#subMenuItem5 { background-position: 0px -100px; }
#subMenuItem1:hover { background-position: -200px 0px; }
#subMenuItem2:hover { background-position: -200px -25px; }
#subMenuItem3:hover { background-position: -200px -50px; }
#subMenuItem4:hover { background-position: -200px -75px; }
#subMenuItem5:hover { background-position: -200px -100px; }

#kruimelpad { height: 27px; margin-top: 12px; margin-bottom: 2px; color: #fff; text-transform: uppercase; }
span.B_crumbBox { background: #000; font-weight: bold; padding: 3px 20px 3px 20px; font-size: 0.8em; }
span.B_crumbBox a { text-decoration: none; }

.mainContent, .wideContent { width: 532px; background: #fff; float: left; position: absolute; top: 253px; z-index: 1; }
.mainContent h1, .mainContent h2, .wideContent h1, .wideContent h2 { font-weight: normal; font-size: 3em; margin-bottom: 1em; }
#topContent h1 { font-size: 2em; }

span.color { font-weight: bold; }
#body.oranje h1, #body.oranje h2, #body.oranje h3, #body.oranje a, #body.oranje span.color { color: #ff6400; }
#body.groen h1, #body.groen h2, #body.groen h3, #body.groen a, #body.groen span.color { color: #769600; }
#body.paars h1, #body.paars h2, #body.paars h3, #body.paars a, #body.paars span.color { color: #6b1b6a; }
#body.blauw h1, #body.blauw h2, #body.blauw h3, #body.blauw a, #body.blauw span.color { color: #00a7c3; }
#body.geel h1, #body.geel h2, #body.geel h3, #body.geel a, #body.geel span.color { color: #b9b000; }
#body.rood h1, #body.rood h2, #body.rood h3, #body.rood a, #body.rood span.color { color: #ed1c24; }

.wideContent h2, .mainContent h2 { font-size: 1.2em; margin-bottom: 0.5em; height: 26px; clear: both; }
.wideContent h3, .mainContent h3 { font-size: 0.8em; }
.wideContent p, .mainContent p { font-size: 0.8em; line-height: 1.7em; margin-bottom: 0.75em; }
.wideContent a, .mainContent a { font-weight: bold; }
#body.oranje .mainContent a:hover, #body.oranje .wideContent a:hover, #body.oranje span.B_crumbBox a:hover { background: #ff6400; color: #fff; text-decoration: none; }
#body.groen .mainContent a:hover, #body.groen .wideContent a:hover, #body.groen span.B_crumbBox a:hover { background: #769600; color: #fff; text-decoration: none; }
#body.paars .mainContent a:hover, #body.paars .wideContent a:hover, #body.paars span.B_crumbBox a:hover { background: #6b1b6a; color: #fff; text-decoration: none; }
#body.blauw .mainContent a:hover, #body.blauw .wideContent a:hover, #body.blauw span.B_crumbBox a:hover { background: #00a7c3; color: #fff; text-decoration: none; }
#body.geel .mainContent a:hover, #body.geel .wideContent a:hover, #body.geel span.B_crumbBox a:hover { background: #b9b000; color: #fff; text-decoration: none; }
#body.rood .mainContent a:hover, #body.rood .wideContent a:hover, #body.rood span.B_crumbBox a:hover { background: #ed1c24; color: #fff; text-decoration: none; }
.mainContent table { font-size: 0.8em; border-collapse: collapse; border-spacing: 0; width: 100%; margin-bottom: 2em; }
.mainContent th, .mainContent td { text-align: left; vertical-align: top; }
.mainContent th { width: 150px; }
.mainContent table.small th { width: 60px; }
.mainContent table.zebra tr { border-bottom: 1px solid #fff; }
.mainContent table.zebra tr.odd { background: #ebebeb; }
.mainContent table.zebra tr.even { background: #f5f5f5; }
.mainContent table td { padding: 3px; padding-left: 0px; }
.mainContent .content ul, .mainContent .content ol { font-size: 0.8em; line-height: 1.7em; margin-left: 2em; margin-bottom: 0.75em; }

.wideContent { width: 800px; }
#body #bottomContent.homeContent { position: absolute; top: 338px; }

.medewerkersOverzicht { padding: 1px; }
.medewerkersOverzicht ul { list-style-type: none; }
.medewerkersOverzicht li { width: 251px; height: 281px; display: block; float: left; padding: 5px; margin-left: 4px; margin-bottom: 5px; }
.medewerkersOverzicht li img { display: block; }
.medewerkersOverzicht li.dark { background: url(medewerker-background-dark.jpg) no-repeat; }
.medewerkersOverzicht li.light { background: url(medewerker-background-light.jpg) no-repeat; }
#body .medewerkersOverzicht li h3 { text-transform: uppercase; color: #fff; background: #000 url(red-bar.jpg) left bottom no-repeat; padding: 5px 0px 0px 16px; display: block; width: 235px; height: 34px; }
.medewerkersOverzicht li p { padding: 10px 16px 0px 16px; margin-bottom: 0px; }
.medewerkersOverzicht p.intro { height: 70px; }
.medewerkersOverzicht p.meer { text-align: right; margin-bottom: 0; }
.medewerkersOverzicht p.email { padding: 0 16px; margin: 0; text-align: right; font-size: 0.6em; }
#body .medewerkersOverzicht li p.email a { color: #000; text-decoration: none; }

.content { width: 493px; padding: 35px 19px 35px 20px; clear: both; }
.shaded { background: #fff url(content-background.png) left bottom repeat-x; float: left; }

.mainContent .content .thumbnails ul { list-style-type: none; margin-left: 0; }
.thumbnails li { float: left; margin-right: 20px; margin-bottom: 20px; }
.thumbnails img { border: 0; display: block; }

.information { border-top: 1px dotted #000; clear: both; }
.information h3 { text-transform: uppercase; padding: 20px 0px 0px 40px; font-size: 0.9em; }
.information p { font-size: 0.8em; padding: 5px 30px 30px 40px; margin-bottom: 0; }
#body.oranje .information h3 { background: url(main-arrow-oranje.png) 20px 22px no-repeat; }
#body.groen .information h3 { background: url(main-arrow-groen.png) 20px 22px no-repeat; }
#body.paars .information h3 { background: url(main-arrow-paars.png) 20px 22px no-repeat; }
#body.blauw .information h3 { background: url(main-arrow-blauw.png) 20px 22px no-repeat; }
#body.geel .information h3 { background: url(main-arrow-geel.png) 20px 22px no-repeat; }
#body.rood .information h3 { background: url(main-arrow-rood.png) 20px 22px no-repeat; }

#body h3.contactFormButton { background: url(contact-form-button.jpg) no-repeat; display: block; width: 487px; height: 18px; padding: 3px; cursor: pointer; color: #fff; text-transform: uppercase; }
.contactForm { border: 1px solid #ebebeb; padding: 10px; border-top: 0; }
.contactForm span { font-weight: bold; color: #ed1c24; }
.contactForm fieldset { border: 1px solid #f5f5f5; margin-bottom: 1em; }
.contactForm legend { padding: 0 10px 10px 10px; font-size: 0.8em; color: #ed1c24; }
.contactForm label { font-size: 0.8em; margin-left: 10px; display: block; float: left; width: 100px; }
.contactForm label.huisnummer { display: inline; width: auto; padding-right: 10px; }
.contactForm input { display: block; clear: right; width: 200px; }
.contactForm input.adres { clear: none; float: left; }
.contactForm input.huisnummer { width: 40px; }
.contactForm input.submit { width: auto; padding: 0 10px 0 10px; }
.contactForm div { margin-bottom: 3px; }
.contactForm textarea { width: 348px; height: 100px; font-family: "Trebuchet MS", Verdana, Arial, sans-serif; font-size: 0.8em; }
.contactForm .redenContact p { margin-left: 10px; }
.contactForm .redenContact div { clear: both; }
.contactForm .redenContact input { width: 10px; float: left; margin-left: 10px; }
.contactForm .redenContact label { width: 300px; }
.contactForm .afpsraak { /* padding: 0 10px; */ }
.contactForm .afspraak input { width: auto; float: left; margin-left: 10px; }
.contactForm .afspraak label { display: inline; width: auto; }

.error { background: #DDFFDD; }

.pdfLogo { width: 26px; height: 26px; background: url(pdf-logo.png) no-repeat; position: absolute; margin-left: 10px; margin-top: -5px; }

#topContent div { height: 91px; padding-top: 0; padding-bottom: 0; }
#topContent h1 { margin: 0; margin-top: 30px; }

#flashSlideShow { width: 800px; height: 247px; background: #fff; clear: both; position: absolute; top: 344px; }
#flashSlideShow p { text-align: center; font-style: italic; font-size: 0.8em; color: #a8a8a8; padding-top: 100px; }

#dienstenOverzicht { width: 493px; margin-bottom: 0.5em; background: url(shade.jpg) no-repeat; float: left; clear: both; border-top: 1px dotted #a8a8a8; margin-top: 1em; }
#dienstenOverzicht ul { list-style-type: none; font-size: 1em; margin: 0; }
#dienstenOverzicht li { float: left; display: block; width: 230px; padding: 8px 8px 18px 8px; border-bottom: 1px dotted #a8a8a8; }
#dienstenOverzicht p { color: #3a3a3a; }
#dienstenOverzicht a { font-weight: normal; text-decoration: none; }

.sideContent { width: 268px; background: #000; float: right; color: #fff; position: absolute; top: 253px; z-index: 1; right: 0px; }
.sideContent img { display: block; }
.sideContent dl { margin: 25px 0px 0px 25px; font-size: 0.8em; }
.sideContent dt { display: block; width: 70px; float: left; clear: left;  }
.sideContent dd { float: left; }
#body .sideContent h1, #body .sideContent h2, #body .sideContent h3, #body .sideContent a { color: #fff; }
#body .sideContent a:hover { color: #000; background: #fff; text-decoration: none; } 
#body #bottomContent.homeContent .sideContent { position: absolute; left: 532px; }

#nieuwsbrief { width: 227px; height: 130px; background: url(side-balloon.jpg) no-repeat; padding: 17px 0px 0px 40px; }
#nieuwsbrief h3 { font-size: 0.9em; margin-bottom: 5px; }
#nieuwsbrief p, #nieuwsbrief label { font-size: 0.8em; line-height: 1.1em; color: #a8a8a8; margin-bottom: 5px; }
#nieuwsbrief label { display: block; width: 50px; float: left; padding-top: 3px; }
#nieuwsbrief input { width: 150px; border: 1px inset #ccc; background: #333; color: #eee; padding: 2px; margin-bottom: 5px; }
#nieuwsbrief input.submit { width: auto; border: 1px outset #ccc; cursor: pointer; /* margin-left: 81px; */ }
#nieuwsbrief input.submit:active { border: 1px inset #ccc; width: 80px; }


#teamOverzicht { /* width: 215px; height: 105px; background: url(side-image.png) no-repeat; padding: 230px 20px 0px 40px; */ background: #D3D3D3; padding: 10px 20px 20px 40px; }
#body #teamOverzicht h3 { font-size: 0.9em; margin-bottom: 5px; color: #e60014; }
#body #teamOverzicht p { font-size: 0.8em; line-height: 1.1em; color: #a8a8a8; margin-bottom: 5px; }
#teamOverzicht a.medewerkers { display: block; width: 267px; height: 28px; text-indent: -1000em; background: url(medewerkers-button.png) no-repeat; margin-left: -40px; }
#teamOverzicht a.medewerkers:hover { background: url(medewerkers-button.png) no-repeat; }

#sideSubText { width: 268px; background: url(side-background.jpg) no-repeat; }
#sideSubText h3 { text-transform: uppercase; padding: 20px 0px 0px 40px; font-size: 0.9em; }
#sideSubText p { font-size: 0.8em; line-height: 1.1em; color: #a8a8a8; padding: 5px 30px 30px 40px; margin-bottom: 0; }
#body.oranje #sideSubText h3 { background: url(side-arrow-oranje.png) 20px 22px no-repeat; }
#body.groen #sideSubText h3 { background: url(side-arrow-groen.png) 20px 22px no-repeat; }
#body.paars #sideSubText h3 { background: url(side-arrow-paars.png) 20px 22px no-repeat; }
#body.blauw #sideSubText h3 { background: url(side-arrow-blauw.png) 20px 22px no-repeat; }
#body.geel #sideSubText h3 { background: url(side-arrow-geel.png) 20px 22px no-repeat; }
#body.rood #sideSubText h3 { background: url(side-arrow-rood.png) 20px 22px no-repeat; }

#smallSlideshow { margin: 0; padding: 0; display: block; width: 268px; height: 317px; }

#footer { width: 532px; height: 43px; display: block; clear: both; }
#body.oranje #footer { background: url(footer-oranje.jpg) no-repeat; }
#body.groen #footer { background: url(footer-groen.jpg) no-repeat; }
#body.paars #footer { background: url(footer-paars.jpg) no-repeat; }
#body.blauw #footer { background: url(footer-blauw.jpg) no-repeat; }
#body.geel #footer { background: url(footer-geel.jpg) no-repeat; }
#body.rood #footer { background: url(footer-rood.jpg) no-repeat; }
#footer p { padding: 19px 0px 0px 20px; font-size: 0.8em; }
#body #footer a { color: #000; font-weight: normal; }
#body.paars #footer p, #body.paars #footer a, #body.rood #footer p, #body.rood #footer a { color: #fff; }
#footer a:hover { color: #fff; background: #000; text-decoration: none; }
#footer a.idea { display: block; float: right; margin-right: 4px; width: 95px; height: 19px; text-indent: -1000em; background: url(ideaLogo.png) no-repeat; position: absolute; bottom: 5px; right: 0; }
#body #footer a.idea:hover { background: url(ideaLogo.png) no-repeat; }

#body #bottomContent.absolute { position: absolute; bottom: -43px; z-index: 1; clear: both; }
#body #bottomContent.absolute #footer { clear: both; }