/*

customer:		Inverde vzw
site:			www.inverde.be

file:			Main CSS for all modern browsers + IE
released: 		December 15, 2005
updated: 		April 11, 2006
tested:			Safari 2.0, FF Win, FF Mac, IE 6.0  
note:			IE hacks are in separate file.

designed by:	Quixpace | quixpace.com

*/


/* ---------- body and root fonts ---------- */

body { 
padding:				0;
background: 			#FFF url(body-bg.png) bottom repeat-x;
font:					75% "Lucida Grande", Verdana, Arial, Tahoma, Helvetica, sans-serif;
color:					#444;
text-align:				center;
margin:					0;
min-width: 				730px;
line-height:			1.5em;
}
body#popup {
min-width: 				350px;
background-image: 		none;
text-align:				left;
padding:				2em;
}
p, td, li, dl {
font:					1em "Lucida Grande", Verdana, Arial, Tahoma, Helvetica, sans-serif;
line-height:			1.5em;
}

/* ---------- must haves, links and titles ---------- */

img	{
border:					0;
}
img.frame {
background-color:		#FDFDFD;
border:					1px solid #BBB;
padding:				4px;
}
img.floatright {
float: 					right !important;
margin:					0 0 1em 1em;
}
img.floatleft {
float: 					left !important;
margin:					0 1em 1em 0;
}
.code {
font:					1em "Courier New", Monaco, Profont, monospace !important;
}
small, .small {
font-size:				9px;
}
.warn {
color:					red;
}
.grey {
color:					#A7A7A7;
}
.lead {
font-size:				1.05em;
line-height:			1.8em;
}
a {
color:					#844166;	
text-decoration:		none;
font-weight:			bold;
}
a:visited {
color:					#844166;	
text-decoration:		none;
}
a:hover {
color:					#8EC051;	
}
a:active {
color:					#8EC051;	
}
dl {
margin:					0;
}
dt {
margin-top:				0.5em;
}
dd {
padding-left:			1em;
margin-left:			0;
}
h1 {
color:					#7B1C51;
font-size:				20px;
font-weight:			bold;
text-transform:			uppercase;
letter-spacing:			1px;
margin:					40px 0 0 0;
padding:				0;
}
h2 {
color:					#7B1C51;
font-size:				1.4em;
font-weight: 			bold;
margin: 				1.5em 0 1em 0;
padding: 				0;
}
h2 a {
color:					#7B1C51 !important;	
}
h3 {
color:					#99CC66;
font-size:				1.2em;
font-weight: 			bold;
margin: 				1.5em 0 1em 0;
padding:				0;
}
h3 a {
color:					#99CC66 !important;
}
h4 {
color:					#333;
font-size: 				1.1em;
line-height: 			1.6em;
margin: 				1.5em 0 1em 0;
padding: 				0;
}
h4 a {
color:					#333 !important;
}
h5 {
color: 					inherit;
font-size: 				1.01em;
line-height: 			1.7em;
margin: 				1.5em 0 1em 0;
padding: 				0;
}
h6 {
color: 					inherit;
font-size: 				1em;
line-height: 			1.6em;
margin: 				1.5em 0 1em 0;
padding: 				0;
}
	
/* ---------- basic structures ---------- */
#page {
background-color:	#FFFFFF;
position:			relative;
margin:				0 auto;
text-align:			left;
width:				88%;
height:				100%;
background-color:	#FFF;
padding:			48px 0 0 0;
max-width:			1100px;
}
#cedeo {
margin-left:		50px;
margin-top:         75px;
}
#oldbrowser {
display:			none;
}
#wrap-header {
margin:				0 0 0 240px;
}
/* FIR replacement for logo */
h1.logo {
margin:				0;
padding:			0;
position:			absolute;
top:				15px;
left:				0;
width:				200px;
height:				100px;
background: 		#FFF url(logo.gif) top no-repeat;
}
h1.logo span {
display:			none;
}
h1.logo a {
display:			block;
width:				200px;
height:				100px;
}
#header-title {
background: 		#7B1C51 url(grouptitle-bg.gif) bottom repeat-x;
height:				35px;
border-bottom:		4px solid #8EC051;
font-size:			1.5em;
text-transform:		none;
color:				#FFF;
line-height:		36px;
padding:			0 0 0 15px;
margin:				0;
width:				auto;
position: 			relative;
}
#hoekje {
top:				48px;
left:				240px;
position:			absolute;
width:				12px;
height:				12px;
background: 		url(grouptitle-bg-corner.gif) no-repeat;
}
/* breadcrumbs */
#breadcrumb {
color:				#999;
font:				0.75em Verdana, Helvetica, Arial, sans-serif;
height:				23px;
line-height:		23px;
white-space:		nowrap;
overflow:			hidden;
}
	#breadcrumb a {
	font-weight:		normal;
	color:				#888;
	text-decoration:	none;
	}
	#breadcrumb a:visited {
	color:				#888;
	}
	#breadcrumb a:hover {
	color:				#333;
	}
	#breadcrumb a:active {
	color:				#888;
	}
