/******************************
See 
http://build.int.confex.com/redmine/projects/style/wiki/Navigation_Menus
for instructions on using the jQuery Slide Menu.

To make this work you will need jqueryslidemenu.js, 
links to jquery.min.js and a unordered list menu 
set up with the proper id's and classes.

Override this template for your client and 
Edit colors freely, 
edit width carefully, 
and edit padding or margins with caution!

******************************/

#top_nav {
	background-color: #096727; /* main background color of the menu */
	width: 960px; /* width of the menu */
	overflow: visible;
}

.jqueryslidemenu {
	font: 13px Arial,Droid Sans,sans-serif; /* menu font style */
	width: 100%; 
	text-align: left;
	height: 36px;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

.msie html .jqueryslidemenu{height: 1%;}

.jqueryslidemenu ul{
	margin: 0;
	padding: 0;
	list-style-type: none; /* get rid of bullets */
	background-color: #096727; /* normally this will match the #top_nav background */
}

/*Top level list items*/
.jqueryslidemenu ul li{
	position: relative;
	display: inline-block; /* allows items to line up horizontally */
	float: left; /* allows items to line up horizontally */
	z-index: 3000; /* keeps top level items on top */
	zoom:1; /* IE 6 HACK */
	width: 160px;
	height: auto;
	text-align: center;
	margin: 0;
	padding: 0;
	vertical-align: middle;
}

/*Top level menu link items style*/
.jqueryslidemenu ul li a{
	display: block; /* turns "a" into a block element so it can have padding and float and stack */
	text-align: center;
	padding: 0;
	margin: 0 auto;
	color: #fff;
	text-decoration: none;
	text-align: center;
	font-size: 13px;
	line-height: 36px;
	height: 36px;
	border-right: 1px solid #fff; /* this puts a separating border btwn items */
	width: 160px;
}

.bLeft {
	border-left: 1px solid #096727;
}


* html .jqueryslidemenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
	display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited{
	color: #fff; /* color of the menu text */
}

.jqueryslidemenu ul li a:hover{
	color: #fff; /* color of the menu text when hovered */
	background-color: #9DC83A;; /* hover background color */
}
	
/*1st sub level menu*/
.jqueryslidemenu ul li ul{
	position: absolute;
	left: 0;
	display: block;
	visibility: hidden; /* menu is hidden until top level is hovered */
	border-top: none;
	border-bottom: none;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.jqueryslidemenu ul li ul li{
	background: #444;
	display: list-item;
	float: none;
	width: 220px; /*width of sub menus */
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.jqueryslidemenu ul li ul li ul{
	top: 0;
}

/* Sub level menu links style */
.jqueryslidemenu ul li ul li a{
	background: #444;
	font: normal 13px Arial;
	display:block;
	padding: auto 10px;
	margin: 0;
	width: 220px;
	line-height: 28px;
	height: 28px;
	border-top-width: 0;
	border-bottom: 1px solid #555;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	border-left: 1px solid #333;
}

.jqueryslidemenuz ul li ul li a:hover{ /*sub menus hover style*/
	background: #eff9ff;
	color: black;
}

/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
	position: absolute;
	top: 12px;
	right: 7px;
}

.rightarrowclass{
	position: absolute;
	top: 6px;
	right: 5px;
}



/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after {
	content: '.';
	display: block;
	overflow: hidden;
	visibility: hidden;
	font-size: 0;
	line-height: 0;
	width: 0;
	height: 0;
}

.clearfix:after {
	clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
	zoom: 1;
}

#top_nav {
	padding-left: 0;
	margin-left: 0;
	text-align: left;
}