@charset "utf-8";
/* CSS Document */
.FC #container {
	width: 100%; /*relative houdt in dat alle 'kinderen' van deze container (child elements) --mits ze absoluut gepositioneerd zijn-- zich gaan gedragen naar de randen van het 'ouder' element (parent element). Dat stelt je in staat de footer onder de content te krijgen omdat de onderste rand van #container het referentiepunt is voor de footer.*/
	min-height: 100%; /*De min-height geeft de minimale hoogte aan. Het element mag wel hoger zijn, maar niet lager dan de gegeven waarde. Let op: min-height wordt niet ondersteund door IE daarom wordt er later nog eens de waarde in IEtaal vast gezet je zal dit manueel moeten toevoegen aan het styleblad*/
	_height: 100%; /*eigenschappen met een underscore zijn voor (vanaf) IE6. Let op: je zal dit manueel moeten toevoegen aan het styleblad*/
	background-color: #000000;/*bijkomende opties zijn achtergrondkleur, achtergrond afbeelding, ...*/
	margin-left:0px;/*margin: 0 auto; wordt vervangen door een negatieve waarde die de helft is van de breedte van de container*/
	font-family: "Comic Sans MS";
	font-size: 16px;
	color: #FFFFFF;
}
/* Dit heeft als resultaat een website met 2 kolommen opgebouwd uit nagenoeg semantische HTML die ook nog eens in alle browsers werkt! */
/* Noodzakelijke toevoegingen in de css-code. Typ de volgende regels erbij: */
* { 
margin: 0px;
padding: 0px;
} 

/*Opmerking: het sterretje (*) betekent "alle elementen", margin en padding staan voor afstanden. Zoals je hieruit op kunt maken zet je met deze regels alle afstanden op 0 pixels. Dat is nodig voor dezelfde weergave in alle browsers. Als je deze regels weg zou laten zou internet explorer bijvoorbeeld 2 pixels ruimte nemen, terwijl firefox 5 pixels ruimte neemt. Nu weten alle browsers wat ze moeten doen, geen ruimte toekennen aan geen enkel element.*/ 

html,body {
height: 100%; /* HEEL BELANGRIJK, de pagina vult nu het hele browservenster.*/
}
/*Opmerking 1: je definieert de hoogte voor zowel de html als de body. Deze wordt op 100% gesteld, zodat de hele viewport wordt bedekt in plaats van enkel het gebied waar de inhoud staat.*/ 

/*Opmerking 2: de body is de gehele pagina die wordt weergegeven. Als je hieraan eigenschappen meegeeft, worden deze door de hele pagina over genomen. Bijkomende elementen die aan de body kunnen toegewezen worden zijn: achtergrondkleur, lettertype en afmeting van het lettertype...*/




#header {
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height: 200px;
	background-image: url(foto/head_metrop.jpg);
	background-repeat: no-repeat;
	z-index:100;
	background-position: right center;
	background-color: #000000;
}



#zijkant {
	position:fixed;
	top:0;
	left:0;
	width: 160px;
	height:600px;
	z-index:0;
	padding-top: 205px;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}



#main {
	left: 0;
	top: 0;
	padding-top: 190px;
	padding-left: 20px;
	margin-top: 50px;
	margin-right: 60px;
	margin-left: 190px;
}




#footer {
	width: 900px; /*bij een absolute positioning krijgt de container een Width en Height*/
	height: 20px;
	clear: both;
	background-color: #000000;
}

.clear {
clear: both;
}


/* IE only */
* html container{
overflow: hidden;
padding: 100px 200px 0 0;
}

* html #header{
position: absolute;
}

* html #zijkant{
position: absolute;
}

* html #main{
height: 100%;
overflow: auto;
padding: 10px 20px 0 20px;
} 
/* Ik zet dus voor iedere declaratie: * html Alles wat dan in die declaratie volgt wordt alleen door IE opgepikt, andere browsers negeren het. */
/* Er zijn 2 belangrijke zaken die je IE moet vertellen zodat hij het begrijpt. Ten eerste begrijpt IE de waarde 'fixed' niet voor de declaratie 'position'. Dus maken we daar voor IE 'absolute' van.
Verder moeten we de scrollbalk van de 'body' uitzetten (overflow: hidden), om vervolgens de scrollbalk van de box 'content' weer aan te zetten (overflow: auto). */




