/* This menu is based on the examples found here  http://www.seoconsultants.com/css/menus/horizontal/ */

/* ============================================================
   DESKTOP MENU
   ============================================================ */

#sitemenu {
  width: 750px;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
  overflow: visible;
}

/* Clearfix to replace overflow:hidden for float collapse */
#sitemenu::after {
  content: "";
  display: block;
  clear: both;
}

#sitemenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 125px;
  float: left;
}

#sitemenu a {
  font: bold 11px/16px arial, helvetica, sans-serif;
  text-align: left;
  display: block;
  border-width: 1px;
  border-style: solid;
  border-color: #ccc #888 #555 #bbb;
  margin: 0;
  padding: 2px 3px;
}

#sitemenu a {
  color: #000;
  background: #efefef;
  text-decoration: none;
}

#sitemenu a:hover {
  color: #a00;
  background: #fff;
}

#sitemenu li { position: relative; }
#sitemenu ul ul { position: absolute; z-index: 500; left: 0; }
#sitemenu ul ul ul { position: absolute; top: 10%; left: 100%; }

div#menu li:hover { cursor: pointer; z-index: 100; }

div#sitemenu ul ul,
div#sitemenu ul li:hover ul ul,
div#sitemenu ul ul li:hover ul ul
    { display: none; }

div#sitemenu ul li:hover ul,
div#sitemenu ul ul li:hover ul,
div#sitemenu ul ul ul li:hover ul
    { display: block; }

/* Icon Styles */
#sitemenu li a.submenu           { background: #efefef url("https://jhollin1138.com/sitemenu/v_arrow.gif") no-repeat right; }
#sitemenu li a.submenu:hover     { background: #fff    url("https://jhollin1138.com/sitemenu/v_arrow.gif") no-repeat right; }
#sitemenu li ul a.submenu        { background: #efefef url("https://jhollin1138.com/sitemenu/h_arrow.gif") no-repeat right; }
#sitemenu li ul a.submenu:hover  { background: #fff    url("https://jhollin1138.com/sitemenu/h_arrow.gif") no-repeat right; }

/* Copyright footnote */
div.copyright_text {
  color: #999999;
  font-size: 8pt;
  font-family: verdana, helvetica, arial, sans-serif;
  text-align: center;
  background-color: transparent;
}

/* ============================================================
   HAMBURGER BUTTON (hidden on desktop)
   ============================================================ */

#sitemenu-toggle {
  display: none;
  background: #efefef;
  border: 1px solid #888;
  color: #000;
  font: bold 14px arial, helvetica, sans-serif;
  padding: 8px 14px;
  cursor: pointer;
  margin: 6px auto;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

/* ============================================================
   MOBILE MENU
   ============================================================ */

@media screen and (max-width: 750px) {

  /* Switch the outer container to full width */
  #sitemenu {
    width: 100%;
    box-sizing: border-box;
    padding: 0;
    overflow: visible;
  }

  /* Show the hamburger button */
  #sitemenu-toggle {
    display: block;
  }

  /* Hide the UL list by default on mobile;
     shown when .mobile-open is added by JS */
  #sitemenu > ul {
    display: none;
    float: none;
    width: 100%;
    border-top: 1px solid #ccc;
  }

  #sitemenu.mobile-open > ul {
    display: block;
  }

  /* All links go full width, stacked vertically */
  #sitemenu ul {
    width: 100%;
    float: none;
    position: static;
  }

  #sitemenu a {
    font-size: 13px;
    line-height: 1.6;
    padding: 8px 10px;
    border-left: none;
    border-right: none;
  }

  /* Sub-menus: always visible and indented on mobile */
  div#sitemenu ul ul,
  div#sitemenu ul li:hover ul ul,
  div#sitemenu ul ul li:hover ul ul {
    display: block;
  }

  #sitemenu ul ul {
    position: static;
    z-index: auto;
    left: auto;
    padding-left: 16px;
    border-top: none;
  }

  #sitemenu ul ul ul {
    position: static;
    top: auto;
    left: auto;
    padding-left: 16px;
  }

  /* Remove dropdown arrows on mobile */
  #sitemenu li a.submenu,
  #sitemenu li a.submenu:hover,
  #sitemenu li ul a.submenu,
  #sitemenu li ul a.submenu:hover {
    background-image: none;
  }

}

@media screen and (max-width: 480px) {

  #sitemenu a {
    font-size: 14px;
    padding: 10px 12px;
  }

}