/* page.css */

body {
    margin: 0px;
    padding: 2px;
}

img {
    border-width: 0px;
    vertical-align: middle;
}

a:link {
    text-decoration: none;
}
a:visited {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
a:active {
    text-decoration: underline;
}

/* page */
#page {
    clear: both;
}

/* tab */
#tab {
    color: #bbbbbb;
    background: #1c0c72;
    text-align: right;
    font-size: 1.2em;
    height: 32px;
    padding: 2px;
    clear: both;
}

/* menu */
#menu {
    color: #bbbbbb;
    background: #004ab6;
    font-size: 1.1em;
    margin-top: 1px;
    padding: 2px;
    clear: both;
}

/* content */
#content {
    color: #000000;
    background: #fdfdf6;
    margin-top: 1px;
    border: 1px solid #000000;
    padding: 8px;
    clear: both;
    height: 100%;
}

/* copyright */
#copyright {
    color: #ffffff;
    background: #1c0c72;
    text-align: right;
    margin-top: 1px;
    padding: 2px;
    clear: both;
}

a.tabLink:link {
    color: #e4f4a2;
    text-decoration: none;
}
a.tabLink:visited {
    color: #e4f4a2;
    text-decoration: none;
}
a.tabLink:hover {
    color: #a2f8e4;
    text-decoration: underline;
}
a.tabLink:active {
    color: #a2f8e4;
    text-decoration: underline;
}

.tabHighlight {
    color: #e4f44c;
    font-weight: bold;
}

a.menuLink:link {
    color: #b6f282;
    text-decoration: none;
}
a.menuLink:visited {
    color: #b6f282;
    text-decoration: none;
}
a.menuLink:hover {
    color: #f8c0a2;
    text-decoration: underline;
}
a.menuLink:active {
    color: #f8c0a2;
    text-decoration: underline;
}

.menuHighlight {
    color: #d2fcb2;
    font-weight: bold;
}

.contentTitle {
    font-size: 1.6em;
    font-weight: bold;
    margin-bottom: 0.5em;
    float: left;
}

.contentInformation {
    text-align: right;
    font-weight: bold;
    float: right;
    clear: right;
}

.rule {
    clear: both;
}

.break {
    clear: both;
    border: none;
    height: 0px;
    margin: 0px;
    padding:0px;
}

.toc {
    list-style-type: none;
}

.toc > .level1 {
}

.toc > .level2 {
    margin-left: 2em;
    font-size: 90%;
}

.toc > .level3 {
    margin-left: 4em;
    font-size: 80%;
}

.section {
    line-height: 1.4;
    margin-top: 1.0ex;
    margin-bottom: 1.0ex;
    clear: both;
}

.section > .header {
    margin-bottom: 0.5ex;
    font-size: 1.4em;
    font-weight: bold;
}

.section > .footer {
    clear: both;
}

.subsection {
    margin-top: 1.0ex;
    margin-bottom: 1.0ex;
    clear: both;
}

.subsection > .header {
    margin-bottom: 0.5ex;
    font-size: 1.2em;
    font-weight: bold;
    clear: both;
}

.subsection > .footer {
    clear: both;
}

.subsubsection {
    margin-top: 1.0ex;
    margin-bottom: 1.0ex;
    clear: both;
}

.subsubsection > .header {
    margin-bottom: 0.5ex;
    font-size: 1.0em;
    font-weight: bold;
    clear: both;
}

.subsubsection > .footer {
    clear: both;
}

.paragraph {
    text-indent: 1em;
}

.paragraph > * {
    text-indent: initial;
}

.subparagraph {
}

.subsubparagraph {
}

.definitionTerm {
    margin-top: 0.3ex;
    margin-left: 1.0em;
}

.definition {
    margin-left: 3.0em;
    margin-bottom: 0.2ex;
}

.tex {
}

/* note */
.annotate {
    font-size: 70%;
    vertical-align: text-top;
}

.footline {
    border: none;
    border-top:1px #ccc dotted;
}

.footnote {
    list-style-type: none;
    margin-left: 0.5em;
    margin-right: 0.5em;
    padding: 0px;
    font-size: 80%;
}

.timestamp {
}

.bold {
    font-weight: bold;
}

.italic {
    font-style: italic;
}

.underline {
    text-decoration: underline;
}

.strikethrough {
    text-decoration: line-through;
}

.gray {
    color: gray;
}

.red {
    color: red;
}

.blue {
    color: blue;
}

.green {
    color: green;
}

.nowrap {
    white-space: nowrap;
}

#attack {
    width: 320px;
    height: 200px;
}

.area {
}

.line {
}

.case , .remark , .comment , .console , .program {
    clear: both;
    margin: 0.5em 5%;
    padding: 0.2em 0.5em;
}

.case + .caption {
    margin: -0.5em 5% 0.5em;
    text-align: right;
    color: #666633;
}

.remark + .caption {
    margin: -0.5em 5% 0.5em;
    text-align: right;
    color: #663333;
}

.comment + .caption {
    margin: -0.5em 5% 0.5em;
    text-align: right;
    color: #333333;
}

.console + .caption, .program + .caption {
    margin: -0.5em 5% 0.5em;
    text-align: right;
    color: #666633;
}

.case {
    background-color: #ffffcc;
}

.remark {
    background-color: #ffcccc;
}

.comment {
    background-color: #cccccc;
}


.console , .program {
    list-style-position: outside;
    border: solid 1px;
    background-color: #ffffcc;
}

.console li , .program li {
    padding-left: 0.5em;
    font-family: monospace;
    white-space: pre-wrap;
}

.console li {
    list-style: none;
}

.program li {
    margin-left: 3em; /* TODO: variable*/
    border-left: solid 1px #999999;
}

.description {
    clear: both;
}

.description dt {
    font-weight: bold;
}

/* image */
.image-set {
    max-width: 100%;
}

/* diary */

.diarytime {
    color: #999;
}

.diarytime + .timestamp {
    color: #999;
}

img[alt="diary-image"] {
    float: left;
    max-width: 100%;
    margin-right: 1em;
}

/*
div[data-id="diary-latest"] .track-scope {
    float: left;
    margin-right: 1em;
}
*/

/* essay */

.essay-image {
    float: right;
    margin: 1em;
    width: 256px;
    height: 256px;
    border: 1px solid;
}

/* frame */

iframe.itmap {
    width:100%;
    height:100vh;
    border:none;
}

/* image */

div[data-id="image-viewer"] img.image-scope {
    float: left;
    margin-right: 1em;
}

/* page-list */
.page-list {
    list-style-type: none;
}
.page-list .locationstamp {
    display: none;
}
.page-list > li > img:first-of-type {
    width: 1em;
    height: 1em;
}

/* popup */
[data-popup] {
    cursor: pointer;
}
[data-popup]:hover + .popup {
    display: block;
}
.popup {
    display: none;
    position: absolute;
    border: solid 1px #333;
}
.popup:before {
    content: ' ';
    position: absolute;
    width: 0;
    height: 0;
    top: -1em;
    left: -1em;
    border: 0.5em solid transparent;
    border-color: rgba(51, 51, 51, 0);
    border-left-color: #333;
    pointer-events: none;
}

/* event history */
div[data-id="event-history"] img[alt="webp"] {
    height: 1em;
}
div[data-id="event-history"] img[alt="webp"]:hover {
    height: initial;
}