/* ================================================================ 
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any 
way to fit your requirements.
=================================================================== */

html {
	width: 100%;
	height: 100%;
}

body {
	background-color: #000;
	font-family: Tahoma, Geneva, sans-serif;
	font-size: 0.6em;
	font-style: normal;
	line-height: normal;
	font-weight: bold;
	color: #FFF;
	overflow: hidden;
	width: 100%;
	height: 100%;
	margin: 0;
}

#top {
	float: left;
	position: static;
	top: -15px;
	width: 100%;
	margin: 0;
	padding: 0;
}

#applet {
	height: 100% !important;
	width: 100%;
	margin: 0;
	padding: 0;
}

#multi-level {
	float: left;
	position: relative;
	top: 0;
	left: 10px;
	z-index:100;
}

iframe {
	display:none;
	
} 
iframe.level1 { 
	border:none;
	z-index:98;
	width:142px;
	left:0px; 
	top:15px;
	position:absolute;
}

iframe.level2 { 
	border:none;
	z-index:97;
	width:162px;
	left:0; 
	top:15px;
	position:absolute;
}

.level1 { height:148px;}

.level2 { height:211px;}

.menu table {border-collapse:collapse;}

/* The menu styling */
.menu {
	position: relative;
	top: 0;
}
/* remove all the bullets, borders and padding from the default list styling */
ul.menu {
	padding:0;
	margin:0;
	list-style-type:none;
	z-index: 300;
}

.menu ul {
	padding:0;
	margin:0;
	list-style-type:none;
	z-index: 300;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
	float:left;
	position:relative;
	text-align: center;
}

.menu li.w1 {
	width: 80px;
}

	.menu li.w1 li {
		width: 140px;
	}

.menu li.w2 {
	width: 80px;
}

	.menu li.w2 li {
		width: 160px;
	}

.menu li.w3, .menu li.w3 li {
	width: 130px;
}

.menu li.w4, .menu li.w4 li {
	width: 90px;
}

.menu li.w5, .menu li.w5 li {
	width: 75px;
}

.menu li.w6, .menu li.w6 li {
	width: 40px;
}

.menu li.w7, .menu li.w7 li {
	width: 240px;
	white-space: nowrap;
}

/* style the links for the top level */
.menu a, .menu a:visited, .menu li {
	display:block;
	font-size: 100%;
	text-decoration:none;
	color: #FFF;
	padding: 0;
	line-height: 15px;
	font-weight:bold;
}

.menu a, .menu a:visited {
	border-top: 0;
	border-bottom: #000 1px solid;
	border-bottom-color: #000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left: 1px solid;
	border-left-color: #000;
	border-right: 1px solid;
	border-right-color: #000;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
	visibility:hidden;
	position:absolute;
	height:0;
	top:15px;
	left:0;
}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
	background: #000;
	color:#eee;
	line-height:1em;
	padding: 0 5px;
	white-space: nowrap;
	font-size: 80%;
	border-top: 0;
	border-bottom: #000 1px solid;
	border-bottom-color: #000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left: 1px solid;
	border-left-color: #000;
	border-right: 1px solid;
	border-right-color: #000;
}
/* style the top level hover */
.menu a:hover {
	color:#000;
	background-color:#FFF;
	text-decoration: none;
	border-top: 0;
	border-bottom: #000 1px solid;
	border-bottom-color: #000;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left: 1px solid;
	border-left-color: #000;
	border-right: 1px solid;
	border-right-color: #00;
}

.menu ul ul a:hover {
	color:#000;
	background-color:#FFF;
	text-decoration: none;
	border-top: 0;
	border-bottom: #FFFFFF 1px solid;
	border-bottom-color: #FFFFFF;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left: 1px solid;
	border-left-color: #FFFFFF;
	border-right: 1px solid;
	border-right-color: #FFFFFF;
}


/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul, .menu ul a:hover ul {
	visibility:visible;
}
/* Remove the padding, margins and bullets from the lists 
.menu, .menu ul {list-style-type:none; padding:0; margin:0; font-family:arial, sans-serif;}*/

/* Set up the top level list items and float left to place inline 
.menu li.top {display:block; float:left; position:relative;}*/

/* Style the list OR link hover. Depends on which browser is used */
.menu a:hover {visibility:visible;} /* for IE6 */
.menu li:hover { position:relative; z-index:200;} /* for IE7 */

/* keep the 'next' level invisible by placing it off screen. */
.menu ul, 
.menu :hover ul ul, 
.menu :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul ul,
.menu :hover ul :hover ul :hover ul :hover ul ul {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

/* set up the first drop down sub level */
.menu :hover ul {left:0; top:15px; background: #000; border:1px solid #888; white-space:nowrap; width:auto; height:auto;}

.menu :hover .level1, .menu :hover .level2  { display:block; }
.menu :hover ul :hover iframe { display:block; left:90px; top:-4px; padding:3px 0; white-space:nowrap; width:160px; z-index:101; }

.menu :hover > a, .menu ul ul :hover > a {
	color:#000;
	background:#FFF;
}