#menu-container
{
	width: 765px;
	position: relative;
	background-color: #003366;
	text-align: center;
	font-size: 75%;
	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: 2;
		margin: -5px 0 0 0;
		padding: 8px 0 0 0;
		background-color: #003366;
		color: white;
		font-size: 80%;
	}
	
	.submenu a:link, .submenu a:active, .submenu a:visited, .submenu a:hover
	{
		color: white;
		text-decoration: none;
		font-weight: normal;
	}
	
	.menu-item
	{
		background-color: #003366;
		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-ncc
	{
		left: 25px;
	}
	
	#menu-technology
	{
		left: 75px;
	}
	
	#menu-projects
	{
		left: 165px;
	}
	
	#menu-services
	{
		left: 235px;
	}

	#menu-membership
	{
		left: 445px;
	}

	#menu-news
	{
		left: 545px;
	}
	
	#menu-contact
	{
		left: 630px;
	}