﻿/* Tweak:
	height in '#menu'
	width in '#menu a'
*/

#menu
{
	width: 200px;			/* width of the menu, see width in #menu a */
	position: relative;
	height: 206px;			/* adjust to fit the items, no auto height available */
}

#menu ul
{
	margin: 0;
	padding: 0;
	list-style: none;
	white-space: nowrap;
	text-align: left;
	padding: 1px 1px 0 1px;
	background: #fff;
}

#menu li
{
	margin: 0;
	list-style: none;
}

#menu li
{
	display: inline;
}

#menu ul ul
{
	position: absolute;
	left: -9999px;
	border: 1px Orange solid;
	padding-bottom: 1px;
}

#menu ul#toplevel
{
	position: absolute;
	left: 0;
	top: 0;
}

#menu a
{
	display: block;
    font: normal "Segoe UI", Arial, Helvetica, Verdana, sans-serif;
	color: #c50;
	line-height: 22px;
	text-decoration: none;
	width: 188px;	/* sets the width of the link, match up with 'width' in menu */
	padding: 5px 0px 5px 10px;
}

#menu li a.fly
{
	background: url(../Images/MenuArrow.gif) no-repeat right center;
}

#menu li a:hover
{
	background-color: #ccc;
	color: #930;
}

#menu li:hover > a
{
	background-color: #ccc;
	color: #930;
}

#menu ul li:hover > ul
{
	left: 100%;
	margin-top: -32px;
	margin-left: -30px;		/* positions the sub menu relative to the right side */
}

#menu li.ml
{
    height: 1px;
    margin: 1px 10px 1px 10px;
    background-color: orange;
    display: block;
}

#menu a:hover ul, #menu a:hover a:hover ul, #menu a:hover a:hover a:hover ul
{
	left: 100%;
}

#menu a:hover ul ul, #menu a:hover a:hover ul ul
{
	left: -9999px;
}
