/* -----------------------
Base styles
------------------------*/

body
{
	margin: 0;
	padding: 0;
	color: #333;
	background-color: #eee;
	font: 1em/1.6;
font-family: 'Vollkorn', serif;
font-size: 20px;
}

h1,h2,h3,h4,h5,h6
{
	margin: 0 0 .5em;
	font-weight: 500;
	line-height: 1.1;
}

h1 { font-size: 2.25em; } /* 36px */
h2 { font-size: 1.75em; } /* 28px */
h3 { font-size: 1.375em; } /* 22px */
h4 { font-size: 1.125em; } /* 18px */
h5 { font-size: 1em; } /* 16px */
h6 { font-size: .875em; } /* 14px */

h1, h2, h3, h4
{

font-family: 'Lato', sans-serif;
}

p
{
	margin: 0 0 1.5em;
	line-height: 1.5;


}

li 
{
margin-bottom: 1em;
line-height: 1.6;

}

blockquote
{
	padding: 1em 2em;
	margin: 0 0 2em;
	border-left: 5px solid #eee;
}

hr
{
	height: 0;
	margin-top: 1em;
	margin-bottom: 2em;
	border: 0;
	border-top: 1px solid #ddd;
}



a:link { color: #333; text-decoration: none; border-bottom: 2px dotted #333; }
a:visited { color: #333; text-decoration: none; border-bottom: 2px dotted #333;  }
a:focus { color: black; }
a:hover { color: red; }
a:active { color: red; }

.anchors
{
padding-bottom: 0.25em;
border-bottom: 1px dashed #ff8200; 
font-weight: bold;
}

/* -----------------------
Layout styles
------------------------*/

.container
{
	max-width: 40em;
	margin: 0 auto;
	background-color: #fff;
}

.header
{
	color: #fff;
	background: #555;
	padding: 1em 1.25em;
}

.header-heading { margin: 0; }

.nav-bar
{
	background: #000;
	padding: 0;
}

.content { padding: 1em 1.25em; margin-bottom: 2em;}

.footer
{
	color: #fff;
	background: #000;
	padding: 1em 1.25em;
}



/* -----------------------
Single styles
------------------------*/



/* -----------------------
Wide styles
------------------------*/

@media (min-width: 42em)
{
	.header { padding: 1.5em 3em; }
	.nav-bar { padding: 1em 3em; }
	.content { padding: 2em 3em; }
	.footer { padding: 2em 3em; }
	
	.nav li
	{
		display: inline;
		margin: 0 1em 0 0;
	}
	
	.nav a
	{
		display: inline;
		padding: 0;
		border-bottom: 0;
	}
}

@media screen and (max-device-width: 500px) and (orientation: portrait){

body { 
      font-size: 0.95em;
   }

}