/* mark.ord: added.
 *   This controlls the overall size of the menubar
 */
ul#menu {
	font-size: 77%;
/*	width: 100%; */
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #ffffff;
  margin-top: -6px;
}

ul#menu li.baritem {
	width: 124px;
                padding: 5px 0px;

}

/* Define menu item font's here. */
#menu a {
	font-family: Veranda, Arial, serif;
	font-weight: bold;
	text-decoration: none;
}

/* Colorize menu text (links) here */
#menu a:link {
	color: #ffffff;
                text-decoration: none;
}

#menu a:visited {
	color: #ffffff;
}

#menu a:active {
	color: #ffffff;
}

ul#menu li.baritem a:hover {
	text-decoration: underline;
}

ul#menu li ul li a:hover {
	text-decoration: none;
}

#menu li ul li {
/*
	position: absolute;
	left: 0px;
	z-index: 300;
*/
}

/* Override
 *
 
 */
#menu li li a {
	font-weight: normal;
	color: #ffffff;
                width: 124px;
                padding: 3px 0;
}

/* Override
 *
 * mark.ord: added. menu items when hover
 */
#menu li li a:hover {
	font-weight: normal;
	color: #ffffff;
	background-color: #281871; /* Colorize menubar items when mouseover */
}


#menu li li a:hover {
/*	padding: 0.2em 5px; */
/*	border: 5px solid #7d6340; */
/*	border-width: 0 5px; */
/*	width: 100%; */
	background-color: #281871; /* Colorize menu items when mouseover */
}


#menu li {
	background-color: #3DAACE; /* colorise menu bar */
	/* background-color: transparent; */
	/* border: 1px solid #ffffff; */
	border-width: 1px 0;
}

#menu li ul {
                width: 124px;
	font-weight: normal;
	border: solid 1px #848457;
                border-top: solid 1px #ffffff;
	background-color: #281871; /* colorise dropdown menu */
}


/* mark.ord:
 ******************
 * Menu bar item  *
 ******************
 *
 *  The menu bar items want white borders on hover.
 *  So there is no repositioning, create borders with same color as the
 *  menubar, then change to white on hover,
 *
 *  Some docs:
 *   Enable hover on menubar items. For Gecko, li:hover can  be used, for
 *   Internet Explorer, the javascript hack is needed.
 *
 *   The selection for these 3 statements should be #menu>li etc. (Any
 *   li with parent #menu, since these doesn't apply to menu items, only
 *   menubar items.)
 *   This would be acceptable, except Internet Explorer doesn't recognise
 *   #menu>li. (Gecko does).
 *   As a result, we must introduce the otherwise redundant class 'baritem'
 *   and use that to select only menubar items. (#menu li.baritem).
 *   This, while introduces redundancy, it provides the same behavior in
 *   Gecko & MSIE.
 *
 */
#menu li.baritem {
	/*
	 * Keep widths same as in #menu li.over
	 */

	/* border-left: #ffffff solid 1px; */
	border-right: #ffffff solid 1px;
}


/* Hover: GECKO
 * 
 *   Gecko based renders recognise li:hover, so 'mouseover' done with
 *   pure CSS.
 */
#menu li:hover.baritem {
	background-color: #281871; /* colorise menubar item */
	border-left: none;
	border-right: #ffffff 1px solid; /* redundant solid 1px needed for Gecko */
}

/* Hover: INTERNET EXPLORER
 * 
 *   Internet Explorer renderer doesn't recognise li:hover.
 *   Use our javascript helper.
 */
#menu li.baritem.over {
	background-color: #281871; /* colorise menubar item */
	border-left: none;
	border-right: #ffffff;
}


/*
li#first {
	border-left-width: 1em;
}

li#last {
	border-right-width: 1em;
}
*/