/* base
--------------------------------------------------- */

a{
	text-decoration:underline;
}

body{
	background:#afbbd6 url(../img/bgshade.gif) repeat-y top center; 
	margin:0;
}

/* TAAL MENU */

#langmenu{
	margin:80px 50px;
	float:right;
	list-style-type:none;
}
#langmenu li{
	margin:0 5px;
	padding:0;
	float:left;
	background:none;
}
#langmenu li a{
	padding:0;
	margin:0;
	text-align:left;
	text-indent:-999em;	
	text-decoration:none;
	display:block;
	width:18px;
	height:18px;	
	overflow:hidden;	
	
}
#langmenu li.nl a{
	background:	white url(../img/nl.gif) no-repeat top left;	
}
#langmenu li.fr a{
	background:	white url(../img/fr.gif) no-repeat top left;		
}

/* hoofd blokken */
	
#mainCell{
	width:751px;
	padding:0 8px;
}
#mainBodyCell{
	width:528px;
	padding:14px;
	margin-right:8px;
	float:left;
}
#sidebarCell{
	background-color:#dcecf3;
	width:178px;
	float:left;
}
.clear{
	clear:both;
	height:0;
	width:0;
	display:block;
}

/* titel */

h1.mainTitle{
}

.formField{
	margin:0px;
	padding:3px;
	color:#6F7F8C;
}

.formFieldRadioCheck{
	margin:0px;
	padding:3px;
	color:#6F7F8C;
}

.formFieldRequired{
	margin:0px;
	padding:3px;
	background-color:#B7CFDB;
	border:1px solid #12597E;
	color:#6F7F8C;
}

.formFieldRadioCheckRequired{
	margin:0px;
	padding:3px;
	background-color:#B7CFDB;
	border:1px solid #12597E;
	color:#6F7F8C;
}

/* layout
--------------------------------------------------- */

.break{
	clear:both;
}

#wrapper {
	/* De wrapper bevat de website */
	/* Er is een witte rand adhv padding */
	/* We gebruiken geen border omwille van een bug in IE bij het bereken van absolute posities */
	/* De breedte is de "innerWidth" */
	margin: 0 auto;
	text-align: left;
	background-color: #fff;
	width: 759px;
	padding-left:10px;
	padding-right:9px;
}
#header {
	/* De header bevat het logo bovenaan */
	/* Er is een witte rand onderaan van 4 pixels */
	height: 130px;
	width: 759px;
	padding:0px;
	margin:0px;
	text-align:left;
	background-image:url(../img/sodalisheader.jpg);
	vertical-align:bottom;
	text-align:right;
	display:block;
}
#logo{
	/* De logo layer bevat het logo via padding wordt het gepositioneerd */
	display:none;
	height:0px;
	
}
#content {
	/* De content layer is de basis layer waar inhoud komt (2 kolommen : col1 & main) */
	/* We maken een boord links en recht met dashed border, samen met blauwe balk rechts, via background image */
	width:759px;
	margin:0px;
	padding:0px;
	background-image: url(../img/bg-content.gif);
	background-repeat:repeat-y;
	display:block;
}
#content.noSidebar {
	/* De content layer is de basis layer waar inhoud komt (2 kolommen : col1 & main) */
	/* We maken een boord links en recht met dashed border, samen met blauwe balk rechts, via background image */
	width:759px;
	margin:0px;
	padding:0px;
	background:white;
	display:block;
}

#breadcrumbs {
	border-bottom:7px solid white;
	color:#7eb0cd;
	background-color:#f3f7f9;
	margin:0 0 0 8px;
	padding:0 0 0 14px;
	width:728px;
	height:24px;
	display:block;
	list-style:none;
	line-height:100%;
}
#breadcrumbs li{
	line-height:24px;
	display:block;
	background:none;
	float:left;
	padding:0;
	margin:0 0 0 3px;
}
#breadcrumbs li:before { 
	content: ">  "; 
} 

#blueballs{
	margin-left:8px;
	margin-right:8px;
	height:22px;
	background-image: url(../img/blueball.gif);
	background-position:center center;
	background-repeat:repeat-x;
	width:743px;
	display:block;
}
#footer {
	/* De footer komt onderaan, met een witte rand boven van 4px */
	background-color: #F3F7F9;
	display:block;
	width: 743px;
	height:20px;
	text-align:right;
	padding-left:8px;
	padding-right:8px;
	padding-top:8px;
	padding-bottom:8px;
	color:#7EB0CD;
	font-size:12px;
	vertical-align:middle;
}


/* main navigation
--------------------------------------------------- */

/* dit is de top ul 
volle breedte, borders, etc */
#topmenu {
	/* nav bevat het menu bovenaan */
	height: 21px;
	border-top:1px solid #21A3E0;
	border-bottom:1px solid #21A3E0;
	margin-bottom:8px;
	text-align:right;
	display: block;
	width:100%;
	list-style:none;
	background:none;	
}

