$gridWidth: 960px;
$columnCount: 12;
$leftGutterWidth: 12px;
$rightGutterWidth: 12px;



$gutterWidth: $leftGutterWidth + $rightGutterWidth;

/* find the CSS width of 1 column */
$columnWidth: ($gridWidth / $columnCount)-($gutterWidth) + ($leftGutterWidth/($columnCount/2));

$colTotalWidth: $gridWidth + $gutterWidth;  


/* =============================================================================
   create a row  
   ========================================================================== */
@mixin row() {
  float: left;
  clear: both;
  width: $gridWidth;
}

/* =============================================================================
   create a column div   
   ========================================================================== */
    
@mixin col($n: 1) {
  float: left;
  @include span($n);
}

/* =============================================================================
   make an element span n columns
   ========================================================================== */
@mixin span($n: 1) {

  width: (($n * $columnWidth)+($n * $gutterWidth) - $gutterWidth) ;
  margin-right: $rightGutterWidth;
  margin-left: $leftGutterWidth;
  position:relative;
  
  @if $n == 12 {
    margin:0;
  }
  
  
}


/* =============================================================================
   the last column in a row needs this   
   ========================================================================== */

@mixin last() {
  margin-right: 0;
}



/* =============================================================================
   the first column in a row needs this
   ========================================================================== */


@mixin first() {
  margin-left: 0;
}



/* =============================================================================
   prepend n blank columns
   ========================================================================== */

@mixin prepend($n: 1) {
  padding-left: ($n * $columnWidth)+($n * $gutterWidth) - $gutterWidth
}



/* =============================================================================
   append n blank columns
   ========================================================================== */

@mixin append($n: 1) {
  padding-right: ($n * $columnWidth)+($n * $gutterWidth) - $gutterWidth
}



/* =============================================================================
   pull n blank columns
   ========================================================================== */

@mixin pull($n: 1) {
  left: -(($columnWidth + $gutterWidth) * $n)
}



/* =============================================================================
   push n blank columns
   ========================================================================== */

@mixin push($n: 1) {
  left: ($columnWidth + $gutterWidth) * $n
}



/* =============================================================================
   create classes for quick prototyping
   ========================================================================== */
@mixin grid()  {
  clear:both;
  margin:0 auto;
  width:$colTotalWidth;
  .ie7 & {
    zoom: 1;
  }
}

.group {
  @include grid;
}

@for $i from 1 through $columnCount
{
  .span-#{$i}    { @include col($i); }
  .colwidth-#{$i} { @include span($i); }
  .push-#{$i}   { @include push($i); }
  .pull-#{$i}   { @include pull($i); }
  .append-#{$i}   { @include append($i); }
  .prepend-#{$i}  { @include prepend($i); }
}

.alpha {
  @include first;
}

.omega {
  @include last;
}