/*
In dit bestand de CSS die de layout van je gehele website bepaald. Hier gebeurt het allemaal, maar je moet hier ook
heel voorzichtig zijn en goed de toelichting lezen ! De website is verdeeld in een header, body (middengeelte) en de
footer. Daarnaast zijn er nog specifieke balken zoals de Navigatiebalk, de Templatebalk en de Dropdownmenubalken.
De body wordt (afhankelijk van je menuinstellingen en overige instellingen opgegeven via het beheerdersgedeelte)
verdeeld in 1, 2 of 3 kolommen.
De layout van de gehele website is zo gemaakt dat de website er ook goed uitziet bij hogere schermresoluties dan
1024 met telkens middencontainers van 960 pixels. Deze indeling is gebruikelijk voor de meeste moderne websites.
Om deze middencontainers is altijd nog een buitencontainer die je ook een achtergrondkleur kan geven waardoor je bij
hogere schermresoluties een special effect krijgt.

Volg altijd de instructies in dit bestand en bij twijfel waar je moet wezen kijk dan in de handleidingen op de
website of vraag het in het forum !
NOOIT de positionering (position) veranderen (wel de waardes daarvan) want daar is heel veel over nagedacht om alles
samen te vormen tot 1 geheel. Wijzigingen daaraan kunnen tot zeer ongewenste effecten leiden !

Inhoud:
CSS voor html,body en sitecontainer
CSS voor containers en middencontainers
CSS voor de Header met daarin:
   CSS voor de navigatiebalk
   CSS voor het headervlak
   CSS voor de themasitebalk
   CSS voor de dropdownmenubalken
CSS voor het middengebied/body
Einde CSS voor containers en middencontainers - Gaat verder onderaan bij #footercontainer
CSS voor linker, midden en rechterkolom in bodycontainermidden
   CSS voor omspanning bij weergave linkerkolom met menu = 3 kolom layout
      CSS voor mogelijke kolommen bij weergave linkerkolom met menu = 3 kolom layout
   CSS voor omspanning bij weergave GEEN linkerkolom met menu = 2 kolom layout
      CSS voor mogelijke kolommen bij GEEN weergave linkerkolom met menu = 2 kolom layout
   CSS voor tranparantie
      Methode 1: CSS tranparantie: apparte kolommen
      Methode 2: CSS tranparantie: 1 volledig vlak
      Methode 3: CSS tranparantie: Alles transparant
CSS voor extra achtervlakken
CSS voor de footer
*/


/*__________________________CSS voor html, body, sitecontainer en sitecontainermidden________________________________*/

/* NIETS aan veranderen behalve lettertype en kleur (indien gewenst) */
html, body {
margin: 0;
padding: 0;
border: 0;
width: 100%;
height: 100%;
min-width: 960px;
/* Standaard lettertype voor gehele website inclusief menu's */
font-family: Arial, Verdana, Helvetica, Sans-serif;
/* Standaard tekstkleur voor gehele website */
color: #000000;
/* Standaard lettergrootte voor gehele website inclusief menu's
Let op: in het bestand algemeen.css geef je de lettergrootte appart op voor de tekstblokken in het bodygedeelte.
Deze HIER kun je dus beter op 12 laten staan anders veranderd OVERAL de lettergrootte dus ook van de menu wat tot
ongewenste effecten kan leiden ! */
font-size: 12px;
background-color: #A2BCAC; /* zacht groen */

background-color: #D0D4FA; /* kleur van plaatje */
background-color: #F1C6FA;

background-color: #ffffff;
}

/* Deze container zit om de gehele website en is noodzakelijk als extra container om alles goed te positioneren
(inclusief achtergrondafbeeldingen. NIETS aan veranderen BEHALVE de top waarde en eventueel een
benedenmarge toevoegen + achtergrondkleur. */
#sitecontainer {
min-height: 100%;
position: relative;
overflow: hidden;
left: 0px;
top: 0px;
/* Als je GEEN gebruik maakt van een volledige achtergrondafbeelding en ook de schdaduw om de bodycontainermidden
weghaald KUN je de sitecontainer een achtergrondkleur geven. Wat ook kan is een gradient effect toevoegen bv heel
licht grijs voor een special effect bij hogere resoluties. Dit geeft hetzelfde effect als een schaduw om het
middengebied:
*/
/*
background: #ffffff;
background: -moz-linear-gradient(left,  #ffffff 0%, #c0c0c0 20%, #c0c0c0 80%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ffffff), color-stop(20%,#c0c0c0), color-stop(80%,#c0c0c0), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #ffffff 0%,#c0c0c0 20%,#c0c0c0 80%,#ffffff 100%);
background: -o-linear-gradient(left,  #ffffff 0%,#c0c0c0 20%,#c0c0c0 80%,#ffffff 100%);
background: -ms-linear-gradient(left,  #ffffff 0%,#c0c0c0 20%,#c0c0c0 80%,#ffffff 100%);
background: linear-gradient(left,  #ffffff 0%,#c0c0c0 20%,#c0c0c0 80%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ffffff',GradientType=1 );
*/

