@charset "UTF-8";
/* CSS Document */


#menuBox, #child_menu {
	padding: 0px 0px 0px 20px;
	z-index: 2;
}

/* SKRIFTTYPE - den giver sig selv*/
#menuBox li, #menuBox li a, #menuBox li a:hover {
	font-size: 11px;
	text-transform:uppercase;
	color: #fff;
	text-decoration: none;
	letter-spacing: 2px;

	white-space:nowrap; /* Fortæller at et teksten i et menupunkt ikke må ombrydes til 2 linjer */
}

/* MENU-MAGIEN :-) */


#menuBox { /* Overbyd eventuelle browser-standarder mht. padding/margin, og sørg for at menuen åbner foran alt andet */
	z-index: 20;
}

#menuBox ul { /* Overbyd igen standarder og fjern punkter fra punktopstilling */
	list-style: none;
	height: 30px;
}

#menuBox ul li {
	position: relative; /* LI-elementer positioneres relativt i forhold til deres UL-parent-element */

	float: left; /* Sørger for at punkterne i over-menuen er ved siden af hinanden i stedet for over/under */
	cursor: pointer; /* Sætter cursoren til pegende finger - i IE hedder den cursor: hand, men det er forkert */
	margin: 0px 5px;
}
#menuBox ul li:hover > a, #menuBox > ul > li > a.active {
	color: #fff;
	background-color: #808080; /* Skift baggrundsfarve ved mouseover */
}

#menuBox ul li a {
	float: left; /* Sørger for, at punkterne i overmenuen er ved siden af hinanden... Vi reparerer det for undermenuerne senere */
	display:block;	/* Sørger for A-elementet opfører sig som et block-element i stedet for et inline-element.
	Hvis det ikke giver mening: Til sammenligning er en DIV block, mens SPAN er inline. BLOCK tager en hel linje 
	med mindre andet er specificeret, og kan nogle flere ting, mens INLINE kan sættes midt i tekst*/
	line-height: 30px; /* Sætter man line-height til blokkens højde, vil teksten være centreret vertikalt. Bedre end at bøvle med vertical-align - den gør aldrig det man regner med */
	height: 30px;

	padding: 0px 10px;
}

#menuBox ul ul { /* Her begynder vi at ændre ting for undermenuerne i forhold til overmenuen. Vi beder om alle UL'er, som er inde i en anden UL i #cssmenu = det må være en undermenu*/
	display: none; /* Undermenuer er som standard skjult */

	position: absolute; /* Absolute positionering er i forhold til parent-elementet øverste venstre hjørne, og ikke i forhold til skærmens hjørne som jeg før troede */
	left: 0px;
	top: 30px; /* Det vil altså sige, at undermenuen bliver placeret 15 px under over-menupunktets øverste venstre hjørne */
	padding: 0px 20px 30px 20px; /* 2px mellemrum over undermenuen, og 20px resten af vejen rundt. For at man kan pege lidt uden for menuen uden at den lukker  */
	margin: 0px 0px 0px -20px; /* Ovenstående ville normalt få menuen til at rykke 20px mod højre og 2px nedaf. De 2 nedaf er OK, men de 20 til højre kompenserer vi for her */
	height:auto;

	background-color: transparent;
	background-image: url(../pics/transparent1x1.gif); /* IE fix */
	background-repeat:repeat;
}
#menuBox ul ul li:hover > a {
	color: #000;
	background-color: #c1c1c1; /* Skift baggrundsfarve ved mouseover */
}


#menuBox ul ul li {
	display: block;
	clear:left;/* Fix til Safari, så undermenupunkter ikke står ved siden af hinanden*/
	width: 250px; /* Her sættes bredden af punkter i undermenuerne (igen påvirkes kun undermenuer pga UL UL, da vi ikke vil have fast bredde på overmenuerne)*/
	background-color: #808080;
	margin: 0;
	padding: 0;
}

#menuBox ul ul li a {
	float: none;  /* Undermenupunkter skal IKKE være ved siden af hinanden, som vi ellers definerede tidligere, så her modsiger vi lige os selv (påvirker kun undermenuer de skal være inde i 2 UL'er) */
	height: 30px;
	line-height: 30px;	 /* Vi ændrer også lige højden af menupunkterne her, det så dumt ud med 15px*/
}

#menuBox ul ul ul /* Nogle få ændringer for under-undermenuer, som skal være ved siden forrige menu i stedet for under*/
{
	top:0px; /* Position er allerede absolute fra UL UL (som også tæller her, da under-undermenuer også tæller som undermenuer) Højden skal være uændret, så undermenuen kommer ud for menupunktet*/
	left:100%; /* Men undermenuen flyttes 100% af den overliggende LI til højre. Og da under-undermenuen er præcis samme bredde som undermenuen, så er det meget passende :-)  */

	padding: 0px 20px 20px 2px; /* Padding skal også lige ændres lidt. Intet område over, og kun 2 px til venstre for menuen */
	margin: 0px 0px 0px 0px;
}

/* Og her kommer så det, som sørger for at åbne og lukke menuen. Først skjuler vi alle menuer, som er 2 niveauer under den menu vi holder musen på */
div#menuBox li:hover ul ul,
div#menuBox li li:hover ul ul,
div#menuBox li li li:hover ul ul,
div#menuBox li li li li:hover ul ul,
div#menuBox li li li li li:hover ul ul,
div#menuBox li li li li li li:hover ul ul,
div#menuBox li li li li li li li:hover ul ul,
div#menuBox li li li li li li li li:hover ul ul
{display:none;}

/* Og så viser vi alle menuer, som kun er 1 niveau under den menu vi holder musen på. Dette skal stå til sidst, da det vil overbyde den første kommando */
div#menuBox li:hover ul,
div#menuBox li li:hover ul,
div#menuBox li li li:hover ul,
div#menuBox li li li li:hover ul,
div#menuBox li li li li li:hover ul,
div#menuBox li li li li li li:hover ul,
div#menuBox li li li li li li li:hover ul,
div#menuBox li li li li li li li li:hover ul
{display:block;}