/* Met dit stijlblad kun je het uiterlijk van de eigen site bepalen.

De belangrijkste eigenschappen zijn:
color = tekstkleur
background = achtergrondkleur
background-image = achtergrondplaatje
 
De positie en afmetingen van de elementen zijn vastgelegd in het stijlblad: stijl_layout.css

In het bestand stijl_inhoud.css vind je nog enkele extra eigenschappen die je kunt instellen.

Gebruik 'display:none;' om een element te verbergen.
*/


/* Body bepaalt de achtergrond en lettertype van de gehele pagina*/
body
{
	background: #FFFFFF url(plaatjes/achtergrond/bg_zand.jpg);
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
	color: #333333;	
	line-height: 130%;
	font-size: 0.9em;
}

/**************************************/
/* KNOPPEN VAN DE HOOFDRUBRIEKEN      */
/**************************************/	

/* hoofdrubriek gewoon*/	
#nav a {

	color: #ffe96d;
	font-family: Arial, Helvetica, sans-serif;
	font-size: medium;
	font-weight: bold;
}

/* hoofdrubriek met de muis boven de knop*/	
#nav a:hover{	
	color: #990000;
	background-image: url(plaatjes/navbalkactiefx.gif);
	background-repeat: no-repeat;
	background-position: left center;
}

/* de actieve hoofdrubriek */
#nav   a.hfd_actief{	
	color: #FFF;
}

/* Subhoofdrubrieken (uitklapmenu)*/
#nav a.sub_hfdrubriek {
	background-color: #F1F87D;
	color: #565B09;
	font-weight: lighter;
	width: 8em;
}
#nav  a.sub_hfdrubriek:hover {
	background-color: #565B09;
	color: #F1F87D;
/* niet bestaand plaatje; anders is de achtergrond van de hoofdrubriek te zien */
	background-image: url(plaatjes/x.gif);
}

/**************************************/
/* KNOPPEN VAN HET SUBMENU LINKS      */
/**************************************/	
/* dossierknop gewoon */
#submenunav a {
	color: #996600;
	text-decoration: none;
	font-weight: bold;
	font-size: 0.8em;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
/* dossierknop met muis erboven */
#submenunav a:hover
{
	color: #333333;

}
/* huidige dossier */
#submenunav a.dossier_actief {
	color: #996600;
	background-color: #F1F87D;
}

/* pagina gewoon */
#submenunav  ul a
{
	color: #996600;
	text-decoration: none;
	font-weight: normal;
	border: none;
}
/* pagina met muis erboven */
#submenunav  ul a:hover
{
	
	text-decoration: underline;
	font-weight: normal;
	border: none;
}
/* huidige pagina */
#submenunav  ul a.pagina_actief, #submenunav  ul a.pagina_actief:hover   {
	background-image: url(plaatjes/huidigepagina.gif);
	background-repeat: no-repeat;
	background-position: left center;

}

/**************************************/
/* ALGEMENE ONDERDELEN VAN DE PAGINA  */
/**************************************/	

/******* hyperlinks *******/

a:link, a:visited{
	color: #990000;
	text-decoration: none;
}

a:hover{
	text-decoration: underline;
}
/* link in het zoekformulier */
.zoekmenu a{
	color: #990000;
	font-weight: bolder;
}
/* link in siteinfo onderaan de pagina */
#siteInfo a {
	color: #F3F7AA;
}
/* link om in te loggen */
#login a{
	color: #990000;
}

/************** kopjes **************/

h1{
	font: bold 120% Arial,sans-serif;
	color: #9FA9AC;
}

h2{
	font: bold 114% Arial,sans-serif;
	color: #9FA9AC;
}

h3{
	font: bold 100% Arial,sans-serif;
	color: #9FA9AC;
}

h4{
	font: 100% Arial,sans-serif;
	color: #9FA9AC;
}

h5{
	font: 100% Arial,sans-serif;
	color: #9FA9AC;
}

.dossierkopje {
	font-size: 110%;
	color: #BAC409;
	font-weight: bolder;
	
}
.tekstkopje {
	font-weight: bold;
	color: #9FA9AC;
}
.kolom3kopje {
	font-size: 100%;
	color: #BAC409;
	font-weight: bolder;
}
/* artikel bevat alle teksten en andere inhoud */
.artikel{
	font-size: 90%;
}



