/* - - -  BASIC styles [ MANDATORY ] - - - */
/* remove all list stylings */
.menu, .menu ul {
    font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;
    font-variant: small-caps;
    letter-spacing: .2em;
    margin: 0;
    padding: 0;
    border: 0;
    list-style-type: none;
    display: block;
}

.menu li {
    margin: 0;
    padding: 0;
    border: 0;
    display: block;
    float: left; /* move all main list items into one row, by floating them */
    position: relative; /* position each LI, thus creating potential IE.win overlap problem */
    z-index: 500; /* thus we need to apply explicit z-index here... */
}

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

.menu li li {
    float: none; /* items of the nested menus are kept on separate lines */
}

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

.menu li:hover > ul {
    visibility: visible; /* display submenu them on hover */
    top: 100%; /* 1st level go below their parent item */
}

.menu li li:hover > ul { /* 2nd+ levels go on the right side of the parent item */
    top: 0;
    left: 100%;
}

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

.menu, .menu ul { /* IE7 float clear: */
    min-height: 0;
}

/* -- 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 */
.menu ul {
    background-image: url(empty.gif); /* required for sticky to work in IE6 and IE7 - due to their (different) hover bugs */
    padding: 10px 30px 30px 30px;
    margin: -10px 0 0 -30px;
    /*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 ul ul {
    padding: 30px 30px 30px 10px;
    margin: -30px 0 0 -10px;
}

/* -- sticky.submenu.END -- */
/* - - - DESIGN styles [ OPTIONAL, design your heart out :) ] - - - */
.menu, .menu ul li {
    color: #fc3;
    background: #123;
}

.menu ul {
    width: 20em;
}

.menu a {
    text-decoration: none;
    font-size: 1.4em;
    color: #fc3;
    padding: .8em 1.6em .8em 1.6em;
    /*
     margin:.4em 1em 2em 1em;
     */
    display: block;
    position: relative;
}

.menu a:hover, .menu a:focus, .menu li:hover > a {
    color: #eee;
}

.menu a:active, .menu li:active > a {
    background-color: transparent;
    outline: 0 none;
    color: #ff2500;
}

/*
 .menu a:hover {
 border: 1px solid #eee;
 }
 */
.menu li li { /* create borders around each item */
    border: 1px solid #eee;
}

/* and remove the top border on all but first item in the list */
/*
 .menu ul > li + li {
 border-top:
 0;
 }
 */
/* inset 2nd+ submenus, to show off overlapping */
/*
 .menu li li:hover > ul {
 top: 5px;
 left: 90%;
 }
 */
/* 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 */
/*
 .menu > li:first-child > a, .menu li + li + li li:first-child > a {
 color: #567;
 }
 
 */
/* Fix for IE5/Mac \*/ /*/
 .menu a {
 float: left;
 }
 /* End Fix */
/*]]>*/
</style>







        <!--[if lte IE 6]>
            <style type="text/css" media="screen, tv, projection">
            /*<![CDATA[*/
            /* - - -  IE6 BASIC styles [MANDATORY] - - - */
            /*
            this rules improves accessibility - if Javascript is disabled, the entire menu will be visible
            of course, that means that it might require different styling then.
            in which case you can use adxie class - see: aplus.co.rs/adxmenu/examples/ie6-double-style/
            */
            .menu ul {
            visibility: visible;
            position: static;
            }
            .menu, .menu ul {	/* float.clear */
            zoom: 1;
            }
            .menu li.adxmhover {
            z-index: 10000;
            }
            .menu .adxmhoverUL {	/* li:hover>ul selector */
            visibility: visible;
            }
            .menu .adxmhoverUL {	/* 1st-level submenu go below their parent item */
            top: 100%;
            left: 0;
            }
            .menu .adxmhoverUL .adxmhoverUL {	/* 2nd+ levels go on the right side of the parent item */
            top: 0;
            left: 100%;
            }
            /* - - -  DESIGN styles - - - */
            .menu ul a {	/* fix clickability-area problem */
            zoom: 1;
            }
            .menu li li {	/* fix white gap problem */
            float: left;
            width: 100%;
            }
            .menu li li {	/* prevent double-line between items */
          
            margin-top: -1px;

      
            }
            .menu a:hover, .menu .adxmhoverA {		/* li:hover>a selector */
            color: #eee;
            }
            .menu .adxmhoverUL .adxmhoverUL {	/* inset 2nd+ submenus, to show off overlapping */
            top: 5px;
            left: 90%;
            }
            /*]]>*/
            </style>
            <script type="text/javascript" src="../code/ADxMenu.js"></script>
        <![endif]-->