/* Site Wide CSS Document */

:root {
    --fonts-sans: 'Fira Sans', 'FiraGo', Cantarell, 'Open Sans', 'Noto Sans', Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, 'Helvetica Neue', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Verdana, Lucida, Geneva, Arial, sans-serif;
    --fonts-serif: serif;
    --fonts-mono: 'Julia Mono', 'Fira Mono', 'Ubuntu Mono', 'Liberation Mono', Consolas, monaco, 'Courier New', Courier, monospace;
    --fonts-code:  'Julia Mono', 'Fira Code', 'Fira Mono', 'Source Code Pro', 'JetBrains Mono', 'DejaVu Sans Mono', 'Ubuntu Mono', 'Liberation Mono', Consolas, monaco, 'Courier New', Courier, monospace;
    --fonts-header: "Fira Sans", "FiraGo", Cantarell, 'Open Sans', 'Noto Sans', Roboto, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Oxygen, Ubuntu, Optima, 'Helvetica Neue', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans', Verdana, Lucida, Geneva, Arial, sans-serif;    --bg-color: #fff;       /* default background color */
    --bg-color-2: #fefbcc;  /* inset background color orig - #fbffb6*/
    --text: #000;           /* Standard text color */
    --link: #005dfd;        /* Link color */
    --visited: #5700fd;     /* Visited Link color */
    --active: #f81713;      /* Active Link color */
    --base-font-size: 16px;
    --mega-size: 5em;       /* Drop Cap */
    --title: 2em;           /* h1 */
    --section: 1.8em;       /* h2 */
    --heading: 1.5em;       /* h3 */
    --subheading: 1.3em;    /* h4 */
    --bold: 1.1em;          /* h5, h6 */
    --standard: 1em;        /* Standard text size */
    --standard-line-ht: 1.5em;
    --small: 0.75em;        /* Small text size */
    --border-radius: 10px;  /* Standard Border radii */
    --border-radius-sm: 5px;
    --blue-1: #c8dcff;      /* header blue */
    --blue-2: #edf3fe;      /* nav blue */
    --blue-3: #94caef;      /* Text selection color */
    --grey-1: #e8e8e8;      /* background grey */
    --grey-2: #d0cfd0;      /* horizontal rule grey*/
    --grey-3: #9d9b9d;      /* footer HR grey*/
    --grey-4: #827f81;      /* button hover grey*/
    --grey-5: #212529;
    --red-1: #fcc;          /* Light red - del tag */
    --green-1: #cfc;        /* Light green - ins tag */
    --green-2: #d4f3d6;
    --green-3: #a8e6a9;
    --green-4: #75d979;
    --green-5: #38cc41;
    --green-6: #00c100;
    --green-7: #00a100;
    --highlight: #fffa9a;   /* Light yellow  orig - #fbffb6*/
    --bright-highlight: #ffff00; /* Brighter yellow orig - #f7fe37*/
    --yellow-1: #fefbcc;
    --yellow-2: #fffa9a;
    --yellow-3: #fffa66;
    --yellow-4: #fff732;
    --yellow-5: #fff500;
    --k-00: #f0f0f0;
    --k-05: #e8e8e8;
    --k-10: #d0cfd0;
    --k-20: #b8b6b7;
    --k-30: #9d9b9d;
    --k-40: #827f81;
    --k-50: #6c696b;
    --k-60: #555254;
    --k-70: #3a393a;
    --k-80: #1d1d1d;
}

@media screen and (min-width: 0px) {
    :root {
        --gutter: 0.25em;
    }
    .bigbutton, .bigbutton:visited {
        margin: var(--gutter);
        padding: var(--gutter);
        font-size: 1em;
    }

}

@media screen and (max-width: 576px) {
    :root {
        --gutter: 0.5em;
    }
    ol, ul { margin: 0 1em 1em 1em; }
    ol ol, ul ul { margin: 0 1em;}
    li p { margin: 0 1em 1em 1em;}
    div.infobox, div.alertbox { grid-template-columns: 32px auto; }
    .priorityHigh {}
    .priorityMedium { display: none; }
    .priorityLow { display: none; }
}

