@charset "utf-8";

/* Section to make cell phones (and other small screens) display
   properly */

@viewport
{
    zoom: 1.0;
    width: device-width;
}

html
{
    text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}

/* HACK: may break on extremely large pages
         appears to be no longer necessary for AdBlock browser on Android
*/
/* commented out
html *
{
    max-height: 1000000em;
}
*/

/* End of section */

/* Rather than just hope that the CSS properties direction,
 * writing-mode, and text-orientation take on their default properties,
 * I have decided to explicitly set them for the attributes that I
 * expect to make use of.  */

html[dir="ltr"]
{
    direction: ltr;
}

html[lang|="en"], html[lang|="jbo"]
/* also considered using :lang(en,jbo) pseudo class */
{
    writing-mode: horizontal-tb;
    text-orientation: upright;
}

/* Layers in a table, from backmost to frontmost:
table
colgroup
col
tbody, thead, tfoot "rowgroup"
tr "row"
th, td "table cell"
*/

table, th, td
{
    border-style: solid;
    border-width: 1px;
}

table
{
    border-collapse: collapse;
    margin: .3em;
}

th, td
{
    padding: .2em;
}

caption
{
    /* XXX: caption-side spec not yet updated for logical positioning */
    caption-side: top;
    text-align: center;
    font-weight: bold;
}

ul
{
    list-style-type: disc;
}

h1, h2, h3, h4, h5, h6
{
    text-decoration: underline;
    text-align: center;
    margin-block: 1.25rem;
}

h1
{
    font-size: 2em;
    font-weight: bold;
    font-style: normal
}

h2
{
    font-size: 1.59em;
    font-weight: bold;
    font-style: normal
}

h3
{
    font-size: 1.26em;
    font-weight: bold;
    font-style: normal
}

h4
{
    font-size: 1em;
    font-weight: bold;
    font-style: normal
}

h5
{
    font-size: 1em;
    font-weight: normal;
    font-style: normal
}

h6
{
    font-size: 1em;
    font-weight: normal;
    font-style: italic;
}

img.inline
{
    vertical-align: middle;
    margin: .2em;
}

*.nowrap
{
    white-space: nowrap;
}

hr
{
    height: 1px;
    border-width: 0;
    border-style: solid;
}

nav > a
{
    padding: .25em;
    white-space: nowrap;
}

div.code > code
{
    white-space: pre-wrap;
}

body
{
    color: #000;
    margin: 0;
}

hr
{
    color: #000;
    background-color: #000;
}

*.warn
{
    color: #C00;
    font-weight: bold;
}

a:link /*, span.fakelink */
{
    color: #940;
    text-decoration-line: underline;
    text-decoration-style: solid;
}

a:visited /*, span.fakevisited */
{
    color: #528;
    /* Most browsers do not honor changing anything but the color
       from a:link */
    text-decoration-line: underline;
    text-decoration-style: dashed;
}

/* XXX: consider how to handle min-height and min-width in media screen section */
@media screen
{
    body
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        min-height: 100vh;
        min-height: 100dvh;
    }

    footer.copyandnav
    {
        background-color: #F8C0FD;
        padding: .3em;
        flex-basis: 170px;
        flex-shrink: 1;
        flex-grow: 1;
        min-width: 170px;
    }

    main
    {
        background-color: #FFE6E6;
        padding: .3em;
        flex-basis: 340px;
        flex-shrink: 2;
        flex-grow: 2;
        min-width: 300px;
    }

    div.code
    {
        background-color: #9CF;
        margin-inline-end: 3em;
    }

    div.code.deprecated
    {
        background-color: #FC9;
    }
}

@media print
{
    main
    {
        background-color: #FFF;
    }

    footer.copyandnav
    {
        background-color: #FFF;
        border-block-start-style: solid;
        border-block-start-width: 1px;
        border-block-start-color: #000;
    }

    div.code
    {
        border-style: solid;
        border-width: 1px;
        border-color: #000;
        margin-inline: 3em;
    }

    div.code.deprecated
    {
        border-style: dashed;
        border-width: 2px;
        border-color: #C60;
    }
}