/* Dit stijlblad wordt automatisch gegenereerd door */
/* de stijl-editor in de rubriek beheer.  */


/*body*/
/*De 'body' bevat alle andere elementen van de pagina en bepaalt de basiskenmerken van de tekst. Gebruik de categorie 'body_achtergrond' om de achtergrondkleur in te stellen.*/
Body {
font-family: Calibri;
font-size: Medium;
color: #000000;
background-color: # ;
background-repeat: repeat;background-position: left center;
}


/*body achtergrond*/
/*Hier stel je de achtergrond van de Body in. Normaal gesproken zou je dat bij de Body zelf doen, maar omdat de teksteditor dezelfde stijlen gebruikt, zou je de teksten niet meer goed kunnen bewerken.*/
.body_achtergrond {
color: #000000;
background-color: #0577c0;
background-repeat: repeat;background-position: left center;
}


/*hoofdrubriekbalk*/
/*Deze balk bevat de knoppen van de hoofdrubrieken. Gebruik het tabblad code om de knoppen omlaag te schuiven.*/
#hoofdrubriekbalk {
font-size: Large;
font-weight: bold;
background-repeat: repeat-x;
background-position: left center;
top:64px;
}


/*hyperlinks*/
/*Eigenschappen van hyperlinks. (Zie ook het bestand 'mijn_stijl.css' in de map upload/stijlmap).*/
a {
}
a:hover {
}
a.actief, a.actief:hover {
}


/*kader boven*/
/*Kader voor alles boven de inhoud van de pagina. Hier kun je een achtergrondkleur of afbeelding kiezen die <i>achter</i> het logo en de hoofdrubrieken te zien is.*/
#kaderhoofdrubrieken {
background-image: url(../../foto.ashx?Size=G&bestand_id=92);
height: 129px ;
background-repeat: repeat;
background-position: left top;
}


/*kader met oogje*/
/*Dit kader zit tussen de hoofdrubrieken en de feitelijke inhoud in. Je kunt het herkennen aan de knop met het oogje. Het kader bevat o.a. de paginatitel.*/
#paginainfo {
color: #000;
color:#fffefe;
filter: chroma(color = #fffefe);
background-color: #37a0e3;
height: 20px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #c40401;
border-top-style: solid;
border-top-width: 2px;
border-top-color: #c40401;
text-align: left;

}


/*kader midden*/
/*Kader voor zowel het submenu links en de twee kolommen daarnaast. Gebruik dit om een doorlopende achtergrond achter het submenu te plaatsen.*/
#contentwrapper {
color: #000000;
background-image: url(../../foto.ashx?Size=G&bestand_id=107);
background-repeat: repeat-y;background-position: left center;
}


/*kader onder*/
/*Het balkje helemaal onder aan de pagina met copyright e.d.*/
#siteInfo {
background-color: #37a0e3;
border-top-color: #c40401;
border-top-style: solid;
border-top-width: 2px;
}


/*kader submenu*/
/*Kader voor het submenu en het zoekvakje aan de linkerkant.*/
#kolomlinks {
background-color: # ;
background-repeat: repeat;background-position: left center;
}


/*kader totaal*/
/*Dit kader kun je bijvoorbeeld gebruiken om een gekleurde rand rondom je site te maken. Het kader omvat de hele inhoud.*/
#maincontainer {
color: #000;
background-color: #FFF;
border: 3px solid #c40401;
margin-top: 10px;
margin-bottom: 10px;
}


/*knop dossier*/
/*Dit zijn de belangrijkste knoppen in het submenu links. Bij aanklikken van een dossier worden de paginaknoppen zichtbaar.*/
#submenunav a {
color: #000000;
background-color: #f4b534;
font-weight: bold;
background-repeat: no-repeat;background-position: left center;
}
#submenunav a:hover {
color: #000000;
background-color: #f6daa1;
}
#submenunav a.actief, #submenunav a.actief:hover {
color: #FFF;
background-color: #eca108;
font-weight: bold;
background-repeat: no-repeat;background-position: left center;
}


