/* 
====================================================================================
External CSS sheet, adopted Nov15: for fonts, nav bars, and future expansion.
Caveat: both sites still use many tables and in-line html tags for formatting. 
Caveat: partly redundant with _main.css, but the training site is now static. 

CSS SUMMARY: see _main.css

====================================================================================
*/



/*
------------------------------------------------------------------------------------
FONTS
banish Times New Roman (a.k.a. serif)
------------------------------------------------------------------------------------
*/


body {                                               /* for entire body, except <pre> (alt: *) */
    font-family: Arial, Helvetica, sans-serif;       /* precedence list (or Verdana, Tahoma) */
}                                                    /* double quote if name embeds spaces */


/* 
this is now unused in Training/ pages - see more recent alt in Books/
*/

pre.fancy {                                          /* only code sections that have been dedented */
    font-family: Consolas, "Courier New", Courier;   /* override default, use bolder consola */
    /* outline: green solid 1px; */                  /* size = max(screen size, text size) (but no-op on IE!) */
    border: 1px solid black;                         /* size = screen size, even if text longer (but not on IE!) */ 
    margin: 20px;                                    /* don't indent in the text itself */
}


/* 
jul18 hack: do not scale up text fonts in landscape mode on iOS Safari (else 
no more text is visible), but still allow user zooms; see Books/ _main.css; 
*/

@media screen and (max-device-width: 640px) {
html {                                         /* from the wildly-adhoc department! */
    -webkit-text-size-adjust: 100%;            /* not 'none': prevents zoom in/out */
}
}


/*
------------------------------------------------------------------------------------
[Nov23] Disable now-broken font size boosting on Android Chrome.

On websites with text, Android Chrome (AChrome) now regularly opens
pages with some text initially scaled up to larger system or browser 
font-size settings... and then abruptly scales the very same text
down to a smaller default size after initial user scrolls.  A reload
after scrolls restores the botched larger sizes--until more scrolls.
The CSS below makes all this moot, by disabling AChrome text scaling
enough to avoid the new and bogus initial resizes.

[Snip] See Main site's _main.css for this rest of this documentation.
------------------------------------------------------------------------------------
*/

HTML {                                  /* html and body work same (h contains b) */
    text-size-adjust: none;             /* chrome (all), edge, samsung, opera, etc */
    -webkit-text-size-adjust: none;     /* safari (ios, ipad default none, macos) */
    -moz-text-size-adjust: none;        /* firefox (not desktop) */
}


/*
------------------------------------------------------------------------------------
HEADER (AND OTHER) BACKGROUNDS
alternatve to prior table-based colorization
------------------------------------------------------------------------------------
*/


.tanheader {                                         /* for any header level, or <P> etc. */
    background-color: tan;
}

.lighttanheader {
    background-color: cornsilk;
}


/* 
------------------------------------------------------------------------------------
IN-PAGE NAVIGATION BARS
footer bar is for site navigation, some pages custom 
------------------------------------------------------------------------------------
*/


.blocklink {
    display: block;          /* hrefs that look like buttons: BOOK INDEX TABLE */
    width: 145px;
    text-decoration: none;   /* no underline for the link: forge a true gui's button */
}

.blocklink:hover {
    text-decoration: underline;    /* underline only when cursor hovers over link */
}



.blocklinkbar {
    display: block;          /* hrefs that look like buttons: FOOTER TOOLBAR */
    width: 100%;
    text-decoration: none;   /* no underline for the link: forge a true gui's button */
/* dec-15 */
    color: black;
    /*font-weight: bold;*/   /* too distracting? */
}

.blocklinkbar:hover {
    text-decoration: underline;
    font-style: italic;          /* feb18: and go italic if url popup */
}

.blocklinkbar:active {
/* dec-15 */
    font-style: italic;
    /*font-weight: bold;*/   /* too distracting? */
}



.headertable {                    /* common browser-neutral formatting: HEADER BUTTON BAR */
    border-collapse: collapse;    /* collapse border into single line */
    border: 0px solid black;      /* if on table only, 2px renders as outside-only border */
}



/* feb18: mobile redesign - see Books/ _main.css for docs */
/* may18: kill the toolbar scroll's space - see _main.css for rationale */

.footerdiv {
    overflow-x: auto; /*scroll*/  /* always show scroll space (for URL hover popups */ 
    width: 100%;                  /* alt: overflow-x:auto adds scroll space iff needed */
    left: 0px; 
    position: fixed;              /* anchor to bottom of display */
    bottom: 0;                    /* position:fixed + scroll doesn't work for <table> */
    /* margin-top: 30px; */       /* doesn't work here: use <br>s */
}

