@charset 'utf-8';

/* basic text formatting */
* { box-sizing: border-box; }
body {
	margin: 0;
	background-color: #fff;
	color: #000;
	font: normal 12pt "Roboto", sans-serif;
}
p, ul, ol { margin: 8pt 0; }
a {
	color: #07a;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	text-decoration-skip: ink;
}

/* lists */
@media (min-width: 40em) {
	#content ul, #content ol { padding-right: 2em; }
}
@media (max-width: 40em) {
	#content ul, #content ol { padding-left: 1.2em; }
}
li, li ul, li ol { margin: 2pt 0; }
li p:first-child { margin-top: 2pt; }
li p:last-child { margin-bottom: 2pt; }
li ul li { list-style-type: disc; }
li ol li { list-style-type: lower-alpha; }

/* headings and separators */
h1, h2, h3 { font-family: "Roboto", sans-serif; }
h1 {
	margin: 8pt 0 0 0;
	font-size: 22pt;
}
h2, h3 {
	margin: 18pt 0 0 0;
}
@media (max-width: 40em) {
	h1 { font-size: 18pt; }
	h2 { font-size: 16pt; }
	h3 { font-size: 13pt; }
}
h1 a, h2 a, h3 a {
	color: #048;
}
h1 a:hover, h2 a:hover, h3 a:hover {
	color: #3af;
	text-decoration: none;
}
h1 + p, h2 + p, h3 + p,
h1 + ul, h2 + ul, h3 + ul,
h1 + ol, h2 + ol, h3 + ol,
h1 + table, h2 + table, h3 + table {
	margin-top: 2pt;
}
article header p {
	margin-top: 0;
	color: #058;
}

/* horizontal separators */
hr {
	border: 1px solid #ddd;
	width: 90%;
	margin: 20pt auto;
}
article + hr {
	margin-top: 20pt;
	margin-bottom: 17pt;
}
article footer {
	margin-top: 18pt;
}
article footer > hr {
	margin-top: 18pt;
	margin-bottom: 15pt;
}
article footer > h2 {
	margin-top: 10pt;
}

/* main page layout - wide screen
   content and sidebar are side-by-side; everything's centered */
@media (min-width: 52.1em) {
	body { text-align: center; }
	#content {
		display: inline-block;
		vertical-align: top;
		width: 45em;
		margin-right: 2em;
		text-align: left;
	}
	#sidebar {
		display: inline-block;
		vertical-align: top;
		width: 20em;
		margin-left: 2em;
		text-align: left;
	}
	#site-header-aligner, #site-footer-aligner {
		display: inline-block;
		width: 69em;	/* nice */
		text-align: left;
	}
}
/* medium screen - sidebar goes below content */
@media (min-width: 52.1em) and (max-width: 75em) {
	#content { margin-right: 0; }
	#sidebar {
		width: 45em;
		margin-left: 0;
		padding-right: 25em;
	}
	#site-header-aligner, #site-footer-aligner {
		width: 45em;
	}
}
/* narrow screen - everything's full-width with 3em side margins */
@media (min-width: 40em) and (max-width: 52.1em) {
	#content, #sidebar, #site-header-aligner, #site-footer-aligner {
		margin: 0 3em;
	}
}
/* mobile - side margins reduce to 0.5em */
@media (max-width: 40em) {
	#content, #sidebar, #site-header-aligner, #site-footer-aligner {
		margin: 0 .5em;
	}
}

/* site header */
#site-header {
	background: linear-gradient(#0cf, #06b 95%, #09c);
	overflow: hidden;
}
#site-header-aligner {
	padding-top: .3em;
}
#site-header h1 {
	margin: 0;
	font-size: 36pt;
	font-weight: bold;
	text-shadow: .05em .05em .2em rgba(0,0,0,.3);
}
@media (max-width: 40em) {
	#site-header h1 { font-size: 30pt; }
}
#site-header h1 a {
	color: #fff;
}
#site-header h1 a:hover {
	color: #fff;
	text-decoration: none;
	text-shadow: .05em .05em .2em rgba(0,0,0,.5);
}