/*knop hoofdrubriek*/
/*Dit zijn de horizontale knoppen bovenaan de website naast of onder het logo.*/
#nav a.actueel {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=114);
background-repeat: no-repeat;
background-position: left center;
height: 127px ;
width: 120px ;
font-size: 1px;
color: #C0C0C0;
}
#nav a.actueel:hover {
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=113);
background-repeat: no-repeat;
background-position: left center;
}
#nav a.actueel_actief, #nav a.actueel_actief:hover {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=115);
background-repeat: no-repeat;
background-position: left center;
height: 127px ;
width: 120px ;
font-size: 1px;
color: #C0C0C0;
}
#nav a.breed {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=117);
background-repeat: no-repeat;
background-position: left center;
height: 127px ;
width: 120px ;
font-size: 1px;
color: #C0C0C0;
}
#nav a.breed:hover {
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=116);
background-repeat: no-repeat;
background-position: left center;
}
#nav a.breed_actief, #nav a.breed_actief:hover {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=118);
background-repeat: no-repeat;
background-position: left center;
height: 127px ;
width: 120px ;
font-size: 1px;
color: #C0C0C0;
}
#nav a.fotoalbum {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=120);
background-repeat: no-repeat;
background-position: left center;
height: 127px ;
width: 120px ;
font-size: 1px;
color: #C0C0C0;
}
#nav a.fotoalbum:hover {
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=119);
background-repeat: no-repeat;
background-position: left center;
}
#nav a.fotoalbum_actief, #nav a.fotoalbum_actief:hover {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=121);
background-repeat: no-repeat;
background-position: left center;
height: 127px ;
width: 120px ;
font-size: 1px;
color: #C0C0C0;
}
#nav a.groepen {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=123);
background-repeat: no-repeat;
background-position: left center;
height: 127px ;
width: 120px ;
font-size: 1px;
color: #C0C0C0;
}
#nav a.groepen:hover {
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=122);
background-repeat: no-repeat;
background-position: left center;
}
#nav a.groepen_actief, #nav a.groepen_actief:hover {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=124);
background-repeat: no-repeat;
background-position: left center;
height: 127px ;
width: 120px ;
font-size: 1px;
color: #C0C0C0;
}
#nav a.hoofdrubriek_standaard {
font-size: Large;
color: #001f5e;
background-repeat: no-repeat;background-position: left center;
}
#nav a.hoofdrubriek_standaard:hover {
color: #fa6c17;
}
#nav a.hoofdrubriek_standaard_actief, #nav a.hoofdrubriek_standaard_actief:hover {
font-size: Large;
color: #FDFFF5;
background-repeat: no-repeat;background-position: left center;
}
#nav a.school {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=126);
background-repeat: no-repeat;
background-position: left center;
color:#fffefe;
filter: chroma(color = #fffefe);
height: 127px ;
width: 120px ;
font-size:1px;
}
#nav a.school:hover {
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=125);
background-repeat: no-repeat;
background-position: left center;
color:#fffefe;
filter: chroma(color = #fffefe);
}
#nav a.school_actief, #nav a.school_actief:hover {
font-size: small;
color: #C0C0C0;
background-image: url(../../foto.ashx?Size=G&bestand_id=127);
background-repeat: no-repeat;
background-position: left center;
color:#fffefe;
filter: chroma(color = #fffefe);
height: 127px ;
width: 120px ;
font-size:1px;
}


/*knop pagina*/
/*Knoppen in het submenu links die zichtbaar worden als je op een dossierknop hebt geklikt.*/
#submenunav  ul a {
color: #5b5b5b;
background-color: #fecf52;
background-repeat: no-repeat;
}
#submenunav  ul a:hover {
color: #FFF;
background-color: #fecf52;
}
#submenunav  ul a.actief, #submenunav  ul a.actief:hover {
color: #FFF;
background-color: #fecf52;
background-repeat: no-repeat;
}


