/**
 * Styles for the dropdown menu.
 *
 * This file is include on the page through the menu/dropdown.tpl file.
 */

/*
The first step is to remove the indents and bullets from
the unordered list and define the width of our menu items.
*/
.dropdown UL {
	margin: 0;
	padding: 0;
	list-style: none;
}
/*
Next, we need to position our list items. Fortunately, these 
will stack vertically by default, which is what we require. 
However, we must set the position as relative, because we 
will need to position the sub-menus absolutely within them.
*/
.dropdown LI {
	position: relative;
}
/*
Next step is the sub-menus. We want each sub-menu to appear to 
the right of its parent menu item when that item is hovered over.
*/
.dropdown UL UL {
	position: absolute;
	display: none;
}
/*
Styles for Menu Items
So now we have the framework in place, but it’s still 
looking a bit plain. Let’s style those links.
*/
.dropdown A {
	display: block;
	background: #000; /* IE6 Bug */
	text-decoration: none;
}
/*
So things are looking a little better, although users of 
Internet Explorer for Windows may disagree. Unfortunately, 
IE Win interprets the line breaks between our nicely 
formatted HTML list items as white space, so you will 
notice that the menu items don’t stack up neatly in that 
browser. However, there is a way around IE’s bugs:
*/
/* Fix IE. Hide from IE Mac \*/
* HTML .dropdown UL LI { float: left; height: 1%; }
* HTML .dropdown UL LI A { height: 1%; }
/* End */
/*
Now the fun bit. We need to make those sub-menus appear
when we hover over the menu items.
*/
.dropdown LI:hover > UL { display: block; } /* The magic */
/*
OK, OK, so that darn IE/Win has to ruin everything and 
not do as it’s told. IE/Win only allows the :hover 
pseudo-class to be applied to a link — so the li:hover 
that makes the sub-menus appear means nothing to IE.
A tiny jot of JavaScript is required to kick IE back 
into action is included in the html file
*/
.dropdown LI.over UL.level2 { display: block; } /* The magic */
.dropdown UL.level2 LI.over UL.level3 { display: block; } /* The magic */
.dropdown UL.level3 LI.over UL.level4 { display: block; } /* The magic */
.dropdown UL.level4 LI.over UL.level5 { display: block; } /* The magic */

/* Horizontal 1 level */
.dropdown UL.level1 {
}
.dropdown LI.level1 {
	float: left;
	white-space: nowrap;
}
/* Fix IE. Hide from IE Mac \*/
* HTML .dropdown LI.level1 { width: 1%; }
/* End */
.dropdown UL.level2 {
	top: 26px;
}
/**/



/*

DESIGN STYLES

*/
.dropdown A {
	color: white;
	line-height: 26px;
	padding: 0px 20px 0px 20px;
	background-color: #213649;
}
.dropdown A.level1 {
	font-weight: bold;
}
.dropdown A:hover {
	color: white;
	background-color: #ED4800;
}
.dropdown LI.level1 {
	border-right: 1px solid white;	
}
.dropdown UL UL {
	width: 260px;
}
.dropdown UL.level2 UL {
	left: 260px;
	top: -1px;
}

/*
.dropdown A {
	font-weight: normal;
	font-size: 12px;
	padding: 7px 20px 7px 20px;
	color: white;
}
.dropdown A.level1 {
	padding: 7px 10px 7px 10px;
	font-weight: bold;
}
.dropdown A.level1:hover {
	color: white;
}
.dropdown LI.level1 {
	border-left: 1px solid #ccc;	
}
.dropdown LI.level1.first {
	border-left: none;
}
.dropdown UL UL {
	border: 1px solid #ccc;
	width: 150px;
}
.dropdown UL.level2 A:hover {
	color: black;
	background: #ccc;
	font-weight: bold;
}
.dropdown UL.level2 {
	left: 10px;
}
.dropdown .first UL.level2 {
	left: -1px;
}
.dropdown UL UL A {
	padding: 2px 10px 2px 10px;
}
.dropdown UL.level2 UL {
	width: 150px;
}
.dropdown UL.level2 UL {
	left: 150px;
	top: -1px;
}

*/