/* dit is niveau 1 van de top ul, gewoon float left */
#topmenu li {
	/* om de list-items naast elkaar te krijgen, zetten we de float op "left" */
	/* ook hier de list-style en background op none */
	float: left;
	padding:0;
	margin:0;
	list-style:none;
	background:none;
}
/* de layout steken we altijd op de a : hier het eerste niveau, geen borders */
#topmenu li a {
	/* de anchor moet op display block staan om mooie blokken te vormen */
	height: 21px;
	line-height: 21px;
	display: block;
	text-decoration: none;
	white-space: nowrap;
	border:none;
	vertical-align:middle;
	margin:0 10px;
	background:white;
}
#topmenu li a:link, #topmenu li a:visited {
	color:#468FB8;
}
#topmenu li a:hover, #topmenu li#active a {
	color: #064AA6;
}

/* dit is een belangrijk voor de dropdown menu's, vanaf de 2 niveau
de dropdown zijn uiteraard onder elke, dus float af zetten */
#topmenu li li {
	float: none;
}

/* dit is voor alle anchors vanaf 2e niveau */
#topmenu li ul a {
	width: 152px;
	padding: 2px 5px;
	text-align: left;
	font-size:11px;
}

/* dit voor alle ul's vanaf 2e niveau */
/* margin-top : 2px => dit is de 2px verlaging tov parent menu */
/* breedte is ook belangrijk, zodat de list items mooi onder elkaar wrappen */
#topmenu li ul {
	display: none;
	list-style: none;
	position: absolute;
	margin: 0;
	margin-top: 4px;
	z-index: 90;
	padding: 0;
	width:160px;
}

/* hier geven we layout aan de 2nd niveau anchors */
/* geen top border (voor border collapse effect) */
#topmenu li ul li a {
	border:1px solid #72c5ec;
	border-width:0px 1px 1px 1px;
	color:#468fb8;
}
#topmenu li ul li a:hover {
	background:#d1e9f2;
	color:#064aa6;
}
/* om ervoor te zorgen dat er een rand is boven aan, gebruiken we selector first-child */
#topmenu li ul li:first-child a{
	border:1px solid #72c5ec;
	border-width:1px 1px 1px 1px;
	color:#468fb8;
}
#topmenu li ul li:first-child a:hover{
	background:#d1e9f2;
	color:#064aa6;
}
/* dit is dan uiteindelijk de vanaf 3rd level ul's positionering */
#topmenu li ul li ul {
	margin: -26px 0 0 163px;
	position: absolute;
}

#topmenu span {
	float: right;
}
/**** FYI , de multi-ddm kan ook een array meegeven van classes per niveau ****/

/* headings
--------------------------------------------------- */

h3 {
	font-size: 14px;
	font-weight: bold;
	color: #666;
	margin-bottom:5px;
}

/* text
--------------------------------------------------- */

#footer p {
	margin-left:8px;
	margin-right:8px;
	font: 10px/25px Arial, Helvetica, Verdana, sans-serif;
	color: #999;
	padding-right: 15px;
	text-align:center;
}
#footer2 p {
	text-align: right;
	font-size:11px;
	letter-spacing: 1px;
}

strong {
	font-size: 12px;
	font-weight: bold;
	color: #454545
}

/* sidebar blocks
--------------------------------------------------- */

.box {
	display:block;
	float:left;
	margin:0px;
	padding:0px;
	width:100%;
	border-bottom: 8px solid #fff;
	background-color:#dcecf3;
}
.box h3 {
	letter-spacing: 2px;
	text-transform: uppercase;
	color: #666;
	padding: 7px;
	font-size:12px;
	font-weight:normal;
}

.box ul{
	margin: 7px;
	list-style-type:none;
}
.box ul li {
	list-style-type:none;
	background-image:url(../img/bulletSidepanel.gif);
	background-repeat:no-repeat;
	background-position:5px 7px;
	margin-left:0px;
	border:none;
	padding:0 0 0 17px;
}

/* news */
.lijstitem{
	border:1px solid #666;
	margin-bottom:5px;
	padding:10px;
	clear:both;
	display:block;
	background:white;
	width:506px;
}

.lijstimage{
	border:1px solid #eee;
	width:80px;
	height:80px;
	float:left;
	display:block;
}
.lijstimage.noborder{
	border:1px solid transparent;
	width:80px;
	height:80px;
	float:left;
	display:block;
}
.lijsttekst{
	margin:0px 0px 0px 10px;
	float:left;
	display:block;
	width:414px;
}
.lijsttekst strong{
	color:#D23300;
	font-weight:bold;
}
/* who is who */
.whoiswhoitem{
	margin-bottom:5px;
	clear:both;
	display:block;
	width:528px;
}

.whoiswhoimage{
	border:1px solid #eee;
	width:80px;
	height:80px;
	float:left;
	display:block;
}
.whoiswhotekst{
	margin:0px 0px 0px 10px;
	float:left;
	display:block;
	width:436px;
}
.whoiswhotekst h3{
	padding:0;
	margin:0;
	float:left;
	display:inline;
	font-size:12px;
}
.whoiswhotekst h4{
	padding:0;
	margin:0;
	color:#D23300;
	font-weight:bold;
	float:right;
	display:inline;	
	font-size:12px;
}