/* horizontal layout */
#menu ul {
	margin:0;
}

#menu li {
	float:left;
	position:relative;
}

#menu li a {
	display:block;
	padding:0.25em 0.5em;
}

/* using a IE 5.x filter (tantek.com/CSS/Examples/) to work around the wrong box model of IE 5.x */
@media tty {
	i{content:"\";/*" "*/}} #menu li a { display:inline; height:2em; } /*";}
}/* */

#menu ul ul {
	position:absolute;
	top:2em;
	left:0;
	height:2em;
}

#menu table { /* table style for IE < IE7 */
	position:absolute;
	top:0;
	left:0;
	width:0;
	height:0;
	margin:0;
	font-size:100%; /* necessary for IE < IE6 */
	border:none;
}

#menu table td {
	padding:0;
}

/* default styling */
#menu a {
	text-decoration:none;
}

#menu ul ul { /* hide all layers except first layer */
	visibility:hidden;
}

#menu ul a {
	color:black;
	border-left:dotted 1px black;
}

#menu ul ul a {
	color:#888888;
	border-left:dotted 1px #888888;
}

/* first layer */
#menu ul a:hover {
	color:#CC3333;
}

#menu ul a.navpath:hover {
	border-left:solid 1px #CC3333;
}

/* highlight when hovering immediate navigation path list item */
/* the following two rules are ignored by IE < IE7. this is ok, because in IE < IE7 we wrap everything in "a" tags and the two rules above are applied. */
#menu ul li:hover > a { 
	color:#CC3333;
}

#menu ul li:hover > a.navpath {
	border-left:solid 1px #CC3333;
}

/* second layer */
#menu ul ul a:hover {
	color:#CC3333;
}

#menu ul ul a.navpath:hover {
	border-left:solid 1px #CC3333;
}

#menu ul :hover ul { /* should be "#menu ul li:hover ul", but IE < IE7 does not support this */
	visibility:visible;
}

/* third layer */
#menu ul ul ul a:hover {
	color:#CC3333;
}

#menu ul ul ul a.navpath:hover {
	border-left:solid 1px #CC3333;
}

#menu ul :hover ul ul { /* should be "#menu ul li:hover ul ul", but IE < IE7 does not support this */
	visibility:hidden;
}

#menu ul ul :hover ul { /* should be "#menu ul ul li:hover ul", but IE < IE7 does not support this */
	visibility:visible;
}

/* selection in first layer */
#menu > ul > li > a.selected { /* highlight when not hovering */
	color:#CC3333;
}

#menu > ul > li > a.navpath.selected {
	border-left:solid 1px #CC3333;
}

#menu > ul:hover > li > a.selected { /* remove highlight when hovering */
	color:black;
}

#menu > ul:hover > li > a.navpath.selected {
	border-left:dotted 1px black;
}

#menu > ul:hover > li:hover > a.selected { /* highlight when hovering the right branch */
	color:#CC3333;
}

#menu > ul:hover > li:hover > a.navpath.selected {
	border-left:solid 1px #CC3333;
}

/* selection in second layer */
#menu > ul > li > ul > li > a.selected { /* highlight when not hovering */
	color:#CC3333;
}

#menu > ul > li > ul > li > a.navpath.selected {
	border-left:solid 1px #CC3333;
}

#menu > ul:hover > li > ul > li > a.selected { /* remove highlight when hovering */
	color:#888888;
}

#menu > ul:hover > li > ul > li > a.navpath.selected {
	border-left:dotted 1px #888888;	
}

#menu > ul:hover > li > ul > li:hover > a.selected { /* highlight when hovering the right branch */
	color:#CC3333;
}

#menu > ul:hover > li > ul > li:hover > a.navpath.selected {
	border-left:solid 1px #CC3333;
}

#menu > ul > li > ul.selected { /* show when not hovering */
	visibility:visible;
}

#menu > ul:hover > li > ul.selected { /* hide when hovering */
	visibility:hidden;
}

#menu > ul:hover > li:hover > ul.selected { /* show when hovering in the right branch */
	visibility:visible;
}

/* selection in third layer */
#menu > ul > li > ul > li > ul > li > a.selected { /* highlight when not hovering */
	color:#CC3333;
}

#menu > ul > li > ul > li > ul > li > a.navpath.selected {
	border-left:solid 1px #CC3333;
}

#menu > ul:hover > li > ul > li > ul > li > a.selected { /* remove highlight when hovering */
	color:#888888;
}

#menu > ul:hover > li > ul > li > ul > li > a.navpath.selected {
	border-left:dotted 1px #888888;
}

#menu > ul:hover > li > ul > li > ul > li:hover > a.selected { /* highlight when hovering the right branch */
	color:#CC3333;
}

#menu > ul:hover > li > ul > li > ul > li:hover > a.navpath.selected {
	border-left:solid 1px #CC3333;
}

#menu > ul > li > ul > li > ul.selected { /* show when not hovering */
	visibility:visible;
}

#menu > ul:hover > li > ul > li > ul.selected { /* hide when hovering */
	visibility:hidden;
}

#menu > ul:hover > li > ul > li:hover > ul.selected { /* show when hovering in the right branch */
	visibility:visible;
}