body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
header {
max-width: 720px;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 1em;
}
.container {
max-width: 900px;
z-index:1;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
}
.content {
width: 70%;
margin-right: 1em;
float: left;	
}
.container article {
background-color: #FFF;
padding: 2em;
font-family: helvetica;
font-size: 0.9em;
line-height: 1.5;
margin-bottom: 2em;
}
.articleHead h2 {
margin: 0;
font-family: impact;
font-size: 1.5em;
font-weight: normal;
text-transform: uppercase;
letter-spacing: 0.2em;
text-align: center;
color: #900;
text-decoration:none;
}
.articleHead {
margin-bottom: 1em;;
}
.container hr {
height: 0.2em;
margin-top: 0.25em;
margin-bottom: 0.5em;
width: 80%;
color: #999;
}
.date {
text-align: center;
}
.navigation {
background-color: white;
padding: 1em;
text-align: center;
width: 100%;
margin-bottom: 1em;
text-transform: uppercase;
}
.sidebar {
width: 28%;
float: left;
}
.sidebarItem {
background-color: #FFF;
padding: 1em;
text-align: center;
font-family: helvetica;
font-size: 0.9em;
line-height: 1.5;
margin-bottom: 1em;
}
.linkBox a {
font-weight: bold;
text-transform: uppercase;
}
.container a {
text-decoration: none;
color: #900;
border: 0;
}
.container img {
border: 0;
}
.more-link {
letter-spacing: 1em;
text-align: center;
}
.container li {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
.container ul {
list-style: none;
list-style-position: inside;
margin: 0;
padding: 0;
}
.container a:hover { 
text-decoration: underline;
}
#bgimg {
position: fixed;
z-index: -1;
}
@media only screen and (max-width: 1200px) and (min-width: 901px) {
.container {
width: 100%;
}
.contentContainer {
width: 95%;
margin: auto;
}
}
@media only screen and (max-width: 900px) {
.container {
width: 100%;
}
.content {
width: 100%;
margin: 0;
}
.sidebar {
width: 100%;
margin: 0;
}
}
* {
box-sizing: border-box;
}