// Variables

@colorGrey: #444;
@colorLightGrey: #dce9f9;
@colorLighterGrey: #ebf3fc;
@colorSoftGrey: #ccc;
@colorSoftWhite: #fbf8e9;
@colorTransparentWhite: rgba(255,255,255,.8);
@colorLucidWhite: rgba(255,255,255,.5);
@colorLightest: #eee;
@colorStriping: #F7F7F7;
@colorWhite: #fff;
@fontFamily: 'trebuchet MS' , 'Lucida sans' , Arial;


// Mixins

.borderRadius(@radius) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}

.borderRadius(@r1, @r2, @r3, @r4) {
  -moz-border-radius: @r1 @r2 @r3 @r4;
  -webkit-border-radius: @r1 @r2 @r3 @r4;
  border-radius: @r1 @r2 @r3 @r4;
}

.boxShadow(@x, @y, @z, @color) {
  -webkit-box-shadow: @x @y @z @color inset;
  -moz-box-shadow: @x @y @z @color inset;
  box-shadow: @x @y @z @color inset;
}

.noBoxShadow() {
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
}

.linearGradient(@colorFrom, @colorTo) {
  background-color: @colorTo;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@colorFrom), to(@colorTo));
  background-image: -webkit-linear-gradient(top, @colorFrom, @colorTo);
  background-image: -moz-linear-gradient(top, @colorFrom, @colorTo);
  background-image: -ms-linear-gradient(top, @colorFrom, @colorTo);
  background-image: -o-linear-gradient(top, @colorFrom, @colorTo);
  background-image: linear-gradient(to bottom, @colorFrom, @colorTo);
}


// Classes

.footable {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid @colorSoftGrey;
  .borderRadius(6px);
  font-family: @fontFamily;
  font-size: 14px;
  color: @colorGrey;
  background: @colorWhite;

  > thead > tr {
    &:first-child {
      > th,
      > td {
        &.footable-first-column {
          .borderRadius(6px, 0, 0, 0);
        }

        &.footable-last-column {
          .borderRadius(0, 6px, 0, 0);
        }

        &.footable-first-column.footable-last-column {
          .borderRadius(6px, 6px, 0, 0);
        }
      }
    }

    > th {
      border-left: 1px solid @colorSoftGrey;
      border-top: 1px solid @colorSoftGrey;
      padding: 10px;
      text-align: left;
    }

    > th,
    > td {
      .linearGradient(@colorLighterGrey, @colorLightGrey);
      .boxShadow(0, 1px, 0, @colorTransparentWhite);
      border-top: none;
      text-shadow: 0 1px 0 @colorLucidWhite;

      &.footable-first-column {
        border-left: none;
      }
    }
  }

  &.breakpoint > tbody > tr.footable-row-detail {
    background: @colorLightest;

    > .footable-row-detail-cell {
      border-left: none;
    }
  }

  > tbody {
    img {
      vertical-align: middle;
    }

    > tr {
      &:hover {
        background: @colorSoftWhite;
      }

      &:last-child > td {
        &.footable-first-column {
          .borderRadius(0, 0, 0, 6px);
        }

        &.footable-last-column {
          .borderRadius(0, 0, 6px, 0);
        }

        &.footable-first-column.footable-last-column {
          .borderRadius(0, 0, 6px, 6px);
        }
      }

      > td {
        border-top: 1px solid @colorSoftGrey;
        border-left: 1px solid @colorSoftGrey;
        padding: 10px;
        text-align: left;

        &.footable-first-column {
          border-left: none;
        }
      }
    }
  }

  > tfoot > tr {
    > th,
    > td {
      .linearGradient(@colorLighterGrey, @colorLightGrey);
      .boxShadow(0, 1px, 0, @colorTransparentWhite);
      border-top: 1px solid @colorSoftGrey;
      text-shadow: 0 1px 0 @colorLucidWhite;
      padding: 10px;
    }
  }

  .pagination {
    margin: 20px 0;
    > ul {
      display: inline-block;
      margin: 0;
      padding: 0;
      .borderRadius(6px);
      .noBoxShadow();
      background-color: @colorWhite;
      > li {
        display: inline;
        > a,
        > span {
          float: left;
          padding: 4px 12px;
          line-height: 20px;
          text-decoration: none;
          border: 1px solid @colorSoftGrey;
          border-left-width: 0;
        }
      }
      > li:first-child > a,
      > li:first-child > span {
        -webkit-border-bottom-left-radius: 4px;
        -moz-border-radius-bottomleft: 4px;
        border-bottom-left-radius: 4px;
        -webkit-border-top-left-radius: 4px;
        -moz-border-radius-topleft: 4px;
        border-top-left-radius: 4px;
        border-left-width: 1px;
      }
      > li:last-child > a,
      > li:last-child > span {
        -webkit-border-top-right-radius: 4px;
        -moz-border-radius-topright: 4px;
        border-top-right-radius: 4px;
        -webkit-border-bottom-right-radius: 4px;
        -moz-border-radius-bottomright: 4px;
        border-bottom-right-radius: 4px;
      }
      > li > a:hover,
      > li > a:focus,
      > .active > a,
      > .active > span {
        background-color: @colorLightest;
      }
      > .active > a,
      > .active > span {
        color: @colorGrey;
        cursor: default;
      }
      > .disabled > span,
      > .disabled > a,
      > .disabled > a:hover,
      > .disabled > a:focus {
        color: @colorSoftGrey;
        cursor: default;
        background-color: @colorLighterGrey;
      }
    }
    &.pagination-centered {
      text-align: center;
    }
    &.pagination-right {
      text-align: center;
    }
  }
}

.footable-odd{
	background-color: @colorStriping;
}