ul.Menu, ul.Menu ul {
	border-top: {{$BORDER}} 1px solid;
	border-left: {{$BORDER}} 1px solid;
	border-right: {{$BORDER}} 1px solid;
	border-bottom: {{$BORDER}} 1px solid;
	background: {{$BACKGROUND}};
	cursor: default;
	margin: 0;
	padding: .1em 0;
}

ul.Menu {
	float: left; /* For Firefox */
	width: 100%;
}

ul.Menu li {
	margin: .1em;
	padding: 0 1em;
	position: relative;
	color: {{$TEXT}};
	float: left;
	list-style-type: none;
	white-space: nowrap;
}

ul.Menu li > ul {
	min-width: 10em;
	display: none;
	position: absolute;
	top: 1.2em;
	left: 0em;
	z-index: 9999;
}

ul.Menu li > ul li ul {
	top: .1em;
	left: 90%;
}

/* This causes all submenus to be displayed at once when the top menu is selected
ul.Menu li ul li {
	display: block;
}
*/

ul.Menu li:hover, ul.Menu li.CSStoHighlight {
	color: {{$SELECTED_TEXT}};
	background: {{$SELECTED_TEXT_BG}};
}

ul.Menu li.MenuSeparator, ul.Menu li.MenuSeparator:hover {
	background: lightgray;
	border-top: gray 1px solid;
	margin: 0 .5em
}

ul.Menu ul.CSStoShow {	/* must not be combined with the next rule or IE gets confused */
  display: block;		/* specially to go with the className changes in the behaviour file */
}

ul.Menu li:hover > ul {	/* one of the most important declarations - the browser must detect hovering over arbitrary elements
						   the > targets only the child ul, not any child uls of that child ul */
  display: block;		/* makes the child block visible - one of the most important declarations */
}

/* and some link styles */
ul.Menu li a { color: #fff; display: block; width: 100%; text-decoration: underline; }
ul.Menu li a:hover, ul.Menu li a.CSStoHighLink { color: #000; }
ul.Menu li:hover > a { color: #000; } /* supports links in branch headings - must not be display: block; */

/* credits: Brother Cake */


/* Optional hacks for IE6 */

* html ul.Menu li ul {
	width: 10em; /* IE does not understand min-width */
	display: none;
	position: absolute;
	top: 1.2em;
	left: 0em;
	z-index: 9999;
}

* html ul.Menu li ul li {
	width: 10em;
}

* html ul.Menu li ul li ul {
	top: .1em;
	left: 90%;
}

/* Simulate :hover selector for IE6 */

ul.Menu li {
	_behavior:expression(
		(function(el){
			if (typeof(menuBehavior_onMouseOver) == 'undefined') {
				getMyULChild = function(elem) {
					for (var x = 0; elem.childNodes[x]; x++) {
						if (elem.childNodes[x].tagName == 'UL') {
							return elem.childNodes[x];
						}
					}
					return null;
				};
				menuBehavior_onMouseOver = function(el) {
					var sClass = this.className;
					this.__defaultClassName = sClass;
					this.className = sClass + ' CSStoHighlight';
					ul = getMyULChild(this);
					if (ul) {
						sClass = ul.className;
						ul.__defaultClassName = sClass;
						ul.className = sClass + ' CSStoShow';
					}
				};
				menuBehavior_onMouseOut = function(el) {
					this.className = this.__defaultClassName;
					this.__defaultClassName = undefined;
					ul = getMyULChild(this);
					if (ul) {
						ul.className = ul.__defaultClassName;
						ul.__defaultClassName = undefined;
					}
				};
			}
			el.runtimeStyle.behavior = 'none';
			el.onmouseover = menuBehavior_onMouseOver;
			el.onmouseout = menuBehavior_onMouseOut;
		})(this));
}