@media screen and (min-width: 576px) {
    :root {
        --gutter: 1em;
    }
    ol, ul { margin: 0 2em 1em 2em; }
    ol ol, ul ul { margin: 0 2em;}
    li p { margin: 0 2em 1em 2em ;}
    .bigbutton, .bigbutton:visited {
        margin: var(--gutter);
        padding: var(--gutter);
        font-size: 1.25em;
    }
    div.infobox, div.alertbox { grid-template-columns: 64px auto; }
}

@media screen and (max-width: 768px) and (min-width: 576px) {
    .priorityHigh {}
    .priorityMedium {}
    .priorityLow { display: none; }
}

@media  screen and (min-width: 768px) {
    :root {
        --gutter: 1em;
    }
    blockquote.floatright, q.floatright, q.floatleft, aside, table.floatright {
        min-width: 25%;
        width: auto;
    }
    .bigbutton, .bigbutton:visited {
        margin: var(--gutter);
        padding: var(--gutter);
        font-size: 2em;
    }
    .priorityHigh {}
    .priorityMedium {}
    .priorityLow {}
}

@media screen and (min-width: 992px) {
    :root {
        --gutter: 5em;
    }
    .bigbutton, .bigbutton:visited {
        margin: 1em;
        padding: 1em;
        font-size: 2em;
    }
}

@media screen and (min-width: 1200px) {
    :root {
        --gutter: 7em;
    }
    blockquote.floatright, q.floatright, q.floatleft, aside, table.floatright {
        min-width: 40%;
        width: auto;
    }
}


@media only screen and (max-width: 767px) {
    blockquote.floatright, q.floatright, q.floatleft, aside.floatright, aside.floatleft, #toc, table.floatright {
        float: none ;
        display: block;
        margin: 1em;
        width: auto;
    }
}

/*
 * @media (prefers-color-scheme: dark) {
 *    :root {
 *    }
 * }
 */

/* Remove spacing defaults */
* { margin: 0; padding: 0; }

/* Set background color for selected text */
::selection {
    background: var(--blue-3);
    color: var(--text);
}

/*  Set container defaults  */
html {
    color: var(--text);
    background-color: var(--grey-1);
    background-image: url("/img/pattern.gif");
    background-repeat: repeat;
    background-attachment: fixed;
    margin: 0em;
    padding: 0em;
}
body {
    font-size: var(--base-font-size);
    color: var(--text);
    background-color: var(--bg-color);
    margin: 0 auto;
    padding: 0;
    max-width: 75rem;
    border: 1px solid var(--grey-2);
    overflow-x: hidden;
}
header {
    color: var(--text);
    background-color: var(--blue-1);
    margin: 0;
    padding: 1em var(--gutter);
}
#slogan {
    color: var(--text);
    background-color: var(--blue-1);
    font: bold var(--subheading)/1 var(--fonts-sans);
    text-align: left;
    margin: 0;
    padding: 0;
    display: block;
}
nav {
    color: var(--text);
    background-color: var(--blue-2);
    font: bold var(--standard) var(--fonts-sans);
    line-height: 1;
    text-align: center;
    margin: 0;
    padding: 1em var(--gutter);
    border-top: 1px solid var(--grey-2);
    border-bottom: 1px solid var(--grey-2);
}
main {
    color: var(--text);
    background-color: var(--bg-color);
    font-family: var(--fonts-sans);
    margin: 0 0 1em 0;
    padding: 1em var(--gutter) 4em var(--gutter);
    width: auto;
    background-image: url("/img/compy.png");
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: bottom;
    min-height: 20em;
}
footer {
    font: 1em var(--fonts-sans);
    line-height: 1;
    color: var(--text);
    background: var(--blue-2);
    border-top: 1px solid var(--grey-2);
    margin: 0;
    padding: 1em var(--gutter) 0 var(--gutter);
    clear: both;
}
footer div#\#links {
    margin: 0 0 1em 0;
    padding: 0;
    text-align: center;
}
footer *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

