/* ================================================================ 
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 https://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.
=================================================================== */

.menu {
	width: 100% !important;
}

.mainGraphic {
	width: 100% !important;
}

#mainMenu {
	_height: 1px; /* IE6 hack */
	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 */
}
 
#mainMenu:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
}

#mainMenu { display: inline-block; }
/* start commented backslash hack \*/
* html #mainMenu { height: 1%; }
#mainMenu { display: block; }
/* close commented backslash hack */

#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 {
	float:left;
}

#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;
	height: 25px; /* default values, can be overwritten */
	line-height: 25px; /* default values, can be overwritten */
	/* border-width -- DYNAMIC -- */
	/* 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.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.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;
	left:-1px; 
	top: 25px; /* default values, can be overwritten */
	/* top  -- DYNAMIC -- */
}

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