/*

Here's a demo stylesheet used to format a menu and its content.
Feel free to alter the menu layout however you want. All you have to do is ensure the script
has the correct CSS property name (like 'visibility' or 'display') that you want it to change.

One good resource for UL/LI formatting: http://www.alistapart.com/articles/taminglists/
Consult your favourite CSS reference for editing fonts/borders/etc.

Otherwise, even if you're not very experienced at CSS, you can just go through and change
the #RGB border/background colours where suitable to customise for your site!

*/

/* FREESTYLE MENU LAYOUT */

/* All <ul> tags in the menu including the first level */
.menulist, .leveltwo, .levelthree {
	margin: 0;
	padding: 0;
	list-style: none;
	z-index: 100;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.leveltwo {
	visibility: hidden;
	position: absolute;
	top: 25px;
	left: 0px; 
	line-height: 20px;
	z-index: 100;
}

/* Second and third etc. level submenus - position across from parent instead */
.levelthree {
	visibility:hidden;
	position: absolute;
	top: 0px;
	left: 120px;
}

/* ==================================== */
/* 	     OVERALL MENU DEFAULTS
/* ==================================== */
/* MikeC: Global defaults for the whole menu */

.menulist li {
	float: left;
	position: relative;
	height: 25px; 
	background-image: url(images/images_A2864/menu_border.gif);
	background-position:right;
	background-repeat:no-repeat;	
	line-height: 25px;
	z-index: 100;

}

/* mikec: overrides settings for submenus */
.leveltwo li {
	float: none;
	clear:both;
	margin-right: 0;
	height: 20px;
	background-image: none;
	background-color:#4D3518;
	width: 125px;
}

/* ==================================== */
/*       FIRST LEVEL OF THE MENU
/* ==================================== */
/* MikeC: All links inside the first level of the menu */

.menulist a {
	display: block;		/* don't edit this one */
	text-align: left;
	color: #ffffff; /* JVD: This is the text color for the first level */
	text-decoration:  none; /* */
	font-size: 9pt; /* JVD: This is the text size for the first level */
	padding: 0px 10px;
}

/* JVD: Be sure to change this to match the lines above */
.menulist a:visited { 
	text-decoration: none;
	text-align: center;
	font-size: 9pt;
	color: #FFFFFF;
}

/* MikeC: this defines all the mouseovers for the first level of the menu */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus, .menulist a.highlighted {
	color: #FFFFFF;
	text-decoration: none;
	background-color: #4D3518;
} 

/* ==================================== */
/*    SUBSEQUENT LEVELS OF THE MENU
/* ==================================== */
/* mikec: override all links inside the sublevels of the menu */

.leveltwo li a {
	color: #FFFFFF;
	text-decoration: none;
	font-size: 8pt;
	height: 20px;
}

/* JVD: Be sure this matches the font-size line above */
.leveltwo li a:visited {
	font-size:8pt;
	text-align:left;
	color: #ffffff;
}

/* MikeC: this defines all the mouseovers on the sublevels of the menu */
.leveltwo a:hover, .leveltwo a.highlighted:hover, .leveltwo a:focus, .leveltwo a.highlighted { 
	color: #FFFFFF;
	text-decoration: none;
	background-color:#5E411E;
}

/* JVD: DON'T MAKE CHANGES BELOW THIS LINE */

/*
 If you want per-item background images in your menu items, here's how to do it.
 1) Assign a unique ID tag to each link in your menu, like so: <a id="xyz" href="#">
 2) Copy and paste these next lines for each link you want to have an image:
    .menulist a#xyz {
      background-image: url(out.gif);
    }
    .menulist a#xyz:hover, .menulist a.highlighted#xyz, .menulist a:focus {
     background-image: url(over.gif);
    }
*/

/* Only style submenu indicators within submenus. */
/*.menulist a .subind {
 display:  none;
} 
.leveltwo a .subind {
 display:  block;
 float: right;
} */
/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
 float: left;
}
.leveltwo a {
 float: none;
}
/* \*/
.menulist a {
 float: none;
}
/* */

/* This semi-commented section exists to fix bugs in IE/Windows (the 'Holly Hack'). \*/
* html .leveltwo li {
 float: left;
 height: 1%;
}
* html .leveltwo a {
 height: 1%;
}

/* End Hack */