layout.css

/* Column Styles */
.col {
	margin: 0 auto;
	clear: both;
	padding: 5.55555555% 3.7037037%;
}
.col-condensed {
	clear: both;
	padding: 7.4074074%;
}
.col-midwidth {
	background: #fff;
	clear: both;
	margin: 0 auto;
}
.col-fullwidth {
	clear: both;
	width: 100%;
}

.col:after,
.col-condensed:after,
.col-midwidth:after,
.col-fullwidth:after {
	content: "";
	clear: both;
	display: table;
}

@media( min-width: 35em ) {
	.col           { padding: 3.7037037% 7.4074074%; }
	.col-inset     { padding: 0 11.1111111%; }
	.col-midwidth  { padding: 3.7037037% 11.1111111%; }
	.col-condensed { padding: 5.55555555% 14.8148148%; }
}
@media( min-width: 75em ) {
	.col           { padding: 3.7037037%; }
	.col-inset     { padding: 0 14.8148148%; }
	.col-midwidth  { padding: 3.7037037% 7.4074074%; }
	.col-condensed { padding: 5.55555555% 14.8148148%; }
}
@media( min-width: 80em ) {
	.col           { padding: 3.7037037% 14.8148148%; }
	.col-midwidth  { padding: 5.55555555% 18.5185185%; }
	.col-condensed { padding: 5.55555555% 22.222222%; }
}
@media( min-width: 90em ) {
	.col           { padding: 3.7037037% 22.222222%; }
	.col-midwidth  { padding: 5.55555555% 22.222222%; }
	.col-condensed { padding: 5.55555555% 29.6296296%; }
}

/* Two col, 50%-50% */
.col-ab > * { 
	clear: both;
}
@media( min-width: 55em ) {
	.col-ab > *,
	.col-ab > *.post {
		clear: none;
		float: left;
		margin: 0;
		width: 50%;
	}
	.col-ab > *:nth-of-type(2n+1),
	.col-ab > *.post:nth-of-type(2n+1) {
		clear: left;
	}
}

/* Two col, 66%-33% */
.col-a_b > * {
	clear: left;
}
@media( min-width: 55em ) {
	.col-a_b > * {
		clear: none;
		float: left;
		margin: 0;
		width: 33%;
	}
	.col-a_b > *:nth-of-type(odd) {
		width: 66%;
		clear: left;
	}
}

/* Two col, 33%-66% */
.col-ab_ > * {
	clear: left;
}
@media( min-width: 55em ) {
	.col-ab_ > * {
		clear: none;
		float: left;
		margin: 0;
		width: 33%;
	}
	.col-ab_ > *:nth-of-type(odd) {
		clear: left;
	}
	.col-ab_ > *:nth-of-type(even) {
		width: 66%;
	}
}

/* Three col, 33%-33%-33% */
.col-abc > * {
	clear: both;
}
@media( min-width: 55em ) {
	.col-abc > * {
		clear: none;
		float: left;
		margin: 0;
		width: 33.3333%;
	}
	.col-abc > *:nth-of-type(3n+1) {
		clear: left;
	}
}

/* Four col, 20%-20%-20%-20% */
@media( min-width: 35em ) {
	.col-abcd > * {
		float: left;
		margin: 0;
		width: 25%;
	}
	.col-abc > *:nth-of-type(3n+1) {
		clear: none;
	}
	.col-abcd > *:nth-of-type(4n+1) {
		clear: left;
	}
}


/* Split layout:
Mid-BP:				High BP:
  100%			          50%-50%
50%-50%				33%-33%-33%
*/

.col-ab-abc > * {
	clear: both;
}
@media( min-width: 40em ) {
	.col-ab-abc > *,
	.col-ab-abc > *.post {
		clear: none;
		float: left;
		margin: 0;
		width: 50%;
	}
	.col-ab-abc > *:first-of-type,
	.col-ab-abc > *:nth-of-type(2) {
		width: 100%;
	}
	.col-ab-abc > *:nth-of-type(2)~*:nth-of-type(2n-1) {
		clear: left;
	}
}
@media( min-width: 52.5em ) {
	.col-ab-abc > *,
	.col-ab-abc > *.post {
		clear: none;
		float: left;
		margin: 0;
		width: 33%;
	}
	.col-ab-abc > *:first-of-type,
	.col-ab-abc > *:nth-of-type(2) {
		width: 50%;
	}
	.col-ab-abc > *:nth-of-type(2)~*:nth-of-type(2n-1) {
		clear: none;
	}
	.col-ab-abc > *:nth-of-type(2)~*:nth-of-type(3n) {
		clear: left;
	}
}

