/* styles for css driven flyout menu - supports only one level of children */

#menu 
{
    float:left; 
    padding:0px 0; 
    /*margin:3px 0 0 0; */
    margin:0;
    list-style:none; 
    position:relative; 
    width:185px;
}

#menu ul 
{
    padding:4px 0 4px 0;
    margin:0; 
    list-style:none; 
    width:189px; 
    background-color:#e1e1e1;
    height:auto; 
    position:absolute;
    left:-9999px; 
    top:0;
    border:1px solid #888888;
    box-shadow: 3px 3px 3px #888888;
}

#menu table 
{
    border-collapse:collapse; 
    width:0;
    height:0; 
    margin:-1px -10px;
 }

#menu li 
{
    float:left; 
    padding-left:4px; 
    /* margin-bottom:1px; */
}


#menu li a 
{
    display:block; 
  
    float:left; 
    width:176px; 
    height:28px; 
   
    color:#123053; 
    line-height:24px;
    font-size:10pt; 
    text-decoration:none; 
    text-indent:10px;
}

#menu li:hover 
{
    position:relative;
    /*position:static;*/
    float:left;
}

#menu li a:hover 
{
    position:relative; 
    background-color:#e1e1e1;
    /*color:#fff;*/
}

#menu li:hover > a 
{
    background-color:#e1e1e1;
    color:#fff;
    background: linear-gradient(to bottom, #676767 0%,#4c4c4c 100%); /* W3C */
}

#menu ul li a 
{
    border-bottom:0;
    background:#e1e1e1;
    border:0; display:inline-block;
}



#menu :hover ul,
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul 
{
    left:178px;
}

#menu :hover ul ul,
#menu :hover ul :hover ul ul 
{
    left:-9999px;
}

#menu ul li:hover > a 
{
    background-color:#e1e1e1; 
    
}

/* make child wider than parent */
#menu li ul
{
   
  white-space:nowrap;
  display:inline-block;
   width:250px; 
}

#menu li ul li a 
{
    /*border:1px solid #fff;
    height:50px;*/
   
}

#menu li ul li a:hover
{
    /*border:1px solid #1b5e8c;*/
    color:#fff; width:240px;
}



  /* Too narrow to support three columns */
@media all and (max-width: 640px)
 {#menu 
{
    float:left; 
    padding:0; 
    /*margin:3px 0 0 0; */
    margin:0;
    list-style:none; 
    position:relative; 
    width:140px;
}

#menu ul 
{
    padding:4px 0 4px 0;
    margin:0; 
    list-style:none; 
    width:189px; 
    background-color:#e1e1e1;
    height:auto; 
    position:absolute;
    left:-9999px; 
    top:0;
    border:1px solid #888888;
    box-shadow: 3px 3px 3px #888888;
}

#menu table 
{
    border-collapse:collapse; 
    width:0;
    height:0; 
    margin:-1px -10px;
 }

#menu li 
{
    
    padding-left:0px;
 
}

#menu li a 
{
    
    width:145px; 
  
}

#menu li:hover 
{
    position:relative;
    /*position:static;*/
    float:left;
}

#menu li a:hover 
{
    position:relative; 
    background-color:#e1e1e1; 
    /*color:#fff;*/
}

#menu li:hover > a 
{
    background-color:#e1e1e1; 
    color:#fff;
    background: linear-gradient(to bottom, #676767 0%,#4c4c4c 100%); /* W3C */
}

#menu ul li a 
{
    
}


#menu :hover ul,
#menu :hover ul :hover ul,
#menu :hover ul :hover ul :hover ul 
{
    left:130px;
}

#menu :hover ul ul,
#menu :hover ul :hover ul ul 
{
    left:-9999px;
}

#menu ul li:hover > a 
{
    background-color:#e1e1e1; 
   
}

/* make child wider than parent */
#menu li ul
{
    width:164px;
    margin-left:17px;
}

#menu li ul li a 
{
  width:165px;
}

#menu li ul li a:hover
{
    /*border:1px solid #1b5e8c;*/
    color:#fff;
}

 }