/**
 * Background color
 */

@media (min-width: 40em) {
	body {
		background-image: -webkit-linear-gradient(left, #f7f7f7 0%, #f7f7f7 25%, transparent 25%, transparent 100%);
		background-image: linear-gradient(to right, #f7f7f7 0, #f7f7f7 25%, transparent 25%, transparent 100%);
	}
}


/**
 * Branding elements
 */

.branding-color-box {
	border: 1px solid #808080;
	height: 8em;
	margin-right: 1em;
	margin-bottom: 1em;
	padding: 1em;
	width: 8em;
}

.branding-font {
	margin-bottom: 0.5em;
}

/**
 * Icons
 */

.svg .icon-xlarge {
	height: 4em;
	width: 4em;
}


/**
 * Navigation
 */

@media (max-width: 40em) {
	.nav {
		border-bottom: 1px solid #e5e5e5;
	}
}

.nav-section {
	display: none;
	visibility: hidden;
}

@media (min-width: 40em) {
	.nav-section {
		display: block;
		visibility: visible;
	}
}

/* Disable current page nav */
a.nav-active {
	pointer-events: none;
	color: #808080;
	cursor: not-allowed;
}

/* Sticky nav */
@media (min-width: 40em) {
	.sticky-header {
		background-color: #f7f7f7;
		bottom: 0;
		overflow-y: auto;
		position: fixed;
		top: 0;
		width: 22.2%;
	}

	.sticky-body {
		margin-left: 27.8%;
	}
}

@media (min-width: 80em) {
	.sticky-header {
		width: 17.75em;
	}
}


/**
 * Grid Highlighting
 */

.grid-highlight {
	background-color: #f7f7f7;
	border: 1px solid #e5e5e5;
	border-radius: 0.0725em;
	margin-bottom: 1.5625em;
	padding: 0.9375em;
}


/**
 * Prism
 * Code syntax highlighting by Lea Verou.
 * http://prismjs.com/
 */

@media screen {

	.token.comment,
	.token.prolog,
	.token.doctype,
	.token.cdata {
		color: slategray;
	}

	.token.punctuation {
		color: #999;
	}

	.token.property,
	.token.tag,
	.token.boolean,
	.token.number,
	.token.constant,
	.token.symbol {
		color: #905;
	}

	.token.selector,
	.token.attr-name,
	.token.string,
	.token.builtin {
		color: #690;
	}

	.token.operator,
	.token.entity,
	.token.url,
	.language-css .token.string,
	.style .token.string,
	.token.variable {
		color: #a67f59;
	}

	.token.atrule,
	.token.attr-value,
	.token.keyword {
		color: #07a;
	}


	.token.regex,
	.token.important {
		color: #e90;
	}

	.token.important {
		font-weight: bold;
	}

	.token.entity {
		cursor: help;
	}

}