#menu-container
{
	width: 765px;
	position: relative;
	background-color: #E7D6A3;
	text-align: right;
	font-size: 90%;
	padding: 4px 5px 4px 5px;
}

#menu-container a:link, #menu-container a:visited, #menu-container a:active, #menu-container a:hover
{
	color: white;
	text-decoration: none;
	font-weight: normal;
}

.parent-menu
{
	padding: 4px 8px 4px 8px; /*this doesn't show up. the padding in #menu-container is what making it appear, but if this isn't here then the div doesn't extend, so when you mouseout the menu disappears before you mouseover onto it */
}

	.submenu
	{
		display: none;
		position: absolute;
		z-index: 6;
		margin: -5px 0 0 0;
		padding: 8px 0 0 0;
		background-color: #E7D6A3;
		color: white;
		font-size: 80%;
		text-align: left;
	}
	
	.submenu a:link, .submenu a:active, .submenu a:visited, .submenu a:hover
	{
		color: white;
		text-decoration: none;
		font-weight: normal;
	}
	
	.menu-item
	{
		background-color: #E7D6A3;
		padding: 0 6px 3px 6px;
		border-bottom: 1px solid #D3D3D3;
	}
	
	/*
	.menu-item:hover
	{
		background-color: #0065CA;
	}
	*/
	
	/* In IE the bottom padding of #menu-container separates it from the submenues, so there is a gap inbetween it and them, and because of that the mouseout/over transition doesn't work. The negative top margin in them pushes the menus up into the #menu-container area so that there is no gap  */
	#menu-who
	{
		left: 212px;
	}
	
	#menu-join
	{
		left: 434px;
	}
	
	#menu-contact
	{
		left: 540px;
	}