/*
In dit bestand algemene CSS voor de gehele website en CSS voor enkele specifieke zaken:
CSS voor de tekst in de verschillende kolommen
CSS voor de links in het gehele CMS
CSS voor het contactformulier
CSS Foutmeldingen voor formulieren
CSS Externe URL blok aan linkerkant
CSS voor multilevelfunctionaliteit
CSS voor logo en achtergrondafbeeldingen
CSS voor melding pagina niet gevonden
*/

#meetcontainer {
	width: 100%;
}

/*____________________________________CSS voor de tekst in de verschillende kolommen _______________________________*/
/* Dutch CMS kan via beheer ingedeeld worden in verschillende weergaves bv met menukolom links en bv met smalle
rechterkolom/inhoud rechts.
Opmerkingen:
Het lettertype staat hier niet bij want dat staat al vermeld bij html,body in template.css
Bij gebruik van het onderdeel Normale Pagina's (meest gebruikt) staat in het CSS bestand onderdelen.css bij
#paginatekst nog text-align: justify; text-justify: inter-word;. Die code zorgt ervoor dat de tekst zowel links als
rechts uitgevuld wordt op de pagina (1 strakke tekst). Die code staat ook nog bij andere onderdelen bv Faq maar
is appart gezet omdat dit anders voor sommige tekst gekke effecten geeft.

*/

/* Gedeelde CSS voor de tekstkolommen breed, midden, smal en rechts */
#tekst, #tekst1, #tekstrechts, #footertekst {
display: block;
margin: 0px;
padding: 0px;
line-height: 18px;
font-size: 12px;
}

/* #tekst wordt gebruikt voor de tekstkolommen als ook de linkerkolom met menu wordt weergegeven
(de rechterkolom/inhoud rechts heeft zijn eigen CSS) */
#tekst {
margin-top: 8px;
padding-right: 30px;
padding-left: 30px;
}

/* #tekst1 wordt gebruikt voor de tekstkolommen als GEEN linkerkolom met menu wordt weergegeven
(de rechterkolom/inhoud rechts heeft zijn eigen CSS) */
#tekst1 {
margin-top: 8px;
padding-right: 30px;
padding-left: 30px;
}

/* In de rechterkolom van inhoud rechts wordt #tekstrechts gebruikt */
#tekstrechts {
padding-top: 2px;
/* bij transparantie padding right en left gewoon op 15 !!!!!! */
/*
padding-right: 15px;
padding-left: 15px;
*/
padding-right: 35px;
padding-left: 15px;
}

/* De tekst in de footer = onderaan je website */
#footertekst {
padding: 30px;
}

/* Marges weghalen voor alle koppen zodat die geen bovenmarge hebben */
#tekst h1, #tekst h2, #tekst h3, #tekst h4,
#tekst1 h1, #tekst1 h2, #tekst1 h3, #tekst1 h4
#tekstrechts h1, #tekstrechts h2, #tekstrechts h3, #tekstrechts h4,
#footertekst h1, #footertekst h2, #footertekst h3, #footertekst h4 {
padding: 0px;
margin-top: 0px;
margin-bottom: -2px;
/* Door hier een kleur te geven kun je alle koppen die je boven alinea's gaat gebruiken in 1 keer een kleur geven */
/* Dutch CMS 2.0 groen */
/* color: #8cac19; */
/* Dutch CMS blauw */
/* color: #00a4ff; */
}

/*________________________________Einde CSS voor de tekst in de verschillende kolommen _____________________________*/





/*________________________________________CSS voor de links in het gehele CMS_______________________________________*/
/* Tenzij specifiek aangegeven bij een onderdeel geldt deze CSS voor alle links zowel in header, midden als footer */

a:link, a:visited, a:hover {
text-decoration: none;
/* Outline none verwijderd een soort gek blur randje in ie bij klikken */
outline: none;
/* Ook hier kun je verschillende kleuren proberen en kijken welke het mooist is voor een link in een stuk tekst */
/* Bruin/donkerrood */
/* color: #a52a2a; */
/* Dutch CMS 2.0 linkgroen */
/* color:#588a1b; */
/* Dutch CMS 2.0 linkoranje */
/* color: #f57002; */
/* Dutch CMS 2.0 linkblauw */
color: #00a4ff;
}

/* Met de muis over een link */
a:hover {
text-decoration: underline;
}

/* De links in de footer */
#footertekst a {
color: #ffffff;
}

/* Met de muis over de links in de footer */
#footertekst a:hover {
text-decoration: none;
}

/*_____________________________________Einde CSS voor de links in het gehele CMS____________________________________*/





/*_________________________________________CSS voor het contactformulier___________________________________________*/

#contactformulier {
margin: 0px;
padding: 0px;
margin-bottom: 20px;
}

/* Fieldset is een xhtml strict kader waarmee je formuliervelden groepeert */
#contactformulier fieldset {
margin: 0px;
padding: 0px;
border: 0px;
}

