html, body				{ margin: 0; }
body					{ font-family: "Alegreya Sans", sans-serif; 
					  background-color: #f6f6ff;
					  font-weight: 400;
					  color: #334;
					  font-size: 16pt; }

article					{ padding: 3rem 25%; }
article > header			{ padding: 3rem 0; }
article > header p			{ font-variant: small-caps; 
					  margin-top: 0;
					  opacity: 0.7;
					  text-align: center; }
article > header h3			{ text-align: center; 
				  	  font-size: 150%;
					  margin-bottom: 0;
					  font-weight: 400; }
.paired					{ display: flex; 
					  display: -webkit-flex;
					  align-items: center; 
					  -webkit-align-items: center; }
.paired > :first-child			{ padding-right: 1rem; }
.paired > :last-child			{ padding-left: 1rem; }
p, li					{ line-height: 140%; }
a					{ color: blue; 
					  text-decoration: none; 
					  border-bottom: thin solid transparent; }
a:hover					{ border-bottom: thin solid blue; }
code, pre				{ font-size: 11pt; }

#tophead				{ display: flex;
					  display: -webkit-flex;
					  width: 50%;	
					  padding-top: 4rem;
					  padding-bottom: 0.2rem;
					  color: #bbd;
					  margin-left: auto;
					  margin-right: auto;
					  flex-direction: row;
					  align-items: center;
					  -webkit-align-items: center;
					  -webkit-flex-direction: row; }
#tophead nav				{ flex: 1; 
					  -webkit-flex: 1;
					  font-size: 80%;
					  text-align: right; }
#tophead nav span + span		{ border-left: thin solid #666; 
					  margin-left: 0.5ex;
					  padding-left: 1ex; }
#tophead h1				{ color: #001; 
					  font-size: 120%;
					  font-weight: normal;
					  font-variant: small-caps;
					  margin: 0;  }

#top					{ padding-top: 15rem;
					  padding-bottom: 4rem;
					  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 100%), 
						      url(background.jpg);
					  background-position: 50% 50%;
					  background-repeat: no-repeat;
					  background-color: #000;
					  color: #fff; }
#top #logo img				{ width: 90px; }
#top a					{ color: #ff0; 
					  text-shadow: 1px 1px 0 #444; }
#top a:hover				{ border-bottom: thin solid rgba(255, 255, 0, 0.4); }
#top h2					{ font-size: 175%; 
					  margin: 0;
					  text-shadow: 1px 1px 0 #000;
					  font-weight: normal; }

#start					{ background: linear-gradient(to bottom, rgba(248, 248, 255, 0.92) 0%, rgba(248, 248, 255, 0.92) 100%), 
						      url(background-white.jpg); 
					  background-position: 50% 50%;
					  background-repeat: repeat-y; }
#start .exemplar 			{ color: #888; }
#start .exemplar span			{ color: #000; }
#start nav				{ margin: 1.1em 0; 
					  font-size: 80%;
					  opacity: 0.8; }
#start > section			{ padding: 4rem 0; }
#start > section:first-child		{ padding-top: 6rem; }
#start > section:last-child		{ padding-bottom: 6rem; }
#start img				{ max-width: 100%; }
#start p				{ line-height: 140%; }
#start figure				{ margin: 0;
					  text-align: center; }
#start h4				{ font-weight: 400;
					  margin: 0;
					  font-size: 130%; }

.interstice				{ background-color: #88888f;
					  text-shadow: 0 0 2px #000;
					  font-weight: 500;
					  padding-top: 3rem;
					  padding-bottom: 3rem;
					  color: #fff; }
.interstice .main			{ font-size: 150%; 
					  color: #fff;
					  line-height: 150%; }
.interstice code			{ font-weight: bold; }
.interstice pre				{ color: black;
					  text-shadow: none;
					  margin-top: 2.5em; }
.interstice pre a			{ color: yellow; 
					  text-shadow: 0 0 1px #000; }
.interstice pre a:hover			{ border-bottom: thin solid transparent; }

.interstice2				{ padding-bottom: 0;
					  border-top: thin solid #ccc;
					  text-align: left; }
.interstice2 dl				{ font-size: 14pt; }
.interstice2 dt,
.interstice2 dd				{ margin: auto 0; }
.interstice2 dd				{ margin-bottom: 2rem; }
.interstice2 dt				{ font-size: larger; }


#news					{ background: linear-gradient(to bottom, rgba(248, 248, 255, 0.92) 0%, rgba(248, 248, 255, 0.92) 100%), 
						      url(background-white.jpg); 
					  background-position: 50% 50%;
					  padding-bottom: 6rem;
					  background-repeat: repeat-y; }
#news ul				{ list-style-type: none; 
					  padding: 0; }
#news ul li				{ display: flex;
					  display: -webkit-flex; }
#news ul li > :first-child		{ flex: 1; 
					  -webkit-flex: 1; }
#news ul li .src			{ opacity: 0.5; 
					  font-size: 14pt; }

footer					{ padding: 8rem 0 2rem 0; 
					  text-align: center;
					  font-size: 11pt;
					  color: #666; }
footer p				{ margin: 0.1em 0; }

@media only screen and (max-width: 1280px), only screen and (max-device-width: 1280px) {
  article				{ padding-left: 10%; 
	  				  padding-right: 10%; }
  #tophead				{ width: 80%; }
}

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
  body					{ font-size: 13pt; }
  article				{ padding-left: 2%; 
	  				  padding-right: 2%; }
  code, pre				{ font-size: 10pt; }
  pre					{ overflow: hidden; }
  #tophead nav				{ font-size: 100%; }
  #tophead h1				{ font-size: 140%; }
  #tophead				{ width: 96%; 
	  				  padding-top: 2rem; }
  #top					{ padding-top: 6rem; }					   
  #top #logo 				{ text-align: center; }
  .paired				{ display: block; }
  .paired > :first-child		{ padding-right: 0; }
  .paired > :last-child			{ padding-left: 0; }
  #start nav				{ font-size: 100%; }
  #start img				{ display: none; }

  #news ul li 				{ display: block; }
  #news ul li > *			{ display: block; }
  #news ul li + li			{ margin-top: 0.5em; }
  #news ul li .src			{ line-height: 100%;
  				  	  font-size: smaller; }
}