/*
F'n Sweet Grid system
Reduced fluid version of http://960.gs with fixed-width gutters
No support for < IE8
Basic usage:
  In some stylesheet:
  @include grid();
  In your html:
  <div class="container">
    <div class="grid_4">4</div>
    <div class="grid_8">8</div>
  </div>
*/
//Gutter width
@mixin grid($p: 10px, $containerClass: 'container', $cellClass:'grid', $base: 12){
  .#{$containerClass}{
    //clearfix
    &:before{
      content: '.';
      display: block;
      clear: both;
      visibility: hidden;
      height:0;
    }
    zoom:1;
    margin: 0;padding: 0;
    &>*{
      float: left;
      //This puts the padding on the inside. Teh Magic.
      // You can replace this with `` if using compass
      -moz-box-sizing: border-box;
      -ms-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;

      padding-left: $p;
    }
    &>.alpha,
    //First-child makes you not need .alpha most of the time
    &>*:first-child {
      padding-left: 0 !important;
    }
    //Full width cells don't need gutters
    &>.#{$cellClass}_#{$base} {
      padding: 0;
    }
  }

  @for $i from 1 to $base{
    $percent: $i / $base * 100%;
    .#{$cellClass}_#{$i} {
      width: $percent;
    }
  }
}