div#menu {
	position: absolute;
	top: 130px;
	left: 0px;
	bottom: 0px;
	width: 250px;
	background: rgb(0,102,255);
	white-space: nowrap;
}

ul#leftmenu,ul.leftsubmenu {
	padding: 0px;	/* Remove indent before list items */
	margin: 0px;
	list-style: none;
	background: rgb(0,102,255); /* NB: Without this here it doesn't work in f**king IE7 !! */
}

ul#leftmenu li {
	display: block;
	position: relative; /* To allow absolute positioning of contained submenus */
	border-bottom: 2px solid #9be; 
}

ul#leftmenu li a {
	position: relative;		/* Necessary to make the A fully occupy the LI */
	font-family: "Calibri",sans-serif;
	text-decoration: none;
/*	height: 2em;   Setting this stops As from filling LIs in IE7 !!) */
	margin: 0px;
	padding: 0.5em 0em;  /* Top/Bottom Left/Right */
	padding-left: 1em;
	display: block;
	color: white;
}

ul#leftmenu li a:hover {
	background: #9be;
}

ul#leftmenu ul.leftsubmenu {
	display: block;   /* Dynamically change this to "none" in JS */
	position: absolute;
	left: 250px;
	top: 0px;
	border-left: 6px solid white; 
}

ul#leftmenu ul.leftsubmenu li {
	border-left: 5px solid #fed;  /* =b/g colour to make it look like there's a small gap.  Can't leave an actual gap or onMouseOut is triggered */
}

ul#leftmenu ul.leftsubmenu li a {
	padding-right: 1em;	 /* Width of submenus is determined automatically */
}