body      { font-family: sans-serif; font-size: 16px; line-height: 1.2;
            background-color: #000; color: #ccc;
            box-sizing: border-box; width: 100%; padding: 0px; }
.wrap     { margin: 0 auto; max-width: 702px; }
h1,h2     { margin: 0; }
span      { white-space: nowrap; }
header,
footer    { text-align: center; }
footer    { font-size: 15px; padding: 3pt; }
header>*  { padding: 10px; }
header>h1 { font-size: 28pt; color: #50afdf; line-height: 28pt; }
header>h2 { font-size: 16pt; color: #2c83b7;
            border: 1px solid #66c; border-width: 1px 0; }
header,
nav,
article   { box-sizing: border-box; margin: 16px 0; }
nav       { border: 1px dotted #66c; border-width: 1px 0; padding: 0.2em 0; }
div       { margin: 0 0.75em; }
div>span  { display: inline-block; width: 60px; font-weight: bold; }
div>ul    { margin: 0; padding: 0.3em 0.5em; display: inline-block; }
div>ul>li { display: inline-block; padding: 0 0.5em; margin: 0; }
article   { background-color: #111; border: 1px dashed #666; }
h3,h4     { margin: 0; }
article>h3      { background-color: #333; padding: 0.7em 0.75em; color: #ddd; }
article>h3>.ver { background-color: #444; padding: 0.1em 0.2em;
                  border-radius: 5px; margin: 0 0.1em; }
article>h3>.date{ float: right; }
article>h4      { background-color: #222; padding: 0.6em 0.75em; }
article:target    { background-color: #112; border-color: #669; }
article:target>h3 { background-color: #336; }
article:target>h3>.ver { background-color: #448; }
article:target>h4 { background-color: #224; }
p         { margin: 0.5em 0.75em; }
article>p+div{ margin-top: 0.75em; }
article>div{ margin: 0.5em 0.75em; }
article>div>span { width: 100px; }
a         { outline: 0; }
*>a       { color: #fff; text-decoration: none; border: none; }
*>a:hover,
*>a:focus { text-decoration: underline; }
*:hover>a { color: #427fed; }