@charset "utf-8";


/* Reset
------------------------------------------------------------*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,select,header,nav,section,footer {
	margin: 0;
	padding: 0;
	color: #333;
	line-height: 1.6;
	word-wrap: break-word;
}

address,em,i {
	font-style: normal;
}
strong,th,b {
	font-weight: normal;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
hr {
	display: none;
}
h1,h2,h3,h4,h5,h6 {
	font-size: 100%;
	font-weight: normal;
}
img {
	border: 0;
}
li {
	list-style-type: none;
}
small{
	font-size: 100%;
}
iframe {
	border: 0;
}

/* Basic
------------------------------------------------------------*/



body{
	background:#ccc;
}
@media only screen and (max-width: 1280px){
	body {
		background:#999;
	}
}
@media only screen and (max-width: 960px){
	body {
		background:#666;
	}
}

@media only screen and (max-width: 640px){
	body {
		background:#333;
	}
}

/*-------------------- #header -------------------*/

#header{
    background: #888;
}
#header header{
	width:960px;
	margin:0 auto;
}
@media only screen and (max-width: 980px){
	#header header{
		width:90%;
	}
}
#header header h1{
	color:#fff;
	text-align:center;
	font-size:200%;
}
@media only screen and (max-width: 640px){
	#header header h1{
		font-size:160%;
	}
}
#header header p{
	color:#fff;
	text-align:center;
}

/*-------------------- #main -------------------*/

#main{}
@media only screen and (max-width: 640px){
	#main{
		font-size:90%;
	}
}
#main main{
	box-sizing:border-box;
	width:960px;
	margin:0 auto;
	background:#fff;
	padding:1%;
}
@media only screen and (max-width: 980px){
	#main main{
		width:90%;
	}
}
#main main h2{
	text-align:center;
	font-size:160%;
	border-bottom:solid 1px #ccc;
}
#main main pre{
	border:dotted 1px #ccc;
	padding:1%;
}
#main main h3{
	text-align:center;
	font-size:140%;
	border-bottom:solid 1px #ccc;
}
#main main ul{
	padding:1% 1% 1% 5%;
}
#main main ul li{
	list-style-type:disc;
}
#main main ol{
	padding:1% 1% 1% 5%;
}
#main main ol li{
	list-style-type: decimal;
}

/*-------------------- #footer -------------------*/

#footer{
    background: #888;
}
#footer footer{
	width:960px;
	margin:0 auto;
}
@media only screen and (max-width: 980px){
	#footer footer{
		width:90%;
	}
}
#footer footer h2{
	color:#fff;
	text-align:center;
	font-size:160%;
}
@media only screen and (max-width: 640px){
	#footer footer h2{
		font-size:100%;
		text-align:left;
	}
}
#footer footer p{
	color:#fff;
	text-align:center;
}
@media only screen and (max-width: 640px){
	#footer footer p{
		font-size:90%;
		text-align:left;
	}
}