/* 
	Hier wordt het standaard font voor de gehele pagina gedefineerd. 
	De body tag wordt tevens in fontstyles.css gedefineerd. 
	Dit kan enigzins verwarrend zijn. In pricipe kun je alles opgeven in fontstyles.css maar omdat fonstyles.css 
	in de editor van het cms wordt geladen kan het soms nodig zijn om zaken die niet in de editor moeten gelden hier op te geven.
	Een goed voorbeeld is "text-align:center;". Als dit wordt opgegeven in fontstyles.css dan wordt alle tekst in de editor 
	gecentreerd. 
	
	Als Instellingen die in beide bestanden voorkomen dan krijgen de instellingen uit fontstyles.css voorang 
	omdat deze als laatste wordt aangeroepen.
	
	Extra parameters die je hier kunt opgeven:
	
	color 						:#FFFFFF;
	
	**** Pagina marges ****
	
	margin 						:0;
	padding						:0px;
	
	**** Scrollbars (alleen in internet explorer niet conform standaarden van W3C) ****
	
	scrollbar-face-color		:#000; 
	scrollbar-shadow-color		:#ac0101;
	scrollbar-highlight-color	:#ac0101; 
	scrollbar-3dlight-color		:#000;
	scrollbar-darkshadow-color	:#000; 
	scrollbar-track-color		:#000;
	scrollbar-arrow-color		:#ac0101;		
	
	**** Achtergrond ****
	
	background-color			:#000;
	background					:#F1F1F1 url(../img/bg.gif) repeat-x fixed;
	
*/
body {
	margin					:0px 0 0px 0;
	background				:#D0D2D4;
	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. Je kunt ook de breedte van de totale site aanpassen.
	Je zult dan wel de breedes van alle andere divs na moeten loipen.
	
	Extra parameters die je hier kunt opgeven:
	
	**** Achtergrond ****
	
	background-color			:#000;
	background					:#F1F1F1 url(../img/bg.gif) repeat-x fixed;
	
*/
#outer {
	text-align				:left;
	border					:1px solid #A42137;
	width					:780px;
	margin					:auto;
}
/* 
	Dit is de hoofd div (boven aan de pagina)
	
	Extra parameters die je hier kunt opgeven:
	
	**** Achtergrond ****
	
	background-color			:#000;
*/
#header {
	height					:100px;
	background-image		:url(../img/top.gif);
	border-bottom			:1px solid #D0D2D4;
}

/* 
	Dit is de hoofdnavigatie div (boven aan de pagina)
	
	Meestal oogt het prettiger als alle link op dezelfde manier omgaan met hoofdletters.
	Dit wordt gedaan met de optie text-transform. Deze kan de volgende waardes hebben:
	- uppercase
	- lowercase
	- capitalize
*/
#navbar {
	height					:20px;
	color					:#FFF;
