/*
    #ffd700 gold (hover)
    #0175BC darker blue
    #0187BC lighter blue
    #C5DEA8 bright green (bottom borders)
*/
#navbar {
    float: left;
    clear: both;
    width: 976px;
    /*background: #DFF2DC;
    border: 2px solid #C5DEA8;*/
}


#nav
{
  display: block;
  text-align: center;
}

#nav ul {
    margin: 0;
    padding:0;
    list-style: none;
}
#nav a {
    display:block; 
    background: #0187BC;                /*#03629D lower background color of menu button */
    color: #fff; 
    text-decoration: none;
    padding: 0.7em 1.7em;               /* vertical and horizontal padding of menu button */
    text-transform: uppercase;
    font-size: 83%;
    letter-spacing: 2px;
    text-shadow: 0 -1px 0 #000;
    position: relative;
    font-family: 'Times New Roman',serif;
}

#nav > a    {
    display: none;
}
#nav li    {
    position: relative;
}
 
/* first level */
 
#nav > ul    {
    /*height: 3.75em;*/
    vertical-align: top; 
    display: inline-block;
    /*box-shadow: 
    1px -1px -1px 1px #000, 
    -1px 1px -1px 1px #fff, 
    0 0 6px 3px #fff;*/
    border-radius:6px;
}
#nav > ul > li {
    /*width: 25%;
    height: 100%;
    float: left;*/
    float: left; 
    border-bottom: 4px #0264A0 solid; /* #aaa*/
    margin-right: 1px; 
}
#nav > ul > li > a { 
  margin-bottom: 1px;
  box-shadow: inset 0 2em .33em -0.5em #0175bc;     /* upper background color of menu button */
}
 
/* second level */
 
#nav li ul {
    /*display: none;
    position: absolute;
    top: 100%;*/

    position: absolute;
    white-space: nowrap;
    border-bottom: 5px solid #ffd700;   /* #C5DEA8*/
    z-index: 1;
    left: -99999em;
}
#nav li:hover ul {
    /*display: block;*/
    left: auto;
    margin-top: 3px;                    /* vertical displacement of submenu */
    min-width: 100%;
}

/* submenu */

#nav > ul > li:hover, 
#nav > ul > li:hover > a { 
  border-bottom-color: #ffd700   /* #C5DEA8*/   
}
#nav ul li:hover > a { 
  color: #ffd700;                       /* menu text color on hover */
}
#nav > ul > li:first-child { 
  border-radius: 4px 0 0 4px;
} 
#nav > ul > li:first-child > a { 
  border-radius: 4px 0 0 0;
}
#nav > ul > li:last-child { 
  border-radius: 0 0 4px 0; 
  margin-right: 0;
} 
#nav > ul > li:last-child > a { 
  border-radius: 0 4px 0 0;
}
#nav ul li li a { 
  margin-top: 1px;
}
#nav ul li a:first-child:nth-last-child(2):before { 
  content: ""; 
  position: absolute; 
  height: 0; 
  width: 0; 
  border: 5px solid transparent; 
  top: 50% ;
  right:5px;  
 }


/* arrow hover styling */

#nav > ul > li > a:first-child:nth-last-child(2):before { 
  border-top-color: #aaa; 
}
#nav > ul > li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  border-bottom-color: #ffd700;   /* #C5DEA8*/    
  margin-top:-5px
}
#nav ul li li > a:first-child:nth-last-child(2):before {  
  border-left-color: #aaa; 
  margin-top: -5px
}
#nav ul li li:hover > a:first-child:nth-last-child(2):before {
  border: 5px solid transparent; 
  border-right-color: #C5DEA8;  
  right: 10px; 
}

@media only screen and ( max-width: 40em ) /* 640 */
{
    #nav    {
        position: relative;
    }
    #nav > a    {
    }
    #nav:not( :target ) > a:first-of-type,
    #nav:target > a:last-of-type
    {
        display: block;
    }
 
    /* first level */
 
    #nav > ul    {
        height: auto;
        display: none;
        position: absolute;
        left: 0;
        right: 0;
    }
    #nav:target > ul    {
        display: block;
    }
    #nav > ul > li    {
        width: 100%;
        float: none;
    }
 
    /* second level */
 
    #nav li ul    {
        position: static;
    }
}