/* ----- Variables ----- */
@maxWidth: 1140px;
@maxWidth2: 960px;
@maxWidth3: 720px;
@maxWidth4: 480px;
@padding: 10px;
@numColumns: 12;
@gutter: 2%;

@cell: 100/@numColumns;
@gutterDecimal: @gutter/100;
@r960: @maxWidth + (@padding * 3);
@r720: @maxWidth2 + (@padding * 3);
@r480-320: @maxWidth3 + (@padding * 3);

/* ----- Main Layout ----- */
.row {
	padding: 0 @padding;
}
.container {
	width: @maxWidth;
	margin: 0 auto;
}
.onehalf {
	width: 50%;
	float: left;
}
.onethird {
	width: 33.33%;
	float: left;
}
.twothird {
	width: 66.66%;
	float: left;
}
.onefourth {
	width: 25%;
	float: left;
}
.onefourth.right {
	float: right;
}
.twofourth {
	width: 50%;
	float: left;
}
.twofourth.right {
	float: right;
}
.threefourth {
	width: 75%;
	float: left;
}
.threefourth.right {
	float: right;
}
.onefifth {
	width: 20%;
	float: left;
}
.fourfifth {
	width: 80%;
	float: left;
}
.fullwidth {
	width: 100%;
	float: left;
}

/* ----- 960px Layout ----- */
@media handheld, only screen and (max-width: @r960) {

.container {
	width: @maxWidth2;
}

}
/* ----- 720px Layout ----- */
@media handheld, only screen and (max-width: @r720) {

.container {
	width: @maxWidth3;
}
.onethird,
.twothird,
.onefourth,
.twofourth,
.threefourth {
	width: 100%;
}
.clear720 {
	clear: both;
}

}
/* ----- 480px & 320px Layout ----- */
@media handheld, only screen and (max-width: @r480-320) {

.container {
	max-width: @maxWidth4;
	min-width: 280px;
	width: 100%;
}
.onehalf {
	width: 100%;
}
.clear480 {
	clear: both;
}

}