/* Headers */
hgroup { clear: both;}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--fonts-header);
    line-height: 1em;
    font-weight: bold;
    padding: 0;
    display: block;
}
h1  {
    font-size: var(--title);
    text-align: center;
    margin: 1em 0;
}
h2, h3, h4, h5, h6 {    margin: 2em 0 .25em 0;}
h2 {
    font-size: var(--section);
    border-bottom: 1px solid var(--grey-2);
}
h3, #toc h1 { font-size: var(--heading);}
h4, #toc h2 { font-size: var(--subheading);}
h5, h6, #toc h3 { font-size: var(--bold);}

/*  Block Text Styles */
p, ul, ol {
    font: var(--standard)/var(--standard-line-ht) var(--fonts-sans);
    margin-bottom: 1em;
}
code {
    font: normal var(--standard)/var(--standard-line-ht) var(--fonts-code);
    overflow-x: auto;
}
pre, .mono { font:  normal var(--standard)/var(--standard-line-ht) var(--fonts-mono);}
pre, code {
    color: var(--text);
    background: var(--blue-2);
    margin: 0;
    padding: 0;
}
pre {
    margin: 1em 0;
    padding: 1em;
    overflow-x: auto;
    border: 1px solid var(--grey-3);
}

div.code_container {
    margin: 1em 0;
    padding: 0;
    border: 1px solid var(--grey-3);
    counter-reset: line-counter;
}

div.code_container {
    color: var(--text);
    background: var(--blue-1);
    font: bold var(--standard)/var(--standard-line-ht) var(--fonts-sans);
/*    margin: 1em 0;
    padding: 0;
    display: block; */
    border: 1px solid var(--grey-3);
    display: flow-root;
    overflow-x: auto;
}

div.code_container > code {
    display: flex;
}
div.code_container > code::before {
    font:  bold var(--standard)/var(--standard-line-ht) var(--fonts-code);
    margin: 0 .5em 0 0 ;
    padding: 0 .25em 0 0;
    color: var(--text);
    background: var(--blue-1);
    counter-increment: line-counter;
    content: counter(line-counter) ".";
    min-width: 4em;
    text-align: right;
    border-right: 1px solid var(--grey-3);
}
div.code_container > code:hover, div.code_container > code:hover::before, div.code_container > code.highlight:hover::before, div.code_container > code.highlight:hover:nth-child(odd), div.code_container > code.highlight:hover:nth-child(even), div.code_container > code:hover:nth-child(even), div.code_container > code:hover:nth-child(odd) {
    color: var(--text);
    background-color: var(--yellow-2);
}

div.code_container > code:focus, div.code_container > code:focus::before, div.code_container > code.highlight:focus::before, div.code_container > code:focus:nth-child(even), div.code_container > code:focus:nth-child(odd), div.code_container > code.highlight:focus:nth-child(even), div.code_container > code.highlight:focus:nth-child(odd) {
    color: var(--text);
    background-color: var(--yellow-3);
}

div.code_container > code:nth-child(even)  { color: var(--text); background-color: var(--k-00); }
div.code_container > code:nth-child(odd)   { color: var(--text); background-color: var(--k-05); }

div.code_container>span {
    margin: 0;
    padding: 1em;
    display: block;
    border-bottom: 1px solid var(--grey-3);
}
code.highlight, div.code_container > code.highlight:nth-child(even), div.code_container > code.highlight:nth-child(odd) { color:var(--text); background: var(--yellow-1); }
div.code_container > code.highlight::before { color: var(--text); background: var(--yellow-1);}



/* Inline text styles */
cite, dfn, em, i, var { font-style: italic; }
b, strong { font-weight: bold; }
q { border: none; }
mark, .highlight    { color:var(--text); background: var(--bright-highlight);}
abbr {
    cursor: help;
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px dotted var(--grey-3);
    position: relative;
    display: inline-block;
}
kbd {
    font: var(--standard)/1em var(--fonts-mono);
    background: #fff;
    border: 1px solid var(--grey-3);
    border-bottom: 3px solid var(--grey-3);
    border-radius: var(--border-radius-sm);
    padding: .25em .5em;
    display: inline-block;
}
small {
    font: var(--small) var(--fonts-sans);
    color: var(--text);
    background: var(--bg-color);
}

