/* -------------------------------------------------------------------------------------------------

Overal waar er "basic" staat wil dit zeggen dat er nog geen element is aan gekoppeld.
Ik moet echter iets schrijven om m'n css werkende te houden...
Van de moment er een specifieke element bv. font-size:1.5em nodig heeft, vervang ik "basic"
met de naam vh element, bv. h2 {font-size:1.5em;}

Over het algemeen is het verloop vd stylesheet als volgt:

1. Font-sizes, colors, font-weight, interlinie, text-decoration, text-transform, overflow
2. Algemene zaken
3. Masthead + main
4. Col-l
5. Col-r
	5.1 content
	5.2 sidebar
6. Lists
7. Headers
8. Footer
9. Clearfix, skipnav

------------------------------------------------------------------------------------------------- */




/* -------------------------------------------------------------------------------------------------
	1. Font-sizes, colors, font-weight, interlinie, text-decoration, text-transform, overflow
------------------------------------------------------------------------------------------------- */

/*
FONT-SIZES --------------------- */ /*

Body = 15px = 0.94em;

	/*12px = 0.8em*/		#sidebar .box, h3 {font-size:0.8em;}
	/*13px = 0.86em*/		basic {font-size:0.86em;}
	/*14px = 0.93em*/		basic {font-size:0.93em;}
	/*15px = 1em*/			h2 {font-size:1em;}
	/*16px = 1.06em*/		basic {font-size:1.06em;}
	/*17px = 1.13em*/		basic {font-size:1.13em;}
	



/*
COLORS --------------------- */ /*

Body = #423838;

	/* grijs = #423838;*/			#sidebar a, #main #content .toplink a, #linkje, #taalkeuze, #taalkeuze a {color:#423838;}
	/* beige = #EEECE1;*/			h3 {color:#EEECE1;}

	
	/* 1:lichtgroen = #ABB201;*/	#index h2, #index #content a, #index .tijd {color:#ABB201;}
	/* 2:lichtblauw = #6699FF;*/	#een_dag_in_het_ziekenhuis h2, #een_dag_in_het_ziekenhuis #content a, #een_dag_in_het_ziekenhuis .tijd {color:#6699FF;}
	/* 3:oranje = #FF6600;*/		#wie_zijn_al_die_mensen_die_hier_rondlopen h2, #wie_zijn_al_die_mensen_die_hier_rondlopen #content a, #wie_zijn_al_die_mensen_die_hier_rondlopen .tijd {color:#FF6600;}
	/* 4:rood = #FF3300*/			#wat_gaan_ze_allemaal_met_me_doen h2, #wat_gaan_ze_allemaal_met_me_doen #content a, #wat_gaan_ze_allemaal_met_me_doen .tijd {color:#FF3300;}
    /* 5:lichtoranje = #FF9900;*/	#wat_is_dat h2, #wat_is_dat #content a, #wat_is_dat .tijd {color:#FF9900;}
	/* 6:paars = #6633CC;*/			#wat_wordt_onderzocht h2, #wat_wordt_onderzocht #content a, #wat_wordt_onderzocht .tijd {color:#6633CC;}
	/* 7:roos = #FF3399;*/			#eten_drinken_en_snoep h2, #eten_drinken_en_snoep #content a, #eten_drinken_en_snoep .tijd {color:#FF3399;}
	/* 8:blauw = #6666FF;*/			#op_bezoek h2, #op_bezoek #content a, #op_bezoek .tijd {color:#6666FF;}


/*
FONT-WEIGHT --------------------- */

	#sidebar a, #wrapper #main ul.conversatie li, .tijd {font-weight:bold;}
	basic {font-weight:normal;}
/*	#wrapper #main ul.conversatie li {font-style:italic;}*/
	
	
/*
INTERLINIE --------------------- */
	basic {line-height:1.5em;}


	
/*
TEXT-DECORATION --------------------- */
	#main ul li a, #main #content .toplink a {text-decoration:none;}
	#main ul li a:hover, #main #content .toplink a:hover {text-decoration:underline;}



/*
TEXT-TRANSFORM --------------------- */
	basic {text-transform:uppercase;}


/*
OVERFLOW --------------------- */
	basic {overflow:hidden;}





/* -------------------------------------------------------------------------------------------------
	2. Algemene zaken
------------------------------------------------------------------------------------------------- */

body{
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.94em;
	text-align: center;
	color: #423838;
	background:#EEECE1 url(../images/bg_body.gif) repeat-y top center;
}

* {
	margin:0;
	padding:0;
	border:0;
}

#wrapper {
	width:881px;
	text-align:left;
	margin:0 auto;
}

