@charset "utf-8";
* {margin: 0; padding: 0; }
body {position: relative; width: 800px; margin: 0px auto; font-size: 11pt; line-height: 1.5; 
background: #eee;
background: -moz-linear-gradient(#ddd, white);
background: -webkit-gradient(linear, left top, right bottom, from(#eeeef8), to(#f8f8f8)); background-attachment: fixed; }
#page {padding: 10px 20px; margin-bottom: 20px; }

/*---------------------- whole layout --------------------*/

#header {width: 100%; height: 40px; padding: 5px; background: white; vertical-align: bottom; border-radius: 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.2);}
#header-logo {float: left; width: 120px; margin-right: 20px; border: none; }
#header h1 {color: white; font-size: 11pt; }
#header ul li {float: left; list-style: none; margin: 0 0.4em; }
#header form {float: right; }
#header img#google {width: 50px; border: 0; margin-bottom: -4px; }

.sub-nav {float: left; width: 14%; margin: 10px 0; padding: 8px; background: #f8f8ff; overflow: hidden; border-radius: 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.2);clear: both;}
.sub-nav img {height: 110%; margin-left: -120px; filter: alpha(opacity=20); -moz-opacity: 0.20; opacity: 0.20; }
.sub-nav dt {font-size: 16pt; }

div.article {float: right; width: 80%; margin: 10px 0; padding: 0 10px; overflow: auto; background: white; border-radius: 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.2);}
div.article div:after {display: block; content: ""; clear: both; }
div.parts {width: 605px; overflow: auto; }

div.section {padding: 10px 0; border-bottom: 1px solid #ccc; clear: both; }
div.section h1 {font-size: 14pt; margin-bottom: 0.5em; }
div.section-year {border-bottom: 1px solid #ccc; clear: both; background: #eee; border-radius: 10px; box-shadow: 5px 5px 10px #ddd; margin: 30px auto; padding: 10px; text-align: center; }
div.section-year h1 {font-size: 18pt; }

.returner {text-align: right; }

#footer {clear: both; width: 83%; margin: 10px 0 0 17%; text-align: center; background: white; border-radius: 10px; box-shadow: 10px 10px 10px rgba(0,0,0,0.2);}
#nav-footer {margin: 0.5em auto; }
#footer li {float: left; list-style: none; margin: 0 0.4em; }

.footer {clear: both; width: 100%; margin-top: 10px; margin-bottom: 0; border-top: 1px solid #eee; font-size: 9pt; text-align: right; }

/*--------------------------- each layout ---------------------------*/

/*----index----*/
div#namePlate {float: left; width: 430px; }
img#title-logo {margin: 10px auto; }
div#history {width: 160px; height: 145px; margin-right: 10px; background-color: #f4f4ff; font-family: ‚l‚r ƒSƒVƒbƒN; font-size: 9pt; border-radius: 10px; }

/*----books----*/
div#menu_menu {width: 109px; padding: 8px; background: #feb; overflow: hidden; }
div#books-article {float: right; width: 480px; overflow: auto; margin: 10px auto; }
p#book-list {font-family: ‚l‚r ƒSƒVƒbƒN; margin-top:2em; }
p#book-list a {text-decoration: none; }
div#explain {position: absolute; overflow: hidden; top: 53px; left: 355px; width: 405px; height: 522px; }
p.close {position: absolute; bottom: 5px; left: 200px; }

/*----works----*/
div.local-nav dt {float: left; margin-left: 1em; }

/*--------------------------- other ---------------------------*/

h2 {margin-bottom: 5px; }
h3 {margin: 1.5em auto; text-align: center; font-size: 14pt; }
h4 {font-size: 12pt ; }

iframe {float: right; margin-left: 1em; border: 1px solid #ccc; }
img.left {float: left; height: 180px; margin-right: 10px; }
img.right {float: right; height: 180px; margin:0 10px; }
img.youTube {margin: 0 5px -2px 0; border: 0; height: 16px; }
div.text {margin-left:  130px; }
hr {border: 1px solid #eee; margin: 10px auto; clear: both; }
a:hover {color: #f88; }
a:hover.expantion {width: 100%; }
.clearBoth {clear: both; }

/*---------------------------------- used -----------------------------*/
div#menu {float: left; width: 110px; height: 520px; margin: 10px 0; padding: 8px; background: #f8f8ff; overflow: hidden; border-radius: 10px; clear: both; }
img#menu-image {height: 110%; margin-left: -120px; filter: alpha(opacity=20); -moz-opacity: 0.20; opacity: 0.20; }
div#menu dt {background-color: #ddf;}

div#container {float: right; width: 605px; height: 520px; margin: 10px 0; padding: 0 10px; overflow: auto; background: white; }
div#container div:after {display: block; content: ""; clear: both; }
div.parts {width: 605px; height: 520px; overflow: auto; }



/*--------------------------- media quere ---------------------------*/

@media screen and (max-width: 650px) {
	#page {
		width: device-width; font-size: 15pt; 
	}
}