@charset "utf-8";

/*----------------------- big layout ---------------------*/
* {margin: 0; padding: 0; }
body {position: relative; width: 800px; margin: 0px auto; line-height: 1.7; font-family: 'arial', sans-serif; }
header, aside, article, section, footer, video, nav li p {display: block; }
.bubble {float: left; margin: 4px; overflow: hidden; background: #eee; }

/*------------- header -----------*/
header {position: fixed; z-index: 1; width: 792px; height: 24px; margin: 0 4px; background: #aaa; }
header h1 {float: left; margin: -2px 8px; color: white; font-size: 14pt; font-family: 'optima'; }
header h2 {display: none; }
header nav li {float: left; height: 24px; padding: 0 0.7em; overflow: hidden; }
header nav li:hover {background: #ccc; }
header form {float: right; margin: -3px 8px 0 0;}
header form input {color: #444; }

#table_works {position: absolute; top: 24px; left: 153px; width: 80px; background: #eee; text-align: center; display: none; overflow: hidden; a}
#table_works table {width: 500px; }
#table_works td {width: 100px; height: 2em; border-bottom: 1px solid #aaa; font-size: 12pt; }
#table_works td:first-child {width: 80px; background: #aaa;  }
#table_works td:hover {background: #ccc; -webkit-transition: 0.2s; }
#table_works a {color: black; }

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

/*------------- article -----------*/
article {float: right; width: 80%; }

#maintitle {margin-top: 32px; padding: 1%; }
#maintitle h1 {font-size: 18pt; color: #444; }
.subtitle h1 {height: 24px; background: #666; font-size: 12pt; color: white; text-align: center; }
.subtitle h2 {height: 24px; background: #666; font-size: 12pt; color: white; text-align: center; }

section {padding: 1% 2%; overflow: hidden; border-bottom: 1px solid #aaa; clear: both; }
section h1 {font-size: 14pt; color: #444; margin-bottom: 0.5em; cursor: pointer; }
section h1:hover {background: #ddd; }
section h2 {font-size: 16pt; }
section:after {display: block; content: ""; clear: both; }
button {float: right; padding: 0.5em 1em; border: none; background: #bbb; cursor: pointer; }
.local-nav dt {float: left; margin-left: 1em; }
.highlighted {background: #cff; }
.returner {clear: both; float: right; width: 18%; padding: 0.5% 1%; text-align: center; background: #bbb; cursor: pointer; }

/*------------- footer -----------*/
footer {clear: both; margin: 40px 4px; background-color: #fff; text-align: center; }

/*----------------------- parts style ---------------------*/
.left {float: left; width: 20%; margin-right: 10px; }
.right {float: right; width: 20%; margin-left: 10px; }
.amazon {border: solid 2px blue; float: right; width: 20%; }
.shift_up {margin-top: -2.4em; }
.youTube {margin: 0 5px -2px 0; border: 0; height: 16px; }
.w15 {width: 15%; }
.w25 {width: 25%; }
.w30 {width: 30%; }
.w40 {width: 40%; }
.textBody {margin-left: 160px; }
a {text-decoration: none; }
a img:hover {border: solid 2px #f88; }
iframe.video {float: right; margin-left: 10px; border: 1px solid #ccc; }
hr {border: 1px solid #ddd; margin: 10px auto; clear: both; }