background				:#14396c;
	font-weight				:bold;
	text-transform			:capitalize;
	padding					:2px 0 0 0px;
		
}
/* 
	Binnen de ul tag in de div "navbar" bevind zich het hoofdmenu.
	Het menu is opgebouwd uit een list. Met andere woorden een lijst van opsommingen. 
	Standaard heeft een lijst allerlei eigenschappen zoals een list style (opsommings tekens) en
	een standaard marge. Deze worden hier allemaal aangepast.
*/
#navbar ul {
	list-style				:none;
	margin					:0;
	padding					:0;
}
/* 
	Elk menu item wordt weer ingesloten in een li tag. 
	De onderlinge afstand tussen de menu items wordt geregeld met padding.
	In dit geval is er aleen een waarde opgegeven voor de linkermarge door middel van padding. 
	De rest staat op 0.
*/
#navbar li{
	margin					:0;
	padding					:0 0 0 12px;
	/* 
		Float geeft aan of items zich naast elkaar kunnen bevinden en zo ja aan welke kant.
		In dit geval zal een volgende li tag rechts vershijnen. 
		Hiervoor zal float op left moeten staan om aan de linkerkant items aan te kunnen laten schuiven.
	*/ 
	float					:left;
}
/* 
	Links in het hoofdmenu in verschillende toestanden
*/
#navbar a:link, 
#navbar a:visited {
	text-decoration 		:none;
	color 					:#FFF;
} 
#navbar a:active,
#navbar a:hover{
	text-decoration 		:none;
	color 					:#FFF;
} 
/* 
	Link naar een pagina in het menu die momenteel actief is 
*/  
#navbar li.active a:link,
#navbar li.active a:visited{
	text-decoration			:underline;
}  
#navbar li.active a:active,
#navbar li.active a:hover{

}
/* 
	Het is mogelijk om ondersheid te maken tussen categorieen en pagina's in het hoofdmenu.
	ZO zou je daar bijvoorbeel een afbeeling voor kunnen gebruiken, maar het is ook mogelijk om 
	andere dingen op te geven zoals:
	
	**** EXTRA OPTIES ****
	
	font					:72%/1.3 Arial, Helvetica, sans-serif;
	font-size				:10px;
	font-weight				:bold;
	color					:#999999;
	
	Pagina in het hoofdmenu 
*/
#navbar li.page{
	/*
	background-image		:url(../img/page.gif);
	background-repeat		:no-repeat;
	background-position		:.1em .4em;
	*/
}
/* 
	Categorie in het hoofdmenu
	
	Zie commentaar pagina.
*/
#navbar li.folder{
	/*
	background-image		:url(../img/folder.gif);
	background-repeat		:no-repeat;
	background-position		:.1em .4em;
	*/
}
/* 
	De bodyblock div omsluit de linkerkolom div en de rechterkolom div. 
	De achtergrondkleur die hier wordt opgegeven is de kleur die zichbaar wordt achter het submenu.
*/
#bodyblock{
	width					:780px;
	background				:#999;
	background-image		:url(../img/submenu.gif);
}
/* 
	Dit is de linkerkolom div (voor het submenu)
*/
#leftcol {
	float					:left;
	width					:165px;
	text-align				:left;
	font-weight				:bold;
	margin					:10px 5px 0px 5px;
}
/* 
	Binnen de ul tag in de div "leftcol" bevind zich het submenu 
*/
#submenu{
	font-weight						:bold;
	float							:none;
	clear							:both;
	margin							:10px 0 0 5px;
	padding							:0 0 20px 0;
}
#google{
	padding							:0 0 0 20px;
}
#submenu ul {
	margin							:0 0 0 0;
	padding							:0 0 0 0;
	list-style						:none;
}
/* 
	Eerste niveau van het submenu 
*/
#submenu li{
	margin							:0;
	padding							:0 0 0 18px;
	list-style						:none;
}
/* 
	Tweede niveau van het submenu 
*/
#submenu li ul li{
	margin							:0;
	padding							:0 0 0 18px;
	font-weight						:normal;
}
#submenu li.active li a:link,
#submenu li.active li a:visited{
	color							:#FFF;
}
/* 
	Links in het submenu 
*/
#submenu a:link, 
#submenu a:visited {
	text-decoration 				:none;
	color 							:#FFF;
} 
/* 
	Links in het submenu met de muis erover 
*/
#submenu a:active,
#submenu a:hover{

}
/* 
	Een pagina in het submenu 
*/ 
#submenu li.page{
	background-image		:url(../img/page.gif);
	background-repeat		:no-repeat;
	background-position		:.1em .4em;
}
/* 
	Een categorie in het submenu 
*/ 
#submenu li.folder{
	background-image		:url(../img/folder.gif);
	background-repeat		:no-repeat;
	background-position		:.1em .4em
}

