/* grid container
============================================== */
$cols: 12;
$margin: 5;
$layout-width: 950 + $margin * 2;
$col-width: $layout-width / $cols - $margin * 2;


.container-#{$cols} {
  @include group;
//  width: $layout-width + px;
  max-width: 1200px;
  min-width: $layout-width + px;
  margin: 0 auto;
  position: relative;
}

/* grid divisions
============================================== */

.grid-1,
.grid-2,
.grid-3,
.grid-4,
.grid-5,
.grid-6,
.grid-7,
.grid-8,
.grid-9,
.grid-10,
.grid-11,
.grid-12 {
  margin: $margin + px $margin + px;
  padding: 0;
  display: inline;
  float: left;
}

@for $i from 1 through $cols {
  .grid-#{$i} {
    width: (( ($col_width * $i) + ($margin * 2 * ($i - 1)) ) / $layout-width)*100%;
  }
}

@for $i from 1 through $cols {
  .from-left-#{$i} {
    margin-left: ($col_width * $i) + ($margin * 2 * ($i - 1)) + px;
  }
}

.grid-centered {
  display: block;
  float: none;
  margin: 0 auto;
}