article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog {
	display: block;
}
audio[controls], video, canvas {
	display: inline-block;
}

html {
	font-size: 100%;
}
body {
	margin: 0;
	font-size: 1em;
	color: #222;
}
p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, h4, h5, h6, img {
	margin: 0 0 1.625em;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: bold;
	font-family: 'Palatino', 'Palatino Linotype', 'Book Antiqua', 'FreeSerif', serif;
}
h1 {
	font-size: 4em; 
	line-height: 1.2em;
	margin: 0 0 0.4em;
}
h2 {
	font-size: 2.5em;
	line-height: 1.2em;
	margin: 0 0 0.6em;	
}
h3 {
	font-size: 1.6em;
	line-height: 1em;
	margin: 0 0 1em;
}
h4, h5, h6 {
	font-size: 1em;
}
small {
	font-size: 0.6em;
	margin: 0 0 2.6em;
}

blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}
blockquote, q, cite {
	font-style: italic;
}
blockquote {
	padding-left: 1.625em;
	border-left: 3px solid #ccc;
}
blockquote > p {
	padding: 0;
}

ul, ol {
	list-style-position: inside;
	padding: 0;
}
li ul, li ol {
	margin: 0 1.625em;
}
dl dd {
	margin-left: 1.625em;
}

a {
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
a:focus {
	outline: thin dotted;
}
/* Better CSS outline suppression: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active {
	outline: none;
}

figure {
	margin: 0;
}
img {
	border: 0;
}

abbr[title], dfn[title] {
	border-bottom: 1px dotted #333;
	cursor: help;
}

mark, ins {
	background: #ff0;
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

strong, b, dt, th {
	font-weight: bold;
}
dfn {
	font-style: italic;
}
var, address {
	font-style: normal;
}
/* Position 'sub' and 'sup' without affecting line-height: gist.github.com/413930 */
sub, sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}
sup {
	top: -0.5em;
}
sub {
	bottom: -0.25em;
}

/* Print styles
---------------------------------------- */
@media print {
	* {
		background: transparent !important;
		color: black !important; /* The woes of CSS color in print typography: sanbeiji.com/archives/953 */
		text-shadow: none !important;
	}
	a, a:visited {
		color: #333 !important;
		text-decoration: underline;
	}
	a[href]:after {
		content: " (" attr(href) ")";
	}
	abbr[title]:after {
		content: " (" attr(title) ")";
	}
	/* Do not show javascript and internal links */
	a[href^="javascript:"]:after, a[href^="#"]:after {
		content: ""; 
	}
	/* Printing Tables: css-discuss.incutio.com/wiki/Printing_Tables */
	thead {
		display: table-header-group;
	}
	tr, img {
		page-break-inside: avoid;
	}
	p, h2, h3 {
		orphans: 3;
		widows: 3;
	}
	h2, h3{
		page-break-after: avoid;
	}
}

/* ------------------------------------- */

header {
	margin-bottom:2em; margin-top:4em;
	padding-top:1em;
}
header, article, footer {
	/*margin-left: 5em;*/
	margin-left:auto;
	margin-right:auto;
	width:75%;
	max-width:50em;
}

article img{
	margin-right: 0.4em;
	box-shadow: 0.4em 0.4em 0.2em #ccc;
}

header nav{
	background-color: #080;
	background: linear-gradient(#080, #050);
	background: -moz-linear-gradient(top,  #080,  #050);
	background: -webkit-gradient(linear, left top, left bottom, from(#080), to(#050));
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#008000', endColorstr='#005000');

	box-shadow: 0px 0.4em 0.2em #888;
	text-shadow: 0.05em -0.05em 0.02em #222;

	padding-top: 0.2em;
	padding-bottom:0.4em;
	position:absolute;
	top: 0;
	left: 0;
	width: 100%;
}

nav ul, nav ul li{
	display:inline;
}

nav div{
	width: 75%;
	max-width: 50em;
	margin-left:auto;
	margin-right:auto;
}


header nav a{
	color: #eee;
	padding: 0.5em;
	margin-right: 1.5em;
	font-size: 1.0em;
	font-family: Helvetica, sans-serif;
	text-decoration: none;
}
header nav li.sel {
	font-weight: bold;
}
header nav a:hover {
	color: #eee;
	text-decoration: underline;
}
header nav a:visited {
	color: #eee;
}

@media only screen and (max-device-width 800px), only screen and (max-width: 800px) {
  nav div {
    width: 100%;
  }
  header nav ul {
    padding-left: 0.5em;
    padding-right: 0.5em;
    display: flex;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 0.1em;
  }
  header nav a{
    margin: 0;
  }

  header img {
    max-width: 100%;
    height: auto;
  }
}

a {
	color: #228;
}
a:visited {
	color: #225;
}

div.multicol{
	overflow: auto;
	width: 100%;
}

div.left {
	float: left;
 	max-width: 65%;
}

div.left + div.left{
	padding-left: 2em;
}

div.right {
	float: right;
 	max-width: 45%;
}

img.right {
	margin-left: 2em;
	margin-bottom: 1em;
	float: right;
}

ul {
	list-style-position: outside;
	padding-left: 1em;
}

footer{
	border-top: thin solid gray;
	padding-top: 0.5em;
	margin-top: 3em;
	color: gray;
}
footer p {
	font-size: 0.7em;
}