.flyoutmenu {
    width: 218px;/* VERY IMPORTANT! Set this to appropriate value, either here on down in the design section */
}

.flyoutmenu, .flyoutmenu ul {	/* remove all list stylings */
    margin: 0px;
    padding: 0;
    border: 0;
    list-style-type: none;
    display: block;
}

.flyoutmenu li {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    position: relative;	/* position each LI, thus creating potential IE.win overlap problem */
    z-index: 5;		/* thus we need to apply explicit z-index here... */
}

.flyoutmenu li:hover {
    z-index: 10000;	/* ...and here. this makes sure active item is always above anything else in the menu */
    white-space: normal;/* required to resolve IE7 :hover bug (z-index above is ignored if this is not present)
					        see http://www.tanfa.co.uk/css/articles/pure-css-popups-bug.asp for other stuff that work */
}

.flyoutmenu ul {
    visibility: hidden;	/* initially hide all submenus. */
    position: absolute;
    z-index: 10;
    left: 0;	/* while hidden, always keep them at the top left corner, */
    top: 0;		/* 		to avoid scrollbars as much as possible */
}

.flyoutmenu li:hover>ul {
    visibility: visible;	/* display submenu them on hover */
    left: 100%;	/* and move them to the right of the item */
}

/* -- float.clear --
    force containment of floated LIs inside of UL */
.flyoutmenu:after, .flyoutmenu ul:after {
    content: ".";
    height: 0;
    display: block;
    visibility: hidden;
    overflow: hidden;
    clear: both;
}
.flyoutmenu, .flyoutmenu ul {	/* IE7 float clear: */
    min-height: 0;
    background: #151515;
}

.flyoutmenu 
{
	padding: 5px 0px 0px 0px; 
}

/* -- float.clear.END --  */

/* sticky submenu: it should not disappear when your mouse moves a bit outside the submenu
    YOU SHOULD NOT STYLE the background of the ".menu UL" or this feature may not work properly!
    if you do it, make sure you 110% know what you do */
.flyoutmenu ul {
    background-image: url(/images/spacer.gif);	/* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
     /*padding: 30px 30px 30px 10px;
    margin: -30px 0 0 -10px;
   background: #f00;*/	/* uncomment this if you want to see the "safe" area.
						        you can also use to adjust the safe area to your requirement */
}


/* - - - Menu: DESIGN styles - - - */

.flyoutmenu, .flyoutmenu ul li {
    color: #FFFFFF;
    font-size:12px;
	line-height:20px;
    font-weight: normal;
}

.flyoutmenu {
    width: 218px;
}

.flyoutmenu ul {
    width: 218px;
    border: 1px solid #333333;
}

.flyoutmenu a {
    text-decoration: none;
    color: #FFFFFF;
	line-height:20px;
    display: block;
    margin: 0px;
    width: 100%;
}

.flyoutmenu a:hover, .flyoutmenu li:hover>a {
    color: #FFFFFF;
    text-decoration:underline;
	line-height:20px;
    width: 100%;
}

.flyoutmenu li {	/* create borders around each item */
	padding-left: 8px;
	line-height:20px;
    /*border: 1px solid #cccccc;*/
}

.flyoutmenu li:hover {	/* create borders around each item */
    /*border: 1px solid #ccc; */
	padding-left: 8px;
	line-height:20px;
    background:#1f1f1f;
}

.flyoutmenu>li + li, .flyoutmenu ul>li + li {	/* and remove the top border on all but first item in the list */
    border-top: 0;
	padding-left: 8px;
	line-height:20px;
}

.flyoutmenu li:hover>ul {	/* inset submenus, to show off overlapping */
    top: 5px;
    left: 90%;
	line-height:20px;
}

/* special colouring for "Main menu:", and for "xx submenu" items in ADxMenu
    placed here to clarify the terminology I use when referencing submenus in posts */
.flyoutmenu>li:first-child>a, .flyoutmenu li + li + li li:first-child>a {
    color: #FFFFFF;
	line-height:20px;
    width: 100%;
}