body {
  background-color: #fffb00;
  font-size:1em;
  font-family: "arial", "helvetica";
}

header {
	padding: 10px;
	background-color: #ffef00;
}

#nav {
background-color:yellow;
height:300px;
width:170px;
float:left;
margin-right:13px;
font-family: "DotGothic16";
}

#top-nav{
	margin: 0px auto;
	border-bottom: 1px solid;
	padding: 6px;
	width: 60%;
	text-align: center;
}

#top-nav > a {
	display:inline;
	padding:3px 20px;
	margin: 0 15upx;
	border-right-style: solid;	
    font-size:0.9em;
    border-width: 1px;
    text-align: center;	
}


#content {
	padding-left:10px;
    max-width:650px;
	margin: 0px auto;
	margin-top: 30px;
}

/*h1 {
	border-bottom-style: solid;
	border-width: 1.5px;
}*/

h4 {
	margin-top: 40px;
}

.image {
	max-width:100%; height:auto;
}

figure {
  border: 1px #cac500 solid;
  padding: 10px;
  max-width: 300px;
  float: right;
  margin-left: 10px;
}

figcaption {
	padding: 0.5px;
	text-align: center;
	font-size: 0.9em;
}

a:link {
	color: grey;
}
a:visited {color: #663399}

.footer {
	padding: 30px;
    border-top: solid;
	border-width: 1px;
	margin-top: 30px;
	}

.logo-banner {
	text-align:center; margin: auto;
	max-width: 100%;
	height: 100%;
}

aside {
	color: #3f3b3b;
	font-size: 0.7em;
	font-family: Arial, Lucida Console;
}

@media screen and (max-width: 800px) {
  .figure {
clear: right; width: 200px;}
}