/* 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
{
	font-family: Arial,sans-serif;
	color: #000033;
	line-height: 1.166;	
	margin: 0px;
	padding: 0px;
	background: #cccccc url("plaatjes/bg_algemeen.gif") scroll;
}

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

/* hoofdrubriek gewoon*/	
#nav a {

	font-size: small;
	color: #000000;
	font-weight: bold;
}

/* hoofdrubriek met de muis boven de knop*/	
#nav a:hover{	

	color: #FFFFFF;
	background-image: url(plaatjes/navbalkover.gif);
}

/* de actieve hoofdrubriek */
#nav   a.hfd_actief{	

  	color: #000033;
	background-image: url(plaatjes/navbalkactief.gif);

}

/* Subhoofdrubrieken (uitklapmenu)*/
#nav a.sub_hfdrubriek {
	background-color: #FFF061;
	color: #FF6633;
	font-weight: lighter;
	width: 11.4em;
}
#nav  a.sub_hfdrubriek:hover {
	background-color: #FF6633;
	color: #FFF061;
/* 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 {
	font: Verdana;
	display: block;
	border-bottom: 1px solid #cccccc;
	border-top: 1px solid #cccccc;
	font-weight: bold;
	padding: 1px 0px 3px 10px;
	background-image: url(plaatjes/submenu.gif);
	color: #000033;
}
/* dossierknop met muis erboven */
#submenunav a:hover
{

	
	background-color: #FFFFFF;
	background-image: url(plaatjes/submenu_over.gif);
	

}
/* huidige dossier */
#submenunav a.dossier_actief {
	
	background-color: #0084FF;
	background-image: url(plaatjes/submenu_actief.gif);
}

/* pagina gewoon */
#submenunav  ul a
{
	color: #333333;
	text-decoration: none;
	font-weight: normal;
	border: none;
	background-image: none;
}
/* pagina met muis erboven */
#submenunav  ul a:hover
{
	color: #FFFFFF;
}
/* 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: 10px center;
	color: #0084FF;

}

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

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

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

a:hover{
	color: #F98606;
	text-decoration: underline;
}
/* link in het zoekformulier */
#zoekformulier a:link, #zoekformulier a:visited {
	font-size: 80%;
	font-weight: bold;
	color: #FEFF31;
	
	
}

#zoekformulier a:hover{
	text-decoration: underline;
}
/* link in siteinfo onderaan de pagina */
#siteInfo a {
	color: #4F4398;
}
/* link om in te loggen */
#login a{
	color: #666666;
}

#login a:hover{
	text-decoration: underline;
}

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

h1{
 font: bold 120% Arial,sans-serif;
 color: #4A518A;
 margin: 0px;
 padding: 0px;
}

h2{
 font: bold 114% Arial,sans-serif;
 color: #006699;
 margin: 0px;
 padding: 0px;
}

h3{
 font: bold 100% Arial,sans-serif;
 color: #4A518A;
 margin: 0px;
 padding: 0px;
}

h4{
	font: 100% Arial,sans-serif;
	color: #070068;
	margin: 0px;
	padding: 0px;
}

h5{
 font: 100% Arial,sans-serif;
 color: #4A518A;
 margin: 0px;
 padding: 0px;
}

th {
	text-align: left;
}

.dossierkopje {
	font-size: 110%;
	color: #3A3170;
	font-weight: bolder;
}
.tekstkopje {
	font-weight: bold;
	color: #3A3170;
}
.kolom3kopje {
	font-size: 100%;
	color: #3A3170;
	font-weight: bolder;
}
.kopregel {
	background-color: #FFFFCA;
	margin-bottom: 15px;
}
/* artikel bevat alle teksten en andere inhoud */
.artikel{
	font-size: 90%;
	padding-top: -20px;
}



/*****************************************************/
/* 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-attachment: scroll;
	background-image: url(plaatjes/bg_algemeen.jpg);
	background-repeat: repeat-x;
	background-position: left top;	
	/*background-color: #FFF;*/
}

/* Kaderhoofdrubrieken is het bovenste blok */
#kaderhoofdrubrieken
{
	height: 130px;
	margin: 0px 0px 0px 190px;
	
}

/* Balk met Hoofdrubrieken */
#hoofdrubriekbalk{
	position: relative;
width: 96%;                                         
top: 49px;
height: 32px;
color: #cccccc;
padding: 0px;
margin: 0px 0px 0px 10px;
background-image:    url("plaatjes/navbalk.gif");
}

#hoofdrubriekbalk IMG{
	border: none;
	margin-top: -3px;
}
/* 
Hoofdrubriek wordt gebruikt om het rijtje met knoppen 
te kunnen verschuiven binnen de balk met hoofdrubrieken.  
*/
#hoofdrubriek {
	position: absolute;
	top: 6px;
	height: 22px;
	padding: 0px;
	margin: 0px;
	left: 10px;
	z-index: 100;
}
/* 
Paginainfo is een balk onder de hoofdrubrieken over de volle breedte.
Bevat o.a. kruimels, titelpagina en logobovenschool.
*/
#paginainfo
{
	height: 70px;
	margin: 0px 0px 0px 180px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #CCCCCC;
	background-image:    url(plaatjes/bg_pag.gif);
	display:none;
}	
/* 
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
{
	margin: 0px;
	padding: 0px;
	background-image: url(plaatjes/bg_algemeen.gif);

}
#kaderinhoud
{
	
	background-color: #FFFFFF;
	padding-left: 10px;
	padding-top: 0px;
	margin-left: 200px;
}
/* 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
{
	padding-left: 10px;
}

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

/* balk onderaan de pagina       */
#siteInfo
{
	background-image: url(plaatjes/bg_pag.gif);
	width:100%;
	height:20px;
}
#siteInfoTekst {
display: none;
}


/********************************************/
/* 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;
	display:none;
}
#schoollogo {
	background-image: url(plaatjes/sitelogo.gif);
	top: 0px;
	left: 0px;
	height: 176px;
	width: 185px;
}

/*knop om in te loggen als gebruiker. NIET verbergen!! */
#login{
	font:  80% Verdana, sans-serif;
	color: #000033;	
	left: 210px;
	top: 90px;
}



/* 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 {
	margin-top: 0px;
}
/* drie extra mogelijkheden om plaatjes toe te voegen
aan de algemene layout*/
#layout1 {
	top: 0px;
	left: 0px;
	height: 49px;
	width: 535px;
	background-attachment: scroll;
	background-image: url(plaatjes/bg_lucht.jpg);
	background-repeat: no-repeat;
	background-position: left top;
}
#layout2 {
	background-image: url(plaatjes/logobovenschool.gif);
	top: 84px;
	right: 25px;
	height: 63px;
	width: 84px;
	background-repeat: no-repeat;
}
#layout3 {
	background-image: url(plaatjes/zon80.gif);
	top: 0px;
	left: 580px;
	height: 80px;
	width: 80px;
	display:none;
}

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

/*******************************************/
/* 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: 30px;
	top: 95px;
	z-index:100;
	display: none;
}
/* zoekmenu in het submenu */
#zoekformuliersubmenu {
	padding-top: 5px;
	text-align: center;
	height: 20px;
}

/* pagina titel  boven het submenu */
#titelpagina {
	margin-top: 25px;
	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/navbalklinks.gif);
	height: 32px;
	width: 5px;
}

#hoofdrubriekrechts {
	background-image: url(plaatjes/navbalkrechts.gif);
	height: 32px;
	width: 5px;	
}

/* 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;
}