body {

  -webkit-animation: bugfix infinite 1s;
  /* needed for checkbox hack */
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}
/* needed for checkbox hack */

/*  note - usable colors

eee  grey
fefefe    hover white
fffeee    yellow
ffefed    orange
f1ffed    green 
ededff    purple 
fbedff    pink
edffff    cyan
efefef    grey


 */


/*  need this section */

#navtop {
  position: relative;
}
#navtop ul {
  display: none;
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#navtop ul li a {
  display: block;
  padding: .8em;
  /* background: #ffffff;   not needed  */
  color: #222;              /*  NO EFFECT  see links below  */
  text-decoration: none;
  /*border-right: 1px solid #ffffff;  divider was black*/
  font-size: .9em;
  text-align: center;
border-radius: 12px;
padding: 7px 10px
margin: 4px 4px 4px 4px;
width: 140px;
height: flex;
box-shadow: 0px 0px 2px  #999, 0px 0px 2px #999;
margin: 4px auto;
  
}




/*  below is color of top link buttons 

THEY ARE ALL YELLOW FOR SOME REASON? 

Confusion over "nav" being a style name
need to redo everything */

navtop li:nth-child(1) a { /* orange */
  background-color: #ffefed;  
}

navtop li:nth-child(2) a { /* cyan */
  background-color: #edffff;
}

navtop li:nth-child(3) a { /* yellow */
  background-color: #fffeee;
}

navtop li:nth-child(4) a { /* green */
  background-color: #f1ffed;
}






#navtop ul li a:hover {
  background-color: #fefefe;   /*  hover top buttons */
}

  


#navtop ul li:last-of-type a {
  border-right: 0px;
}
#navtop ul li ul li a {
  padding-left: 1.5em;
}
#navtop ul li ul li ul li a {
  padding-left: 3.125em;
}
#navtop input.trigger {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#navtop input.trigger:checked ~ ul, #navtop input.trigger:checked ~ ul li ul {
  display: block !important;
}
@media (min-width: 36.5em) {
  #navtop input.trigger:checked ~ ul, #navtop input.trigger:checked ~ ul li ul {
    /* older flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    /* newer flexbox */
    display: flex;
    flex-direction: row;
  }
}
#navtop label {
  position: relative;
  display: block;
  min-height: 2em;
  padding: .45em;
  font-size: .9em;
  margin: 0;
  cursor: pointer;
  background: #fff;
  line-height: 2em;
  color: #111;    /*  no effect  */
  text-align: left!important;
}
#navtop label:after {
  position: absolute;
  right: .2em;
  top: .1em;
  content: "\2261";
  font-size: 3em;
  font-weight: 300;
  color: #aa0000;    /*  hamburger color   upper one */
}
@media (min-width: 36.5em) {
  #navtop ul {
    /* older flexbox */
    display: -ms-flexbox;
    flex-direction: -ms-row;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    /* newer flexbox */
    display: flex;
    flex-direction: row;
  }
  #navtop ul li {
    position: relative;
    text-align: center;
    /* older flexbox */
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    /* newer flexbox */
    flex: 1;
  }
  #navtop ul li ul {
    display: none !important;
    position: absolute;
    top: 3.0625em;
    left: 0;
    display: block;
    width: 12.5em;
    z-index: 200;
  }
  #navtop ul li ul li {
    text-align: left;
  }
  #navtop ul li ul li ul {
    z-index: 300;
    top: 0px;
    left: 12.4em;
  }
  #navtop ul li ul li ul li a {
    padding-left: 30px !important;
  }
  #navtop ul li:hover > ul {
    display: block !important;
  }
  #navtop label {
    display: none;
  }
}









#nav {
  position: relative;
}
#nav ul {
  display: none;
  width: 100%;
  list-style: none;
  margin: 0px;
  padding: 0px;
}
#nav ul li a {
  display: block;
  padding: .8em;
  /* background: #ffffff;   not needed  */
  color: #222;              /*    link text  */
  text-decoration: none;
  /*border-right: 1px solid #ffffff;  divider was black*/
  font-size: .9em;
  text-align: center;
border-radius: 18px;
padding: 7px 13px:
margin: 4px 4px 4px 4px;
width: 110px;
height: flex;
box-shadow: 0px 0px 2px  #ccc, 0px 0px 2px #ccc;
margin: 4px auto 2px auto;
  
}

/*  this WAS used to set different colors on the nav buttons
set the color on each actual button on the html


nav li:nth-child(1) a {
  background-color: #fffeee; 
}

nav li:nth-child(2) a { 
  background-color: #fffeee;
}

nav li:nth-child(3) a { 
  background-color: #fffeee;
}

nav li:nth-child(4) a { 
  background-color: #fffeee;
}


nav li:nth-child(5) a { 
  background-color: #fffeee;
}


nav li:nth-child(6) a { 
  background-color: #fffeee;
}


nav li:nth-child(7) a { 
  background-color: #fffeee;
}


 */

#nav ul li a:hover {
  background: #fefefe;   /*  hover nclub buttons */
}
#nav ul li:last-of-type a {
  border-right: 0px;
}
#nav ul li ul li a {
  padding-left: 1.5em;
}
#nav ul li ul li ul li a {
  padding-left: 3.125em;
}
#nav input.trigger {
  position: absolute;
  top: -9999px;
  left: -9999px;
}
#nav input.trigger:checked ~ ul, #nav input.trigger:checked ~ ul li ul {
  display: block !important;
}
@media (min-width: 36.5em) {
  #nav input.trigger:checked ~ ul, #nav input.trigger:checked ~ ul li ul {
    /* older flexbox */
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    /* newer flexbox */
    display: flex;
    flex-direction: row;
  }
}
#nav label {
  position: relative;
  display: block;
  min-height: 2em;
  padding: .45em;
  font-size: .9em;
  margin: 0;
  cursor: pointer;
  background: #fff;
  line-height: 2em;
  color: #000;
  text-align: left!important;
}
#nav label:after {
  position: absolute;
  right: .2em;
  top: .1em;
  content: "\2261";
  font-size: 3em;
  font-weight: 300;
  color: #aa0000;  /*  hamburger color  lower one  */
}
@media (min-width: 36.5em) {
  #nav ul {
    /* older flexbox */
    display: -ms-flexbox;
    flex-direction: -ms-row;
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    /* newer flexbox */
    display: flex;
    flex-direction: row;
  }
  #nav ul li {
    position: relative;
    text-align: center;
    /* older flexbox */
    -ms-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    /* newer flexbox */
    flex: 1;
  }
  #nav ul li ul {
    display: none !important;
    position: absolute;
    top: 3.0625em;
    left: 0;
    display: block;
    width: 12.5em;
    z-index: 200;
  }
  #nav ul li ul li {
    text-align: left;
  }
  #nav ul li ul li ul {
    z-index: 300;
    top: 0px;
    left: 12.4em;
  }
  #nav ul li ul li ul li a {
    padding-left: 30px !important;
  }
  #nav ul li:hover > ul {
    display: block !important;
  }
  #nav label {
    display: none;
  }
}