#wrap-content {
margin-top:			20px;
clear:				both;
}
#side {
float: 				left;
width:				210px;
}
/* main content goes here */
#data {
margin:				0 20px 0 240px; 
font:				0.95em "Lucida Grande", Verdana, Arial, Tahoma, Helvetica, sans-serif;
line-height:		1.5em;
}
#data p, #data td, #data li {
font:				1em "Lucida Grande", Verdana, Arial, Tahoma, Helvetica, sans-serif;
line-height:		1.5em;
}
#data li {
list-style:			square; 
}
#poweredby {
font:				10px Verdana, Arial, sans-serif;
color:				#888;
padding:			10px 0 10px 0;
}
	#poweredby a:link, 		#poweredby a:visited, #poweredby a:active {
	color:					#666;
	font-weight:			normal;
	text-decoration:		none;
	}
	#poweredby a:hover {
	text-decoration:		underline;
	}




/* ---------- main menu ---------- */
#menu {
overflow:					hidden;
width:						auto;
height:						22px;
position:					absolute;
top:						25px;
right:						-1px;
border-bottom:				1px solid #FFF !important;
}
#menu ul {
list-style:					none;
white-space:				nowrap;
padding:					0;
margin:						0;
}
#menu > ul a {
width:auto;
}
/* normal */
#menu li {
float:						left;
line-height:				11px;
margin:						0;
padding:					0 1px 0 11px;
background:					url(datatab_left.gif) 0 -300px no-repeat;
}
#menu a {
font-family:				"Lucida Grande", Arial, Verdana, Tahoma, Helvetica, sans-serif;
float:						left;
display:					block;
width:						.1em;
padding:					6px 13px 6px 4px;
text-decoration:			none;
font-size: 					0.9em;
font-weight:				bold;
color: 						#7B1C51;
background:					url(datatab_right.gif) 100% -300px no-repeat;
}
/* hover */
#menu a:hover {
color:						#FFF;
}
#menu li:hover {
background:					url(datatab_left.gif) no-repeat left top;
}
#menu li:hover a {
color:						#FFF;
text-shadow:				#AA7191 1px 1px 5px;
background:					url(datatab_right.gif) no-repeat right top;
}
/* current */
#menu li.current,
#menu li.current:hover {
background:					url(datatab_left.gif) 0 -150px no-repeat;
}
#menu li.current a,
#menu li.current a:hover 	{
background:					url(datatab_right.gif) 100% -150px no-repeat;
text-shadow: 				1px 1px 1px #888;
padding-bottom:				6px;
color:						#FFF;
}

/* ---------- submenu picture ---------- */
#submenu-pic {
margin-bottom:			6px;
}
#submenu-pic ul,
#submenu-pic li {
margin:				0;
padding:			0;
list-style:			none;
}
#submenu-pic li {
overflow:				hidden;
width:					208px;
height:					178px;
border:					1px solid #333;
}
#searchfield {
padding-left:			10px;
}

