body
{
	font-family: sans-serif;
	font-size: 100%;
	margin: 0em;
}

section, footer
{
	margin: 1em auto 0em auto;
	max-width: 75em;
	padding: 0em 1em 0em 1em;
}

footer p
{
	font-size: 0.9em;
}

h2
{
	font-size: 1.1em;
}

h3
{
	font-size: 1.0em;
}

img
{
	max-width: 100%;
}

video
{
	max-width: 100%;
}

.thumbnails
{
	display: inline-block;
}

nav
{
	background-color: #6666ff;
}

nav .container
{
	display: flex;
	margin: 0em auto 0em auto;
	max-width: 75em;
}

nav ul
{
	display: flex;
	list-style-type: none;
	margin: 0em;
	padding: 0em;
}

nav li a
{
	color: #ffffff;
	cursor: pointer;
	display: block;
	font-weight: bold;
	padding: 14px 14px;
	text-align: center;
	text-decoration: none;
}

nav li a.active
{
	color: #ffff00;
}

nav li a:hover:not(.active)
{
	background-color: #999999;
}

nav .title
{
	color: #ffffff;
	font-weight: bold;
	margin: auto 0em auto auto;
}

.sc
{
	font-variant: small-caps;
}

pre
{
	background-color: #FAFAFA;
	border-radius: 5px;
	overflow: auto;
	tab-size: 3;
}

pre code
{
	display: inline-block;
	margin: 0.4em;
}

.diagram
{
	display: block;
	margin: 0em auto 0em auto;
}

.listing
{
	background-color: #FAFAFA;
	border-radius: 5px;
	overflow: auto;
}

.listing img
{
	margin: 0.4em;
	max-width: none;
}