body {
	margin:20px 0 20px 0;
	background:#FFF url(../img/bg-body.gif);
	background-position:center;
	background-repeat:repeat-y;
	text-align:center;
	padding:0;
}

/*
	De outer div omsluit alle andere divs en kan zo gemakkelijk gebruikt
	worden om een rand om de hele layout heen te trekken.
*/
#outer {
	text-align:left;
	width:770px;
	margin:auto;
}
/*
	Dit is de hoofd div (boven aan de pagina)
*/
#header {
	height:192px;
	background:url(../img/kop.jpg);
	padding:16px 0 0 17px;
	margin:0 0 16px 0;
}
/*
	De bodyblock div omsluit de linkerkolom div en de rechterkolom div.
*/
#bodyblock{
	width:770px;
}
/*
	Dit is de linkerkolom div (voor het mainmenu)
*/
#leftcol {
	float:left;
	width:191px;
	text-align:left;
	font-weight:bold;
	padding:0;
}
/*
	Binnen de ul tag in de div "leftcol" bevind zich het mainmenu
*/
#mainmenu{
	font:0.9em /1.3 Arial, Helvetica, sans-serif;
	font-weight:bold;
	float:none;
	clear:both;
	padding:5px 0 5px 0;
	margin:0 0 15px 0;
	background:#fbced7;
}
#mainmenu ul {
	margin:0;
	padding:0;
	list-style:none;
}
/*
	Eerste niveau van het mainmenu
*/
#mainmenu li{
	margin:0px;
	padding:0px;
	list-style:none;
}
#mainmenu li.active{
	color:#FFF;
	background:url(../img/arrow-mainmenu.gif);
	background-repeat:no-repeat;
}
/*
	Links in het mainmenu
*/
#mainmenu li a:link,
#mainmenu li a:visited {
	display:block;
	height:10%;/* IE hack (no height results in strange margins)*/
	margin:10px 0 10px 17px;
	padding:2px 10px;
	text-decoration :none;
	color:#FFF;
	background:#c9022b;
}

/*
	De link naar de pagina die momenteel actief is in het mainmenu
*/
#mainmenu a:active,
#mainmenu a:hover,
#mainmenu li.active a:link,
#mainmenu li.active a:visited,
#mainmenu li.active a:active,
#mainmenu li.active a:hover{
	margin:10px 0 10px 0px;
	padding:2px 10px 2px 27px;
	background:#e16f88 url(../img/arrow-mainmenu.gif);
	background-repeat:no-repeat;
}
/*
	Het loginscherm verschijnt in deze div
*/
#loginForm,
#logoutForm{
	font:0.9em /1.3 Arial, Helvetica, sans-serif;
	color:#FFF;
	background:#c9022b;
	padding:10px;
}
#logoutForm{
	text-align:center;
}
#loginText{
	padding:0 0 5px 0;
	position:relative;
	font-weight:bold;
}
#logoutForm input,
#loginForm input{
	color:#FFF;
	background:none;
	border:1px solid #FFF;
}
#loginForm input.text{
	width:166px;
	margin:2px;
}
#loginForm input.submit{
	width:25px;
	float:right;
}
#loginForm label{
	padding:5px 0;
	position:relative;
	font-size:.85em;
}
#loginForm input.checkbox{
	border:none;
}
#loginRememberMe{
	padding:0 0 5px 0;
}
#leerlingenLink{
	margin:15px 0 0 0;
}
/*
	Dit is de content div
*/
#content {
	width:550px;
	float:right;
	text-align:left;
	background-repeat:repeat-y;
	padding:0 10px;
}
/*
	Links geplaatst in de footer van de site met de muis er over.
*/
#footer a:hover,
#footer a:active{
	color:#EAEEEE;
	text-decoration:underline;
}
/*
	Onderin de popup verschijnt een link om een venster te kunnen sluiten.
	Deze bevindt zich in een div met de id popupClose.
*/
#popupClose{
	clear:both;
	float:none;
	text-align:center;
}
/*
	De class "checkbox" wordt gebruikt voor checkboxen in formulieren.
*/
.checkbox {
	border:0px;
	width:auto;
}
/*
	Deze class wordt toegekend aan alle items die verkort worden weergegeven.
*/
.itemShort{
	float:none;
	padding:0 0 5px 0;
}
.itemShort .abstract{
	float:none;
}
/*
	Deze class wordt toegekend aan alle items die volledig worden weergegeven
	nadat ze verkort zijn weergegeven en er wordt op "lees meer" geklikt.
*/
.itemFull .abstract{
	font-weight:bold;
}
/*
	Deze class wordt toegekend aan artikelen die standaar al volledig worden weergegeven.
*/
.itemDefault .abstract{
	font-weight:bold;
}
/*
	DE ONDERSTAANDE CLASS WORDT TOEGEKEND AAN DE BODY VAN HET POPUPVENSTER
	hierdoor is het mogelijk om aan een popup een ander uiterlijk te geven als de site.
	Zo kun je bivoorbeeld de marges, de tekst keur, de tekst uitlijing, de achtergrondkleur enz.
	opgeven voor een popup.
*/
.popupcontent{
	padding:10px;
	margin:0;
	text-align:left;
}
/*
	Deze class wordt gebruikt voor de voetteksten onder artikelen zoals bijv. "lees meer" of "print".
*/
.articleFooter a:link,
.articleFooter a:visited{
	font-style:italic;
	font-weight:bold;
	text-decoration:none;
}
.articleFooter a:hover,
.articleFooter a:active{
	text-decoration:none;
}
.articleFooter img{
	padding:0 3px;
}
form{
	margin:0;
}
/* De pgaina titel bevindt zich tussen de h1 tag */
input ,select, textarea {
	border:1px solid #666;
	margin:0;
	padding:0;

}
textarea{
	width:98%;
}
input.text{
	width:98%;
	text-transform:none;
	margin:2px;
}
select.text{
	width:98%;
}

.readmorebtn,
.backbtn{
	vertical-align:middle;
}
/* Zorgt ervoor dat de "lees meer" tekst altijd onder de kopafbeelding komt */
.itemShort .articleFooter{
	clear:both;
	/* Plaatst de "lees meer" tekst rechts */
	text-align:right;
}
/* Zorgt ervoor dat de kop afbeelding rechts van de koptekst komt */
.headerImage{
	padding:0 0 10px 10px;
	float:right;
}
/*
	Streep onde een artikel in verkorte weergave.
	In versie 1.4 was dit gedefineerd met .itemShort Dit geeft echter problemen met
	de kopafbeelding die sinds 1.5 mogelijk is. De border wordt nu aan de footer
	van een verkort weergegeven artikel toegevoegd.
*/
.itemShort .articleFooter{
	border-bottom:1px solid #CCC;
}