/* ---------- submenu ---------- */
#submenu {
height:					350px;
background: 			#FFF url(submenu-bg.gif) top repeat-x;
}
#submenu ul {
width:					210px;
margin:					0;
padding:				0;
list-style:				none;
border-bottom:			1px solid #FFF;
}
#submenu li {
display:				inline;
padding:				0;
margin:					0;
}
#submenu a span {
position:				absolute;
width:					16px;
height:					16px;
background: 			url(sterreke.gif) no-repeat;
}
#submenu a:link,
#submenu a:visited {
border-top:				1px solid #FFF;
display: 				block;
width:					165px;
padding:				5px 30px 5px 15px;
text-decoration:		none;
font-size:				0.85em;
color:					#777;
background-color:		#E4E4E4;
}
#submenu a:hover {
color:					#333;
background: 			#D3D3D3 url(submenu-marker.gif) 190px no-repeat;
}
#submenu li.current a:link,
#submenu li.current a:visited {
color:					#444;
font-weight:			bold;
background: 			#D3D3D3 url(submenu-marker.gif) 190px no-repeat;
}
/* subitems */
#submenu ul li ul {
border:					0;
border-top:				1px solid #f5f5f5;
}
#submenu li.current ul li a {
background-color:		#EAEAEA !important;
}
#submenu li ul li {
display:				inline;
padding:				0;
margin:					0;
border:					0;
}
#submenu li ul li a:link,
#submenu li ul li a:visited {
border:					0;
display: 				block;
width:					160px;
padding:				3px 30px 3px 20px;
text-decoration:		none;
font-size:				0.75em;
font-weight:			normal !important;
color:					#888;
background-image:		none !important;
background-color:		#EAEAEA !important;
}
#submenu li ul li a:hover {
color:					#222;
background-color:		#E6E6E6 !important;
}
#submenu li ul li.current a:link,
#submenu li ul li.current a:visited {
color:					#444 !important;
font-weight:			normal !important;
background-color:		#E1E1E1 !important;
}

/* hide subitems when main item not selected */
#submenu li ul li {
display: 				block;
}
#submenu li.current ul li {
display: 				block !important;
}
#submenu li.current ul {
border-top:				1px solid #f5f5f5;
}

/* ---------- nieuws ---------- */
.entry {
margin-bottom:		3.5em;
}
.entry h2 {
font-size:			1.3em;
}
.entry .data {
padding-left:		0.75em;
}
.entry .postdata {
color:				#888;
font-size:			0.9em;
border-top:			1px solid #eee;
padding-top:		0.4em;
font-weight:		normal;
}
	.entry .postdata a:link,
	.entry .postdata a:visited,
	.entry .postdata a:active {
	color:				#888;
	font-weight:		bold;
	}
	.entry .postdata a:hover {
	text-decoration:	underline;
	}
.comments {
padding:			0.75em;
}
.comment-entry {
padding-bottom:		0.5em;
border-bottom:		1px solid #eee;
margin-bottom:		0.5em;
}
.comment-entry .data {
padding-left:		0.75em;
}
.comment-entry .predata {
color:				#888;
font-size:			0.9em;
}
	.comment-entry .predata a:link,
	.comment-entry .predata a:visited,
	.comment-entry .predata a:active {
	color:				#888;
	font-weight:		bold;
	}
	.comment-entry .predata a:hover {
	text-decoration:	underline;
	}

/* ---------- blokje ---------- */

.blokje {
background-color: 	#EFEFEF;
/*position:			relative;*/
border-bottom:		1px solid #dedede;
border-right:		1px solid #dadada;
padding:			0.8em;
margin-bottom:		0.8em;
}
.blokje h4 {
font-size:			1em;
border-bottom:		1px solid #FFF;
background:			#E5E5E5 url(datatab_left.gif) 0 -300px no-repeat;
margin:				-0.8em -0.8em 0 -0.8em; 
padding:			0.5em 1em;
}
.blokje .floater {
width:				100px;
height:				25px;
margin-top:                     -22px;
float:                          right;
/*
position:			absolute;
top:				0.65em;
right:				-12px;
font-size:			1.15em;
color:				#888;
text-transform:		uppercase;
width:				100px;
height:				25px;
*/
}
.blokje .floater a,
.blokje .floater a:visited,
.blokje .floater a:active {
background:			url(subscribeme.gif) 0 0 no-repeat;
width:				100px;
height:				25px;
display:			block;
}
.blokje .floater a:hover {
background:			url(subscribeme.gif) 0 -25px no-repeat;
}

