@charset "utf-8";
/* CSS Document */

/* -------------------------------------------------------------- START CONTAINER -------------------------------------------------------------- */
* {
	margin: 0;
	padding: 0;
}

html, body {
	font-family: Arial;
	font-size: 12px;
}

div#container {
	width: 980px;
	margin: 10px auto;
}

/* -------------------------------------------------------------- END CONTAINER -------------------------------------------------------------- */



/* -------------------------------------------------------------- START HEADER -------------------------------------------------------------- */
div#header {
	height: 94px;
}

/* Hieronder de logo's, links homeopathi en rechts 'Gezond beter worden voor iedereen' */
div#header img.logo_links {
	float: left;
	margin-left: 186px; 
	width: 583px;
	height: 51px;
	padding: 2px 0px 0px 12px;
}

/* Hier is het menu wat onder het rechter logo staat */
div#header div#menu_boven {
	width: 769px;
	height: 40px;
	line-height: 40px;
	clear: both;
	margin-left: 198px;
	font-size: 10px;
	font-weight: bold;
}

div#header div#menu_boven ul {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding-left: 0px;
	width: 769px;
}

div#header div#menu_boven ul li {
	display: block;
	display: inline;
	padding-right: 25px;
	line-height: 34px;
}

/* Contact krijgt een apart id mee, want deze moet rechts uitgelijnd worden.*/
div#header div#astyle {
	 position: absolute;
	 margin: 0 auto;
	 width: 15px;
	 height: 10px;
	 top: 0px;
	 left: 50%;
	 margin-left: 462px;
	 margin-top: 70px;
	 z-index:999999;
}

div#header div#astyle ul {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
}

div#header div#astyle ul li.fontsizer {
	float: right;
	padding: 0px;
}

div#header div#astyle ul li.fontsizer a#fs_sml {
	font-size: 10px;
	cursor: pointer;
}

div#header div#astyle ul li.fontsizer a#fs_med{
	font-size: 14px;
	cursor: pointer;
}

div#header div#astyle ul li.fontsizer a#fs_lrg{
	font-size: 18px;
	cursor: pointer;
}

div#header div#menu_boven ul li a, div#header div#astyle ul li a {
	text-decoration: none;
	color: #009b3a;
}

div#header div#menu_boven ul li a:hover, div#header div#menu_boven ul li .selected, div#header div#astyle ul li.fontsizer a.fsactive {
	text-decoration: none;
	color: #003885;
}
/* -------------------------------------------------------------- END HEADER -------------------------------------------------------------- */


/* -------------------------------------------------------------- START LINKERKANT -------------------------------------------------------------- */
/* Aan de linkerkant komen alle nieuwtjes te staan, links en rechts een padding meegeven */
div#links {
	width: 173px;
	padding-left: 12px;
	padding-right: 13px;
	float: left;
}

div#links div.nieuwtje {
	width: 173px;
	margin-bottom: 13px;
}

div#links div.nieuwtje h2 {
	margin-top: -3px;
	font-size: 11px;
	font-weight: normal;
}

/* De h2 tags zijn links en verwijzen naar een andere pagina. Deze zijn groter en worden groen weergeven*/
div#links div.nieuwtje h2 a {
	color: #009b3a;
	text-decoration: none;
}
div#links div.nieuwtje h2 a:hover {
	color: #003885;
}

/* Normale tekst is zwart */
div#links div.nieuwtje p {
 	color: #000000;
 	font-size: 11px;
 	margin-bottom: -1px;
}

/* Alles hieronder wordt gebruikt om de groenen lijnen op te bouwen van de nieuwtjes */
div#links div.nieuwtje div.nieuwtje_boven {
	background-image: url(../images/nieuwtje_boven.jpg);
	background-position: top;
	background-repeat: no-repeat;
	padding: 0px;
	height: 13px;
}
div#links div.nieuwtje div.nieuwtje_content {
	background-image: url(../images/nieuwtje_content.jpg);
	background-position: top;
	background-repeat: repeat-y;
	padding: 0px 10px;
}
div#links div.nieuwtje div.nieuwtje_beneden {
	background-image: url(../images/nieuwtje_onder.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px 10px;
	height: 13px;
}

/* Het onderste nieuwtje bevat een image. Het plaatje heeft links en rechts nog groenen lijnen en de rondingen zitten er ook al aan. Het plaatje bovenop de groene lijn, zit er dus al aan vast. */
div#links div.nieuwtje div.nieuwtje_boven_image {
	background-image: url(../images/nieuwtje_boven_image.jpg);
	background-position: top;
	background-repeat: no-repeat;
	padding: 0px;
	height: 149px;
}
/* -------------------------------------------------------------- END LINKERKANT -------------------------------------------------------------- */