.lijntje {
	background:#423838;
	height:1px;
	margin:10px 0;
}

.toplink {
	text-align:right;
}

	.toplink a {
		padding-left:13px;
	}
	
	#index .toplink a {background:url(../images/bullet_toplink_1.gif) no-repeat center left;}
	#een_dag_in_het_ziekenhuis .toplink a {background:url(../images/bullet_toplink_2.gif) no-repeat center left;}
	#wie_zijn_al_die_mensen_die_hier_rondlopen .toplink a {background:url(../images/bullet_toplink_3.gif) no-repeat center left;}
	#wat_gaan_ze_allemaal_met_me_doen .toplink a {background:url(../images/bullet_toplink_4.gif) no-repeat center left;}
	#wat_is_dat .toplink a {background:url(../images/bullet_toplink_5.gif) no-repeat center left;}
	#wat_wordt_onderzocht .toplink a {background:url(../images/bullet_toplink_6.gif) no-repeat center left;}
	#eten_drinken_en_snoep .toplink a {background:url(../images/bullet_toplink_7.gif) no-repeat center left;}
	#op_bezoek .toplink a {background:url(../images/bullet_toplink_8.gif) no-repeat center left;}
	
p {
	margin-top:10px;
}

p.marginless {
	margin-top:0;
}

.schema {
	margin-top:10px;
}

.tijd {
	width:120px;
	float:left;
	text-align:right;
}

.taak {
	width:260px;
	float:right;
}



/* -------------------------------------------------------------------------------------------------
	3. Masthead + main
------------------------------------------------------------------------------------------------- */

#masthead {
	position:relative;
	height:80px;
}

	#logo {
		position:absolute;
		bottom:0;
		left:0;
	}
	
	#linkje {
		position:absolute;
		bottom:10px;
		right:20px;
	}
	
	#taalkeuze{
		position: absolute;
		top: 0;
		right: 20px;
		font-size: 1em;
		text-transform: uppercase;
		
	}

#index #main {background:url(../images/bg_main_1.gif) repeat-y top right;}
#een_dag_in_het_ziekenhuis #main {background:url(../images/bg_main_2.gif) repeat-y top right;}
#wie_zijn_al_die_mensen_die_hier_rondlopen #main {background:url(../images/bg_main_3.gif) repeat-y top right;}
#wat_gaan_ze_allemaal_met_me_doen #main {background:url(../images/bg_main_4.gif) repeat-y top right;}
#wat_is_dat #main {background:url(../images/bg_main_5.gif) repeat-y top right;}
#wat_wordt_onderzocht #main {background:url(../images/bg_main_6.gif) repeat-y top right;}
#eten_drinken_en_snoep #main {background:url(../images/bg_main_7.gif) repeat-y top right;}
#op_bezoek #main {background:url(../images/bg_main_8.gif) repeat-y top right;}


/* -------------------------------------------------------------------------------------------------
	4. Col-l
------------------------------------------------------------------------------------------------- */

#col-l {
	float:left;
	width:240px;
}