.floater span {
display: 			none;
}

.blokje .wachtlijst {
position:			absolute;
top:				0.65em;
right:				-12px;
font-size:			1.15em;
color:				#888;
text-transform:		uppercase;
width:				205px;
height:				25px;
}

.blokje .wachtlijst a,
.blokje .wachtlijst a:visited,
.blokje .wachtlijst a:active {
background:			url(/content/styles/schrijfmeinopdewachtlijst.gif) 0 0 no-repeat !important;
width:				205px;
height:				25px;
display:			block;
}
.blokje .wachtlijst a:hover {
background:			url(/content/styles/schrijfmeinopdewachtlijst.gif) 0 -25px no-repeat !important;
}

.wachtlijst span {
display: 			none;
}

/* ---------- dossiers ---------- */
.sibs ul {
margin:			0 0 0 2em;
padding:		0;
}
.sibs li {
margin:			0;
padding:		0;
}
.sibs ul li ul,
.sibs ul li ul li ul,
.sibs ul li ul li ul li ul,
.sibs ul li ul li ul li ul li ul,
.sibs ul li ul li ul li ul li ul li ul,
.sibs ul li ul li ul li ul li ul li ul li ul,
.sibs ul li ul li ul li ul li ul li ul li ul li ul {
padding-left:		1.5em;
margin:				0;
}


/* ---------- kwis ---------- */
#kwis-vragen {
margin:					3em 0 2em 0;
}
#kwis-vraag {
font-weight:			bold;
}
#kwis-antwoorden {
}
#kwis-goed-antwoord {
}
#kwis-fout-antwoord {
}
#kwis-correct-antwoord {
}
.tussenscore {
font-size:			1.4em !important;
}
.groen {
color:					green;
font-weight:			bold;
}
.rood {
color:					red;
font-weight:			bold;
}


/* ---------- cursussen ---------- */
.cursus-details {
margin:				1em 0 3em 2em;  
}
.tree h4 {
margin:				0;
padding:			0;
}
.tree ul {
margin:				0 0 0 2em;
padding:			0.5em 0 1em 1em;
}
.tree ul li {
margin:				0;
padding:			0 0 0.1em 0;
}
	.level0 {
	display:			none;
	}
	.level2 {
	padding-left:		1em;
	}
	.level2 h4 {
	color:				#666;
	}

/* ---------- grid ---------- */
.grid-element {
position:				relative;
text-align:				center;
background-color:		#F5F5F5;
border:					1px solid #EEE;
float:					left;
width:					170px;
height:					200px;
margin:					0 5px 5px 0;
}
.grid-element .photo {
width:					154px;
height:					167px;
vertical-align:			middle;
margin:					8px;
}
.grid-element img {
border:					1px solid #E4E4E4;
}
.grid-element-big img {
border:					1px solid #E4E4E4;
}
.grid-element-big .fotograaf {
font-size:				0.8em;
}
.grid-element:hover {
background-color:		#EDEDED;
}
.grid-element .descr {
position:				absolute;
bottom:					8px;
left:					0;
width:					170px;
height:					25px;	
font-size:				0.9em;
line-height:			1.3em;
}
#topnav {
_height:				0.1em;	
background-color:		#FFF;
margin:					-20px 0 15px 0;
font-size:				0.9em;
padding:				0 15px 0 15px;
position: 				relative;	
}
#topnav table.nav {
width:					100%;
}
#topnav table.nav td {
padding:				2px 5px 2px 5px;
white-space:			nowrap;
}


/* ---------- footer ---------- */
	
