.menulist ul
{
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0;
    list-style: none;
}

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


/*
 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 ul ul li
{
    border: 1px solid #000000;
}


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

/* Lit  items: 'hover' is mouseover, 'highlighted' are parent items to visible menus */


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


/* 'Escaped Comment' hack for horizontal menubar width in IE5/Mac */
.menulist a
{
    float: left;
}
.menulist ul 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%;
}




/* Sort of works ;) */


/* End Hacks */






/* Second and third etc. level submenus - position across from parent instead */
.menulist
{
    margin-left: 48px;
    margin-top: -5px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0;
    list-style: none;
}
.menulist ul
{
    display: none;
    position: absolute;
    top: 2.2em;
    margin-top: 13px; /* I'm using ems and px to allow people to zoom their font */
    left: -1px;
    width: 310px;
    font-size: 10px;
}

.menulist li
{
    float: left;
    position: relative;
    border-right: 1px solid #d39aae;
    margin-right: -1px;
}


.menulist a
{
    display: block;
    padding: 8px 17px 7px 14.5px;
    color: #7f32a7;
    text-decoration: none;
    font-weight: bold;
    font-size: 15px;
}

.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus
{
    color: #FFF;
    background: linear-gradient(#f28861,#be7cb4);
}
.menulist a.highlighted
{
    color: #FFF;
    background-color: #C86;
}


* html .menulist ul li
{
    float: left;
    height: 1%;
}
.menulist li:hover > ul
{
    display: block;
}

.menulist li ul li
{
    font: bold 10pt 'Arial' , 'Verdana';
    color: #FFFFFF;
    border: 1px solid #666666;
    background-color: #f3786f;
    background-image: url(/borderarrow77ec.gif);
    background-repeat: repeat-y;
    display: block;
}

.menulist li ul li a
{
    background-color: #f3786f;
    color: #ffffff;
    background-image: url(/borderarrow77ec.gif);
    background-repeat: repeat-y;
    padding: 4px 23px 4px 21px;
    font: bold 10pt 'Arial' , 'Verdana';
}

.menulist li ul li a:hover
{
    color: #000000;
    background-color: #f3786f;
    margin-left: -.0em;
    background-image: url(/borderarrow177ec.gif);
    background-repeat: repeat-y;
    padding: 4px 23px 4px 21px;
}


/* Second and third etc. level submenus - position across from parent instead */
.menulist ul ul
{
    top: -1em;
    margin-top: 0;
    left: 280px;
    width: 180px;
}
.menulist li li
{
    float: none;
}
.menulist li ul
{
    margin-top: 10px;
    z-index:1;
}
.store li
{
    width: 213px;
}
.Qst li
{
    width: 235px;
}
.ideas li
{
    width: 280px;
}

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