/***********************************************************************
* Bent-O-Rama BORCommon.css
************************************************************************
* Copyright (c) 2019, Paul Kimpel.
* Licensed under the MIT License, see
*       http://www.opensource.org/licenses/mit-license.php
************************************************************************
* Bent-O-Rama site common style sheet.
************************************************************************
* 2019-03-30  P.Kimpel
*   Original version.
***********************************************************************/

HTML {
    height:             100%}

BODY {
    font-family:        Arial, Helvetica, sans-serif;
    font-size:          medium;
    background-color:   white;
    color:              black;
    margin:             4px}
BODY.helpPage {
    margin-left:        auto;
    margin-right:       auto;
    max-width:          40em}

H2 {
    margin-top:         2em}
H3 {
    margin-top:         1.5em}
H4 {
    margin-top:         1.5em}
H5 {
    margin-top:         1.5em;
    font-size:          medium;
    font-weight:        normal;
    font-style:         italic}

TABLE.normal, TABLE.standard {
    border-spacing:     0;
    border-collapse:    collapse}

/*****
TABLE.border{
    border-color:       #CCC;
    border-width:       1px;
    border-style:       solid}
*****/

TABLE.normal>TBODY>TR>TD, TABLE.standard>TBODY>TR>TD {
    padding-top:        1px;
    padding-bottom:     1px;
    padding-left:       2px;
    padding-right:      2px}

TABLE.standard>THEAD>TR>TH, TABLE.standard>TBODY>TR>TD {
    font-size:          small}

TABLE.standard>THEAD>TR>TH, TABLE.normal>THEAD>TR>TH {
    vertical-align:     bottom;
    text-align:         center;
    padding-left:       0.5ex;
    padding-right:      0.5ex;
    font-weight:        bold}

TABLE.border>THEAD>TR>TH, TABLE.border>TBODY>TR>TD {
    border:             1px solid #CCC}

TR {
    vertical-align:     top}
TR.middle {
    vertical-align:     middle}

DIV.tocFrame {
    float:              right;
    background-color:   #FFD;
    font-size:          smaller;
    border:             2px solid blue;
    margin-left:        1ex;
    margin-top:         1em;
    margin-bottom:      1ex;
    padding:            1ex;
    width:              33%}

UL.tocList {
    margin:             0;
    padding:            0}

UL.tocList LI {
    list-style-type:    none;
    margin-left:        2ex;
    text-indent:        -2ex;
    margin-top:         0;
    margin-bottom:      0}

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

DL {
    margin-top:         0;
    margin-bottom:      0}

DL DT {
    margin-top:         0.5em;
    margin-bottom:      0;
    margin-left:        2em;
    font-weight:        bold}

DL DD {
    margin-top:         0;
    margin-bottom:      0;
    margin-left:        4em}

INPUT,
TEXTAREA {
    font-family:        inherit;
    font-size:          inherit}

BUTTON {
    font-size:          smaller;
    background-color:   #DDD;
    margin-top:         4px;
    margin-bottom:      4px;
    padding-left:       8px;
    padding-right:      8px;
    padding-top:        2px;
    padding-bottom:     2px;
    border:             2px solid blue;
    border-radius:      4px}

CODE {
    font-family:        Consolas, Courier New, Courier, monospace;
    font-size:          inherit}

.alert {
    color:              red;
    font-weight:        bold}
.bold {
    font-weight:        bold}
.center {
    text-align:         center}
.lj {
    text-align:         left}
.nowrap {
    white-space:        nowrap}
.rj {
    text-align:         right}
.smaller {
    font-size:          smaller}
.tiny {
    font-size:          x-small}

.logo {
     position:          absolute;
     display:           block;
     top:               0;
     right:             8px;
     z-index:           1}
.logo > IMG {
     height:            75px}

.modal {
    position:           fixed;
    display:            none; /* Hidden by default */
    z-index:            9999999;        /* insane Safari fix */
    left:               0;
    top:                0;
    width:              100%;
    height:             100%;
    background-color:   rgba(0, 0, 0, 0.4)}
.modalContent {
    position:           absolute;
    background-color:   #FEFEFE;
    top:                20%;
    bottom:             20%;
    left:               50%;
    transform:          translate(-50%, 0);
    width:              50%;
    max-width:          700px;
    overflow:           auto; /* Enable scroll if needed */
    padding:            16px;
    border:             1px solid black;
    border-radius:      16px;
    box-shadow:         12px 12px 12px #333}
.innerModalContent {
    position:           absolute;
    top:                1.25em;
    bottom:             16px;
    left:               0;
    right:              0;
    padding:            16px;
    overflow:           auto}

.closeIcon {
    position:           absolute;
    color:              #AAA;
    top:                0;
    right:              0;
    z-index:            10;
    padding-top:        0px;
    padding-right:      8px;
    font-size:          28px;
    font-weight:        bold}

.closeIcon:hover,
.closeIcon:focus {
    color:              red;
    text-decoration:    none;
    cursor:             pointer}

.resultMsg {
    position:           fixed;
    display:            none;
    top:                33%;
    z-index:            99;
    left:               50%;
    transform:          translate(-50%, 0);
    padding:            16px;
    text-align:         left;
    max-width:          30em;
    opacity:            0;
    background-color:   #FFC;
    color:              red;
    border-radius:      16px;
    border:             2px solid red;
    box-shadow:         12px 12px 12px gray}
.fadeMsg {
    animation-name:     fadeAway;
    animation-duration: 8s;
    animation-timing-function: linear;
    animation-fill-mode:forwards}
@keyframes fadeAway {
    from {
        opacity:        1}
    85% {
        opacity:        1}
    to {
        opacity:        0}
    }

.helpContent {
    top:                10%;
    bottom:             10%;
    left:               50%;
    transform:          translate(-50%, 0);
    width:              80%;
    max-width:          640px;
    background-color:   white}
.helpBody {
    margin-top:         1em;
    width:              100%;
    height:             calc(100% - 1.5em);
    overflow:           scroll;
    border:             none}

.spinner {
    position:           absolute;
    z-index:            99;
    top:                50%;
    left:               50%;
    transform:          translate(-50%, -50%);
    box-shadow:         12px 12px 12px gray}