/* ######### Topnav CSS ######### */

.topnav ul{ /* position and style of the box CONTAINING the top menu*/
	margin: 0;
	padding: 0;/* font style, size */
	color: gray;
	list-style-type: none;   /* do not change */
	border-bottom: 1px solid fff; /* bottom border */
	background: #ffffff;  /* background colour of box */
	overflow: hidden;   /* do not change */
	width: 100%; /* width of the box, can be % or pixels */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

.topnav li{
display: inline;
margin: 0; /* margin of menu item provided it doesn't have a pullout */
}

.topnav li a{
float: left;
display: block;
text-decoration: none;
margin: 0;  /* margin of menu item if it has a pullout */
padding: 6px 8px; /*padding inside each tab see note 2 below*/
border-right: 1px solid white; /*right divider between tabs*/
color: gray; /* font colour */
background: #ffffff; /* default background colour of menu items */
}

.topnav li a:visited{
	color: #0089bc; /* font colour once a link has been visited*/
}

.topnav li a:hover{
	background: #ffffff; /*background colour of links on hover */
	color: #64AB1C;
}

.topnav a.selected{
background: #ffffff; /*background colour of link when you move mouse down to the pullout*/
}

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

.pullout, .pullout ul{
	color: gray;
	margin: 0;
	padding: 0;
	position: absolute;
	left: 0;
	top: 0;
	list-style-type: none;
	border: 1px solid fff; /* border size, style and colour - if you change this you need to change the one below */
	border-bottom-width: 0;
	visibility: hidden; /* do not change */
	z-index: 100; /* do not change */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
}

.pullout li a{
	display: block;
	width: 160px; /*width of menu (not including side paddings)*/
	color: gray; /* colour of text */
	background-color: #FFFFFF; /* default background colour */
	text-decoration: none;
	padding: 4px 5px; /* see note 2 below */
	border-bottom: 1px solid fff; /* border size, style and colour - if you change this you need to change the one above */
}

* html .pullout li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (width of li a (160px) + 2 x padding of li a (2 x 5px)*/
}

.pullout li a:hover{
	background-color: #FFFFFF; /* background colour when hovering over pullouts */
	color: #64AB1C; /* font colour when hovering over pullouts */
}

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

.downarrowpointer{  /*CSS for arrow image - affects topnav*/
padding-left: 4px;
border: 0;
}

.rightarrowpointer{ /*CSS for "right" arrow image - affects pullouts*/
position: absolute;
padding-top: 3px;
left: 100px;
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
*/