body					{ font-family: "Alegreya Sans", sans-serif; 
					  color: #444;
					  margin: 0;
					  font-weight: 400;
				 	  font-size: 14pt; }
a					{ color: #07889b; }
body > header				{ width: 100%; 
					  padding-bottom: 64pt;
					  background-color: #07aabb;
					  color: #fff;
					  font-size: 0;
					  margin-bottom: 2.2em;
					  text-align: center; }
b, strong				{ font-weight: 500; }
.intro					{ font-size: larger; 
					  margin-top: 2em; }
.topicbox  + .topicbox			{ margin-top: 1.1em; }
.topicbox > div:nth-child(2)		{ font-size: 12pt; }
.topicbox > div:nth-child(2) a		{ text-decoration: none; 
					  opacity: 0.8; }
.topicbox > div:nth-child(2) a:hover	{ opacity: 1.0; }
#archive > header			{ padding-bottom: 24pt; }
#breadcrumbs > *			{ display: inline-block; 
					  vertical-align: top;
					  font-size: 13pt;
					  color: #eee; }
#breadcrumbs > div > div		{ border-bottom-right-radius: 8pt; 
					  background-color: #07889b;
					  box-shadow: 0 0 8px rgba(255, 255, 255, 0.5);
					  border: thin solid rgba(255, 255, 255, 0.8);
					  border-top: none;
					  padding: 10pt 32pt;
					  border-bottom-left-radius: 8pt; }
#archive #header			{ margin-top: 24pt; }
#header					{ margin-top: 64pt; 
					  font-size: 16pt; }
#header > div:first-child		{ margin: 1em 0; }
#header nav a				{ color: #eee; 
					  display: inline-block;
					  font-variant: small-caps;
					  padding: 0 4pt; }
#header nav a:hover			{ color: #fff; }
#header i				{ font-size: smaller; }
#breadcrumbs a				{ color: #fff; }
h1					{ display: inline-block; 
					  font-size: x-large;
					  margin: 0;
					  font-weight: 500; }
h2					{ font-size: larger; 
					  font-variant: small-caps;
					  text-align: center;
					  margin: 4em 0 0 0;
					  font-weight: 400; }
h3					{ font-weight: 500; 
					  margin-bottom: 0; 
					  margin-top: 4rem;
					  padding-bottom: 4pt;
					  border-bottom: thin solid rgba(7, 170, 187, 0.3);
					  font-size: inherit; }
h2 + code				{ display: block; 
					  margin: 1em 25% 2em 25%;
					  background-color: #fdfdff;
					  color: #000;
					  padding: 1em;
					  padding-left: 2em;
					  text-indent: -2.2ex;
					  border-radius: 0.5em;
					  box-shadow: 0 0 8px rgba(7, 170, 187, 1.0); }
figure					{ text-align: center; 
					  margin: 2em 0; }
figcaption				{ color: #888; 
					  font-size: smaller; }
footer					{ text-align: center;
					  color: #888;
					  padding: 48pt 0;
					  font-size: smaller; }
footer a				{ color: #66b98f; }
.file, .nm				{ font-style: italic; }
article > section			{ width: 50%;
					  margin-left: auto;
					  margin-right: auto; }
section.special 			{ display: flex; }
section.special > :last-child		{ flex: 1; }
section.special > :first-child 		{ padding-right: 2em; }
article[data-sblg-article]		{ width: 100%; }
code, pre.hl				{ font-family: monospace; 
					  font-size: smaller; }
pre.hl					{ overflow: hidden; }
.hl .lin				{ color: #aaa; }
nav[data-sblg-nav] ul			{ list-style-type: none; 
					  padding: 0; }
.archive				{ opacity: 0.6;
					  margin-top: 2em; }
nav[data-sblg-nav] time			{ opacity: 0.5; 
					  padding-top: 6pt;
					  display: block; }
#archive nav[data-sblg-nav] time	{ display: inline; }
nav[data-sblg-nav] time i		{ font-size: smaller; }

nav[data-sblg-nav] li			{ color: #666; }
nav[data-sblg-nav] li + li		{ margin-top: 2em; }
#archive nav[data-sblg-nav] ul > li:first-child	
					{ color: #000; }
#archive nav[data-sblg-nav] li > div:first-child	
					{ font-weight: 500; }
.blue					{ color: blue; }
.topics					{ margin: 2em 0; }

@media only screen and (max-width: 900px), only screen and (max-device-width: 900px) {
 article > section			{ width: 80%; }
 blockquote				{ padding: 1em 10%; }
 code, pre.hl				{ font-size: 10pt; }
 h2 + code				{ margin: 1em 10% 2em 10%; }
}

@media only screen and (max-width: 700px), only screen and (max-device-width: 700px) {
 article > section			{ width: 96%; }
 h2					{ font-size: inherit; }
 figure img				{ width: 100%; 
 					  max-width: 480px; }
 #breadcrumbs > div:nth-child(2) > div	{ padding: 8pt 4pt; 
	 				  font-size: 12pt; }
 h2 + code				{ margin: 1em 2% 2em 2%; }
 section.special 			{ display: block; }
 section.special img			{ max-width: 200px; }
 section.special > :first-child 	{ padding-right: 0; }
}