/* ######### Sidenav CSS ######### */

.sidenav{
	width: 195px; /* width of sidenav bar menu */
	clear: left;
	position: relative; /* Preserve this for "right" arrow images (added by script) to be positioned correctly */
}

.sidenav ul{ /* position and style of box that holds the sidenav menu (but not background colour */
	list-style-type: none;
	padding: 0;
	margin-top: 5px;
	margin-right: 0;
	margin-bottom: 5px;
	margin-left: 0;
}

.sidenav ul li a{
	color: #333333; /* font colour */
	display: block;
	width: auto; /* padding of links within sidenav */
	padding-left: 20px;  /* padding of links within sidenav */
	text-decoration: none;   /* border of sidenav */
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: lighter;
	background-image: url(../images/nav_fixed.jpg);
	background-repeat: no-repeat;
	padding-top: 8px;
	padding-right: 0;
	padding-bottom: 0px;
	height: 22px;
}

* html .sidenav ul li a{ /*IE6 hack*/
	width: 199px;
}

.sidenav ul li a:visited, .sidenav ul li a:active{
	color: #3a4c00; /* font colour of a visited link or the active link */
}

.sidenav ul li a:hover, .sidenav ul li a.selected{
	color: #3a4c00;  /* background colour of sidenav on hover */
	background-image: url(../images/nav_over.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	background-repeat: no-repeat;
	height: 22px;
	width: auto;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 20px;
	font-weight: lighter;
}

/* ######### Pullout CSS ######### */

.pullout, .pullout ul{ /*topmost and sub ULs, respectively*/
	position: absolute; /* don't change */
	left: 0;
	top: 0;
	list-style-type: none;
	visibility: hidden;
	z-index: 100;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: lighter;
	margin-top: 0;
	margin-right: 0;
	margin-bottom: 0;
	margin-left: 0;
	padding-top: 0;
	padding-right: 0;
	padding-bottom: 0;
	padding-left: 0;
}

.pullout li a{
	display: block; /* default colour of font in pullout */
	background-color: white; /* default background colour in pullout */
	text-decoration: none; /* bottom border of pullouts */
	background-image: url(../images/nav_pullout1.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: lighter;
	color: #3a4c00;
	background-repeat: no-repeat;
	height: 22px;
	padding-top: 8px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 12px;
	width: 160px;
}

* html .pullout li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /* this is a special hack for IE6 and is the sum of width of menu li a (160px) + side padding (2 x 5px) */
}

.pullout li a:hover{
	color: white;  /* hover colour of font on hover */
	background-image: url(../images/nav_pullout2.jpg);
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-weight: lighter;
}

/* ######### Neutral CSS  ######### */

.rightarrowpointer{ /*CSS for arrow image - affects both sidenav and pullout*/
	position: absolute;
	padding-top: 3px;
	left: 80px;
	border: 0;
}

.ddiframeshim{ /* don't change - only affects the scroll bar */
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}

/*
Note 1:

background: #F2F2F2 url(bulletlist.gif) no-repeat 3px center;
they are (in order):
colour of background: #F2F2F2;
reference to bullet image: url(bulletlist.gif) | if you don't want a bullet delete 'url(bulletlist.gif)' or replace with your own image (must be in this folder);
bullet not repeated: (no-repeat);
position of bullet from left: 3px;

-----------------------------------------
Note 2:

Examples of how padding works: (get your head round this one!!)

padding: 10px
the padding will be 10px on all four sides

padding: 10px 5px
top and bottom padding will be 10px, left and right padding will be 5px of the width of the closest element.

padding: 10px 20px 15px
top padding will be 10px, left and right padding will be 20px of the width of the closest element, bottom padding will be 15px

padding: 10px 25px 15px 20px
top padding will be 10px, right padding will be 25px of the width of the closest element, bottom padding will be 15px, left padding will be 20px
*/