// -------------------------------------------------------------------------
// COMMENTS
// -------------------------------------------------------------------------

/*

This sheet: My grid system.

My grid is based on the Semantic Grid System found here: http://semantic.gs/ and explained beautifully here: http://coding.smashingmagazine.com/2011/08/23/the-semantic-grid-system-page-layout-for-tomorrow/.

How to use:

1. Specify @column-width, @gutter-width, & @columns below under "MODIFY".

2. Apply columns to each section in LESS stylesheets, like this:
article { .column(9); }
section { .column(3); }
@media screen and (max-width: 720px) {
	    article { .column(12); }
	    section { .column(12); }
}

3. For "Nested Columns" refer to http://semantic.gs/

*/

// -------------------------------------------------------------------------
// MODIFY
// -------------------------------------------------------------------------

// Defaults which you can freely override. 65 column width and 20 gutter width make a 1000px width. They are automatically converted into percentages via LESS operations when @total-width is set to 100%.
@column-width: 65;
@gutter-width: 20;
@columns: 12;

// Set @total-width to a pixel % 
@total-width: 100%;

.container {
    width: 90%;
	max-width: 1000px;
	margin: auto;
}

// -------------------------------------------------------------------------
// UTILITIES
// -------------------------------------------------------------------------

// Utility variable — you should never need to modify this
@gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;

// Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
    @min-width: 960;
    @correction: 0.5 / @min-width * 100 * 1%;

body {
	width: 100%;
}

// -------------------------------------------------------------------------
// CLASSES
// -------------------------------------------------------------------------

.column(@x,@columns:@columns) {
	display: inline;
	float: left;
	width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width);
	margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width);
	*width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width)-@correction;
	*margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width)-@correction;
}

// .row is for nested columns: http://semantic.gs/
.row(@columns:@columns) {
	display: block;
	width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width);
	margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1);
	*width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width)-@correction;
	*margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1)-@correction;
	.cf;
}

// .push & .pull are for left & right column indents: http://semantic.gs/
.push(@offset:1) {
	margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}

.pull(@offset:1) {
	margin-right: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
}