﻿/*
Title:      	Spectron master styles for screen media
Author:     	fel, © 2009 anaXis nv.
Updated:        feb 25 2009


Overzicht kleuren Spectron:

STARTPAGINA:

Alles wat grijs is: 707070 (breadcrumb enz)
Alles wat zwart is: 000000 (plain text, knoppen, titels what’s up...)
Alles wat wit is: ffffff (tekst in gekleurde blokken)
Alles wat blauw is: 005c84 (links, search text ...)

DETAILPAGINA:

Breadcrumb link: 22bbea
Hoofding 2: 6695a9
Plain text: 333333

Hoofding Navigatie: 7ba9bf
Navigation item: 006996
Active item: 333333
Roll over item: 22bbea

Kleur lijn tussen items: f2f2f2

*/

* { margin: 0; padding: 0; }
* div[width] {width: 100% !important;} /* stupid hack for eyes cms */

body { font: normal 64.5%/1.5em Tahoma, Verdana, sans-serif;}

/* ---- [ typography ] ------------ */
a {color:#005c84; font-size: 1.00em;}
h1 {color: #000000; font-size: 1.7em;font-weight:normal; margin:15px 0 15px 0;}
h2 {color: #6695a9; font-size: 1.7em; font-weight:normal; margin:20px 0 10px 0;}
h3 { font-size: 1.15em; }
li { font-size: 1.15em; }
li li{ font-size: 1em; }


p {color:#000000; font-size: 1.2em;margin-bottom:10px; }
#innercontent TABLE{width:600px !important;}

p.styledlink{margin:0;font-size: 1.1em; padding-top:2px;padding-left:7px; height:20px;background: url(images/regularbutton.png) no-repeat top left;}
a.styledlink{color:#000000;font-weight: bolder;text-decoration:none;}

.error{ color: #FC0000; }
/*	wrapper
--------------------------------*/
#wrapper { margin: 0 auto; width:100%;  }


/*	geheel
--------------------------------*/
#geheel { width: 947px; margin: 0 auto; overflow:hidden; clear: both; }

/*	header
--------------------------------*/

#header {background: url(images/headerbg.jpg) no-repeat top right; clear: both; overflow: hidden; height:160px;width:947px;}

#header a { display: inline; color:#005c84;}
#header a img { /*float:left;*/ }

/*#header ul.lang a.tooltip span {display: none; padding: 2px 3px; margin-left: 8px; width: 20px;} 
#header ul.lang a.tooltip:hover span { display:inline; position:absolute; top:30px; border:1px solid #cccccc; background:#ffffff; color:#6c6c6c; } 
*/

#headertop {height:124px; font-size:0.9em; position: relative; background-color:Transparent;}

#header #headertop #logo {float: left;padding-top:3px;}

#topmenu{width:837px;float:left;height:124px;}
.topmenutop{position: absolute;top:1px;right:6px;/*height:30px;/*}
#topmenutop ul.lang {/*clear:both;*/ list-style: none;/*height:30px;*/}
.topmenutop ul.lang li {float:left; display: block; font-size: 1.2em;margin: 0 1px 0 1px; font-weight: bold;height:30px;width:30px;text-align:center;padding-top:6px;}

.topmenutop ul.lang li.selected{background: url(images/lang_button_sel.png) no-repeat top right;}
.topmenutop ul.lang li.unselected{background: url(images/lang_button.png) no-repeat top right;}
.topmenutop ul.lang a {text-decoration: none;}
.topmenutop ul.lang a:hover {text-decoration: none;}

#topmenubottom{overflow:hidden;position:absolute;bottom:6px;right:10px; height:26px; width:837px;}

#header #breadcrumb{color:#707070;  margin: 4px 2px 0 0;  font-size: 1.1em; float: left;}
#header #breadcrumb a{color:#22bbea;}

#header #search{float:right; border: 0;width:257px; }
#header #search input{font-size:1.3em; color:#005c84;vertical-align:middle;  border:solid 1px #d5e1ed;float:left;padding: 2px 0 0 0; width:170px;height:21px;}
#header #search #button{text-align:center;  float:left;width:81px;margin-left:4px;height:25px;background-position: center center;background-image: url(images/searchbutton.png);background-repeat: no-repeat;}
#header #search #button a.Zoekbtn{border:0;color:#000000;padding:3px 0 0 0; display:block; font-size:1.2em;text-decoration:none;}


#header #menu_left{float:left;height:40px;width:7px;background: url(images/menubg-left.png) no-repeat top right;}
#header #menu{ float:left;height:40px;width:933px;background: url(images/menubg.png) repeat top right;font-size:0.9em;}
#header #menu td.separator{padding:0px 30px 0 30px;}
#header #menu td.separator IMG{position:absolute;top:130px;}
#header #menu td.tip{padding-top:5px;padding-bottom:5px;}
#header #menu td.untip {vertical-align:top;padding-top:5px;padding-bottom:5px;}
#header #menu td.tip div{margin-top:7px;text-align:center;}
#header #menu a {font-size:15px; text-decoration: none;}
#header #menu table{margin-left:45px;}
#header #menu_right{float:left;height:40px;width:7px;background: url(images/menubg-right.png) no-repeat top right;}


/*
#header #controls {  margin: 4px 2px 0 0; color: #C9D3DD; font-size: 1.1em; float: left; }
#header #controls a { text-decoration: none; color: #C9D3DD; margin-right: 10px; }
#header #controls span.seperator { margin-right: 10px; }
#header #controls fieldset {float:right; border: 0; display: inline; vertical-align: middle;}
#header #controls fieldset input.btn { width: auto; vertical-align: middle; }
#header #controls fieldset input { width: 135px; margin-right: 2px; vertical-align: middle; }
*/

/*	container
--------------------------------*/
#container{float:left;width:947px;}

#left{float:left;width:305px;}
#right{float:right;width:623px;}
.home #left{display:none;}
.home #right{width:933px;}

/*	quads
--------------------------------*/
#quads{float:left; width:650px;height:160px;}
#quads h1{margin:0;padding:0;}
#quads h2{color:white;font-weight:900;text-align:center;margin:0px;}
#quads p{color:white;font-size:1.1em; padding:0px 8px 0px 10px;margin:0px 0px 0px 0px;}
#quads a{color:white;text-decoration:none;}
#quads .corners div div{position:relative;height:150px;}
#quads .corners div div p{position:absolute;bottom:2px}

#quads #quad_1 {float:left;margin:10px 5px 0 5px;height:150px;width:150px;background:#005C84 url(images/pijl-wit.png) no-repeat 95% 95%;}
#quads #quad_2 {float:left;margin:10px 5px 0 5px;height:150px;width:150px;background:#22BBEA url(images/pijl-wit.png) no-repeat 95% 95%;}
#quads #quad_3 {float:left;margin:10px 5px 0 5px;height:150px;width:150px;background:#8AAF1A url(images/pijl-wit.png) no-repeat 95% 95%;}
#quads #quad_4 {float:left;margin:10px 5px 0 5px;height:150px;width:150px;background:#FED500 url(images/pijl-wit.png) no-repeat 95% 95%;}

#quads.elements{ float:right; width:303px;padding: 12px 0 0 0;height:60px;}
#quads.elements h2 {color:#000000;font-weight:900; font-size:1.2em;padding:4px 0 0 0;margin:0px;}
#quads.elements p{padding-left:6px;padding-top:2px;color:white;font-size:1.1em; /*padding:8px 8px 5px 10px;margin:0px;*/}
#quads.elements #quad_1{margin:10px 5px 0 0;background-color:#a5c2ff;height:70px;width:70px;}
#quads.elements #quad_2{margin:10px 5px 0 0;background-color:#a4d3de;height:70px;width:70px;}
#quads.elements #quad_3{margin:10px 5px 0 0;background-color:#cdd8a7;height:70px;width:70px;}
#quads.elements #quad_4 {margin:10px 5px 0 0;background-color:#f1e2a3;height:70px;width:70px;}

#quads.elements #quad_1.selected{background-color:#005C84;}
#quads.elements #quad_2.selected{background-color:#22BBEA;}
#quads.elements #quad_3.selected{background-color:#8AAF1A;}
#quads.elements #quad_4.selected{background-color:#FED500;}

/*	tools
--------------------------------*/

#tools{float:left; margin:10px 0 0 25px; width:245px;}
#tools div{background:url(images/largebutton.jpg) no-repeat top left;margin:0 0 4px 0 ;width:244px;height:54px;}
#tools div h2{color:#005c84;font-size:1.4em; font-weight:900; padding:5px 0 2px 10px;margin:0px;}
#tools div p{font-size:9pt;padding:0 0px 0 10px;margin:0px;}
#tools div h2 a, #tools div p a{text-decoration:none;}
#tools #Banner.Home{float:left;width:258px;height:215px; background:none;padding:20px 0;}

#tools.elements{clear:both;margin:35px 0 0 0;padding:0;width:305px;}

/*	content
--------------------------------*/
#left_content{float:left; width:947px;background:url(images/pagebg-left.jpg) no-repeat bottom left;}
#content{float:left; width:933px; background:url(images/pagebg.jpg) repeat-x bottom;}
#right_content{float:left; width:940px;padding-left:7px;background:url(images/pagebg-right.jpg) no-repeat bottom right;}

/*	maincontent
--------------------------------*/

#maincontent{float:left;width:600px;margin:-250px 0 0 10px;padding:0 50px 0 0;}
#maincontent ul{list-style-type: none;padding:10px 0 10px 25px; }
#maincontent ul li{background: url("images/pijl-blauw.jpg") no-repeat 0 3px; }
#maincontent ul li{padding:0 0 2px 20px;}

#maincontent ol{margin-left:25px; padding:10px 0 10px 25px;}
#maincontent ol li{padding:0 0 2px 0;}

/*	innercontent
--------------------------------*/

#innercontent{float:right;width:623px;margin: 20px 0 0 0;padding:0 0 60px 0;}
#innercontent ul{list-style-type: none;padding:10px 0 10px 25px; }
#innercontent ul li{background: url("images/pijl-blauw.jpg") no-repeat 0 3px; }
#innercontent ul li{padding:0 0 2px 20px;}

#innercontent ol{margin-left:25px; padding:10px 0 10px 25px;}
#innercontent ol li{padding:0 0 2px 0;}


/*	attachments
--------------------------------*/
#attachments{float:left;width:923px;margin:40px 0 0 10px;padding-bottom:20px;}
#attachments ul{list-style-type: none;padding:10px 0 10px 25px; }
#attachments ul li{background: url("images/pijl-blauw.jpg") no-repeat 0 3px; }
#attachments ul li{padding:0 0 2px 20px;}

#attachments ol{margin-left:25px; padding:10px 0 10px 25px;}
#attachments ol li{padding:0 0 2px 0;}
#attachments h1{margin:0;color:#000000;font-weight:600;}
#attachments h2{color:#000000;font-weight:600;}

#attachments #news{float:left;width:453px;}
#attachments #leftattachments{float:left;width:237px;}
#attachments #rightattachments{float:left;width:220px;}

/*	Aanmelden
--------------------------------*/
ul.aanmelden{list-style-type:none;margin:20px 0 30px 15px; }
p.aanmelden,h1.aanmelden {margin:20px 0 30px 15px;}
/*	Fieldset
--------------------------------*/
#content Fieldset{width:400px;margin:20px 0 20px 15px;padding:10px;}

/*	footer
--------------------------------*/
#footer{clear:both; width:947px;height:25px;margin:5px  auto 0 auto;}
#footer a {text-decoration:none;}
#footer_left{color:#707070; float:left;}
#footer_right{float:right;}
#footer_right span{padding:0 6px 0 6px;}

/* -----[ CSS editing ] ----------------	*/
div.eyeEditMenu *, 
div.eyeEditMenu #content table { margin: 0 !important; padding: 0 !important; }
div.eyeEditMenu a { cursor: pointer; }

/* -----[ CSS tree ] ----------------	*/
#sidebarroot{float:left;display: block; width:305px;}
#sidebarroot .banner img{float:left;width:238px;height:182px; background:none;padding:20px 0;display:none;visibility:hidden;}
ul.tree{/*display: block; width:305px;float:left;*/background:url(images/navbg.jpg) no-repeat top left;margin:20px  0 0 -7px;}
ul.tree a {text-decoration: none;}
ul.tree a:hover{color:#22bbea;}
ul.tree li.current{background: url("images/pijl-grijs.png") no-repeat 235px 7px ;}
ul.tree li.current a{color:#006996;font-weight:600;}
ul.tree li.current ul.open a{font-weight:normal; color:#006996;}
ul.tree ul.open li.current a{font-weight:normal; color:#006996;}
ul.tree .treetitel{font-size:1.9em; color:#7ba9bf;padding:10px 0 15px 15px;}
ul.tree li a {font-size:1.2em;color:#006996;}
ul.tree li ul { display: none; }
ul.tree li ul.open {margin: 5px 0 0 15px;list-style:none; display: block; }
ul.tree li ul.open li{padding:5px 0 0 0;}
ul.tree li ul.open li a{font-size:1.1em;}
ul.tree li ul.open li a:hover{color:#22bbea;}


ul.tree li {}
ul.tree ul {/* padding-left: 15px;list-style-type: circle;*/ }


ul.tree li.lvl1{width:238px;padding:7px 0 7px 15px;border-style:solid;border-bottom-width:1px;border-top-width:0px;border-left-width:0px;border-right-width:0px;border-bottom-color:#f2f2f2;}


/*** IMAGES ***/ 

.image_top_left {display: block; margin-bottom: 15px;}

.image_top_middle {display: block; margin: 0 auto 15px auto;}

.image_bottom_left {display: block; margin-top: 15px;}

.image_bottom_middle {display: block; margin: 15px auto 0 auto;}

.image_align_right {float: right; padding: 0 0 0 15px;}

.image_align_left {float: left; padding: 0 15px 0 0;}