/* Image border */
.border {
    border: 1px solid #000;
    margin: 0;
    padding: 0;
}
.border:target, .border:focus, .border:active  {
    outline: .25em solid var(--blue-1);
}

/* Lists */
ol, ul {
/*    margin: 0 2em 1em 2em; */
    padding: 0;
}
#toc>ol, #toc>ul,
aside.floatright>ul, aside.floatleft>ul,
aside.floatright>ol, aside.floatleft>ol {
    margin: 0 .25em;
    padding: 0;
}
ol ol, ul ul{
/*  margin: 0 2em; */
    padding: 0;
}
li  {
    margin: .25em 0;
    padding: 0;
}
li p {
/*  margin: 0 2em 1em 2em; */
    padding: 0;
}
ol      { list-style: decimal inside;}
ol ol   { list-style: lower-alpha inside;}
ul      { list-style: square inside;}
ul ul   { list-style: circle inside;}
ol.nobullet, ul.nobullet { list-style: none inside;}
aside ol, aside ul {
    margin: 0 1em;
    padding: 0;
}

/* Blockquotes, tables, inset, article */
article {
    border: 1px solid var(--grey-3);
    margin: 2em 0;
    padding: 1em;
}
article>a { font-size: var(--bold);}
/* Insets are created using aside tags. Insets are expected to float, boxes do not. */
aside, #toc {
    color: var(--text);
    background: var(--blue-2);
    font: var(--standard)/var(--standard-line-ht) var(--fonts-sans);
/*  margin: 1em; */
    padding: 1em;
    border: 1px solid var(--grey-3);
    border-radius: var(--border-radius);
/*  width: 40%; */
    clear: both;
}
.box, div.infobox, div.alertbox {
    border: 1px solid var(--grey-3);
    margin: 1em 0;
    padding: 1em;
    clear: both;
}
.box, div.infobox {
    color: var(--text);
    background: var(--grey-1);
}
div.infobox, div.alertbox {
    display: grid;
/*  grid-template-columns: 64px auto; */
    gap: 1em;
}
div.alertbox {
    color: var(--text);
    background: var(--red-1);
    border: 1px solid var(--grey-3);
}
div.infobox div, div.alertbox div { font: var(--standard)/var(--standard-line-ht) var(--fonts-sans);}
blockquote {
    font: var(--standard)/var(--standard-line-ht) var(--fonts-sans);
    color: var(--text);
    background: var(--bg-color-2);
    border: 1px solid var(--grey-3);
    margin: 1em 0;
    padding: 1em;
    border-radius: var(--border-radius);
    clear: both;
}
blockquote *:last-child, aside *:last-child, article *:last-child, .box *:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}
blockquote h3, blockquote h4, blockquote h5, blockquote h6,
aside h3, aside h4, aside h5, aside h6,
.box h3, .box h4, .box h5, .box h6,
#toc h1, #toc h2, #toc h3, #toc h4 {
    margin: 0 0 1em 0;
    padding: 0;
}

