/*<!--*/

:root
   {
    /* Defining color variables for a set of progressive enhancements that will change them */

    /* Pantone® */
    --PMS288C:  #002D72;
    --PMS640C:  #0082BA;
    --PMS109C:  #FFD100;
    --PMS130C:  #F2A900;
    --PMS255C:  #72246C;
    --PMS7622C: #92272C;
    --PMS553C:  #284734;
    --PMS255C:  #7224C6;
    --PMS161C:  #603D20;
    --PMS433C:  #1D252D;
    --PMSCG11C: #53565A;
    --PMS131C:  #BB133E;
    --PMS347C:  #009A44;
    --PMS433C:  #1D252D;
    --PMS193C:  #BB133E;
    --PMSCG6C:  #A7A8AA; /* Added during 4618 testbench */
    --subCG11C: #383D43; /* An average of CG11C and 433C */
    
    /* Duplicate these colors as fallbacks for browsers that undestand neither              */
    /* variables nor the likes of prefers-color-scheme                                      */

    /* Don't bother adding to most prefixed properties as those are for browsers            */
    /* that predate these capabilities */
    
    /* Legacy browsers can't do any of this and will be static                              */
    /* with the hardcoded fallback values and normal light mode 
    
    /* Default for header, primary, link, and visited link colors set to 288C */
    --header-color: #002D72;
    --primary-color: #002D72;
    --link-color: #002D72;
    --visited-link-color: #002D72;
    --content-border-color: #002D72;

    /* Default for secondary and hover link colors set to 640C */
    --secondary-color: #0082BA;
    --hover-link-color: #0082BA;

    /* Default for text color set to black */
    --text-color: #000000;

    /* Default for active link colors set to 7622C */
    --active-link-color: #93272C;

    /* Default for ...button? color set to 109C */
    --button-color: #FFD100;

    /* Default for background and ...button text? colors set to white */
    --button-text-color: #FFFFFF;
    --background-color: #FFFFFF;
    --background-color-rgb: 255, 255, 255;
    --textcontainment-opacity: 0.8333;

    /* Lines in tables; default is Cool Gray 6C */
    --table-border: #A7A8AA;
    --border-color: #A7A8AA;

    /* Link text shadow color defaultn is Cool Gray 11C */
    --link-shadow-color: #53565A;    

    /* Button shadows */
    --box-shadow-color: 0, 0, 0; 
    --box-shadow-opacity: 0.5; 
    --box-shadow-color-hex: #000000;
    --mmbutton-shadow-rgb: 0, 0, 0;  /* added during 4618 testbench */


    --table-background: #FFFFFF;  /* added during 4618 testbench */
    --bigheading: #002D72;  /* added during 4618 testbench */
    --langdon-brook: #92272C;  /* added during 4618 testbench */
    --button-border: #000000;  /* added during 4618 testbench */
    --button-text: var(--PMS288C);  /* added during 4618 testbench */
    --button-text-hover: var(--PMS640C);  /* added during 4618 testbench */
    --button-text-active: var(--PMS640C);  /* added during 4618 testbench */
    
    /* Momentarily re-defining things; need to integrate this into the Langdon Brook list */
    --primary-color: #000000;  /* Assuming black is the primary color */
    --background-color: #FFFFFF;
    --link-color: #002D72;
    --visited-link-color: #002D72;
    --hover-link-color: #002D72;
    --active-link-color: #93272C;
    --header-color: #000000;
    --text-color: #000000;
    --button-color: #FFFFFF;
    --button-text-color: #000000;
    --table-background: #FFFFFF;
    --table-border: #A0A0A0;
    --content-border-color: #002D72;
    --box-shadow-color: #000000;
    }


