@font-face {
  font-family: 'stephenfont';
  src: url('http://www.stephentext.com/stephenfont.eot'); /* IE9 Compat Modes */
  src: url('http://www.stephentext.com/stephenfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('http://www.stephentext.com/stephenfont.woff') format('woff'), /* Modern Browsers */
  url('http://www.stephentext.com/stephenfont.otf')  format('truetype'), /* Safari, Android, iOS */
  url('http://www.stephentext.com/stephenfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

*, *:before, *:after {
  box-sizing: border-box;
}

body {
  margin: 40px;
  font-family: 'Open Sans', 'sans-serif';
  background-color: #eee;
  color: #666;
}

h1 {
  margin: 0 0 1em 0;
  font-family: "stephenfont";
  font-size:3em;
}

h2, h3 {
  font-family: "john-doe",serif;
}

h5 {
  font-size:x-small;
  font-family: "john-doe",serif;
}

.wrapper {
  max-width: 940px;
  margin: 0 20px;
  display: grid;
  grid-gap: 10px;
}

@media screen and (min-width: 500px) {

  /* no grid support? */
  .content {
    float: left;
    width: 79.7872%;
  }
  .sidebar {
    float: right;
    width: 19.1489%;
  }
  .wrapper {
    margin: 0 auto;
    grid-template-columns: 3fr 1fr;
  }
  
  .header, .footer {
    grid-column: 1 / -1;
    /* needed for the floated layout */
    clear: both;
  }

}

.header, .footer {
  background-color: #eee;
}

.content {
  background-color: #F3F3F3;
  color: #333;
  min-height: 20em;
  font-size: 150%;
}

.sidebar {
  background-color: #FFF;
  color: #333;
  min-height: 20em;
  font-size: 80%;
}

.wrapper > * {
  border-radius: 10px;
  padding: 20px;
  /* needed for the floated layout*/
  margin-bottom: 10px;
}

/* We need to set the widths used on floated items back to auto, and remove the bottom margin as when we have grid we have gaps. */
@supports (display: grid) {
  .wrapper > * {
    width: auto;
    margin: 0;
  }
}


A, A:link { color: #657688; text-decoration: none; font-family: "ff-dagny-web-pro",sans-serif; }
A:visited { color: #657688; text-decoration: none; font-family: "ff-dagny-web-pro",sans-serif; }
A:active, A:hover { color: #7AB0D4; text-decoration: underline;}

A.reversed, A.reversed:link, A.reversed:visited { color: #ffffff; text-decoration: none; font-family: "ff-dagny-web-pro",sans-serif;}
A.reversed:active, A.reversed:hover { color: #000000; text-decoration: underline;}

A.nav, A.nav:link { color: #657688; text-decoration: none; font-family:stephenfont; text-transform:lowercase; font-size: 120%;}	
A.nav:visited { color: #333333; text-decoration: underline; font-family: stephenfont; text-transform:lowercase;  font-size: 120%;}
A.nav:active, A.nav:hover { color: #333333; text-decoration: underline; text-transform:lowercase;}

A.notes, A.notes:link { color: #657688; text-decoration: none; font-family: "ff-dagny-web-pro",sans-serif; font-size: x-small; }	
A.notes:visited { color: #333333; text-decoration: none; font-family: "ff-dagny-web-pro",sans-serif; font-size: x-small; }

	.title{
  		line-height:85%;
		}	
	.notes {
		font-family: "ff-dagny-web-pro",sans-serif;
		color:#666;
		font-size:small;
		font-weight:normal;
  		line-height:140%;	
 		border-bottom:1px dotted #999; 					
		}	
	
	.blog {
  		padding-left:15px;
  		padding-top:15px;
  		padding-right:15px;					
		}	
	
	.blogbody {
		font-family: "john-doe",serif;
		font-size:3eml;
		color:#666;
		font-weight:normal;
  		line-height:140%;		
		}

	div.poem p {
		font-family: "john-doe",serif;
		color:#333;
		font-size:1.6em;
		font-weight:normal;
  		line-height:120%;
		}

	.blogtitle {  
		color: #666; 
		font-weight:bold; 
		padding: 0px;	
		margin: 5px 0 5px 0;	
		}			
		
	.side {
		font-family: "john-doe",serif;
		color:#ffffff;
		font-size:x-small;
		font-weight:normal;
  		background:#cccc99;
  		line-height:140%;
		padding: 2px 0 2px;		
		}	

	.sidetitle, .sidenav {
		font-family: "john-doe",serif;
		color:#b1b184;
                font-size: 100%;
		font-weight:normal;
  		line-height:140%;				
		}	

      p.sidenav A.nav {font-size:2em;}

	.comments {
		font-family: "ff-dagny-web-pro",sans-serif;
		color:#666;
		font-size:x-small;
		font-weight:normal;
  		line-height:140%;	
 		border-bottom:1px dotted #999; 					
		}