/*--  filename = menu_one_button_down.html  --*/
/*--  http://stackoverflow.com/questions/7814186/drop-down-menu-that-opens-up-upward-with-pure-css  --*/

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
    margin:0px;
    padding:0px;
}

html {
    box-sizing: border-box;
}

/*--------------------  Hamburger icon  -----------------*/
div.fixedMenuButton {  /*--  Fixes position of main button on window.  --*/
    position: fixed;
    top: 50px;  /*--  Button sticks 75px down from window edge.  --*/
    left: 4px;  /*--  Button sticks to left margin.  Controls L-R of red button.  --*/
    z-index: 999999;  /*--  Controls order of stacking of layers.  Higher value is on top.  --*/
    }
    
/*------------------------------------------------------*/
.box-shadow-menu {     /*--  Creats red hamburger menu icon by making three background black bars. --*/
  position: relative;
  padding-left: 1.00em;   /*--  Larger moves black bars left within red box.  --*/
}
.box-shadow-menu:before {     /*--  Hamburger menu icon.  See menu CSS for icon width.  --*/
  content: "";           /*--  Don't touch.  --*/
  position: absolute;
     left: 0px;
     top: 0.25em;
     width: 1em;        /*--  Width of black bars.  --*/
     height: 0.15em;    /*--  Height of black bars.  --*/
  background: black;
  box-shadow: 
    0 0.25em 0 0 black,
    0 0.5em 0 0 black;
}
/*----------------------------------------------------*/

#menu * {   /*--  Selects all elements  --*/
    /*--  border: 3px solid green;  --*/ /*--  For test. Surrounds all red buttons in menu.  --*/
    font: 22px georgia;  /*--  For main menu button  --*/
    list-style-type: none;
    }

#menu a { /*--  Selects all <a> elements except index.html table w/ 2 links --*/
    display: block;
    text-align: center;
    text-decoration: none;
    background: #a90329; /*-- red --*/
    color: white;
    
    -webkit-box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
    box-shadow:         0px 1px 1px rgba(0,0,0,0.1);
    -webkit-border-radius: 5px;
    border-radius: 5px;
       
    background: #a90329;  /*-- For browsers that do not support linear-gradient. --*/
    background-image: -webkit-linear-gradient(   bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image:    -moz-linear-gradient(   bottom, #a90329 0%,#8f0222 44%,#6d0019 100%); /* For Firefox (3.6 to 15) */
    background-image:      -o-linear-gradient(   bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
    background-image:         linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
    }

#menu a:hover {  /*--  Selects buttons when moused over  --*/
    color: white;
    background: #c70331;  /*-- red --*/
    background-image: -webkit-linear-gradient(   bottom, #c72c48 0%,#d1042d 44%,#c73b53 100%); /* For Chrome 25 and Safari 6, iOS 6.1, Android 4.3 */
    background-image:    -moz-linear-gradient(   bottom, #c72c48 0%,#d1042d 44%,#c73b53 100%); /* For Firefox (3.6 to 15) */
    background-image:      -o-linear-gradient(   bottom, #c72c48 0%,#d1042d 44%,#c73b53 100%);
    background-image:         linear-gradient(to bottom, #c72c48 0%,#d1042d 44%,#c73b53 100%);
    }

#menu ul li ul li {  /*--  Level 2 & 3  --*/
    width: 125px;        /*--  Defines uniform width of Level 2 & 3 buttons.  --*/
    padding-top:   2px;  /*--  Defines white space above L2 buttons.  --*/
    padding-bottom:2px;  /*--  Defines white space below L2 buttons.  --*/
    padding-left:  4px;  /*--  Defines white space left of L2 buttons.  Recent value = 6  OLD value = 2--*/
    padding-right: 1px;  /*--  Defines white space right of L2 buttons.  --*/
    background: transparent;     /*--  Level 2 & 3 color between buttons. Black provides button separation.  --*/
    }

#menu ul li ul li a {  /*--  Level 2 & 3 links  --*/
    font: 15px arial;
    font-weight:normal;
    font-variant: small-caps;
    padding-top:2px;
    padding-bottom:2px;
    }

#menu ul li {          /*--  Level 1 main menu hamburger red icon button  --*/
    width: 30px;   /*-- Does work  --*/
    /*--  height: 30px;  --*/  /*-- Adds too much vertical space between buttons.  --*/
    }

#menu ul li a {  /*--  Works on all menu buttons, but funny.  Affects red icon most. --*/
padding: 1px;  /*--  Vertical "red space" on main MENU button.  --*/
    }


#menu ul li ul, #menu:hover ul li ul, #menu:hover ul li:hover ul li ul{
    display:none;
    }

#menu:hover ul, #menu:hover ul li:hover ul, #menu:hover ul li:hover ul li:hover ul {
    display:block;  /*--  Critical  --*/
    }

#menu:hover ul li:hover ul li:hover ul {
    margin-left: 122px;  /*--  Controls dropdown offset to right.  --*/
    margin-top: -22px;   /*--  Controls vert position of L3 relative to L2.  --*/
    /*--  margin-left effects how quickly mouse must be moved left to right.
    This is also affected by CPU slowdown from slideshow loads.  --*/
    }

#menu:hover ul li:hover ul {
    position: absolute;  /*--  Critical.  Controls vert spacing of L2 L3  --*/
    }
    
#menu>ul>li:hover>ul {
    top:100%;  /*--  Unknown  --*/
    }