/* OFFICE-STYLE FREESTYLE MENU LAYOUT */





/* All <ul> tags in the menu including the first level */

.menulist, .menulist ul {

margin: 0;

padding: 2px;

width: 150px;

list-style: none;

background: #f7c631 ;

/* url(listmenu_o.png) left repeat-y */

border: 1px solid #f7d666;

}



/* Submenus (<ul> tags) are hidden and absolutely positioned across from their parent */

.menulist ul {

display: none;

position: absolute;

top: 0;

background: #f7d666 ;

border: 1px solid #654;

left: 147px;

}



/* All menu items (<li> tags) are relatively positioned (to correctly offset submenus). */

.menulist li {

position: relative;

}



/* Links inside the menu */

.menulist li a {

display: block;

padding: 2px 2px 2px 2px;

color: #000;

text-decoration: none;

border: 1px solid transparent;

margin: 1;



}

/* HACKS: MSIE6 doesn't support transparent borders, mimic with margins */

* html .menulist li a {

border-width: 0;

margin: 1px;

}



/*

Lit items: hover/focus = the current item. 'highlighted' = parent items to visible menus.

Here, active items are given a border, and a padding tweak to 'elevate' the text within.

Feel free to use background-image:url(file.gif) instead of background-color:#nnn here...

*/

.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {

color: #FFF;

background-color: #cc9900;

padding: 2px 2px 2px 2px;

border: 1px solid #ADF;

margin: 1;

}

.menulist a.highlighted {

color: #FFF;

background-color: #Cc9900;

border: 1px solid #CDE;

margin: 1;

}



/*

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 *:first-child+html affects IE7.

You may want to move these to browser-specific style sheets.

*/

*:first-child+html .menulist li {

float: left;

width: 100%;

}



* html .menulist li {

float: left;

height: 1%;

}

* html .menulist a {

height: 1%;

}

/* End Hacks */