/*knop subhoofdrubriek*/
/*Weergave van een 'uitgeklapte' sub-hoofdrubriek*/
#nav  a.sub_hfdrubriek {
color: #000;
background-color: #fecf52;
}
#nav  a.sub_hfdrubriek:hover {
color: #000;
background-color: #f4b534;
}
#nav  a.sub_hfdrubriek.actief, #nav  a.sub_hfdrubriek.actief:hover {
color: #FDFFF5;
background-color: #FD1130;
}


/*koppen*/
/*Op een website worden koppen weergegeven met HTML codes H1, H2, H3 enz. Hier kun je de kleur en grote van die koppen aanpassen.  (Zie ook het bestand 'mijn_stijl.css' in de map upload/stijlmap).*/
H1
 {
}
H2
 {
}
H3
 {
}
H4
 {
}
H5
 {
}


/*pagina_links*/
/*Iedere pagina kan een eigen achtergrond en lettertype krijgen. Het brede deel in het midden valt onder de categorie pagina_links. De smalle kolom daarnaast is pagina_rechts. Hier maak je de stijldefinities aan; daarna kun je bij de eigenschappen van de pagina een stijl kiezen.*/
.gras
 {
font-size: small;
color: #FFF;
background-image: url(../../foto.ashx?Size=G&bestand_id=47);
}
.links_standaard
 {
}
.Ruitjes
 {
font-size: small;
background-image: url(../../foto.ashx?Size=G&bestand_id=50);
min-height:500px;

}
.Tegel
 {
font-size: small;
background-image: url(../../foto.ashx?Size=G&bestand_id=49);
}
.Zand
 {
font-size: small;
background-image: url(../../foto.ashx?Size=G&bestand_id=48);
}


/*pagina_rechts*/
/*Iedere pagina kan een eigen achtergrond en lettertype krijgen. Het brede deel in het midden valt onder de categorie pagina_links. De smalle kolom daarnaast is pagina_rechts. Hier maak je de stijldefinities aan; daarna kun je bij de eigenschappen van de pagina een stijl kiezen.*/
.rechts_standaard
 {
background-color: #FFF;
}


/*school logo*/
/*Vakje met het logo als achtergrond-afbeelding. Hoogte en breedte van dit vakje moeten gelijk zijn aan de afmetingen van het logo.*/
#schoollogo {
background-image: url(../../foto.ashx?Size=G&bestand_id=93);
position: relative;
    float: left;
    top: 0px;
    left: 0px;
    height: 127px;
    width: 108px;
    margin:0;
    background-repeat: no-repeat;
    background-position: left center;
}


/*schoolmotto*/
/*Motto  wordt standaard verborgen. Op het tabblad code bij deze stijl moet je "display:none;"  weghalen om de schoolnaam zichtbaar te maken. Het motto zelf kun je invullen bij de algemene instellingen van de site.*/
#schoolmotto {
background-repeat: no-repeat;background-position: left center;display:none;
}


/*schoolnaam*/
/*De schoolnaam  wordt standaard verborgen. Op het tabblad code bij deze stijl moet je "display:none;"  weghalen om de schoolnaam zichtbaar te maken. De schoolnaam  is ingevuld bij de algemene instellingen van de site.*/
#schoolnaam {
font-size: x-large;
color: #f4d840;
background-image: url(../../foto.ashx?Size=G&bestand_id=144);
font-weight: bold;
height: 90px ;
background-repeat: no-repeat;
background-position: left center;
padding-left:112px;
top: -10px;
left: 220px;
position: absolute;
font-size: xx-large;
letter-spacing: 0.4em;
margin-left: 0.6em;
padding-top: 60px;
}
#titelcontainerbovensubmenu { display: none;}
.titelpagina { display: none;}
#maincontainer { 
width: 90%; 
margin: 0 auto;
} 
#kolomlinks { 
float: left;
width: 170px; 
margin-left: -100%; 
} 
#submenunav, #submenunav ul a { 
} 
#kolominhoud { 
} 
#kolomrechts { 
float: left;
width: 170px; 
margin-left: -170px; 
} 
#kolominhoud { 
margin: 0 170px 0 170px; 
} 
#navbarleerling { 
margin-left: 170px; 
}