/* Horizontal Menu Bar */
.pin 
{
	width:32px;
	height:28px;
/*	margin-top:0px; */
	z-index:99;
	border:none 1px #3876EB;
}
.mainMenuLeft
{
	float:left;
}
.mainMenuRight
{
	float:right;
}
.menuBar 
{
	height:28px; /* height of background image */
	background-repeat: repeat-x;
	background-position: top left;
/*	position:relative; */
}
.menuHorz {
	color: #345D84;
	margin: 0px;  
	padding: 0px;  

/*	line-height:18px !important;	
	line-height:26px;
	padding-top:5px;	
	border:0px none white; /* for real */
/*	position:relative;
/*	top:0px; */
	display:inline;
}

div.menuHorz fieldset
{
	display:inline;
	position:relative; /* so we get a positioning context for the popup menus */
	/* if the inpit items are removed set top to 0px for FF and IE */
	top:-7px !important;
/*	top:-4px; */
	white-space: nowrap;   
	margin:0px;
	padding:0px 12px 0px 0px;
	border-right:solid 1px black;
	border:0px none #3876EB; /* so the fieldset has no frame */
	overflow:visible;
}

.menuBarInput 
{
	height:28px;
}

.menuBarInput INPUT
{
	/* Bodge for FF */
	position:relative !important;
	top:-0px !important;
	position:static;
	
	margin:0px 0px 0px 4px;
}
.menuBarInput SELECT
{
	/* Bodge for FF */
	position:relative !important;
	top:-0px !important;
	position:static;
	
	margin:0px 0px 0px 4px;
}

#menuBarFind 
{
	position:relative;
	top:3px !important;
	left:0px !important;
	left:4px;
}

.menuInfo 
{
/*	position:relative !important;
	top:-23px !important;
	top:-2px; */
	display:inline;
	border:solid 1px #3876EB;
	padding:1px 16px 0px 16px;
	margin-top:-8px;
	margin-left:16px;
	margin-right:16px;
	/* specifying margin values for top or bottom bolloxes up IE */
/*	margin:0px 8px 0px 16px; */
	color:#F0D727; 
	font-family:Arial Baltic;
}

div.menuHorz a
{
/*	margin: 1px; */
	padding:1px; /* so we can get a border round when highlighting the menu item without the size changing */
	overflow:visible;
}

div.menuHorz a:hover /* so the horizontal menu button look slightly different to the popouts */
{
	padding:0px;
	background: #223C57; 
	border:1px solid #3876EB;
	position:relative;
}


div.menuHorz ul
{
    display:none; /* by default keep it hidden */

    width:100%;
    position:absolute; 
	overflow:visible;

	left:0;

	top:auto !important;  /* FF totaly bothces the 92% calculation but seems */
	top:92%; /* 92% to give a slight overlap - just for visual things - IE bolloxes the auto so this is for IE */
}

ul.menu, div.menu ul
{
    width:10em; /* remember the acctual rendering width will be this plus 25px */
	            /* if you change this don't forget the nasty FF bodge in ".menu li ul" */
	z-index:99;
}

ul.menu, .menu ul
{

	list-style: none;

	padding:0px;
	padding-right:28px !important; /* visual bodge for FF */
	padding-right:0px;
	margin:0px;

	border:1px solid #3876EB;

	background-color:#153E77;
	background-image:url(/gfx/menuleft.gif);
	background-repeat: repeat-y;
	background-position: top left;
	position:relative;
}

ul.menu li ul, div.menu li ul
{ 
    display:none; /* by default keep it hidden */

    width:100%;
    position:absolute; 
	overflow:visible;

	/* This is nasty as I hate using absolute values for this kind of thing, but it is the only way I can
	   get FF to render the menus properly - in this case IE wins for once ;) */
	left:11.7em !important;

	left:99%; /* 99% so we get a minimal overlap - just more visualy pleasing, notch one up to IE */
	top:0 !important; /* !important here because there is an !important in "table.menuHorz ul" for when driving horizontal menus */
}

ul.menu li, div.menu li
{
	/* Another IE firefox difference/bodge */
	display: block !important; 
	display: inline; 
	float:none;
	
	position:relative; /* force a position context change for sub menu ul items otherwise the absolute position is wrong */

	margin:0;
	padding:0;
	color:#F0D727;
}

ul.menu em,div.menu em
{
	display:block;
    padding-left:25px;
	background-repeat: repeat-y;
	background-position: top left;
	font-weight:bold;
}

.menuDisabled {
	/* for not active menu items */
	background-image:url(/gfx/menuleft.gif);
	color:silver;
}

.menuTitle {
	/* for titles */
	background-image:url(/gfx/menuleftlight.gif);
	color:#F0D727;
}

/* stuff to make menu images work */
div.menu fieldset a img
{
	border: 0px none #3876EB;
	/* this messing about is becaus IE looses the a tag border if an img is included in the image */
	margin-bottom:-2px !important; /* works in FF */
	margin-top:0px !important;
	padding-top:0px !important;
	/* IE BOLLOX */	
	margin-top:2px;
	padding-top:1px;
}

ul.menu img
{
	border: 0px none #3876EB;
	padding:0px;
/*	margin-top:1px; */
	margin-left:-20px; /* The width of the image (16x16 is a good size) - plus acouple to ensure it ends up totaly in the border band */
	margin-right:5px; /* and the difference to make it up to the 25px band width - thoue IE doecn't need this FF does */
}

/* The menu items for virtical menus */
ul.menu a, div.menu ul a
{
	display: block;
	margin: 1px;
	padding:1px; /* so we can get a border round when highlighting the menu item without the size changing */
	padding-left:25px; 
}
.menu a
{
	font-weight: normal; 
	border-spacing:1px;
	text-decoration: none;

	/* This MUST be so - or the mouse in/out triggers for a:hover will not trigger on the full
	   Item width, but only on the width of the acctual text in the menu item - IE Thing */
	width:100%;
}

.menu a:link
{
	color: #F0D727; 
}
.menu a:visited
{
	color: #F0D727; 
}
.menu ul a:hover,.menu li a:hover, .menu div a:hover
{
	padding:0px;
	padding-left:24px; /* one less then the border width so we don't get size flicker */
	background: #223C57; 
	border:1px solid #3876EB;
}

/* Firefox Specific stuff - this gets the popout to work on firfox - CSS only :) as it should be - yah boo hiss to IE */
ul.menu li:hover>ul, p.menu li:hover>ul, div.menuHorz blockquote:hover>ul, 
div.menuHorz button:hover>ul, div.menuHorz fieldset:hover>ul
{
    display:block; 
}