ul.nav {

display: inline-block;

}

.nav {

padding-left: 0;
margin-bottom: 0;
list-style: none;

> li {
  position: relative;
  display: block;

  > a:not(.button) {
    position: relative;
    display: block;
    padding: 10px 15px;

    &:hover,
    &:focus {
      text-decoration: none;
      background-color: #eee;
    }
  }
}

> li.disabled {
  > a:not(.button) {
    color: #777;
  }
}

// Tabs
&.tabs,
&.nav-tabs {
  border-bottom: 1px solid #ddd;
  width: 100%;

  > li {
    float: left;
    margin-bottom: -1px;

    > a:not(.button) {
      margin-right: 2px;
      line-height: 1.42857143;
      border: 1px solid transparent;
      border-radius: 4px 4px 0 0;

      &:hover {
        border-color: #eee #eee #ddd;
      }
    }

    &.active > a:not(.button) {
      &,
      &:hover,
      &:focus {
        color: #555;
        cursor: default;
        background-color: #fff;
        border: 1px solid #ddd;
        border-bottom-color: transparent;
      }
    }
  }

  // Justified Tabs
  &.justified,
  &.nav-justified {
    border-bottom: 0;

    > li {
      float: none;

      @media (min-width: 768px) {
        display: table-cell;
        width: 1%;
      }

      > a {
        margin-bottom: 5px;
        text-align: center;
        margin-right: 0;
        border-radius: 4px;

        @media (min-width: 768px) {
          margin-bottom: 0;
          border-bottom: 1px solid #ddd;
          border-radius: 4px 4px 0 0;
        }
      }

      &.active > a,
      &.active > a:hover,
      &.active > a:focus {
        border: 1px solid #ddd;

        @media (min-width: 768px) {
          border-bottom-color: #fff;
        }
      }
    }

    > .dropdown .dropdown-menu {
      top: auto;
      left: auto;
    }
  }
}

// Pills
&.pills,
&.nav-pills {
  > li {
    float: left;

    > a {
      border-radius: 4px;
    }

    & + li {
      margin-left: 2px;
    }

    &.active > a,
    &.active > a:hover,
    &.active > a:focus {
      color: #fff;
      background-color: $orange;
    }
  }
}

// Veritcal
&.vertical,
&.nav-vertical {
  width: 100%;

  li.active a,
  li.active a:hover,
  li.active a:focus {
    color: #fff;
    background-color: $orange;
  }
}

}