html, body					{ margin: 0; }
body						{ font-family: sans-serif;
						  font-size: 11pt;
						  color: #555;
						  line-height: 1.4em; }
body > header > div,
body > footer,
nav[data-sblg-nav]				{ width: 50rem;
						  max-width: 96%;
						  margin: 0 auto; }
body > header					{ background-color: #008080;
						  padding: 2rem 0 1rem 0;
						  text-align: center;
						  color: #fff; }
body > header p					{ opacity: 0.8;
						  color: #000;
						  line-height: 1.3em;
						  font-size: 90%;
						  margin: 0; }
h1						{ margin: 0;
						  font-size: 150%;
						  line-height: 1.25em;
						  font-weight: inherit; }
h1 a						{ color: inherit; }
nav[data-sblg-nav]				{ padding: 4rem 0; }
nav[data-sblg-nav] nav				{ font-size: smaller; }
nav[data-sblg-nav] li + li			{ padding-top: 4rem; }
nav[data-sblg-nav] img				{ width: 100%;
					 	  box-shadow: 0 0 4px #ccc;
						  max-width: 600px; }
nav[data-sblg-nav] ul				{ list-style-type: none;
					  	  padding: 0; }
nav[data-sblg-nav] li > div > figure		{ display: none;
					   	  text-align: center;
						  margin: 0; }
nav[data-sblg-nav] li > div.portrait > figure,
nav[data-sblg-nav] li > div.landscape > figure	{ display: block; }
nav[data-sblg-nav] li > div.portrait > div	{ flex: 1; 
						  margin-top: 0; }
a						{ text-decoration: none;
				  		  color: #008080; }
footer						{ text-align: center;
						  padding: 2rem 0;
						  font-size: smaller; 
						  color: #aaa; }
footer * + *					{ border-left: thin solid #eee;
						  padding-left: 1ex; }
h2						{ font-weight: inherit;
						  color: #000;
						  margin-bottom: 0;
						  font-size: 130%; }
h2 + div					{ margin-bottom: 1.5rem;
						  color: #888;
						  font-size: smaller; }
address						{ display: inline-block;
						  font-style: normal; }
.tags						{ color: #888;
						  margin: 0;
						  font-size: smaller; }
.tags .sblg-tag					{ color: #000; } 
.tags .sblg-tag + .sblg-tag:before		{ content: ', '; }

@media (min-width: 40rem) {
  body > header					{ padding: 6rem 0 2rem 0;
	  					  text-align: left; }
  h1						{ font-size: 200%; }
  nav[data-sblg-nav] li > div.portrait 		{ display: flex; }
  nav[data-sblg-nav] li > div.portrait > figure	{ margin-right: 1rem; }
}