.breadcrumbs {
	text-align: center;
	font-size: 75%;
}
article header h1 {
	margin-top: .5em;
}

* {
    box-sizing: border-box;
}
#title-block-header * {
	text-align: center;
}

body {
	font-family: "Lato", sans-serif;
	background-color: #fafafa;
	background: #fafafa;
	color: black;
	padding: 0px;
	line-height: 1.3;
	margin: 5px;
}
/* Dillo seems to only accept margins for the body */
body > * {
	margin-left: -5px;
	margin-right: -5px;
}
body > *:first-child {
	margin-top: -5px;
}
body > *:last-child {
	margin-bottom: -5px;
}

article {
	font-family: serif;
}
article h1 {
	margin-top: .5em;
	margin-bottom: .5em;
}
main {
    /*margin: auto;*/
	margin: .5em;
	text-align: center;
	padding-bottom: .5em;
}

main address,
main aside,
main blockquote,
main details,
main dialog,
main dd,
main div,
main dl,
main dt,
main fieldset,
main figcaption,
main footer,
main form,
main h1,
main h2,
main h3,
main h4,
main h5,
main h6,
main header,
main hgroup,
main hr,
main li,
main main,
main nav,
main ol,
main p,
main section,
main ul {
	width: 32rem;
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	text-align: left;
}
main pre {
	display: inline-block;
	text-align: left;
	max-width: 100%;
}
main figure
{
	margin-left: 0px;
	margin-right: 0px;
	padding: 0px;
}
main div.sourceCode {
	width: 100%;
	text-align: center;
}
main pre.sourceCode {
	text-align: left;
	display: inline-block;
	max-width: 100%;
	width: auto;
}

figure img, p > img:first-child:last-child {
	display: block;
	margin: auto;
	max-height: calc(100vh - 2em);
}

.indexheader {
	background: #27212b;
	text-align: center;
	color: white;
	padding: .5em;
	border-bottom: 10px solid #685873;
}
.indexheader a         { color: white; }
.indexheader a:visited { color: white; }
.indexheader a:focus   { color: white; }
.indexheader a:active  { color: white; }


.indexheader img {
	display: block;
	margin: auto;
	max-width: 150px;
}
.indexheader h1 {
	font-size: 120%;
	margin-top: 0px;
}


ul.image-gallery {
    padding: 0px;
    text-align: center;
    left: 0px;
	width: 100%;
}
ul.image-gallery * {
	width: auto;
}
ul.image-gallery li {
    list-style: none;
    display: inline-block;
    vertical-align: middle;
    margin: .5em;
	text-align: center;
	padding-left: 0px;
}
ul.image-gallery li a:after, ul.image-gallery li h2:after {
	display: none !important;
}
ul.image-gallery img {
	display: block;
}
ul.image-gallery img + h2 {
	margin-top: .5em;
	margin-bottom: 0px;
	font-size: 100%;
	text-align: center;
}


main figcaption {
	font-size: 80%; 
	line-height: 1.2;
	margin-top: 1em;
	margin-bottom: 1em;
	width: 30rem;
}
img {
	max-width: 100%;
	width: auto;
	height: auto;
	page-break-inside: avoid;
}

pre, code {
	font-family: inconsolata, monospace;
}
.sourceCode > span {
	page-break-inside: avoid;
}

@supports (float: right) {
	/* If someone's using a low-featured browser, 
	   (eg. dillo) we can't really depend on it to get the fonts right. */

	article {
		font-family: "Linux Libertine O", "Times New Roman", serif;
	}
	body, html {
		font-size: 16pt;
	}
	pre, code {
		font-size: 12pt;
	}
}

/*
@supports (hyphens: auto) { 
		@media (min-width: 600px) {
		body {
			text-align: justify;
			hyphens: auto;
			hyphenate-limit-lines: 2;
		}
	}
}
*/
@media (max-width: 400px) {
	body {
		hyphens: auto;
		hyphenate-limit-lines: 2;
	}
}

p code {
	background: #F0F0F0;
	padding: 2px 4px 2px 4px;
	border-radius: 3px;
	border: 1px solid #DBDBDB;
	hyphens: none;
}

a {
	color: #591972;
	position: relative;
}
a:visited {
	color: #685873;
}
a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(0,0,0,.15);
	text-underline-offset: 0.25em;
}
a:hover, a:focus {
  text-decoration-color: inherit;
}

