/*MENU STYLES START*/



ul {
  padding: 0;
  margin: 0;
  list-style: none;
  /*This background image is used because IE if you use borders to seperate
  your menu items when you mouse over the border in your hover no longer works in IE */
  background-image:url(../images/menu-bg-static.gif);
  }

.menuitem { /*This sets the properties for all the first level list items in the menu*/
	float: left;
	position: relative;
	width: 140px;
	line-height:20px;
	background-color:#659500;
	padding-left:0px;
	margin-left:0px;
	border-right:1px solid #FFFFFF;
	background-image:url(../images/menu-bg-static.gif);


		
}

.menuitem:hover{	/*When mouse over change the background colour and background image
of the top level list items	ONLY will work in MOZ cause the hover in IE only works on links 
I'm changing the background image because if I use a white border as a seperator
between my menu items. In IE when you hover over the border your sub menus will disappear
hover stops working when you place your mouse over the border of the menu*/
background-color:#4F7500;
background-image:url(../images/menu-bg-hover.gif);

}


li a {	/*Sets the text colour of any link that appears in a list item ie All the menu items*/
  	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	font-weight: bold;
	text-decoration: none;
	color: #FFFFFF;
	}

.menuitem li {
	/* Every list item that appears in class menuitem set the background
	image basically this affects the submenus.  The border styles below were removed
	because ie won't recognize the borders as part of the hover*/
	/*border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #FFFFFF;*/
	background-image:url(../images/menu-bg-static.gif);
}

.menuitem ul { /*hide second level list items */
  display: none;
  position: absolute; 
  top: 20px;
  left: 0;
 

  }  


.menuitem:hover ul, .menuitem.over ul{ /*display submenus when hovered over the li.over ul thing is for IE */
display: block;
clear:left; 
background-image:url(../images/menu-bg-hover.gif);
}


/*the following styles are IE fixes that since IE will only recognize hover when applied to a link
I'm changing the properties of the links in the second level menus.  This allows for the proper sizing in IE and 
I can now change the background hover image also */
#nav .menuitem ul li a {
	display:block;
	width: 140px;
	line-height:20px;
	background-color:#659500;
	background-image:url(../images/menu-bg-static.gif);
	

}
#nav .menuitem ul li a:hover {
	    background-color:#4F7500;
		background-image:url(../images/menu-bg-hover.gif);
		  
}

#nav .menuitem a {
  display:block;
  width:140px;
  line-height:20px;
}

#nav .menuitem a:hover {
      background-color:#4F7500; 
	  background-image:url(../images/menu-bg-hover.gif);
}


/*IE FIXES END*/


/*MENU STYLES END*/