/* basic.css */

* {
    font-family: Helvetica, Arial, Sans-Serif;
    line-height: 1.5;
}

/* Global Classes */
.monospace   {
    font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
}
code {
    font-family: Consolas, Menlo, 'Liberation Mono', Courier, monospace;
}
.transparent { background: transparent; }
.white       { background: white; }
.nowrap      { white-space: nowrap; }

.indent         {                                      margin-left: 2em; margin-right: 2em; }
.margin_compact { margin-top: 0;   margin-bottom: 0;   margin-left: 0;   margin-right: 0;   }
.margin_tblr    { margin-top: 1em; margin-bottom: 1em; margin-left: 1em; margin-right: 1em; }
.margin_tb      { margin-top: 1em; margin-bottom: 1em;                                      }
.margin_t       { margin-top: 1em;                                                          }
.margin_b       {                  margin-bottom: 1em;                                      }
.margin_lr      {                                      margin-left: 1em; margin-right: 1em; }
.margin_l       {                                      margin-left: 1em;                    }
.margin_r       {                                                        margin-right: 1em; }

.scroll { overflow-x: scroll; }
.container {
    display: flex;
    flex-direction: row;
    gap: 1em;
}
@media (max-width: 800px) {
    .container {
        flex-direction: column;
    }
}

/* Basic Elements */
a             { text-decoration: none; }
a:hover       { text-decoration: underline; }
a:link    img { border: none }
a:visited img { border: none }
a:active  img { border: none }

blockquote {
    margin-top:  0.5em; margin-bottom:  0.5em; margin-left:  2em; margin-right:  2em;
    padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 1em; padding-right: 1em;
    border-style: dashed;
    border-color: #e0e0e0;
    border-width: thin;
}

body {
    color:      black;
    background: transparent;
    /* width: 1000px */
    /* Default width: 980px assumed by Android Chrome */
    max-width: 980px;
    min-width: 640px;
    margin-left: auto; margin-right: auto; /* centering */
    padding: 0.5em;
}

address { font-style: normal; }
cite    { font-style: normal; }

ol.breadcrumb {
    margin-top:    1em;
    margin-bottom: 0;
    margin-left:   0;
    padding:       0;
    list-style:    none;
}
ol.breadcrumb li {
    display: inline;
}
ol.breadcrumb li::after {
    content: '>';
    color: gray;
    padding-left: 0.3em;
    padding-right: 0;
}
ol.breadcrumb li:last-child::after {
    content: '';
}

div.breadcrumbs {
    margin-top: 1em;
}
div.changelog {
    text-align: left;
}
div.center { text-align: center; }
div.scroll { overflow-x: scroll; }
span.hidden { color: transparent; }

em {
    color:          red;
    font-style:     normal;
    /* font-weight: bolder; */
}

strong {
    color:       red;
    font-style:  normal;
    font-weight: bolder;
}

h1, h2, h3, h4, h5, h6 {
    font-size:     100%;
    color:         navy;
    margin-top:    3ex;
    margin-bottom: 0;
}

h1 + h2, h2 + h3, h3 + h4, h4 + h5, h5 + h6 {
    margin-top:    1ex;
}

hr {
    border-style: dashed;
    border-width: thin;
    color:        #e0e0e0;
}

p {
    margin-top:    0.5em;
    margin-bottom: 0.5em;
}

pre {
    white-space:   pre;
    margin-top:    0.5em;
    margin-bottom: 0.5em;
}

table {
    margin-top:      1em;
    margin-bottom:   1em;
    border-collapse: collapse;
    border-color:    #e0e0e0;
}

table.bordered {
    /* same as table */
    /* see table.bordered td, th */
    margin-top: 1em; /* dummy */
}

table.layout {
    margin: 0;
    border: none;
}

caption {
    text-align: left;
}

td {
    vertical-align: top;
    padding-left:   0.5em;
    padding-right:  0.5em;
}

th {
    font-weight:    normal;
    background:     #f0f0f0;
    text-align:     left;
    vertical-align: top;
    padding-left:   0.5em;
    padding-right:  0.5em;
}

table.bordered td, table.bordered th {
    border-style:   solid;
    border-color:   #e0e0e0;
    border-width:   thin;
}

td.number, th.number {
    text-align: right;
    /* vertical-align: bottom; */
}

td.divider {
    background:     #f0f0f0;
}

tr.em {
    background:   #ffc0c0;
}

tr.gray {
    background:   #f4f4f4;
}

.sticky_header thead {
    position: sticky;
    top: 0;
}


ul { margin-left: 2em; padding-left: 0; }
li { margin-left: 0;   padding-left: 0; }
dd { margin-top: 0; margin-left: 4em; }