/* Als er GEEN navigatieblak is en je wilt minder ruimte bovenaan of geen ruimte bovenaan dan kun je de ruimte die
de navigatiebalk standaard inneemt negatief verminderen zodat alles naar boven wordt verplaatst */
/*margin-top: -42px;*/
/*
   background: -moz-linear-gradient(top,  #792A93 0%, silver 100%);
   */
}

/* Eigenlijk geen echter container maar een vlak wat van boven naar beneden loopt met als functie om de schaduw links
en rechts toe te voegen */
#sitecontainermidden {
position: absolute;
z-index: 1;
/* Het vlak loopt helemaal door tot boven uit het zicht */
/* Als je via beheer achtergrondafbeelding ACHTER header of volledige achtergrondafbeelding achter website activeert
en je wilt in de header gebruik maken van transparantie (hieronder te activeren) dan  top -305 veranderen in top: -22;
of top: 0; */
top: -305px;
left: 50%;
/* Het vlak loopt helemaal door tot onder de footer uit het zicht */
bottom: -200px;
display: block;
margin-left: -480px;
width: 960px;
/* Als je via beheer achtergrondafbeelding ACHTER header of volledige achtergrondafbeelding achter website activeert
en je wilt in de header of de body gebruik maken van transparantiemethoden (hieronder te activeren) dan hier de
achtergrondkleur verwijderen/deactiveren OF het achtervlak de hoogte van je header geven (ongeveer height: 290px;)
zodat de header wel het achtervlak behoudt. Transparantie en schaduw links en rechts is namelijk geen mooie combinatie. */
background-color: #ffffff;
/* Schaduw links en rechts van de containermidden voor alle browsers */
-webkit-box-shadow: 0px 0px 25px 0px #808080;
-moz-box-shadow: 0px 0px 25px 0px #808080;
box-shadow: 0px 0px 25px 0px #808080;
}

/*_______________________Einde CSS voor html, body, sitecontainer en sitecontainermidden_____________________________*/





/* _________________________________CSS voor containers en middencontainers__________________________________________*/
/* Om een vast middengebied te creëren is er telkens een container die zich uitstrekt over de volledige breedte van
de website dus ook op hogere resoluties met DAARIN de middencontainers met een vaste breedte van 960 pixels voor een
minimale schermresolutie van 1024 bij 768). Deze vaste breedte keert telkens terug bij alle middengebieden.
Containers zijn: #headercontainer, #themasitecontainer, #navtabelcontainer, #drmenucontainer, #bodycontainer
#footercontainer
Middencontainers zijn: #headermidden, #themasitemidden, #navtabelmidden, #drmenu1midden en
#drmenu2midden, #bodycontainermidden, #footermidden
*/

/*_______________________________________CSS voor de Header met daarin:_____________________________________________*/




/*_________________________________________CSS voor de navigatiebalk________________________________________________*/

/* In de navigatiebalk worden links naar geactiveerde onderdelen weergegeven zoals Home, Faq, Links, Forum etc als
die daarin geactiveerd zijn via het beheerdersgedeelte ! Na installatie staat deze balk bovenaan de website boven het
headervlak. Deze balk verdwijnt vanzelf als er GEEN onderdelen in deze balk geactiveerd zijn EN home in het
dropdownmenu geactiveerd is. */

/* Dit is de over de gehele breedte omspannende container van de navigatiebalk */
#navtabelcontainer {
position: absolute;
z-index: 7;
/* Door top van 0px naar bv 282px te veranderen kun je hem onder de header plaatsen (als je geen gebruik maakt van het
dropdownmenu.) Je krijgt dan een lege ruimte bovenaan de website. Dit kun je dichtmaken door de instructies op te
volgen bij #sitecontainer */
top: 241px;
left: 0px;
display: block;
margin: 0px;
padding: 0px;
width: 100%;
min-width: 960px;
}

/* De middencontainer van de navigatiebalk waar de uiteindelijke inhoud in wordt weergegeven */
#navtabelmidden {
display: table;
width: 960px;
margin:0px;
padding: 0px;
margin-left: auto;
margin-right: auto;

}

/* Bij uitzondering is de navigatiebalk nog onder verdeeld in 2 kolommen: een brede links en een wat smallere recht
met daarin de registratie, mijn profiel en uitloggen links voor het forum en wachtwoordbeveiligde themasites.
/* Belangrijk ! Zorg dat de width bij tdnavtabel en tdnavtabelr altijd opgeteld 1px onder de
960 uitkomen. Als ze exact 960 zijn wordt je site NIET goed weergegven in Internet Explorer 7 ! */

