/*
    Stylesheet for documentation

    Author     : Sarkuya
    Created on : 2019-04-25
*/

@page {
    size: a4 portrait;
}

@media screen and (max-width: 375px) {
    pre {
        overflow-x: scroll;
    }
}

html {
    background: linear-gradient(#00abeb, #fff);
}

body {
    margin: 1em;
    padding: 1em;
    background-color: #fff;
    border-radius: 0.5em;
    box-shadow: 0 0 5px #123;
    font-family: Helvetica, "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

/* -------------------- article -------------------- */

article {
/*    columns: 25em;*/
}

article header h1 {
    color: #007ac0;
    text-align: center;
    font-size: xx-large;
    text-shadow:#ccc 3px 3px 3px;
    color: rgb(92, 25, 36);
    /*letter-spacing: 0.5em;*/
}

h1 span.outstand {
    color: rgb(235, 76, 33);
    font-size: larger;
    font-weight: 900;
}



article header div.toc {
    background-color: #fff;
    margin-left: 1em;
}

article header div.toc p {
    text-indent: 0;
    text-align: center;
    font-size: x-large;
    color: #043a6b;
    letter-spacing: 1em;
}

article header div.toc dl {
    margin-top: 0;
    margin-bottom: 0;
}

article header div.toc dt {
    line-height: 1.5em;
}

article header div.toc dt+dd {
    margin-left: 2em;
}

article>section>h1 {
    color: #043a6b;
    font-size: x-large;
    margin-top: 5em;
}

article section h1 a {
    color: #043a6b;
}

article>section>h1>span.indexNum {
    color: brown;
    font-size: 300%;
    font-style: italic;
    text-shadow: #ccc 5px 5px 5px;
}

article>section>section>h1 {
    color: #007aa0;
    font-size: large;
}

article>section>section>h1:before,
article>section>section>section>h1:before {
    content: "§ ";
    color: green;
}

article>section>section>section>h1 {
    color: #517994;

    font-size: medium;
}

article>section>section>section>section>h1 {
    font-weight: bold;
    font-size: medium;
    color: black;
}

article section p {
    color: #0f0f0f;
}

article ul,
article ol
{
    margin-left: 2em;
    margin-top: -1em;
}

article ul li {
}

article div.toc dl.toc>dt {
    padding-top: 0.5em;
}

article div.toc dl.toc dd {
    margin: 0em 2em;
}

article section dl {
    margin-left: 1em;
}

article section dl dt {
    font-weight: bold;
    font-style: italic;
    color: #333;
}

article dl.function-prototype dt {
    margin-top: 1em;
}

article dl.demo,
article pre.demo {
    font-family: monospace;
    color: #333;
    background-color: #f9f9f9;
    padding: 1em;
    margin-left: 1em;
    border-radius: 5px;
    font-size: 80%;
}

article p.note {
    border: 1px inset gray;
    padding: 1em;
    background: #eee;
    font-size: 80%;
    color: #666;
}

article p.note:before {
    content: "注意：";
    color: red;
    font-size: 120%;
}

article span.htmltag {
    color: rgb(235, 76, 33);
    font-style: italic;
    padding: 0 0.3em;
}

article span.function-name {
    color: darkgoldenrod;
}

article span.variable-name {
    color: blue;
}

article span.class-name {
    color: brown;
    font-weight: bold;
}

article span.attribute-name {
    color: green;
}

article span.constant {
    color: #666;
}

article span.parameter {
    color: orange;
    font-style: italic;
}

article span.emphasis {
    color: darkorchid;
    font-style: italic;
    text-decoration: underline;
}

pre {
    font-family: monospace;
    white-space: pre;
    line-height: 1.5em;
    padding: 0.5em;
    border-radius: 5px;
    color: #333;
    background-color: #e9e9e9;
/*    overflow-x: scroll;*/
    font-size: 80%;
}

pre.highlight,
pre.programlisting {
    border: 1px dashed #2f6fab;
}

pre.highlight {
    color: #333;
    background-color: #e9e9e9;
}

pre.highlight span.htmltag {
    color: brown;
    padding: 0em;
}

pre.synopsis {
    background-color: #e0e0e0;
    border-left: 5px solid limegreen;
    border-right: 5px solid limegreen;
}

pre.screen {
    color: #ccc;
    background-color: #6f6f6f;
}

pre.screen span.matched {
    color: yellow;
}

code {
    color:  blueviolet;
    background-color: #eee;
}

p em {
    color: orchid;
    font-weight: bold;
}

/* -------------------- tabpanel -------------------- */

.tabpanel {
    width: 90%;
    margin: 2em auto;
    display: grid;
    grid-template-columns: repeat(15, 1fr);
}

.tabpanel input[type=radio] {
    display: none;
}

.tabpanel input[type=radio]+label {
    grid-row: 1;

    padding: 0.5em 2em;
    margin-top: 15px;
    margin-left: 0.8em;

    color: mediumorchid;
    background: #aaa;

    cursor: pointer;

    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;

    border: 1px solid #ddd;
    border-bottom-width: 0;
}

.tabpanel input[type=radio]+label:first-of-type {
    margin-left: 2.0em;
}

.tabpanel input[type=radio]:checked+label {
    border-top-width: 5px;
    border-top-color:  goldenrod;
    color: blueviolet;
    border-bottom-width: 0;
    margin-top: 3px;
    font-weight: bold;
    box-shadow:  5px 3px 5px #888;
}

.tabpanel div {
    grid-column: 1 / 16;
    grid-row: 2;
    padding: 1em;
    border-radius: 0.4em;
    box-shadow: 5px 5px 5px #888;
    min-height: 100px;
    max-height: 200px;
    overflow:  scroll;
    font-size: 90%;
    color: #333;
}

.tabpanel input[type=radio]:checked+label+div {
    z-index: 1;
}

.tabpanel input[type=radio]:checked+label,
.tabpanel div {
    background-color: #ddd;
}