#menu
{
	height: 30px; /* height of the menu */
	
	/* position the background image at the bottom of the menu container. Tile it only on x-axis.*/
	background-image: url(../../images/bg_menu_line.png);
	background-repeat: repeat-x;
	background-position: bottom;
	
	clear: both;
}
#menu ul
{
	list-style-type: none;
	padding-right: 10px;
}

#menu li
{
	display: inline;
	float: right;
	padding-left: 2px;
}

#menu a
{
	background-image: url(../../images/bg_menu_item.png);
	color: #FFFFFF;

	padding-left: 10px;
	padding-right: 10px;
	margin-top: 3px;
	padding-top: 1px;
	height: 24px;
		
	font-size: 15px;
	font-weight: bold;
	text-decoration: none;
	
	display: block; /* Needed to see menu background in ie */
}

#menu li.current a, #menu li.current a:hover
{
	background-image: url(../../images/bg_current_menu_item.png);
	color: #0F4E62;
	
	margin-top: 0px;
	padding-top: 2px;
	padding-bottom: 4px;
}

#menu li a:hover 
{
	background-image: url(../../images/bg_hover_menu_item.png);
}