* {
	margin: 0;
	padding: 0;

	-webkit-font-smoothing: antialiased;
}

a {
	-webkit-transition: color .2s;
}

html {
	background: #444f5f;
	color: #8797af;

	font: 15px/25px "Helvetica Neue", "Open Sans", "DejaVu Sans", "Arial", sans-serif;
}

	body {
		width: 960px;
		margin: 40px auto;
	}

body > small {
	display: block;
	padding-top: 30px;

	color: #7f8c9f;
}
	body > small a {
		float: right;

		color: #adbdd5;
		font-weight: 500;
		text-decoration: none;
	}
		body > small a:hover {
			color: #fff;
		}

.small {
	background: #89b92c;
	color: #86936c;
	margin: 5% auto;
}

	.small nav, .small small {
		display: none;
	}

	.small .content {
		background: #fff;
		width: 360px;
	}

	.small .options {
		margin: 0;
		overflow: hidden;
	}

	.small h1 {
		color: #6b931e;
		font-size: 29px;
		font-weight: 300;
		text-align: center;
		padding: 10px 0 25px;
	}

	.small a {
		background: #e5eed5;
		color: #7aa031;

		float: left;
		padding: 6px 18px;
		border-radius: 5px;

		font-size: 13px;
		font-weight: 500;
	}

		.small a:hover {
			background: #e0ecc8;
			color: #7aa031;
		}

	.small a + a {
		float: right;
	}

	.small .code {
		padding-top: 1em;
	}

		.small .code textarea {
			width: 320px;
			background: #ccc;
			margin: 1em 0;
			font-family: monospace;
		}


nav {
	overflow: hidden;
	padding-bottom: 40px;
}

	nav ul {
		float: right;
	}

	nav li, nav img {
		float: left;
	}

	nav li {
		list-style: none;
		font-size: 13px;
		font-weight: 500;

		background: #444f5f;
		color: #70829b;
		margin-top: -11px;
		margin-right: 80px;

		padding: 0 10px;
	}

		nav li:last-child {
			margin-right: 0;
		}

		nav li.elapsed {
			color: #fff;
		}

	nav ul {
		height: 1px;
		margin-top: 10px;
		border-bottom: 1px solid #576477;
	}

a {
	font-weight: 500;
	color: #a0afc6;
	text-decoration: none;
}

	a:hover {
		color: #fff;
	}

.content {
	background: #36404e;
	padding: 40px 50px;
	border-radius: 5px;
}

.options {
	margin-top: 2em;
}

article {}

	article h1 {
		font-size: 29px;
		line-height: 35px;
		font-weight: 300;
		color: #fff;

		padding-bottom: 15px;
	}

	article ul {
		padding-left: 2em;
	}

		article ul li {
			margin: 6px 0;
		}

	article code {
		display: inline-block;
		border-radius: 4px;
		background: #3C4757;
		padding: 0 6px;
	}

fieldset {
	border: none;
}

form {
	width: 900px;
	margin-top: 2em;
}

	form p {
		position: relative;
		margin-bottom: 15px;
	}

	form i {
		position: absolute;
		left: 0;
		top: 18px;
		width: 220px;

		font-size: 11px;
		font-style: normal;
		color: #65758c;
	}

	form .more {
		margin-left: 220px;
	}

label {
	font-size: 13px;
	line-height: 18px;
	font-weight: 500;

	display: block;
	padding-top: 3px;
	float: left;
	width: 220px;

	cursor: pointer;
}

input:not([type="checkbox"]), textarea, select {
	padding: 8px 20px;
	border: none;
	border-radius: 5px;

	font: 13px/25px "Helvetica Neue", "Open Sans", "DejaVu Sans", "Arial", sans-serif;
	color: #576170;

	width: 400px;
	margin-bottom: 10px;
}

	textarea {
		resize: vertical;
		min-height: 150px;
		max-height: 600px;

		padding: 12px 20px;
	}

	input:focus, textarea:focus {
		outline: none;
	}

select {
	width: 444px;
	padding: 10px 20px;
	background: #fff;
	border: 2px solid #36404e;
	margin-left: -2px;
}

.error {
	width: 810px;
	padding: 10px 20px;
	margin-bottom: 25px;

	background: #b43e27;
	color: #fff;

	border-radius: 5px;
}

	form .error p {
		margin: 0;
	}

.btn {
	border: none;
	border-radius: 5px;
	display: inline-block;

	font: 500 13px/18px "Helvetica Neue", sans-serif;
	padding: 11px 20px;

	background: #3f75c3;
	color: #fff;

	cursor: pointer;
}

	.btn:hover {
		background: #4680d3;
	}

	.btn.quiet {
		color: #ccc;
	}

form .btn {
	margin-left: 220px;
}

form .quiet {
	margin-right: 25px;
}