body{
background-color: lightgrey;
color: #000305;
font-size: 87.5%;
font-family: Arial, 'Lucida Sans Unicode';
line-height: 1.2;
text-align: left;
}
a{
text-decoration: none;

}
a:link, a:visited{
color: darkgreen;
}

.body{
margin: 0 auto;
width: 70%;
clear: both;
}
.mainheader img {
width: 30%;
height: auto;
margin: 2% 0;
}
.mainheader nav {
background-color: #666;
height: 40px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}
.mainheader nav ul{
list-style: none;
margin: 0 auto;
}
.mainheader nav ul li{
float: left;
display: inline;
}
.mainheader nav a:link, .mainheader nav a:visited{
color: white;
display: inline-block;
padding: 10px 25px;
height: 20px;
}
.mainheader nav a:hover, .mainheader nav a:active, .mainheader nav .active a:link, .mainheader nav .active a:visited{
background-color: darkgreen;
text-shadow: none;
}

.mainContent{
line-height: 25px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}

.content{
width: 70%;
float: left;
}

.topcontent{
min-height: 250px;
background-color: white;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 20px;
}
.smartphone{
float: right;
margin-right: 2%;
}
.smartphone img {
height: 35px;
margin-left: 5px;
}
.content_next {
min-height: 250px;
margin-top: 2%;
background-color: white;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
}

.post-info{
font-style: italic;
color: #999;
font-size: 90%;
}
.top-sidebar{
width: 21%;
float: left;
background-color: white;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
margin-top: 20px;;
padding: 2% 3%;
}


.middle-sidebar{
width: 21%;
float: left;
background-color: white;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
padding: 2% 3%;
}
.bottom-sidebar{
width: 21%;
float: left;
background-color: white;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-left: 3%;
margin-bottom: 2%;
padding: 2% 3%;
}

.mainFooter{
width: 100%;
height: 40px;
float: left;
background-color: #666;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
margin-top: 5%;
margin-bottom: 2%;
}

.mainFooter p{
width: 92%;
margin: 10px auto;
color: white;
}

.content_img{
float:left;
width: 20%;
margin-right: 20px;
margin-bottom: 5px;
}

@media only screen and (min-width: 150px) and (max-width: 600px)
{
.body{
width: 90%;
font-size: 95%;
}
.mainheader img {
width: 100%;
}

.mainheader nav {
height: 120px;
}
.mainheader nav ul{
padding-left: 0;
}
.mainheader nav ul li{
width: 100%;
text-align: center;
}
.mainheader nav a:link, .mainheader nav a:visited{
padding: 10px 25px;
height: 20px;
display: block;
}

.mainContent{
line-height: 28px;
}

.content{
width: 100%;
margin-top: 2%;
}

.topcontent{
min-height: 350px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
padding: 3% 5%;
margin-top: 2%;
margin-bottom:4%;
}
.content_next{
margin-top: 3%;
min-height: 350px;
}

.top-sidebar, .middle-sidebar, .bottom-sidebar{
width: 94%;
margin-left: 0;
margin-bottom: 0;
margin-top: 5%;;
padding: 2% 3%;
}

.content_img{

width: 50%;

}



}