/*
Title:      	Eendracht Ubeersel master styles for screen media
Author:     	KFR, ? 2006 Karel Frederix.
Updated:    	Mar 15 2006
*/

* { margin: 0; padding: 0; }
a img { border: none; }
body { font: normal 62.5%/1.6em Verdana, Arial, sans-serif; text-align: center; }

/* ---- [ typography ] ------------ */
a { font-size: 1.1em; color: #000; font-weight: bold; }
h1 { font-size: 2em; font-weight: bold; }
h2 { clear: both; margin: 0 0 10px 0; padding: 3px 0 3px 10px; font-size: 1.8em; font-weight: bold; color: #000000; border-bottom: solid 1px #000000; }
h3 { margin: 0 10px 10px 25px; padding: 3px 0 3px 10px; font-size: 1.6em; font-weight: bold; color: #9900cc; border-bottom: solid 1px #9900cc; }
h4 { margin: 0 0 10px 15px; padding: 10px 0 0 0; font-size: 1.1em; font-weight: bold; color: #000; }
h6 { font-size: .9em; color: #999; font-weight: bold; }
legend { font-size: 1.1em; padding: 0 5px; color: #000; }
input, label, li, p, select { font-size: 1.1em; }
table, td { font-size: 1em; }
ul { margin-left: 50px; }
br.clear { clear: both; }

* html i { overflow: visible; display: inline-block; height: 1%; }

/* ---- [ layout ] ------------ */
#wrapper { display: block; margin: 0 auto; width: 788px; text-align: left; background-image: url(../images/content_bar.jpg);background-repeat: repeat-y;background-position: right; }
#header { height: 115px; width: 788px; }
#footer { clear: both; width: 788px; background: #fff url(../images/footer_bar.jpg) no-repeat left top; height: 49px;text-align: right }
#main { clear: both; width: 788px; background-color: Transparent; }
#tree { float: left; width: 195px; text-align: left; background-image: url(../images/tree_back.jpg)  }
#content { float: left; margin: 0px 0 0 23px; width: 550px; }
html>body #content { width: 550px } /* HAck: IE can't read this */

/* ---- [ site header ] ------------ */
#headerBar { width: 788px; height: 115px; background: #fff url(../images/header_bar.jpg) no-repeat left top;  }
#navBar { margin: 0 0 0 100px; height: 24px; text-align: right; }
#navBar div { padding-top: 20px; }
#navbar #date { float: left; width: 320px; padding: 80px 0 0 0px; text-align: right; font-size: 1.2em; font-weight: bold; text-transform: capitalize; color: #fff; }
html>body #navbar #date { width: 300px } /* HAck: IE can't read this */
#navbar #logout { float: left;  width: 330px; text-align: right; font-weight: bold; color: #fff; }
#navbar #logout a { text-decoration: none; color: #fff; }

/* ---- [navigation tree] ------------ */
#treeLogo { text-align: center; margin-bottom: 10px; display: inline-block; overflow: hidden; }
#treeLogo a { display: inline-block; overflow: hidden; }
#treeLogo img { clear: both; }
#treeMain {width: 195px;}
#treeMain ul {margin: 0; padding: 0; list-style-type: none;}
#treeMain li {}
#treeMain a {display: block;
height: 20px;
padding: 0px 0px 0px 20px;
background-color: #999999;
background-repeat: no-repeat;
background-position: 0% 50%;
color: #EEE;
text-decoration: none;
background-image: url(../images/tree_link.jpg)}
#treeMain a:hover { color: #cc66cc; text-decoration: underline;background-image: url(../images/tree_back.jpg)}
#loginForm { margin: 0 0 20px 0; text-align: right; font-weight: bold; }
#loginForm div.left { margin: 3px 0 0 40px; text-align: left; font-size: 1.4em; font-style: italic; color: #9900cc; }
#loginForm div.right { margin: 3px 0 0 0; text-align: right; }
#loginForm div { margin: 5px 0 0 0; }
.loginBox { width: 130px; font-size: 1.1em; padding: 2px 0 2px 1px; background-color: #CFCFCF; border: solid 1px #000; }

/* ---- [ footer ] ------------- */
/*
#footerLeft { float: left; padding: 3px 0 0 0; width: 199px; text-align: right; background-color: #fff; }
#footerLeft span { margin-right: 30px; font-family: Courier New, Sans-Serif; color: #aaa;  }
#footerRight { float: left; width: 601px; }
*/

/* ---- [ content ] ------------ */
#content h2 { margin: 0 0 10px 0; }
#content p { margin: 5px 0 10px 0; padding: 0 10px 0 15px; clear: both; overflow: hidden; display:inline-block; text-align: justify; }
#content p img { clear: both;}
#content .par { margin: 5px 15px 10px 0; padding: 0 10px 0 35px; }

.tabSpOv td, th { border: solid 1px #b6b6b6; padding: 3px; text-align: center; }
.tabSpOv th { color: 9900cc; }
.tabSpOv { width: 500px; }

.spovRow { clear: both; padding: 0; margin: 0;  overflow: hidden; display:inline-block;  }
.spovRow .label{ float: left; width: 120px; font-weight: bold; }
.spovRow .value{ float: left; width: 300px; }

.error { color: #f00; }

a.h3 { margin: 0 10px 10px 25px; padding: 3px 0 3px 10px; font-size: 1.6em; font-weight: bold; color: #9900cc; border-bottom: solid 1px #9900cc; text-decoration: none; }

#articles { margin: 0 10px 0 25px; }
a.article { margin: 0 0 10px 0; padding: 3px 0 3px 0; font-size: 1.2em; font-weight: bold; color: #9900cc; text-decoration: underline; }

/* -----[ toggle sections ] ---------------- */
a.collapsed, a.collapsed:visited { padding-right: 50px; background: Transparent url(../images/expand.gif) no-repeat right center; text-decoration: none; color: #9900cc; font-size: 1.0em; }
a.collapsed:hover { padding-right: 50px; background: Transparent url(../images/expand_hover.gif) no-repeat right center; text-decoration: none; color: #9900cc; font-size: 1.0em; }
a.expanded, a.expanded:visited { padding-right: 50px; background: Transparent url(../images/collapse.gif) no-repeat right center; text-decoration: none; color: #9900cc; font-size: 1.0em; }
a.expanded:hover { padding-right: 50px; background: Transparent url(../images/collapse_hover.gif) no-repeat right center; text-decoration: none; color: #9900cc; font-size: 1.0em; }

div.collapsed { visibility: hidden; display: none; }
div.expanded { display: block; visibility: visible; }