/* Tabs ---------------------- */

  .tabs { list-style: none; border-bottom: solid 1px darken($white, 10%); display: block; height: $tabHeight; padding: 0; margin-bottom: 20px;
    &.contained { margin-bottom: 0; margin-left: 0; }

    dt, li.section-title { color: darken($white, 30%); cursor: default; display: block; float: $defaultFloat; font-size: $tabTermFontSize; height: $tabHeight; line-height: $tabHeight; padding: 0; padding-#{$defaultOpposite}: 9px; padding-#{$defaultFloat}: 20px; font-weight: normal; width: auto; text-transform: uppercase;
      &:first-child { padding: 0; padding-#{$defaultOpposite}: 9px; }
    }

    dd, li { display: block; float: $defaultFloat; padding: 0; margin: 0;
      a { color: lighten($txtColor, 30%); display: block; font-size: ms(0); height: $tabHeight; line-height: $tabHeight; padding: 0px ms(1) * 1.4;
        &:focus { font-weight: bold; color: $mainColor; }
      }
      &.active { border-top: 3px solid $mainColor; margin-top: -3px;
        a { cursor: default; color: lighten($txtColor, 10%); background: #fff; border-#{$defaultFloat}: 1px solid darken($white, 10%); border-#{$defaultOpposite}: 1px solid darken($white, 10%); font-weight: bold; }
      }
      &:first-child { margin-#{$defaultFloat}: 0; }
    }

    &.vertical { height: auto; border-bottom: 1px solid darken($white, 10%);
      dt, dd, li { float: none; height: auto; }

      dd, li { border-#{$defaultFloat}: 3px solid darken($white, 20%);
        a { background: darken($white, 5%); border: none; border: 1px solid darken($white, 10%); border-width: 1px 1px 0 0; color: #555; display: block; font-size: ms(0); height: auto; line-height: 1; padding: 15px 20px; @include box-shadow(0 1px 0 $shinyEdge inset);
        }
        &.active { margin-top: 0; border-top: 1px solid lighten($black, 30%); border-#{$defaultFloat}: 4px solid lighten($black, 10%);
          a { background: lighten($black, 30%); border: none; color: #fff; height: auto; margin: 0; position: static; top: 0; @include box-shadow(0 0 0); }
        }
        &:first-child a.active { margin: 0; }
      }
    }

    &.pill { border-bottom: none; margin-bottom: 10px;
      dd, li { margin-#{$defaultOpposite}: 10px;
        &:last-child { margin-#{$defaultOpposite}: 0; }
        a { @include border-radius(1000px); background: darken($white, 10%); height: $tabHeight - 14; line-height: $tabHeight - 14; color: #666; }

        &.active { border: none; margin-top: 0;
          a { background-color: $mainColor; border: none; color: #fff; }
        }
      }
      &.contained { border-bottom: solid 1px #eee; margin-bottom: 0; }
      &.two-up, &.three-up, &.four-up, &.five-up {
        dd, li { margin-#{$defaultOpposite}: 0; }
      }
    }

    &.two-up, &.three-up, &.four-up, &.five-up {
      dt a, dd a, li a { padding: 0 ms(1); text-align: center; overflow: hidden; }
    }
    &.two-up dt, &.two-up dd, &.two-up li      { width: 50%; }
    &.three-up dt, &.three-up dd, &.three-up li  { width: 33.33%; }
    &.four-up dt, &.four-up dd, &.four-up li    { width: 25%; }
    &.five-up dt, &.five-up dd, &.five-up li    { width: 20%; }
  }

  ul.tabs-content { display: block; margin: 0 0 20px; padding: 0;
    &>li { display: none;
      &.active { display: block; }
    }
    &.contained { padding: 0;
      &>li { border: solid 0 darken($white, 10%); border-width: 0 1px 1px 1px; padding: 20px; }
      &.vertical>li { border-width: 1px 1px 1px 1px; }
    }
  }

  .no-js ul.tabs-content>li { display: block; }