/* End */

#leftnav {
	float: left;
	padding-right: 0px;
	padding-left: 85px;
	padding-top: 10px;
	margin: 0px;
	padding-bottom: 0px;
}
/*The first step is to remove the indents and bullets from the unordered list and define the width of our menu items.*/
#leftnav ul{
	margin: 0;
	padding: 0;
	list-style: none;
	width: 135px;
	overflow: visible;
	}
/*Next, we need to position our list items. Fortunately, these will stack vertically by default, which is what we require. However, we must set the position as relative, because we will need to position the sub-menus absolutely within*/
#leftnav ul li{
	position: relative;
	padding: 0px;
	margin: 0px;
}

/*Next step is the sub-menus. We want each sub-menu to appear to the right of its parent menu item when that item is hovered over.*/
#leftnav li ul{
	position: absolute;
	left: 134px;
	display: none;
	width: 175px;
	top: -73px;
	font-family: Arial, Helvetica, sans-serif;
	background-image: url(../images/sub_buttons/translucent_green.png);
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 3px;
	background-position: 3px;
	background-repeat: repeat-y;
	}
/*Using the “left” and “top” attributes, we can absolutely position each sub-menu within its parent menu item. You will notice I have set the “left” property to 149px (1px less than the width of the menu items), which allows the sub-menus to overlap the main menu and not produce a double border. (You’ll see what I mean later.)*/


#leftnav ul li a{
	display: block;
	
	}

/*This defines the background colour of the SUBMENU when hovered over.*/
#leftnav li ul li a:hover {
	background-image: url(../images/sub_buttons/green.png);
}
/*this allows each <li> to have the image when hovered over*/
#leftnav li a:hover {
	background-image: url(../images/blue_button_selected.png);
	background-repeat: no-repeat;
}
#leftnav li:hover ul{
	display: block;
}

#leftnav li:hover ul ,li.over ul{
	display: block;

}
#leftnav #nav li ul li a {
	padding-bottom: 2px;
	padding-top: 2px;
	margin-top: 0px;
	padding-left: 3px;
}

	
	/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }

.blue_background {
	background-image: url(../images/blue_button.png);
	background-repeat: no-repeat;
	margin: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-left: 0px;
	padding-bottom: 7px;
}