/* Grid styles */
.grid > * {
	display: inline-block;
	float: left;
	width: 50%;
	margin: 0;
	padding: 0;
}
.grid > *:nth-of-type(2n+1) {
	clear: left;
}
.grid > *:nth-of-type(2n+1):last-child {
	margin-left: 25%;
}

@media( min-width: 27.5em ) {
	.grid > * {
		width: 33.333333%;
	}
	.grid > *:nth-of-type(2n+1) {
		clear: none;
	}
	.grid > *:nth-of-type(2n+1):last-child {
		margin-left: 0;
	}
	.grid > *:nth-of-type(3n+1) {
		clear: left;
	}
	.grid > *:nth-of-type(3n+1):last-child {
		margin-left: 33.333333%;
	}
	.grid > *:nth-of-type(3n+1):nth-last-child(2) {
		margin-left: 16.666665%;
	}
}


@media( min-width: 40em ) {
	.grid > * {
		width: 25%;
	}
	.grid > *:nth-of-type(3n+1) {
		clear: none;
	}
	.grid > *:nth-of-type(3n+1):last-child,
	.grid > *:nth-of-type(3n+1):nth-last-child(2) {
		margin-left: 0;
	}
	.grid > *:nth-of-type(4n+1) {
		clear: left;
	}
	.grid > *:nth-of-type(4n+1):last-child {
		margin-left: 37.5%;
	}
	.grid > *:nth-of-type(4n+1):nth-last-child(2) {
		margin-left: 25%;
	}
	.grid > *:nth-of-type(4n+1):nth-last-child(3) {
		margin-left: 12.5%;
	}
}

@media( min-width: 50em ) {
	.grid > * {
		width: 20%;
	}
	.grid > *:nth-of-type(4n+1) {
		clear: none;
	}
	.grid > *:nth-of-type(4n+1):last-child,
	.grid > *:nth-of-type(4n+1):nth-last-child(2),
	.grid > *:nth-of-type(4n+1):nth-last-child(3) {
		margin-left: 0;
	}
	.grid > *:nth-of-type(5n+1) {
		clear: left;
	}
	.grid > *:nth-of-type(5n+1):last-child {
		margin-left: 40%;
	}
	.grid > *:nth-of-type(5n+1):nth-last-child(2) {
		margin-left: 30%;
	}
	.grid > *:nth-of-type(5n+1):nth-last-child(3) {
		margin-left: 20%;
	}
	.grid > *:nth-of-type(5n+1):nth-last-child(4) {
		margin-left: 10%;
	}
}

@media( min-width: 80em ) {
	.grid > * {
		width: 16.666666667%;
	}
	.grid > *:nth-of-type(5n+1) {
		clear: none;
	}
	.grid > *:nth-of-type(5n+1):last-child,
	.grid > *:nth-of-type(5n+1):nth-last-child(2),
	.grid > *:nth-of-type(5n+1):nth-last-child(3),
	.grid > *:nth-of-type(5n+1):nth-last-child(4) {
		margin-left: 0;
	}
	.grid > *:nth-of-type(6n+1) {
		clear: left;
	}
	.grid > *:nth-of-type(6n+1):last-child {
		margin-left: 41.666666667%;
	}
	.grid > *:nth-of-type(6n+1):nth-last-child(2) {
		margin-left: 33.333333334%;
	}
	.grid > *:nth-of-type(6n+1):nth-last-child(3) {
		margin-left: 25%;
	}
	.grid > *:nth-of-type(6n+1):nth-last-child(4) {
		margin-left: 16.7%;
	}
	.grid > *:nth-of-type(6n+1):nth-last-child(5) {
		margin-left: 8.333333334%;
	}
}