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

.topnav ul{ /* position and style of the box CONTAINING the top menu*/
	list-style-type: none;  /* background colour of box */
	overflow: hidden; /* width of the box, can be % or pixels */
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #666666;
	border-top-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	background-image: url(../images/nav_bkground_repeater.jpg);
}

.topnav li{
	margin: 0px;
	display: inline;
	padding: 0px;
}

.topnav li a{
	display: block;
	text-decoration: none; /*right divider between tabs*/
	color: #333333;
	padding-top: 23px;
	padding-bottom: 10px;
	text-align: center;
	padding-right: 10px;
	padding-left: 10px;
	margin: 0px;
	float: left;
	font-weight: bold;
}

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

.topnav li a:hover{
	background-image: url(../images/nav_bkground_repeater-over.jpg);
	color: #000000;
	font-weight: bold;
}

.topnav a.selected{
	background-image: url(../images/nav_gradient2.jpg);
}

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

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

.pullout li a{
	display: block;
	width: 185px; /* default background colour */
	text-decoration: none;
	text-align: left;
	padding-top: 8px;
	padding-right: 5px;
	padding-bottom: 8px;
	padding-left: 5px;
	text-indent: 4px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	color: #FFFFFF;
	background-color: #909195;
}

* 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{
	color: #666666;
	background-color: #CCCCCC;
}

/* ######### 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;
}
#navbar {
}

/*
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
*/