nav {
  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  *zoom: 1;
  padding-top: 1.5em;
  padding-bottom: 1.5em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: #1c1c1c; }
  nav:before, nav:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  nav:after {
    clear: both; }

a, a:hover {
  text-decoration: none; }

.brand {
  line-height: 1em; }
  @media (max-width: 500px) {
    .brand {
      margin-left: 4px; } }
  @media (min-width: 768px) {
    .brand {
      float: left;
      width: 30%; } }

.account-name, .logo {
  font-size: 16px;
  font-weight: bold; }
  @media (min-width: 769px) {
    .account-name, .logo {
      font-size: 19px; } }

.account-name {
  color: white; }

.logo {
  position: relative;
  display: inline-block;
  margin-top: -1.5em;
  margin-bottom: -1.5em;
  margin-right: 1em;
  width: 64px;
  height: 64px;
  background: url("../../img/logo_short.png") no-repeat; }
  @media (min-width: 769px) {
    .logo {
      margin-top: -1.3em;
      margin-bottom: -1.3em; } }
  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .logo {
      background: url("../../img/logo_short_retina.png") no-repeat;
      background-size: 64px 64px; } }

.nav-desktop {
  /**
   * For IE 6/7 only
   * Include this rule to trigger hasLayout and contain floats.
   */
  *zoom: 1;
  float: left;
  width: 70%; }
  @media (max-width: 1081px) {
    .nav-desktop {
      display: none; } }
  .nav-desktop:before, .nav-desktop:after {
    content: " ";
    /* 1 */
    display: table;
    /* 2 */ }
  .nav-desktop:after {
    clear: both; }
  .nav-desktop ul {
    float: right; }
  .nav-desktop li {
    display: inline;
    padding-right: 10px; }
    .nav-desktop li:last-child {
      padding-right: 0; }
    .nav-desktop li.active a {
      color: white;
      background-color: #444444; }
      .nav-desktop li.active a:hover {
        background-color: #555;
        text-decoration: none; }
  .nav-desktop a {
    font-size: 15px;
    font-weight: 400;
    color: #9a9a9a;
    background-color: #1c1c1c;
    padding: 0.4em 0.8em;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px; }
    .nav-desktop a:hover {
      color: #cccccc;
      background-color: #2b2b2b;
      text-decoration: none; }

#logout:hover {
  background-color: #641104; }

.menu {
  display: inline-block;
  position: absolute;
  top: 0.75em;
  right: 0.6em;
  color: white;
  font-size: 1.2em;
  background-color: #444444;
  width: 38px;
  height: 35px;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px; }
  @media (min-width: 1082px) {
    .menu {
      display: none; } }
  .menu span {
    position: relative;
    top: 5px;
    left: 13px; }
  .menu:hover {
    background-color: #0080ff; }

.nav-mobile {
  display: none;
  width: 100%;
  position: static;
  margin-top: 2.5em; }
  .nav-mobile li {
    width: 100%;
    border-bottom: 1px solid #444444;
    padding: 0.6em 0; }
    .nav-mobile li:last-child {
      border-bottom: none;
      padding-bottom: 0; }
    .nav-mobile li a {
      font-size: 16px;
      font-weight: 400;
      color: #9a9a9a;
      -webkit-border-radius: 4px;
      -moz-border-radius: 4px;
      border-radius: 4px; }