/* De linkerkolom in de navigatiebalk met daarin standaard na installtie de Homeknop en de link naar het forum.
Andere onderdelen kunnen ook geactieveerd worden in deze balk */
#tdnavtabel {
float: left;
width: 585px;
margin:0px;
padding: 0px;
}

/* De rechterkolom in de navigatiebalk met daarin de registratie, mijn profiel en uitloggen links voor het forum en
wachtwoordbeveiligde themasites */
#tdnavtabelr {
float: right;
width: 364px;
margin:0px;
padding: 0px;
text-align: right;
}

/* De inhoud van de navigatiebalk en hun opmaak vindt je in het bestand header.css */

/*_______________________________________Einde CSS voor de navigatiebalk____________________________________________*/




/*__________________________________________CSS voor het headervlak_________________________________________________*/
/* In het headervlak worden de sitelogo, de sitetitel, de siteleus en de headertekst weergegeven */

/* Dit is de over de gehele breedte omspannende container van het headervlak */
#headercontainer {
position: absolute;
display: block;
width: 100%;
min-width: 960px;
margin: 0px;
padding: 0px;
/* waarden onder dit commentaar kunnen veranderd worden */
/* Dit is de hoogte/ruimte die de navigatiebalk bovenaan de website inneemt. Eventueel kan top ook op 0 worden
gezet bij BEHOUD van de navigatiebalk ! Dan vallen de navigatielinks en forumregistratielinks over de header heen wat
op zich ook kan. Als je dit hier wijzigt (wat je in eerste instantie zeker niet moet doen) moet je het ook bij
.headerinhoud doen. Heb je echter geen navigatiebalk meer volg DAN de instructies bij #sitecontainer. */
top: 42px;
/* Zelfde hoogte als headermidden */
height: 240px;
}

/* De middencontainer van het headervlak waar de uiteindelijke inhoud in wordt weergegeven */
#headermidden {
display: block;
width: 960px;
margin: 0;
padding: 0;
margin-left: auto;
margin-right: auto;
/* Zelfde hoogte als headercontainer */
height: 240px;
background-color: #ffffff;
/* Tranparantie toevoegen - Zie: www.css-opacity.pascal-seven.de
Het effect wordt bepaald door de achtergrondkleur (hierboven) en de waarde van de transparantie */
-moz-opacity: 0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter:alpha(opacity=80);
}


/* De inhoud van de header weergegeven over headermidden:
Als transparantie wordt toegevoegd aan de header wordt (werd) alles (tekst) daarin ook transparant. Om dit te
voorkomen is de inhoud van de header in de html buiten de header div geplaatst en vervolgens er overheen
gepositioneerd zodat de transparantie geen invloed heeft op de inhoud ! */
.headerinhoud {
position: absolute;
z-index: 5;
top: 42px;
left: 0px;
right: 0px;
height: 240px;
display: block;
width: 960px;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
}

/* In het templatebestand kun je in de headermidden of achter de headermidden een flash bestand weergeven.
De div met id headerswf staat daar al en tussen die div kun je je object code plaatsen. Voor weergave in de
middenheader achter de headerinhoud kun je dit doen op de plaats waar de div nu staat. Als je een grotere/breder
flash/swf bestand dan de breedte van de middenheader achter de header wilt plaatsen verplaats dan de div naar BOVEN de
printheader(); functie !
In principe hoef je hier verder NIETS te veranderen ookal zou je dat wel denken (dus ook hoogtes en breedtes niet) want
ook bij een breder flash bestand centreert hij automatisch en loopt hij gelijkmatig over aan beide kanten. */
#headerswf {
position: absolute;
z-index: 4;
top: 42px;
left: 0px;
right: 0px;
display: block;
width: 960px;
height: 240px;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
/* Als je swf/flash bestand OVER de gehele middenheader wilt hebben dus dat je niet meer ziet van de siteleus en titel
en headertekst dan kun je hier z-index: 300 toevoegen */
/* z-index: 300; */
}

/* De inhoud van het headervlak en hun opmaak vindt je in het bestand header.css */

/*_______________________________________Einde CSS voor het headervlak______________________________________________*/




/*__________________________________________CSS voor de themasitebalk_______________________________________________*/
/* Als er extra themasites zijn worden die weergegeven in de themasitebalk. Deze balk kan ook in zijn geheel
gedeactiveerd worden via het beheerdersgedeelte. In plaats daarvan kan dan gelinkt worden naar een themasite
via externe url. */

/* Dit is de over de gehele breedte omspannende container van de themasitebalk */
#themasitecontainer {
position: absolute;
z-index: 6;
top: 42px;
left: 0px;
display: block;
width: 100%;
min-width: 960px;
margin: 0px;
padding: 0px;
}