/* -------------------------------------------------------------- START MIDDEN -------------------------------------------------------------- */
div#midden {
	width: 584px;
	min-height: 390px;
	height: auto !important; /* IE hack */
	height: 390px;
	float: left;
	position: relative;
	z-index: 999;
}

div#midden div#content a {
	text-decoration: none;
	color: #009b3a;
}
div#midden div#content a:hover {
	text-decoration: none;
	color: #003885;
}

/* ------------ Hieronder staat alles voor het hoofdmenu, dit staat op de homepage, het menu bestaat uit 6 grote plaatjes ------------ */
div#midden div#hoofdmenu ul{
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	margin: 0px;
	padding: 0px;
}

div#midden div#hoofdmenu ul li{
	display: block;
	float: left;
	width: 185px;
	height: 231px;
}

/* Omdat de plaatjes verdeeld moeten worden over de ruimte, float ik links naar links en rechts naar rechts. Het middelste plaatje heeft alleen een margin rechts en links .*/
div#midden div#hoofdmenu ul li.links{
	float: left;
	margin-bottom: 14px;
}

div#midden div#hoofdmenu ul li.midden{
	margin: 0px 14px 14px 14px;
}

div#midden div#hoofdmenu ul li.rechts{
	margin-bottom: 14px;
}

div#midden div#hoofdmenu ul li a img{
	border-style: none;
}

/* -------------------------------------------------------------- HOME PLAATJES -------------------------------------------------------------- */
div#midden h3 {
	color:      #fff;
	font-size:   25px;
	text-decoration: none;
	font-weight: normal;
}

div#midden h3 a, div#midden h3 a:hover {
	color:      #fff;
	font-size:   25px;
	text-decoration: none;
	font-weight: normal;
}

div#midden div#algemeen p {
	font-size: 10px;
}
div#midden div#algemeen p a, div#midden div#algemeen p a:hover {
	color: #fff;
	text-decoration: none;
}

div#midden #algemeen {
	position: absolute;
	color:      #fff;
	margin: 0 auto;
	width: 175px;
	height: 220px;
	top: 0px;
	left: 50%;
	margin-left: -280px;
	margin-top: 7px;
	z-index:999999;
}

div#midden #vrouw {
	position: absolute;
	margin: 0 auto;
	width: 15px;
	height: 10px;
	top: 0px;
	left: 50%;
	margin-left: -80px;
	margin-top: 7px;
	z-index:999999;
}

div#midden #man {
	position: absolute;
	margin: 0 auto;
	width: 15px;
	height: 10px;
	top: 0px;
	left: 50%;
	margin-left: 120px;
	margin-top: 7px;
	z-index:999999;
}

div#midden #kind {
	position: absolute;
	margin: 0 auto;
	width: 15px;
	height: 10px;
	top: 0px;
	left: 50%;
	margin-left: -280px;
	margin-top: 251px;
	z-index:999999;
}

div#midden #senior {
	position: absolute;
	margin: 0 auto;
	width: 15px;
	height: 10px;
	top: 0px;
	left: 50%;
	margin-left: -80px;
	margin-top: 251px;
	z-index:999999;
}

div#midden #dier {
	position: absolute;
	margin: 0 auto;
	width: 15px;
	height: 10px;
	top: 0px;
	left: 50%;
	margin-left: 120px;
	margin-top: 251px;
	z-index:999999;
}
/* ------------ Dit was het einde van alle hoofdmenu plaatjes, de rest hieronder gaat weer verder voor een normale pagina ------------ */


/* Deze div komt aan de linkerkant van het midden, het midden is namelijk ingedeeld in 2 stukken, de linkerkant (deze dus), bevat het menu */
div#midden div#menu_links {
	float: left;
	width: 103px;
	margin-right: 13px;
	font-size: 11px;
}

/* Hieronder staat het menu van de content, dat zijn die plaatjes met ronde hoekjes (vrouw, man, kind etc,). */
div#midden div#menu_links ul {
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
}

div#midden div#menu_links ul li {
	display: block;
	width: 100px;
	height: 37px;
	margin-bottom: 10px;
	padding: 8px 5px 0px 8px;
	background-image: url(../images/menu_wit.jpg);
	background-repeat: no-repeat;
}

