@import 'style/reset.css';
@import 'style/style.css';
@import 'style/grid.less';


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

// Specify the number of columns and set column and gutter widths
@columns: 16;
@column-width: 60;
@gutter-width: 20;

// Remove the definition below for a pixel-based layout
@total-width: 100%;


////////////
// LAYOUT //
////////////

// center the contents
div.center {
	max-width: 960px;
	margin: 0 auto;
	overflow: hidden;
}


// main column & sidebar



#maincolumn {
    .column(8);
    .push(4);
    .pull(4);
}


@media screen and (max-width: 800px) {
	#maincolumn {
		.column(10);
		.push(3);
	    .pull(3);
    }
}


@media screen and (max-width: 640px) {
	#maincolumn {
		.column(12);
		.push(2);
	    .pull(2);
    }
}


@media screen and (max-width: 480px) {
	#maincolumn {
		.column(16);
    }
}