/* Copyright (c) 2006 Cyril Huang Gyoza Workshop, All rights reserved */
#nav_bar {
	/*position: absolute;*/
	position: relative;
	visibility: visible;
	width: 793px;
	margin: 0px 0px 0px 0px;
	font-size: 8px;
	z-index: 2;
}

/* each menu level, first level ul, main menu */
ul.menu, ul.menu ul {
	/* type */
	float: left;
	display: block;
	/* dimension */
	/*width: 100%;		/* % is percentage of the outside box */
	background-color: #000066;
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	cursor: pointer;
	/* font */
	font-family: Verdana, sans-serif;
	font-size: 8px;
	color: #fff;
	text-align: center;
}

/* each menu item */
ul.menu li {
	float: left;		/* main menu, horonzontal */
	position: relative;	/* all li children relative to parent ul */
	list-style-type: none;
	width: 130px;		/* absolute length unit */
	border:1px solid #fff;
	padding: 3px 0px 3px 0px;
}

/* each anchar */
ul.menu li a { 
	color: yellow;
	display: block;
	white-space:nowrap;
	width: auto;		/* auto is adjusted by browser */
	text-decoration: none;
	/* for IE6 hover */
	display: block;
	width: 100%;
	height: 100%;
}

/* lower level ul, dorp down menu, should be vertical */
ul.menu li ul {
	display: none;
	top: 0em;	/* em is the size of current font */
	left: 0px;
	text-align: left;
}

/* more lower level are beside the upper level box not down the box */
ul.menu li ul li ul {
	top: 0px;
	left: 130px;
}

/* mouse over */
/* after main menu, only the first vertical menu shown when hover, hence we
   use child selector */
ul.menu li:hover { background-color: #3366FF; }
ul.menu li:hover > a { color: yellow; }
ul.menu li:hover > ul {
	display: block;
	position: absolute;	/* relative can do the outlook effect */
}

/* IE6 doesn't support hover well, only support anchor and no child selector*/
/* need javascript, see hover.js */
ul.menu li a:hover {
	background-color: #3366FF;
	color: yellow;
}