/* De koppen Persoongegevens, Adresgegevens, Contactgegevens en Uw bericht */
#contactformulier legend {
display: block;
width: 140px;
margin: 0px;
padding: 0px;
text-align: right;
font-size: 16px;
color: #8cac19;
}

/* Noodzakelijk hoogte toevoeging voor goede weergave bij verschillende indelingen */
.fhoogte {
margin: 0px;
padding: 0px;
margin-top: 19px;
height: 1px;
}

/* Label links en veld rechts  vormen samen een rij */
#contactformulier .rij {
clear: both;
padding-top: 10px;
width: 400px;
}

/* Het label links van een veld (bv naam, huisnummer etc) */
#contactformulier label {
float:left;
width: 146px;
margin-right: 14px;
/* Muishandje - bij klikken op label gaat de cursor in het veld ernaast staan */
cursor:pointer;
font-weight:bold;
text-align: right;
}

/* Het sterretje van verplicht veld */
#contactformulier label span {
margin-left: 2px;
font-weight:bold;
font-size: 14px;
color: #8cac19;
}

/* De invoervelden */
#contactformulier input[type=text] {
text-align: left;
width: 220px;
}

/* De slectiedropdowns van land en datum */
#cfland {
width: 226px;
}
#cfgbdatumdag {
width: 50px;
}
#cfgbdatummaand {
width: 90px;
}

/* De tekstbox voor het bericht */
#contactformulier textarea {
margin: 0px;
padding: 0px;
width: 224px;
/* Hier wel lettertype aangeven want wordt niet standaard overgenomen (vraag me niet waarom) */
font-family: Arial, Verdana, Helvetica, Sans-serif;
font-size: 12px;
}

/* De verzondknop */
#contactformulier #cfverzenden {
float: right;
margin-right: 14px;
padding: 6px;
border: 0px;
cursor:pointer;
font-weight: bold;
color: #ffffff;
background-color: #00a4ff;
/* Ronding voor alle browsers.
Zie: http://border-radius.com */
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}

/* Tekst onderaan voor verplicht veld */
#contactformulier .cfverplicht {
float:left;
width: 146px;
margin-right: 14px;
text-align: right;
font-weight:bold;
}

/*______________________________________Einde CSS voor het contactformulier ________________________________________*/





/*_______________________________________CSS Foutmeldingen voor formulieren_________________________________________*/
/* Foutmeldingen voor zowel het contactformulier als voor foutmeldingen tijdens het registreren of inloggen op het
forum of een wachtwoordbeveiligde themasite */

/* Gehele blok van foutmelding */
#cffoutopsomming, #regfoutopsomming, #inlogfoutopsomming {
display: block;
margin-bottom: 12px;
padding: 15px;
border: dotted #e9f397 4px;
color:#ef9700;
}

/* De kop van de foutmelding */
#cffoutkop, #regfoutkop, #inlogfoutkop {
font-weight: bold;
}

/* Blok voor de foutmelding zelf */
.cffoutmelding, .regfoutmelding, .inlogfoutmelding  {
display: block;
}

/* De kleur van de foutmelding */
.cffoutkleur, .inlogfoutkleur, .regfoutkleur {
color: #f7a212;
}

/*_____________________________________Einde CSS Foutmeldingen voor formulieren ___________________________________*/





/*________________________________________CSS Externe URL blok aan linkerkant_______________________________________*/
/* Op je voorpagina kun je links toevoegen in een extern url blok (via beheer > pagina's > normale pagina's >
pagina menu en dan externe url activeren). Hiermee maak je een blok met links naar andere websites. Je kunt zelfs
nog tekst en afbeeldingen (een screenshot) daaraan toevoegen. */

/* Het gehele externe url blok */
.externeurlmenucontainer {
display: block;
margin: 0px;
padding:0px;
margin-left: 6px;
padding-bottom: 4px;
background-color: #bacf26;
/* Schaduw voor alle browsers */
-webkit-box-shadow: 0px 0px 10px 0px #808080;
-moz-box-shadow: 0px 0px 10px 0px #808080;
box-shadow: 0px 0px 10px 0px #808080;
}

/* De titel "Bezoek ook" */
.externeurlmenutitel {
display:block;
padding-left: 5px;
padding-right: 3px;
padding-top: 5px;
margin-bottom: 8px;
font-size: 18px;
color: #000000;
}

/* De externe url links */
a.externeurlmenulink, a.externeurlmenulink:visited, a.externeurlmenulink:active, a.externeurlmenulink:focus,
a.externeurlmenulink:hover {
display: block;
margin: 0px;
padding: 0px;
padding-left: 5px;
padding-right: 5px;
padding-top: 3px;
padding-bottom: 5px;
font-weight: bold;
text-decoration:none;
color: #ffffff;
border-top: #ffffff solid 1px;
}

/* Met de muis over de externe url link */
a.externeurlmenulink:hover {
color: #000000;
}

/* De extra tekst/toelichting onder een link */
.externeurlmenucontainer p {
margin-left: 5px;
}

