// Simple Adjustable Gutter Grid
// For a 960px width, !grid = 80px = 12 columns; 60px = 16 columns
// gutter is base gutter. You can change the gutter per element. See Grid mixin
!pageWidth = 960px
!grid = 80px
!gutter = 20px

//used for page wrapper
=container
	width = !pageWidth
	margin: 0 auto
	
/*	Grid mixin function sets size and width of element boxes. Function variables are as follows
	!col = number of columns,
	!gutterLeft = size of left gutter
	!gutterRight = size of right gutter
	
// gridFlush gutter is formed via padding, gridFloat formed by margin

=gridBase
	float: left
	overflow: hidden
	display: inline

=gridFlush(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2 )
	padding-left = !gutterLeft
	padding-right = !gutterRight
	width = !col * !grid - !gutterRight - !gutterLeft
	+gridBase

=gridFloat(!col = 1,!gutterLeft = !gutter/2, !gutterRight = !gutter/2)
	margin-left = !gutterLeft
	margin-right = !gutterRight
	width = !col * !grid - !gutterRight - !gutterLeft
	+gridBase
	
// first is only required if you want to clear a row of elements which did not equal total width
=first
	clear: both