// Defaults which you can freely override
@column-width: 30;
@gutter-width: 10;
@columns: 24;

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

// Set @total-width to 100% for a fluid layout
@total-width: @_gridsystem-width;


//////////
// GRID //
//////////

body {
	width: 100%;
	float: left;
}

.row(@columns:@columns) {
	display: inline-block;
	overflow: hidden;
	width: @total-width*((@gutter-width + @_gridsystem-width)/@_gridsystem-width);
	margin: 0 @total-width*(((@gutter-width*.5)/@_gridsystem-width)*-1);
}

.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*.5)/@_gridsystem-width);
}