﻿/* 
Kleuren
-------
Groen:  #2d9400 #bed81d #d7eb5b #f1fe99
Bruin:  #4c1411
Oranje: #da6a27
Geel:   #fffdea
*/

/* HTML */
html {
    overflow-y: scroll; /* Forceer scrollbar */
}
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    font-size: 9pt;
    background: url(../images/background.png) repeat-x;
    background-color: #f1fe99;
}
p {
    margin-bottom: 1em;
}
h1 { /* Logo */
    margin-top: 20px;
}
h2 {
    color: #2d9400;
    font-size: 12pt;
    margin-bottom: 1em;
}
h3 { 
    margin-top: 1em;
    color: #2d9400;
    font-size: 9pt;
    font-weight: bold;
}
h4 {
    font-size: 9pt;
}
a {
    text-decoration: none;
}
h2 a {
    color: #2d9400 !important;
}
h2 a:hover {
    text-decoration: none !important;
}
hr {
    height: 1px;
    background-color: #2d9400;
    border: none;
}

/* Structuur */
#site { /* Centreert alle inhoud */
    width: 968px;
    margin: 0 auto;
}
#top { /* Alles behalve de footer */
    background: url(../images/top.png) repeat-y;
}
#top .container_16 {
    min-height: 700px;
    background: url(../images/watermark.png) no-repeat bottom left;
}
#bottom { /* Footer met afgeronde hoeken */
    margin-bottom: 50px;
    padding: 10px 0 20px 0;
    background: url(../images/bottom.png) no-repeat bottom;
}

h1#logo a {
    display: block;
    height: 100px;
    width: 100%;
    background: url(../images/logo.png) no-repeat;
    text-indent: -1000px;
}

#content { /* Tussen logo en footer */
    padding: 20px 0;
}

/* Zoekveld */
#tools {
    float: right;
    margin-top: 30px;
}
#tools .button {
    margin-left: 5px;
    vertical-align: bottom;
}
#tools .watermark {
    font-style: italic;
    color: #888888;
}

/* Navigatie links */
#navigation ul, #navigation li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
#navigation li {
    margin: 2px 0;
}
#navigation li li {
    margin: 0;
}
#navigation a {
    display: inline-block;
    padding: 7px 0 7px 40px;
    width: 180px; /* 220 - 40 */
    color: #4c1411;
}
#navigation li.CMSListMenuHighlightedLI { /* Menu open */
    background-color: #f1fe99;
}
#navigation a:hover, #navigation li.CMSListMenuHighlightedLI a { /* Links op het 1e niveau */
    background: #bed81d url(../images/triangle.png) no-repeat 20px center;
}
#navigation li li a { /* Links op het 2e niveau (menu open) */
    padding-left: 55px;
    width: 165px; /* 220 - 55 */
    background: transparent url(../images/circle.png) no-repeat 42px center !important;
}
#navigation li li a:hover, #navigation li li.CMSListMenuHighlightedLI a {
    background-color: #d7eb5b !important;
}

/* Elementen in de rechterkolom */
#sidebar .image { 
    margin-bottom: 20px;
}
#sidebar .widget { /* Algemene gegevens (nieuws, agenda) */
    min-height: 150px;
    padding: 20px 15px 0 15px;
    background: url(../images/widget.png) no-repeat;
    margin-bottom: 20px;
}

#main, #sidebar {
    line-height: 1.7em;
}

/* Stijlen in de middelste kolom */
#main a {
    color: #da6a27;
}
#main a:hover {
    text-decoration: underline;
}

#main ul {
    margin: 1em 0;
}
#main h3 + ul {
    margin-top: 0;
}
#main ul, #main ul li {
    list-style-type: none;
}
#main ul li {
    padding-left: 20px;
    background: url(../images/list.png) no-repeat left 5px;
}

/* Extra navigatie in de footer */
#bottom .links {
    text-align: right;
    color: #4c1411;
}
#bottom .links a {
    color: #4c1411;
}
#bottom .links .separator {
    padding: 0 5px;
}
#bottom .links a:hover {
    text-decoration: underline;
}