#nav, #nav ul { /* Dit is de éérste declaratie (#nav, #nav ul), hier worden alle margins en paddings op 0 gezet en de list style op none (weg met die aanwijspunten enz). Ik heb in de html (in de body) de eerste ul de id 'nav' gegeven en die spreek ik vanuit m'n css aan. Daarnaast maak ik gebruik van het feit dat de geneste ul een kind is van de ul met de id 'nav'. Op die manier pak ik in één declaratie alle ul's. */
	padding: 0;
	margin: 0;
	list-style: none;
} /* OK */

#nav li { /* In de tweede declaratie (#nav li) bedoel ik alle li's die een kind zijn van 'nav'. Ik laat ze links floaten (zweven) waardoor de hoofdnavigatie op 1 lijn komt te staan. Ditzelfde zou gebeuren met de subnavigatie (de geneste li's zijn immers ook kinderen van 'nav') ware het niet dat alle li's een breedte hebben gekregen van 9em.
De li van de hoofdnavigatie is 120px breed. De geneste li's van de subnavigatie zitten als het ware gevangen in die li van de hoofdnavigatie. En die geneste li's zijn dus ook 120px breed. Er is voor die geneste li's dus geen ruimte om naast elkaar te gaan staan, ook al zouden ze dat wel willen. Ze worden onder elkaar gedwongen. 
Hier vul je de achtergrondkleur/image in van het menu */
	float: left;
	width: auto;
	background-repeat: repeat;
	background-image: url(foto/bg.gif);
	text-align: center;
	border-right-width: 1px;
	border-left-width: 1px;
	border-right-style: solid;
	border-left-style: solid;
	border-right-color: #FF6600;
	border-left-color: #FFFFFF;
	height: 26px;
	font-weight: bold;
	
}

#nav ul { /* Als laatste declaratie geef ik de geneste ul nog een absolute positionering, zodat ik deze dadelijk makkelijk kan manipuleren. En nog een keer die 120px breed om de boel goed dicht te timmeren. 
Pas als een bezoeker met z'n cursor over een van de hoofdnavigatie items gaat mag die subnavigatie zichtbaar worden.
Dat gaan we doen met een bijzonder truukje. We gaan die subnavigatie een negatief linker coördinaat geven waarmee we zeker weten dat daarmee die hele subnavigatie van de pagina verdwijnt. Bijvoorbeeld -1000px: */
	position: absolute;
	width: 120px;
	left: -1000px;
	height: 26px;
	
}

#nav li:hover ul, #nav li.ie_does_hover ul { /* li hover alleen zorgt dat de subnavigatie terugkomt. Je krijgt dan in je stylesheet dit: li:hover ul,. Dit werkt niet bij IE. Maar als je dan #nav li.ie_does_hover ul  toevoegt, dan werkt het ook in IE */
	left: auto;
	border: 1px solid #000000;
}

#nav a { /* nav a is de cellenopbouw van de dropdown o.a. de tekstkleur, tekstfont, tekstgrootte enz. */
	display:block;
	text-decoration: none;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #000000;
	margin-top: 5px;
	margin-right: 10px;
	margin-bottom: 3px;
	margin-left: 10px;
} 


/* javascript gedeelte */
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>


.style1 {
	font-size: 12px;
	color: #FF6600;
}
.style3 {font-size: 14px; color: #FF6600; }
.style5 {        font-size: 12px
}
.style6 {
	font-size: 18px;
	color: #FF6600;
}
.style7 {font-size: 9px}

a:link{
background-color: #000000;
color: #000000;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
 
a:visited{
background-color: #000000;
color: ##000000;
text-decoration: never underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
 
a:hover{
background-color: #B30700;
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
 
a:active{
background-color: #000000;
color: #000000;
text-decoration: never underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}