/* ----------------------------------------------------------- */
/* Copyright 2000-2009 (Non-)verbaal, http://www.nonverbaal.nl */
/* ----------------------------------------------------------- */

@import url("reset.css");
@import url("clearfix.css");
@import url("form.css");
/* Elements -------------------------------------------------- */
/* ----------------------------------------------------------- */

body { color: #000; font: 62.5% Verdana, Geneva, sans-serif; background: #FFF url(../images/bg.png) repeat-x; }
body.three-cols #content { width: 450px; float: right; }
a { text-decoration: none; color: #3F0C59; font-weight: 700; outline: none; }
a:hover, a:active { text-decoration: underline; }
h1 { font-size: 2.5em; color: #0A0064; margin-bottom: 1em; }
em { font-style: italic; }
strong { font-weight: 700; }
table { margin-bottom: 2em; }
table th, table td { vertical-align: top; padding: .5em 1em .5em 0; }
.margintop { margin-top:2em; }

/* Basic structure ------------------------------------------- */
/* ----------------------------------------------------------- */

#container { position: relative; width: 980px; margin: 0 auto; }
#canvas { float: left; width: 100%; background-repeat: repeat-y; background-position: right top; background-image: url(../images/canvas/bg.png); }
#main { float: right; width: 710px; padding:0 15px; margin-top: 160px; }
#header { position: relative; width: 100%; font-size: 1.1em; }
#wrap { float: left; position: relative; width: 690px; margin: 2em 0 1em; padding: 35px 10px 10px 10px; }
#content { position: relative; width: 100%; font-size: 1.1em; }
#sidebar { float: left; position: relative; margin-top: 300px; width: 230px; font-size: 1.1em; }
#logo { position: absolute; top: 30px; left: 0; }
#quicklink { position: absolute; top: 0; right: 15px; }
#nav { position: absolute; top: 110px; left: 245px; width: 730px; z-index:1000; }
#footer { float: right; position: relative; width: 710px; height:120px; padding: 10px; font-size: 1.1em; margin-right:5px; background-image: url(/www/images/footer/background.png); background-repeat: repeat-x; }

/* Classes --------------------------------------------------- */
/* ----------------------------------------------------------- */

.border { border: 1px solid #D7E3F1; }
.hidden { display: none; visibility: hidden; }
.ucase { text-transform: uppercase; }
.justified { text-align: justify; }
.more { color: #400D5A; font-size: 1.2em; text-transform: uppercase; }
.float-left { float: left; margin-right: 1em; margin-bottom: 1em; }
.float-right { float: right; margin-left: 1em; margin-bottom: 1em; }
.three-cols .col { float: left; width: 196px; padding-right: 30px; margin-right: 13px; }
.three-cols .last { margin-right: 0; padding-right: 0; background: none !important; }
.item { margin-bottom: 1em; }
.items { margin: 1em 0; }
a.callme { background: url(../images/callme.png) no-repeat; width: 230px; height: 53px; display: block; text-indent: -9999em; outline: none; }
div.row { border-top:1px solid #D3E4F5; margin: 0 0 20px 20px; margin-left:0; padding:20px 10px 10px 10px; padding-left:0; }
div.section { padding: 10px; border: 1px solid #D3E4F5; margin-bottom: 1em; }
ul.list { margin: 0 !important; list-style: none !important; }
ul.list li { background: url(../images/li.gif) no-repeat left center; padding-left: 10px; }
.msg-head { text-decoration: none; color: #74A5C9; font-weight: 700; cursor: pointer; }
.msg-body { background: none !important; display: none; }

/* Subnav ---------------------------------------------------- */
/* ----------------------------------------------------------- */

div.sub-nav { font-size: 1.2em; letter-spacing: 1px; margin-bottom: 1em; }
div.sub-nav ul { font-size:1.2em; }
div.sub-nav ul ul { margin:0 0 1em 0; color:#8DBAE6; font-size:0.9em; }
div.sub-nav a { color: #8EBBE7 !important; padding: 1.2em 2em 1.2em 0; }
div.sub-nav ul ul a { padding: 1em 2em 0.6em 2em; background: url(/www/images/sub-nav/subitem.png) no-repeat 8px 18px !important; }
div.sub-nav ul ul .selected, div.sub-nav ul ul a:hover { background: url(/www/images/sub-nav/subitem-selected.png) no-repeat 8px 18px !important; }
div.sub-nav a:hover { color: #3F0C59 !important; text-decoration: none; }
div.sub-nav a.selected { color: #3F0C59 !important; }
div.sub-nav a.section { color: #400D5A; }
div.sub-nav li { border-bottom: 1px solid #E7EEF5; }
div.sub-nav li a { display: block; background: url(../images/sub-nav/sub-nav.gif) no-repeat right center; }
div.sub-nav li a:hover, div.sub-nav li .selected { display: block; background: url(../images/sub-nav/sub-nav-selected.gif) no-repeat right center; }
div.sub-nav li.last, div.sub-nav li li { border: none; }
div.sub-nav li li a, div.sub-nav li li a:hover, div.sub-nav li li a.selected { background: none; text-transform: none; }

/* Logo ------------------------------------------------------ */
/* ----------------------------------------------------------- */

#logo a { display: block; width: 235px; height: 158px; text-indent: -9999em; background: url(../images/logo.png) no-repeat; outline: none; }

/* Nav ------------------------------------------------------- */
/* ----------------------------------------------------------- */

#nav ul { float:left; width: 100%; list-style: none; white-space:nowrap; }
#nav li { height:30px; float: left; position: relative; }
#nav li a { height:30px; color:#000; float: left; text-decoration:none; }
#nav ul ul { width:230px; position: absolute; top: -9999px; left: 20px; padding:12px 0 1px 10px; font-size: 12px; z-index: 1000; background-color: transparent; background-image: url(/www/images/subnav.png); background-repeat: no-repeat; background-position: right bottom; }
#nav #list-actueel { left: 12px !important; }
#nav #list-in-de-praktijk { left: 17px !important; }
#nav ul li a { color:#A3C5EB; }
#nav ul li a:hover { color:#FFF; }
#nav ul ul li { height:22px; margin-bottom:6px; float:none; display:block; width:214px; color: #fff; border-bottom:1px solid #663D7B; }
#nav ul ul li a { width:200px; }
#nav ul .last { margin-bottom:0; border-bottom:none; }
#nav-actueel, #nav-over-daad, #nav-voor-werkgevers, #nav-in-de-praktijk { display: block; text-indent: -9999em; outline: none; background-repeat: no-repeat; background-image: url(../images/nav.png); }
#nav-actueel { height: 30px; background-position: 0px 0px; width: 124px; }
#nav-over-daad { background-position: -124px 0px; width: 161px; }
#nav-voor-werkgevers { background-position: -285px 0px; width: 249px; }
#nav-in-de-praktijk { background-position: -534px 0px; width: 195px; }
body#actueel #nav-actueel { background-position: 0px -30px; }
body#over-daad #nav-over-daad { background-position: -124px -30px; }
body#voor-werkgevers #nav-voor-werkgevers { background-position: -285px -30px; }
body#in-de-praktijk #nav-in-de-praktijk { background-position: -534px -30px; }
.hover #nav-actueel, #nav-actueel:hover { background-position: 0px -60px !important; }
.hover #nav-over-daad, #nav-over-daad:hover { background-position: -124px -60px !important; }
.hover #nav-voor-werkgevers, #nav-voor-werkgevers:hover { background-position: -285px -60px !important; }
.hover #nav-in-de-praktijk, #nav-in-de-praktijk:hover { background-position: -534px -60px !important; }

/* Quicklink ------------------------------------------------- */
/* ----------------------------------------------------------- */

#quicklink ul li { float: left; }
#quicklink ul li a { display: block; height: 87px; text-indent: -9999em; outline: none; background-repeat: no-repeat; background-image: url(../images/quicklink.png); width:88px; margin:0 0.5em 0 0; }
#quicklink-home a { background-position: 0px 0px; }
#quicklink-contact a { background-position: -92px 0px; }
#quicklink-bel-mij a { background-position: -187px 0px; }
body#home #quicklink-home a, #quicklink-home a:hover { background-position: 0px -87px; }
body#contact #quicklink-contact a, #quicklink-contact a:hover { background-position: -92px -87px; }
body#bel-mij #quicklink-bel-mij a, #quicklink-bel-mij a:hover { background-position: -187px -87px; }

/* Main ------------------------------------------------------ */
/* ----------------------------------------------------------- */

#main p { margin-bottom: 1em; }
#main p, #main ul, #main ol, #main th, #main td { line-height: 1.6em; }

/* Header ---------------------------------------------------- */
/* ----------------------------------------------------------- */

#header { color: #FFF; }
body.employers #header { background-image: url(../images/header/employers.jpg); height: 300px; }
#header a.submit { background-repeat: no-repeat; height: 24px; display: block; text-indent: -9999em; outline: none; }
#header a.next { background-image: url(../images/header/bt-next.gif); width: 97px; }
#header a.send { background-image: url(../images/header/bt-send.gif); width: 108px; }
#carrousel div.front { position: absolute; top: 45px; left: 250px; width: 400px; }
#carrousel h2 { color: #FFF; font-size: 2.2em; font-weight: 700; letter-spacing: 1px; margin-bottom: .5em; }
#carrousel h3 { color: #FFF; font-size: 1.3em; font-weight: 700; letter-spacing: 1px; margin-bottom: 1em; }
.section h3 { color:#3F0C59 !important; }
#pager { position: absolute; top: 370px; right: 20px; z-index: 1000; }
#pager a { float: left; display: block; width: 10px; height: 10px; background: #8EBBE7; text-indent: -9999em; margin-right: 10px; outline: none; }
#pager a.activeSlide { background: #FFF; }

/* Content --------------------------------------------------- */
/* ----------------------------------------------------------- */

#content h2 { font-size: 1.9em; letter-spacing: 1px; margin-bottom: .5em; }
#content h2, #content h2 a { font-weight: 400; color: #0A0164; text-decoration: none; }
#content h2 span { margin-bottom: 5px; display: block; }
#content div.subtitle h2 { margin: 0; }
#content h3 { font-size: 1.5em; letter-spacing: 1px; margin-bottom: 1em; }
#content h3, #content h3 a { font-weight: 700; color: #8EBBE7; text-decoration: none; }
#content h3 a:hover { color: #8EBBE7; }
#content h3.icon { position: relative; background-repeat: no-repeat; background-position: left center; padding: 1em 0 1em 50px; }
#content h3.wie-is-daad { background-image: url(../images/menu/icon-wie-is-daad.png); }
#content h3.daad-en-werknemers { background-image: url(../images/menu/icon-daad-en-werknemers.png); }
#content h3.daad-en-de-regio { background-image: url(../images/menu/icon-daad-en-de-regio.png); }
#content h3.daad-en-vacaturevervulling { background-image: url(../images/menu/icon-daad-en-vacaturevervulling.png); }
#content h3.daad-en-subsidie { background-image: url(../images/menu/icon-daad-en-subsidie.png); }
#content ul { list-style: disc; margin: 1em 2em; }
#content ul ul { list-style: circle; }
#content ol { list-style: decimal; margin: 1em 2em; }
#content .three-cols .col { background: url(../images/content/vr.gif) repeat-y right 0px; }
#content div.intro { float: left; width: 100%; }
#content div.intro, #content div.subtitle { min-width:220px; margin-bottom: 1em; }
#content div.intro p a { color: #3F0C59; }

/* Footer ---------------------------------------------------- */
/* ----------------------------------------------------------- */

#footer, #footer a { color: #3F0C59; }
#footer ul { }
#footer ul li { display:block; width:220px; height:30px; float:left; }
#footer ul li a { background: transparent url(/www/images/footer/icons.png) no-repeat 0px 0px; display:block; width:220px; height:22px; }
.footer-contact a { background-position: 0px -60px !important; }
.footer-sitemap a { background-position: 0px -120px !important; }
.footer-youtube a:hover { background-position: 0px -30px !important; }
.footer-contact a:hover { background-position: 0px -90px !important; }
.footer-sitemap a:hover { background-position: 0px -150px !important; }
#footer div { position:absolute; top:15px; height:120px; }
#footer .left { left:2em; width:460px; }
#footer .right { right:2em; padding-left:2em; }
.bottom { position:absolute; bottom:1.2em; left:2.2em; }
.bottom a { font-weight:normal; }
#footer ul li a { display:block; padding:8px 3.5em 0; }

/* Sidebar --------------------------------------------------- */
/* ----------------------------------------------------------- */

#sidebar h2 { font-size: 2.5em; letter-spacing: 1px; }
#sidebar .date { color:#9FACB8; }
#sidebar h2, #sidebar h2 a { font-weight: 700; color: #8EBBE7; text-decoration: none; }
#sidebar div.reference h2 { text-transform: uppercase; text-align: center; }
#sidebar h3 { font-size: 1.6em; letter-spacing: 1px; margin-bottom: 1em; }
#sidebar h3, #sidebar h3 a { font-weight: 700; color: #8DBAE6; text-decoration: none; }
#sidebar a { color:#3F0C59; }
#sidebar h4 { font-weight: 700; margin-bottom: 1em; }
#sidebar p { line-height: 1.6em; color:#0A0164; }
#sidebar div.item { padding: 0.5em 1em 1.6em 0; margin-bottom: 1em; border-bottom: 1px solid #E7EEF5; }
#sidebar div.item.last { border-bottom: none; margin-bottom:4em; }
#sidebar div.reference { border: 1px solid #E7EEF5; text-align:center; padding: 5em 0; margin-bottom: 1em; }
#sidebar div.reference.small { padding:2em 0; }

/* Menu ------------------------------------------------------ */
/* ----------------------------------------------------------- */

#menu { float: left; position: relative; width: 230px; font-size: 1.1em; }
#menu li { position: relative; background: url(../images/menu/dash.gif) repeat-x 0px bottom; padding: .5em 0; }
#menu a { font-weight: 400; color: #400D5A; display: block; }

/* Breadcrumbs ----------------------------------------------- */
/* ----------------------------------------------------------- */

#bread { font-size: 1.1em; margin-bottom: 2em; }
#bread ul li { display: inline; margin-right: 1em; background: url(../images/li.gif) no-repeat left center; padding-left: 10px; }
#bread ul li a { text-decoration: underline; }
#bread .first { background:none; padding-left:0; }

/* Chapters -------------------------------------------------- */
/* ----------------------------------------------------------- */

.chapters { margin: 1em 0 0 !important; list-style: none !important; }
.chapters .chapter { float: left; display:block; width:300px; margin: 0 3em 3em 0; overflow:hidden; height:100px; }
.chapter .left a { width: 120px; height: 90px; display: block; text-indent: -9999em; background-repeat: no-repeat; }
.chapter .left { border: 1px solid #E7EEF5; padding:3px; width:120px; }
.chapter .right a { padding:0.7em 1em; width:140px; height: 100px; display: block; font-weight:normal; color:#000; }
.chapter .right a:hover { text-decoration:none; }
.chapter .left, .chapter .right { float:left; }

/* Counter --------------------------------------------------- */
/* ----------------------------------------------------------- */

.counter span { display:block; height:70px; width:43px; float:left; background: transparent url(/www/images/counter.png) -4px 0px; text-indent:-9999px; margin-right:1px; }
.counter .item-2 { background-position: -49px 0px; }
.counter .item-3 { background-position: -93px 0px; }
.counter .item-4 { background-position: -137px 0px; }
.counter .item-5 { background-position: -181px 0px; }
.counter .item-6 { background-position: -225px 0px; }
.counter .item-7 { background-position: -269px 0px; }
.counter .item-8 { background-position: -313px 0px; }
.counter .item-9 { background-position: -357px 0px; }
.counter .item-0 { background-position: -401px 0px; }
.breadcrumbs { position:absolute; top:0; left:10px; }
.breadcrumbs li { float:left; margin-right:1em; color:#999; }
.breadcrumbs li a { font-weight:normal; color:#999; margin-left:0.5em; }
.references-overview div { margin:1.5em 1.5em 0 0; padding:1em 0.5em; display:block; border:1px solid #E7EEF5; }

#thumbs {  float: left; width: 100%;  }
#thumbs ul { margin: 0; list-style: none; }
#thumbs li { float: left; width: 128px; height: 128px; margin-bottom: 5px; margin-right: 5px; }
#gallery { float: left; width: 100%; margin-bottom: 1em }
div.pages { margin: 2em 0; font-size: .9em; }
div.pages ul { list-style: none !important; margin: 0 !important; }
div.pages li { display: inline; padding: 4px 7px 2px; border: 1px solid #D7E3F1; margin-right: 2px; }
div.pages li.selected { background-color: #D7E3F1; color: #FFF; font-weight: 700; }
div.pages a { color: #74A5C9; text-decoration:none; }