/* Afgeronde hoeken voor afbeeldingen */
.mask { 
    position: relative;
}
.mask div { /* Elke hoek is een div */
    position: absolute;
    width: 10px;
    height: 10px;
}
.mask .tl { background-image: url(../images/mask-tl.png); top: 0; left: 0; }
.mask .tr { background-image: url(../images/mask-tr.png); top: 0; right: 0; }
.mask .bl { background-image: url(../images/mask-bl.png); bottom: 0; left: 0; }
.mask .br { background-image: url(../images/mask-br.png); bottom: 0; right: 0; }
.mask img {
    width: 100%;
}
.mask a {
    outline: none;
}

/* Banner op homepage */
div#banner {
    margin-bottom: 20px;
}

/* Nieuwsoverzicht, agenda */
p.more {
    text-align: right;
}
a.more {
    display: inline-block;
    padding-right: 30px;
    line-height: 22px;
    background: url(../images/diamond.png) no-repeat right center;
    font-weight: bold;
}
hr.margin {
    margin: 10px 0;
}
/* Terug knop */
p.back {
    text-align: right;
}
a.back {
    display: inline-block;
    padding-right: 30px;
    line-height: 22px;
    background: url(../images/back.png) no-repeat right center;
    font-weight: bold;
}
hr.margin {
    margin: 10px 0;
}

/* Agenda en cursussen */
.event .date, .course .date {
    float: left;
    padding-left: 20px;
    background: url(../images/list.png) no-repeat left center;
}
.event a, .course a {
    display: block;
    text-align: right;
    color: #4c1411 !important;
}
div.courses {
    margin: 1em 0;
}
.courses li, .courses div {
    margin-bottom: 3px;
    padding-bottom: 3px;
    border-bottom: 1px solid #2d9400;
}
.courses div a {
    color: #da6a27 !important;
}

/* Links */
.link a {
    padding-left: 20px;
    background: url(../images/list.png) no-repeat left center;
    color: #4c1411 !important;
    font-weight: bold;
}
.link img {
    float: right;
    margin: 5px 0 10px 10px;
}
.link p {
    padding-left: 20px;
}

/* Sidebar widgets */
.widget h4 a {
    color: #000000 !important;
}
.widget a {
    color: #da6a27;
    display: inline-block;
}
.widget a:hover {
    text-decoration: underline;
}
.widget p.more {
    text-align: right;
    margin-top: 10px;
}

.widget ul, .widget li {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.widget li {
    padding-left: 20px;
    background: url(../images/list.png) no-repeat left 5px;
}

.vcard dt {
    float: left;
    font-weight: bold;
}
.vcard dd {
    margin-left: 20px;
}

/* Formulieren */
.form input, .form select, .form .display {
    padding: 3px;
    margin-bottom: 10px;
    margin-left:0px;
}
.form .errors {
    color: #4c1411 !important;
}
 input.wide {
     Width:90%; 
     margin:0 0 1 0px ;
    
}
.form span.radio {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.form span.radio input { 
    margin-bottom: 0px;
}
.form span.radio label {
    padding-left: 5px;
}

/* Afgeronde hoeken in het menu */
#navigation ul, #navigation li {
    position: relative;
}
#navigation .c {
    position: absolute;
    width: 5px;
    height: 5px;
    background-repeat: no-repeat;
    z-index: 100;
}
#navigation .tl {
    top: 0;
    left: 0;
    background-position: top left;
}
#navigation .tr {
    top: 0;
    right: 0;
    background-position: -5px 0px;
}
#navigation .bl {
    bottom: 0;
    left: 0;
    background-position: bottom left;
}
#navigation .br {
    bottom: 0;
    right: 0;
    background-position: -5px -5px;
}

/* Item dat onder de muis, open of geselecteerd is, niveau 1 */
#navigation li:hover .c, 
#navigation li.CMSListMenuHighlightedLI .c {
    background-image: url(../images/menu-1a.gif);
}
/* Laatste item, niveau 2 */
#navigation li.CMSListMenuHighlightedLI li .c {
    background-image: url(../images/menu-1c.gif);
}
/* Item onder de muis of geslecteerd, niveau 2 */
#navigation li.CMSListMenuHighlightedLI li:hover .c, 
#navigation li.CMSListMenuHighlightedLI li.CMSListMenuHighlightedLI .c {
    background-image: url(../images/menu-1b.gif);
}

