/*

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!

*/




.menulist, .menulist  ul {
 margin: 0;
 padding: 0;
 margin-left: 40px; 
 list-style: none;
}


.menulist ul {
 visibility: hidden;
 position: absolute;
 top: 2.5em;
right: -11px;
 width: 170px;
 padding: 0px;
}


.menulist ul ul {
 top: 0px;
left: 130px;
  padding: 0px;
}


.menulist li {
 float: left;
 position: relative;
 background: #E1CF97;
 border: 0px solid #330;
 margin-right: 20px;
}


.menulist ul li {
 float: none;
 margin-right: 0;
 margin-bottom: -1px;
}
.menulist ul>li:last-child {
 margin-bottom: 1px;
}


.menulist a {
 display: block;
 padding: 3px;
 color: #4869A3;
 text-decoration:  none;
}


.menulist a:hover, .menulist a.highlighted:hover, .menulist a:focus {
 color: #FFF;
 background-color: #A64;
}
.menulist  a.highlighted {
 color: #FFF;
 background-color: #C86;
}


.menulist a .subind {
 display:  none;
}
.menulist ul a .subind {
 display:  block;
 float: right;
}


.menulist a {
 float: left;
}
.menulist ul a {
 float: none;
}

.menulist a {
 float: none;
}

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