@import url("reset.css");
/* HIERBOVEN NIETS VERWIJDEREN! */

html, body {
height: 100%; /* heel belangrijk */
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color: #000;
background: #e3eac2;
text-align: center;
background-image:url(../images_header/bckgr.gif);
background-repeat:repeat-x;
}

/* dit is om de donkere balk onderin de pagina over de hele breedte te laten lopen */
#background {
background-image:url(../images_header/bckgr_bottom.gif);
background-position:bottom;
background-repeat:repeat-x;
}

/* dit zorgt er voor dat de breedte van de pagina's beperkt is en gecentreerd. En dat de pagina over de volledige hoogte te zien is, ook al is deze niet geheel gevuld */
#container {
width: 802px;
margin: 0 auto;
text-align: left;
position: relative;
min-height: 100%;
height: auto !important; /* voor moderne browsers */
height: 100%; /* voor IE */
border-left: 1px solid #fff;
border-right: 1px solid #fff;
}

/* dit is de kop van de website */
#header{
padding:0px;
margin: 0 auto;
height:120px;
}

/* definitie van de plaats waar het menu komt, menu wordt hieronder uitgewerkt*/
#menu {
text-align: left;
z-index: 1;
border-top: 1px solid #fff;
}

/* dit is de inhoud van de website */
#inhoud {
padding: 3em 25px 40px 25px;
z-index: -2;

}
/* dit is de inhoud van de website */
#menukader {
position:absolute;
top: 120px;
width: 802px;
height: 30px;
z-index: 5;
}

/* dit is de inhoud van de website */
#inhoudhomeboven {
padding: 3em 25px 10px 25px;
z-index: -2;
}

/* op de homepagina is deze afwijkend ivm de kolom die er naast staat */
#inhoudhome {
	z-index: -2;
	width:440px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 25px;
	padding-left: 25px;
}
#komende_activiteiten {
	height: 200px;
	width: 700px;
}
#ka_re {
	height: 200px;
	width: 340px;
	float: none;
}
#ka_li {
	height: 200px;
	width: 340px;
	float: left;
}



/* dit is de onderbalk van de website */
#footer {
position: absolute;
bottom: 0; /* heel belangrijk */
padding-top: 3px;
width: 100%;
background: #33332d;
height: 20px;
left: 0px;
color:#FFF;
text-align:center;
}

/* heeft waarschijnlijk geen toegevoegde waarde, maar laat het staan voor de zekerheid */
a {
	outline: none;
	color:#000000;
}

/* hier wordt er voor gezorgd dat er geen kaders rondom afbeeldingen staan als deze een link zijn. */
a img {
border : none;
}

/* dit bepaald de kleur van de standaard links */
a:link { color:#000000; }
a:hover{ color:#f26227; }

/* dit bepaald de kleur van de links in de footer */
a.foot:link { color:#FFFFFF; }
a.foot:hover{ color:#f26227; }
a.foot:visited { color:#FFFFFF; }

/* met h1 t/m h5 worden 5 verschillende kopjes bepaald, met p de vormgeving van de standaard tekst */
h1 {
font-size: 15px; 
margin-bottom: 14px;
font-weight:900;
}

h2 {
font-size: 12px;
margin-bottom: 5px;
font-weight:900;
}

h3 {
font-size: 12px; 
margin-bottom: 0px;
font-weight:900;
}

h4 {
	font-size: 10px;
	margin-bottom: 5px;
	margin-top: 5px;
	font-weight:900;
	color: #333333;
}

h5 {
font-size: 12px;
margin-bottom: 6px;
font-weight:900;
color:#f26227;
}

/* onderschrift bij een foto */
h6 {
font-size: 0.8em;
margin-bottom: 15px;
font-style:italic;
margin-top: 5px;
font-weight:normal;
}

p {
font-size: 12px;
margin-bottom: 15px;
line-height: 17px;
}

/* met blok 1/m 3 worden de blokken in header bepaald */
.blok1 {
margin-top:20px;
margin-left:23px;
border: 1px solid;
border-color:#FFF; 
}
.blok2 {
margin-top:20px;
margin-left:23px;
border: 1px solid;
border-color:#FFF;
}
.blok3 {
margin-top:20px;
margin-left:23px;
border: 1px solid;
border-color:#bcd14f;
}

/* hiermee wordt een zwart kader om een afbeelding geplaatst */
.kader { border: 1px solid;
		 border-color:#000; 
}
/* hiermee wordt ruimte rond een afbeelding geplaatst */
.foto {
	margin-right: 5px;
}

/* hiermee wordt de vormgeving van lijstjes bepaald */
 li{
font-size: 12px;
line-height: 17px;
list-style-type:disc;
list-style-position:outside;
}
/* hiermee de uitlijning van de nieuwsberichten bepaald */
.nieuws {
padding-left: 165px;
}
/* hiermee de uitlijning van de kalender bepaald */
.kalender {
position: fixed; 
padding-left: 70px;
}


.kadernieuws {
	border: 1px solid #000;
	float:left;
	margin-right:15px;
}
.kadernieuws_geenrand {
	float:left;
	margin-right:15px;
	border: 7px solid #000000;
}


/* kolom aan de rechterzijde op de homepagina */
.kolomrechts {
	position:absolute;
	left: 467px;
	width: 250px;
	height: -18px;
	z-index: -1;
	top: 310px;
	margin-left:15px;
	margin-top: 0px;
	padding-top: 5px;
	padding-right: 10px;
	padding-bottom: 10px;
	padding-left: 5px;
	border-top-width: thin;
	border-right-width: thin;
	border-left-width: thin;
	border-top-style: inset;
	border-right-style: inset;
	border-bottom-style: inset;
	border-left-style: inset;
	border-bottom-width: thin;
} 
/* hieronder staan diverse toegevoegde stijlen.*/
.aanmeldingen {
	font-weight:900;
	color:#f26227;
}
.agendagvoorbij {
		color:#999;
}

/* hieronder staat alles wat met het menu te maken heeft.*/
#nav, #nav ul {
	float: left;
	text-align:left;
	width: 800px;
	list-style: none;
	line-height: 1;
	font-weight: bold;
	padding:0;
	margin: 0 0 0 0;
}

#nav a {
	display: block;
	text-decoration: none;
	padding: 3px 5px 0px 6px;
}

/* padding left/right geeft aan hoe ver de tekst van de lijn staat. Padding right en left aanpassen om de items mooi over de menubalk de verdelen*/
#nav li {
	float: left;
	padding: 2px;
	padding-right: 13px;
	padding-left: 13px;
	height: 29px;
	background: #cad492;
	list-style-type:none;
}

/* margin geeft de positie tot hoofdmenubalk aan, laatste getal is horizontale positie*/
#nav li ul {
	position: absolute;
	left: -999em;
	height: 26px;
	width: 20.4em;
	w\idth: 6em;
	font-weight: normal;
	margin: 7px 10px 10px -21px;
}

#nav li li {
	padding-right: 1em;
}

.xsmal {
	width: 6.3em;
}
.smal {
	width: 8em;
}
.breed {
	width: 14em;
}

.medium {
	width: 14em;
}

#nav li ul a {
	width: 20em;
	w\idth: 16em;
}

#nav li ul ul {
	margin: -22px 0 0 9.1em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
	left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
	left: auto;
}

#nav li:hover {
	color:#000000;
}