/* --------------------------
base styles 
-------------------------- */

body
{
	margin: 0;
	padding: 0;
	color: #000;
	background: #fff;
	font: 1em/1.2 helvetica, arial, sans-serif;
}

h1
{
	margin: 0;
	font-size: 1.5em;
	font-weight: 500;
}

h2 
{
  font: 700 1.7em 'Bold', Lato, sans-serif;
  color: #000;
  margin: 0 0 0 24px;
  margin-top: 20px;
  margin-bottom: 10px;
}
h3
{
	margin: 0 0 1em;
	font-size: 1.3em;
	font-weight: 500;
}

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

.p2 {
  font: 400 1.3em/1.1 'Average', Sorts Mill Goudy, serif;
  margin: 0 0 0 1.25em;
}
.p9 {
  font: 400 1.3em/1.1 'Average', Sorts Mill Goudy, serif;
  margin: 0 0 0 0;
}

.p7 {
  font: 400 1.1em/1.0 'Average', Sorts Mill Goudy, serif;
  font-style: italic;
  text-align:right;
  color: #4888E2;
  margin: 0 0 0 0em;
}

.p8 {
  font: 500 0.9em/0.6 'Bold', Lato, sans-serif;
  text-align:right;
  color: #000;
  margin: 0 0 0 0em;
}


.p3 {
  font: 400 1.0em/1.1 'Average', Lato, sans-serif;
  margin: 0 0 0 1.25em;
}

.p4 {
  font: 400 0.7em/1.1 'Average', Lato, sans-serif;
  margin: 0 0 0 1.25em;
}

a {
    text-decoration: none;
    color: #0C3;
}

a:hover {
    color: #0F0;
}

/* --------------------------
layout 
-------------------------- */

.container
{
	max-width: 90%;
	margin: 0 auto;
}

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

.nav-bar
{
	color: #fff;
	background-color: #fff;
}

.content { padding: 1em; }
.main { margin-bottom: 1em; }
.aside { margin-bottom: 1em; }

.footer
{
	clear: both;
	padding: 1em;
	background-color: #fff;
}

/* --------------------------
nav 
-------------------------- */

.nav
{
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav li
{
	display: inline;
	margin: 0;
}

.nav a
{
	display: block;
	padding: .7em 1.25em;
	color: #fff;
	text-decoration: none;
}


.alink3 { color:#333333; }

.nav a:focus
{
	color: black;
	background-color: white;
}

.nav a:hover
{
	color: white;
	background-color: green;
}

.nav a:active
{
	color: white;
	background-color: red;
}



/* --------------------------
wide screen 
-------------------------- */

@media (min-width:800px)
{
	.header { padding: 0.5em 5%; }
	.nav-bar { padding-top: 0.5em;}
	
	.nav li
	{
		display: inline;
		margin: 0 1em 0 0;
	}
	
	.nav a
	{
		display: inline;
		padding: 0;
		border-bottom: 0;
	}
	
	.content
	{
		overflow: hidden;
		padding: 1em 0 1em;
	}
	
	.main
	{
		float: left;
		width: 63%;
		margin: 0 30px 1em 30px;
	}
	
	.aside
	{
		float: left;
		width: 27%;
		margin-bottom: 1em;
	}
	
	.footer { padding: 0.5em 4%; }
}