html {
	/* Set a font family on the whole document */
	font-family: BentonSans, sans-serif;
}
body {
	/* Remove space around the document */
	margin: 0;
	overflow-y: scroll;
}

// Display configuration information
body:before {
	font-family: inherit;
}
.test body:after {
	content: '';
	background-color: #fcf8e3;
	border-bottom: 1px solid #fbeed5;
	border-left: 1px solid #fbeed5;
	color: #c09853;
	font: small-caption;
	padding: 3px 6px;
	pointer-events: none;
	position: fixed;
	right: 0;
	top: 25px;
	z-index: 100;
	font-family: sans-serif;
}

.demo-cell {
	background-color: transparent;
	zoom: 1;
	min-height: 2em;
	text-align: center;
	padding-top: 1rem;
	overflow: hidden;
	font-size: 1.3rem;
	line-height: 1.2;
}

.o-grid-container {
	background: #eae8df;
}
.o-grid-row {
	margin-top: 1rem;
	margin-bottom: 1rem;

	.o-grid-row {
		background: #cec6b9;
	}
}

// Showcase flexbox interactions
// Note that this breaks cases such as:
// <div data-o-grid-colspan="0">
// <div data-o-grid-colspan="Lhide">
// Because these rely on "display: none" to hide columns
.demo-flex {
	display: flex;

	.demo-cell {
		flex: 1 1 0%;
	}
}

[class*='error'] .demo-cell {
	background-color: #c00d00;
}

.demo-switcher {
	margin: 1rem 0;
	text-align: center;
}