small {
	font-size: 80%;
}

h1, h2 {
	font-weight: normal;
}
hr, h2:after {
	border: 1px solid #DBDBDB;
	border: 1px solid rgba(0, 0, 0, .1);
	width: 100%;
	display: block;
	content: " ";
}
h1, h2, h3, h4, h5, h6 {
	margin-top: 1.5em;
	margin-bottom: 0px;
	font-family: "Lato", sans-serif; 
}
h1.title {
	margin-top: 1.25em;
}
h1 { font-size: 140%; 
	 margin-bottom: .25em; }
h2 { font-size: 120%; }
h3 { font-size: 105%; }
h4 { font-size: 100%; }
h5 { font-size: 100%; }
h1, .subtitle {
	text-align: center;
}
h2 + *, h3 + *, h4 + *, h5 + * {
	margin-top: .66em;
}


.info {
	background: #eeece8;
	border-radius: 3px;
	padding: .5em;
	border: 1px solid #c7bda5;
}
blockquote.info {
	font-size: 100%;
}
.info *:first-child {
	margin-top: 0px;
}
.info *:last-of-type {
	margin-bottom: 0px;
}


.example {
	background: #DCEAEF;
	border-radius: 3px;
	padding: .5em;
	border: 1px solid #7DA8B6;
}
blockquote.example {
	font-size: 100%;
}
.example *:first-child {
	margin-top: 0px;
}
.example *:last-of-type {
	margin-bottom: 0px;
}
.example::before {
	content: "e.g.";
	font-size: 100%;
	font-weight: bold;
	color: #4d96ae;
	float: left;
	margin-right: .25em;
}

/* Make lists line up with left margin */
ul, ol { padding-left: 1em; }
li     { padding-left: .25em; }
li::marker {
	font-weight: bold;
}
footer {
	font-size: 80%;
	text-align: center;
	margin-top: 2em;
}

blockquote {
	background: #F0F0F0;
	padding: 10px;
	margin: 0px;
	font-size: 90%;
	border-left: 3px solid #DBDBDB;
}
blockquote p:first-child {
	margin-top: 0px;
}
blockquote p:last-child {
	margin-bottom: 0px;
}

blockquote.pull-away {
    font-size: 120%; 
    text-align: center; 
    float: right; 
    width: 20ch; 
    display: block;
    position: relative;
    padding-left: 3ch;
    padding-right: 3ch;
    margin: 5px;
    margin-bottom: 0px;
    background: none;
    border: none;
}
blockquote.pull-away:before, .pull-away:after {
    font-size: 300%;
    line-height: .2em;
    vertical-align: bottom;
    position: absolute;
	bottom: 40%;
    bottom: calc(50% - .5em);
    line-height: 100%;
}
blockquote.pull-away:before {
    content: "“";
    left: 0px;
}
blockquote.pull-away:after  {
    content: "”";
    right: 0px;
}


.sourceCode > pre, pre {
	background: #F0F0F0;
	padding: 5px;
	border-radius: 3px;
	border: 1px solid #DBDBDB;
	overflow-x: auto;
}
a.sourceLine {
	text-decoration: none;
	background-image: none;
	color: #212121;
}
	
.subtitle {
	margin-bottom: 2em;
}

/*
a.footnote-ref {
  display: inline-block;
  position: relative;
  width: 1.5ch;
  height: 1em;
  text-align: center;
}
a.footnote-ref:after {
  display: none;
}
a.footnote-ref sup {
  position: absolute;
  top: -.3em;
  left: 0px;
  right: 0px;
  display: inline-block;
}
*/
table {
	display: inline-block;
	text-align: left;
}
.pretty-table {
	text-align: center;
}
.pretty-table > table {
	border-collapse: collapse;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	display: inline-block;
}
.pretty-table tr:nth-child(odd) {
	background: #F0F0F0;
}
.pretty-table tr:nth-child(even) {
	background: white;
}
.pretty-table th {
	background: #DBDBDB;
}
.pretty-table td, .pretty-table th {
	border: 1px solid #DBDBDB;
	padding-left: 1ch;
	padding-right: 1ch;
}