/*****************************************************/
/* RANDEN, MARGES EN ACHTERGRONDEN VAN DE BLOKKEN    */
/*****************************************************/	

/* Kadertotaal omsluit de totale inhoud. Zie stijl_layout voor instellen van breedte en marges
	van de pagina */
#kadertotaal
{
	
	background-color: #FFF;
}

/* Kaderhoofdrubrieken is het bovenste blok */
#kaderhoofdrubrieken
{
	
	background-image: url(plaatjes/achtergrond/bg_zand.jpg);
	background-repeat: repeat-x;
	background-position: left top;
	height: 100px;
	
	
}

/* Balk met Hoofdrubrieken */
#hoofdrubriekbalk{
	height: 34px;
	top: 16px;
	background-color: #2e6cde;
	/*background-image:    url(plaatjes/hoofdrubrieken/navbalk1.gif);*/
}
/* 
Hoofdrubriek wordt gebruikt om het rijtje met knoppen 
te kunnen verschuiven binnen de balk met hoofdrubrieken.  
*/
#hoofdrubriek {
	top: 5px;
	left: 20px;
	height: 24px;
}
/* 
Paginainfo is een balk onder de hoofdrubrieken over de volle breedte.
Bevat o.a. kruimels, titelpagina en logobovenschool.
*/
#paginainfo
{
	background-color: #FFF;
}	
/* 
Paginainhoud is het onderste blok. Bevat submenu, het artikel, kolom 3 en de siteinfo onderaan. Hier kun je de achtergrond instellen voor submenu links als je wilt dat die achtergrond doorloopt over de totale lengte van de pagina. 
*/
#paginainhoud
{
	background-image: url(plaatjes/submenu/pagina_wit.gif);
	background-repeat: repeat-y;
	margin: 0px;
	padding: 0px;
}
#kaderinhoud
{
	
	padding-left: 10px;
}
/* Hier kun je de achtergrond instellen voor submenu links als je het submenu aan de onderkant wilt afsluiten met een rand. Zie #submenuonder verderop. */
#kadersubmenu
{
	background-image: url(plaatjes/submenu_bgx.jpg);
	background-repeat: repeat-y;
	background-position: right;
}

/* derde kolom voor teksten rechts */
#kolom3{
	font-size: 80%;
	border: 1px dashed #cccccc;
	background-color: #FFF;
}

/* balk onderaan de pagina       */
#siteInfo
{
	background-color: #2e6cde;
	border-top: 1px solid  #cccccc;
	font-size: small;
	color: #F3F7AA;
}


/********************************************/
/* DIVERSE ONDERDELEN BOVENSTE BLOK         */
/* Met top, right/left kun je de positie    */
/* aanpassen. Height en width moeten        */
/* hetzelfde zijn als de hoogte en breedte  */
/* van de background-image                  */
/********************************************/	

#schoolnaam{
	color: #990000;
	font-size: xx-large;
	font-family: Geneva, Arial, Helvetica, sans-serif;
	letter-spacing: 0.8em;
	margin-left: 0.6em;
	padding-top: 0.2em;
}
#schoollogo {
	background-image: url(plaatjes/sitelogo.gif);
	top: 5px;
	height: 62px;
	width: 100px;
}

/*knop om in te loggen als gebruiker. NIET verbergen!! */
#login{
	font:  80% Verdana, sans-serif;
	color: #CCCCCC;	
	right: 10px;
	margin-top: -30px;
}