/*  Tables, figures figcaption  */
caption, figcaption {
    color: var(--text);
    background: var(--bgcolor);
    font: bold var(--standard) var(--fonts-header);
    text-align: center;
    padding: 1em;
}
figure > figcaption { padding: 1em 1em 0 1em;}
table, figure {
    color: var(--text);
    margin: 1em 0;
    overflow-x: auto; /* scroll  */
    white-space: normal;
}
figure {
    background: var(--bg-color);
    border: 1px solid var(--grey-3);
    padding: 1em;
}
table {
    /* border-collapse: collapse;  using separate as a work around for old firefox bug */
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--bg-color);
    padding: 0;
    width: 100%;
}
thead {
    position: sticky;
    top: 0;
    background-color: var(--blue-1);
}
tfoot {
    color: var(--text);
    background: var(--grey-3);
}
td, th {
    color: var(--text);
    padding: 1em;
    vertical-align: top;
}
th {
    font: bold var(--standard)/var(--standard-line-ht) var(--fonts-sans);
    text-align: center;
    background-color: var(--blue-1);
    border-top: 1px solid var(--grey-3);
    border-bottom: 1px solid var(--grey-3);
    /*border-left: 1px solid var(--grey-3);*/
    border-right: 1px solid var(--grey-3);
}
/*th:last-child { border-right: 1px solid var(--grey-3); }*/
th:first-child { border-left: 1px solid var(--grey-3); }
td {
    font: var(--standard)/var(--standard-line-ht) var(--fonts-sans);
    text-align: left;
    border-bottom: 1px solid var(--grey-3);
    /*border-left: 1px solid var(--grey-3);*/
    border-right: 1px solid var(--grey-3);
}
/*tr td:last-child {    border-right: 1px solid var(--grey-3); }*/
tr td:first-child {    border-left: 1px solid var(--grey-3); }
tr:nth-child(even)  { color: var(--text); background-color: var(--blue-2); }
tr:nth-child(odd)   { color: var(--text); background-color: var(--bg-color); }
tr:hover            { color: var(--text); background-color: var(--highlight); }
td:hover            { color: var(--text); background-color: var(--bright-highlight); }
tr:focus:nth-child(even), tr:focus:nth-child(odd) {
    color: var(--text);
    background-color: var(--yellow-3);
}
tfoot td {
    color: var(--text);
    background: var(--grey-3);
    font: bold var(--standard) var(--fonts-sans);
    text-align: left;
    padding: 1em;
    border: 1px solid var(--grey-3);
}
tfoot tr:hover  { color: var(--text); background-color: var(--grey-3); }
tfoot td:hover  { color: var(--text); background-color: var(--grey-3); }

/* Sub and Superscript handling */
sub, sup    { font-size: var(--small);}
sub         { vertical-align: sub;}
sup         { vertical-align: super;}

/*  Text Transforms & Alignment */
.smallcaps      { font-variant: small-caps;}
.uppercase      { text-transform: uppercase;}
.lowercase      { text-transform: lowercase;}
.capitalize     { text-transform: capitalize;}
.nowrap         { white-space: nowrap;}
.center         { text-align: center;}
.left           { text-align: left;}
.right          { text-align: right;}
.justify        { text-align: justify;}
.serif          { font-family: var(--fonts-serif);}
.sans           { font-family: var(--fonts-sans);}
.mono           { font-family: var(--fonts-mono);}
.code           { font-family: var(--fonts-code);}
.codesyntaxhighlighter code { font-family: 'FontWithASyntaxHighlighterLightOwl';}
.firstline:first-line       { font-size: 150%; line-height: 175%; font-weight: normal;}
.dropcap:first-letter {
    float: left;
    font-weight: bold ;
    font-size: var(--mega-size);
    color: var(--text);
    background: transparent;
    margin: .1em;
    padding: 0;
}
.serifdc:first-letter   { font-family: var(--fonts-serif);}
.sansdc:first-letter    { font-family: var(--fonts-sans);}

/*  Editing Functions   */

s, del, *[edit="deleted"] { text-decoration: line-through; }
del, *[edit="deleted"] { color: var(--text); background: var(--red-1); }
u, ins, *[edit="inserted"] { text-decoration: underline; }
ins, *[edit="inserted"] { color: var(--text); background: var(--green-1); }
*[edit="changed"]       { font-style: italic; color: var(--text); background: var(--highlight); }
*[edit="moved"]         { font-style: italic; color: var(--text); background: var(--blue-1); }

/* Float and Display Functions */
.clear      { clear: both;}
.nodisplay  { display: none;}
.floatleft  { float: left; margin: 1em 1em 1em 0;}
.floatright { float: right; margin: 1em 0 1em 1em;}
img.floatleft, img.floatright { margin: 1em; padding: 0;}

