/* ======= General Stylesheet for oost-vlaanderen.be ========= 
 *
 *    Version: 1.0
 *    Author: KST (Amplexor)
 *
 *   ------------------------------------                                 
 *   |      Table of Contents           |
 *   ------------------------------------
 *   | 1. General Styling               |
 *   | 2. Header Styling                |
 *   | 3. Navigation Styling            |
 *   | -- Left nav                      |
 *   | -- Top nav                       |
 *   | 4. Footer Styling                |
 *   | 5. Content element Styling       |
 *   | 6. Right Box styling             |
 *   | 7. 3-Col positioning & Floating  |
 *   -----------------------------------
 * ===================================================== */

/* ====
 * = 1. General Styling 
 * ======================= */
body{font: 0.80em/1.2 verdana, arial, Helvetica, sans-serif; margin: 0; padding: 0; width: 100%; color: #666666;}
* {font-size: 100%}
img{border: 0}
div{margin: 0; padding: 0; border: none}
a{color: #666666; text-decoration: underline}
a:hover{text-decoration: none}

/* ====
 * = 2. Header Styling
 * ====================*/
#logo{position: absolute; top: 0px; left: 20px}
#headerImg{display: block; height: 72px; width: 778px; position: absolute; top: 0px; left: 189px}

/* ====
 * = 3. Navigation Styling
 * ====================*/
/* == Left nav == */
/* -- 
----- Older browsers may display this navigation less than perfect, but functionallity and accessibility remains optimal
----- tested in: IE5.01; MAC-IE5.1; IE5.5; IE6; FF1.0 (mac & pc); N7.1; safari 1.2.4; Camino 0.82; Opera 7.51
-- */
#nav ul{margin: 0; padding: 0; list-style-type: none; background-color: #fff; width: 190px;}
#nav li{font-size: 1em; margin: 0; padding: 0; border: 0px solid #fff}
#nav a:link, #nav a:active, #nav a:visited, #nav a:hover{display: block; background: #666666; border-left: 3px solid #666666; padding: 0.18em 5px 0.18em 15px; color: #E4DACB; font-weight: bold; text-decoration: none}
#nav a:hover, #nav a.sel:link, , #nav a.sel:active, , #nav a.sel:visited, , #nav a.sel:hover{color: #fff; border-left: 3px solid #ece4dd}
#nav li.bb{border-bottom: 1px solid #fff}
#nav li{border-bottom: 1px solid #b5a99f}

#nav a.protected:link, #nav a.protected:active, #nav a.protected:visited, #nav a.protected:hover{padding-right: 22px; background-image: url('css_lock.gif'); background-repeat: no-repeat; background-position: right}
#nav ul ul a.protected:link, #nav ul ul a.protected:active, #nav ul ul a.protected:visited, #nav ul ul a.protected:hover{padding-right: 22px; background-image: url('css_lock3.gif'); background-repeat: no-repeat; background-position: right}

#nav ul ul a:link, #nav ul ul a:active, #nav ul ul a:visited, #nav ul ul a:hover{background: #fff; border-left: 3px solid #fff; border-right: 3px solid #fff; font-weight: normal; font-size: 0.83em; color: #666666; padding-left: 20px}
#nav ul ul a:hover, #nav ul ul a.active:link, #nav ul ul a.active:active, #nav ul ul a.active:visited, #nav ul ul a.active:hover{background-color: #ece4dd; border-left: 3px solid #ece4dd; border-right: 3px solid #ece4dd}

/* == End Left nav == */

/* == Target Nav  == */
#targetNav{position: absolute; top: 0; left: 0; width: 100%; background-color: #d4c7b7; border-bottom: 1px solid #fff; font-size: 80%; height: auto; white-space: nowrap; padding: 0.2em 0}
#targetNav a{color: #666666}
 .dark_bullet_right,  .red_bullet_right{background: url('css_dark_bullet.gif') no-repeat right; padding-right: 13px; margin-right: 3px}
 .dark_bullet_left,  .dark_bullet_left{background: url('css_dark_bullet.gif') no-repeat left; padding-left: 13px; margin-left: 3px}
 .red_bullet_right,  .red_bullet_left{background-image: url('css_red_bullet.gif')}
#targetNav div{margin-left: 205px}

/* == Top nav == */
#topNav{position: absolute; top: 25px; left: 205px; white-space: nowrap}
#topNav a{color: #666666}

/* == Drop Down Navigation == */
/* -- A simple Javascript function sets and removes the class ".acitve" to display the second level navigation. 
----- IE5.0 is not capable of handeling this kind of css, so for this browser no second level navigation will pop-up.
----- This has no accessibility issues because the second level is accessible in the left navigation by selecting the first level in the top navigation.
----- In Browsers without JS or with JS disables, no pop-up behaviour will visible either.
----- tested in: IE5.01; MAC-IE5.1; IE5.5; IE6; FF1.0 (mac & pc); N7.1; safari 1.2.4; Camino 0.82; Opera 7.51
-- */
/* The fixed width is to prevent horizontal scroll-bars on higher resolutions, and wrapping of navigation items on lower resolution. */
#headerNav{margin-top: 72px; margin-left: 189px; width: 61em}
#headerNav ul, #headerNav li{padding: 0; margin: 0; list-style-type: none; display: block}
#headerNav a{display: block; color: #fff; background: #666666; text-decoration: none; font-weight: bold; height: 27px; width: 7em; font: bold 0.83em/1 verdana, arial, Helvetica, sans-serif; padding: 3px 1em; padding-bottom: 4px; border-right: 1px solid #fff;}
#headerNav a:hover, #headerNav a.sel{background: #000000}
/* IE5.x Boxmodel hack */
#headerNav a, #headerNav li{width:10em; voice-family: "\"}\""; voice-family:inherit; width:7em}
#headerNav a, #headerNav li{height: 32px; voice-family: "\"}\""; voice-family:inherit; height: 26px}

#headerNav li{float: left; width: auto}
* html #headerNav li{width: 7em}
#headerNav li ul{display: none; background: #666666}
#headerNav li.active ul{display: block; position: absolute; width: 190px; background: #ece4dd;}
#headerNav li.active a{background: #666666}
#headerNav li li{float: none; border-width: 0px; margin: 0; padding: 0; height: auto; display: inline; width: auto; border: none}
#headerNav li li a{height: auto; padding: 3px 1em; margin: 0; border-width: 0px; background-color: #666666; display: block; border-bottom: 1px solid #fff; width: 120%}
#headerNav li li a:hover{background-color: #d4c7b7}
/* colored line inside level 1 nav */
#headerNav li b{width: 20px; height: 3px; display: block; margin-top: -3px}
#headerNav li.notactive b{background-color:#666666}
#headerNav li.active b, #headerNav li b.sel{background-color: #ece4dd}

#headerNav a.protected:link, #headerNav a.protected:active, #headerNav a.protected:visited, #headerNav a.protected:hover{background-image: url('css_lock3.gif'); background-repeat: no-repeat; background-position: right}
/* == End Drop Down Navigation == */


#searchBox{display: inline; margin-left: 2em}
#searchBox input#text, #searchBox select#select, #searchBox input#submit{height: auto; width: 6em; display: inline; border: 1px solid #666666}
#searchBox select#select, #searchBox input#submit{width: auto}
#searchBox input.notactive{background: #666666; color:#ece4dd; border: 1px solid #666666; cursor:pointer; font-weight: bold; color: #fff}
#searchBox input.active{background: #666666; border: 1px solid #666666; cursor:pointer; font-weight: bold; color: #fff}
form{display: inline}




/* ====
 * = 4. Footer Styling
 * ====================*/

/*#footer span{display: block; color: #fff; font-size: 80%; margin-left: 210px}*/

/* ====
 * = 5. Content element Styling
 * =========================*/
#ct {text-align:right; font-size: 75%}
h1{/* border-bottom: 1px solid #b5a99f;  */ font-size: 110%}
#content h2{color: #666666; margin: 0; padding: 0; margin-top: 2em}
#content a.gototop{float: right; font-size: 85%; padding-right: 12px; background: url('css_bookmark_up.gif') no-repeat right; text-decoration: none; font-weight: normal; margin-top: -1.3em}
#content{padding: 15px 0; text-align: left;}
#content p{margin-top: 0.5em}
#content h1{margin-top: 0.3em}	
#content .detNav, #content #relLinks, #content #contenttoc{clear: right}

#detNav, .detNav{width: 100%; margin: 0.3em auto; background: #d4c7b7; text-align: left}
#detNav td, .detNav td{width: 50%; padding: 0.2em;padding-top: 1em}
#detNav td{padding: 0.5em}
#detNav td ul {margin: 0em}
* html #detNav td ul {margin: 0 2.5em}
.detNav h3, .detNav p{padding: 0; margin:0}
.detNav p{margin-bottom: 0.5em}
.detNav td{padding: 1em}
.ll{border-left: 1px dashed #ece4dd}
#detNav a.protected:link, #detNav a.protected:active, #detNav a.protected:visited, #detNav a.protected:hover{background-image: url('css_lock3.gif'); background-repeat: no-repeat; background-position: right; padding-right: 20px}

.detNav a:link, .detNav a:active, .detNav a:visited, .detNav a:hover{color: #666666; text-decoration: none}
* html .detNav a:hover{text-decoration: underline}
.detNav a:hover *{text-decoration: underline}

#contenttoc{border-bottom: 1px solid #b5a99f; border-top: 1px solid #b5a99f}
#detNav li, #relLinks li{list-style: url(css_more_link.gif)}
#contenttoc li{list-style: url(css_bookmark_right.gif)}
.moreLink{background:  url(css_more_link.gif) no-repeat left; padding-left: 10px}
#relLinks{width: inherit; margin: 1.5em auto; padding: 0.5em; border: 1px solid #d4c7b7; background: #fff}
#relLinks h4{margin: 0.2em}
#relLinks ul{margin: 0 2em; margin-bottom: 0.5em}

#content .imgsrc{color: #999; font-style: italic; margin: 0; padding: 0; text-align: right; font-size: 90%; margin-bottom: 0.5em}
#content img.right{float: right; clear: right}
.imgBox{  margin: 0;padding:0; width: 220px; float: right; padding-left: 1em; text-align: right; white-space: wrap; margin-top: 2em; margin-bottom: 0.5em; margin-left: 1em; overflow: hidden}
.imgBox *{display: block; clear:right;}

.contentTable{ border: 1px solid #d4c7b7; padding: 0;}
.contentTable td, .contentTable th{padding: 0.2em; text-align: left}
.contentTable th{background: #CCCCFF}
.contentTable .on td{background: #fff}

/* Toegevoegd door Aswin, Fotogallerij, iets mooiere html */
.contentTablegal{ border: 1px solid #d4c7b7; padding: 0;}
.contentTablegal td {padding: 0.2em; text-align: left}
.contentTablegal td {background: #CCCCFF}
.contentTablegal .on td{background: #fff}


/* Toegevoegd door KDP*/
.contentTableLinks{ border: 1px solid #d4c7b7; padding: 0; margin: 1em auto;}
.contentTableLinks td, .contentTable th{padding: 0.2em; text-align: left}
.contentTableLinks th{background: #d4c7b7}
.contentTableLinks .on td{background: #fff}

/* Toegevoegd door SV vrije uitlijning van tekst in tabel...*/
.contentTableText{ border: 1px solid #d4c7b7; padding: 0; margin: 1em auto;}
.contentTableText td, .contentTable th{padding: 0.2em;}
.contentTableText th{background: #d4c7b7}
.contentTableText .on td{background: #fff}

.docs a{background: url(other.gif) no-repeat left top; padding-left: 20px; text-decoration: none}
.docs a:hover{text-decoration: underline}
.docs a.pdf,.docs a.doc, .docs a.xls, .docs a.ppt, .docs a.zip, .docs a.other{background: url(pdf.gif) no-repeat left top; padding-left: 20px}
.docs a.doc{background-image: url(word.gif)}
.docs a.xls{background-image: url(excel.gif)}
.docs a.ppt{background-image: url(ppt.gif)}
.docs a.zip{background-image: url(zip.gif)}
.docs a.other{background-image: url(other.gif)}
.docs a b{color: #666666}
.uppercase{text-transform: uppercase;}

#searchresults h3, #searchresults p, #searchresults span{margin: 0; padding: 0}
#searchresults h3{margin-top: 1em}
#searchresults p span{color: #666; font-size: 90%; font-style: italic; display: block; }

/* ====
 * = 6. Right Box styling
 * =========================*/
#right div{background: #fff url('css_rb_top.gif') no-repeat top; width: 160px; margin-left: 5px; margin-bottom: 20px; padding: 10px}
#right img{margin-left:5px;width: 180px; margin-bottom:20px}
#right div h3{border-bottom: 1px solid #ece4dd; font-size: 79%}
#right div p {font-size: 75%}
#right a{display: block; margin-top: 0.1em; padding-left: 15px; background: url(css_link_arrow.gif) no-repeat left 0.5em}
#right a.pdf{background-image: url(css_pdf_icon.gif); padding-left: 20px}
#right a.more{background-image: none; padding: 0}
#right #blindsurfer {width:45px; margin-left:50px;}
/* ====
 * = 7. 3 Column Layout Positioning & Floating 
 * ============================================*/
body{padding-top: 160px; background: #E5E5E5;}

#header{background: url('css_header_bg.gif') repeat-x; position: absolute; top: 0px; left: 0; width: 100%; height: 105px}

#mainContainer{min-width: 975px; width: 90%}
#container{background: #E5E5E5 url('css_nav_bg.gif') repeat-y left; float: left; width: 100%; height:100%; margin-top:-55px }

#content{float: right; width: 68%; margin-right: 20px; text-align:justify}
#nav{margin-right: 68%}


#right{width: 20%; margin-left: 78%; padding-top: 20px}
/*#footer{background:#666666 url('css_footer_bg.gif') repeat-y left; width: 100%; clear: both}*/

/* .xopusmeta {display:none;}*/

.dp-none, #hidetopskip, #hidetopskip{display: none}
#nav2 {height:730px;}
#nav2 ul{margin: 0; padding: 0; list-style-type: none; background-color: #fff; width: 190px;}
#nav2 li{font-size: 1em; margin: 0; padding: 0; border: 0px solid #fff}
#nav2 a:link, #nav2 a:active, #nav2 a:visited, #nav2 a:hover{display: block; background: #666666; border-left: 3px solid #666666; padding: 0.18em 5px 0.18em 15px; color: #E4DACB; font-weight: bold; text-decoration: none}
#nav2 a:hover, #nav2 a.sel:link, #nav2 a.sel:active, #nav2 a.sel:visited, #nav2 a.sel:hover{color: #fff; border-left: 3px;}
#nav2 li.bb{border-bottom: 1px solid #fff}
#nav2 li{border-bottom: 1px solid #b5a99f}

#nav2 a.protected:link, #nav a.protected:active, #nav a.protected:visited, #nav a.protected:hover{padding-right: 22px; background-image: url('css_lock.gif'); background-repeat: no-repeat; background-position: right}
#nav2 ul ul a.protected:link, #nav ul ul a.protected:active, #nav ul ul a.protected:visited, #nav ul ul a.protected:hover{padding-right: 22px; background-image: url('css_lock3.gif'); background-repeat: no-repeat; background-position: right}

#nav2 ul ul a:link, #nav ul ul a:active, #nav ul ul a:visited, #nav ul ul a:hover{background: #fff; border-left: 3px solid #fff; border-right: 3px solid #fff; font-weight: normal; font-size: 0.83em; color: #666666; padding-left: 20px}
#nav2 ul ul a:hover, #nav ul ul a.active:link, #nav ul ul a.active:active, #nav ul ul a.active:visited, #nav ul ul a.active:hover{background-color: #ece4dd; border-left: 3px solid #ece4dd; border-right: 3px solid #ece4dd}