BODY
   { 
    background-color: #FFFFFF;
    background-color: var(--background-color);
    color: #000000;
    color: var(--text-color);
    font-size: 110%;
    font-family: "Roboto 2014", Roboto, Arial, "Helvetica Neue", Helvetica, "Nimbus Sans L", "Nimbus Sans", Nimbus, "TeXGyre Heroes", "Free Sans", Freesans, "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", "clear sans", Lato, "Fira Sans",  "Source Sans Pro", "Source Sans", Geneva, sans-serif; 
    font-variant-numeric: slashed-zero;
    /* font-family: "Roboto 2014", comicsans, "comic sans", "MS Comic Sans", mscomicsans, "Bradley Hand", "Brush Script MT", cursive, fantasy */
    
    min-height: 100%;
    max-width: 100%;
    max-width: 100vw;
    min-height: 100vh;
    }

.buildname 
   {
    text-align: center;
    font-family: "Roboto Mono", Consolas, Inconsolata, Monaco, monospace, monospace;
    }

.shorttable
   {
    margin: 0.5em;
    }

.heading,
.title,
H2
   {
    font-family: texgyreadventor-bold, "TeX Gyre Adventor", TeXGyreAdventor, "Avant Garde", "Avant Gard", AvantGard, AvantGarde, "ITC Avant Garde", "Century Gothic", CenturyGothic, Futura, Futura-Bold, "Futura Bold", TwCen, "Twentieth Century", "Apple Gothic", AppleGothic, "URW Gothic L", "Futura PT",  "Heiti SC", "Heiti TC", "Didact Gothic", Questrial, Muli, Avenir, Sofia,  "Gill Sans", GillSans, Kabel, OptiKabel, "Open Sans", "Noto Sans", NotoSans, Noto, "DejaVu Sans", DejaVuSans, "Bitstream Vera", BitstreamVera, Vera, "DejaVu LGC Sans", Geneva, sans-serif;
    
    /* font-family: 'Libertygramma_web', "Libertygramma-ACExtBold", "Libertygramma AC", EurostileExt-Bla, EurostileExtBla, MicrogrammaDBol, MicrogrammaDBolExt, MicrogrammaBol, Eurostile-Bla,  EurostileBla, Eurostile-Black, Microgramma, Michroma, Idlewild, Eurostile, Acens, Federation, "Roboto", Helvetica-Black-SemiBold, HelveticaBlackSemiBold, "Helvetica Black Semi Bold", "Arial Black", ArialBlack, Arial-Black, Impact, "Nimbus Sans L", Helvetica, "TeXGyreHeros", "TeX Gyre Heros", "League Gothic", Haettenschweiler, Charcoal, CenturyGothic, "Century Gothic", Fantasy, Sans-Serif; */
    
    /* font-family: texgyreadventor-bold, comicsans, "comic sans", "MS Comic Sans", mscomicsans, "Bradley Hand", "Brush Script MT", cursive, fantasy; */
    
    /* font-family: texgyreadventor-bold, amadeus-web, amadeus, comicsans, "comic sans", "MS Comic Sans", mscomicsans, "Bradley Hand", "Brush Script MT", cursive, fantasy; */
    
    font-weight: bold;
    font-weight: 900;
    font-style: normal; 
    font-variant: small-caps;
    text-transform: uppercase;
    color: #000000;
    color: var(--header-color);
    font-stretch: wider;
    font-stretch: expanded;
    font-stretch: 800;
    margin-bottom: 1px;
    margin-bottom: 0.03125rem;
    }

.mmbutton
   {
    /* display: block; */
    float: left
    }

.mmbutton A
   {
    display: inline-block;
    -moz-box-shadow:
        0.3125em 0.3125em 0.3125em rgba(000,000,000,0.5);
    -webkit-box-shadow:
        0.3125em 0.3125em 0.3125em rgba(000,000,000,0.5);
    box-shadow:
        0.3125em 0.3125em 0.3125em rgba(000,000,000,0.5);
    }

.mmbutton A IMG
   {
    display: block
    }

