#navigate form.loginbox, ul#menubar { display: none }
#navigate form.loginbox.visible, ul#menubar.visible { display: inherit }

.touchmenu #menu {
  display: block;
  position: relative;
  top: 1em;
  height: inherit;
  margin: 0;
  border: none;
  font-size: inherit;
  color: #333;
}

.touchmenu ul#menubar {
  display: block;
  position: relative;
  top: 0;
  left: 0;
}

.touchmenu ul#menubar, .touchmenu #menu .menubag {
  position: inherit;
}

.touchmenu #menu li.menuhead {
  display: inherit;
  position: static;
  height: auto;
  margin: 0;
  padding: 0;
}

.touchmenu #menu li.menuhead+li.menuhead {
  margin-left: 0;
  border: none;
}

.touchmenu #menu a.menutitle, .touchmenu #menu a.menuactive {
  position: static;
  display: block;
  width: 100%;
  font-size: inherit;
}

.touchmenu #menu a, .touchmenu #menu .menubag a {
  background-color: transparent;
  text-align: left;
  color: #333;
}

.touchmenu #menu a.menutitle:hover, .touchmenu #menu a.menuactive,
.touchmenu #menu .menubag a:hover {
  background-color: #333;
  color: white;
}

.touchmenu #menu .menutitle span, .touchmenu #menu .menuactive span {
  display: inherit;
  height: inherit;
  margin-bottom: 0;
}

.touchmenu #menu .menubag {
  width: 20em;
  padding-left: 1em;
  display: none;
  visibility: visible;
  border-style: none none solid none;
  border-width: 0 0 1px 0 !important;
  border-color: #999;
}

.touchmenu #menu .menubag ul {
  margin: 0;
  padding: 0;
  border: none;
  background-color: transparent;
  color: inherit;
  font-size: inherit;
}

.touchmenu #menu .menubag.visible, .touchmenu #menu li { display: block }
.touchmenu #menu .menubag a { padding: 0 0 0 5px }

.touchmenu .loginbox { position: static; font-size: smaller }

.touchmenu {
  background-color: white;
  position: fixed;
  z-index: 9999;
  top: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  height: 100%;
  width: 0px;
  border-right: 2px solid #ccc;
  -webkit-transform: translateX(-12em);
  -moz-transform: translateX(-12em);
  transform: translateX(-12em);
  -webkit-transition: -webkit-transform 0.3s, width 0.3s;
  -moz-transition: -moz-transform 0.3s, width 0.3s;
  transition: transform 0.3s, width 0.3s;
  padding-top: 2em;
  font-size: 1.5em !important;
  line-height: 150%;
  opacity: 0.9;
}

.touchmenu.open {
  -webkit-transform: translateX(0px);
  -moz-transform: translateX(0px);
  transform: translateX(0px);
  width: 13em;
}

.touchmenu #menu ul, .touchmenu #menu li { width: 100%; margin: 0; padding: 0 }
.touchmenu #menu li a { width: 100%; padding-left: 5px }
.touchmenu #menu .menubag { padding: 0 }
.touchmenu #menuoffset { top: 0; left: 0; height: 160px !important }

a.touchtoggle {
  display: block;
  position: absolute;
  top: 1em;
  left: 0;
  font-size: 1.5em;
  color: #222 !important;
  font-style: normal !important;
  border: none;
  text-decoration: none;
  background-color: transparent;
  z-index: 10000;
}

a.touchtoggle:hover {
  text-decoration: none;
  border: none;
}

a.touchtoggle span:before {
  display: block;
  position: relative;
  height: 1em;
  width: 1em;
  text-align: center;
  content: "≡"; 
  font-family: "Courier New", Courier, mono;
  font-size: 150%;
}

a.touchtoggle span:before, a.touchtoggle.open span:before {
  background-color: transparent;
  color: #333;
}