/* De middencontainer van de themasitebalk waar de uiteindelijke inhoud in wordt weergegeven */
#themasitemidden {
width: 960px;
height: 20px;
margin-left: auto;
margin-right: auto;
padding-top: 5px;
font-weight: bold;
color: #ffffff;
}

/* De inhoud van de themasitebalk en hun opmaak vindt je in het bestand header.css */

/*_______________________________________Einde CSS voor de themasitebalk____________________________________________*/




/*_______________________________________CSS voor de dropdownmenubalken____________________________________________*/
/* Via het beheerdersgedeelte kun je menu's en pagina's activeren in een dropdownmenu. Er kan daar gekozen worden uit
2 dropdownmenu's. */

/* Dit is de over de gehele breedte omspannende container van de dorpdownmenubalken */
#drmenucontainer {
position:absolute;
z-index: 8;
top:282px;

top:10px;
/* IE6 Fix, zorgen dat 2 pixels lager is dan gewone top positie */
_top:280px;


left:0px;
width: 100%;
min-width: 960px;
min-height: 23px;
/* Als je niet wilt dat de achtergrond hoger wordt als subnavigatie uitgeklapt is voeg je max height toe.*/
/* max-height: 26px; */
margin: 0px;
padding: 0px;
/* Schaduw voor alle browsers. De schaduw loopt door links en rechts over de gehele breedte van de website bij
hogere schermresoluties. Als je dit storend vindt dan kun je deze schaduw verplaatsen naar de #drmenu(nummer van
dropdownmenu)midden hieronder afhankelijk van welk dropdownmenu je gebruikt OF geheel verwijderen. */

/*
-webkit-box-shadow: 0px 0px 10px 0px #808080;
-moz-box-shadow: 0px 0px 10px 0px #808080;
box-shadow: 0px 0px 10px 0px #808080;
*/
}

/* De middencontainer van dropdownmenu(balk) 1 waar de uiteindelijke inhoud in wordt weergegeven */
#drmenu1midden {
display: table;
width: 960px;
margin: 0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
/* De achtergrondkleur voor drmenu1midden verander je bij .navigation in dropdown1.css */
}

/* De middencontainer van dropdownmenu(balk) 2 waar de uiteindelijke inhoud in wordt weergegeven */
#drmenu2midden {
margin: 0;
padding: 0;
display: table;
width: 960px;
margin-left: auto;
margin-right: auto;
height:26px;
background-color: #792A93;
}

/* De rest van de css voor de dropdownmenu's geef je op in dropdown1.css of dropdown2.css afhankelijk van welk
dropdownmenu je gebruikt wat je opgeeft via het beheerdersgedeelte/ */

/*____________________________________Einde CSS voor de dropdownmenubalken__________________________________________*/




/*________________________________________Einde CSS voor de Header__________________________________________________*/





/*______________________________________CSS voor het middengebied/body______________________________________________*/
/* De body is het gebied tussen de header en de footer */
/* Let op: Bij een hogere of lage footer dan hier bij #bodycontainer de padding-bottom daaraan gelijk maken */

/* Dit is de over de gehele breedte omspannende container van de body */
#bodycontainer {
position:relative;
display:block;
width: 100%;
min-width: 960px;
margin:0px;
padding: 0px;
/* Waarden onder dit commentaar kunnen veranderd worden */
/* Als je meer of minder ruimte wilt tussen de header en het middengedeelte van de website of anders gezegd
als je het middengedeelte van de website hoger of lager wilt plaatsen verhoog of verlaag dan
margin-top. De margin zorgt hier voor de positionering ipv dat er bv top: waarde is toegevoegd. De rede hiervoor is
dat het anders onderaan niet klopt. */
margin-top: 280px;
/* Hoogte van de footer. Zorgen dat deze dezelfde waarde heeft als #footercontainer en footermidden anders valt de
tekst onder de footer !! */
padding-bottom: 180px;
}

/* De middencontainer van de body waar de uiteindelijke inhoud in wordt weergegeven. Onder inhoud worden hier de
verschillende menu of tekst kolommen bedoeld afhankelijk van de weergave. */
#bodycontainermidden {
display:block;
width: 960px;
margin:0px;
padding: 0px;
margin-left: auto;
margin-right: auto;
}

/*___________________________________Einde CSS voor het middengebied/body___________________________________________*/





/* _____________________________Einde CSS voor containers en middencontainers_______________________________________*/
                               /* Gaat verder onderaan bij #footercontainer */





/* _______________________CSS voor linker, midden en rechterkolom in bodycontainermidden____________________________*/
/* afhankelijk van de weergave via de instellingen voor menu's opgegeven via het beheerdersgedeelte worden er
1, 2 of 3 kolommen weergegeven op de website */





