


#mobile-toolbar { display:none; position:fixed; z-index:9; top:0; width:100%; background: #fff; border-bottom: 1px solid #ddd; }
#mobile-toolbar .logo { color:#333; }
#mobile-toolbar .logo { float:left;padding:8px 20px; }
#mobile-toolbar .logo img { height: 34px; width:auto; opacity:0.8; }
#mobile-toolbar .logo:hover img { opacity:1;}
.mobile-menu-button { display:none; float:right; color:#777; font-size:31px; padding:10px 16px; }
.mobile-menu-button:hover { color:#333; }


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

  .mobile-menu-button { display:block;}
  #mobile-toolbar {display:block;}

  nav#main-nav { display:none; position:fixed; width:250px; top:0; right:0; padding: 0 0 0 0px; border:0; box-shadow: 0 3px 14px rgba(0,0,0,.06) }
  nav div { display:block; float:none; }
  nav .container { padding: 14px 10px; }
  nav .title { display:block; float:none; padding: 2px 0; margin:0 0 8px 0; }
  /*nav .logo {display: none;}*/
  nav .links {display: block; float:none;}
  nav .links a {display: block; float:none; padding: 5px 0;}
  nav .links a.active { padding: 5px 4px; background: #eee; border:0; border-radius:0; margin: 0 -4px;}
  nav .status {display: block; float:none; font-size:13px; padding: 10px 0;}
  nav .status a, nav .status span {display: block; float:none;}
  nav .mobile-menu-button { float:right; color:#333; display:block; }
  nav .status a.sign-out { font-size:15px; color: #888; border:0; padding:8px 0; margin:8px 0 0 0; display:inline-block; border-top: 1px solid #ddd; border-radius: 0; }
  nav .admin {display: block; float:none; font-size:13px; padding: 10px 0;}

  nav#main-nav .main-container {border: 1px solid #ddd; border-top:0; border-right:0; margin: 0; padding: 0 0 0 20px; line-height: 200%; }

  nav .inner { display: none; float:left; clear:left; padding-bottom: 20px; }
  nav.open .inner { display: block; }
  
  nav .admin-container { display: block; float:none; }
  nav .admin-container .admin { display: block; float:none; }

}
@media screen and (min-width: 992px) {

  nav { display:block !important; }

}



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

  #page-home .station .details { padding: 20px 10px;}
  #page-home .stations { padding: 0; }

}



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

  #page-invoice-view {padding: 10px}
  #page-invoice-view .invoice-container {padding: 20px}

}