div#midden div#menu_links ul .active {
	background-image: url(../images/menu_groen.jpg);
	background-repeat: no-repeat;
}

div#midden div#menu_links ul .active a, div#midden div#menu_links ul .image a{
	color: white;
}

div#midden div#menu_links ul li a {
	display: block;
	color: #009b3a;
	text-decoration: none;
	width: 100px;
	height: 37px;	
}

/* Content bevindt zich ook in het midden van de site, aan de rechterkant van het menu wat hierboven staat beschreven */
div#midden div#content {
	width: 467px;
	float: left;
}

div#midden div#content img.corners {
	margin-bottom: 5px;
}

/* Bovenin bij het content, net onder de banner, bevindt zich nog een menu. Dit menu staat onder de banner */
div#midden div#content div#menu_content {
	width: 467px;
	margin: 2px 0px;
}

div#midden div#content div#menu_content ul {
	list-style-image: none;
	list-style-type: none;
	margin: 0px;
}

div#midden div#content div#menu_content ul li {
	float: left;
	height: 18px;
	display: block;
	margin-bottom: 7px;
	padding-right: 10px;
	width: 145px;
}

/* Het menu bestaat uit h2's */
div#midden div#content div#menu_content ul li h2 {
	font-size: 10px;
	line-height: 10px;
	font-weight: normal;
}

div#midden div#content div#menu_content ul li a{
	font-size: 10px;
	text-decoration: none;
	color: #009b3a;
}

div#midden div#content div#menu_content ul li a:hover{
	text-decoration: none;
	color: #003885;
}

/* De 'Meer informatie' tekst, is groen en schuingedrukt, dus krijgt deze een aparte tag en styling mee */
div#midden div#content span.meer_info a {
	color: #009b3a;
	text-decoration: none;
	font-style: italic;
}

div#midden div#content span.meer_info a:hover {
	color: #003885;
	text-decoration: none;
	font-style: italic;
}

/* Het hoofditem is het divje met een groene achtergrond, hierin staat een hoofdtekst. Daaronder beginnen de losse items, die noem ik subitems */
div#midden div#content div.hoofditem {
	width: 467px;
	margin-bottom: 13px;
	margin-top: 5px;
	float: left;
}

div#midden div#content div.hoofditem h1 {
	color: #009b3a;
	font-size: 25px;
	font-weight: normal;
	text-decoration: none;
}

div#midden div#content div.hoofditem h2 {
	color: #009b3a;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

div#midden div#content div.hoofditem p {
	color: #000000;
	font-size: 11px;
	line-height: 14px;
	padding-bottom: 5px;
}

div#midden div#content div.hoofditem ul {
	margin-left: 15px;
	font-size: 11px;
	line-height: 14px;
}

/* Hieronder begint de styling van het aanmeldformulier */
div#midden div#content div.hoofditem p{
	line-height: 14px;
}

div#midden div#content div.hoofditem input{
	margin-bottom: 6px;
	width: 150px;
}

div#midden div#content div.hoofditem input.invoerkort{
	width: 23px;
}

div#midden div#content div.hoofditem input.invoerjaar {
	width: 37px;
}

div#midden div#content div.hoofditem input.invoerpostcode {
	width: 55px;
}

div#midden div#content div.hoofditem input.knop {
	margin-bottom: 0px;
	margin-right: 20px;
	width: 80px;
	text-align: center;
}

div#midden div#content div.hoofditem input.reset{
	margin-right: 0px;
}

div#midden div#content div.hoofditem input.keuze {
	width: 25px;
}

div#midden div#content div.hoofditem select{
	margin-bottom: 12px;
	width: 200px;
}

div#midden div#content div.hoofditem textarea{
	margin-bottom: 6px;
	width: 445px;
}


/* Hieronder staat de styling van het blok zelf, dus de ronde hoeken en de groene kleur */
div#midden div#content div.hoofditem_boven {
	background-image: url(../images/hoofditem_boven.jpg);
	background-position: top;
	background-repeat: no-repeat;
	padding: 0px;
	height: 9px;
}

div#midden div#content div.hoofditem_content {
	background-image: url(../images/hoofditem_midden.jpg);
	background-position: center;
	background-repeat: repeat-y;
	padding: 0px 10px;
}
div#midden div#content div.hoofditem_content a {
	color: #009b3a;
	text-decoration: none;
	font-style: italic;
}

div#midden div#content div.hoofditem_content a:hover {
	color: #003885;
	text-decoration: none;
	font-style: italic;
}

