/* Parent menu bar element */
#menu
{
    width: 702px;										/* Width of total menu bar */
    height: 29px;										/* Height of total menu bar */
    float: left;										/* Move as far to the left as possible within its container */
	background-image: url(images/bg_menu.jpg);			/* Gradient background image */
    padding: 0;
    margin: 0;
    border-left: 1px solid #858484;

	/*position: relative;									/* ...*/
	/*z-index: 1;											/* ... */
}

	/* Top level menu items */
	#menu li
	{
		display:inline;										/* Make the list items appear next to each other */
		float:left;											/* Move as far to the left as possible within its container */
		padding: 0;
		margin: 0;
	}
	
	/* Top level menu items link and dummy link (class is 'link') */
	#menu li a,	#menu li .link
	{
		display: block;										/* Take the full width available with linebreak before and after element */

		height: 24px;										/* Height for the menu item */
		width: 63px;										/* Width for the menu item */
		padding: 5px 12px 0px 12px;
		
		font-family: trebuchet ms;
		font-size: 12px;
		color: #414040;										/* Text color */
		text-align:center;
	}

	/* Top level menu items dummy link, for dropdown behaviour (class is 'link') */
	#menu li .link
	{
		cursor: default;									/* Because this isn't a real link show normal mouse points */
	}

	/* Menu items hover */
	#menu li a:hover, #menu li .link:hover
	{
		background-image: url(images/bg_menu_hover.jpg);	/* Gradient green background image */
		display: block;										/* Take the full width available with linebreak before and after element, which causes the background image to show correct */

		color: #fff;										/* Text color */
	}

		/* Submenu */
		#menu li ul
		{
			background-color: #e9e9e9;							/* Light gray background color */
			border: 1px solid #c1c0c0;							/* Gray border color */
			padding: 0;
			margin: 0;

			position: absolute;									/* Let submenu overlap other elements */
			/*position: fixed;									/* Using this fixes the ie7 drop down problem, but only when no scrolling is (position is fixed in window) */
			z-index: 100;										/* Set stack order to 100 so submenu is placed in front of other elements */
			visibility: hidden; 								/* Hide submenu, will show on hover (using jquery script) */			
		}
	
		/* Submenu items */
		#menu li ul li
		{
			float: none;										/* Stop elements floating around, causes submenu items to appear below eachother instead of next to eachother */
			/*clear: both;										/* Stop elements floating around, causes submenu items to appear below eachother instead of next to eachother */
			padding: 0;
			margin: 0;
		}
		
		/* Submenu items link */
		#menu li ul li a
		{
			background:transparent;								/* Clear gradient green background image */
			padding: 4px 0px 0px 10px;
			/*height: 20px;*/
			margin:0;
			text-align:left;
			width: 160px;
		}
		
		/* Submenu items link hover */
		#menu li ul li a:hover 
		{
			background:transparent;								/* Clear gradient green background image */
			background-color: #d1d1d1;							/* Gray background color */
			color: #414040;										/* Dark gray text color*/
		}