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

@import url("reset.css");
@import url("clearfix.css");
@import url("form.css");

body { background: #FFFFFF; color: #000000; font: 62.5% Verdana, Arial, Helvetica, sans-serif; padding-bottom: 40px; }
a { font-weight: bold; color: #759BE3; }
a:link, a:visited { text-decoration: none; }
a:hover, a:active { text-decoration: underline; }
a.more { background: url(../images/a-more.gif) no-repeat right center; padding-right: 10px; }

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

div#container { position: relative; width: 968px; margin: 0 auto; }
div#header { position: relative; height: 116px; background: url(../images/header/header.jpg) no-repeat; }
div.canvas { background: url(../images/canvas/canvas.jpg) repeat-y; width: 100%; overflow: hidden; }
div.top { background: url(../images/canvas/top.jpg) no-repeat center top; width: 100%; overflow: hidden; }
div.bottom { background: url(../images/canvas/bottom.jpg) no-repeat center bottom; width: 100%; overflow: hidden; }
div.center { position: relative; width: 928px; padding: 20px; overflow: hidden; }
div#center1 { background: url(../images/canvas/center1.gif) no-repeat 160px 20px; }
div#center2 { background: url(../images/canvas/center2.gif) no-repeat 290px 150px; }
div#left { float: left; width: 200px; padding: 0 15px 6em 15px; font-size: 1.1em; }
div#content { float: left; width: 638px; padding: 1.5em 30px 4.7em 30px; font-size: 1.1em; min-height: 270px; height: auto !important; height: 270px; }
body.home div#content { padding-left: 0; padding-bottom: 1.7em; width: 155px; }
body.home#start div#content { padding-left: 15px; width: 340px; }
div#booklet { position: absolute; width: 570px; height: 375px; top: 108px; left: 408px; z-index: 2000; font-size: 1.1em; }
div#footer { clear: both; font-size: 1.1em; }

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

div#logo { position: absolute; top: 0; left: 0; z-index: 1000; }
div#logo a { display: block; width: 282px; height: 82px; }
div#logo a span { display: none; }
div#counter { position: absolute; height: 20px; width: 325px; left: 300px; top: 51px; }

#nav { position: absolute; height: 35px; width: 843px; top: 81px; left: 62px; }
#nav li { position: absolute; top: 0; right:0; width: 130px; }
#nav li a { display: block; height: 35px; text-indent: -9999em; }
#nav li a:hover { background-position: 0 -35px;  }

#nav1 { left: 0; width: 148px !important; }
#nav1 a { background: url(/www/images/nav/leerkrachten.png); } 
#leerkrachten #nav1 { z-index: 1000; } 
#leerkrachten #nav1 a { background-position: 0 -70px; }

#nav2 { left: 128px }
#nav2 a { background: url(/www/images/nav/ouders.png); } 
#ouders #nav2  { z-index: 1000; } 
#ouders #nav2 a { background-position: 0 -70px;}

#nav3 { left: 238px }
#nav3 a { background: url(/www/images/nav/kinderen.png); } 
#kinderen #nav3 { z-index: 1000; } 
#kinderen #nav3 a { background-position: 0 -70px; }

#nav4 { left: 348px }
#nav4 a { background: url(/www/images/nav/ggd.png); } 
#ggd #nav4 { z-index: 1000; } 
#ggd #nav4 a { background-position: 0 -70px; }

#nav5 { left: 458px; width: 128px !important;  }
#nav5 a { background: url(/www/images/nav/pers.png); } 
#pers #nav5 { z-index: 1000; } 
#pers #nav5 a { background-position: 0 -70px; }

#nav6{ left: 626px; width: 134px !important;  }
#nav6 a { background: url(/www/images/nav/aanmelden.png); } 
#aanmelden #nav6 { z-index: 1000; } 
#aanmelden #nav6 a { background-position: 0 -70px; }

#nav7{ left: 750px; width: 133px !important;  }
#nav7 a { background: url(/www/images/nav/contact.png); } 
#contact #nav7 { z-index: 1000; } 
#contact #nav7 a { background-position: 0 -70px; }

#webwinkel { position: absolute; top: 10px; right: 0 }
#webwinkel a { display: block; width: 186px; height: 55px; text-indent: -999em; background: url(/www/images/nav/webwinkel.png); }
#webwinkel a:hover { background-position: 0 -55px;}

#social { position: absolute; top: 10px; right: 200px }
#social li { float: left; margin-right: 10px; }
#social a { display: block; width: 48px; height: 48px; text-indent: -999em; background: url(/www/images/nav/social.png); }
#social a.hyves { background-position: 0px 0px; }
#social a.hyves:hover { background-position: 0px -48px; }
#social a.twitter { background-position: 48px 0px; }
#social a.twitter:hover { background-position: 48px -48px; }

div#start { position: absolute; top: 62px; right: 15px; z-index: 1000; }
div#start a { display: block; width: 33px; height: 44px; background: url(../images/header/start.gif) no-repeat; }
div#start a span { display: none; }

/* Left ------------------------------------------------- */
/* ------------------------------------------------------ */

div#left ul#menu li.level0 { font-size: 2em; letter-spacing: -0.2em; margin-bottom: 0.2em; }
div#left ul#menu li.level1 { font-size: 1.4em; letter-spacing: -0.2em; margin-bottom: 0.3em; }
div#left ul#menu li.level2 { font-size: 1.2em; letter-spacing: -0.1em; padding-left: 1em; margin-bottom: 0.3em; }
div#left ul#menu li a { color: #E44E35; }

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

div#content h1 { margin-bottom: 1em; font-size: 1.4em; color: #E44E35; background: url(../images/content/line.gif) no-repeat left bottom; padding-bottom: 0.8em; text-transform: uppercase; }
div#content h2 { font-weight: bold; color: #E44E35; line-height: 1.5em; }
div#content p, div#content ul { line-height: 1.5em; }
div#content p { padding-bottom: 1.1em; }
div#content ul { list-style: disc; margin: 1.1em 2.2em; }
div#content table { margin-bottom: 1.1em; }
div#content table td { vertical-align: top; padding: 0.4em; }
div#content p em { color: #BBCD3F; font-weight: bold; }
div#content strong { font-weight: bold; }
div#content ul.results { margin: 1.1em 0 1.1em 0; padding: 0; list-style: none; }
div#content ul.pages { margin: 1.1em 0 1.1em 0; padding: 0; list-style: none; }
div#content ul.pages li { display: inline; margin-right: 1em; }

/* Bottom bar ------------------------------------------- */
/* ------------------------------------------------------ */

div#bottombar { position: relative; margin: 0 20px; padding: 20px; background: url(../images/bottombar/bg.gif) repeat-x; font-size: 1.1em; }
div#bottombar div.lead { padding: 10px 15px; }
div#bottombar h2 { font-size: 1.9em; color: #759BE3; }
div#bottombar div.title { background: url(../images/bottombar/circle.gif) no-repeat left center; margin-bottom: 15px; padding: 10px 0 10px 15px; height: 26px; }
div#bottombar h3 { font-size: 2em; color: #E44E35; }
div#bottombar h4 { color: #E44E35; font-weight: bold; }
div#bottombar h4, div#bottombar p, div#bottombar ul { line-height: 1.5em; }
div#bottombar div.lead { position: absolute; top: -40px; background: url(../images/bottombar/lead.gif) no-repeat; height: 43px; width: 217px; z-index: 2000; }
div#bottombar div.blocks { background: url(../images/bottombar/dots.jpg) repeat-y center top; }
div#bottombar div.left { float: left; width: 434px; padding-right: 10px; }
div#bottombar div.right { float: left; width: 434px; padding-left: 10px; }
div#bottombar ul li { padding: 0 15px 1.6em 15px; background: url(../images/bottombar/line.gif) no-repeat center bottom; margin-bottom: 1.6em; height: 6em; }
body.home#start div#bottombar ul li { margin-bottom: 0; }
div#bottombar ul li.last { background: none; padding-bottom: 0; }
div#bottombar ul.news li { float: left; width: 414px; }

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

div#footer { padding: 10px 40px; background: url(../images/footer/bg.jpg) no-repeat center top; }
div#footer, div#footer a { color: #989898; font-weight: normal; }
div#footer a { text-decoration: underline; }
div#footer ul li { float: left; margin-right: 10px; }
div#footer ul li.project { float: right; width: 550px; text-align: center; }
div#footer ul li.rng { float: right; margin: 0; }
div#footer ul li.rng a { display: block; position: relative; background: url(../images/footer/rutgers-wpf.png) no-repeat center center; height: 25px; width: 80px; }
div#footer a span { display: none; }

/* Terms ------------------------------------------------ */
/* ------------------------------------------------------ */

div#terms { position: relative; width: 460px; margin: 2em auto; }
div#terms h1 { margin-bottom: 1.5em; font-size: 1.4em; color: #E44E35; background: url(../images/content/line.gif) no-repeat left bottom; padding-bottom: 0.8em; }
div#terms ul { list-style: disc; margin: 1.1em 2.2em; }