/* Special stylized quotes */
q.floatright, q.floatleft {
    font: var(--standard)/var(--standard-line-ht);
    text-align: justify;
    margin: 2em;
    padding: 1em 3em;
    position: relative;
}
q.floatright::before, q.floatleft::before {
    content: open-quote;
    top: 0;
    left: 0;
}
q.floatright::after, q.floatleft::after {
    content: close-quote;
    top: 0;
    right: 0;
}
q.floatright::before, q.floatright::after,
q.floatleft::before, q.floatleft::after {
    font: var(--mega-size)/1em var(--fonts-serif);
    display: block;
    position: absolute;
    margin: 0;
    padding: 0;
}

/*  Misc.   */
main hr {
    height: 48px;
    margin: 0 0 2em 0;
    padding: 0;
    background-image: url("/img/compy.png");
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    border-bottom: 1px solid var(--grey-2);
    clear: both;
}
footer hr, aside hr, blockquote hr, .box hr {
    border: none;
    border-bottom: 1px solid var(--grey-3);
    padding: 0;
    margin: 0.5em 0 0.5em 0;
    height: 0;
    width: auto;
}

/*  Link handling   */
a { text-decoration: none;
    font-weight: bold;
    position: inherit;
/*    display: inline-block;*/
}
li a { display: inline; }
a:link {
    text-decoration: none;
    color: var(--link);
    background: transparent;
}
a[href^="https://"], a[href^="http://"] {
    color: var(--link);
    background: transparent url(/img/external.svg) no-repeat center right;
    padding-right: 15px;
    background-attachment: scroll;
}
/*
tr:nth-child(even) a:link { color: var(--link); background-color: var(--blue-2); }
tr:nth-child(odd)  a:link { color: var(--link); background-color: var(--bg-color); }
*/
/* Hover */
a:hover { text-decoration: underline;}
td:hover a:link {color: var(--link); background-color: transparent;}
tr:hover a:link {color: var(--link); background-color: transparent;}

/*  Visited  */
a:visited {
    color: var(--visited);
    background: transparent;
}

/* Active */
a:active {
    text-decoration: underline;
    color: var(--active);
    background: transparent;
}
td:hover a:active {color: var(--active); background-color: transparent;}
a:active[href^="https://"], a:active[href^="http://"] {
    color: var(--active);
    background: transparent url(/img/external.svg) no-repeat center right;
    padding-right: 15px;
    background-attachment: scroll;
}

/* Target Selectors */

a:focus { outline: .25em solid var(--blue-3); background: var(--blue-1);}
td:hover a:focus {color: var(--active); background-color: var(--blue-1);}
a:focus[href^="https://"], a:focus[href^="http://"] {
    color: var(--active);
    background: var(--blue-1) url(/img/external.svg) no-repeat center right;
    padding-right: 15px;
    background-attachment: scroll;
}
a:target, h2:target, h3:target, h4:target, h5:target, h6:target {
    color: var(--text);
    background: var(--blue-2);
    outline: .25em solid var(--blue-2);
    scroll-margin-top: 2em;
}
section:target{
    background: var(--bg-color);
    outline: .25em solid var(--blue-3);
    scroll-margin-top: 2em;
    animation: highlight_fade 2s;
}
@keyframes highlight_fade {
    0%      { background: var(--yellow-1);}
    100%    { background: var(--bg-color);}
}
blockquote:target, summary:target, summary:focus, details:target, figure:target, figure:focus { outline: .25em solid var(--blue-1); scroll-margin-top: 2em;}
aside:target, .box:target {
    outline: .25em solid var(--bright-highlight);
    scroll-margin-top: 2em;
}

/* Tool tips */
/*, a[data-title]:hover::after */
abbr:hover::after {
    cursor: help;
    /*    content: attr(title);
     *    color: var(--text);
     *    background: var(--bright-highlight);
     *    font: bold var(--standard) var(--fonts-sans);
     *    margin: 0px;
     *    padding: 1em .5em 0 .5em;
     *    position: absolute;
     *    top: 1.5em;
     *    left: 0;
     *    border: 1px solid var(--grey-3);
     *    width: auto;
     *    min-width: 10px;
     *    height: auto;
     *    min-height: 1em;
     *    z-index: 1;
     *    overflow: scroll;
     *    display: inline-block;
     */
}

