* { box-sizing:border-box; font-family:system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; }

html      { height:calc(100%); width:calc(100%); font-family:Verdana, Arial, Helvetica, sans-serif; }
body      { width:calc(100%); margin:0; padding:0; background:#111; margin:auto; border:0;  color:#FFFFFF}

header    { height:12vh; width:calc(100%); margin:0; padding:0; text-align:left; background:#333; color:#FFFFFF;}/* height needs to be factored into the heights */
                        /* this height:80px needs to be factored into the heights */
header h1 { padding:1em; margin:0;} /* padding needs to be factored into the heights */


#main     { width:calc(100% - 2*20px); height:calc(80vh - 2*20px) /* - 120px - 1em - 3em - 1em*/; margin:20px; padding:20px; background:#222; vertical-align: middle;}
        /* 100% - 140px(navigation_width) */
        /* 100% - 140px(header_height) - 1em(header_padding) - 3em(footer_height) - 1em(footer_padding) */
footer    { width:calc(100vw); height:8vh; margin:0 0 0 0; padding:10px 20px; background:#444; color:white;text-align:center; }
        /* padding & heights  this needs to be factored into the calc(heights) */

table    { margin:auto; } /* I discovered that this ALLOWS a centred table without wrapping in <center> - previously everytime I used class=cn it got ignored*/
p        { margin:auto; } /* I discovered that this ALLOWS a centred table without wrapping in <center> - previously everytime I used class=cn it got ignored*/
        
/* Navigation */
  navigation         { float:right; height:12vh; width:80%; background:#444; }
  navigation a       { color:#FFFFFF; text-decoration:none; }
  navigation a:hover { color:#e03e52; text-decoration:underline; }
  navigation li      { font-size:16px; line-height:1.5em; }

  a                  { color:#333; text-decoration:none  }
  a:hover            { text-decoration:underline  }

test{
  padding: 1em;           /* Apply to all four sides          */
  padding: 5% 10%;        /* top and bottom | left and right  */
  padding: 1em 2em 2em;   /* top | left and right | bottom    */
  padding: 5px 1em 0 2em; /* top | right | bottom | left      */
}

/* font styles+alignment */
.i       { font-style:italic; }
.b       { font-weight:bold; }
.bb      { font-weight:bolder; }
.xxs     { font-size:0.60vmin; }
.xs      { font-size:0.80vmin; }
.vs      { font-size:1.00vmin; }
.sm      { font-size:1.20vh; }
.nm      { font-size:1.40vh; }
.lg      { font-size:1.6vmin; }
.lgr     { font-size:1.90vmin; }
.vlg     { font-size:2.10vmin; }
.xl      { font-size:2.50vmin; }
.xl2     { font-size:3.50vmin; }
.xl3     { font-size:5.00vmin; }
.xl4     { font-size:7.50vmin; }
.xl5     { font-size:10vmin; }
.xl6a    { font-size:12vmin;  }
.xl6     { font-size:32vh;  }
.lf      { text-align:left; }
.cn      { text-align:center; }
.rt      { text-align:right; }
.js      { text-align:justify; }
.vt      { vertical-align:top; }
.vc      { vertical-align:middle; }
.vb      { vertical-align:bottom; }
/* colours */
.blk     { color:#000000; }
.wht     { color:#ffffff; }
.gry     { color:#808080; } /*gray*/
.dgy     { color:#a9a9a9; } /*darkgray*/
.mgy     { color:#696969; } /*dimgray*/
.lgy     { color:#888888; }
.red     { color:#ff0000; } /*red*/
.lrd     { color:#cc0000; }
.drd     { color:#770000; }
.mrn     { color:#800000; }
.csn     { color:#dc143c; } /*crimson*/
.ord     { color:#ff4500; } /*orangered*/
.msg     { color:#ff3300; }
.pch     { color:#f8884f; }
.crl     { color:#ff7f50; } /*coral*/
.lcr     { color:#f08080; } /*lightcoral*/
.pvr     { color:#d87093; } /*palevioletred*/
.mag     { color:#ff00ff; } /*magenta*/
.prp     { color:#800080; } /*purple*/
.bvt     { color:#8a2be2; } /*blueviolet*/
.org     { color:#ffa500; } /*orange*/
.grd     { color:#daa520; } /*goldenrod*/
.gld     { color:#ffd700; } /*gold*/
.ylw     { color:#ffff00; }
.gcm     { color:#f4e0b0; }
.gcm     { color:#fbceb1; } /*apricot*/
.grn     { color:#008000; } /*green*/
.lim     { color:#00ff00; } /*lime*/
.lgn     { color:#00bb00; } /*limegreen*/
.dol     { color:#336633; } /*darkolive*/
.mol     { color:#669966; } /*midolive*/
.lol     { color:#99cc99; } /*lightolive*/
.mnt     { color:#98ff98; } /*mint*/
.sgr     { color:#d8d8d8; } /*seagreen*/
/*
.sgr     { color:#2e8b57; } /*seagreen*/
.lgr     { color:#90ee90; } /*lightgreen*/
.gnyl    { color:#adff2f; } /*greenyellow*/
.blu     { color:#0000ff; } /*blue*/
.sbl     { color:#1059e6; } /*this is from swpro*/
.dbl     { color:#0f1141; } /*this is from swpro*/
.nav     { color:#000066; }
.lblu    { color:#add8e6; } /*lightblue*/
.lsky    { color:#87cefa; } /*lightskyblue*/
.aqu     { color:#00ffff; } /*aqua*/

/*line spacing */
.ls25    { line-height:2.5; }
.ls15    { line-height:1.5; }
.ls12    { line-height:1.2; }
.ls10    { line-height:1.0; }

/* border:1px dashed red; */
.bd00    { border:0px; }
.bd0     { border:1px dashed; }
.bd1     { border:1px dotted #daa520; border-radius:8px; }
.bd2     { border:2px solid; border-radius:10px; }
.bdred2  { border:2px solid #ff0000; }
.bdgrn3  { border:3px solid #adff2f; }
.bdblu4  { border:4px solid #0000ff; }
.bdmag5  { border:5px solid #ff00ff; }


.shdw4show05 { text-shadow:-0.5px -0.5px 0 #fff, 0.5px -0.5px 0 #fff, -0.5px 0.5px 0 #fff, 0.5px 0.5px 0 #fff; }
.shdw4show10 { text-shadow:-1.0px -1.0px 0 #fff, 1.0px -1.0px 0 #fff, -1.0px 1.0px 0 #fff, 1.0px 1.0px 0 #fff; }
.shdw4show15 { text-shadow:-1.5px -1.5px 0 #fff, 1.5px -1.5px 0 #fff, -1.5px 1.5px 0 #fff, 1.5px 1.5px 0 #fff; }
.shdw4show20 { text-shadow:-2.0px -2.0px 0 #fff, 2.0px -2.0px 0 #fff, -2.0px 2.0px 0 #fff, 2.0px 2.0px 0 #fff; }
.shdw4dark05 { text-shadow:-0.5px -0.5px 0 #111, 0.5px -0.5px 0 #111, -0.5px 0.5px 0 #111, 0.5px 0.5px 0 #111; }
.shdw4dark10 { text-shadow:-1.0px -1.0px 0 #111, 1.0px -1.0px 0 #111, -1.0px 1.0px 0 #111, 1.0px 1.0px 0 #111; }
.shdw4dark15 { text-shadow:-1.5px -1.5px 0 #111, 1.5px -1.5px 0 #111, -1.5px 1.5px 0 #111, 1.5px 1.5px 0 #111; }
.shdw4dark20 { text-shadow:-2.0px -2.0px 0 #111, 2.0px -2.0px 0 #111, -2.0px 2.0px 0 #111, 2.0px 2.0px 0 #111; }