#col-l h1 {
	text-indent:-9999em;
	width:240px;
	height:582px;
}

	#index #col-l h1 {background:url(../images/banner_1.gif) no-repeat top left;}
	#een_dag_in_het_ziekenhuis #col-l h1 {background:url(../images/banner_2.gif) no-repeat top left;}
	#wie_zijn_al_die_mensen_die_hier_rondlopen #col-l h1 {background:url(../images/banner_3.gif) no-repeat top left;}
	#wat_gaan_ze_allemaal_met_me_doen #col-l h1 {background:url(../images/banner_4.gif) no-repeat top left;}
	#wat_is_dat #col-l h1 {background:url(../images/banner_5.gif) no-repeat top left;}
	#wat_wordt_onderzocht #col-l h1 {background:url(../images/banner_6.gif) no-repeat top left;}
	#eten_drinken_en_snoep #col-l h1 {background:url(../images/banner_7.gif) no-repeat top left;}
	#op_bezoek #col-l h1 {background:url(../images/banner_8.gif) no-repeat top left;}
		



/* -------------------------------------------------------------------------------------------------
	5. Col-r
------------------------------------------------------------------------------------------------- */
#col-r {
	float:right;
	width:620px;
}

/* --------------------------------------------------------- 
	5.1 Content
--------------------------------------------------------- */
#content {
	float:left;
	width:400px;
}

	


/* --------------------------------------------------------- 
	5.2 Sidebar
--------------------------------------------------------- */
#sidebar {
	float:right;
	width:200px;
}

.box {
	padding:15px 20px;
}

.whitespace {
	height:10px;
	background:#fff;
}








/* -------------------------------------------------------------------------------------------------
	6. Lists
------------------------------------------------------------------------------------------------- */

ul {
	list-style:none;
}

#nav {
	height:130px;
	margin-bottom:10px;
}

	#nav li {
		float:left;
		height:130px;
	}
	
		#nav li a {
			display:block;
			text-indent:-9999em;
			height:130px; /* height moet hier staan ipv op li's, anders pakt explorer niet alles als a:hover */
		}
		
		#nav li a span {
			position:absolute;
			left:-9999em;
		}
		
		#nav li a#nav_1 {background:url(../images/nav_1.gif) no-repeat top left;width:99px;}
		#nav li a#nav_2 {background:url(../images/nav_2.gif) no-repeat top left;width:107px;}
		#nav li a#nav_3 {background:url(../images/nav_3.gif) no-repeat top left;width:115px;}
		#nav li a#nav_4 {background:url(../images/nav_4.gif) no-repeat top left;width:117px;}
		#nav li a#nav_5 {background:url(../images/nav_5.gif) no-repeat top left;width:97px;}
		#nav li a#nav_6 {background:url(../images/nav_6.gif) no-repeat top left;width:115px;}
		#nav li a#nav_7 {background:url(../images/nav_7.gif) no-repeat top left;width:114px;}
		#nav li a#nav_8 {background:url(../images/nav_8.gif) no-repeat top left;width:117px;}
		
		#nav li a#nav_1:hover, #index #nav li a#nav_1 {background:url(../images/nav_1.gif) no-repeat top right;}
		#nav li a#nav_2:hover, #een_dag_in_het_ziekenhuis #nav li a#nav_2 {background:url(../images/nav_2.gif) no-repeat top right;}
		#nav li a#nav_3:hover, #wie_zijn_al_die_mensen_die_hier_rondlopen #nav li a#nav_3 {background:url(../images/nav_3.gif) no-repeat top right;}
		#nav li a#nav_4:hover, #wat_gaan_ze_allemaal_met_me_doen #nav li a#nav_4 {background:url(../images/nav_4.gif) no-repeat top right;}
		#nav li a#nav_5:hover, #wat_is_dat #nav li a#nav_5 {background:url(../images/nav_5.gif) no-repeat top right;}
		#nav li a#nav_6:hover, #wat_wordt_onderzocht #nav li a#nav_6 {background:url(../images/nav_6.gif) no-repeat top right;}
		#nav li a#nav_7:hover, #eten_drinken_en_snoep #nav li a#nav_7 {background:url(../images/nav_7.gif) no-repeat top right;}
		#nav li a#nav_8:hover, #op_bezoek #nav li a#nav_8 {background:url(../images/nav_8.gif) no-repeat top right;}

