* {
font-family:arial;
margin:0;
padding:0;
}
h1 {
text-align:center;
color:#ffffff;
}
h2 {
color:#333333;
font-size:22px;
text-align:right;
}
p {
text-align:justify;
margin:10px;
color:#8e8e8e;
font-size:16px;
}
span {
color:#666666;
font-size:18px;
}
.date {
color:#333333;
font-size:22px;
text-align:right;
}
#wrapper-outer {
width:100%;
overflow:hidden;
}
#wrapper-inner {
width:1000px;
margin:0 auto;
overflow:hidden;
}
header {
width:100%;
height:60px;
background-color:#cccccc;
}
#header-inner {
width:1000px;
margin:0 auto;
padding:20px auto;
}
nav {
display:block;
margin:auto;
padding:auto;
overflow:hidden;
}
a {
color:#4587B8;
}
nav a {
display:block;
text-decoration:none;
color:#ffffff;
padding:10px;
font-size:16px;
cursor:pointer;		
}
nav ul {
font-size: 100%;
overflow:hidden;
padding:0;
margin:0;	
text-align:center;
}
nav ul li {
display:inline-block;					
background-color:#999999;
width:150px;
margin:3px;
border:1px #fff solid;
box-shadow:none;
transition:box-shadow .3s;
transition:background-color .3s;
}
nav ul li:hover{
background-color:#aaaaaa;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
nav ul li:active {
box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.2) inset;
}
.content {
oveflow:hidden;
clear:both;
}
.left {
float:left;
width:50%;
overflow:hidden;
}
.right {
float:right;
width:50%;
overflow:hidden;
}
footer {
width:100%;
background-color:#cccccc;
}
#footer-inner {
width:1000px;
margin:0 auto;
}
@media screen and (max-width: 1000px){
h2 {
text-align:center;
}
.left {
float:none;
width:100%;
}
.right {
float:none;
width:100%;
}
#wrapper-inner {
width:100%;
}
#header-inner {
width:100%;
}
#footer-inner {
width:100%;
}
}
@media screen and (max-width:640px){

}