div#midden div#content div.hoofditem_beneden {
	background-image: url(../images/hoofditem_onder.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px 9px;
	height: 9px;
}

/* De subitems komen onder het hoofditem te staan. Ze hebben links een image en daarnaast de tekst, ook hebben ze een witte kleur van binnen, maar die groene border buitenom */
div#midden div#content div.subitem {
	float: left;
	width: 467px;
	margin-bottom: 13px;
}

div#midden div#content div.subitem .img {
	padding: 5px 10px 0px 3px;
	padding-right: 10px;
	padding-bottom: 0;
	float: left;
	overflow:hidden;
}

div#midden div#content div.subitem p.spacer {
	clear: both;
}

div#midden div#content div.subitem h1 {
	color: #009b3a;
	font-size: 25px;
	font-weight: normal;
	text-decoration: none;
}

div#midden div#content div.subitem span.titel{
	color: #009b3a;
	font-size: 11px;
	font-weight: bold;
	text-decoration: none;
}

div#midden div#content div.subitem p.hoofdtekst {
	color: #000000;
	font-size: 11px;
	line-height: 14px;
	padding-bottom: 3px;
}

div#midden div#content div.subitem p{
	color: #000000;
	font-size: 11px;
	line-height: 14px;
	padding-bottom: 3px;
}

/* Dit zorgt ervoor dat de tekst allemaal netjes onder het plaatje komt en dus niet deels naast het plaatje en de rest eronder */
div#midden div#content div.subitem p.clear {
	clear: both;
}

/* Hieronder weer de styling van het divje met de ronde hoeken */
div#midden div#content div.subitem_boven {
	background-image: url(../images/subitem_boven.jpg);
	background-position: top;
	background-repeat: no-repeat;
	padding: 0px;
	height: 10px;
}

div#midden div#content div.subitem_content {
	background-image: url(../images/subitem_midden.jpg);
	background-position: center;
	background-repeat: repeat-y;
	padding: 0px 10px;
	margin: 0;
}

div#midden div#content div.subitem_content a {
	color: #009b3a;
	text-decoration: none;
	font-style: italic;
}

div#midden div#content div.subitem_content a:hover {
	color: #003885;
	text-decoration: none;
	font-style: italic;
}

div#midden div#content div.subitem_beneden {
	background-image: url(../images/subitem_onder.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px 10px;
	height: 10px;
}
/* -------------------------------------------------------------- END MIDDEN -------------------------------------------------------------- */


/* -------------------------------------------------------------- START RECHTERKANT -------------------------------------------------------------- */
div#rechts {
	width: 173px;
	padding-left: 12px;
	padding-right: 13px;
	float: left;
}

/* Alles rechts heb ik maar nieuwtje genoemd, terwijl je hier ook kunt zoeken enz. Maar ik wist geen betere naam */
div#rechts div.nieuwtje {
	width: 173px;
	margin-bottom: 13px;
}

div#rechts div.zoekblok { 
	width: 151px;
	height: 15px;
	padding: 7px 11px;
	margin-bottom: 13px;
	background: url(../images/zoeken_achtergrond.jpg) no-repeat;	
}

div#rechts div.nieuwtje div.nieuwtje_content h2{
	color: #009b3a;
	font-size: 11px;
	font-weight: normal;
	margin-top: -3px;
}

div#rechts div.nieuwtje div.nieuwtje_content h2 a {
	color: #009b3a;
	text-decoration: none;
}

div#rechts div.nieuwtje div.nieuwtje_content h2 a:hover {
	color: #003885;
}

div#rechts div.nieuwtje div.nieuwtje_content p {
 	color: #000000;
 	font-size: 11px;
 	margin-bottom: -1px;
}

/* Hieronder de styling van het zoekvlak en de zendknop voor postcode en zoeken. */
div#rechts input.zoeken {
	height: 12px;
	line-height: 12px;
	border-style: none;
}

/* Het zoekknopje moet rechts uitgelijnd worden. */
div#rechts input.zenden {
	margin: 0;
	padding: 0;
	height: 12px;
	width: 35px;
	font-size: 9px;
	line-height: 12px;
	background: #fff;
	border: none;
	cursor: pointer;
	text-align: right;
}

/* Bij het postcode formpje, moet een groene border komen, dit maakt duidelijker waar de gebruiker wat kan intypen */
div#rechts div.nieuwtje div.nieuwtje_content div.postcode_form form {
	border: 1px solid #009b3a;
	padding: 1px;
}