#main ul {
	margin-top:10px;
}

#main ul li {
	padding-left:15px;
	line-height:1.4em;
	background:url(../images/bullet_disc.gif) no-repeat 0px 5px;
}

#main ul.links li {
	list-style:none;
}

#index #main ul.links li {background:url(../images/bullet_li_1.gif) no-repeat 0px 5px;}
#een_dag_in_het_ziekenhuis #main ul.links li {background:url(../images/bullet_li_2.gif) no-repeat 0px 5px;}
#wie_zijn_al_die_mensen_die_hier_rondlopen #main ul.links li {background:url(../images/bullet_li_3.gif) no-repeat 0px 5px;}
#wat_gaan_ze_allemaal_met_me_doen #main ul.links li {background:url(../images/bullet_li_4.gif) no-repeat 0px 5px;}
#wat_is_dat #main ul.links li {background:url(../images/bullet_li_5.gif) no-repeat 0px 5px;}
#wat_wordt_onderzocht #main ul.links li {background:url(../images/bullet_li_6.gif) no-repeat 0px 5px;}
#eten_drinken_en_snoep #main ul.links li {background:url(../images/bullet_li_7.gif) no-repeat 0px 5px;}
#op_bezoek #main ul.links li {background:url(../images/bullet_li_8.gif) no-repeat 0px 5 px;}

#wrapper #main ul.conversatie li {
	padding-left:10px;
	line-height:1.4em;
	background:url(../images/bullet_conversatie.gif) no-repeat 0px 10px;
	list-style:none;
}




/* -------------------------------------------------------------------------------------------------
	7. Headers
------------------------------------------------------------------------------------------------- */

h2 {
	margin-top:15px;
}

h3 {
	padding:0 20px;
	line-height:2.5em;
}

	#index h3 {background:#ABB201;}
	#een_dag_in_het_ziekenhuis h3 {background:#6699FF;}
	#wie_zijn_al_die_mensen_die_hier_rondlopen h3 {background:#FF6600;}
	#wat_gaan_ze_allemaal_met_me_doen h3 {background:#FF3300;}
	#wat_is_dat h3 {background:#FF9900;}
	#wat_wordt_onderzocht h3 {background:#6633CC;}
	#eten_drinken_en_snoep h3 {background:#FF3399;}
	#op_bezoek h3 {background:#6666FF;}
	


/* -------------------------------------------------------------------------------------------------
	8. Footer
------------------------------------------------------------------------------------------------- */

#footer {
	height:18px;
}

	#index #footer {background:url(../images/footer_1.gif) no-repeat top left;}
	#een_dag_in_het_ziekenhuis #footer {background:url(../images/footer_2.gif) no-repeat top left;}
	#wie_zijn_al_die_mensen_die_hier_rondlopen #footer {background:url(../images/footer_3.gif) no-repeat top left;}
	#wat_gaan_ze_allemaal_met_me_doen #footer {background:url(../images/footer_4.gif) no-repeat top left;}
	#wat_is_dat #footer {background:url(../images/footer_5.gif) no-repeat top left;}
	#wat_wordt_onderzocht #footer {background:url(../images/footer_6.gif) no-repeat top left;}
	#eten_drinken_en_snoep #footer {background:url(../images/footer_7.gif) no-repeat top left;}
	#op_bezoek #footer {background:url(../images/footer_8.gif) no-repeat top left;}






/* -------------------------------------------------------------------------------------------------
	9. Clearfix, skipnav
------------------------------------------------------------------------------------------------- */

a#skipnav{
	position: absolute;
	top: -999px;
	left: -999px;
}

a#skipnav:focus, a#skipnav:active, a#skipnav:hover{
	top: 0;
	left: 0;
	z-index: 9999;
	
	background: #fff;
	display: block;
	padding: 5px;
	text-align: center;
	font-weight: bold;
	color: #333;
}

/* hackje
------------------------------------------------ */
.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */