/*
In dit bestand de CSS voor diverse balken en tekst die zich in de header bevinden. De containers zelf bevinden zich in
template.css.
Inhoud:
CSS van de links in de navigatiebalk
CSS van teksten in Header
CSS Themasitebalk
*/




/* ____________________________________CSS van de links in de navigatiebalk_________________________________________*/
/* De navigatiebalk bevindt zich bovenaan op je website en geeft de links weer naar de verschillende onderdelen.
Hij bestaat uit 2 delen, te weten een linkerdeel en een rechterdeel. In het rechterdeel komen links voor het
forum zoals "ingelogd als" en "bekijk profiel" etc */

/* Gezamelijke (gedeelde) CSS voor alle links in de navigatiebalk. Daarna appart */
a.navtabellinkhome:link, a.navtabellinkhome:active, a.navtabellinkhome:focus, a.navtabellinkhome:visited,
a.navtabellinkhome:hover, a.navtabellinkhomeactief:link, a.navtabellinkhomeactief:active,
a.navtabellinkhomeactief:focus, a.navtabellinkhomeactief:visited, a.navtabellinkhomeactief:hover,
a.navtabellink:link, a.navtabellink:active, a.navtabellink:focus, a.navtabellink:visited,
a.navtabellink:hover, a.navtabellinkactief:link, a.navtabellinkactief:active, a.navtabellinkactief:focus,
a.navtabellinkactief:visited, a.navtabellinkactief:hover, a.navtabellinkreg:link, a.navtabellinkreg:active,
a.navtabellinkreg:focus, a.navtabellinkreg:visited, a.navtabellinkreg:hover, a.navtabellinkregactief:link,
a.navtabellinkregactief:active, a.navtabellinkregactief:focus, a.navtabellinkregactief:visited,
a.navtabellinkregactief:hover, a.navlprofiel:link, a.navlprofiel:active, a.navlprofiel:focus, a.navlprofiel:visited,
a.navlprofiel:hover, a.navlprofielactief:link, a.navlprofielactief:active, a.navlprofielactief:focus,
a.navlprofielactief:visited, a.navlprofielactief:hover, a.navluitloggen:link, a.navluitloggen:active,
a.navluitloggen:focus, a.navluitloggen:visited, a.navluitloggen:hover, .ingelogdals {
display: inline-block;
min-width: 64px;
margin: 0px;
padding: 0px;
text-align: center;
font-weight: bold;
text-decoration: none;
/* nowrap zorgt ervoor dat woorden bij elkaar blijven */
white-space: nowrap;
color: #ffffff;
padding-left: 12px;
padding-right: 12px;
padding-top: 14px;
padding-bottom: 13px;
border-right: solid #ffffff 1px;
}

/* Met de muis over de home link en de links naar de verschillende onderdelen */
a.navtabellinkhome:hover, a.navtabellink:hover {
text-decoration: none;
color: #ffffff;
background-color: #00a4ff;
}

/* Kleur van de actieve home en onderdelen links */
a.navtabellinkhomeactief:link, a.navtabellinkhomeactief:active, a.navtabellinkhomeactief:focus, a.navtabellinkhomeactief:visited,
a.navtabellinkhomeactief:hover, a.navtabellinkactief:link, a.navtabellinkactief:active, a.navtabellinkactief:focus,
a.navtabellinkactief:visited, a.navtabellinkactief:hover {
color: #ffffff;
background-color: #00a4ff;
}

/* Met muis over de actieve home en onderdelen links */
a.navtabellinkhomeactief:hover, a.navtabellinkactief:hover {

}

/* Apparte, niet gedeelte CSS voor de links aan de rechterkant voor het forum zoals "ingelogd als" en "bekijk profiel" */
a.navtabellinkreg:link, a.navtabellinkreg:active, a.navtabellinkreg:focus, a.navtabellinkreg:visited,
a.navtabellinkreg:hover, a.navtabellinkregactief:link, a.navtabellinkregactief:active, a.navtabellinkregactief:focus,
a.navtabellinkregactief:visited, a.navtabellinkregactief:hover, a.navlprofiel:link, a.navlprofiel:active,
a.navlprofiel:focus, a.navlprofiel:visited, a.navlprofiel:hover, a.navlprofielactief:link, a.navlprofielactief:active,
a.navlprofielactief:focus, a.navlprofielactief:visited, a.navlprofielactief:hover, a.navluitloggen:link,
a.navluitloggen:active, a.navluitloggen:focus, a.navluitloggen:visited, a.navluitloggen:hover {
padding-top: 10px;
margin-right: 2px;
color: #5E1477;
color: #A915DB;
border-top: solid #ffffff 1px;
border-left: solid #ffffff 1px;
border-right: solid #ffffff 1px;
/* ronde bovenranden links en rechts (voor verschillende browsers)
Zie: http://border-radius.com */
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
/* gradient effect (voor verschillende browsers)
Zie: www.colorzilla.com/gradient-editor */
background: #F1C6FA;
background: -moz-linear-gradient(top,  #F1C6FA 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F1C6FA), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top,  #F1C6FA 0%,#ffffff 100%);
background: -o-linear-gradient(top,  #F1C6FA 0%,#ffffff 100%);
background: -ms-linear-gradient(top,  #F1C6FA 0%,#ffffff 100%);
background: linear-gradient(top,  #F1C6FA 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F1C6FA', endColorstr='#ffffff',GradientType=0 );
}


/* Om de meest rechtse links gelijk te laten lopen met de layout van de rest van de website deze nog weer een apparte
toevoeging */
a.navluitloggen:link, a.navluitloggen:active, a.navluitloggen:focus, a.navluitloggen:visited, a.navluitloggen:hover,
a.navtabellinkreg:link, a.navtabellinkreg:active, a.navtabellinkreg:focus, a.navtabellinkreg:visited, a.navtabellinkreg:hover,
a.navtabellinkregactief:link, a.navtabellinkregactief:active, a.navtabellinkregactief:focus,
a.navtabellinkregactief:visited, a.navtabellinkregactief:hover {
text-align: right;
margin-right: 22px;
min-width: 44px;
margin-top: 3px;
}

/* Als je je op de registratiepagina of profielpagina bevind krijgt die link een andere kleur */
a.navtabellinkregactief:link, a.navtabellinkregactief:active, a.navtabellinkregactief:focus,
a.navtabellinkregactief:visited, a.navtabellinkregactief:hover, a.navlprofielactief:link, a.navlprofielactief:active,
a.navlprofielactief:focus, a.navlprofielactief:visited, a.navlprofielactief:hover {
/* gradient effect (voor verschillende browsers)
Zie: www.colorzilla.com/gradient-editor */
color: #5A0EA5;
color: #5E1477;
background: #d4d4d4;
background: -moz-linear-gradient(top,  #d4d4d4 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top,  #d4d4d4 0%,#ffffff 100%);
background: -o-linear-gradient(top,  #d4d4d4 0%,#ffffff 100%);
background: -ms-linear-gradient(top,  #d4d4d4 0%,#ffffff 100%);
background: linear-gradient(top,  #d4d4d4 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4', endColorstr='#ffffff',GradientType=0 );
}


/* Met de muis over alle forum links aan de rechterkant */
a.navtabellinkreg:hover, a.navtabellinkregactief:hover, a.navlprofiel:hover, a.navlprofielactief:hover, a.navluitloggen:hover {
color: #A915DB;
color: #5A0EA5;
/* gradient effect (voor verschillende browsers)
Zie: http://www.colorzilla.com/gradient-editor */
background: #d4d4d4;
background: -moz-linear-gradient(top,  #d4d4d4 0%, #ffffff 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d4d4d4), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(top,  #d4d4d4 0%,#ffffff 100%);
background: -o-linear-gradient(top,  #d4d4d4 0%,#ffffff 100%);
background: -ms-linear-gradient(top,  #d4d4d4 0%,#ffffff 100%);
background: linear-gradient(top,  #d4d4d4 0%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d4d4d4', endColorstr='#ffffff',GradientType=0 );
}

/* Het slotje bij de registratielink */
a.navtabellinkreg .slotje, a.navtabellinkregactief .slotje {
display: inline-block;
height: 17px;
width:17px;
margin: 0px;
padding: 0px;
vertical-align: top;
border: 0px;
margin-top: -4px;
margin-right: 4px;
}

/* Gebruikersnaam waarmee je ingelogd bent */
.ingelogdals {
border: 0px;
color: #ffffff;
}

/* Afbeelding van slotje bij gebruikersnaam */
.ingelogdals .slotje {
display: inline-block;
margin: 0px;
padding: 0px;
height: 17px;
width:17px;
vertical-align: top;
border: 0px;
margin-top: -2px;
margin-right: 4px;
}

/* ______________________________________Einde CSS van de links in de navigatiebalk_______________________________*/





/* _____________________________________________CSS van teksten in Header______________________________________*/

/* De datum wordt aan de rechterkant weergegeven. Als je de datum niet op je site wilt, verander dan display: block;
in display: none; */
.datum  {
position: relative;
float: right;
z-index: 13;
display: none;
text-align: right;
font-weight: bold;
color: #000000;
padding-right: 36px;
padding-top: 4px;
}

/* Als je al een logo hebt waarin je titel voorkomt kun je display: block; veranderen in display: none;
Zorg WEL dat je via het beheerdersgedeelte toch je sitetitel opgeeft want die wordt door het gehele CMS gebruikt !.*/
.sitetitel {
position: absolute;
z-index: 10;
top: 60px;

margin-left: 266px;

display: block;
font-size: 35px;
font-weight: bold;
letter-spacing: 4px;
color: #ffffff;
border-top: solid #ffffff 1px;
border-bottom: solid #ffffff 1px;
border-right: solid #ffffff 1px;
padding-left: 8px;
padding-right: 8px;
/* Ronding aan rechterkant voor alle browsers.
Zie: http://border-radius.com */
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
/* titel wordt getransformeerd naar hoofdletters. Als je dat niet wilt dan regel weghalen */
text-transform: uppercase;
/* Bij transparantie kun je bv de achtergrondkleur in #ffffff (wit) veranderen als dat mooier is */
background-color: #d7ee27;

background-color: #C7719E;
background-color: #0C36A7;
background-color: #792A93;
/* Bij afbeelding in header of achter header kun je transparantie toevoegen voor mooi effect.
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);
*/
}

/* Om de siteleus goed te positioneren gebruiken we een extra container */
#siteleuscontainer {
position: relative;
z-index: 11;
top: 126px;

top: 90px;
height: 62px;
}

/* ALs je geen siteleus op je site wilt kun je display: block; veranderen in display: none; */
.siteleus {
position: absolute;
left: 266px;
bottom: 0px;
vertical-align: bottom;
display: block;
margin: 0px;
padding: 0px;
font-weight: bold;
font-size: 22px;
letter-spacing: 2px;
line-height: 28px;
color: #0C36A7;

color: #ffffff;


padding-left: 8px;
padding-right: 12px;
border-top: solid #ffffff 1px;
border-bottom: solid #ffffff 1px;
border-right: solid #ffffff 1px;
background-color:#46a216;
/* Ronding aan rechterkant voor alle browsers.
Zie: http://border-radius.com */
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
/* Bij transparantie kun je bv de achtergrondkleur in #ffffff (wit) veranderen als dat mooier is */
background-color:#00a4ff;


background-color: #0C36A7;
background-color: #D2D6FB;
background-color: #00a4ff;
background-color: #741DC9;
/* Bij afbeelding in header of achter header kun je transparantie toevoegen voor mooi effect.
Zie: www.css-opacity.pascal-seven.de
Het effect wordt bepaald door de achtergrondkleur (hierboven) 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);
*/


}

/* Een uitbreiding op siteleus in een veel groter tekstblok */
#headertekst {
position: absolute;
z-index: 12;
top: 32px;
/* Speciale techniek zodat hij met positionering absolute niet verschuift naar de buitencontainer dus op deze manier
blijft hij in middenheader */
right: 50%;
margin-right: -460px;
display: none;
/* Hoogte en breedte kun je vrijelijk aanpassen */
width: 340px;
height: 160px;
padding: 5px;
font-weight: bold;
line-height: 22px;
color: #ffffff;
/* Veranderen in left of verwijderen als je wilt dat de tekst IN het blok gewoon normaal links staat */
text-align: right;
padding-left: 16px;
padding-right: 16px;
border: solid #ffffff 1px;
/* Ronding voor alle browsers.
Zie: http://border-radius.com */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/* Bij transparantie kun je bv de achtergrondkleur in #ffffff (wit) veranderen als dat mooier is */
background-color: #00a4ff;
/* Bij afbeelding in header of achter header kun je transparantie toevoegen voor mooi effect.
Zie: www.css-opacity.pascal-seven.de
Het effect wordt bepaald door de achtergrondkleur (hierboven) 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);
*/
/* Witte schaduw - alleen zichtbaar als de header een andere achtergrondkleur heeft dan wit of als er een
achtergrondafbeelding is (of je veranderd gewoon de schaduwkleur). */
-webkit-box-shadow: 0px 0px 20px 0px #ffffff;
-moz-box-shadow: 0px 0px 20px 0px #ffffff;
box-shadow: 0px 0px 20px 0px #ffffff;
/* Gradient effect voor alle browser bij transparantie en met groen staat deze wel mooi
Zie: www.colorzilla.com/gradient-editor */
/*
background: #98cb31;
background: -moz-linear-gradient(45deg,  #98cb31 25%, #118805 100%);
background: -webkit-gradient(linear, left bottom, right top, color-stop(25%,#98cb31), color-stop(100%,#118805));
background: -webkit-linear-gradient(45deg,  #98cb31 25%,#118805 100%);
background: -o-linear-gradient(45deg,  #98cb31 25%,#118805 100%);
background: -ms-linear-gradient(45deg,  #98cb31 25%,#118805 100%);
background: linear-gradient(45deg,  #98cb31 25%,#118805 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#98cb31', endColorstr='#118805',GradientType=1 );
*/
}

/* Bij gebruik van een kop in de headertekst zorgt dit ervoor dat er niet ineens een hoge bovenmarge komt */
#headertekst h1, #headertekst h2, #headertekst h3, #headertekst h4 {
margin-top: 5px;
}

/*_______________________________________Einde CSS teksten in Header_______________________________________________*/





/*___________________________________________CSS Themasitebalk_____________________________________________________*/

/* Als er meerdere themasites zijn worden deze zichtbaar in de themasitebalk. De balk zelf kun je veranderen in
template.css. Hieronder de onderdelen die via deze balk zichtbaar kunnen worden afhankelijk van of er themasites zijn
en de bijbehorende (taal)instellingen. De teksten kunnen veranderd worden in het taalbestand taalalgemeen.php
Als je NIET meerdere themasites hebt hoef je hier niks te veranderen want dan is dat niet van toepassing ! */

/* De tekst "Bezoek ook" met daarachter de namen van een of meer Themasites  */
.bezoekook {
margin-right: 8px;
padding-left: 8px;
font-weight: bold;
color:#000000;
text-decoration: none;
}

/* De links naar 1 of meerdere Themasites */
a.themasiteklink:link, a.themasiteklink:visited, a.themasiteklink:hover {
font-weight: bold;
text-decoration: none;
/* Dit zorgt ervoor dat de tekst van de links bij elkaar blijft */
white-space: nowrap;
color: #00a4ff;
}

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

/* Scheidingsteken tussen de links naar meerdere themasites */
.themasitescheiding {
color: #00a4ff;
margin-left: 10px;
margin-right:11px;
}

/* Slotje naast een themasite link als die themasite wachtwoord beveiligd is */
.themasiteslotje {
display: inline-block;
margin: 0px;
padding: 0px;
margin-right: 2px;
height: 15px;
width:15px;
vertical-align: top;
border: 0px;
}

/* De positie van de link terug op de Themasite naar de hoofdsite met de tekst "Deze website is onderdeel van
Sitetitel v/d Hoofdsite". Deze link komt aan de linkerkant in de plaats van "Bezoek ook" als je je op de themasite
bevindt */
#posonderdeelvan {
position: relative;
top: 0px;
left: 8px;
}

/* Idem - maar als er meerdere themasites zijn staat links al bezoek ook met de links naar de andere themasites dus
wordt deze link dan rechts weergegeven onder de datum */
#posonderdeelvan1 {
float: right;
position: relative;
top: 12px;
/* Hack for Internet Explorer 7 en 6 */
*top: -2px;
right: 36px;
}

/* De link zelf */
a.onderdeelvan:link, a.onderdeelvan:visited, a.onderdeelvan:hover  {
font-weight: bold;
color: #00a4ff;
text-decoration: none;
}

a.onderdeelvan:hover  {
text-decoration: underline;
}

/* Als de themasite een taaltegenhanger heeft in het Engels of Nederlands (ingesteld via het beheerdersgedeelte)
komt er een link met "Deze website is ook beschikbaar in het taal" met vlaggetje erachter.
De positionering van deze link staat nu op een nogal merkwaardige plaats. Als je niet gebruik maakt van de
headertekst of daar minder tekst hebt kun je de headertekst minder hoog maken en deze link dus ook naar boven
verplaatsen. Een andere optie is hem helemaal naar boven te verplaatsen over de navigatiebalk maar dat kun je alleen
doen als je NIET van het forum of een wachtwoordbeveiligde themasite gebruik maakt want daar komen dan de registreren
en mijn profiel etc links.
Toelichting bij de hacks voor Internet Explorer 7 en 6: als je de waardes van top, right of width bij de standaard
waarde veranderd tel dan het verschil er nog bij op van de momenteel aangegeven hacks waarde en de normale waarde. */
#posookbeschikbaarin {
position: relative;
top: 228px;
/* Hack voor Internet Explorer 7 */
*top: 212px;
/* Hack voor Internet Explorer 6 */
_top: 210px;
right: 68px;
/* Hack voor Internet Explorer 6 */
_right: 60px;
width: 165px;
/* Hacks voor Internet Explorer 7 */
_width: 250px;
_text-align: left;
float: right;
/* Een nogal heavy opmaak. Vindt je dat niks dan kun je alles hieronder verwijderen */
padding: 4px;
padding-left: 14px;
padding-right: 14px;
border: solid #ffffff 1px;
border-left: solid #abbf23 34px;
border-right: solid #abbf23 34px;
background-color: #bacf26;
/* Ronding voor alle browsers.
Zie: http://border-radius.com */
-webkit-border-radius: 26px;
-moz-border-radius: 26px;
border-radius: 26px;
}

/* Hack voor Internet Explorer 6: geen afbeelding van de taal-vlag */
#posookbeschikbaarin img {
_display: none;
}

/* De uiteindelijke link van "Ook beschikbaar in" */
a.beschikbaarin:link, a.beschikbaarin:visited, a.beschikbaarin:hover  {
font-weight: bold;
color: #ffffff;
text-decoration: none;
}

/* Met de muis over de "Ook beschikbaar in" link */
a.beschikbaarin:hover  {
text-decoration: underline;
}



/*_________________________________________________Einde CSS Themasitebalk__________________________________________*/