@charset "utf-8";

/*----------------------- whole layout ---------------------*/
* {margin: 0; padding: 0; }
body {position: relative; width: 800px; margin: 0px auto; line-height: 1.7; background: white;}
#page {padding: 10px; }

/*----------------------- large layout ---------------------*/
header, aside, article, section, footer, video, nav {display: block; }

header {width: 100%; padding: 1px; margin-bottom: 30px; border-bottom: solid 10px white; }
#header-logo {float: left; width: 120px; border: none; }
header h1 {display: none; }
header form {float: right; margin-top: 10px; }
header form input {color: #aaa; }
header nav {margin-top: 40px; }
header li {float: left; list-style: none; background: #333; width: 20%; height: 18px; text-align: center; }
header a {color: white; text-decoration: none; }
header .button {margin-top: -4px; }

aside {float: left; width: 16%; padding: 10px 0 10px 10px; 
          background: #f8f8f8; overflow: hidden; clear: both; }
aside dt {font-size: 14pt; }

article {float: right; width: 80%; }

section {padding: 6px 0; border-bottom: 1px solid #aaa; clear: both; }
section h1 {font-size:  14pt; color: #444; margin-bottom: 0.5em; }
section:after {display: block; content: ""; clear: both; }
.local-nav dt {float: left; margin-left: 1em; }
.pickUp {background: #cff; }

footer {float: right; width: 80%; margin: 20px 0; }
footer li {float: left; list-style: none; background: #333; width: 20%; height: 18px; text-align: center; }
footer a {color: white; text-decoration: none; }
footer .button {margin-top: -4px; }

/*----------------------- small layout---------------------*/
.title {padding-top: 0; }
.subtitle {margin: 30px auto 0px auto; text-align: center; border-bottom: none; text-valign: top; }
.subtitle h1 {color: white; height: 25px; background: #333; font-size: 14pt; }

.left {float: left; width: 20%; margin-right: 10px; }
.right {float: right; width: 20%; margin-left: 10px; }
.amazon {border: solid 2px; float: right; width: 20%; margin-left: 10px; }
.shift_up {margin-top: -2.4em; }
.w15 {width: 15%; }
.w25 {width: 25%; }
.w30 {width: 30%; }
.w40 {width: 40%; }
img.youTube {margin: 0 5px -2px 0; border: 0; height: 16px; }
.textBody {margin-left: 160px; }
a:hover {color: #f88; }
a img:hover {border: solid 5px #f88; -webkit-transition: 0.2s; }
iframe.video {float: right; margin-left: 10px; border: 1px solid #ccc; }
hr {border: 1px solid #eee; margin: 10px auto; clear: both; }
.returner {text-align: right; }

/*---------------------- media quere -----------------------*/
@media screen and (min-height: 481px) {
	.button {font-size: 100%; background: none; border: none; }
	header .button {color: white; margin-top: -5px; }
}
@media screen and (max-height: 480px) {
	#page {width: device-width; font-size: 14pt; margin: 0; padding: 0; }
	header, footer, aside, article {
		clear: both; float: none; margin: 0; width: 100%; 
		border: solid 1px #ddd; 
	}
	header, footer {
		background-image: -webkit-gradient( linear, left top, left bottom, 
		color-stop(0.01, rgb(240,240,240)), color-stop(0.76, rgb(160,160,160)) );
		background-image: -moz-linear-gradient( center top, rgb(240,240,240) 1%, 
		rgb(160,160,160) 76% ); 
	}
	header {height: 180px; }
	#header-logo {width: 240px; }
	header input {font-size: 30pt; }
	header nav {clear: both;}
	header li {width: 18%; margin: 5px; background: none; }
	nav a {color: #008; text-decoration: none; }
	.button {
		height: 3em; padding: 0.2em; font-size: 24pt; border: solid 1px #aaa; 
		border-radius: 20px; text-align: center; vertical-align: middle; 
		font: #fff; text-shadow: 1px 1px 0px #ccc; overflow: hidden; 
		background-image: -webkit-gradient( linear, left top, left bottom, 
		color-stop(0.01, rgb(240,240,240)), color-stop(0.76, rgb(140,140,140)) );
		background-image: -moz-linear-gradient( center top, rgb(240,240,240) 1%, 
		rgb(140,140,140) 76% ); 
	}
	footer {height: 120px; }
	
/*----aside----*/
	#index-aside, #about-aside, #link-aside, #special-aside, #publcation2012-aside {display: none; }
/*-----previous-----*/
	#old-aside dl#nav1 {float: left; width: 50%; }
	#old-aside dl#nav2 {float: right; width: 50%; }	#old-aside dt {clear: both; float: left; width: 30%; list-style: none; margin: 5px; }
	#old-aside dd {margin-top: 10px; font-size: 24pt; }
/*----works----*/
	#works-aside nav dt {clear: both; width: 10%; font-size: 24pt; text-align: center; margin-top: 1em; }
	#works-aside nav dd {width: 20%; margin: 5px; }
	#works-aside dt,dd {float: left; list-style: none; margin: 0 0.5em; }
/*---accident--*/
	#accident-aside dl#nav1 {float: left; width: 50%; }
	#accident-aside dl#nav2 {float: right; width: 50%; }
	#accident-aside dt {clear: both; float: left; width: 30%; list-style: none; margin: 5px; }
	#accident-aside dd {margin-top: 10px; font-size: 24pt; }
/*----board----*/
	#board-aside {position: relative; }
	#board-aside dl#nav1 {height: 300px; padding-left: 2%; }
	#board-aside dl#nav2 {position: absolute; top: 0; left: 33%; 
		width: 33%; height: 400px; background: #eee; padding-left: 2%; }
	#board-aside dl#nav3 {position: absolute; top: 0; left: 66%; 
		width: 34%; height: 400px; background: #eee; padding-top: 40px; }
	#board-aside dl#nav4 {position: absolute; top: 80px; left: 0; 
		width: 31%; height: 370px; background: #ddd; padding-left: 2%; }
	
	section h1 {font-size: 20pt; }
	.subtitle {border: solid 1px #ddd; border-radius: 0; box-shadow: none; margin: 0 -10px; }
	.textBody {margin-left: 10px; }
	works-review-special div.text {margin: 0; }
	#album .photoframe {height: 360px; }
	footer {padding: 10px; }
	footer li {width: 18%; margin: 5px; }
}