/* ___________________CSS voor omspanning bij weergave linkerkolom met menu = 3 kolom layout________________________*/

/* Gedeelde CSS van de div van #hoofdtabel, #hoofdtabelmp omspannen alle kolommen die zich daarin bevinden:
Situatie 1: omspannen van #hoofdtabeltdl en #hoofdtabeltdm
Situatie 2: omspannen van hoofdtabeltdl, #hoofdtabeltdms en hoofdtabeltdr */
#hoofdtabel, #hoofdtabelmp {
position: relative;
z-index: 7;
left: 0px;
top: 0px;
margin: 0px;
padding: 0px;
/* Stretch naar onderen dus NIET verwijderen */
height: 1%;
overflow: hidden;
padding-top: 20px;
}

/* mp staat voor met padding. Bij uitgeklapt dropdownmenu is er meer ruimte nodig bovenaan. De rest van de CSS wordt
gedeeld met #hoofdtabel */
#hoofdtabelmp {
margin-top: 25px;
padding-top: 30px;
}
/* __________________Einde CSS voor omspanning bij weergave linkerkolom met menu = 3 kolom layout___________________*/




/* _________________CSS voor mogelijke kolommen bij weergave linkerkolom met menu = 3 kolom layout__________________*/

/* De linkerkolom (de menukolom). Een eventueel toegevoegde achtergrondkleur is niet langer dan het menu dus als de
tekst langer is van het middengebied dan gaat de achtergrondkleur van de linkerkolom niet verder dan het menu dus
niet geheel naar beneden. Dit kun je wel bereiken met menuvlak en menuvlakmp.
l betekent links*/
#hoofdtabeltdl {
float: left;
width:212px;
margin: 0px;
padding: 0px;
padding-top: 4px;
margin-bottom: 20px;
}

/* De middenkolom (tekstgedeelte) als er geen rechterkolom is. De padding van de tekst kun je veranderen bij #tekst
in algemeen.css (dus NIET hier).
m betekent midden*/
#hoofdtabeltdm {
float: left;
width:722px;
margin: 0px;
padding: 0px;
/* Deze marge correspondeert met margin-left bij de kolom die daar links van staat dus als deze kolom wegvalt naar
beneden dan marge link minder maken of de kolom links daarvan (menukolom = #hoofdtabeltdl) smaller maken */
margin-left: 26px;
margin-bottom: 20px;
padding-top: 6px;
padding-bottom: 20px;
}

/* Middenkolom bij weergave 3 kolommen dus als er een linkerkolom is met menu en ook een rechterkolom is
(inhoud rechts). De padding van de tekst kun je veranderen bij #tekst in algemeen.css (dus NIET hier) */
/* ms betekent midden smal */
#hoofdtabeltdms {
float: left;
width:450px;
margin: 0px;
padding: 0px;
/* Deze marge correspondeert met margin-left bij de kolom die daar links van staat dus als deze kolom wegvalt naar
beneden dan marge link minder maken of de kolom links daarvan (menukolom = #hoofdtabeltdl) smaller maken */
margin-left: 26px;
margin-bottom: 20px;
padding-top: 6px;
padding-bottom: 20px;
}

/* Rechterkolom bij weergave 3 kolommen. Dit is de rechterkolom (inhoud rechts) ALS ook de linkerkolom (menu) en
middenkolom worden weergegeven. De padding van de tekst kun je veranderen bij #tekstrechts in algemeen.css
(dus niet hier)
r betekent rechts*/
#hoofdtabeltdr {
float: left;
width:254px;
margin: 0px;
padding: 0px;
/* Deze marge correspondeert met margin-left bij de kolom die daar links van staat dus als deze kolom wegvalt naar
beneden dan marge links minder maken of de kolom links daarvan (#hoofdtabeltdms of #hoofdtabeltdm) smaller maken of
deze kolom smaller maken. */
margin-left: 18px;
margin-bottom: 20px;
padding-top: 6px;
padding-bottom: 20px;
}

/* ______________Einde CSS voor mogelijke kolommen bij weergave linkerkolom met menu = 3 kolom layout_______________*/




/* __________________CSS voor omspanning bij weergave GEEN linkerkolom met menu = 2 kolom layout____________________*/

/* Gedeelde CSS van de div van #hoofdtabel1, #hoofdtabel1mp omspannen alle kolommen die zich daarin bevinden:
Situatie 1: omspannen van #hoofdtabel1tds en #hoofdtabel1tdr
Situatie 2: omspannen van #hoofdtabel1td */
#hoofdtabel1, #hoofdtabel1mp {
position: relative;
z-index: 7;
left: 0px;
top: 0px;
/* stretch naar onderen dus NIET verwijderen*/
height: 1%;
overflow: hidden;
padding-top: 20px;
}

