/* Dit stijlblad zorgt voor de algemene indeling, d.w.z. de afmetingen en de positionering van de elementen op de pagina. Je kunt de positie veranderen door andere waarden te geven voor left, right, top en bottom. De afmetingen bepaal je met de waarden voor width en height. Met margin stel je de afstand in t.o.v. de omliggende elementen. Padding bepaalt de afstand tussen de (denkbeeldige) rand van een element en de inhoud binnenin.
Je kunt onderdelen ook 'onzichtbaar' maken met de eigenschap display: none */

body
{
	margin: 0;
	padding: 0;
}

#kadertotaal
{
/* Voor gecentreerde pagina met vaste breedte:*/
	/*width:760px;
	margin: 0.3em auto; */

/* Voor pagina met marges aan alle kanten:*/
	width:100%;
	margin: 0px;
	z-index: 2;
}


/* kadertotaal bevat twee blokken:
		- kaderhoofdrubrieken
		- paginainhoud
*/




/**************************************/
/* Onderdelen van kaderhoofdrubrieken */
/**************************************/


/*
 
kaderhoofdrubrieken bevat achtereenvolgens:
		schoolnaam - bevat automatisch de naam van de school
		schoollogo - heeft standaard sitelogo.gif als achtergrond
		layout1 - gebruik eigenschap background-image in layout 1, 2 en 3 om extra 
					afbeeldingen op de pagina te plaatsen
		layout2
		layout3         
		login - knop om in te loggen op de site                
		hoofdrubriekbalk     
					hoofdrubrieklinks
					hoofdrubriekrechts
					hoofdrubriek:  
						nav met ul li en a voor de knoppen
					zoekformulier  - kan eventueel ook in submenu door zoekformuliersubmenu 
									zichtbaar te maken en zoekformulier te verbergen 

*/
#schoolnaam {
}
#schoollogo {
	position: absolute;
}
#layout1, #layout2, #layout3{
	position: absolute;
	z-index: 0;

}
#login{
	position: absolute;
}

#hoofdrubriekbalk{
	position: relative;
	width: 100%;
	min-width: 640px;
	padding: 0px;
	z-index: 5;
}

#hoofdrubriek {
	position: absolute;
	min-width: 640px;
	padding: 0px;
	margin: -3px 0px 0px;	
}

/* 'dopjes' aan de linker-  en rechterkant van de balk 
    zorgen voor afgeronde hoeken en schaduweffect */
#hoofdrubrieklinks {
	position: absolute;
	top: 0px;
	left:0px;
}
#hoofdrubriekrechts {
	position: absolute;
	top: 0px;
	right:0px;
}

/*
De  knoppen voor de hoofdrubrieken bevinden zich in de div #nav
In feite is het een ongeordende lijst (ul) met lijst-items (li). 
Deze lijst-items bevatten de link (a) naar de pagina en eventueel een nieuwe lijst
voor sub-hoofdrubrieken (uitklapmenu).
*/

#nav, #nav ul {
/* alle lijsten */
	padding: 0;
	margin: 0;
	list-style: none;
	line-height: 1;
	z-index: 200;

}


#nav a {
	display: block;
	text-decoration: none;
	padding: 0.3em 0.7em;
}
#nav li {
/* alle lijsten */
	float: left;
	 /* breedte van de hoofdrubrieken 
	 width: 8em;*/ 
	z-index: 200;
	
}
#nav li ul {
/* tweede niveau - subhoofdrubrieken */
	position: absolute;
	left: -999em;
	width: 10.4em;
	line-height: 0.7em;
	background: #F1F87D;
	border: 1px solid #565B09;	
	z-index: 200;
	
}
#nav li:hover ul, #nav li.sfhover ul {
	left: auto;
}



#zoekformulier {
	position: absolute;
	
}
/* einde hoofdrubriekbalk */



/**************************************/
/* Onderdelen van paginainhoud        */
/**************************************/
#paginainhoud
{

	z-index: 40;
	
}
/*
paginainhoud bestaat uit de volgende blokken:

	paginainfo:
			paginainfolinks - te gebruiken voor ronde hoek links
			paginainforechts - te gebruiken voor ronde hoek links
			kruimels - navigatieonderdeel
			logobovenschool - met link naar bovenschoolse site
			titelpagina - zie ook titelpagina 2
	kadersubmenu:
			submenuboven - afronding bovenkant submenu
			submenu1huidig - actieve dossier
			submenu2
				paginaknoppen
			submenu1normaal - overige dossiers
			zoekformuliersubmenu - i.p.v. zoekformulier in hoofdrubriekbalk
			showroom
			submenuonder - afronding onderkant submenu
	kaderinhoud:
			knoppenbalk - o.a. voor bewerken inhoud
			titelpagina2 - i.p.v. titelpagina in paginainfo
			kolom3
				kolom3boven - afronding bovenkant kolom3
				kolom3onder - afronding onderkant kolom3 'fout in firefox
			artikel -  feitelijke inhoud van de pagina
	siteInfo:
			siteInfolinks - 'dopje' aan de linkerkant  voor ronde hoek
			siteInforechts - 'dopje' aan rechterkant voor ronde hoek
			siteInfoTekst - inhoud van blok site info


*/

/* paginainfo zit direct onder de hoofdrubrieken*/
#paginainfo
{	
	margin:  0px;	
	height: auto;
}	

