// GRID SYSTEM
// -----------


// Grid rows and columns
// ---------------------
.row {
  margin-left: @gridGutterWidth * -1;
  .clearfix();
}

// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
[class*="span"] {
  .gridColumn();
}

// Default columns
.span1     { .columns(1); }
.span2     { .columns(2); }
.span3     { .columns(3); }
.span4     { .columns(4); }
.span5     { .columns(5); }
.span6     { .columns(6); }
.span7     { .columns(7); }
.span8     { .columns(8); }
.span9     { .columns(9); }
.span10    { .columns(10); }
.span11    { .columns(11); }
.span12    { .columns(12); }

// Offset column options
.offset1   { .offset(1); }
.offset2   { .offset(2); }
.offset3   { .offset(3); }
.offset4   { .offset(4); }
.offset5   { .offset(5); }
.offset6   { .offset(6); }
.offset7   { .offset(7); }
.offset8   { .offset(8); }
.offset9   { .offset(9); }
.offset10  { .offset(10); }
.offset11  { .offset(11); }



// FLUID GRID SYSTEM
// -----------------
// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1.

.row-fluid {
  @gridColumnWidth: 6.382978723%;
  @gridGutterWidth: 2.127659574%;

  width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
  margin-left: 0 - @gridGutterWidth;

  // Redeclare the mixins
  .gridColumn() {
    float: left;
    margin-left: @gridGutterWidth;
  } 
  [class*="span"] {
    .gridColumn();
  }
  .fluidColumns(@columns: 1) {
    width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
  }
  // Redeclare the columns
  .span1     { .fluidColumns(1); }
  .span2     { .fluidColumns(2); }
  .span3     { .fluidColumns(3); }
  .span4     { .fluidColumns(4); }
  .span5     { .fluidColumns(5); }
  .span6     { .fluidColumns(6); }
  .span7     { .fluidColumns(7); }
  .span8     { .fluidColumns(8); }
  .span9     { .fluidColumns(9); }
  .span10    { .fluidColumns(10); }
  .span11    { .fluidColumns(11); }
  .span12    { .fluidColumns(12); }
}