960_24_col.less

/*
  960 Grid System ~ Core CSS.
  Learn more ~ http://960.gs/

  Licensed under GPL and MIT.

  Forces backgrounds to span full width,
  even if there is horizontal scrolling.
  Increase this if your layout is wider.

  Note: IE6 works fine without this fix.
  
  zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
  
  Convert to less compatible by Adrian Lee
  email: adrian [at] radianstudio [dot] com
*/

body {
  min-width: 960px;
}

.grid (@size: 1){
  display: inline;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  width: 30px + (@size - 1) * 40;
}

.prefix (@size: 1){
  padding-left: (40px) * @size;
}

.suffix (@size: 1){
  padding-right: (40px) * @size;
}

.push (@size: 1){
  position: relative;
  left: (40px) * @size;
}

.pull (@size: 1){
  position: relative;
  left: (-40px) * @size;
}

.clearboth{
  clear: both;
}

.clearbasic {
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* `Container */

.container_24 {
  margin-left: auto;
  margin-right: auto;
  width: 960px;
  
  zoom: 1;

  /* Grid >> 24 Columns */
  .grid_1 { .grid(1); }
  .grid_2 { .grid(2); }
  .grid_3 { .grid(3); }
  .grid_4 { .grid(4); }
  .grid_5 { .grid(5); }
  .grid_6 { .grid(6); }
  .grid_7 { .grid(7); }
  .grid_8 { .grid(8); }
  .grid_9 { .grid(9); }
  .grid_10 { .grid(10); }
  .grid_11 { .grid(11); }
  .grid_12 { .grid(12); }
  .grid_13 { .grid(13); }
  .grid_14 { .grid(14); }
  .grid_15 { .grid(15); }
  .grid_16 { .grid(16); }
  .grid_17 { .grid(17); }
  .grid_18 { .grid(18); }
  .grid_19 { .grid(19); }
  .grid_20 { .grid(20); }
  .grid_21 { .grid(21); }
  .grid_22 { .grid(22); }
  .grid_23 { .grid(23); }
  .grid_24 { .grid(24); }
  
  .prefix_1 { .prefix(1); }
  .prefix_2 { .prefix(2); }
  .prefix_3 { .prefix(3); }
  .prefix_4 { .prefix(4); }
  .prefix_5 { .prefix(5); }
  .prefix_6 { .prefix(6); }
  .prefix_7 { .prefix(7); }
  .prefix_8 { .prefix(8); }
  .prefix_9 { .prefix(9); }
  .prefix_10 { .prefix(10); }
  .prefix_11 { .prefix(11); }
  .prefix_12 { .prefix(12); }
  .prefix_13 { .prefix(13); }
  .prefix_14 { .prefix(14); }
  .prefix_15 { .prefix(15); }
  .prefix_16 { .prefix(16); }
  .prefix_17 { .prefix(17); }
  .prefix_18 { .prefix(18); }
  .prefix_19 { .prefix(19); }
  .prefix_20 { .prefix(20); }
  .prefix_21 { .prefix(21); }
  .prefix_22 { .prefix(22); }
  .prefix_23 { .prefix(23); }
  
  .suffix_1 { .suffix(1); }
  .suffix_2 { .suffix(2); }
  .suffix_3 { .suffix(3); }
  .suffix_4 { .suffix(4); }
  .suffix_5 { .suffix(5); }
  .suffix_6 { .suffix(6); }
  .suffix_7 { .suffix(7); }
  .suffix_8 { .suffix(8); }
  .suffix_9 { .suffix(9); }
  .suffix_10 { .suffix(10); }
  .suffix_11 { .suffix(11); }
  .suffix_12 { .suffix(12); }
  .suffix_13 { .suffix(13); }
  .suffix_14 { .suffix(14); }
  .suffix_15 { .suffix(15); }
  .suffix_16 { .suffix(16); }
  .suffix_17 { .suffix(17); }
  .suffix_18 { .suffix(18); }
  .suffix_19 { .suffix(19); }
  .suffix_20 { .suffix(20); }
  .suffix_21 { .suffix(21); }
  .suffix_22 { .suffix(22); }
  .suffix_23 { .suffix(23); }
  
  .push_1 { .push(1); }
  .push_2 { .push(2); }
  .push_3 { .push(3); }
  .push_4 { .push(4); }
  .push_5 { .push(5); }
  .push_6 { .push(6); }
  .push_7 { .push(7); }
  .push_8 { .push(8); }
  .push_9 { .push(9); }
  .push_10 { .push(10); }
  .push_11 { .push(11); }
  .push_12 { .push(12); }
  .push_13 { .push(13); }
  .push_14 { .push(14); }
  .push_15 { .push(15); }
  .push_16 { .push(16); }
  .push_17 { .push(17); }
  .push_18 { .push(18); }
  .push_19 { .push(19); }
  .push_20 { .push(20); }
  .push_21 { .push(21); }
  .push_22 { .push(22); }
  .push_23 { .push(23); }
  
  .pull_1 { .pull(1); }
  .pull_2 { .pull(2); }
  .pull_3 { .pull(3); }
  .pull_4 { .pull(4); }
  .pull_5 { .pull(5); }
  .pull_6 { .pull(6); }
  .pull_7 { .pull(7); }
  .pull_8 { .pull(8); }
  .pull_9 { .pull(9); }
  .pull_10 { .pull(10); }
  .pull_11 { .pull(11); }
  .pull_12 { .pull(12); }
  .pull_13 { .pull(13); }
  .pull_14 { .pull(14); }
  .pull_15 { .pull(15); }
  .pull_16 { .pull(16); }
  .pull_17 { .pull(17); }
  .pull_18 { .pull(18); }
  .pull_19 { .pull(19); }
  .pull_20 { .pull(20); }
  .pull_21 { .pull(21); }
  .pull_22 { .pull(22); }
  .pull_23 { .pull(23); }
  
  &:before, &:after{
        .clearbasic;
        content: '.';
        font-size: 0;
        line-height: 0;
  }
  
  &:after{
    .clearboth;
  }
}

/* Grid >> Children (Alpha ~ First, Omega ~ Last) */

.alpha {
  margin-left: 0;
}

.omega {
  margin-right: 0;
}

/* Clear Floated Elements */
.clear {
  .clearboth;
  .clearbasic;
}

.clearfix{
  zoom: 1;
  &:before, &:after{
    .clearbasic;
    content: '.';
    font-size: 0;
    line-height: 0;
  }
  &:after{
    .clearboth;
  }
}