/* mp staat voor met padding. Bij uitgeklapt dropdownmenu is er meer ruimte nodig bovenaan. De rest van de CSS wordt
gedeeld met #hoofdtabel1 */
#hoofdtabel1mp {
margin-top: 25px;
padding-top: 30px;
}

/* _________________Einde CSS voor omspanning bij weergave GEEN linkerkolom met menu = 2 kolom layout_______________*/




/* ________________CSS voor mogelijke kolommen bij GEEN weergave linkerkolom met menu = 2 kolom layout______________*/

/* Linker (brede) kolom met daarin de tekst bij weergave 2 kolommen = deze + rechterkolom (inhoud rechts).
De padding van de tekst kun je veranderen bij #tekst1 in algemeen.css (dus NIET hier). */
#hoofdtabel1tds {
float: left;
width: 690px;
margin-bottom: 20px;
padding-top: 6px;
padding-bottom: 20px;
}

/* Rechterkolom (inhoud rechts) bij weergave 2 kolommen = deze + brede kolom links daarvan. De padding van de tekst
kun je veranderen bij #tekstrechts in algemeen.css (dus NIET hier). */
#hoofdtabel1tdr {
float: right;
width:248px;
/* Deze marge correspondeert met margin-left bij de kolom die daar links van staat dus als deze kolom wegvalt naar
beneden dan marge links minder maken of de kolom links daarvan (#hoofdtabel1tds) smaller maken of deze kolom smaller
maken. */
margin-left: 20px;
margin-bottom: 20px;
padding-top: 6px;
padding-bottom: 20px;
}

/* 1 kolom over gehele breedte van de body. De padding van de tekst kun je veranderen bij #tekst1 in algemeen.css
(dus NIET hier). */
#hoofdtabel1td {
float: left;
width: 960px;
margin-bottom: 20px;
padding-top: 6px;
padding-bottom: 20px;
}

/* ____________Einde CSS voor mogelijke kolommen bij GEEN weergave linkerkolom met menu = 2 kolom layout____________*/





/*_________________________________________CSS voor tranparantie____________________________________________________*/
/* Als je via het beheerdersgedeelte een volledige achtergrondafbeelding toevoegt dan kan het mooi zijn om het body
gedeelte een gedeeltelijke transparantie te geven. Je ziet dan die achtergrondafbeelding gedeeltelijk doorschijnen.
Er zijn een drietal methodes om het body gedeelte transparantie te geven. De methodes vindt je hieronder met uitleg
erbij.
Let erop dat om van transparantiemethode 1, 2 of 3 gebruik te maken moet je EERST bij #sitecontainermidden de
achtergrondkleur verwijderen of deactiveren OF het achtervlak de hoogte van je header geven zodat de
header wel het achtervlak behoudt. Transparantie en schaduw links en rechts is namelijk geen mooie combinatie. */

/* ACTIVATIE - Bij transparantie alleerst ook deze code activeren want staat mooier ! */
#hoofdtabel, #hoofdtabel1 {
/* padding-top: 30px; */
}
/* ACTIVATIE - Bij transparantie allereerst ook deze code activeren want staat mooier ! */
#hoofdtabelmp, #hoofdtabel1mp {
/* padding-top: 40px; */
}
/* Vervolgens methode kiezen hieronder en activeren bij ACITVATIE */


/* ______________________________Methode 1: CSS tranparantie: apparte kolommen_____________________________________*/
/* Met deze extra achtergrondvlakken kun je nog meer controle uitoefenen op het middengebied. Ze zijn momenteel niet
in gebruik in die zin dat je ze niet ziet omdat ze geen achtergrondkleuren hebben. In principe gebruik je ze
alleen voor transparantie toevoegen. Ze hebben dezelfde breedtes als de middenkolommen gebasseerd op het 960 design.
Transparantie activeren bij ACTIVATIE */

/* Gedeelde CSS voor de vlakken */
#menuvlak, #menuvlakmp, #tekstvlak, #tekstvlakmp, #tekstvlaks, #tekstvlaksmp, #tekstvlak1, #tekstvlak1mp,
#menuvlakrechts, #menuvlakrechtsmp, #tekstvlakvolledig, #tekstvlakvolledigmp, #tekstvlakvolledigaltijd,
#tekstvlakvolledigmpaltijd {
position: absolute;
top: 20px;
bottom: 200px;
display: block;
/* Ronding voor alle browsers.
Zie: http://border-radius.com */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* ACTIVATIE - Deze code activeren bij transparantie methode 1
Zie: www.css-opacity.pascal-seven.de
Het effect wordt bepaald door de achtergrondkleur en de waarde van de transparantie */
/*
background-color: #ffffff;
-moz-opacity: 0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter:alpha(opacity=80);
*/
}


