/* webdev: Pim Rijpsma - pim.rijpsma@gmail.com */

html, body { height:100%; overflow-x: hidden; }

body{ margin: 0; padding: 0; color: #393b3b; font: 74%/1.5em Arial, Helvetica, "Lucida Grande", sans-serif; text-align: center; }
body.homepage{ background: #D7D7D7 url('/images/bg-home.jpg') top center no-repeat; }

a{ color: #393b3b; text-decoration: underline; /*outline: none; -moz-outline: none;*/ }
a:hover{ color: #80007D; text-decoration: underline; }

h1 a, h2 a, h3 a, h4 a, h5 a{ text-decoration: none; }
h1{ color: #393b3b; margin: 0 0 0.5em 0; padding: 0; font: normal 290% Arial, Helvetica, "Lucida Grande", sans-serif; letter-spacing: 0px; text-transform: capitalize;}
h2{ color: #393b3b; margin: 0 0 0.5em 0; padding: 0 0 0 0; font: normal 170% Arial, Helvetica, "Lucida Grande", sans-serif; letter-spacing: 0px; }
h3{ color: #393b3b; margin: 0 0 0.2em 0; padding: 0 0 0 0; font: normal 135% Arial, Helvetica, "Lucida Grande", sans-serif; letter-spacing: 0px; }
h4{ color: #393b3b; margin: 0 0 0.1em 0; padding: 0 0 0 0; font: bold 120% Arial, Helvetica, "Lucida Grande", sans-serif; }
h5{ color: #393b3b; margin: 0 0 0.1em 0; padding: 0; font: bold 110% Arial, Helvetica, "Lucida Grande", sans-serif; }

p{ margin: 0; padding: 0 0 1.5em 0; }
blockquote{ margin: 0 0 2em 0; font-size: 130%; color: #393b3b; font-style: italic; line-height: 1.4em; padding: 0 2em; }
img, img a{ border: none; }

ul{ list-style-type: disc; display:block; margin: 0 0 2em 1em; padding: 0 0 0 2em; }
ol{ list-style-type: decimal; display:block; margin: 0 0 2em 1em; padding: 0 0 0 2em; }
ul li, ol li , ol li a, ul li a{ line-height: inherit; display: block; }
ul li{ padding: 0.4em 0; line-height: inherit; list-style-type: disc; }
ol li{ padding: 0.4em 0; line-height: inherit; list-style-type: decimal; }
ul.no-bullets{ margin: 0 0 0.8em 0; padding: 0; list-style-type: none; }
ul.no-bullets li{ list-style-type: none; }

ul.arrow li a{ background: url('/images/icon-bullet.gif') 0px 4px no-repeat; padding: 0 0 0 12px; }


form{ margin: 0; padding: 0; }
form p, .form p{ padding: 0.2em 0 0.4em 0; margin: 0; clear: both; width: 100%; }
fieldset{ border: none; margin: 1em 0; padding: 0; width: 100%; }
input, textarea{ font: normal 100% Arial, Helvetica, "Lucida Grande", sans-serif; background: #FFF;  border: 1px solid #d7d7d7 !important; padding: 2px 4px; width: 98%;  }
input.button, a.button{ cursor: pointer; width: auto; white-space: nowrap; border: 1px none #80007D !important; padding: 4px 12px; color: #FFF !important; background: #80007D !important; text-decoration: none; font-weight: bold; }
input.button:hover, a.button:hover{ border: 1px none #d7d7d7 !important; background: #d7d7d7 !important; color: #80007D !important;  padding: 4px 12px; text-decoration: none; font-weight: bold; }
input.checkbox, input.radio{ background: none; border: none; display: inline; float: left; width: 14px; }
label{ display: block; clear: both; margin: 0 0 0.2em 0; cursor: pointer; line-height: 1.4em; }
label.inline, ul li label{ display: block; clear: none; margin: 0 0 0 4px; float: left; width: 85%; }
label:hover{ text-decoration: underline; }
input.fillout{ width: 98%; }


/* toolbox */
.center{ margin: auto auto; }
.center-txt{ text-align: center; }
.center-page{ margin: 0 auto; overflow: hidden; }
.clear{ clear: both; display: block; }
.clear-right{ clear: right; }
.clear-left{ clear: left; }
.no-clear{ clear: none; display: inline; }
.big-txt{ font-size: 120%; }
.big-nav *{ font-size: 110%; }
.normal-txt{ font-size: 100%; }
.small-txt{ font-size: 96%; }
.xsmall-txt{ font-size: 88%; }
.line-height-normal{ line-height: normal; }
.left{ float: left;}
.left-img{ margin: 8px 24px 8px 0; float: left; }
.left-txt { text-align: left; }
.line {margin: 0 0 1em 0; width: 100%; border-top: 1px #d7d7d7 solid; float: left; }
.padding{ padding: 20px; }
.padding-small{ padding: 10px; }
.padding-xsmall{ padding: 5px; }
.padding-small-content{ padding: 0px; }
.no-margin{ margin: 0; }
.no-margin-bott{ margin-bottom: 0; }
.no-padding{ padding: 0 !important; }
.no-pad-bott{ padding-bottom: 0; }
.no-border{ border: none !important; }
.nofloat{ float: none; }
.right{ float: right; }
.right-img{ float: right; margin: 8px 0 8px 24px; }
.right-txt{ text-align: right; }
.rnd-small{ /*-moz-border-radius:4px;*/ -webkit-border-radius: 3px; }
.rnd-big{ /*-moz-border-radius:6px;*/ -webkit-border-radius: 6px; }
a.hover-line, .hover-line a{ text-decoration: none; }
a.hover-line:hover, .hover-line a:hover{ text-decoration: underline; }
.no-underline *{ text-decoration: none; }

.mtop{ margin-top: 10px; }
.mbott{ margin-bottom: 10px; }
.mleft{ margin-left: 10px; }
.mright{ margin-right: 10px; }
.mstop{ margin-top: 5px; }
.msbott{ margin-bottom: 5px; }
.msleft{ margin-left: 5px; }
.msright{ margin-right: 5px; }

.ptop{ padding-top: 10px; }
.pbott{ padding-bottom: 10px; }
.pleft{ padding-left: 10px; }
.pright{ padding-right: 10px; }
.pstop{ padding-top: 5px; }
.psbott{ padding-bottom: 5px; }
.psleft{ padding-left: 5px; }
.psright{ padding-right: 5px; }

.spacer{ margin-right: 20px; }
.block{ display: block; }
.wrap{ width: auto; }
.no-wrap{ white-space: nowrap }
.hide{ display: none; }
.noscript, .print{ display: none; }
.auto{ width: auto; }
.fillout{ width: 100%; }
.inline{ display: inline; }
.overflow-hidden{ overflow: hidden !important; }

.clearfix:after {	content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix {	display: inline-block; }
html[xmlns] .clearfix {	display: block; }
* html .clearfix { height: 1%; }

/* Smooth image resizing IE7/8 with CSS */
img { -ms-interpolation-mode : bicubic; }

/* end toolbox */


/* color styles */
.black-txt, .black-txt *{ color: #393b3b !important;  }
a.black-txt:hover, .black-txt a:hover{ color: #393b3b !important; }
.white-txt, .white-txt *{ color: #FFF !important;  }
a.white-txt:hover, .white-txt a:hover{ color: #FFF !important; }
.special-txt, .special-txt *{ color: #80007D !important;  }
a.special-txt:hover, .special-txt a:hover{ color: #80007D !important; }

/* icon link styles */
.icon-back{ color: #393b3b; background: url('/images/icon-back.gif') 0px 3px no-repeat; padding: 0 0 0 18px; text-decoration: none; }
.icon-file{ color: #393b3b; background: url('/images/icon-file.gif') 0px 1px no-repeat; padding: 0 0 0 18px; text-decoration: none; }


/* content helpers layout */
.full-pane{ width: 90%; overflow: hidden; }
.third-pane{ width: 33%; overflow: hidden; }
.two-third-pane{ width: 66%; overflow: hidden; }
.half-pane{ width: 50%; overflow: hidden; }
.split-pane{ width: 48%; overflow: hidden; }


/* page layout */
#framework{ min-height: 100%; height: auto; height: 100%; position: relative; text-align: left; }
#container, .center-page{ margin: 0 auto; width: 940px; min-width: 940px; }

#header{ width: 100%; height: 120px; clear: both; display: block; float: left; }
#header .company-title a{ position: relative; top: 40px; float: left; width: 187px; height: 39px; overflow: hidden; display: block; }
#header .company-title a span{ display: none; }

#content .left-pane{ width: 190px; margin-right: 40px; float: left; }
#content .center-pane{ width: 480px; margin-right: 40px; float: left; }
#content .right-pane{ width: 190px; float: right; }
#content .right-pane .section-nav { margin-bottom: 3em; }
#content .footer-pane{ width: 100%; clear: both; padding-top: 1em; }

#footer{ background: transparent url('/images/footer-wave.png') top left repeat-x scroll; color: #FFF; width: 100%; height: 100px; margin-top: 15px; overflow: visible; padding: 0; clear: both; float: left; }
#footer .center-page{ position: relative; top: 40px; color: #bdd666; font-size: 110%; }
#footer a{ color: #bdd666; text-decoration: none; margin: 0 3px; }
#footer a:hover{ color: #bdd666; text-decoration: underline; margin: 0 3px; }


/* navigation */
#content .main-nav{ margin-top: 0.8em; float: left; }
#content .main-nav ul.nav ul{ width: 190px; margin: 0; padding: 0; list-style: none; }
#content .main-nav ul.nav li{ padding: 0; margin: 0; float: left; width: 100%; display: block; }
#content .main-nav ul.nav li a{ line-height: normal !important; border-bottom: 1px solid #FFF; float: left; width: 190px; display: block; padding: 0.5em 0 0.5em 0; background: #EBEBEB; font-weight: bold; text-decoration: none; }
#content .main-nav ul.nav li a:hover{ padding: 0.5em 0 0.5em 0; background: #80007D url('/images/icon-arrow-white.gif') 178px 10px no-repeat; color: #FFF; text-decoration: none; }
#content .main-nav ul.nav li a.selected, #content .main-nav ul.nav li a.selected:hover{ padding: 0.5em 0 0.5em 0; background: #80007D url('/images/icon-arrow-home.gif') 175px 10px no-repeat; color: #FFF; text-decoration: none; }
#content .main-nav ul.nav li span{ text-indent: 10px; display: block; }
#content .main-nav ul.nav ul li a{ line-height: normal !important; padding: 0.5em 0 0.5em 0; border-bottom: 1px solid #EBEBEB; font-weight: normal; background: transparent url('/images/icon-arrow-grey.gif') 11px 10px no-repeat; text-decoration: none; }
#content .main-nav ul.nav ul li a:hover{ padding: 0.5em 0 0.5em 0; color: #80007D; background: #FFF url('/images/icon-arrow-grey.gif') 11px 10px no-repeat; text-decoration: underline; }
#content .main-nav ul.nav ul li a.selected, #content .main-nav ul.nav ul li a.selected:hover{ padding: 0.5em 0 0.5em 0; background: #FFF url('/images/icon-arrow-grey.gif') 11px 10px no-repeat; color: #80007D !important; text-decoration: none; }
#content .main-nav ul.nav ul li a.selected:hover{ text-decoration: underline; }
#content .main-nav ul.nav ul li span{ text-indent: 20px; }

body.homepage #content .section-nav{ margin-top: 2em; }
body.homepage #content .section-nav span { display: block; }
body.homepage #content .section-nav ul{ width: 260px; margin-top: 1em; float: left; }
body.page #content .section-nav{ margin-top: 0.8em; background: #FFF; float: left; }
body.page #content .section-nav ul{ display: block; width: 100%; margin-top: 1em; float: left; }
body.page #content .section-nav ul li{ display: block; width: 100%; border-bottom: 1px solid #EBEBEB; }
body.page #content .section-nav ul li a{ display: block; width: 190px; }
a.vragen { text-decoration: none; color: #393b3b; }
a.vragen:focus, a.vragen:hover, a.vragen:active { color: #80007D; text-decoration: underline; }
body.page .center-pane span.active { font-weight: bold; color: #80007D; }

/* content */

/* homepage banners */
#content .home-banner{ position: relative; border: 1px solid #EAEAEA; float: left; }
#content .home-banner img{ float: left; }
#content .home-banner span{ position: absolute; bottom: 0px; display: block; width: 100%; padding: 5px 8px; }
#content a.home-banner-01{ margin: 0 20px 0 0; width: 210px; height: 13.2em; display: block; background: #FFF url('/images/banner-01.jpg') top left no-repeat; text-decoration: none; }
#content a.home-banner-01:hover{ margin: 0 20px 0 0; width: 210px; height: 13.2em; display: block; color: #FFF; background: #80007D url('/images/banner-01.jpg') top left no-repeat; text-decoration: none; }
#content a.home-banner-02{ margin: 0 20px 0 0; width: 210px; height: 13.2em; display: block; background: #FFF url('/images/banner-02.jpg') top left no-repeat; text-decoration: none; }
#content a.home-banner-02:hover{ width: 210px; height: 13.2em; display: block; color: #FFF; background: #80007D url('/images/banner-02.jpg') top left no-repeat; text-decoration: none; }
#content a.home-banner-03{ width: 210px; height: 13.2em; display: block; background: #FFF url('/images/banner-03.jpg') top left no-repeat; text-decoration: none; }
#content a.home-banner-03:hover{ width: 210px; height: 13.2em; display: block; color: #FFF; background: #80007D url('/images/banner-03.jpg') top left no-repeat; text-decoration: none; }
#content a.home-banner-01:hover span, #content a.home-banner-02:hover span, #content a.home-banner-03:hover span{ background: url('/images/icon-arrow-home.gif') 90% 22% no-repeat; }


/* side banners */
#content .side-banner{ position: relative; margin-bottom: 0; display: block; float: left; cursor: pointer; }
#content .side-banner img{ float: left; }
#content .side-banner strong{ font-size: 104%; }
#content .side-banner:hover{ text-decoration: none; }
#content .side-banner span{ position: absolute; bottom: 0px; display: block; width: 178px; padding: 6px 6px; background: #FFF url('/images/bg-banner-tile.gif') top left repeat-x; font-size: 96%; }
#content a.side-banner-01{ border-left: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA; width: 190px; height: 45px; display: block; background: #FFF url('/images/banner-01.jpg') top left no-repeat; text-decoration: none; }
/*#content a.side-banner-01:hover{ width: 190px; height: 130px; display: block; color: #FFF; background: #80007D url('/images/banner-01.jpg') top left no-repeat; text-decoration: none; }*/
#content a.side-banner-02{ border-left: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA; width: 190px; height: 45px; display: block; background: #FFF url('/images/banner-02.jpg') top left no-repeat; text-decoration: none; }
/*#content a.side-banner-02:hover{ width: 190px; height: 130px; display: block; color: #FFF; background: #80007D url('/images/banner-02.jpg') top left no-repeat; text-decoration: none; }*/
#content a.side-banner-03{ border-left: 1px solid #EAEAEA; border-right: 1px solid #EAEAEA; border-bottom: 1px solid #EAEAEA; width: 190px; height: 45px; display: block; background: #FFF url('/images/banner-03.jpg') top left no-repeat; text-decoration: none; }
/*#content a.side-banner-03:hover{ width: 190px; height: 130px; display: block; color: #FFF; background: #80007D url('/images/banner-03.jpg') top left no-repeat; text-decoration: none; }*/
/*#content a.side-banner-01:hover span, #content a.side-banner-02:hover span, #content a.side-banner-03:hover span, */
#content .banner-selected span{ background: #FFF; }
#content .banner-selected{ width: 190px !important; height: 130px !important; }

/* page side teaser*/
#content .teaser-01{ position: relative; left: -40px; float: left; clear: both; height: 296px; width: 266px; background: url('/images/teaser-01.jpg') top left no-repeat; }