#footer {
margin-top:			1em;
padding:			25px 25px 0 25px;
height:				46px;
background: 		#EFEFEF url(footer-bg.gif) repeat-x;
border:				1px solid #FFF;
font-size:			0.9em;
line-height:		1.5em;
position:			relative;
white-space:		nowrap;
}
.foot-logo {
position:			absolute;
top:				0;
left:				0;
background:			url(footer-bg-logo.gif) no-repeat;
width:				63px;
height:				72px;
}
.foot-logo hr {
display:			none;
}
.foot-left {
float: 				left;
text-align:			left;
width:				40%;
margin-left:		40px;
display:			inline;
}
.foot-right {
float: 				right;
text-align:			right;
width:				40%;	
font-size:			0.85em;
line-height:		1.55em;
}
#footer a:link,
#footer a:visited,
#footer a:active {
color:				#888;
font-weight:		bold;
}
#footer a:hover {
color:				#444;
font-weight:		bold;
}

/* ---------- tables ---------- */
table {
border-collapse:		collapse;
}
table td {
height: 				2em; 
padding:				0 0.8em;
}
table.fill td {
background-color:		#F7F7F7;
border-right:			1px solid #FFF;
border-bottom:			1px solid #FFF;
}
table.fill tr:hover td {
background-color:		#F2F2F2;
}
table tr.thead td,
table thead td,
table th td {
background:				#E5E5E5 url(datatab_left.gif) 0 -300px no-repeat !important;
padding:				0 0.8em;
font-weight:			bold !important;
white-space:			nowrap;
border-right:			1px solid #FFF;
}
table td.label {
text-align:				right ! important;
width:					30%;
padding-right:			20px;
font-weight:			bold !important;
font-size:				0.95em;
white-space:			nowrap;
}
.nolabel {
font-weight:			normal;
font-style:				italic;
font-size:				9px;
}
/* no border for inline tables */
table td table {
border: 				0;
}
table td table td {
border: 				0;
}
table td table td table {
border: 				0;
}
table td table td table td {
border: 				0;
}

/* ---------- forms ---------- */

form, fieldset {
margin:					0; 
padding:				0;
}
fieldset		{
border:					0;
}
input, select {
font: 					11px Verdana, Arial, Helvetica, sans-serif;
color: 					#333;
}
input:focus {
background-color: 		#F5F8E7;
}
select {
background-color: 		#FAFAFA;
padding:				0;
margin-top:				0;
margin-bottom:			0;
}
textarea {
font: 					11px Verdana, Arial, Helvetica, sans-serif;
color: 					#333;
background-color: 		#FCFCFC;
min-height:				7em;
border:					1px solid #ABABAB; 
padding:				2px 5px 2px 5px;
margin:					0;
width:					70%;
} 
textarea:focus {
background-color: 		#F5F8E7;
}
/* some specific form classes */
.formField {
background-color: 		#FAFAFA;
border:					1px solid #ABABAB; 
padding:				2px 5px 2px 5px;
margin-top:				0;
margin-bottom:			0;
}
.formButton {
color:					#555;
font: 					11px Verdana, Arial, Helvetica, sans-serif;
border:					1px solid #C9C9C9; 
padding:				2px 5px 2px 5px;
background-color:		#EDEDED;
}
.formButton:hover {
border:					1px solid #999; 
background-color:		#CCC;
}
.formButton:active {
background-color:		#CCC;
}


/* ---------- magic boxes ---------- */
.clear 	 {clear: both; height: 0.1em;}
.box10p  {width: 10%;}
.box20p  {width: 20%;}
.box25p  {width: 25%;}
.box30p  {width: 30%;}
.box40p  {width: 40%;}
.box50p  {width: 50%;}
.box60p  {width: 60%;}
.box70p  {width: 70%;}
.box75p  {width: 75%;}
.box80p	 {width: 80%;}
.box90p  {width: 90%;}
.box95p  {width: 95%;}
.box100p {width: 99.5%;}
.box20   {width: 20px;}
.box75   {width: 75px;}
.box100  {width: 100px;}
.box150  {width: 150px;}
.box200  {width: 200px;}
.box250  {width: 250px;}
.hcentr  {text-align: center 		!important;}
.hleft 	 {text-align: left 			!important;}
.hright  {text-align: right 		!important;}
.vtop 	 {vertical-align: top 		!important;}
.vmid 	 {vertical-align: middle 	!important;}
.vbot 	 {vertical-align: bottom 	!important;}
.right 	 {float: right 				!important;}
.left 	 {float: left 				!important;}
.nowrap  {white-space: nowrap 		!important;}