.mmbutton A:hover
   {
    -moz-box-shadow:
        0.15625em 0.15625em 0.15625em rgba(000,000,000,0.5);
    -webkit-box-shadow:
        0.15625em 0.15625em 0.15625em rgba(000,000,000,0.5);
    box-shadow:
        0.15625em 0.15625em 0.15625em rgba(000,000,000,0.5);
    }

.mmbutton A:active
   {
    -moz-box-shadow: none;
    /* 0.15625em 0.15625em 0 0.25em #F8E08E; */
    -webkit-box-shadow: none;
    box-shadow: none;
    }

.mmitemtxt
   {
    padding-left: 1em;
    float:        left; 
    width:        30em
    }



A:link
   {
    color: #002D72;
    color: var(--link-color);
    text-decoration: none
    }

A:visited
   {
    color: #002D72;
    color: var(--link-color);
    text-decoration: none
    }

A:hover
   {
    color: #002D72;
    text-decoration: underline;
    }
    
A:active
   {
    color: #93272C;
    color: var(--active-link-color);
    text-decoration: none;
    }


.linkbutton, .endbtn, .itembtn
   {
    padding: 0.5em;
    margin-right: 1em;
    text-shadow: 0 0 0.25em #53565A;
    max-width: 15em; /* was at 16em, then at 20em */ 
    display: block;
    font-size: 120%;
    
    /* Remove this border for CSS3 capable browsers */
    border: 1px solid  #002D72;
    
    background: #FFFFFF;
    background-image: -webkit-linear-gradient(to right, rgba(209,212,214,1) 0%,rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(192,194,199,1) 100%), linear-gradient(to bottom, rgba(209,212,214,1) 0%,rgba(255,255,255,1) 5%,rgba(245,245,245,1) 95%,rgba(192,194,199,1) 100%);
    background-image: -moz-linear-gradient(to right, rgba(209,212,214,1) 0%,rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(192,194,199,1) 100%), linear-gradient(to bottom, rgba(209,212,214,1) 0%,rgba(255,255,255,1) 5%,rgba(245,245,245,1) 95%,rgba(192,194,199,1) 100%);
    background-image: -ms-linear-gradient(to right, rgba(209,212,214,1) 0%,rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(192,194,199,1) 100%), linear-gradient(to bottom, rgba(209,212,214,1) 0%,rgba(255,255,255,1) 5%,rgba(245,245,245,1) 95%,rgba(192,194,199,1) 100%);
    background-image: -o-linear-gradient(to right, rgba(209,212,214,1) 0%,rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(192,194,199,1) 100%), linear-gradient(to bottom, rgba(209,212,214,1) 0%,rgba(255,255,255,1) 5%,rgba(245,245,245,1) 95%,rgba(192,194,199,1) 100%);
    background-image: linear-gradient(to right, rgba(209,212,214,1) 0%,rgba(255,255,255,0) 5%,rgba(255,255,255,0) 95%,rgba(192,194,199,1) 100%), linear-gradient(to bottom, rgba(209,212,214,1) 0%,rgba(255,255,255,1) 5%,rgba(245,245,245,1) 95%,rgba(192,194,199,1) 100%);
    
    -webkit-border-radius: 0.125em;
    -moz-border-radius: 0.125em;
    -ms-border-radius: 0.125em;
    -o-border-radius: 0.125em;
    border-radius: 0.125em;
    -webkit-box-shadow: 0.0625em 0.0625em 0.25em #000000;
    -moz-box-shadow: 0.0625em 0.0625em 0.25em #000000;
    -ms-box-shadow: 0.0625em 0.0625em 0.25em #000000;
    -o-box-shadow: 0.0625em 0.0625em 0.25em #000000; 
    box-shadow: 0.0625em 0.0625em 0.25em #000000;
    
    border: 1px solid #002D72;
    border: 1px solid var(--content-border-color);
    /*background: #FFFFFF;*/
    /*background: var(--button-color);*/
    color: #000000;
    color: var(--button-text-color);
    
    /* For IE 8 and 9 */
    -ms-filter: "progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=5)";
    /* For IE 5.5 - 7 */
    filter: progid:DXImageTransform.Microsoft.Glow(Color=#000000,Strength=5)
    }

.linkbutton:hover, .endbtn:hover, .itembtn:hover
   {
    color: #0082BA;
    color: var(--hover-link-color);
    text-decoration: none;
    }



.linkbutton:active, .endbtn:active, .itembtn:active
   {
    background: #FFFFFF;
    background-image: -webkit-linear-gradient(to right, rgba(201,204,205,1) 0%,rgba(245,245,245,0) 5%,rgba(245,245,245,0) 95%,rgba(184,186,191,1) 100%), linear-gradient(to bottom, rgba(201,204,205,1) 0%,rgba(245,245,245,1) 5%,rgba(245,245,245,1) 95%,rgba(184,186,191,1) 100%);
    background-image: -moz-linear-gradient(to right, rgba(201,204,205,1) 0%,rgba(245,245,245,0) 5%,rgba(245,245,245,0) 95%,rgba(184,186,191,1) 100%), linear-gradient(to bottom, rgba(201,204,205,1) 0%,rgba(245,245,245,1) 5%,rgba(245,245,245,1) 95%,rgba(184,186,191,1) 100%);
    background-image: -ms-linear-gradient(to right, rgba(201,204,205,1) 0%,rgba(245,245,245,0) 5%,rgba(245,245,245,0) 95%,rgba(184,186,191,1) 100%), linear-gradient(to bottom, rgba(201,204,205,1) 0%,rgba(245,245,245,1) 5%,rgba(245,245,245,1) 95%,rgba(184,186,191,1) 100%);
    background-image: -o-linear-gradient(to right, rgba(201,204,205,1) 0%,rgba(245,245,245,0) 5%,rgba(245,245,245,0) 95%,rgba(184,186,191,1) 100%), linear-gradient(to bottom, rgba(201,204,205,1) 0%,rgba(245,245,245,1) 5%,rgba(245,245,245,1) 95%,rgba(184,186,191,1) 100%);
    background-image: linear-gradient(to right, rgba(201,204,205,1) 0%,rgba(245,245,245,0) 5%,rgba(245,245,245,0) 95%,rgba(184,186,191,1) 100%), linear-gradient(to bottom, rgba(201,204,205,1) 0%,rgba(245,245,245,1) 5%,rgba(245,245,245,1) 95%,rgba(184,186,191,1) 100%);
    -webkit-box-shadow: 0.015625em 0.015625em 0.125em #000000;
    -moz-box-shadow: 0.015625em 0.015625em 0.125em #000000;
    -ms-box-shadow: 0.015625em 0.015625em 0.125em #000000;
    -o-box-shadow: 0.015625em 0.015625em 0.125em #000000;
    box-shadow: 0.015625em 0.015625em 0.125em #000000;
    }








.pgsample
   {
    display: block;
    -moz-box-shadow:
        0 0 0.15625em #00205B,
        0 0 0.3125em #FFB81C;
    -webkit-box-shadow:
        0 0 0.15625em #00205B,
        0 0 0.3125em #FFB81C;
    box-shadow:
        0 0 0.15625em #00205B,
        0 0 0.3125em #FFB81C;
    }
    
.btbox 
   {
    float: left; 
    margin: 0.5em
    }
    
.contentbox
   {
    -moz-border-radius:    1em;
    -khtml-border-radius:  1em; 
    -o-border-radius:      1em; 
    border-radius:         1em;
    -webkit-border-radius: 1em; 
    -webkit-box-shadow:    0.25em 0.25em 1em #000000; 
    -moz-box-shadow:       0.25em 0.25em 1em #000000; 
    box-shadow:            0.25em 0.25em 1em #000000;
    padding:   1em;
    color:     #000000;
    
    margin:    1.5em;
    max-width: 37em;
    
    /* Remove this border for CSS3 capable browsers */
    border: 1px solid  #002D72;
    border: 1px solid var(--content-border-color);
    
    background: #FFFFFF;
    background: var(--background-color);
    }

.nicetable,
.niceglossytable
   {
    background:#F7F7F7; 
    background: var(--table-background);
    border-collapse:collapse;
    margin:0.25em;
    }

.nicetable TR TD,
.niceglossytable TR TD
   {
    padding: 0.2em 0.8em 0.2em 0.8em;
    margin: 0;
    border-top: 1px #A0A0A0 solid;
    border-top: 1px var(--table-border) solid;
    border-bottom: 1px #A0A0A0 solid;
    border-bottom: 1px var(--table-border) solid;
    }

.niceglossytable
   {
    background:linear-gradient(to bottom, #FBEFC6 0%,#FFFFFF 10%, #FBEFC6  100%)
    }

.indent 
   { 
    margin-left: 5em; 
    }
    

/* start pasted in */
.nicetable
    {
     background:#FFFFFF; 
     border-collapse:collapse;
     margin:0.25em;
     }
     /*
 .nicetable TR TD
    {
     background: #FFFFFF; 
     border-top:1px #A0A0A0 solid; 
     border-bottom:1px #A0A0A0 solid; 
     padding: 0.2em 0.8em 0.2em 0.8em;
     margin: 0;
     }*/

.nicetable_leftcell
   {
    border-right: 1px #A0A0A0 solid; 
    font-weight: bold
    }

.nicetable_header
    {
     text-align: center; 
     font-size: larger;
     height: 2em;
     }
/* end pasted in */

.serif,
.serifbold
   {
    font-family: Schola, "Tex Gyre Schola", TexGyreSchola, Century, "Century Schoolbook", CenturySchoolbook, "New Century Schoolbook", "Century Schoolbook L", "EF Century Schoolbook", "EF Century", "ITC Garamond", "Garamond", Palatino, "Palatino Linotype", "Palatino LT STD", Palladio, "URW Palladio L", "Palatino Novo", serif;
    font-weight: normal;
    font-variant-numeric: slashed-zero;
    /* font-family: "Schola", comicsans, "comic sans", "MS Comic Sans", mscomicsans, "Bradley Hand", "Brush Script MT", cursive, fantasy */
    }

.serifbold
   {
    font-weight: bold;
    }

.monospace
   {
    font-family: "Roboto Mono 2014", "Roboto Mono", "DIN Mono", "PF DIN Mono", Inconsolata, Consolas, Monaco, "Osaka Unicode", "Nu Sans Mono", Crystal, ProFontWindows, BPMono, Terminus, "Anonymous Pro", "Share Tech Mono", Raize, "DejaVu Sans Mono", "Vera Sans Mono", "Bitstream Vera Sans Mono", "Vera Mono", "Andale Mono", Monofur, Liberation Mono, Proggy, monospace; 
    font-variant-numeric: slashed-zero;
    /* font-family: "Roboto Mono 2014", comicsans, "comic sans", "MS Comic Sans", mscomicsans, "Bradley Hand", "Brush Script MT", cursive, fantasy */
    }

.PMS288C
   {
    color: #002D72
    }

.PMS640C
   {
    color: #0082BA
    }

.PMS109C
   {
    color: #FFD100
    }

.PMS124C
   {
    color: #EAAA00
    }

.PMS255C
   {
    color: #72246C
    }


.articlenode, .contentbox, .basicpagenode, .deckitem
   {
    -moz-border-radius:    1em;
    -khtml-border-radius:  1em; 
    -o-border-radius:      1em; 
    border-radius:         1em;
    -webkit-border-radius: 1em; 
    -webkit-box-shadow:    0.25em 0.25em 1em #000000; 
    -moz-box-shadow:       0.25em 0.25em 1em #000000; 
    box-shadow:            0.25em 0.25em 1em #000000;
    padding:   1em;
    color:     #000000;
    
    margin:    1.5em;
    max-width: 30em;
    
    /* Remove this border for CSS3 capable browvsers */
    border: 1px solid  #002D72;
    
    background: #FFFFFF; /* Old browsers */
    }



.deckitem, .contentbox
   /* Remember to go back and remove a bunch of replaced by this markup if this idea is a go */
   {
    background: #FFFFFF;
    border: 0.4em solid #002D72;
    }
    
.deckitem
   {
    display: -moz-inline-stack;
    display: inline-block;
    height: 10em;
    width: 10em;  /********/
    max-width: 100%;
    margin: 0.125em;

    }

.deckitem IMG
   {
    height:10.5em;
    width:10.5em;
    }

.nicetable
    {
     background:#FFFFFF; 
     border-collapse:collapse;
     margin:0.25em;
     }
     
/* .nicetable TR TD
    {
     background: #FFFFFF; 
     border-top:1px #A0A0A0 solid; 
     border-bottom:1px #A0A0A0 solid; 
     padding: 0.2em 0.8em 0.2em 0.8em;
     margin: 0;
     }*/

.nicetable_leftcell
   {
    border-right: 1px #A0A0A0 solid; 
    font-weight: bold
    }

.nicetable_header
    {
     text-align: center; 
     font-size: larger;
     height: 2em;
     }

.nudgeright
   {
    margin-left: 18px;
    margin-left: 1.5rem;
    margin-top: 18px;
    margin-top: 1.5rem;
    max-width: 37em;
    
    }

.centerpage,
.section
   {
    display:         -webkit-box;
    display:         -webkit-flex;
    display:         -moz-box;
    display:         -ms-flexbox;
    display:         flex;
    -webkit-box-orient:  vertical;
    -webkit-box-direction:  normal;
    -webkit-flex-direction:  column;
       -moz-box-orient:  vertical;
       -moz-box-direction:  normal;
        -ms-flex-direction:  column;
            flex-direction:  column;
    -webkit-align-content: flex-start;
        -ms-flex-line-pack: start;
            align-content: flex-start;
    -webkit-box-align:     center;
    -webkit-align-items:     center;
       -moz-box-align:     center;
        -ms-flex-align:     center;
            align-items:     center;
    -webkit-box-align:     safe center;
    -webkit-align-items:     safe center;
       -moz-box-align:     safe center;
        -ms-flex-align:     safe center;
            align-items:     safe center;
    }


.centerimage
   {
    margin-left: auto;
    margin-right: auto
    }

.spacebox
   {
    height: 0
    }

.textcontainment
   {
    padding: 6px;
    padding: 0.5rem;
    background: #FFFFFF;
    background: rgba(255, 255, 255, 0.8333)
    }


.logobackdrop
   {
    background-image: url("Sparks_Page_Background_CSL_2511_01_2400px.png");
    background-repeat: no-repeat;
    -webkit-background-size: auto 100%;
    -moz-background-size: auto 100%;
    -o-background-size: auto 100%;
    background-size: auto 100%;
    }


    
/*@font-face 
   {
    font-family: 'Libertygramma_web';
    src: url('libertygramma_ac_ext_s416_05-webfont.eot');
    src: url('libertygramma_ac_ext_s416_05-webfont.eot?#iefix') format('embedded-opentype'),
         url('libertygramma_ac_ext_s416_05-webfont.woff2') format('woff2'),
         url('libertygramma_ac_ext_s416_05-webfont.ttf') format('ttf');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
    }*/

@font-face 
   {
    font-family: 'Roboto Mono 2014';
    src: url('robotomono-medium-webfont.eot');
    src: url('robotomono-medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('robotomono-medium-webfont.woff2') format('woff2'),
         url('robotomono-medium-webfont.woff') format('woff'),
         url('robotomono-medium-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: fallback;
    }

/*@font-face 
   {
    font-family: 'Schola';
    src: url('texgyreschola-bold-webfont.eot');
    src: url('texgyreschola-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('texgyreschola-bold-webfont.woff2') format('woff2'),
         url('texgyreschola-bold-webfont.woff') format('woff'),
         url('texgyreschola-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
    }*/

/*
@font-face 
   {
    font-family: 'texgyreadventor-bold';
    src: url('texgyreadventor-bold.eot');
    src: url('texgyreadventor-bold.eot?#iefix') format('embedded-opentype'),
         url('texgyreadventor-bold.woff2') format('woff2'),
         url('texgyreadventor-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
    }
*/

/*
@font-face 
   {
    font-family: 'texgyreadventor-bold';
    src: url('texgyreschola-bold-webfont.eot');
    src: url('texgyreschola-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('texgyreschola-bold-webfont.woff2') format('woff2'),
         url('texgyreschola-bold-webfont.woff') format('woff'),
         url('texgyreschola-bold-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: fallback;
    }
*/



/*@media only screen and ( not(prefers-color-scheme: light)), 
            screen and (prefers-color-scheme: dark), 
            screen and (prefers-contrast: less)*/
             
@media screen
   {
    :root 
       {
        --primary-color: #FFFFFF;
        --background-color: #1D252D;
        --link-color: #FFD100;
        --visited-link-color: #FFD100;
        --hover-link-color: #FFFFFF;
        --active-link-color: #F2A900;
        --header-color: #FFFFFF;
        --text-color: #FFFFFF;
        --button-color: #002D72;
        --button-text-color: #FFFFFF;
        --table-background: #383D43;
        --table-border: #FFFFFF;
        --content-border-color: #0082BA;
        --box-shadow-color: #000000;
        }
    /* Additional style overrides for dark mode if necessary */
    
    :root 
       {
        /* ... other dark mode variables ... */
        --button-gradient-start: rgba(0, 45, 114, 0.8);  /* Darker shade of PMS288C */
        --button-gradient-end: rgba(0, 130, 186, 0.8);   /* Darker shade of PMS640C */
        }

        
    .linkbutton, .endbtn, .itembtn 
       {
        background: #002D72; 
        
        background-image: linear-gradient(to right, rgba(192,194,199,1) 0%,rgba(83, 86, 90,0) 5%,rgba(117, 120, 123,0) 95%,rgba(83, 86, 90,1) 100%), linear-gradient(to bottom, rgba(83, 86, 90,1) 0%,rgba(117, 120, 123,1) 5%,rgba(117, 120, 123,1) 95%,rgba(83, 86, 90,1) 100%);
        }

    .linkbutton:active, .endbtn:active, .itembtn:active 
       {
        background: #0082BA; 
        
        background-image: linear-gradient(to right, rgba(192, 194, 199,1) 0%,rgba(192, 194, 199, 0.33333) 5%, rgba(192,194,199, 0.06125) 95%, rgba(83, 86, 90, 1) 100%), linear-gradient(to bottom, rgba(83, 86, 90,1) 0%,rgba(117, 120, 123,1) 5%,rgba(117, 120, 123,1) 95%,rgba(83, 86, 90,1) 100%);
        }


        .contentbox
           {
            border: 0.4em solid var(--content-border-color);
            }

        .colorsquare, .blackcolorsquare
           {
            border:0.1rem solid #FFFFFF;
            }

        .whitecolorsquare
           {
            border:0.1rem solid #000000;
            }
            
            
    .mmbutton A {
        display: inline-block;
        box-shadow: 0.3125em 0.3125em 0.3125em rgba(255, 255, 255, 0.5);
    }

    .mmbutton A:hover {
        box-shadow: 0.15625em 0.15625em 0.15625em rgba(255, 255, 255, 0.5);
    }

    .mmbutton A:active {
        box-shadow: none;
    }
            
            
            
    }





/* --> */