@charset "UTF-8";
/* CSS Document */

body {
	background: #ccc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 120%;	
}
h1 {
	font-size: 3em;	
}
#wrap {
	width: 90%;
	margin: 0 auto;
}
header {
	color: #FFF;
	background: #333;
	padding-top: 20px;
}
header h1 {
	margin: 0 2% 20px;	
}
nav {
	background: #666;
	padding: 10px 2%;
}
nav li {
	display: inline;
	background: #999;
	border: 1px solid #FFF;
	padding: 5px;
	margin-right: 2%; 	
}
#main {
	padding: 20px 2%;
	background: #fff;	
}
article {
	padding: 20px 1%;
	margin-right: 2%;
	background: #ccc;
	width: 62.666%;
	float: left;	
}
article h1 {
	font-size: 2.25em;
	margin-bottom: 0.6em;	
}
article p {
	font-size: 1em;
	line-height: 1.25em;
	margin-bottom: 1em;	
}
aside {
	padding: 20px 1%;
	background: #ccc;
	width: 31.333%;
	float: right;	
}
aside h1 {
	font-size: 1.5em;
	margin-bottom: 0.4em;	
}
aside p {
	font-size: 0.85em;
	line-height: 1.15em;
	margin-bottom: 0.85em;	
}
.clear {
	clear: both;	
}
footer {
	background: #333;
	padding: 20px 2%;
	color: #fff;	
}
@media screen and (max-width: 850px) {
	body {
		font-size: 110%;	
	}
}
@media screen and (max-width: 675px) {
	body {
		font-size: 100%;	
	}
	article {
		margin: 0 0 20px 0;
		float: none;
		width: auto;
		
	}
	aside {
		float: none;
		width: auto;	
	}
}
@media screen and (max-width: 360px) {
	#wrap {
		width: 100%;	
	}
	nav li {
		text-transform: uppercase;
		letter-spacing: 0.2em;
		text-align: center;
		display: block;
		width: auto;
		margin: 2px 0;	
	}
}