/**********
* Header (top bar)
**********/
HEADER {
  position: relative;
  z-index: 5;
  height: $header-height;
  background-color: #393d48;

  NAV {
    &>A, &>.btn-group>A {
      float: left;
      height: ($header-height/2);
      line-height: ($header-height/2);
      padding: 0 20px;
      vertical-align: top;
      font-weight: normal;
      text-transform:uppercase;
      border-bottom: 2px solid transparent;
      color: #858999;
      font-size:13px;

      &:hover,
      &:focus,
      &:visited,
      &:active {
        color: #858999;
      }


      &.active {
        color: white;
        background-color: #292c36;
      }
    }
  }

  .top-row {
    height: ($header-height/2);

    NAV {
      font-size: 14px;
    }

    .logo {
      cursor: pointer;
      float: left;
      height: ($header-height/2);
      width: 68px;
      background-image: url('images/logo.svg');
      background-position: center center;
      background-repeat: no-repeat;
    }

    .project-btn {
      margin-right: 10px;
      border-radius: 3px;
      max-width: 200px;

      .dropdown-toggle {
        height: 50px;
        padding: 0;
        margin-right: 10px;
        max-width: 100%;
        color: #858999;
      }

      .dropdown-menu {
        max-height: 300px;
        max-width: 300px;
        overflow-y: auto;
      }
    }

    .user-toggle {
      cursor: pointer;
      position: relative;
      z-index: 1001; /* These have to be > 990 for bootstrap on touch devices */
    }

    .project-menu {
      margin-top: -13px;
      z-index: 1000; /* These have to be > 990 for bootstrap on touch devices */
      padding-top: 0;
      border-radius: 5px;
    }

    .user-menu {
      margin-top: -13px;
      z-index: 1000; /* These have to be > 990 for bootstrap on touch devices */
      padding-top: 0;
      width: 250px;
      border-radius: 5px;
    }

    .user-dropdown-arrow {
      color: #858999;
      position: relative;
      left: -2px;
    }

    .user-noauth,
    .user-auth {
      border-top-left-radius: 5px;
      border-top0right-radius: 5px;
      color: white;
      margin-bottom: 5px;
    }

    .user-noauth {
      background-color: #de6e79;
      text-align: center;
    }

    .user-auth {
      position: relative;
      background-color: #9eadb6;
      padding: 10px 0 10px 20px;

      .gh-block {
        margin-right: 60px;
      }

      .gh-block-name {
        A, A:hover, A:focus, A:visited, A:active {
          color: white;
        }
      }

      .gh-block-detail {
        color: #dfe9ee;
      }

      .user-logout {
        background-color: #899ba7;
        border-top-right-radius: 5px;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        padding: 14px 0 0 0;
        width: 60px;
        color: #dfe9ee;
        font-size: 12px;
        text-align: center;

        I {
          font-size: 24px;
          line-height: 20px;
          position: relative;
          left: 3px;
        }
      }
    }
  }

  .bottom-row {
    height: ($header-height/2);
    background-color: #292c36;

    NAV {
      font-size: 14px;
    }
  }

  H3 {
    margin: 0;
    line-height: ($header-height/2);
    color: #fff;
    padding-left: 20px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;

    A,
    A:visited,
    A:hover,
    A:focus {
      cursor: pointer;
      text-decoration: none;
      color: $header-link-text;
    }
  }

  .right {
    float: right;
    height: ($header-height/2);
    line-height: ($header-height/2);
    vertical-align: top;
    padding: 0px 10px 0 0;
  }
}

