/*	Almexx CSS 

	Created by: Geert Hoekzema

	Date:27-09-07

	Email:geert@fiendo.nl

*/



/*	De body en de html worden 100% hoog en breed gemaakt.

	Dit is een soort van hack om ervoor te zorgen dat niet 

	alles scrollt. De volgende divs veranderen van positie 

	tijdens het scrollen.

	- h1#tekstHeader

	- div#tekst

	De rest blijft op dezelfde positie.

 */

html, body {

	width:100%;

	height:100%;

	padding:0px;

	margin:0px;

	overflow:hidden;

	}

body {

	background-color:#ededed;

	background-image:url("images/background.png");

	background-position:center center;

	background-repeat:repeat-y;

	

	font-family:Arial, "Verdana";

	font-size:11px;

	color:#333333;

	

	}



/* ---------- HEADER -------- */

/*	Geeft de header van de pagina weer  */





h1#header {

	position:absolute;

	z-index:100;

	margin:0px;

	padding:0px;

	width:976px;

	height:210px;

	left:50%;

	margin-left:-488px;

	

	background-image:url("images/header.png");

	background-position:center center;

	background-repeat:no-repeat;

	

	}

	

/* ---------- LEFT -------- */

/*	Geeft het linker gedeelte van de website weer.

	Fungeert als container voor het menu en de contact informatie 

	heeft een lagere z-index als de header, ligt er dus onder. 

	in deze div bevinden zich:

	- div#menu

	- div#contact

*/

		

div#left {

	position:absolute;

	z-index:80;

	margin:0px;

	padding:0px;

	width:230px;

	min-height:100%;

	left:50%;

	margin-left:-403px;

	background-color:#e7e7e7;

	border-right:1px solid #d7b4b5;
	border-bottom:1px solid #d7b4b5;

}	

	

/* 	Positioneert het menu in het linker gedeelte

	font-size van het menu wordt groter gemaakt

	line-height wordt vergroot

*/



ul#mainMenu {

	padding:0px;

	margin:0px;

	margin-top:260px;

	text-align:right;

	font-size:16px;

	line-height:22px;

	list-style-type:none;

	font-weight:bold;

}

	

ul#mainMenu li {

	height:25px;

}	



/*  Het a-element in het menu.

	De border aan de rechterkant wordt hier gedeclareerd

	in dezelfde kleur als de achtergrond. Dit voorkomt dat

	bij een hover de boel gaat verschuiven

*/



ul#mainMenu a {

	text-decoration:none;

	border-right:5px solid #e7e7e7;

	padding-right:10px;

	height:25px;

	}

	

/*  Als er over een menu item wordt gehoverd dan wordt de border

	aan de rechterkant rood

*/

ul#mainMenu a:hover {

	border-right:5px solid #a71c20;

}



ul#demoMenu {

	

	line-height:20px;

	font-size:15px;

	list-style-type:none;

	padding:0px;

	margin:0px;

	

}

ul#demoMenu li.menuHeader {

	font-weight:bold;

	font-size:16px;

	margin-left:5px;

	margin-top:30px;

	color:#a71c20;

	}

	

ul#demoMenu li a {

	

	text-decoration:none;

	border-left:5px solid #e7e7e7;

	padding-left:10px;

	}

	

/*  Als er over een menu item wordt gehoverd dan wordt de border

	aan de rechterkant rood

*/

ul#demoMenu a:hover {

	border-left:5px solid #a71c20;

}

	



/* ---------- CONTENT -------- */



/*	De content div wordt 100% hoog en breed gemaakt. In deze div 

	komt alle content die moet scrollen. Dit zijn

	- h1#tekstHeader

	- div#tekst

*/



div#content {

	position:absolute;

	left:0px;

	top:0px;

	width:100%;

	height:100%;

	overflow-y:scroll;

}



div#content h1.tekstHeader {

	position:absolute;

	margin:0px;

	padding:0px;

	left:50%;

	top:260px;

	margin-left:-150px;

	color:#a71c20;;

	font-size:20px;

	}

	

/* 	div met de tekst erin. Aan de linkerkant komt een border te staan

	en een kleine padding. Ook wordt de line-height wat groter gemaakt

	voor een wat ruimtelijker effect 

*/

div#content div#tekst {

	position:absolute;

	left:50%;

	top:290px;

	margin-left:-150px;

	width:540px;

	height:auto;

	border-left:1px solid #cccccc;

	padding-left:10px;

	line-height:16px;



	}

/*	Blocker zorgt ervoor dat de tekst aan de onderkant 

	niet helemaal tegen de bodem aanstaat. 

	Om de grijze lijn te verbergen is hij iets naar links gezet

	en heeft een witte achtergrond. 

*/

div#blocker {

	width:200px;

	height:100px;

	margin-left:-13px;

	background-color:#FFFFFF;

	}

	

/* ---------- LINKS -------- */



/*	Algemene opmaak voor de links. Hover staat als laatste

	Zodat die altijd blijft werken, kan dus niet eerder. 

*/

a {

	color:#333333;

	}

a:visited {

	color:#333333;

	}

a:active {

	color:#333333;

	}

a:hover {

	color:#a71c20;

	}