/*********************************************************************************/
/* Mobile (titleBar)                                                             */
/*********************************************************************************/
/* MobileUI */
#titleBar {
  color: #fff;
  background: url("images/bg04.jpg");
  box-shadow: inset 0px -20px 70px 0px rgba(200, 220, 245, 0.1), inset 0px -1px 0px 0px rgba(255, 255, 255, 0.1), 0px 1px 7px 0px rgba(0, 0, 0, 0.6);
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.75);
}

#titleBar .title {
  display: block;
  text-align: center;
  font-size: 1.2em;
  font-weight: 400;
  line-height: 44px;
}

#titleBar .toggle {
  position: absolute;
  left: 0;
  top: 0;
  width: 80px;
  height: 60px;
}

#titleBar .toggle:after {
  content: '';
  display: block;
  position: absolute;
  top: 6px;
  left: 6px;
  color: #fff;
  background: rgba(255, 255, 255, 0.025);
  box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.1), inset 0px 0px 0px 1px rgba(255, 255, 255, 0.05), inset 0px -8px 10px 0px rgba(0, 0, 0, 0.15), 0px 1px 2px 0px rgba(0, 0, 0, 0.25);
  text-shadow: -1px -1px 1px black;
  width: 49px;
  height: 31px;
  border-radius: 8px;
}

#titleBar .toggle:before {
  content: '';
  position: absolute;
  width: 20px;
  height: 30px;
  background: url("images/mobileUI-site-nav-opener-bg.svg");
  top: 15px;
  left: 20px;
  z-index: 1;
  opacity: 0.25;
}

#titleBar .toggle:active:after {
  background: rgba(255, 255, 255, 0.05);
}

#navPanel {
  background: url("images/bg04.jpg");
  box-shadow: inset -1px 0px 0px 0px rgba(255, 255, 255, 0.25), inset -2px 0px 25px 0px rgba(0, 0, 0, 0.5);
  text-shadow: -1px -1px 1px black;
}

#navPanel .link {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 1.25em;
  line-height: 2em;
  padding: 0.5em 1.5em 0.5em 1.5em;
  border-top: solid 1px #373d40;
  border-bottom: solid 1px rgba(0, 0, 0, 0.4);
}

#navPanel .link:first-child {
  border-top: 0;
}

#navPanel .link:last-child {
  border-bottom: 0;
}