/* Display Accesskey Information */
/*
 * nav a:after {
 *   content: " [" attr(accesskey) "] ";
 *   color:#000;
 * }
 */

/* Form controls */
details {
    background: var(--blue-2);
    border: 1px solid var(--grey-3);
    border-radius: var(--border-radius);
    padding: 1em;
    margin: 0;
}
summary {
    color: var(--link);
    background: transparent url(/img/disclosure-closed.svg) no-repeat center left;
    background-attachment: scroll;
    padding-left: 18px;
    cursor: pointer;
    font-weight: bold;
    display:inline;
}
summary:hover { text-decoration: underline;}
details > summary:active, details[open] > summary:active {
    color: var(--active);
    background: transparent url(/img/disclosure-active.svg) no-repeat center left;
    background-attachment: scroll;
    padding-left: 18px;
    text-decoration: underline;
}
details[open] > summary {
    color: var(--link);
    background: transparent url(/img/disclosure-open.svg) no-repeat center left;
    background-attachment: scroll;
    padding-left: 18px;
    margin: 0;
}
details[open]>*:nth-child(2) { margin-top: 1em; }
details[open]>*:last-child { margin-bottom: 0; }
form p  { margin: 1em 0;}
fieldset {
    color: var(--text);
    background: var(--bg-color);
    margin: 0;
    padding: 1em;
    border: 1px solid var(--grey-3);
    border-radius: var(--border-radius);
}
legend {
    color: var(--text);
    background: var(--bg-color);
    margin: 0;
    padding: 1em;
}
textarea { max-width: 100%; }
textarea, select, input {
    color: var(--text);
    background: var(--bg-color);
    padding: .5em 1em;
    margin: .5em 1em;
    border: 1px solid var(--grey-3);
    border-radius: var(--border-radius-sm);
    box-shadow: none;
    box-sizing: border-box;
}
textarea:focus, select:focus, input[type]:focus {
    color: var(--text);
    background: var(--blue-2);
    outline: .25em solid var(--blue-1);
}
input[required] {
    color: var(--text);
    background: var(--bg-color-2);
}
input[required]:focus, input[required]:target {
    color: var(--text);
    background: var(--bright-highlight);
    outline: .25em solid var(--blue-1);
}
a button, button,
input[type="submit"], input[type="reset"], input[type="button"] {
    font-size: 1em;
    font-weight: bold;
    display: inline-block;
    padding: .5em 1em;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    color: var(--text);
    background: var(--blue-2);
    border: 2px solid var(--grey-3);
    border-radius: var(--border-radius-sm);
    box-sizing: border-box;
    cursor: pointer;
}
input[disabled], input[type="submit"][disabled]:hover, input[type="reset"][disabled]:hover, input[type="button"][disabled]:hover {
    cursor: default;
    color: var(--text);
    background: var(--red-1);
    border: 2px solid var(--grey-3);
    opacity: .5;
    cursor: not-allowed;
}
input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover {
    color: var(--text);
    background: var(--blue-1);
    border: 2px solid var(--grey-4);
}
input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active,
input[type="submit"]:focus, input[type="reset"]:focus, input[type="button"]:focus {
    color: var(--text);
    background: var(--blue-3);
    border: 2px solid var(--grey-4);
    outline: none;
}

.bigbutton, .bigbutton:visited {
    text-align: center;
    font-weight: bold;
    text-decoration: none;
    white-space: nowrap;
    color: var(--grey-5) !important;
    border: 1px solid var(--green-7);
    background: var(--green-3) !important;
    border-radius: var(--border-radius);
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
}

.bigbutton:hover, .bigbutton:target, .bigbutton:focus {
    text-decoration: none;
    color: var(--text)  !important;
    border: 1px solid var(--green-7);
    background: var(--green-4) !important;
    outline: none;
    display: inline-block;
}
/*.bigbutton:target, .bigbutton:focus {   outline: .25em solid var(--blue-1); }*/
.bigbutton:active {
    text-decoration: none;
    color: var(--grey-1)  !important;
    border: 1px solid var(--green-7);
    background: var(--green-6) !important;
    outline: none;
    display: inline-block;
}