/*For the each component of the drop down menu, both the headers, and the dropped down links.*/

#menu ul {
	list-style: none;
	padding: 2px 0 0 18px;
	margin:0;
	float: left;
	cursor: pointer;
	width: 87px;
	background-image: url(Images/tab.jpg);
	background-repeat:no-repeat;
	}

*html menu ul{
height:18px;
}
/*this changes things for a (any anchor/links found within the dropdown menu*/
#menu a{
	font-weight:normal;
	font-size:12px;
	color:#5798D0;
	text-decoration: none;
	padding-left:15px;
	background-image:url(Images/orange_squares_interior.png);
	background-repeat:no-repeat;
	background-position:left;
}

/*this changes things for both h2 (the headers) and a (any anchor/links found within the dropdown menu*/
#menu a, #menu h2 {
	font-family:Trebuchet MS, "Times New Roman", Times, serif;
	display: block;
	margin: 0;
	font-weight:normal;
	padding: 1px 15px;
}

/* This says what changes if any are done to the headers and links found in the dropdown menu, when they are hovered over*/
#menu h2:hover, #menu a:hover{
	color:orange;
	}

/*this changes only the headers*/
#menu h2 {
	font-size:12px;
	padding-left: 14px;
	background-image:url(Images/orange_squares_interior.png);
	background-repeat:no-repeat;
	background-position:left;
	}

/* Do not edit below this point, it is part of the code that makes the menus actually drop down*/

#menu li {position: relative;}

#menu ul ul {
position: absolute;
z-index: 500;
background-image:none;
padding:0;

}

#menu ul ul li {
height:20px;
width: 129px;
float:left;
background-image:url(Images/orange_arrow_interior.png);
background-repeat:no-repeat;
background-position:left;
}

#menu ul ul a{
background-image:none;
}

#menu ul ul ul {
position: absolute;
top: 5px;
left: 100%;
}

div#menu ul ul,
div#menu ul li:hover ul ul,
div#menu ul ul li:hover ul ul
{display: none;}

div#menu ul li:hover ul,
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}