[class^="columns-"] {
	margin: 0 auto!important;
	outline: solid 1px blue;
}

[class^="columns-"] > * {
	width: 100%;
	float: left;

}

[class^="columns-"]:before,
[class^="columns-"]:after {
	content: ' ';
	display: table;
}
[class^="columns-"]:after {
	clear: both;
}
[class^="columns-"] {
	*zoom: 1;
}

/**
 * Two columns
 */
@media only screen and ( min-width: 480px ) {
	.columns-2 > .expanded:not(:nth-child(2n)) ~ .expanded,
	.columns-2 > * {
		width: 50%;
	}

	.columns-2 > .expanded:not(:nth-child(2n)) {
		width: 100%;
	}

	.columns-2 > :nth-child(2n+1) {
		clear: left;
		background: #afa
	}

	/**
	 * After the first expanded we need to redo the clears due to selectivizr
	 * and ie7/8 not liking:
     *		.columns-X > .expanded:not(:nth-child(Xn)) ~ :nth-child(Xn)
	 * this is a little more convoluted than I'd like.
	 */
	.columns-2 > .expanded:not(:nth-child(2n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-2 > .expanded:nth-child(2n+1) ~ :nth-child(2n)	{
		clear: left;
		background: #afa
	}

	.columns-2.orphan-expand > .expanded:nth-child(2n+1) ~ :last-child:nth-child(2n),
	.columns-2.orphan-expand > :last-child:nth-child(2n+1) {
		width: 100%;
	}
}


/*
 * Three columns
 */
@media only screen and ( min-width: 480px ) and ( max-width: 799px ) {
	.columns-3 > .expanded:not(:nth-child(2n)) ~ .expanded,
	.columns-3 > * {
		width: 50%;
	}

	.columns-3 > .expanded:not(:nth-child(2n)) {
		width: 100%;
	}

	.columns-3 > :nth-child(2n+1) {
		clear: left;
		background: #afa
	}

	.columns-3 > .expanded:not(:nth-child(2n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-3 > .expanded:nth-child(2n+1) ~ :nth-child(2n)	{
		clear: left;
		background: #afa
	}

	.columns-3.orphan-expand > .expanded:nth-child(2n+1) ~ :last-child:nth-child(2n),
	.columns-3.orphan-expand > :last-child:nth-child(2n+1) {
		width: 100%;
	}
}


@media only screen and ( min-width: 800px ) {
	.columns-3 > .expanded:not(:nth-child(3n)) ~ .expanded,
	.columns-3 > * {
		width: 33.333%;
	}

	.columns-3 > .expanded:not(:nth-child(3n)) {
		width: 66.666%;
	}

	.columns-3 > :nth-child(3n+1) {
		clear: left;
		background: #afa
	}

	.columns-3 > .expanded:not(:nth-child(3n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-3 > .expanded:nth-child(3n+1) ~ :nth-child(3n),
	.columns-3 > .expanded:nth-child(3n+2) ~ :nth-child(3n)	{
		clear: left;
		background: #afa
	}
}


/*
 * Four columns
 */
@media only screen and ( min-width: 480px ) and ( max-width: 699px ) {
	.columns-4 > .expanded:not(:nth-child(2n)) ~ .expanded,
	.columns-4 > * {
		width: 50%;
	}

	.columns-4 > .expanded:not(:nth-child(2n)) {
		width: 100%;
	}

	.columns-4 > :nth-child(2n+1) {
		clear: left;
		background: #afa
	}

	.columns-4 > .expanded:not(:nth-child(2n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-4 > .expanded:nth-child(2n+1) ~ :nth-child(2n)	{
		clear: left;
		background: #afa
	}
}


@media only screen and ( min-width: 700px ) {
	.columns-4 > .expanded:not(:nth-child(4n)) ~ .expanded,
	.columns-4 > * {
		width: 25%;
	}

	.columns-4 > .expanded:not(:nth-child(4n)) {
		width: 50%;
	}

	.columns-4 > :nth-child(4n+1) {
		clear: left;
		background: #afa
	}

	.columns-4 > .expanded:not(:nth-child(4n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-4 > .expanded:nth-child(4n+1) ~ :nth-child(4n),
	.columns-4 > .expanded:nth-child(4n+2) ~ :nth-child(4n),
	.columns-4 > .expanded:nth-child(4n+3) ~ :nth-child(4n) {
		clear: left;
		background: #afa
	}
}


/*
 * Five columns
 */
@media only screen and ( min-width: 480px ) and ( max-width: 599px ) {
	.columns-5 > .expanded:not(:nth-child(2n)) ~ .expanded,
	.columns-5 > * {
		width: 50%;
	}

	.columns-5 > .expanded:not(:nth-child(2n)) {
		width: 100%;
	}

	.columns-5 > :nth-child(2n+1) {
		clear: left;
		background: #afa
	}

	.columns-5 > .expanded:not(:nth-child(2n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-5 > .expanded:nth-child(2n+1) ~ :nth-child(2n)	{
		clear: left;
		background: #afa
	}
}


@media only screen and ( min-width: 600px ) and ( max-width: 699px ) {
	.columns-5 > .expanded:not(:nth-child(4n)) ~ .expanded,
	.columns-5 > * {
		width: 25%;
	}

	.columns-5 > .expanded:not(:nth-child(4n)) {
		width: 50%;
	}

	.columns-5 > :nth-child(4n+1) {
		clear: left;
		background: #afa
	}

	.columns-5 > .expanded:not(:nth-child(4n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-5 > .expanded:nth-child(4n+1) ~ :nth-child(4n),
	.columns-5 > .expanded:nth-child(4n+2) ~ :nth-child(4n),
	.columns-5 > .expanded:nth-child(4n+3) ~ :nth-child(4n) {
		clear: left;
		background: #afa
	}
}

@media only screen and ( min-width: 700px ) {
	.columns-5 > .expanded:not(:nth-child(5n)) ~ .expanded,
	.columns-5 > * {
		width: 20%;
	}

	.columns-5 > .expanded:not(:nth-child(5n)) {
		width: 40%;
	}

	.columns-5 > :nth-child(5n+1) {
		clear: left;
		background: #afa
	}

	.columns-5 > .expanded:not(:nth-child(5n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-5 > .expanded:nth-child(5n+1) ~ :nth-child(5n),
	.columns-5 > .expanded:nth-child(5n+2) ~ :nth-child(5n),
	.columns-5 > .expanded:nth-child(5n+3) ~ :nth-child(5n),
	.columns-5 > .expanded:nth-child(5n+4) ~ :nth-child(5n) {
		clear: left;
		background: #afa
	}
}



/*
 * Six columns
 */
@media only screen and ( min-width: 320px ) and ( max-width: 499px ) {
	.columns-6 > .expanded:not(:nth-child(2n)) ~ .expanded,
	.columns-6 > * {
		width: 50%;
	}

	.columns-6 > .expanded:not(:nth-child(2n)) {
		width: 100%;
	}

	.columns-6 > :nth-child(2n+1) {
		clear: left;
		background: #afa
	}

	.columns-6 > .expanded:not(:nth-child(2n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-6 > .expanded:nth-child(2n+1) ~ :nth-child(2n)	{
		clear: left;
		background: #afa
	}
}


@media only screen and ( min-width: 500px ) and ( max-width: 699px ) {
	.columns-6 > .expanded:not(:nth-child(4n)) ~ .expanded,
	.columns-6 > * {
		width: 25%;
	}

	.columns-6 > .expanded:not(:nth-child(4n)) {
		width: 50%;
	}

	.columns-6 > :nth-child(4n+1) {
		clear: left;
		background: #afa
	}

	.columns-6 > .expanded:not(:nth-child(4n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-6 > .expanded:nth-child(4n+1) ~ :nth-child(4n),
	.columns-6 > .expanded:nth-child(4n+2) ~ :nth-child(4n),
	.columns-6 > .expanded:nth-child(4n+3) ~ :nth-child(4n) {
		clear: left;
		background: #afa
	}
}

@media only screen and ( min-width: 700px ) {
	.columns-6 > .expanded:not(:nth-child(6n)) ~ .expanded,
	.columns-6 > * {
		width: 16.666%;
	}

	.columns-6 > .expanded:not(:nth-child(6n)) {
		width: 33.333%;
	}

	.columns-6 > :nth-child(6n+1) {
		clear: left;
		background: #afa
	}

	.columns-6 > .expanded:not(:nth-child(6n)) ~ * {
		clear: none;
		background: transparent;
	}

	.columns-6 > .expanded:nth-child(6n+1) ~ :nth-child(6n),
	.columns-6 > .expanded:nth-child(6n+2) ~ :nth-child(6n),
	.columns-6 > .expanded:nth-child(6n+3) ~ :nth-child(6n),
	.columns-6 > .expanded:nth-child(6n+3) ~ :nth-child(6n),
	.columns-6 > .expanded:nth-child(6n+4) ~ :nth-child(6n) {
		clear: left;
		background: #afa
	}
}