/* For index */
footer {
	clear:both;
}
.entry-listings {
	margin-left: 0px;
	padding-left: 0px;
}
.entry-listings > li {
	list-style: none;
	justify-content: space-between;
	clear: both;
}
.entry-listings > li + li {
	margin-top: 1.5em;
}
#moon-sketch {
	opacity: .4;
	display: block;
	margin: auto;
	margin-top: -30px;
	text-align: center;
}
.keywords {
	font-size: 75%;
	display: inline-block;
	float: left;
	clear: both;
}
.length {
	font-size: 75%;
	display: inline-block;
	float: right;
}
h1.blog-title {
	text-shadow: 0px 2px 4px #FAFAFA;
	margin-top: -150px;
	margin-bottom: 40px;
}
.entry-listings > li .time {
	display: block;
	float: right;
}
@media only screen and (max-width: 500px) {
	.entry-listings > li {
		flex-direction: column;
		margin-bottom: 1em;
	}
	.entry-listings > li .time {
		display: block;
		font-size: 80%;
		float: none;
	}
}





@media print {
	body {
		font-size: 12pt;
		max-width: 100%;
	}
	pre, code {
		font-size: 10pt;
	}
	h1 {
		margin-top: 0px;
	}
	#blog-home-link, footer {
		display: none;
	}
	body {
		background: white;
	}
	.indexheader {
		border-bottom: none;
		background: white;
		color: black;
	}
	.indexheader a         { color: black; }
	.indexheader a:visited { color: black; }
	.indexheader a:focus   { color: black; }
	.indexheader a:active  { color: black; }
	.indexheader img {
		display: none;
	}
}


code span.al { color: #ff0000; font-weight: bold; } /* Alert */
code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code span.at { color: #7d9029; } /* Attribute */
code span.bn { color: #40a070; } /* BaseN */
code span.bu { } /* BuiltIn */
code span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code span.ch { color: #4070a0; } /* Char */
code span.cn { color: #880000; } /* Constant */
code span.co { color: #60a0b0; font-style: italic; } /* Comment */
code span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code span.do { color: #ba2121; font-style: italic; } /* Documentation */
code span.dt { color: #902000; } /* DataType */
code span.dv { color: #40a070; } /* DecVal */
code span.er { color: #ff0000; font-weight: bold; } /* Error */
code span.ex { } /* Extension */
code span.fl { color: #40a070; } /* Float */
code span.fu { color: #06287e; } /* Function */
code span.im { } /* Import */
code span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
code span.kw { color: #007020; font-weight: bold; } /* Keyword */
code span.op { color: #666666; } /* Operator */
code span.ot { color: #007020; } /* Other */
code span.pp { color: #bc7a00; } /* Preprocessor */
code span.sc { color: #4070a0; } /* SpecialChar */
code span.ss { color: #bb6688; } /* SpecialString */
code span.st { color: #4070a0; } /* String */
code span.va { color: #19177c; } /* Variable */
code span.vs { color: #4070a0; } /* VerbatimString */
code span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */


ul[title=keywords] {
    list-style: none;
    padding: 0px;
	width: auto;
	display: inline;
	height: 1rem;
	font-size: 66%;
	margin-left: 0px;
}
ul[title=keywords] > li {
    list-style: none;
    display: inline;
}
ul[title=keywords] > li .hashtag {
    opacity: .5;
}
ul.index-items {
    list-style: none;
    padding: 0px;
	line-height: 1rem;
}
ul.index-items > li + li {
    margin-top: 1em;   
}
ul.index-items .wordcount {
	font-size: 66%;
	display: inline;
	margin-left: auto;
	float: right;
	height: 1rem;
	line-height: 1rem;
}
ul.index-items time {
	height: 1rem;
	margin-left: auto;
    font-size: 75%;
	float: right;
	line-height: 1rem;
	height: 1rem;
}
.index-items .hbox {
	height: 1rem;
}

@media only screen and (max-width: 600px) {
	ul.index-items a {
		line-height: 1.3;
		text-align: center;
	}
	ul.index-items time {
		float: none;
		margin-left: 0px;
		display: block;
		height: auto;
		line-height: 1.3;
		text-align: center;
	}

	ul.index-items .wordcount {
		float: none;
		margin-left: 0px;
		display: block;
		height: auto;
		line-height: 1.3;	
		text-align: center;
	}
	.index-items .hbox {
		height: auto;
		line-height: 1.3;
		text-align: center;
	}
	ul[title=keywords] {
		height: auto;
		line-height: 1.3;
		display: block;
		text-align: center;
	}
}



.secondary-outputs {
	font-size: 66% !important;
	text-align: center;
}