/* the horizontal menu starts here */
/* thank you, Steve Garwood (stevegarwood.com) and Charles Wyke-Smith (bbd.com) */
div#listmenu {
	font-family: arial,helvetica,sans-serif;
	float: left; /*makes the div enclose the list */
	font-size: 12px;	/* SET FONT-SIZE HERE */
	background-color: #666; /* colors the div */
	text-transform: uppercase;
	}

div#listmenu ul {
	margin: 0 auto; padding: 0;
	}

div#listmenu li {
	margin: 0 auto;
	padding: 10px 0px;
	float: left;	/* causes the list to align horizontally instead of stack */
	position: relative; /* positioning context for the absolutely positioned drop-down */
	list-style-type: none;	/* removes the bullet off each list item */
	background-color: #666; /*sets the background of the menu items */
	}

div#listmenu li.hover { 
	position: relative; z-index: 3;
	}

div#listmenu li.hover a { 
	text-decoration: underline;
	}

div#listmenu li.hover ul li a { 
	padding: 0 12px;
	text-decoration: none; /*sets the background of the menu items */
	}

div#listmenu a {
	display:block;
	padding:0 12px; /*creates space each side of menu item's text */
	text-decoration:none;	 /* removes the underlining of the link */
	color:#fff;	/* sets the type color */
	}

/* the horizontal menu ends here */

/* the drop-down starts here */
div#listmenu ul li ul {
	margin:0; /* prevents the TEMP value inheriting from the horiz menu - OK to remove if you remove TEMP above */
	position:absolute; /* positions the drop-down ul in relation to its relatively positioned li parent */
	width: 13em; /*sets the width of the menu - in combo with the li's 100% width, makes the menu stack*/
	left:11px; /*aligns the drop exactly under the menu */
	text-transform: none;
	border-left: 1px solid #333;
	}

div#listmenu ul li ul li.hover {
	background-color: #666;
	}
div#listmenu ul li ul li a:hover {
	text-decoration: none;
	}

div#listmenu ul li ul li {
	padding: 1px 0px;
	margin: 0;
	width:100%; /* makes the list items fill the list container (ul) */
	background-color: #000;
	border-bottom:1px solid #333;
	border-right:1px solid #000;
	}

div#listmenu ul li ul li:first-child {
	border-top:1px solid #000; /*the top edge of the dropdown */
	}

/* make the drop-down display as the menu is rolled over */
div#listmenu ul li ul {display:none;} /* conceals the drop-down when menu not hovered */
div#listmenu ul li.hover ul {display:block; margin-top: 2px } /* shows the drop-down when the menu is hovered */