/* CSS Document */

BODY {
/*	behavior: url("csshover.htc"); */
	BACKGROUND-COLOR: #FFFFFF;
	COLOR: #000000;
	font-size: 10pt;
	font-family: Century Gothic, Verdana, Arial;
	scrollbar-base-color: #254A8F; 
	scrollbar-arrow-color: #FFFFFF;
	scrollbar-DarkShadow-Color: #000000;
	scrollbar-Track-Color: #C1D0EE;
	TEXT-DECORATION: none;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
}

UL { list-style-image: url(images/xxx.gif); }

a:link       { font-family: Century Gothic, Verdana, Arial; font-size: 10pt; color: #330000; text-decoration: none; }
a:visited    { font-family: Century Gothic, Verdana, Arial; font-size: 10pt; color: #333300; text-decoration: none; }
a:hover      { font-family: Century Gothic, Verdana, Arial; font-size: 10pt; color: #003300; text-decoration: none; }
a:active     { font-family: Century Gothic, Verdana, Arial; font-size: 10pt; color: #000033; text-decoration: none; }
p            { font-family: Century Gothic, Verdana, Arial; font-size: 10pt; color: #000000; }
td           { font-family: Century Gothic, Verdana, Arial; font-size: 10pt; color: #000000; }

#container {
	position: absolute;
	width: 940px;
	top: 0px;
	left: 50%;
	margin-left: -470px;
	height: 100%;
	z-index: 98;
	text-align: center;
}

#menubox {
	position: absolute;
	width: 200px;
	top: 200px;
	left: 40px;
	z-index: 100;
}

#content {
	position: absolute;
	width: 670px;
	top: 180px;
	left: 250px;
	height: 300px;
	z-index: 99;
}


#nav, #nav ul, #nav ul ul{
padding: 0;
margin: 0;
list-style: none;
background: url(none.gif) repeat 0 0;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 50%;
}

#nav{
width: 135px;
}

#nav li{
	width: 135px;
	position: relative;
}

#nav ul{
position: absolute;
width: 100px;
left: -1000px;
margin: -22px 0 0 95px;
font-size: 100%;
}

* html #nav ul{
margin: -23px 0 0 95px;
}

#nav li li{
width: 135px;
}

#nav ul ul{
	width: 140px;
	margin: -22px 0 0 100px;
	font-size: 100%;
}

* html #nav ul ul{
margin: -23px 0 0 100px;
}

#nav li li li{
width: 140px;
}

#nav li:hover ul, #nav li.ie_does_hover ul{
left: auto;
}

#nav li:hover ul ul, #nav li.ie_does_hover ul ul{
left: -1000px;
}

#nav ul li:hover ul, #nav ul li.ie_does_hover ul{
left: auto;
}

#nav a {
display: block;
text-decoration: none;
padding: 2px 4px 3px 4px;
margin: 1px;
}

#nav a:link, #nav a:visited{
	background: #FFFFFF;
	color: #494980;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 10px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #254A8F;
	border-right-color: #254A8F;
	border-bottom-color: #254A8F;
	border-left-color: #254A8F;
}

#nav a:hover, #nav a:active{
	background: #FFFFFF;
	color: #BF052A;
	border-top-width: 1px;
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-left-width: 10px;
	border-top-style: solid;
	border-right-style: solid;
	border-bottom-style: solid;
	border-left-style: solid;
	border-top-color: #254A8F;
	border-right-color: #254A8F;
	border-bottom-color: #254A8F;
	border-left-color: #BF052A;
} 


/*
Eerst specifiëren we de opmaak voor de layer "menu", hier bepalen we enkel de positie waar het menu moet komen te staan en hoeveel ruimte er desnoods rond het menu moet komen tussen andere elementen.
Dit doen we als volgt :
*/
#menu {
       margin: 5px; /* hiermee zorg ik dus voor een witruimte van 5px rond het menu */
}

/*
De tekst in je menu is altijd een link, dus gaan we deze opmaken. Ik ga hier gewoon de links een zwarte kleur geven en ervoor zorgen dat ze niet onderlijnt zijn (dat is maar lelijk)*/
#menu a {
       color: #000000;
       text-decoration: none;
}

/*
Natuurlijk willen we de links ook een ander kleurtje geven als je erop gaat staan, dit maken we duidelijk door :hover achter de a te zetten. Zo weet de browser dat deze opmaak bedoelt is voor als we met onze muis over de link gaan.
*/
#menu a:hover {
       color: #0000CC;
}

