/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/flyout5.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {
   position:relative;
   z-index:1000;
   font:12pt calibri;
   height:235px;
   margin:55px 0 0 25px; /* this page only */
   }

/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
   padding:0;
   margin:0;
   list-style-type:none;
   width:150px;
   position:relative;
   border:1px solid #gray;                            /* Border: gray   */
   border-width:1px 1px 0 1px;
   background:#D4E4F2;                                /* Initial background */
   }

.menu li {
   background:transparent;
   height:24px;
   }
* html .menu li {margin-left:-16px; margin-lef\t:0;}
/* get rid of the table */
.menu table {
   position:absolute;
   border-collapse:collapse;
   top:0; left:0;
   z-index:100;
   font-size:1em;
   width:0;
   height:0;
   }

/* style the links
   This defines the height, color etc for everthing you see
   except for background, which is defined under .menu ul etc              */
.menu a, .menu a:visited {
   display:block;
   text-decoration:none;
   height:24px;
   line-height:24px;*/
   margin:0px;
   width:150px;
   color:slategray;
   text-indent:5px;
   border:1px solid gray;
   background:transparent;
   }
/* style the link hover */
* html .menu a:hover {color:#fff; background:#888888;}
/*
                     DEFINES ALL HOVER BACKGROUND COLOR
                                                                     */
.menu ul li {height:24px;}
.menu :hover > a {
   color:#fff;
   background:#A9C4E9;                           /* #999 ;*/
   }

/* hide the sub levels and give them a position absolute so that they take up no room */
.menu ul ul {
   visibility:hidden;
   position:absolute;
   /*top:-1px; */
   left:100px;
   }
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul {
   visibility:visible;
   background:#dde;                /*  Second level menu background     */
   }
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
   visibility:hidden;
   }
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
   visibility:hidden;
   }
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{
   visibility:visible;
   background:#ded;                /*  Third level menu background     */
   }
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul {
   visibility:visible;
   background:#edd;
   }
</style>
<!--[if IE 7]>
<style type="text/css">
.menu li {float:left;}
</style>
<![endif]-->