/* ================================================================ 
This copyright notice must be kept untouched in the stylesheet at 
all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_variable4.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */
#mainMenu {
	position:relative;
	z-index:100;
	border-style: solid;
	/* border-width -- DYNAMIC -- */
	/* border-color -- DYNAMIC -- */
	/* background-color */ /* -- DYNAMIC -- */
	/* background-image */ /* -- DYNAMIC -- */
	/* height */ /* -- DYNAMIC, related -- */ /* has to be set once list elements are floated */
	height: auto !important;
}
 
#mainMenu ul {
	position:absolute;
	left:-9999px;
	top:-9999px;
	border-style: solid;
	*background-color: #fff; /* IE7 hack to prevent subitems from closing */
	/* border-width -- DYNAMIC -- */
	/* border-color -- DYNAMIC -- */
}

#mainMenu li {
	_display:inline-block;
	/* float:left; */
}

#mainMenu li.clear {
	border: 0;
	_display: none; /* IE6 hack */
}

#mainMenu li a {
	border: 0;
	display:block;
	/* float:left; */
	padding:0 5px; /* default values, can be overwritten */
	white-space:nowrap;
	border-style: solid;
	border-width: 0 1px 1px 0;
	/* border-color -- DYNAMIC -- */
	/* color -- DYNAMIC -- */
	/* height -- DYNAMIC -- */
	/* line-height -- DYNAMIC, related -- */
	/* text-decoration -- DYNAMIC -- */
	/* font-weight -- DYNAMIC -- */
	/* font-style -- DYNAMIC -- */
	/* font-size -- DYNAMIC -- */
	/* font-family -- DYNAMIC -- */
	/* padding-left -- DYNAMIC -- */
	/* padding-right -- DYNAMIC -- */
}

#mainMenu li a:hover {
	/* has to be empty for a:active work properly */
}

#mainMenu li a:active {
	/* color -- DYNAMIC -- */
}

/* 
#mainMenu li a.fly {
	background-image:url(../interface/down.gif);
	background-repeat: no-repeat;
	background-position: right center;
}
*/

#mainMenu li:hover, 
#mainMenu li.cssplay_hover {
	position:relative; 
	z-index:300;
}

#mainMenu li:hover > a {
	/* background-color -- DYNAMIC -- */
	/* background-image -- DYNAMIC -- */
	/* color -- DYNAMIC -- */
	/* text-decoration -- DYNAMIC -- */
	/* font-weight -- DYNAMIC -- */
	/* font-style -- DYNAMIC -- */
	/* font-size -- DYNAMIC -- */
	/* font-family -- DYNAMIC -- */
}
#mainMenu li.cssplay_hover a {
	/* background-color -- DYNAMIC, related -- */
	/* background-image -- DYNAMIC, related -- */
	/* color -- DYNAMIC, related -- */
	/* text-decoration -- DYNAMIC, related -- */
	/* font-weight -- DYNAMIC, related -- */
	/* font-style -- DYNAMIC, related -- */
	/* font-size -- DYNAMIC, related -- */
	/* font-family -- DYNAMIC, related -- */
}

#mainMenu li li {
	float: none; 
	border-bottom-style: solid;
	/* border-bottom-width -- DYNAMIC -- */
	/* border-bottom-color -- DYNAMIC -- */
}
#mainMenu li li.last {
	border-bottom: 0;
}

#mainMenu li li a {
	padding:0 25px 0 5px; /* default values, can be overwritten */
	float:none; 
	border: 0;
	background-image: none;
	/* background-color -- DYNAMIC -- */
	/* height -- DYNAMIC -- */
	/* line-height -- DYNAMIC, related -- */
	/* color -- DYNAMIC -- */
	/* text-decoration -- DYNAMIC -- */
	/* font-weight -- DYNAMIC -- */
	/* font-style -- DYNAMIC -- */
	/* font-size -- DYNAMIC -- */
	/* font-family -- DYNAMIC -- */
	/* padding-left -- DYNAMIC -- */
	/* padding-right -- DYNAMIC -- */
}
#mainMenu li li a:hover {
	/* has to be empty for a:active work properly */
}

#mainMenu li li a:active {
	/* color -- DYNAMIC -- */
}
#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-image: none;
	/* background-color -- DYNAMIC, related -- */
	/* height -- DYNAMIC, related -- */
	/* line-height -- DYNAMIC, related -- */
	/* color -- DYNAMIC, related -- */
	/* text-decoration -- DYNAMIC, related -- */
	/* font-weight -- DYNAMIC, related -- */
	/* font-style -- DYNAMIC, related -- */
	/* font-size -- DYNAMIC, related -- */
	/* font-family -- DYNAMIC, related -- */
}

#mainMenu li li a.fly {
	background-image:url(../interface/fly.gif) !important;
	background-repeat: no-repeat;
	background-position: right center;
}

#mainMenu li li:hover > a {
	background-image: none;
	/* background-color -- DYNAMIC -- */
	/* color -- DYNAMIC -- */
	/* text-decoration -- DYNAMIC -- */
	/* font-weight -- DYNAMIC -- */
	/* font-style -- DYNAMIC -- */
	/* font-size -- DYNAMIC -- */
	/* font-family -- DYNAMIC -- */
}
#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-image: none;
	/* background-color -- DYNAMIC, related -- */
	/* color -- DYNAMIC, related -- */
	/* text-decoration -- DYNAMIC, related -- */
	/* font-weight -- DYNAMIC, related -- */
	/* font-style -- DYNAMIC, related -- */
	/* font-size -- DYNAMIC, related -- */
	/* font-family -- DYNAMIC, related -- */
}

#mainMenu li:hover ul,
#mainMenu li.cssplay_hover ul {
	z-index:500;
	/* top  -- DYNAMIC -- */
	margin-left: -1px;
	top: -1px !important;
	left:100%; 
}

* 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;
}