/* GENERAL STYLES
---------------------------------------------------------------------------------------------- */
body { margin: 0; padding: 0; font-family: "Helvetica", "Arial", sans-serif; color: #111D46; background: #111D46; text-align: center; }

a { color: #304797; }
a:link { color: #304797; }
a:visited { color: #364372; }
a:active { color: #071030; }
a:hover { color: #2C3861; }

address
{
	font-style: normal;
	margin: 0 0 15px 0;
}
    
.cleaner { clear: both; height: 1px; font-size: 1px; border: none; margin: 0; padding: 0; background: transparent; }
.current a { text-decoration: none; font-weight: bold; }
   
hr { height: 1px; }
img { border: none; }

h1 { margin: 0 0 0.4em 0; font: lighter 250%/100% "Helvetica", "Arial", sans-serif; }
h2 { font: lighter 160%/120% "Helvetica", "Arial", sans-serif; margin: 0; }
h3 { font: bold 110%/100% "Helvetica", "Arial", sans-serif; margin: 2em 0 0 0; }
h4 { font: 105%/110% "Helvetica", "Arial", sans-serif; margin: 15px 0 5px 0; }


/* OUTER CONTAINER
---------------------------------------------------------------------------------------------- */
#outerspan { width: 600px; margin: 0 auto 0 auto; background: #D7DDEF; text-align: left; }

/* HEADER
---------------------------------------------------------------------------------------------- */
#header { background: #111D46 url("/img/bg-header.gif") left top no-repeat; width: 600px; height: 302px; margin: 0; }
#header h1 { margin: 0; }
#header a { color: #8A95BC; }
#header p { color: #8A95BC; margin: 0 0 0 100px; font-size: 80%; line-height: 140%; position: absolute; top: 180px; width: 400px; }

.skipnavigatie { position: absolute; left: -1000px; width: 990px; font-size: 1%; line-height: 1; display: none; }

#logo { position: absolute; top: 26px; background: url("/img/octogram-logo.gif") 62px 0px transparent no-repeat; width: 600px; height: 150px; }
#logo span { visibility: hidden; }
#logo a { display: block; text-decoration: none; height: 150px; }

/* TOPNAVIGATIE
---------------------------------------------------------------------------------------------- */
#topnav { padding: 0; width: 600px; position: absolute; top: 285px; margin: 0; height: 17px; }
#topnav ul { list-style: none; padding: 0; margin: 0 0 0 2px; }
#topnav li { float: left; padding: 0px; margin: 0px; }
#topnav li a { display: block; float: left; text-decoration: none; margin: 0; padding: 0; color: #fff; font: lighter 110% "Helvetica Light", "Helvetica", sans-serif; height: 17px; }
	
/* nederlands home modell */
li#home/* hide ie5 */{  width: 100px; }
li#home a {width: 125px; }
li#home.current a, li#home a:hover {color: rgb(82,112,223); width: 100px; }

/* nederlands quinn modell */
li#quinn/* hide ie5 */{ width: 165px; }
li#quinn a { width: 165px; }
li#quinn.current a, li#quinn a:hover {color: rgb(165,146,250); width: 165px;  }

/* styles */
li#styles/* hide ie5 */{width: 120px; }
li#styles a {  width: 120px; }
li#styles.current a, li#styles a:hover {color: rgb(242,197,38); no-repeat; width: 120px; }

/* nederlands faq */
li#faq/* hide ie5 */{ width: 100px; }
li#faq a {  width: 100px; }
li#faq.current a, li#faq a:hover {color: rgb(250,48,49); no-repeat; width: 100px;  }

/* nederlands test */
li#test/* hide ie5 */{  width: 100px; }
li#test a {  width: 100px; }
li#test.current a, li#test a:hover { color: rgb(9,207,15); no-repeat; width: 100px;  }


/* CONTENT (ALL CONTENT IN THIS DIV CONTAINER)
---------------------------------------------------------------------------------------------- */
#content { background: #D7DDEF url("/nl/img/bg-subnav.jpg") left top no-repeat; text-align: left; width: 600px; float: left; }

/* Inline navigatie, top of page */
.subnav { font-size: 80%; color: #333; margin: 25px 0 0 35px; }
.subnav a, .subnav a:link { text-decoration: none; border-bottom: 1px dotted #304797; }
.subnav a:hover { text-decoration: none; border-bottom: none; }
.subnav .current a { font-weight: bold; border: none; color: #2C3861; }
.subnav ul { margin: 0; padding: 0; }
.subnav li { list-style: none; float: left; display: block; padding-left: 8px; padding-right: 8px; border-left: 1px solid #5C6FB1; margin: 0; }
.subnav .first { border-left: none; padding-left: 0; }

/* SIDEBAR (SIDEBAR RIGHT, ON SOME PAGES)
---------------------------------------------------------------------------------------------- */
#sidebar {
	position: absolute;
	width: 170px;
	top: 347px;
	padding: 0 0 0 0;
	margin-left: 400px;
	font-size: 70%;
	line-height: 125%;
	}
	
/* Yellow promoblock */
.promoblock { border: 1px solid #F2C02B; background: #F2E2B1; width: 165px; }

.b1, .b2, .b3, .b4 { position: relative; }
.b1 { background: url("/nl/img/promo-top-left.gif") transparent top left no-repeat; top: -1px; left: -1px; }
.b2 { background: url("/nl/img/promo-top-right.gif") transparent top right no-repeat; right: -2px; }
.b3 { background: url("/nl/img/promo-bottom-right.gif") transparent bottom right no-repeat; bottom: -2px; }
.b4 { background: url("/nl/img/promo-bottom-left.gif") transparent bottom left no-repeat; left: -2px; padding: 0 7px 15px 10px; }

.promoblock h2 { background: url("/nl/img/promoblock-img_nl.jpg") 12px 0px no-repeat; width: 140px; margin: 0; }
.promoblock #sample-report { background: url("/nl/img/promoblock-img2_nl.jpg") 12px 0px no-repeat; width: 140px; margin: 0; }
.promoblock h2 a { display: block; height: 141px; margin: 0; }
.promoblock h2 span { display: none; }
.promoblock p { margin: 0 5px 0 5px; padding: 0; }


/* MAIN (MAIN LEFT CONTENT)
---------------------------------------------------------------------------------------------- */
#main { font: 80%/140% "Verdana", "Arial", "Helvetica", sans-serif; text-align: left; width: 370px; }

/* GENERAL STYLES */
#innerdiv { margin: 0 0 20px 35px; padding-bottom: 45px; padding-top: 20px; }

#main .intro { font-weight: bold; font-size: 100%; line-height: 150%; }  
#main ul { margin: 10px 0 15px 15px; text-indent: 0; padding: 0; }
#main ul li { margin: 0 0 7px 0; line-height: 130%; padding: 0 0 0 17px; text-indent: 0; }
#main img { padding: 20px 30px 20px 30px; border: 1px dotted #A1A8C1; }

/* Tables */
table { border: 1px solid #A1A8C1; border-top: none; width: 500px; background: #E0E4F2; }
	
th, td { padding: 5px 6px 3px 6px; border: 1px solid #A1A8C1; font: 90%/110% "Helvetica", sans-serif; }
td { border-right: none; border-bottom: none; }
td:first-child { border-left: none; }
th { border-bottom: none; border-right: none; font-weight: bold; background: #C2C8DD; }
th:first-child { border-left: none; }
	
/* Definition lists (faq) */
dt { font-weight: bold; }
dd { margin: 5px 0 15px 0; }
	
/* external links, double stars in comment is hiding it from ie5 windows, who won't give padding-right to inline elements */
.external/**/ {
	background: url("/img/external.gif") 100% 40% no-repeat;
	padding-right: 10px;
	}

/* FORMULIEREN STYLES
---------------------------------------------------------------------------------------------- */
#content form { margin: 15px 0 0 0; width: 420px; }

/* container block items */
#content form .blok  {
	background: #C2C8DD;
	border-top: 1px solid #A1A8C1;
	float: left;
	display: block;
	width: 520px;
	}

/* Special styles contactformulier */	
#contactpage form { width: 520px; }
#contactpage form .blok { width: 493px; }

#content form .blok:first-child { border-top: none; }
	
/* Optional field, if function not shown */
#content form .exception, #content form .exception span { background: #D5D9E9; }
#content form .exception { border-top: 1px solid #C2C8DD; }

/* text */
form span {
	width: 175px;
	display: block;
	float: left;
	padding: 3px 12px 9px 15px;
	margin: 0;
	background: #E3E6F3;
	border-right: 1px dotted #A1A8C1;
    }

/* input & select fields */
.text { width: 150px; margin: 5px 15px 0 15px; }

textarea {
	width: 250px;
	margin: 5px 15px 0 15px;
	height: 145px;
	}


/* mac ie5, windows, commented backslash hack v2 \*/
select.text { width: 154px; }
* html select.text { width: 156px; }
/* end hack */
	
.blok small { font: 90%/100% "Helvetica", sans-serif; color: #415392; }
.submit { padding: 0 4px 0 4px; width: 50px; margin: 10px 0 0 0; }

/* mac ie5, commented backslash hack v2 \*/
.submit { padding: 0 4px 0 4px; vertical-align: top; width: auto; }
/* end hack */ 
    
input.error, textarea.error { border: 2px solid #f30; }
.error { color: #f30; font-weight: bold; }


/* FOOTER
---------------------------------------------------------------------------------------------- */
#footer { color: #A1A8C1; font-size: 70%; height: 46px; width: 600px; margin: 0 auto 0 auto; text-align: center; border-top: 1px solid #fff; }

.bg-footer { background: #C2C8DD url("/img/footer-corner-right.gif") right bottom no-repeat; text-align: left; }
.footernav { height: 46px; background: url("/img/footer-corner-left.gif") left bottom no-repeat; }

#footer ul { margin: 0 0 0 35px; padding: 15px 0 0 0; }
#footer li { list-style: none; float: left; display: block; padding-left: 8px; padding-right: 8px; border-left: 1px solid #999; margin: 0; }
#footer .first { border-left: none; padding-left: 0; }
	
.copyright p { border-top: 1px dotted #576286; padding-top: 3px; margin-top: 8px; }
.copyright { padding: 10px 15px 0 15px; color: #A1A8C1; font: 90%/120% "Arial", "Helvetica", "Arial", sans-serif; text-align: left; height: 56px; }
.copyright a { color: #A1A8C1; }