#mainMenu {
	_height: 1px; /* IE6 hack */
	position:relative;
	z-index:200;
	text-align: left;
	display: inline-block;
	/* For IE 7 */
	zoom: 1;
	*display: inline;
}
#mainMenu ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	background-color: #292929;
}
#mainMenu li {
	float:left;
}
#mainMenu li.clear {
	float: none;
	clear: both;
	border: 0;
	_display: none; /* IE6 hack */
}
#mainMenu li a {
	border: 0;
	display:block;
	float:left;
	white-space:nowrap;
	color: #ffffff;
	font-size: 15px;
	font-weight: bold;
	height: 35px;
	width: 160px;
	line-height: 35px;
	text-decoration: none;
	background: url(../interface/mm_regular.png) top left no-repeat;
	margin: 0 2px;
}
#mainMenu li a span {
	/*padding: 0 15px;*/
	text-align: center;
	display: block;
}
#mainMenu li a.fly span {
	padding-right: 5%;
	background-image:url(../interface/SpryMenuBarDown.gif);
	background-position:95% 50%;
	background-repeat:no-repeat;
}
#mainMenu li:hover, 
#mainMenu li.cssplay_hover {
	position:relative; 
	z-index:300;
}

/* first level over state */
#mainMenu li:hover > a {
	background-image: url(../interface/mm_over.png);
}
#mainMenu li.cssplay_hover a,
#mainMenu li a.hl {
	background-image: url(../interface/mm_over.png);
}

/* first level over state (packages) */
#mainMenu li:hover > a.mm_packages {
	background-image: url(../interface/mm_over_packages.png);
}
#mainMenu li.cssplay_hover a.mm_packages,
#mainMenu li a.hl.mm_packages {
	background-image: url(../interface/mm_over_packages.png);
}

/* first level over state (view your site) */
#mainMenu li:hover > a.mm_viewsite {
	background-image: url(../interface/mm_over_viewsite.png);
}
#mainMenu li.cssplay_hover a.mm_viewsite,
#mainMenu li a.hl.mm_viewsite {
	background-image: url(../interface/mm_over_viewsite.png);
}


#mainMenu li:hover > a.fly > span {
	background-image:url(../interface/SpryMenuBarDownHover.gif);
}
#mainMenu li.cssplay_hover a.fly span {
	background-image:url(../interface/SpryMenuBarDownHover.gif);
}

#mainMenu li li {
	float: none; 
}

#mainMenu li li.last {
	border-bottom: 0;
}
/* a hack for  IE6 */
* html #mainMenu li li {
	float:left;
}
#mainMenu li li a {
	/*padding:0 25px 0 10px;*/
	float:none; 
	background-color: #292929;
	background-image: none !important;
	margin: 0;
	width: auto;
}
#mainMenu li li a span {
	min-width: 120px;
	padding: 0 20px !important;
}

#mainMenu li.cssplay_hover li a,
#mainMenu li.cssplay_hover li.cssplay_hover li a,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a
{
	background-color: #292929;
	background-image: none;
}
#mainMenu li li a.fly span {
	background-image:url(../interface/SpryMenuBarRightHover.gif) !important;
}
#mainMenu li li:hover > a {
	background-color: #333333;
	background-image: none;
}
#mainMenu li li.cssplay_hover a,
#mainMenu li.cssplay_hover li.cssplay_hover a,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a {
	background-color: #333333;
	background-image: none;
}
#mainMenu li li:hover > a.fly > span {
	background-image:url(../interface/SpryMenuBarRightHover.gif) !important;
}
#mainMenu li li.cssplay_hover a.fly span,
#mainMenu li.cssplay_hover li.cssplay_hover a.fly span,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover a.fly span,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a.fly span,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a.fly span,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a.fly span {
	background-image:url(../interface/SpryMenuBarRightHover.gif) !important;
}

#mainMenu li:hover ul,
#mainMenu li.cssplay_hover ul {
	z-index:500;
	left: 2px;
	top: 35px;
	/*margin: 0 2px;*/
}
* html #mainMenu ul {width:2px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#mainMenu li:hover li:hover > ul {
	left:0px; 
	top:-1px;
	margin-left:100%;
	z-index:500;
}

/* keep further levels hidden */
#mainMenu li:hover > ul ul {
	position:absolute; 
	left:-9999px; 
	top:-9999px; 
	width:auto; 
}

/* but IE5.x and IE6 need this lot to style the flyouts*/

/* show next level */

#mainMenu li.cssplay_hover li.cssplay_hover ul,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul
{
	left:100%; 
	top:-1px;
}

/* keep further levels hidden */
#mainMenu li.cssplay_hover ul ul,
#mainMenu li.cssplay_hover li.cssplay_hover ul ul,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul,
#mainMenu li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul
{
	position:absolute; 
	left:-9999px; 
	top:-9999px;
}