/*
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 :).
*/

/* VERTICAL FREESTYLE MENU LAYOUT */
/* All <ul> tags in the menu including the first level */
.menulist, .menulist ul { font-family: Arial, sans-serif; margin: 0; padding: 0; width: 100px; list-style: none; font-size: 1.0em;}

/*
 Submenus (<ul> tags) are hidden and absolutely positioned across from their parent. They don't *have* 
 to touch their parent menus, but it's a good idea as CSS-only fallback mode requires menus to 
 touch/overlap (when JS is disabled in the browser).
*/
.menulist ul { display: none; position: absolute; top: -1px; left: 98px;}

/*
 All menu items (<li> tags) are relatively positioned to correctly offset their submenus.
 They have borders that are slightly overlaid on one another to avoid doubling up.
*/
.menulist li { position: relative; border: 1px solid #330; background: #ffffcc; margin-bottom: -1px; }
 
.menulist ul>li:last-child { margin-bottom: 1px; /* Mozilla fix */ }

/* Links inside the menu */
.menulist a { display: block; padding: 3px; color: #000; text-decoration: none; }

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

.menulist a.highlighted { color: #FFF; background-color: #C86; }

/*
 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);
    }
*/

/* 'subind' submenu indicators, which are automatically prepended to 'A' tag contents. */
.menulist a .subind { float: right;}

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