html { height: 100%; }

body {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	background: #f5f7f9;
	font-size: 100%;
}

a, p, table, li {
	font-size: 13px;
	text-decoration: none;
	line-height: 1.3em;
}

h1 {
	font-family: "Arial Black", Arial, sans-serif;
	font-size: 4em;
	font-weight: 900;
	letter-spacing: -.09em;
	margin: 20px 0;
	line-height: 1em;
}

h1.lg {
	font-size: 130px;
	text-transform: uppercase;
	letter-spacing: -4px;
	margin: 0;
	padding: 20px 0;
}

h2 {
	font-weight: 200;
	letter-spacing: .1em;
	margin: 0;
}

h2, h5 {
	text-align: center;
	padding: 60px 0 40px;
}

h3 {
	padding: 50px 0 0;
	text-align: center;
}

h3 i {
	font-weight: 300;
	color: #aaa;
}

h3 span {
	color: #84b5bd;
	font-weight: 400;
}

section {
	margin-left: 350px;
	margin-right: 100px;
	background: #fff;
	padding: 60px;
	border: solid 1px #eee;
}

#nav {
	position: absolute;
	width: 350px;
	border-right: solid thin #eee;
	height: 100vh;
	padding-right: 40px;
}

#top {
	background: #27272d;
	padding: 20px;

	font-weight: 800;
}

#top p {
	color: #fff;
	font-weight: bold;
	font-size: 28px;
	text-align: center;
	padding: 0;
	margin: 0;
}

#top p span {
	font-weight: 300;
	color: #84b5bd;
}

#top a {
	font-size: 18px;
	
}

.na, .nav {
	list-style: none;
	padding: 0;
	margin: 0;
}

.na ul, .nav ul {
	font-size: 14px;
}

.na a, .nav a {
	text-decoration: none;
	color: #666;
}

.na a:hover, .nav a:hover {
	color: #000;
}

.na li.active ul, .nav li.active ul {
	display: block;
}

.lightblue { color: #84b5bd; }
.yellow { color: #dda433; }
.white { color: #fff; }
.red { color: red; }
.text { text-transform: uppercase; }
.f2 { font-size: 18px; }
.f9 { font-size: 90px; }
.center { text-align: center; }

td {
	padding: 3px 20px 3px 10px;
	border: solid thin #eee;
}

.files {
	list-style-type: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border: solid thin #eee;
}

.files li {
	font-size: 25px;
	line-height: 1.8em;
	padding-left: 50px;
}

.files li:nth-child(even) {
	background: #f5f5f5;
}

.files li.m1 { padding-left: 100px; }
.files li.m2 { padding-left: 150px; }
.files li span { opacity: .4; }

.fi-folder:before { content: "☐"; }

.m1 { padding-left: 50px; }
.m2 { padding-left: 100px; }

pre {
	background: #fafafa;
	border: solid thin #eee;
	padding: 20px;
	font-size: 12px;
	overflow: auto;
}

code {
	display: block;
	padding-left: 40px;
}

.code {
	background: #fafafa;
	border: solid thin #ccc;
	padding: 20px;
	font-family: monospace;
	margin: 20px 0;
}

.code p {
	text-align: left;
	margin: 0 !important;
}

hr {
	padding: 1px !important;
	background: #ddd !important;
	margin: 20px 0;
	border: none !important;
}

@media screen and (max-width: 735px) {
	#nav {
		position: relative;
		width: 100%;
		padding: 0;
		height: auto;
		border-right: none;
		border-bottom: solid thin #eee;
	}

	section {
		margin: 0;
	}

	.files li { font-size: 1em; padding-left: 10px; }
	.files li.m1 { padding-left: 30px; }
	.files li.m2 { padding-left: 60px; }
	.m1 { padding-left: 30px; }
	.m2 { padding-left: 60px; }
}