#paginainfolinks {
	float: left;
	top: 0px;
	left:0px;
	background-repeat: no-repeat;
	background-position: left top;	
}

#paginainforechts {
	float: right;
	background-repeat: no-repeat;
	background-position: right top;
}

#kruimels{
	margin: 0;
	float: left;
	position: relative;
	z-index: 0;
}
#logobovenschool {
	padding: 0px;
	margin: -20px 6px 0px 0px;
	float: right;
}

#titelpagina {
	/* toont de titel direct onder de hoofdrubrieken, 
	dus boven het submenu en de overige inhoud*/
	padding: 0px 0px 5px 10px;
	margin: 0px;
}
/* einde paginainfo */


/* het submenu 
Voor achtergrond van submenu, zie paginainhoud in onze_stijl.css */
#kadersubmenu
{
	float: left;
	width: 170px;
	padding-top: 50px;
	margin: 0px;
	z-index:auto;
}

/* dossierknoppen */
#submenunav {
	list-style: none;
	padding: 0em;
	margin: 0em;
}
#submenunav li { 
	margin: 0em 0em 6px; 
}


#submenunav a {
	display: block;
	padding: 0px 10px 3px;
	width: 160px;
	background-repeat: no-repeat;
	background-position: 0 0;
}


/* paginaknoppen */
#submenunav  ul{
	list-style: none;
	list-style-position: outside;
	padding: 0em;
	margin: 3px 0em 0em;
}
#submenunav  ul li { 
	margin: 0em; 
	padding: 0em;
}
#submenunav  ul a
{
	display: block;
	margin: 0px; 
	padding: 0px 5px 3px 20px;
	width: 140px;
}
#submenunav img {
	border: none;
}



/* dit plaatst het zoekformulier in het submenu */
#zoekformuliersubmenu {
	padding-top: 5px;
	text-align: center;
	height: 20px;

}

/* randomplaatje in submenu */
#showroom{
	padding: 5px 2px 10px 5px;
}
#showroom img{
	display: block;
	text-align: center;
}
/* rand boven en onder het submenu*/
#submenuboven {
	width: 170px;
}
#submenuonder {
	position: relative;	
	width: 100%;
}
/* einde kadersubmenu */



		
#kaderinhoud
{
	padding-top: 0em;
	margin: 0px 0px 0px 170px;
	z-index: 1;
}

#knoppenbalk{
	width: 300px;
	height: 20px;
	float: right;
	text-align: right;
	position: relative;
	z-index: 0;
}
#knoppenbalk IMG{
	margin-right: 1px;
	margin-left: 1px;
	width:20px;
	height: 20px;
	align:absmiddle;
	border: none;

}



/* Bij deze instelling wordt de paginatitel rechts naast
het submenu getoond i.p.v. er boven */
#titelpagina2 {
	padding: 0px;
	margin: 0px 0px 0px;
	clear: both;	
}

/* derde kolom voor teksten rechts */
#kolom3{
	float:right;
	padding: 3px 0px 3px 10px;
	width: 160px;
	margin: 0px 4px 10px 0px;
	overflow: hidden;
}
.kolom3kopje {
	width: 160px;
	margin-top: -3px;
	margin-left: -10px;
	padding-left: 10px;
}
/*rand boven en onderaan kolom3 */
#kolom3boven {
	position: relative;	
	margin-top: -3px;
	margin-left: -10px;
	padding-left: 10px;
	width: 160px;
}
#kolom3onder {
	position: relative;
	width: 160px;
	margin-left: -10px;
	margin-top: -12px;
	padding-left: 10px;
	bottom: -20px;
	margin-bottom: 16px;
}

#artikel p{
	margin-top: 0px;
}
#artikel {
/*
filter:alpha(opacity=50);
	-moz-opacity:.50;
	opacity:.50;
*/
}



/* horizontale balk aan de onderkant van de  pagina */
#siteInfo
{
	clear: both;
	padding: 0em;
	height: auto;
}

#siteInfolinks {
	float: left;
	background-repeat: no-repeat;
	background-position: left bottom;
}

#siteInforechts {
	float: right;
	background-repeat: no-repeat;
	background-position: right bottom;

}

#siteInfo img{
	padding: 4px 4px 4px 0px;
	vertical-align: middle;
}

#inhoudlb {
	float: left;
	background-repeat: no-repeat;
	background-position: left top;
	background-image: url(plaatjes/hoeken/bochtbovenlinks.gif);
	height: 6px;
	width: 6px;
	margin-left: -5px;
	display: none;
}

#inhoudrb {
	float: right;
	background-repeat: no-repeat;
	background-position: right top;
	background-image: url(plaatjes/hoeken/bochtbovenrechts.gif);
	height: 6px;
	width: 6px;
	margin-right: -5px;
	display: none;
}
#inhoudlo {
	float: left;
	background-repeat: no-repeat;
	background-position: left bottom;
	background-image: url(plaatjes/hoeken/bochtonderlinks.gif);
	height: 6px;
	width: 6px;
	clear: left;
	margin-left: 85px;
	display: none;
}

#inhoudro {
	float: right;
	background-repeat: no-repeat;
	background-position: right bottom;
	background-image: url(plaatjes/hoeken/bochtonderrechts.gif);
	height: 6px;
	width: 6px;
	clear: both;
	display: none;

}