body {
    margin: 0px;
		padding-top: 0px;
		padding-bottom: 20px;
		padding-left: 0px;
		padding-right: 0px;
    background-color: #f0f0f0;
    color: #101010;
    font-family: Roboto, serif;
}

/*
LAYOUT
*/

.outer-container {
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: 1fr minmax(auto,1000px) 1fr;
}

.inner-container {
		display: grid;
		grid-template-rows: auto auto 1fr;
		grid-template-columns: auto 1fr;
		/*min-height: 100vh;*/
}

.header {
		display: flex; /* so content can be centered */
		align-items: center;
		grid-column-start: span 2;
		margin: 0px;
		padding: 0px;
		font-size: 40px;
		background-color: #1e1e1e;
		color: #e6e6e6;
		border-bottom: 2px solid #404040;
		font-weight: bold;
		height: 60px;
		font-family: 'Josefin Sans', sans-serif;
		/*vertical-align: middle;*/
}

.header img {
		width: 50px;
		height: 50px;
}

.header span {
		padding-left: 15px;
}

.menu {
		display: flex; /* so content can be centered */
		align-items: center;
		grid-column-start: span 2;
		margin: 0px;
		padding: 0px;
		word-spacing: 20px;
		background-color: #1e1e1e;
		color: #404040;
		/*font-size: 18px;*/
		height: 30px;
		font-size: 16px;
}

.menu span {
		word-spacing: 20px;
}

.menu a:link, .menu a:visited, .menu a:hover {
		color: #e6e6e6;
		text-decoration: none;
}

.menu a:active {
		color: #ffffff;
		text-decoration: none;
}

.navigation {
		margin-top: 0px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 25px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		background-color: #ddd;
		white-space: nowrap;
		line-height: 150%;
}

.content {
		grid-column-start: span 2;
		margin: 0px;
		padding: 0px;
}

.content-with-navigation {
		margin: 0px;
		padding-left: 10px;
}

/*
CONTENT STYLING
*/

.intro {
		margin-top: 40px;
		margin-bottom: 40px;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
		font-size: 24px;
		line-height: 120%;
}

.fancy-list {
		column-count: 2;
		list-style: none;
		margin: 0 0 0 0;
		padding: 0 0 0 0;
}

.fancy-list li {
		margin: 0 10px 10px 10px;
		padding: 10px;
		page-break-inside: avoid;
		background-color: #fffff0;
		border: 1px solid #DDDDDD;
		border-radius: 20px;
}

h1 {
		margin-top: 20px;
		margin-bottom: 40px;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 5px;
		padding-right: 5px;
		background-color: #93c47e;
		border-radius: 4px;
		font-size: 30px;
		font-weight: bold;
}

h2 {
		margin-top: 30px;
		margin-bottom: 20px;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 5px;
		padding-bottom: 5px;
		padding-left: 5px;
		padding-right: 5px;
		background-color: #a4c2f4;
		border-radius: 4px;
		font-size: 20px;
		font-weight: bold;
}

h2 a {
		text-decoration: none;
}

h2 a img {
		vertical-align: middle;
}

p {
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 18px;
}

ol, ul {
		font-size: 18px;
}

li + li {
		margin-top: 10px;
}

code {
		background-color: #e0e0e0;
		font-family: monospace;
		padding-left: 4px;
		padding-right: 4px;
}

textarea {
		width: 100%; /* 800px - margins */
		/*height: auto;*/
		margin-top: 20px;
		margin-bottom: 20px;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
		border: 2px solid #ccc;
		border-radius: 4px;
		background-color: #e0e0e0;
		font-family: monospace;
		font-size: 16px;
		resize: none;
}

.code-container textarea {
		padding-top: 30px; /* space for copy button */
}		

.fancy-list-table {
		border: none;
		font-size: 20px;
}

.fancy-list-table td {
		border: none;
}

.fancy-list-table td:first-child {
		width: 40px;
}

table {
		border-collapse: collapse;
		width: 100%;
}

thead {
		background-color: #ddd;
}

th, td {
		border: 1px solid #888;
		vertical-align: top;
		text-align: left;
		padding: 10px;
}

.table-stats tr:first-child td { 
		background: #ddd;
}

.table-stats tr td:first-child { 
		background: #ddd;
}

video {
		display: block;
		margin: auto;
}

figure figcaption {
		text-align: center;
		font-style: italic;
}

.code-container {
  position: relative;
}

.code-container input {
  position: absolute;
	top: 24px; /* 20 matches margin of text area */
	right: 2px;
	width: 20px;
	height: 20px;
}

.navigation-heading {
		margin-top: 20px;
		margin-bottom: 0px;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 10px;
		padding-bottom: 5px;
		padding-left: 0px;
		padding-right: 0px;
    color: #444;
		border-top: 1px solid #888;
}

.next-previous {
		text-align: center;
		vertical-align: middle;
		margin-top: 50px;
		margin-bottom: 30px;
		margin-left: 0px;
		margin-right: 0px;
		padding-top: 0px;
		padding-bottom: 0px;
		padding-left: 0px;
		padding-right: 0px;
}

.next-previous a:link, .next-previous a:visited, .next-previous a:hover .next-previous a:active {
		margin: 10px;
		padding: 10px;
		background-color: #93c47e;
		border-radius: 4px;
		color: #101010;
		text-decoration: none;
}

input[type=button] {
		font-size: 20px;
		cursor: pointer;
}