/* Hieronder hoeft voor transparantie methode 1 verder niets veranderd te worden ! */

/* mp staat voor met padding. De CSS is verder hetzelfde (wordt gedeeld met de CSS hierboven) maar als het
dropdownmenu uitgeklapt is moet deze x aantal px lager staan. */
#menuvlakmp, #tekstvlakmp, #tekstvlaksmp, #tekstvlak1mp, #menuvlakrechtsmp, #tekstvlakvolledigmp {
top: 30px;
}
/* Afzonderlijke positionering */
/* Dit vlak wordt weergegeven achter de linkerkolom (menukolom) */
#menuvlak, #menuvlakmp {
left: 50%;
margin-left: -480px;
width: 223px;
}
/* Dit vlak wordt weergegeven achter de middenkolom als de menukolom ook wordt weergegeven en er geen rechterkolom is
met inhoud rechts */
#tekstvlak, #tekstvlakmp {
left: 50%;
width: 718px;
margin-left: -238px;
}
/* Dit vlak wordt weergegeven achter de middenkolom als de menukolom ook wordt weergegeven en ook de rechterkolom
met inhoud rechts */
#tekstvlaks, #tekstvlaksmp {
left: 50%;
width:450px;
margin-left: -242px;
}
/* Dit vlak wordt weergegeven achter de linkerkolom als er geen menukolom wordt weergegeven maar wel de rechterkolom
met inhoud rechts */
#tekstvlak1, #tekstvlak1mp {
left: 50%;
width: 690px;
margin-left: -480px;
}
/* Dit vlak wordt weergegeven achter rechterkolom met inhoud rechts */
#menuvlakrechts, #menuvlakrechtsmp {
right: 50%;
margin-right: -480px;
width: 254px;
}
/* Dit vlak wordt weergegeven als er maar 1 kolom is dus geen linker (menu)kolom en ook geen rechterkolom (inhoud
rechts) */
#tekstvlakvolledig, #tekstvlakvolledigmp {
left: 50%;
margin-left: -480px;
width: 960px;
}

/*____________________________Einde Methode 1: CSS tranparantie: apparte kolommen__________________________________*/




/*________________________________Methode 2: CSS tranparantie: 1 volledig vlak_____________________________________*/
/* In plaats van alle kolommen appart transparantie kun je 1 volledige vlak doen met transparantie als je voor deze
methode kiest */

#tekstvlakvolledigaltijd, #tekstvlakvolledigmpaltijd {
/* ACTIVATIE - Om methode 2 te activeren display: none op display: block zetten */
display: none;
left: 50%;
margin-left: -480px;
width: 960px;
background-color: #ffffff;
-moz-opacity: 0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter:alpha(opacity=80);
/* EVENTUELE ACTIVATIE - Als je wilt kun je dit vlak nog laten strekken helemaal naar boven en onderen */
/*
top: -8px;
bottom: 0px;
*/
}

/* mp staat voor met padding. De css is verder hetzelfde (wordt gedeeld met) maar als het dropdownmenu uitgeklapt
is moet deze x aantal px lager staan. */
#tekstvlakvolledigmpaltijd {
top: 30px;
}

/*______________________________Einde Methode 2: CSS tranparantie: 1 volledig vlak__________________________________*/
 



/* ________________________________Methode 3: CSS tranparantie: Alles transparant___________________________________*/

/* Het verschil met de tranparantiemethodes hierboven (1 en 2) is dat de tekst en inhoud ook transparant wordt.
Dit kan een nadeel zijn omdat foto's (van het fotoalbum) en afbeeldingen, menu (dus ECHT ALLES) dan ook gedeeltelijk
transparant worden ! Dus eigenlijk niet echt een aanbeveling. Verder lopen de kolommen niet geheel door naar beneden
maar maar tot de het einde van de inhoud. */

#hoofdtabeltdl, #hoofdtabeltdm, #hoofdtabeltdms, #hoofdtabeltdr, #hoofdtabel1td, #hoofdtabel1tds, #hoofdtabel1tdr {
/* Ronding voor alle browsers.
Zie: http://border-radius.com */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* ACTIVATIE - Deze code activeren bij transparantie methode 3 */
/*
background-color: #ffffff;
-moz-opacity: 0.80;
-khtml-opacity: 0.80;
opacity: 0.80;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=80);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=80);
filter:alpha(opacity=80);
*/
}

/* _____________________________Einde Methode 3: CSS tranparantie: Alles transparant________________________________*/



/*________________________________________Einde CSS voor tranparantie_______________________________________________*/




/* ________________________Einde CSS linker, midden en rechterkolom in bodycontainermidden__________________________*/





