@import "variables.less";

.container,
.wrapper {
  position: relative;
  width: @screen-base;
  margin: 0 auto;
  padding: 0;
  clear: both;
  height: auto;
}

.row {
  height: auto;
  margin-left: -20px;
  margin-bottom: 7px;
  overflow: hidden;
  clear: both;
  *zoom: 1;
}

.col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
  display: inline;
  float: left;
  margin-left: 20px;
  min-height: 1px;
  *zoom: 1;
}

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

.columns(12);
.columns(@n, @i: 1) when (@i =< @n) {
  .col@{i} {
    width: (85*@i)-20px;
  }

  .columns(@n, (@i + 1));
}


/***************************************/
//采用24分栏
.grid {
  margin-left: -10px;
  margin-right: -10px;
  height: auto;
  overflow: hidden;
  clear: both;
  *zoom: 1;
}


.generate-columns(24);
.generate-columns(@n, @i: 1) when (@i =< @n) {
  .g-@{i} {
    //width: (@screen-base/24*@i)-10px;
    // 42.5*24-20
    width: (42.5*@i)-20px;
  }
  .generate-columns(@n, (@i + 1));
}

.make-grid-columns();
.make-grid-columns() {
  .col(@index) {
    @item: ~".g-@{index}";
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< 24) {
    @item: ~".g-@{index}";
    .col((@index + 1), ~"@{list}, @{item}");
  }
  .col(@index, @list) when (@index > 24) {
    @{list} {
      position: relative;
      display: inline;
      float: left;
      min-height: 1px;
      margin-left: 10px;
      margin-right: 10px;
      *zoom: 1;
    }
  }
  .col(1);
}

.offset-grid-columns(10);
.offset-grid-columns(@n, @i: 0) when (@i =< @n) {
  .grid-offset-@{i} {
    margin-bottom: @i*2px;
  }
  .offset-grid-columns(@n, (@i + 1));
}