.nav {
  list-style: none;
  margin-bottom: @baseLineHeight;
  .clearfixHack();

  li {
    .float-left(@rtl);
    margin: 0;
    padding: 0;

    a {
      display: block;
      padding: @spacingS @spacingXl;
      text-decoration: none;

      .transition(background-color .15s);
    }

    &.active {
      a {
        cursor: default;
      }
    }

    &.side-links {
      .float-right(@rtl);

      a {
        .padding-left(@rtl, 0);
        .padding-right(@rtl, @spacingS);
        padding-bottom: 0;
        color: @gray;

        .vicon {
          margin: 0;
          color: lighten(@black, 60%);
        }

        &:hover,
        &:focus {
          text-decoration: underline;
          color: @linkColorHover;
          background: none;

          .vicon {
            color: @black;
          }
        }
      }
    }
  }
}

.nav-tabs {
  padding-left: @spacingS;
  border-top: 1px solid tint(@blueSoft, 63%);
  border-bottom: 1px solid tint(@blueSoft, 63%);
  background: tint(@blueSoft, 92%);

  li {
    a {
      &:hover,
      &:focus {
        background: tint(@blueSoft, 75%);
      }
    }

    &.active {
      a {
        padding-top: (@spacingS + 2);
        padding-bottom: (@spacingS + 1);
        margin: -3px -1px;
        border: 1px solid tint(@blueSoft, 63%);
        border-bottom: none;
        color: @black;
        background: @white;
      }
    }
  }
}

.nav-tabs-secondary {
  border-bottom: 1px solid tint(@blueSoft, 70%);
  font-size: (@baseFontSize * 1.1);

  &:after {
    content: "";
    position: relative;
    top: 1px;
    width: 100%; height: 1px;
    box-shadow: 0 0 2px fade(@black, 10%);
  }

  li {
    a {
      position: relative;
      padding: @spacingS @spacingL;
      margin-bottom: -2px;

      &:hover,
      &:focus {
        background: tint(@blueSoft, 85%);
      }
    }

    &.active {
      a {
        color: @black;

        &:before, &:after {
          content: "";
          position: absolute;
          z-index: 5;
          left: 50%; bottom: 0;
          width: 0; height: 0;
          border-style: solid;
        }

        &:before {
          margin-left: -10px;
          border-color: transparent transparent tint(@blueSoft, 70%);
          border-width: 0 10px 10px;
        }

        &:after {
          bottom: -2px;
          margin-left: -10px;
          border-color: transparent transparent @white;
          border-width: 0 10px 10px;

          .popin & {
            border-bottom-color: @pageBg;
          }
        }

        &:hover,
        &:focus {
          background: none;
        }
      }
    }
  }
}

.nav-pills {
  border-top: 1px solid tint(@blueSoft, 63%);
  border-bottom: 1px solid tint(@blueSoft, 63%);
  background: tint(@blueSoft, 92%);
  margin: 0;

  li {
    a {
      margin: @spacingXs @spacingS;
      background: @panelBackground;
      border: 1px solid @panelBackground;
      border-radius: @borderRadiusS;
      line-height: @baseLineHeight;
      padding: @spacingXs @spacingS;

      &:hover,
      &:focus {
        background: lighten(@borderColor, 5%);
        border-color: lighten(@borderColor, 5%);
      }
    }

    &.active a {
      color: @black;
      border: 1px solid @borderColor;
      background: @white;
      cursor: default;
    }

    &.side-links {
      a {
        border: none;
      }
    }
  }
}

.nav-menu {
  @_black:#333;
  border-radius: @borderRadiusS;
  background: @white;
  box-shadow: 1px 1px 2px fade(@black, 20%);

  li {
    a {
      position: relative;
      padding: @spacingM @spacingXl;
      color: @_black;
      font-size: 13px;
      &:hover,
      &:focus {
        background: #f7f7f7;
        color: @linkColorHover;
      }
    }

    &:first-child {
      a {
        border-radius: @borderRadiusS 0 0 @borderRadiusS;
      }
    }

    &.active {
      a {
        background: @_black;
        color: @white;
      }
    }
  }
}

.nav-tabs-section {
  .section {
    display: block;
  }

  .loader {
    display: none;
  }

  &.loading {
    .section {
      display: none;

      &.active {
        display: block;
      }
    }

    .loader {
      display: block;
    }
  }
}