/* Er is een aparte styling nodig voor het tekstje 'postcode' voor het invoerveld van het formulier */
div#rechts div.nieuwtje div.nieuwtje_content div.postcode_form p.postcode_form {
	font-size: 11px;
	line-height: 13px;
	padding-top: 2px;
}

/* Voor het invoerveld van zoeken en postcode zoeken, wordt een andere breedtje meegegeven. */
div#rechts div.zoekblok div.search_form input.zoeken {
	width: 105px;
	font-size: 11px;
}

div#rechts div.nieuwtje div.nieuwtje_content div.postcode_form input.zoeken {
	width: 50px;
	font-size: 11px;
}

/* Het invoerveld van de postcode krijgt een margin-left, want links staat eerst nog de tekst 'postcode', bij de regel hieronder, wordt hij gestyled*/
div#rechts div.nieuwtje div.nieuwtje_content div.postcode_form form {
	margin-left: 50px;
}

div#rechts div.nieuwtje div.nieuwtje_content div.postcode_form p { 
	float: left;
	width: 55px;
	line-height: 12px;
}

/* Hieronder weer de styling van de divjes, met ronde hoeken etc. */
div#rechts div.nieuwtje div.nieuwtje_boven {
	background-image: url(../images/nieuwtje_boven.jpg);
	background-position: top;
	background-repeat: no-repeat;
	padding: 0px;
	height: 13px;
}

div#rechts div.nieuwtje div.nieuwtje_content {
	background-image: url(../images/nieuwtje_content.jpg);
	background-position: top;
	background-repeat: repeat-y;
	padding: 0px 10px;
}

div#rechts div.nieuwtje div.nieuwtje_beneden {
	background-image: url(../images/nieuwtje_onder.jpg);
	background-position: bottom;
	background-repeat: no-repeat;
	padding: 0px 10px;
	height: 13px;
}
/* -------------------------------------------------------------- END MIDDEN -------------------------------------------------------------- */


/* -------------------------------------------------------------- START FOOTER -------------------------------------------------------------- */
div#footer {
	width: 980px;
	float: left;
	margin-top: -50px;
	position: relative;
	z-index: 99;
}

/* De contactgegevens staan in een aparte div, zodat ik deze mooi kan uitlijnen. Doordat de gehele footer een negatieve margin heeft, kunnen de contactgegevens naast de content komen te staan */
div#footer div#contact {
	margin: 13px;
	float: left;
}

div#footer div#contact p {
	font-size: 9px;
}

div#footer div#contact p a {
	color: #009b3a;
}

div#footer div#contact p a:hover {
	color: #003885;
}

/* De Disclaimer en de aanpasdatum staan in een aparte div, zodat ik deze mooi kan uitlijnen. Doordat de gehele footer een negatieve margin heeft, komen ze net als de contactgegevens naast de content */
div#footer div#disclaimer {
	width: 173px;
	margin-top: 3px;
	margin-right: 13px;
	float: right;
	text-align: left;
}

div#footer div#disclaimer p {
	font-size: 9px;
}

div#footer div#disclaimer p a {
	color: #009b3a;
}

div#footer div#disclaimer p a:hover {
	color: #003885;
}

/* De cloudtag staat in een aparte div. Deze komt helemaal onderaan de website, onder het laatste subitem bij de content */
div#footer div#cloud {
	clear: both;
	margin: 13px;
	border-top: 1px solid #cccccc;
}

/* Deze HR zorgt ervoor dat de cloud woorden (die gefloat worden), netjes onder elkaar en naast elkaar blijven staan. */
div#footer div#cloud hr.spacer {
	height: 1px;
	clear: both;
	visibility: hidden;
}

/* Ik gebruik nu 3 verschillende grooten, h1, h2 en h3. Dit kun je nog veranderen door bijv. procenten. Daar moet je zelf even naar kijken, ik weet niet hoe je die cloud tag ga implementeren */
div#footer div#cloud h1 a{
	float: left;
	color: #cccccc;
	font-size: 15px;
	padding: 0px 20px;
	text-decoration: none;
	line-height: 15px;
}

div#footer div#cloud h2 a{
	float: left;
	color: #cccccc;
	font-size: 13px;
	padding: 0px 20px;
	text-decoration: none;
	line-height: 15px;
}

div#footer div#cloud h3 a{
	float: left;
	color: #cccccc;
	font-size: 11px;
	padding: 0px 20px;
	text-decoration: none;
	line-height: 15px;
}
/* -------------------------------------------------------------- END FOOTER -------------------------------------------------------------- */