/* 
	De link naar de pagina die momenteel actief is in het submenu 
*/
#submenu li.active{
	padding					:0 0 0 18px;
	background-image		:url(../img/active.gif);
	background-repeat		:no-repeat;
	background-position		:.1em .4em;
}
#submenu li.active a:link,
#submenu li.active a:visited,
#submenu li.active a:active,
#submenu li.active a:hover{
	color 					:#A42137;
}
/* 
	Het loginscherm verschijnt in deze div 
*/
#extranet{
	padding					:0;
	font-weight				:normal;
	width					:100%
}
/* 
	Het kruimelpad verschijnt in deze div.
	
	Extra parameters die je hier kunt opgeven:
	
	**** Achtergrond (kan dus ook een gif of jpg zijn die repeteert) ****
	
	background					:#000;
	background					:#F1F1F1 url(../img/bg.gif) repeat-x fixed;
	
	Er verschijnen in deze div aleen maar links. Als je deze anders wilt opmaken dan de standaard links kan 
	dat door middel van:
	
	#crumbtrail a:link,
	#crumbtrail a:visited{
		// voor opties zie commetaar bij links in fontsyles.css
	}
	en
	#crumbtrail a:active,
	#crumbtrail a:hover{
		// voor opties zie commetaar bij links in fontsyles.css
	}
*/
#crumbtrail{
	font-weight				:bold;
	padding					:0 0 0px 0;
}

/* 
	Dit is de content div
*/
#content {
	/* 
		De breedte van dit vlak hangt sterk samen met de padding die opgegeven wordt.
		Waneer je bij padding de de marges groter maakt zal je de breedte moeten verkleinen.
	*/
	width					:565px;
	float					:right;
	background				:#FFF;
	text-align				:left;
	padding					:10px 10px 30px 10px;
}
/* 
	Dit is de voet div
	
	Extra parameters die je hier kunt opgeven:
	
	color 						:#FFFFFF;
	
	**** marges ****
	
	margin 						:0;
	padding						:0px;
	
	**** Achtergrond (kan dus ook een gif of jpg zijn die repeteert) ****
	
	background					:#000;
	background					:#F1F1F1 url(../img/bg.gif) repeat-x fixed;
	
	Vaak worden er links in de footer geplaatst. Als je deze anders wilt opmaken dan de standaard links kan 
	dat door middel van:
	
	#footer a:link,
	#footer a:visited{
		// voor opties zie commetaar bij links in fontsyles.css
	}
	en
	#footer a:active,
	#footer a:hover{
		// voor opties zie commetaar bij links in fontsyles.css
	}
*/
#footer{
	clear					:both;
	text-align				:center;
	height					:20px;
	background					:#14396c;
	color					:#FFF;
	padding					:0 10px 0 10px;
}
/* 
	Standaard hebben alle formulier elementen een border. Als deze border wordt gewijzigd door middel van css dan heeft dat bij 
	checkboxes en radio buttons een vreemd effect. Daarom krijgen alle radiobuttons en checkboxes als class "checkbox" 
	zodat deze los van andere formulier input elementen kunnen worden opgemaakt.
*/
.checkbox {
	border					:0px;
	width					:auto;
}
/* 
	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{
	text-align				:left;
	margin					:10px;
	color					:#000;
	background				:#FFF;
}
/* 
	Onderin de popup verschijnt een link om een venster te kunnen sluiten. 
	Deze bevindt zich in een div met de id popupClose. 
	In dit geval is aangegeven dat de tekst gecentreerd moet worden.
*/
#popupClose{
	text-align				:center;
}
/* Een formulier heeft van zichzelf een vaste marge. Deze wordt hier overschreven. */
form{
	margin					:0px;
}
input ,select, textarea {
	font-family				:Verdana, Arial, Helvetica, sans-serif;
	font-size				:95%;
	border					:1px solid #666666;
}
textarea{
	width					:99%;
}
input.text{
	width					:99%;
	text-transform			:none;
}
select.text{
	width					:100%;
}