/////////////////
 // Semantic.gs // for Stylus: http://learnboost.github.com/stylus/
 /////////////////
 
 // Defaults which you can freely override
 column-width = 60px
 gutter-width = 20px
 columns = 12
 
 // Utility variable — you should never need to modify this
 _gridsystem-width = (column-width + gutter-width) * columns
 
 // Set @total-width to 100% for a fluid layout
 total-width = _gridsystem-width
 
 // Correcting percentage-to-pixel rounding errors in IE6 & 7
 // See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
 // Override @min with the minimum width of your layout
 min-width = 960
 correction = (((0.5 / min-width) * 100) * 1%)
 
 // The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
 clearfix()
  *zoom:1
 
 	&:before,
 	&:after
 		content:""
 		display:table
 
 	&:after
 		clear:both
 
 
 //////////
 // GRID //
 //////////
 
 body
 	width 100%
 	clearfix()
 
 row(columns = columns)
 	display block
 	width total-width * ((gutter-width + _gridsystem-width ) / _gridsystem-width)
 	margin 0 total-width * (((gutter-width * 0.5) / _gridsystem-width ) * - 1)
 	*width total-width * ((gutter-width + _gridsystem-width ) / _gridsystem-width)-correction
 	*margin 0 total-width * (((gutter-width * 0.5) / _gridsystem-width ) * - 1)-correction
 
 column(x, columns = columns)
 	display inline
 	float left
 	overflow hidden
 	width total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)
 	margin 0 total-width * ( (gutter-width * 0.5) / _gridsystem-width)
 	*width total-width * ((((gutter-width + column-width ) * x) - gutter-width) / _gridsystem-width)-correction
 	*margin 0 total-width * ( (gutter-width * 0.5) / _gridsystem-width)-correction
 
 offset(offset = 1)
 	margin-left total-width*(((gutter-width+column-width)*offset + (gutter-width*0.5))/_gridsystem-width)