/*
Omdat ons menu een lijst is, gaan we dus deze lijst opmaken.
De list-style: none; zorgt ervoor dat er geen opsommingssymbooltjes getoond worden.
Met de border maak ik een kader rond het hele menu die 1 pixel breed is, die uit een volle lijn bestaat en een grijze kleur heeft.
Met de background-color geef ik het menu een blauwe kleur.
display: block; zorgt ervoor dat het gehele menu een mooi blok is, ook al is de tekst overal
niet even lang .

Padding en margin mag je naar eigen wens instellen.
*/
#menu ul {
       width: 135px; /* breedte van het menu mag je zelf kiezen, als je tekst er maar inpast */

       margin: 0;
       padding: 0;

       list-style: none;
       border: 1px solid #666666;
       background-color: #DADAFE;

       display: block;
}

/*
Eenmaal de lijst opgemaakt, gaan we nu de lijst-items opmaken.
Door position op relative te zetten, maak ik een referentiepunt van elk lijst-item. Hierdoor zal straks mijn submenu zich positioneren ten opzicht van zijn lijst-item.
*/
#menu li {
       position: relative;
       padding: 4px 5px;
       margin: 0;
}

/*
Nu gaan we ons submenu opmaken  Deze duiden we aan met "ul ul" want ons submenu is een 2e lijst binnnen onze hoofdlijst, dus duiden we aan dat we onze 2e laag ul willen opmaken.
Door hier de position op absolute te zetten EN doordat de position op relative staat bij de lijst-items, gaat nu het submenu zich positioneren ten opzichte van het lijst-item waarin het zich bevindt.
Met left, en top bepalen we dan deze positie. We willen natuurlijk dat ons submenu zich naast het menu plaats, dit doen we door left op 100% te zetten.Om er dan ook nog voor te zorgen dat het submenu zich op dezelfde hoogte als zijn lijst-item plaatst zetten we top op 0.

De z-index bepaalt eigenlijk de plaats van items bij een overlapping. We geven het submenu een grote z-index zodat als het submenu een ander item overlapt, dat het zich dan toch zeker bovenop bevind, en niet achter het item geschoven wordt.

Het menu mag natuurlijk nu nog niet getoond worden, enkel als je over de link gaat met je muis, daarom zetten we display op none.
*/
#menu ul ul {
       position: absolute;
       left: 100%;
       top: 0;

       z-index: 100;
       display: none;
}

/*
Het enige wat we nog moeten doen is het submenu laten zien als je over de link gaat. Die CSS-code ziet er als volgt uit :
Kijk eerst naar het gedeelte voor de komma. Hier zet ik dus dat als je met je muis
over een lijst-item gaat (= li:hover) daar de ul van (= 2e laag) die laat je zien (= display: block).
Wat achter de komma staat is alleen noodzakelijk als je ook nog een submenu in een submenu wil hebben (= 3e laag). Daar staat dus in feit dat als je over een lijst-element gaat met de muis, dat in een lijstelement ligt waarover je met de muis bent gegaan (= li:hover li:hover), daar de lijst (= ul), die laat je zien.
*/
#menu li:hover ul, #menu li:hover li:hover ul {
       display: block;
}

/*
Het volgende stukje code is enkel als je met een 3e laag werkt.
Hier zegt ik dat als je met je muis over een 1e laags lijst-element gaat, dat je dan een 3e laagsmenu niet moet laten zien.
*/
#menu li:hover ul ul{
       display: none;
}
/*

*/



/*
#menu2 {
 	position: absolute;
	width: 180px;
	top: 200px;
	left: 50%;
	margin-left: -425px;
	font-family: verdana, Helvetica, Arial, sans-serif;
	font-size: 14px;
	font-weight: normal;
	width: 12em;
	padding: 0;
	margin-bottom: 1em;
	background-color: #ffffff;
	color: #333;
	transparancy: 50%;
}

#menu2 li {
       position: relative;

       padding: 4px 5px;
       margin: 0;
}

#menu2 ul {
 list-style: none;
 margin: 0;
 padding: 0;
}

#menu2 ul li {
 margin: 10;
 border-top: 1px solid #003;
}

#menu2 ul li a {
 display: block;
 padding: 2px 2px 2px 4px;
 border-left: 10px solid #369;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #ffffff;
 color: #000;
 text-decoration: none;
 width: 100%;
	transparancy: 50%;
}

#menu2 ul li a:hover {
 border-left: 10px solid #036;
 border-right: 1px solid #69c;
 border-bottom: 1px solid #369;
 background-color: #69f;
 color: #fff;
}

#menu2 li:hover ul, #menu li:hover li:hover ul {
       display: block;
}

#menu2 ul ul {
       position: absolute;
       left: 100%;
       top: 0;

       z-index: 100;
       display: none;
}
*/