.footertable {                    /* common browser-neutral formatting for footer button bar */
    border-collapse: collapse;    /* collapse border into single line */
    border: 1px solid black;      /* if on table only, 2px renders as outside-only border */

/* dec-15 */
    left: 0px;                    /* get rid of small blank space on the left side */
    /** position:fixed; */        /* fix position always at window bottom regrdless of size, position in doc */
    /** bottom:0; */              /* versus only at end of doc (must scroll to find, but less distracting? */
    /* right: 0pc;*/              /* but not this, or margin-left; css seems very redundant and ad-hoc */
    /* overflow: scroll;*/        /* show scrollbar for items clipped - supposedly (no-op for tables?) */
    /* table-layout: fixed;*/     /* this seems more even, but is not as good when window is shrunk */

/* feb-18 */
    min-width: 700px;             /* too crammed to see below this; else scrolbars don't appear */
    width: 100%;
    height: 1em;                  /* 3 = alt for url popup overlays in dumb browsers (too big) */
}



/* oct22: go narrow to avoid toolbar scrollbar on Windows Chrome: see _main.css */
.footertable { 
    min-width: 575px;             /* was 700 oct22 (default above changed here) */
}



/* 
jul18: scale up toolbar links for smaller mobile devices, else can be 
hard to scroll/activate with swipe/touch; see source - Books _main.css;

oct22: this must come _after_ the footer defs it mods! this was formerly 800px
in this code, but actually used the 700 in code above because it was second;
*/

@media screen and (max-device-width: 640px) {
.footertable { 
    min-width: 750px;             /* see above; need more whitespace for larger font */
    height: 1.25em;
}

.blocklinkbar {
    font-size: 1.25em;            /* go large, for touch */
}

.blocklinkbar:hover {
    text-decoration: none;        /* else underline/italic may get stuck on scroll */
    font-style: normal;
}
}



/* 
Oct22 - hide scrollbar for toolbar (added after narrowing);
work-around for windows chrome overlay scrollbar: main site's .css
*/

.footerdiv::-webkit-scrollbar {
  display: none;                 /* Chrome, Safari, Opera, etc. */
}

.footerdiv {
  -ms-overflow-style: none;      /* IE, old Edge */
  scrollbar-width: none;         /* Firefox */
} 



/* Not used: Npx + collapse can be variable-width on some browsers (firefox, etc), and distracting */

.footercell {                       /* 1px can be variable-width on firefox */
    border: medium solid black;     /* 2px seems distracting but browser-neutral and consise */
}



/* Not currently used */


#pagenavtan, #pagenavblue, #pagenavgrey {
    background-color: cornsilk;
    float: left;
    padding: 5px;
    padding-bottom: 10px
    border-width: 10;
    /* line-height: 30px; */
    /* height: 300px; */
    /* width: 100px; */
    /* font-size: 9px;*/
}

#pagenavblue {
    background-color:cornsilk;   /* override prior settings */
}

#pagenavgrey {
    background-color:cornsilk;
}



/*
------------------------------------------------------------------------------------
NON-FORMATTING TABLES 
use <TABLE id="table"> to activate
------------------------------------------------------------------------------------
*/


.nftable {
    border-collapse: collapse;     /* kill double lines */
}

.nftable, .nftd, .nfth {
    border: 2px solid black;       /* standard borders */
}

.nftd, .nfth {
    padding: 5px;                  /* standard cellpading */
}



/*
------------------------------------------------------------------------------------
MARGINS
apr18, copied directly from _main.css - see that file for more docs;
------------------------------------------------------------------------------------
*/ 

BODY {
   margin-left: 13px;             /* or padding: inside a border (margin outside) */
   margin-right: 13px;
   /* margin-top: auto; */        /* better to accept brower's default (4..7-ish) */
   /* margin-bottom: auto; */
}



/*
------------------------------------------------------------------------------------
BANNER FONT
apr18, this is seriously crunched on small 4" display; scale down a bit
------------------------------------------------------------------------------------
*/

H1 {                         
    font-size: 125%;                /* 0..479; alt: vw size specs, but not in all wb */
}

@media screen and (min-width: 480px) {
H1 {                         
    font-size: 150%;                /* 480..599 */
}
}

@media screen and (min-width: 600px) {
H1 {                         
    font-size: 200%;                /* 600+ (defult seems 200%) */
}
}