/* Bij toevoegen bij afbeelding en tekst onder Externe Url link minder ruimte tussen de afbeelding en de tekst */
.externeurlmenucontainer .pfirst img {
display: block;
margin-bottom: -4px;
}

/*_____________________________________Einde CSS Externe URL blok aan linkerkant ___________________________________*/





/*________________________________________CSS voor multilevelfunctionaliteit_______________________________________*/
/* Alleen van belang als je daar van gebruik maakt. Zie de handleiding. */

/* De waardes van deze css is toegevoegd in onderdelen.css bij "Ingeklapt menu's aan de linkerkant" */
a.levellink, a.levellink:visited, a.levellink:active, a.levellink:focus, a.levellink:hover {
}
a.levellink:hover {
}

/* In je templatemap kun je een afbeelding plaatsen in de map images/templatenaam(meestal dutchcms) die je als
naam de url-alias van het level geeft. Deze afbeelding wordt dan onder de link naar het level weergegeven */
.levelimg {
width: 170px;
border: 0px;
}

/* De titel aan de rechterkant boven het welkomswoord voor dat level */
.levelmtitel {
/* Nette ruimte tussen titel en eerste tekst */
margin-bottom: 14px;
}

/* De afbeelding is ook klikbaar naar het level */
a.levellinkimg, a.levellinkimg:visited, a.levellinkimg:active, a.levellinkimg:focus, a.levellinkimg:hover {
border: 0px;
padding-left: 8px;
}

a.levellinkimg:hover {

}

/*___________________________________Einde CSS voor multilevelfunctionaliteit_______________________________________*/





/*___________________________________CSS voor logo en achtergrondafbeeldingen_______________________________________*/
/* Via het beheerdersgedeelte kunnen het sitelogo, headerafbeelding, achterheaderafbeelding en volledige achtergrond
geactiveerd en gedeactiveerd worden. Lees de toelichting goed op het beheerdersgedeelte en in de handleiding. Als
er staat NIKS wijzigen dan ook echt niet doen. */

/* CSS voor het logo in de header */
.sitelogo {
position: absolute;
z-index: 9;
margin: 0px;
padding:0px;
border: 0px;
/* waarden onder dit commentaar kunnen veranderd worden */
margin-left: 12px;
top: 20px;
height:80px;
}

/* CSS voor de afbeelding in de header.
Let op ! Hier ALLEEN hoogte of breedte veranderen afhankelijk van design.
Verder NIKS veranderen anders werkt het niet meer !!! */
.afbheader {
position: absolute;
z-index: 2;
left:0;
right: 0;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
/* Waarden onder dit commentaar kunnen veranderd worden. Afhankelijk van gewenst design kunnen hoogte en breedte
geheel verwijderd worden bij een bredere afbeelding */
/* Deze hoogte is hetzelfde als die van headercontainer en headermidden aangegeven in template.css +
1 pixel erbij voor Internet Explorer 9 bug anders komt er een stom wit randje bovenaan ! */
height: 241px;
/* Dit is dezelfde breedte als van containermidden, headermidden en footermidden etc */
/*width: 960px;*/
width: 100%;
/* -1 pixel voor Internet Explorer 9 bug */
margin-top: -1px;
}

/* CSS voor de grotere afbeelding achter de header.
Let op ! Hier NIKS veranderen anders werkt het niet meer !!! */
.afbachterheader {
position: absolute;
left:0px;
right: 0px;
display: block;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}


/* CSS voor de volledige achtergrondafbeelding.
Let op ! Hier NIKS veranderen anders werkt het niet meer !!! (behalve transparantie toevoegen)*/
img.afbvolachtergrond {
position: fixed;
top: 0;
left: 0;
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
/* Eventueel kun je tranparantie toevoegen aan de achtergrondafbeelding. Maakt het iets zachter !
Zie: www.css-opacity.pascal-seven.de
Het effect wordt bepaald door de achtergrondafbeelding en de waarde van de transparantie */
/*
-moz-opacity: 0.70;
-khtml-opacity: 0.70;
opacity: 0.70;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha"(Opacity=70);
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=70);
filter:alpha(opacity=70);
*/
}

/* Let op ! Hier NIKS veranderen anders werkt het niet meer !!! */
@media screen and (max-width: 1024px) {
img.afbvolachtergrond {
left: 50%;
margin-left: -512px;   /* 50% */
}
}

/*__________________________________Einde CSS voor logo en achtergrondafbeeldingen__________________________________*/





/*______________________________________CSS voor melding pagina niet gevonden_______________________________________*/

/* De kop van pagina niet gevonden */
.paginanietgevondenkop {
display: block;
margin: 0px;
padding: 0px;
font-size: 16px;
font-weight:bold;
color: #8cac19;
}

/* De tekst van pagina niet gevonden */
.paginanietgevonden {
color: #000000;
font-size: 12px;
font-weight: bold;
}

/*___________________________________Einde CSS voor melding pagina niet gevonden __________________________________*/


/* Hack pfirst voor Tiny MCE Editor => NIET verwijderen of wijzigen */
.pfirst {
margin-top: 0px;
padding-top: 0px;
}