/*

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 changes to show/hide menus.

If you want to extend this layout, one good resource for UL/LI formatting is:
    http://www.alistapart.com/articles/taminglists/
Alternatively, you can use any other CSS dropdown layout instead. More here:
    http://www.alvit.de/css-showcase/
Consult your favourite CSS reference for customising fonts/borders/etc.

Otherwise, you can just change the #RGB border/background colours where
suitable to customise for your site -- easy :).

*/


/*
THIS IS A NEW CLASS THAT I HAVE ADDED IN CASE WE NEED MORE BEHAVIOUR JUST FOR THE MAIN MENU CLASS
.menulist {
text-align:center;
position:absolute;  /*THIS IS TO MAKE SURE THE SUB MENU OPTIONS ARE ALWAYS ON TOP
}
*/



/* HORIZONTAL FREESTYLE MENU LAYOUT */


/* All <ul> tags in the menu including the first level */
.menulist, .menulist  ul {
 margin: -1px; /*this gets the menu to fit perfectly over the menustrip back colour - if we have a border of 1px in .menulist li then this value should be set to -3, and height in #menustrip (style.css) must be set to 28px*/
 margin-left:0;
 padding: 0;
 list-style: none;
}

/* Submenus (<ul> tags) are hidden and absolutely positioned downwards from their parent */
.menulist ul {
 display: none;
 position: absolute;
 /*top: 1.0em; margin-top: 13px; */ /* I'm using ems and px to allow people to zoom their font */
 margin-top: 0px; /*top: 0.7em is the value which determines the gap between the top menu and sub menu */
 left: 0px; /*this gets the sub menu, when it drops out underneath the top menu, to be flush with the top menu*/
 width: 250px; /*this is the width of the individual SUB menu options*/
}

/*SUB SUB MENUS*/
/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul {
 top: -1px; margin-top: 0;
 left: 250px; /*THIS MUST MATCH THE WIDTH OF THE SUB MENU OPTIONS SPECIFIED ABOVE*/
}

/*
 All menu items (<li> tags). 'float: left' lines them up horizontally, and they are
 positioned relatively to correctly offset submenus. Also, they have overlapping borders.
*/
.menulist li {
	float: left;
	display: block;
	position: relative;
	background: #2A2420; /*this is the main background of the whole menu when mouse is NOT hovering over it - very very dark brown*/
	border: 0px solid #330; /*this was set to 1px but have changed this to zero*/
	margin-right: -1px; /*this adjusts the gap between each of the top menus*/
	
/*	width:150px;/*this will make ALL the menu options the same width and sub menu widths would follow the same width */
}

/* Items in submenus - override float/border/margin from above, restoring default vertical style */
.menulist ul li {
 float: none;
 margin: 0;
 margin-bottom: -1px;
}

.menulist ul>li:last-child {
 margin-bottom: 1px; /* Mozilla fix */
}

/* Links inside the menu */
/*
.menulist a {
 display: block;
 padding: 3px;
 color: #FFF; /*this is the normal text colour for everything that does not have the mouse hovering over it*/
/* text-decoration: none;
 font-size:14px;
}*/

/*TOP MENU HYPERLINK PROPERTIES*/
.menulist a {
 display: block;
 padding: 3px;
 color: #FFF; /*this is the normal text colour for everything that does not have the mouse hovering over it*/
 text-decoration: none;
 font-size:17px;
 font-weight:bold;
 font-family:verdana; /*Arial, Helvetica, sans-serif*/

}

/*SUB MENU HYPERLINK PROPERTIES*/
.menulist ul a {
 display: block;
 padding: 3px;
 color: #FFF; /*this is the normal text colour for everything that does not have the mouse hovering over it*/
 text-decoration: none;
 font-size:13px;
 font-weight:600;
}

/*SUB SUB MENU HYPERLINK PROPERTIES*/
.menulist ul ul a {
 display: block;
 padding: 3px;
 color: #FFF; /*this is the normal text colour for everything that does not have the mouse hovering over it*/
 text-decoration: none;
 /*font size and weight will be taken from the parent*/
 
}




/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */
.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
 color: #FFF;
/* background-color: #A64; darker pink brown*/
 background-color: #2A2420; /*this is required to get the image to show for some reason but this color will not show*/
 background-image: url(../images/menupixel1.jpg);
 background-repeat: repeat-x;

}

.menulist a.highlighted {
 color: #FFF;
 /*background-color: #C86;  lighter pink brown*/
 background-image: url(../images/menupixel1.jpg);
 background-repeat: repeat-x;

}



/*************************************************************************************************************/

/*
 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;
}
.menulist ul a .subind {
 display: block;
 float: right;
}


/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a {
 float: left;
}
.menulist ul a {
 float: none;
}
/* \*/
.menulist a {
 float: none;
}
/* */


/*
 HACKS: IE/Win:
 A small height on <li> and <a> tags and floating prevents gaps in menu.
 * html affects <=IE6 and *:first-child+html affects IE7.
 You may want to move these to browser-specific style sheets.
*/
*:first-child+html .menulist ul li {
 float: left;
 width: 100%;
}

* html .menulist ul li {
 float: left;
 height: 1%;
}
* html .menulist ul a {
 height: 1%;
}
/* End Hacks */