/*_________________________________________CSS voor extra achtervlakken_____________________________________________*/

/* Deze extra achtervlakken kunnen voor special exffect gebruikt worden. Deze strekken zich geheel uit van
tot bovenaan de header tm onderaan de footer. */

/* Deze vlakken zie je alleen als de headermidden, de bodycontainermidden en de linker, midden en rechterkolom
GEEN achtergrondkleur of achtergrondafbeelding hebben */

/* Vlak achter het menu aan de linkerkant */
#vlaklinks {
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
left: 50%;
display:block;
width: 223px;
margin-left: -480px;
/* testkleur */
/* background-color: #ff830e; */
/*
background-color: #BACF26;
*/
}

/* Vlak achter het tekstgedeelte van de website */
#vlakmidden {
/*
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
left: 50%;
display:block;
width: 737px;
margin-left: -257px;
*/
position: absolute;
z-index: 2;
top: 0px;

left: 0%;
display:block;
width: 100%;
height: 50px;
/*
background-color: #BACF26;
*/
/* testkleur */
/* background-color: #ffd700; */
background-color: #49095E;
background-color: #5E1477;

background-color: #164428; /* groen */

background-color: #F1C6FA;

/* #D4A4A1 */
/*
     background: -moz-linear-gradient(top,  #018343 0%, #8CD394 100%);
*/
}

/* Vlak achter het tekstgedeelte van de website maar dan als rechterkolom (inhoud rechts) ook wordt weergegeven */
#vlakmiddensmal {
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
left: 50%;
display:block;
width: 484px;
margin-left: -257px;
/* testkleur */
/* background-color: #ffd700; */
}

/* Vlak achter het tekstgedeelte van de website als er geen menukolom is maar wel de rechterkolom (inhoud rechts)
wordt weergegeven */
#vlaklinks1 {
position: absolute;
z-index: 2;
top: 0px;
bottom: 0px;
left: 50%;
display:block;
width: 706px;
margin-left: -480px;
/* testkleur */
/* background-color: #ffd700; */
}

/* Vlak achter de rechterkolom (inhoud rechts) */
#vlakrechts {
position: absolute;
z-index: 2;
right: 50%;
top:0px;
bottom: 0px;
display:block;
width: 254px;
margin-right: -480px;
/* testkleur */
/* background-color: #ff830e; */
}

/* Als er geen menukolom is en ook geen rechterkolom (inhoud rechts) */
#vlakvolledig {
/*
position: absolute;
z-index: 2;
right: 50%;
top:0px;
bottom: 0px;
display:block;
width: 960px;
margin-right: -480px;
*/
position: absolute;
z-index: 2;
top: 0px;

left: 0%;
display:block;
width: 100%;
height: 50px;
/*
background-color: #BACF26;
*/
/* testkleur */
/* background-color: #ffd700; */
background-color: #49095E;
background-color: #5E1477;

background-color: #164428; /* groen */

background-color: #F1C6FA;
}

/* ____________________________________Einde CSS voor achtergrondvlakken____________________________________________*/





/*_________________________________Echter einde CSS voor de body/middengebied_______________________________________*/





/*_____________________________________________CSS voor de footer___________________________________________________*/
/* De footer is het onderste deel van de website onder de body. Voor een special effect kun je eventueel de
footercontainer een andere achtergrondkleur geven dan de footermidden. Ook kun je de hoogte aanpassen maar volg dan
wel de instructies op die daarbij staan ! */

/* Dit is de over de gehele breedte omspannende container van de footer */
#footercontainer {
position: absolute;
z-index: 3;
left: 0px;
bottom: 0px;
display: block;
width: 100%;
/* Hoogte van de footer ! Als je de hoogte van de footer veranderd moet je deze zelfde waarde opgeven bij
#footermidden en #bodycontainer */
height: 180px;
min-width: 960px;
margin: 0px;
padding: 0px;
background-color: #792A93;
}

/* De middencontainer van de footer waar de uiteindelijke inhoud in wordt weergegeven */
#footermidden {
margin: 0px;
padding: 0px;
display: block;
width: 960px;
/* Hoogte van de footer ! Als je de hoogte van de footer veranderd moet je deze zelfde waarde opgeven bij
#footercontainer en #bodycontainer */
height: 180px;
margin-left: auto;
margin-right: auto;
background-color: #792A93;
/* Schaduw voor alle browsers */
-webkit-box-shadow: 0px 5px 25px 0px #808080;
-moz-box-shadow: 0px 5px 25px 0px #808080;
box-shadow: 0px 5px 25px 0px #808080;


background-image:url('/templates/images/dutchcms/header.jpg');
}

/* De CSS van de inhoud van de footer staat in algemeen.css */

/*___________________________________________Einde CSS voor footer__________________________________________________*/