/* text/headings/general */

body {
    /* background-color: #222; */
    background-image: url("img/bg/olive_paper.gif");
    color: #fff;
    font-family: Times New Roman;
    margin:1px;
    font-size: 14px;
    padding-left: 3px;
    padding-right: 3px;
}

p {
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 17px;
}

hr {
    margin-top: 5px;
    margin-bottom: 5px;
    border: none;
    border-bottom: double #555;
}

h1, h2, h3, h4 {
    padding: 1px;
    line-height: 28px;
}

h1 { 
     font-size: 26px;
}

h2 {
    display: table;

    background-color: #3d3d3d;
    border: 3px double #ccc;
    box-shadow: 8px 8px #909090;

    width: -moz-fit-content;
    width: fit-content;
    padding: 3px;

    margin-top: 10px;
    margin-bottom: 15px;
}


mark.highlight {
    background-color:#cccc99;
    padding-right: 1px;
    padding-left: 1px;
}

span.underline {
    text-decoration: underline;
}

h1 {
    color: #FFFFFF;
}

h2 {
    color: #FFFFFF;
}

code {
    border: 3px double #555;
    padding: 1px;
    padding-left: 2px;
    margin-top: 3px;
    display: inline-block;
    font-face: monospace;
}

.date {
    font-size: 12px;
    color: #ccc;
    border-bottom: double #666;
    display: block;
    margin-bottom: 5px;
}

.post {
    margin: 3px;
    display: inline-block;
    padding: 5px;
    border: 3px double #ccc;
    margin: 3px;
    margin-right: 15px;
    margin-bottom: 15px;
    background: #3d3d3d;
    box-shadow: 8px 8px #909090;
    max-inline-size: 600px;
    writing-mode: horizontal-tb;
    vertical-align: middle;
}


/* images */

div.image_container {
    float:left;
    margin-left: 10px;
    margin-right: 10px;
    background-color: #3d3d3d;
}

img {
    border: 3px double #999;
}

p.caption {
    text-align:center;
    border: 3px #999 double;
    margin:0;
    padding: 2px;
    padding-bottom: 3px;
}

/* menu, table of contents (toc), box-shadowed stuff in general */
div.menu, #table-of-contents, .box-shadowed {
    padding: 10px;
    border: 3px double #ccc;
    margin: 3px;
    margin-right: 15px;
    margin-bottom: 15px;
    background: #3d3d3d;
    box-shadow: 8px 8px #909090;
    align-items: center;
}

div.menu, #table-of-contents {
    float:right
}

.box-shadowed {
    display: inline-block;
    padding-right: 20px;
}

div.menu-flexpart {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    writing-mode: horizontal-tb;
}

div.menu > img {
    margin: 2px;
    style: block;
}

ul.menu, #text-table-of-contents ul, ul.importance_list {
    opacity: 1.0;
    padding: 0px;
    margin: 1px;
    list-style-position: inside;
    display: inline-block;
    list-style-type: circle;
}

span.imp::before {
    content: "importance: ";
}

span.imp {
    vertical-align: super;
    padding-left: 2px;
    padding-right: 2px;
    font-size: 0.82em;
    margin-left: 4px;
    background-color: #555;

}

.why {

    padding: 2px;
    margin-top: 3px;
    font-size: 10pt;
    border: solid 1px #ccc;
    line-height: 10pt;
}

.why p {
    line-height: 11pt;
}

/* details.why[open] { */
/*     height: 150px; */
/*     overflow: scroll; */
/* } */

.why summary {
    background-color: #555;
}


#table-of-contents h2, .box-shadowed h2 {
    margin: 1px;
    margin-bottom: 3px;
    box-shadow: 0 0 0;
}


/* links */

a {
    text-decoration-line: underline;
    text-decoration-style: double;
    line-height: 18px;
}

body :not(div.footer) a[href*="//"]:not([href*="kassy.neocities.org"]):after {
    content: "↑";
    vertical-align: super;
    font-size: smaller;
}

a:link {
    color: #ccc;
    text-underline-offset: 0.2em;
}

/* visited link */
a:visited {
    color: #aaa;
}
/* mouse over link */
a:hover {
    color: #CCCC99;
}
/* selected link */
a:active {
    color: #fff;
}

.post a:link, .permalink a, div.menu a:link, #table-of-contents a:link {
    color: #D54E4E;
}

.post a:visited, .permalink a:visited, div.menu a:visited, #table-of-contents a:visited {
    color: #b86b6b;
}

div.menu a:hover, #table-of-contents a:hover {
    color: #cccc99;
}

.post a:hover {
    color: #cccc99;
}


.permalink {
    font-size: 11px;
    text-align: right;
}

.permalink a:hover {
    color: #999;
}

/* changelog table stuff */
#menu_iframe {
    width: 450px;
    height: 187px;
    margin-top: 5px;
}

.table_container {
    border: 3px double #ccc;
    overflow: hidden;
}

#changelog_header {
    font-size: 20px;
}

#changelog_table {
    overflow: auto;
    border-collapse: collapse;
    margin: 0px;
    width: 100%;
}

thead.fixed_header tr {
    display: block;
    padding-bottom: 3px;
}

tbody.scroll_content {
    border: 1px solid #AAA;
    margin: -2px;
    display: block;
    height: 150px;
    overflow: auto;
}

tbody.scroll_content td {
    border-bottom: 1px solid #AAA;
    border-right: 1px solid #AAA;
}

#changelog_table tbody.scroll_content td:not(:last-child) {
    word-wrap:none;
    width: 70px;
}

/* #changelog_table tbody.scroll_content td:not(:last-child) { */
/*     /\* word-wrap:break-word; *\/ */
/*     /\* width: 70px; *\/ */
/* } */

/* #changelog_table tbody.scroll_content td:last-child { */
/*     width: 100%; */
/* } */

summary {
    cursor: pointer
}