/* broodkruimels in paginainfo */
#kruimels{
	font: small Verdana,sans-serif;
	color: #9FA9AC;
	top: -24px;
	left: -160px;
	/*display: none;*/
}
#kruimels a{
	color: #9FA9AC;
}
#kruimels a:hover{
	color: #005FA9;
	text-decoration: underline;
}
/* logobovenschool bevat een knop met een link naar de bovenschoolse website */
#logobovenschool {
	display:none;
}
/* drie extra mogelijkheden om plaatjes toe te voegen
aan de algemene layout*/
#layout1 {
	background-image: url(plaatjes/katrien.gif);
	top: 100px;
	right: 900px;
	height: 196px;
	width: 100px;
	display:none;
}
#layout2 {
	background-image: url(plaatjes/eimannetje.gif);
	top: 450px;
	left: 880px;
	height: 157px;
	width: 150px;
	display:none;
}
#layout3 {
	background-image: url(plaatjes/zon80.gif);
	top: 0px;
	left: 580px;
	height: 80px;
	width: 80px;
}

/* knoppenbalk bevat o.a. knop om pagina af te drukken en allerlei knoppen voor beheer van de site */
#knoppenbalk{
	top: -25px;
	right: 10px;
}

/*******************************************/
/* ALTERNATIEVE ONDERDELEN                 */
/* Bij het zoekformulier en de paginatitel */
/* kun je zelf bepalen in welk blok zij    */
/* getoond worden. Dit doe je door de      */
/* ongewenste optie te verbergen met       */
/* display:none                            */
/*******************************************/	

	
/* zoekmenu in de balk met hoofdrubrieken */
#zoekformulier {
	right: 20px;
	top: 50px;
	display: none;
}
/* zoekmenu in het submenu */
#zoekformuliersubmenu {
	padding-top: 5px;
	text-align: center;
	height: 20px;
}

/* pagina titel  boven het submenu */
#titelpagina {
	font: bold 175% Arial,sans-serif;
	color: #000000;
	display: none;
}
/* pagina titel  rechts naast het submenu */
#titelpagina2 {
	font: bold 175% Arial,sans-serif;
	color: #000000;
	clear: right;
}



/**********************************************/
/* DOPJES EN HOEKEN                           */
/* Een aantal onderdelen van de pagina        */
/* kun je boven en onder of aan               */
/* weerskanten afsluiten met een dopje        */
/* of een afgeronde hoek.                     */
/* Bij sommigen moet je de hoogte en  breedte */
/* aanpassen aan het formaat van het plaatje. */
/**********************************************/	

/* hoofdrubrieklinks en rechts zijn twee plaatjes aan weerszijden van
de hoofdrubriekbalk, die zorgen voor afgeronde hoeken en schaduw. Je kunt ze verbergen of de plaatjes aanpassen. */
#hoofdrubrieklinks {
	background-image: url(plaatjes/hoofdrubrieken/navbalk2links.gif);
	height: 33px;
	width: 5px;
	display: none;
}

#hoofdrubriekrechts {
	background-image: url(plaatjes/hoofdrubrieken/navbalk2rechts.gif);
	height: 33px;
	width: 5px;	
	display: none;
}

/* ronde hoeken bovenkant pagina */
#paginainfolinks {
	background-image: url(plaatjes/hoeken/bochtbovenlinks.gif);
	height: 6px;
	width: 6px;
}
#paginainforechts {
	background-image: url(plaatjes/hoeken/bochtbovenrechts.gif);
	height: 6px;
	width: 6px;	
}

/* ronde hoek links onder aan  de pagina */
#siteInfolinks {
	background-image: url(plaatjes/hoeken/bochtonderlinks.gif);
	height: 28px;
	width: 6px;	
	/*display: none;*/
}

/* ronde hoek rechts onder aan  de pagina */
#siteInforechts{
	background-image: url(plaatjes/hoeken/bochtonderrechts.gif);
	height: 28px;
	width: 6px;	
	/*display: none;*/
}



/* rand boven het submenu*/
#submenuboven {
	height: 15px;
	background-image: url(plaatjes/submenuboven.jpg);
	display: none;
}

/* rand onder het submenu*/
#submenuonder {
	height: 15px;
	background-image: url(plaatjes/submenuonder.jpg);
	display: none;
}

/*rand bovenaan kolom3 */
#kolom3boven {	
	height: 15px;
	background-image: url(plaatjes/achtergrond/bg_rood.jpg);
	display: none;
}
/*rand onderaan kolom3 */
#kolom3onder {
	height: 15px;
	background-image: url(plaatjes/achtergrond/bg_rood.jpg);
	display: none;
}