nav.scss

.nav-links {
  padding: 0;
  margin: 0;
  list-style: none;
  height: auto;
  border-bottom: 1px solid $border-color;

  li {
    display: inline-block;

    a {
      display: inline-block;
      padding: 14px;
      padding-top: $gl-padding;
      padding-bottom: 11px;
      margin-bottom: -1px;
      font-size: 15px;
      line-height: 28px;
      color: #959494;
      border-bottom: 2px solid transparent;

      &:hover, &:active, &:focus {
        text-decoration: none;
        outline: none;
      }
    }

    &.active a {
      color: #000000;
      border-bottom: 2px solid #4688f1;
    }

    .badge {
      font-weight: normal;
      background-color: #eee;
      color: #78a;
    }
  }
}

.top-area {
  border-bottom: 1px solid #EEE;

  .nav-text {
    padding-top: 16px;
    padding-bottom: 11px;
    display: inline-block;
    width: 50%;
    line-height: 28px;
  }

  .nav-links {
    display: inline-block;
    width: 50%;
    margin-bottom: 0px;
    border-bottom: none;
  }

  .nav-controls {
    width: 50%;
    display: inline-block;
    float: right;
    text-align: right;
    padding: 11px 0;
    margin-bottom: 0px;

    > .dropdown {
      display: inline-block;
    }

    input {
      display: inline-block;
      width: calc(100% - 151px);

      /* Small devices (tablets, 768px and up) */
      @media (min-width: $screen-sm-min) { width: 150px; }

      /* Medium devices (desktops, 992px and up) */
      @media (min-width: $screen-md-min) { width: 200px; }

      /* Large devices (large desktops, 1200px and up) */
      @media (min-width: $screen-lg-min) { width: 300px; }
    }

    .btn-new {
      width: 135px;
      margin-left: 10px;
      float: right;
    }

    .dropdown-toggle.btn {
      margin-top: -3px;
    }
  }

  @media (max-width: $screen-xs-max) {
    .nav-controls {
      padding-top: 15px;
    }
  }
}