/* site footer */
#site-footer {
	height: 18pt;
	background: linear-gradient(#09c, #06b 20%, #09d);
	color: #cdf;
}
#site-footer-aligner {
	height: 18pt;
	padding: .35em 0;
}
#site-footer p {
	margin: 0;
	font-size: 8pt;
	white-space: nowrap;
}
#site-footer a {
	color: #fff;
}
html, body {
	height: 100%;
}
#footer-pusher {
	min-height: 100%;
	margin-bottom: -18pt;
}
#footer-pusher::after {
	content: "";
	display: block;
	height: 18pt;
}

/* main nav bar */
#site-header nav { white-space: nowrap; }
#site-header nav a {
	display: inline-block;
	border-radius: .3em .3em 0 0;
	padding: .1em .7em;
	margin: .4em 0 0 0;
	color: #fff;
	font-size: 14pt;
	text-shadow: .05em .05em .1em rgba(0,0,0,.3);
}
@media (max-width: 40em) {
	#site-header nav a {
		padding: .1em .4em;
		margin-top: .3em;
		font-size: 12pt;
	}
}
#site-header nav a:first-of-type { margin-left: 0; }
#site-header nav a:hover {
	text-decoration: none;
	background-color: #4bf;
	box-shadow: .1em .1em .3em rgba(0,0,0,.3);
}
#site-header nav a.active {
	background-color: #fff;
	color: #000;
	text-shadow: none;
	box-shadow: .1em .1em .3em rgba(0,0,0,.3);
}
#site-header nav a.active:hover {
	text-shadow: .05em .05em .05em rgba(0,102,187,.4);
}

/* svg arrows for "left" and "right" buttons */
.page-left::before {
	content: url(/img/chevron-left.svg);
	display: inline-block;
	width: 9pt;
	margin-right: 2pt;
	vertical-align: middle;
}
.page-right::after {
	content: url(/img/chevron-right.svg);
	display: inline-block;
	width: 9pt;
	margin-left: 2pt;
	vertical-align: middle;
}

/* pagination nav bar */
.pagination {
	margin: 4pt 0;
	font-size: 11pt;
}
.pagination::after {
	content: "";
	display: block;
	clear: both;
}
.pagination a {
	color: #59c;
}
.pagination .page-left {
	float: left;
	text-align: left;
}
.pagination .page-right {
	float: right;
	text-align: right;
}

/* social media buttons, with crappy hacks to fix alignment and size */
#social {
	margin: 8pt 0;
}
.twitter-share-button {
	vertical-align: bottom;
}
#___plusone_0 {
	width: 64px !important;
}

/* sidebar */
#sidebar h1 {
	margin: 12pt 0 0 0;
	font-size: 16pt;
	font-weight: normal;
	color: #058;
}
#sidebar ul {
	padding-left: 1.5em;
	list-style: none;
	font-size: 11pt;
}
#sidebar a {
	color: #59c;
}
.feed-button {
	display: inline;
	vertical-align: middle;
	height: auto;
	width: 1.4em;
	margin: 0;
}

/* images and various ways of displaying them */
img, video {
	display: block;
	margin: 10pt auto;
	max-width: 100%;
	height: auto;
}
audio {
	vertical-align: middle;
	min-width: 26em;
}
.align-center { text-align: center; }
figure {
	display: inline-block;
	margin: 2pt;
}
figure img { margin: 0; }
.float-left {
	float: left;
	margin: 0 1.5em 0 0;
}
.float-right {
	float: right;
	margin: 0 0 0 1.5em;
}
.not-too-wide {
	max-width: 70%;
}
@media (max-width: 40em) {
	figure { display: block; }
	figure img { margin: 0 auto; }
	.float-left, .float-right {
		float: none;
		margin: 10pt auto;
	}
	.not-too-wide {
		max-width: 100%;
	}
}
.image-array {
	text-align: center;
	margin: 0;
}
.image-array img {
	display: inline-block;
	margin: 5pt;
}

