/* Based on http://line25.com/tutorials/how-to-create-a-css-menu-using-image-sprites */
ul#menu {
	width:449px;
	list-style:none;
	margin:0px;
	padding:0px;
	margin-left:10px;
}
ul#menu li {
	display:inline; /* IE6 steps down the graphics without this */
	padding:0px; /* IE6 may wrap the last button to the next line without this */
	margin:0px;
}
ul#menu li a {
	display:block; float:left; height:26px;
	background-image:url(../images/menu/main_menu.gif);
	text-indent:-9999px;
}

/* The javascript adds a class of "<className>Selected" to the active menu item so it stays highlighted after you move the mouse off of it (until its menu closes) */
ul#menu li a.mmHome {
	width:64px; background-position:0px 0px;
}
ul#menu li a.mmHome:hover, ul#menu li a.mmHome:focus, ul#menu li a.mmHomeSelected {
	background-position:0px -26px;
}

ul#menu li a.mmProducts {
	width:85px; background-position:-64px 0px;
}

ul#menu li a.mmProducts:hover, ul#menu li a.mmProducts:focus, ul#menu li a.mmProductsSelected {
	background-position:-64px -26px;
}

ul#menu li a.mmNews {
	width:59px; background-position:-149px 0px;
}
ul#menu li a.mmNews:hover, ul#menu li a.mmNews:focus, ul#menu li a.mmNewsSelected {
	background-position:-149px -26px;
}

ul#menu li a.mmSupport {
	width:78px; background-position:-208px 0px;
}
ul#menu li a.mmSupport:hover, ul#menu li a.mmSupport:focus, ul#menu li a.mmSupportSelected {
	background-position:-208px -26px;
}

ul#menu li a.mmAbout {
	width:88px; background-position:-286px 0px;
}
ul#menu li a.mmAbout:hover, ul#menu li a.mmAbout:focus, ul#menu li a.mmAboutSelected {
	background-position:-286px -26px;
}

ul#menu li a.mmContact {
	width:75px; background-position:-374px 0px;
}
ul#menu li a.mmContact:hover, ul#menu li a.mmContact:focus, ul#menu li a.mmContactSelected {
	background-position:-374px -26px;
}

/* Prevent outlining the image when browsing with keyboard.  The focus selector used above should replace this outline effect. */
ul#menu li a { outline: none; }