* {
			margin: 0;
			box-sizing: border-box;
			font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
		}
		body {
			overflow-y: scroll;
			background-color: #F7F7F7;
			padding-bottom: 100px;
		}
		a, a:visited {
			color: black;
		}
		a:hover {
			color: #333;
		}
		h1 {
			text-align: center;
			margin: 30px 0 15px;
		}
		h1.major {
			font-size: 1.75em;
		}
		h2 {
			margin: 20px 0 10px;
		}
		h3 {
			margin: 15px 0 8px;
		}
		blockquote {
			border-left: 4px solid #ddd;
			color: #666;
			margin: 10px 0;
			padding: 1px 0 1px 15px;
		}
		blockquote.cli {
			font-family: Consolas;
			background-color: black;
			color: white;
			border-left: 4px solid #aaa;
			padding-top: 3px;
			padding-bottom: 3px;
		}
		blockquote.cli:before {
			content: "$ ";
		}
		hr {
			height: 4px;
			margin: 15px 0 30px;
			border-top: 4px dotted #ccc;
		}
		ul {
			list-style-type: square;
		}
		.projects {
			list-style-type: none;
			padding: 0;
			display: flex;
			justify-content: center;
			flex-wrap: wrap;
		}
		.projects a {
			text-decoration: none;
			margin: 10px;
		}
		.projects li {
			padding: 15px;
			text-align: center;
			font-size: 1em;
			overflow: hidden;
			background-color: #eee;
			transition: background-color 100ms ease-in-out;
		}
		.projects li:hover {
			background-color: #ccc;
		}
		.uploads {
			border-collapse: collapse;
			margin: 0 auto 40px;
		}
		.uploads th {
			background-color: #ebebeb;
		}
		.uploads td {
			font-size: 0.9em;
		}
		.uploads th, .uploads td {
			padding: 0.5em;
			border: 1px solid #dedede;
		}
		.uploads td:nth-child(4) {
			text-align: center;
			font-size: 1.14em;
			padding: 5px 1px 1px;
		}
		.uploads tr:nth-child(2n+2) {
			background-color: #f2f2f2;
		}
		.alert {
			width: 100%;
			min-height: 100px;
			text-align: center;
			padding: 0 20px 30px;
			border: 3px solid red;
			background-color: pink;
		}
		nav {
			background-color: white;
			padding: 2px 2px 5px 5px;
			box-shadow: 0 0 15px 1px #666;
			position: fixed;
			top: 0; /* this is fiddled with by script */
			right: 0;
			z-index: 1; /* so that stuff doesn't go above it during jquery animation */
		}
		nav a {
			text-decoration: none;
		}
		nav span {
			width: 30px;
			height: 40px;
			/* important overrides fontawesome setting them to inline-block */
			display: block !important;
			margin-right: 6px;
			text-align: center;
			/* important else it doesn't work... probably fontawesome doing that */
			line-height: 40px !important;
			cursor: pointer;
			color: #333;
		}
		nav div {
			width: 4px;
			height: 42px;
			position: absolute;
			top: 0;
			right: 0;
			background-color: black;
			transition: top 150ms ease-in-out;
		}
		nav span:nth-child(2):hover ~ div { /* use this in js when clicking and changing view */
			top: calc(100% - 42px);
		}
		.navhint {
			position: absolute;
			top: 20px;
			right: 50px;
			font-style: italic;
			transform: rotate(355deg);
			background-color: #F7F7F7;
		}
		.navhint:after {
			content: "\f0a4";
			font-family: "FontAwesome";
		}
		.unlock {
			height: 44px;
			position: fixed;
			right: -244px;
			bottom: 0;
			box-shadow: 0 0 15px 1px #666;
			z-index: 1; /* so that stuff doesn't go above it during jquery animation */
			background-color: #F7F7F7;
			cursor: pointer;
			color: #222;
			transition: right 400ms ease-in-out;
		}
		.unlock:after {
			content: "";
			display: table;
			clear: both;
		}
		.unlock > * {
			float: left;
		}
		.unlock span {
			width: 44px;
			line-height: 48px !important;
			text-align: center;
			font-size: 1.6em;
		}
		.unlock input {
			float: left;
			color: #222;
		}
		.unlock input[type="password"] {
			width: 200px;
			height: 44px;
			font-size: 1.75em;
			padding: 0 10px;
			border-width: 0 2px;
			border-style: solid;
			border-color: #666;
			outline: 0;
		}
		.unlock input[type="submit"] {
			width: 44px;
			height: 44px;
			font-family: "FontAwesome";
			font-size: 1.5em;
			text-indent: -4px;
			border: 0;
			outline: 0;
			cursor: pointer;
			background-color: transparent;
			transition: text-indent 100ms ease-in-out;
		}
		.unlock input[type="submit"]:active {
			text-indent: 4px;
		}
		main {
			padding: 0 30px;
		}
		main.resources {
			width: 1000px;
			margin: 0 auto;
		}
		section {
			padding: 20px 0 40px;
		}
		.resources h1:not(.major) {
			text-align: left;
		}
		.resources p {
			margin: 10px 0;
		}
		.resources ul {
			margin-bottom: 8px;
			list-style-type: none;
		}
		.resources ul li:before {
			content: "\f105";
			font-family: "FontAwesome";
			color: #333;
			padding-right: 8px;
		}
		.resources li:not(:last-child) {
			margin-bottom: 4px;
		}