/* image captions */
figcaption {
	max-width: 30em;
	margin: 0 auto;
	font-size: 10pt;
	text-align: center;
}
figcaption p { margin: 0; }
.attribution {
	font-style: italic;
}
.attribution a {
	color: #888;
}

/* youtube embeds - needs *two* wrapper divs to control overall width and aspect ratio;
   see https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php */
.youtube-wrapper-outer {
	margin: 10pt auto;
	max-width: 70%;
}
.youtube-wrapper-inner {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
.youtube {
	border: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media (max-width: 40em) {
	.youtube-wrapper-outer {
		max-width: 100%;
	}
}

/* big prominent link e.g. for downloading */
.biglink {
	font-size: 120%;
	font-weight: bold;
}

/* small caps */
.smallcaps { font-variant: small-caps; }

/* color swatch */
.swatch {
	display: inline-block;
	width: 0.8em;
	height: 0.8em;
	margin: 0 1pt;
	vertical-align: baseline;
}

/* link buttons on headers */
@media (min-width: 40em) {
	.link-button::before {
		content: url(/img/link.svg);
		display: inline-block;
		width: 14pt;
		padding: 0 5pt;
		margin-left: -24pt;
	}
	.link-button:hover::before {
		content: url(/img/link-hover.svg);
	}
	.link-button {
		opacity: 0;
	}
	h2:hover .link-button,
	h3:hover .link-button,
	.link-button:hover {
		opacity: 1;
	}
}

/* block quotes */
blockquote {
	margin: 12pt 2em;
	padding: .5em;
	background: linear-gradient(#e8f8ff, #d8f2ff);
	box-shadow: .2em .2em .3em rgba(0,102,187,.4);
	border-radius: .3em;
}
blockquote p:first-child,
blockquote ul:first-child,
blockquote ol:first-child {
	margin-top: 0;
}
blockquote p:last-child,
blockquote ul:last-child,
blockquote ol:last-child {
	margin-bottom: 0;
}
@media (max-width: 40em) {
	blockquote { margin-left: 1em; margin-right: 1em; }
}

/* table of contents */
.toc {
	display: inline-block;
	margin: 2pt 0;
	padding: .4em 1.8em .6em .8em;
	background: linear-gradient(#f8faff, #e8f8ff);
	box-shadow: .15em .15em .3em rgba(0,102,187,.4);
	border-radius: .3em
}
.toc:before {
	display: block;
	content: "Contents";
	margin-bottom: 4pt;
	font-size: 18pt;
	color: #058;
}
#content .toc ul {
	margin: 0;
	padding-left: 1em;
	padding-right: 0;
	list-style: none;
}
#content .toc ul li ul li {
	list-style: none;
	font-size: 10pt;
}

/* embedded tables */
table {
	margin: 10pt auto;
	border-collapse: collapse;
}
th, td {
	border: 1px solid black;
	padding: .3em .5em;
	text-align: left;
}
th:empty, td:empty {
	border: none;
}
thead th {
	text-align: center;
}
table.borderless { margin: 8pt 0; }
table.borderless th, table.borderless td { border: none; padding: .1em .5em; }
table.borderless th:first-of-type, table.borderless td:first-of-type { padding-left: 0; }
table.borderless th:last-of-type, table.borderless td:last-of-type { padding-right: 0; }

/* post-list tables, as seen on all-posts and category pages */
.post-list {
	margin-left: 0; margin-right: 0;
}
.post-list td {
	border: none;
	vertical-align: top;
}
.post-list td:first-child {
	min-width: 4.2em;
	white-space: nowrap;
}

/* embedded code */
code, tt, pre, .mono { font: normal 11pt "Roboto Mono", monospace; }
code, tt {
	background-color: #ececec;
	padding: 0 0.2em;
	border-radius: 0.2em;
}
.codehilitetable {
	display: inline-block;
	max-width: 100%;
	margin: 2pt 0;
}
.codehilitetable tbody, .codehilitetable tr {
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
}
.codehilitetable td {
	display: inline-block;
	padding: .2em .4em;
	vertical-align: top;
}
.codehilitetable pre {
	margin: 0;
}
.codehilitetable .linenos {
	visibility: hidden;
	width: 1.6em;
	margin-left: -1.6em;
	padding-left: 0;
	border: 1px solid transparent;
	color: #bbb;
	text-align: right;
}
@media (min-width: 40em) {
  .codehilitetable:hover .linenos { visibility: visible; }
}
.codehilitetable .code {
	max-width: 100%;
	overflow-x: auto;
	background-color: #f8f8f8;	
	border: 1px solid #ccc;
	border-radius: .3em;
}

/* pygments code highlighting styles */
.codehilite .c,		/* Comment */
.codehilite .cm,	/* Comment.Multiline */
.codehilite .ch,	/* Comment.Hashbang */
.codehilite .c1,	/* Comment.Single */
.codehilite .cs		/* Comment.Special */
{ color: #008000; font-style: italic; }

.codehilite .cp { color: #888880 } /* Comment.Preproc */
.codehilite .cpf { color: #a31515 } /* Comment.PreprocFile */

.codehilite .k,		/* Keyword */
.codehilite .kc,	/* Keyword.Constant */
.codehilite .kd,	/* Keyword.Declaration */
.codehilite .kn,	/* Keyword.Namespace */
.codehilite .kp,	/* Keyword.Pseudo */
.codehilite .kr,	/* Keyword.Reserved */
.codehilite .ow		/* Operator.Word */
{ color: #0000ff }

.codehilite .kt,	/* Keyword.Type */
.codehilite .nc,	/* Name.Class */
.codehilite .ni,	/* Name.Entity */
.codehilite .ne		/* Name.Exception */
{ color: #2b91af }

.codehilite .nb,	/* Name.Builtin */
.codehilite .bp,	/* Name.Builtin.Pseudo */
.codehilite .nd,	/* Name.Decorator */
.codehilite .nf,	/* Name.Function */
.codehilite .nl,	/* Name.Label */
.codehilite .nn,	/* Name.Namespace */
.codehilite .nt		/* Name.Tag */
{ color: #8000c0 }

.codehilite .no,	/* Name.Constant */
.codehilite .na,	/* Name.Attribute */
.codehilite .nv,	/* Name.Variable */
.codehilite .vc,	/* Name.Variable.Class */
.codehilite .vg,	/* Name.Variable.Global */
.codehilite .vi		/* Name.Variable.Instance */
{ color: #000080 }

.codehilite .o,		/* Operator */
.codehilite .p		/* Punctuation */
{ color: #666666 }

.codehilite .m,		/* Literal.Number */
.codehilite .mb,	/* Literal.Number.Bin */
.codehilite .mf,	/* Literal.Number.Float */
.codehilite .mh,	/* Literal.Number.Hex */
.codehilite .mi,	/* Literal.Number.Integer */
.codehilite .mo,	/* Literal.Number.Oct */
.codehilite .il		/* Literal.Number.Integer.Long */
{ color: #d31515 }

.codehilite .s,		/* Literal.String */
.codehilite .sc,	/* Literal.String.Char */
.codehilite .sd,	/* Literal.String.Doc */
.codehilite .s2,	/* Literal.String.Double */
.codehilite .sh,	/* Literal.String.Heredoc */
.codehilite .sx,	/* Literal.String.Other */
.codehilite .s1,	/* Literal.String.Single */
.codehilite .ss		/* Literal.String.Symbol */
{ color: #a31515 }

.codehilite .se { color: #DD5515 } /* Literal.String.Escape */

.codehilite .sb,	/* Literal.String.Backtick */
.codehilite .si,	/* Literal.String.Interpol */
.codehilite .sr		/* Literal.String.Regex */
{ color: #BB6688 }

.codehilite .w { color: #bbbbbb } /* Text.Whitespace */

.codehilite .gd { color: #A00000 } /* Generic.Deleted */
.codehilite .ge { font-style: italic } /* Generic.Emph */
.codehilite .gr { color: #FF0000 } /* Generic.Error */
.codehilite .gs { font-weight: bold } /* Generic.Strong */

.codehilite .hll { background-color: #ffffcc }
.codehilite .err { border: 1px solid #FF0000 } /* Error */