/************************
    For the horizontal navigation bar
    Based on http://www.paulund.co.uk/creating-a-pure-css-horizontal-navigation-with-drop-downs
    with additions of z-index to handle drop downs overlapping a lower line
************************/
#nav_horz {
    background-color: dimgrey; /* should be same color as li */
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2px;
}
#nav_horz div.nav_bottom {
    clear: both;
}
#nav_horz a:link, #nav_horz a:visited {
    text-decoration: none;
    /*color: #FFF; orig */
    color: lightblue;
    font-weight:bold;
}
#nav_horz ul {
    padding:0;
    margin:0;
    list-style: none;
    /*background:#000; orig */
    /*height:36px; orig */
    height:24px;
    z-index: 1; /* for making drop downs that overlap a lower row */

}
#nav_horz ul li {
    float:left;
    position:relative;
    /*z-index: 2; with positioning, this was creating a new stacking context */
    background-color: dimgrey; /* needed to color items on second line */
    
    width: 10%; /* = 100/10,  not orig */
}
#nav_horz ul li.wider {
    width: 12%; /*  */
}
#nav_horz ul li.narrower {
    width: 8%; /*  */
}
//#nav_horz ul li ul {
//    background-color:maroon;
//    /* dont need this entire selector if remove color */
//}
//#nav_horz ul li ul li{
//    /*background-color:pink;*/
//    /* dont need this entire selector if remove color */
//}
#nav_horz ul li a, #nav_horz ul li a:visited {
    display:block;
    /*color:#fff; orig */
    color: lightblue;
    /*width:104px; orig */
    /*width: 100px; /* works well with 10 items over 1000px */
    height:auto;
    /*line-height:20px; orig */
    line-height:16px;
    /*padding:10px; orig */
    padding: 4px 0px;
    text-align: center;
}
#nav_horz ul li a:hover {
    display:block;
    /*color:#000; orig */
    color: darkblue;
    /*background:#FFF; orig */
    background: lightgrey;
    /*line-height:20px; orig */
    line-height:16px;
    /*padding:10px; orig */
    padding: 4px 0px;
}
#nav_horz ul li ul, #nav_horz ul li:hover ul li ul {
    display: none;
    width: 100%; /* this is not orig, but helps inside li display 100% */
}
#nav_horz ul li:hover {
    /* newly added selector */
    background-color: #888;
    /*border-bottom:1px solid lightblue; causes wierd shifting*/
}
#nav_horz ul li:hover ul {
    display:block;
    position:absolute; 
    /*top:36px; orig */
    top: 24px;
    left:0;
    height:auto;
    z-index:3; /* for making drop downs that overlap a lower row */
}
#nav_horz ul li:hover ul li {
    /* newly added selector */
    width: 100%; /* not orig */
    background-color: #888; /* not orig */
}
#nav_horz ul li:hover ul li a {
    display:block;
    text-align:left; 
    /*border-bottom:1px solid #FFF; orig */
    border-top:1px solid lightblue;
    text-align: center;
}
/* used for a third level opens to the side
#nav_horz ul li:hover ul li:hover ul {
    display:block;
    position:absolute;
    left:124px;
    top:0;
}*/

@media screen and (max-width:1000px) {
#nav_horz ul li {
    width: 20%;
}
#nav_horz ul li.wider {
    width: 22%; /*  */
}
#nav_horz ul li.narrower {
    width: 18%; /*  */
}
}
/*@media screen and (max-width:500px) {
//#nav_horz ul li {
//    /* will this ever be reached with the meta tag used? */
/*/    width: 33.3%;
//}
//}*/

#nav_hambuger {
    display: none;
}

@media screen and (max-width:500px) {
#nav_horz ul li {
    /* will this ever be reached with the meta tag used? */
    width: 33.3%;
}
#nav_horz ul li.wider {
    width: 36.3%; /*  */
}
#nav_horz ul li.narrower {
    width: 30.3%; /*  */
}

#nav_hambuger {
    display: block;
}
#nav {
    display: none;
}

#nav_hambuger:hover ~ #nav {
    display: block;
}
#nav:hover { /* keeps displaying once activated */
    display: block;
}
/* but does not un-hover on touch interface, could do with JS */
}

#nav_horz span.down_arrow {
    font-size: 70%;
    vertical-align: sub;
    line-height: 0px;
}

/* Here are the original rules from the example
a:link, a:visited {
    text-decoration: none;
    color: #FFF;
    font-weight:bold;
}
ul {
    padding:0;
    margin:0;
    list-style: none;
    background:#000;
    height:36px;
}
ul li {
    float:left;
    position:relative;
}
ul li a, ul li a:visited {
    display:block;
    color:#fff;
    width:104px;
    height:auto;
    line-height:20px;
    padding:10px;
    text-align:center;
}
ul li a:hover {
    display:block;
    color:#000;
    background:#FFF;
    line-height:20px;
    padding:10px;
}
ul li ul, ul li:hover ul li ul {
    display: none;
}
ul li:hover ul {
    display:block;
    position:absolute;
    top:36px;
    left:0;
    height:auto;
}
ul li:hover ul li a {
    display:block;
    text-align:left;
    border-bottom:1px solid #FFF;
}
ul li:hover ul li:hover ul {
    display:block;
    position:absolute;
    left:124px;
    top:0;
}
*/