/* $Grids
================================================== */

// Bureau Responsive Grid
// Based on CSS Wizardry / Harry Roberts Grid System
// Author	: Daniel Pavitt - @dpvitt
// URL		: http://danielpavitt.com / http://bureau-va.com
//
// ==================================================================

// Grid default variable
$totalColumns  	: 12;
$columnWidth 	: 60px;
$gutterWidth  	: 20px;
$gridWidth      : 960px;


// Grid Calculation for Percentages
@function col($n) {
	@return percentage( ( $n * $columnWidth ) / $gridWidth );
}

// Each column
@mixin column($n) {
	width: col($n);
	margin-left: percentage( $gutterWidth / $gridWidth );
}

// Grid container
.grids {
	width: auto;
	max-width: $gridWidth;
	margin-left: -(percentage( $gutterWidth / $gridWidth ));
	clear: both;
	list-style: none;
	overflow: hidden;
}

// Generates styles
@for $i from 1 to $totalColumns {
	.grid-#{$i}{
		@include column($i);
	}
}

// Controls the column float
[class^="grid-"] {
	float: left;
}

/*
 *	This iterates through each column and produces output like this:
 * 
 *	.grid-1 {
 *		width: 6.25%;
 *		margin-left: 2.08333%;
 *	}
 *
 *
 *	Simply add .grid-n as a class to your element
 *	<div class="grid-12">
 *
 */