File: _main.css

/* 
====================================================================================
External CSS sheet, adopted Nov 2015 (last revised September 2018).

Styles for fonts, nav bars, images, code, and more; supports future expansion.
Used site-side, except old training pages (own CSS) and app user guides (inline). 

Caveat: some older pages here still use tables and in-line HTML tags for formatting;
this is being phased out rapidly, especially during 2018 mobile-friendly conversion.

====================================================================================
CSS CHEAT SHEET (because bandwidth is now cheap):

Use this external sheet via this in <HEAD> of HTML file:
    <link rel="stylesheet" type="text/css" href="_main.css">    <!--relative url-->

Syntax:
    selector {property: value; property: value}

    Where common selectors = 
        HTML tag type:  p {}            for all <p> only
        Id name:        #intro {}       for <... id="intro">, page-unique id, <div>?
        Class name:     .nftable {}     for <... class="nftable">, not page-unique 
        Tag + class:    pre.fancy {}    for <pre class="fancy">, some tag only 
        Multiples:      p, dt, dt {}    for <p> and <dt> and <dd>  
        Direct child:   tr.space>td {}  for all <td> immed in <tr class=space> (only)
        Descendant:     .booktab th {}  for all <th> descendants of <table class=booktab> 
        Combos:         .c th, .c td {} for all <th> and <td> descendants of <? class=c> 
        Wildcards:      * {}, td * {}   for all, or all within any <td> (or html, body)

Precedence, from lowest to highest:
    Properties are applied in order read/loaded, which generally means:

    1) Browser defaults, which unfortunately may vary
    2) External and internal sheets in <head>, by coding order: first to last (low..high)
    3) Inline styles within HTML tags, outside/after <head>

    For #2, there may be any number of <link> refs and <style> blocks in <head>
    CSS property overrides same-type HTML attribute, in CSS-capable browsers (but test!) 
    Nested elements/classes may override attrs of their containers (e.g., <code> in <pre>)

Subtle bits:
    Class redefinitions with disjoint properties simply extend the property set
    Using <tag class="c1 c2"> combines the properties of both classes
    Display may be "block" (stack vert.), "inline-block" (stack horiz.), or "inline"
    A "!important" at a property def overrides standard precedence (ad hoc: avoid!)
    Properties are also applied by a selector specificity ranking (complex: avoid!) 

Coding notes:
    Comments: CSS form parsed in <link> files and <style> blocks; else HTML form
    Media queries "@media" nest CSS: code within enclosing {}
    CSS does not do nested comments - edit closing / if present in disabled block
    Errors are not reported: add color/etc to verify class correctness and use

An external CSS page like this, loaded with a <link> in <head>, makes it easier
to change formatting in the future without having to edit each page (or worse,
each tag within each page).  Alternatives, and their downsides:

0) External sheets in <HEAD>, like this one: the best option
       <link ...see above... > 

1) HTML in-page style sheet(s) in <HEAD>: must edit every page to change
       <style>                                           
       body {
           font-family: Arial, Helvetica, sans-serif; 
       }
       </style>

2) HTML inline (in-tag) CSS styles: must edit every tag to change
       <p style="font-family: Arial, Helvetica, sans-serif;">

3) HTML original font tag, anywhere: deprecated but widespread, many page changes
       <font face="Arial, Helvetica, sans-serif">       

4) JavaScript object-based: requires users to enable JavaScript
       object.style.fontFamily="Arial,sans-serif"

5) HTML original formatting: must edit every tag in every page on changes
       <td bgcolor=tan>     <!-- was the web ever this young? -->
====================================================================================
*/




/*
====================================================================================
GENERAL FONTS [site-wide]
banish the default former Times New Roman default (a.k.a. serif)
====================================================================================
*/


/* 
------------------------------------------------------------------------------------
For the entire body, except <pre> used for code/text (alt: *).
See also code and header font scaling options later in this file.
------------------------------------------------------------------------------------
*/

body {
    font-family: Arial, Helvetica, sans-serif;    /* precedence list (Verdana, Tahoma?) */
}                                                 /* double quote if name embeds spaces */



/*
------------------------------------------------------------------------------------
Jul18 hack: do not scale up text fonts in landscape mode on iOS Safari 
(else no more text can be seen), but still allow user zooms.  Limit to 
smaller screens only, and assume no other consequences (a nonstandard 
attribute).  Uses CSS device-width to target physically small devices. 
Also used redundantly in training-main.css and all apps' user guides. 

Updates and findings:

- Using "none" instead of "100%" does _not_ appear to disable user zooms
  today, even without the media query code - has this story evolved?

- The "100%" does _not_ appear to impact 'font boosting' text upscaling 
  in Android Chrome.  Despite initial suspicions, uneven text sizing 
  appears related only to user font settings - see more below.

- Adding a "maximum-scale=1.0" to <meta name="viewport"> content today 
  does _not_ prevent Safari iOS landscape upscaling, and really _does_ 
  disable user zooms in Android Chrome - more browser-specific quirks?

- device-width targets screen size instead of window size to avoid 
  firing for shrunken windows, but is not handled the same way across 
  all browsers - see the related notes at code and toolbar fonts ahead. 

Caveat - more on Android Chrome font boosting:

  Upscaling appears wholly related to user font settings - both global
  Settings, and Android's own Text Scaling in Accessibility.  For both, 
  large font settings may result in some text being oddly larger than 
  other text.  This is an issue in Android Chrome only; Firefox has a 
  similar model, but it does not seem to yield such irregular scaling.

  Font boosting is based on a heuristic analysis of content: larger
  text sections are chosen for upscaling, to make desktop-focused pages 
  easier to view.  The unfortunate consequence is that text selected  
  for upscaling can be much larger when users select larger font sizes.
  Conversely, all text is sized the same for lower size settings.

  There seems no good - and polite - way to disable upscaling via CSS 
  (a former "max-width: 99999px;" scheme proved futile today).  Moreover, 
  the "-webkit" setting below has no impact on upscaling on any devices 
  tested, regardless of its setting or presence.  Switching to and from 
  landscape mode can alter Chrome's rendering too, but only trivially.

  Automatically scaling a page's text to differing sizes seems dubious
  at best.  Indeed, font boosting was filed as a bug, but dismissed as 
  "won't fix" - a regrettable outcome for a most-used mobile browser. 
  For now, users can avoid uneven scaling but still enlarge text with the
  global Screen Zoom in Settings, instead of Font Size or Text Scaling. 
  At least until browser makers again change the rules arbitrarily... 
------------------------------------------------------------------------------------
*/

@media screen and (max-device-width: 640px) {  /* on 0..640 pixel screens only */
html {                                         /* from the wildly ad hoc department! */
    -webkit-text-size-adjust: 100%;            /* not 'none': prevents zoom in/out? */
}
}




/* 
====================================================================================
CODE/TEXT BLOCK LISTINGS AND INLINE CODE [site-wide]
this has evolved (old items kept for ref); auto-scroll and mono-font are crucial  
====================================================================================
*/


/* 
------------------------------------------------------------------------------------
CODE/TEXT BLOCKS (some use <code> too)

Code sections that are not manually indented (an older formatting style).
Feb18: now used SITE-WIDE for *all* <pre>, and dedent any old-style code.
Jul18: other rules below add or replace font-family/font-size settings.

Note that this is for code _blocks_, not inline text: <pre> styling is
not applied to <code> text unless the <code> is nested in a <pre> block. 
Moreover, nested <code> may overide some <pre> styling, even via defaults
(it generally renders in browsers' "monospace" defaults unless restyled).
HTML's <pre> and <code> roughly correspond to CSS's "block" and "inline" 
display attribute values ("inline-block" arranges elements horizontally).

For more on inline <code> usage, see its styling ahead in this section.
------------------------------------------------------------------------------------
*/


PRE, pre.fancy {                                      
    /* feb18: mobile resesign (can override) */
    overflow-x: auto;                                /* scroll if needed for mobile and shrunken windows */
    white-space: pre;                                /* just to be sure? */
    font-family: Courier, monospace, sans-serif;     /* better: else some mobiles aren't mono? */
    background-color: ivory;                         /* color, okay iff scrolled to window size (else truncated) */
    outline: black solid 1px;                        /* border, okay if scrolled (else bisects code in most wb) */
    padding: 5px;                                    /* space around code within pre block, one=all 4 sides*/
    margin: 20px;                                    /* space around pre block itself, just one = all 4 sides */
}

    /* original settings */
    /* margin: 20px;                                 /* don't indent in the text itself */
    /* font-family: Consolas, "Courier New", Courier; */  /* override default, use bolder consolas */
    /* outline: green solid 1px; */                  /* size = max(screen size, text size) (but no-op on IE!) */
    /* border: 1px solid blue; */                    /* size = screen size, even if text longer (but not on IE!) */ 

    /* feb18 experiments */
    /* border-right: hidden; */                      /* feb-18: else rb bisects code on small screens */
    /* background-color: ivory; */                   /* feb-18: this still cuts off on screen, not code */

    /* display: inline-block; */                     /* feb18: this makes border fit content, no bisect */ 
    /* border: 1px solid blue; */                    /* bit it looks a bit odd for narrow listings */
    /* white-space: pre; */                          /* and requires <p> immediately after </pre> */



/* the following traces an incremental voyage into the heart of font darkness... */


/*
------------------------------------------------------------------------------------
TAKE 1 of 3, jul2018: scale code down just a bit versus surrounding narrative;  
but don't use html <code>: its [font-family: monospace] default is too small; 
and don't do this on smaller screens, where text is already small as it is.
------------------------------------------------------------------------------------
*/


/*
 * @media screen and (min-width: 641px) {
 * PRE, pre.fancy {                                      
 *     font-size: 95%;     /* 641+ displays only (not for 640 or less) *
 * }
 * }
 */



/*
------------------------------------------------------------------------------------
TAKE 2 of 3, jul2018: try other code fonts - much of this site's content is code.
This rule's settings replace same settings (but not all) in those above it.
To try fonts: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family.

Notes: 
- must use "monospace" all by itself in rule's attribute, else it's 
  not mono on Android Chrome (oddly - but see Take 3 ahead) 
- Courier == monospace on Mac Chrome; "Courier New" == Courier on
  Android and Windows Chrome
- Courier is much duller on Windows, Android Chrome, and iOS Safari;
- the generic monospace (alone) is generally sharper, but small
  on most browsers by default: scale it up to make code more readable  

------------------------------------------------------------------------------------
CAVEAT: code fonts vary maddeningly per browser/version/platform (e.g.,
monospace default is subpar on some Firefox, courier is dull on Android 
Chrome, and consolas looks much nicer than either courier or the monospace
default on some Windows browsers).  Because browser/platform detection 
requires JavaScript, this is mostly a "punt" here, but focus efforts on 
this tech-oriented website's half1 2018 browser audience:

    Desktop = 67%/18%/5% for Chrome/Firefox/Safari 
    Mobile  = 56%/24%/3% for Chrome/Safari/Firefox

Platforms and device categories overall were:

    Platform = 61%/15%/13%/7%/4% for Windows/Mac/Linux/Android/iOS
    Device   = 87%/9%/3% for desktop/mobile/tablet

Top browsers across all device categories broke down as:

    60% Chrome desktop
    16% Firefox desktop
     5% Chrome mobile
     4% Safari desktop
     3% Edge desktop
     3% IE desktop
     2% Safari mobile (non-tablet)

And most relevant, top browsers across all platforms broke down as:

    43% Chrome Windows
     9% Chrome Mac
     9% Firefox Windows 
     7% Chrome Linux
     6% Firefox Linux
     5% Chrome Android
     4% Safari Mac
     3% each for Edge Windows, IE Windows, Safari iOS

A limited-resource site probably stops caring near the end of this.
Also note that many browsers allow users to set mono/fixed font
defaults, though these only apply if use "monospace" in CSS here,
and users can't be expected or required to change this in any event.
For more analytics: learning-python.com/site-traffic-half1-2018.txt.
------------------------------------------------------------------------------------
*/


/*
 * PRE, pre.fancy {
 *     font-family: monospace;   /* just this, else Android Chrome is not mono *
 *     font-size: 110%;          /*  scale up, else reduced in some browsers; or 1em; *
 * }
 *
 * @media screen and (min-width: 641px) {
 * PRE, pre.fancy {
 *     font-size: 117%;          /* scale up more on larger displays - 641+ pixels; *
 * }
 * }
 */



/*
------------------------------------------------------------------------------------
TAKE 3 (final?), jul2018: use a precedence list (as before), but with better 
fonts and ordering that try to balance the needs of multiple platforms and
browsers.  Also fix Safari iOS landscape upscaling (now above).  This prefers
Consolas on Windows, and monospace works for Chrome on Android if coded with
others this way (for reasons unknown).  In more detail:  

monospace 
  is required for mobile browsers like Chrome and Safari: Courier is badly 
  washed out on these platforms, while monospace is crisp and well-sized.  
  Conversely, monospace's default may be unusually small, large, or dull on
  some other platforms, making it poor for portability.  monospace is a CSS 
  keyword best listed last; because it's universal, it hides anything listed 
  after it.  On most desktop browsers, monospace's font can be set by users.

Consolas 
  is better for Windows, where Courier - the usual monospace default - is dull 
  at most zoom levels.  This depends on browsers and user settings, but listing 
  Consolas first ensures its usage.  The downside is that another user-selected 
  font for monospace won't apply to this site's formatted code, though most 
  Windows users probably never change their browser's mono-font settings anyhow.

Ubuntu mono 
  is the same story, for Linux (only): the default monospace seems too large, 
  fonts cannot be scaled on a per-family basis in CSS, and listing it here means 
  systems that have it won't allow code fonts to be changed by users - a less 
  trivial tradeoff on Linux where custom seems the norm, but trade off we must.

Courier 
  is the typical monospace default on Macs, and looks great (as usual on Macs). 
  Listing it last here makes it the general fallback option everywhere, though
  monospace probably makes this moot - and uses Courier on Macs anyhow.

Menlo 
  is very nice on Macs, and would be okay to add to the front list below, but 
  it's large by default, and there's again no way to scale down by family.

Note that a user's monospace font setting will still be used on systems with a 
Consolas or Ubuntu mono, for the native text display produced by a showcode.py 
page's raw-text "view" link.  User settings won't apply to either formatted 
files (showcode.py) or code sections nested in other pages (<pre> or <code>).

Also note that, as coded, <pre> fonts are scaled down slightly for _both_ small 
devices, and small windows on larger devices.  Using 'device-width' instead of 
'width' may avoid the latter, but even on the same device 'device-width' can 
vary per browser, and the font reduction means more text is shown (a feature?). 

In the end, fonts are a risky business, because they may vary per platform.
Unfortunately, monospace also varies too widely to make it a sole solution.
------------------------------------------------------------------------------------
*/


PRE, pre.fancy {
    font-family: Consolas, "Ubuntu mono", monospace, Courier;
    font-size: 95%;
}

@media screen and (max-width: 640px) {
PRE, pre.fancy {
    font-size: 89%;   /* scale down more on small views (~640 pixels): show more text */
}
}

/* the -webkit safari iOS hack was added at this time too: moved above */
/* note that this had no effect on <pre> text: code was luckily immune */



/*
------------------------------------------------------------------------------------
INLINE CODE (not blocks), July 2018

This site has not historically used <code> tags (except in a copied and 
reconstructed article), because they are tedious to insert in hand-edited
HTML files.  Some are being added gradually to a few popular tech pages as 
time allows.  strings30.html, for example, is a top search target and a 
top-5 traffic page, and warranted 318 <code> inserts for literals.  Other
pages get fewer hits (10%?), but may be significant enough to merit edits.

When used, apply the same font formatting as <pre> code/text blocks above,
but add color shading to make literals stand out better (on some platforms,
the font difference is negligible, and not enough by itself).

TBD: scale up to 100% everywhere to make it the same size as the text in which 
<code> is embedded?  Else it's smaller than surrounding text by default, 
and this may look odd in embedded mode (unlike <pre> blocks).  Alas, this
is too variable across platforms/devices for objective consensus.

Also removed the <pre><code> nesting in a copied article: use just <pre>
for code listing blocks, else <code> settings here can override <pre>'s.
------------------------------------------------------------------------------------
*/


CODE {
    font-family: Consolas, "Ubuntu mono", monospace, Courier;
    font-size: 95%;
    background-color: #eeeeee;     /* very-light grey bg to accentuate; same as #eee */
  /*background-color: #f2f2f2;*/   /* sep18: lighter? screens vary, dingy vs washed out */
}

@media screen and (max-width: 640px) {
CODE {
    font-size: 89%;   /* scale down more on small views (~640 pixels): show more text */
}
}





/*
====================================================================================
HEADER (AND OTHER) BACKGROUNDS
alternative to former table-based colorization
====================================================================================
*/


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

.lighttanheader {
    background-color: wheat;          /* wheat, or cornsilk: too light? */
}

.lightesttanheader {
    background-color: cornsilk;       /* too light for headers, ok for areas */
}

.darktanheader {
    background-color: #A28264;        /* it's dark brown... */
}



/* other pages: for variety (and not yet used?) */

.lightbluebg {
    background-color: #DFF0FF;
}
.darkerluebg {
    background-color: #A2CDF3;
}


.lightgreybg {
    background-color: #E9E9E9;
}
.darkergreybg {
    background-color: #C1C1C1;
}




/* 
====================================================================================
HOMEPAGE: BUTTON TABLE (mostly, its link cells)
an exercise in trying to forge a real GUI in a webpage using ad hoc css...
====================================================================================
*/


/* 
------------------------------------------------------------------------------------
Jan16: drop html nowrap for this, but increase css's fixed size to 170px.
Fixed-width columns seem problematic: old firefox 28 on linux line-breaks
content if smaller, and nowrap+smaller makes content cross columns boundaries.

Feb18: make index table responsive for mobile via media query for small screens.
The alternative is to make images % proportional, but there's more to shrink here.

Sep18: change the 2nd click's cutoff from 480px to 360px so stretches into 
more empty space on medium-width devices (e.g., Galaxy S8); else too small.
The 1st click still apples to small devices, like iPhone 4/5/se, Lumia 520).
Also, don't repeat unchanged properties in redefs: uses union of all parsed.
------------------------------------------------------------------------------------
*/
  

.blocklink {                 /* 0..359: smaller for smaller mobiles and shrunken windows */
    display: block;          /* hrefs that look like buttons */
    width: 4.5em;            /* was 170px: bad for mobile; was 145px, but causes lined-breaks in older firefox */
    text-decoration: none;   /* no underline for the link: forge a true gui's button */
}

@media screen and (min-width: 360px) {
.blocklink {                 /* 360..549: else medium for larger devices and windows */
    width: 5em;              /* was 480px, but wasted empty space on some devices */ 
}
}

@media screen and (min-width: 550px) {
.blocklink {                 /* 550..639: else in-between medium so not as large a jump */
    width: 125px;            /* alt: make table size a % of screen size (see bookimg) */
}
}

@media screen and (min-width: 640px) {
.blocklink {                 /* 640+: else larger for largest devices and windows */
    width: 170px;            /* 4th click; this was the prior desktop size (now a max) */           
}
}

.blocklink:hover {
    text-decoration: underline;    /* underline only when cursor hovers over link */
    font-style: italic;            /* feb18: and go italic for consistency with footer */
}


/* 
------------------------------------------------------------------------------------
Sep18: move the table itself left on small devices (e.g., 5" iPhone/Pad).
Else has body/page border on left but none on right.  Could drop the border
altogether on this page (only) to save pixels, but inconsistent with site.
------------------------------------------------------------------------------------
*/

.linkstable {
    margin-left: 1em;     /* prior setting, 321+ */
}

@media screen and (max-width: 320px) {
.linkstable {
    margin-left: 4px;     /* go small, 0..320 */
}                         /* bit not max-device-width, else also for landscape */
}



/* 
------------------------------------------------------------------------------------
Sep18: NOT USED, but retained as a tbd option - make the table a % proportional 
to container, up to a max.  The following (with all other settings above) scales 
the table smoothly with the window, makes use of more empty space at some sizes,
and nearly works the same, but may yield some border cases of text and/or table 
overflow on some devices.  Punt for now; the clicks model above works (jumpily),
and this is tricky without a huge arsenal of test devices (or reliable emulators).
------------------------------------------------------------------------------------
*/

/*++++++++++++++++++++++++
.blocklink { 
    width: 100%;
}

.linkstable {
    table-layout: fixed;
    width: 95%;
    max-width: 385px;
}

.linkstable td {
    width: 50%;
}
++++++++++++++++++++++++*/




/* 
====================================================================================
HOMEPAGE + BOOK INDEX: LEFT PANEL TABLE
feb18: make slightly smaller on smaller displays to save pixels for other parts
====================================================================================
*/


.bookicons {                       /* feb18: leftside panel: smaller on smaller displays */
     width: 40px;                  /* 0..479 - fits ipad touch and iphone se 4" */
     padding: 1px;
}

@media screen and (min-width: 480px) {
.bookicons {                       /* 480..639 - fits galaxy j7 5.5" */
     width: 40px;                  /* no 4th click here (unlike actions table above */
     padding: 2px;
}
}

@media screen and (min-width: 640px) {
.bookicons {                       /* 640+: original desktop size */
     width: 50px;
     padding: 5px;
}
}




/* 
====================================================================================
FOOTER TOOLBAR TABLE [site-wide]
navigation bar at window bottom (makes homepage a bit superfluous - as it should)
====================================================================================
*/


/* 
------------------------------------------------------------------------------------
Feb18: massive redesign to make toolbar scrollable at a minimum width for mobile.
Moves most markup to <div> instead of table, but retains fixed positioning.
Also works around left-corner URL popups on mouse-over on Edge (and now Firefox).
The toolbar's html itself is generated by genhtml, from html templates and inserts.

------------------------------------------------------------------------------------
May18: kill the scrollbar space below the toolbar on desktop browsers, by using
"autoscroll-x: auto" (not scroll).  See also the apr18 tbd below for background.
The space was forced formerly to accommodate mouse-over URL popup overlays on 
recent Firefox and all Edge.  But Firefox 59 fixed this issue; the space really
didn't help Edge anyhow; and Mac OS users might never see the space on Chrome, 
Safari, or Firefox if their scroll-bar General preference was set to scrolling 
or automatic.  Keeping the space just Edge isn't justified: it's just a 2%-3% 
share browser here, and the scroll space isn't enough to fix its overlay issue.

This change is irrelevant on all mobile browsers (they never added scroll space, 
and use swipes), and was propagated to training-main.css all apps' UserGuide.html.
On Mac OS, user scrollbar settings still impact all browsers for "overflow-x:auto":
when-scrolling is like mobiles (never show space, but overlay during scroll and 
use swipe gestures); always-show posts a clickable scrollbar when needed only; 
and automatic chooses between the two for mouse (pointers) or trackpad (gestures).
------------------------------------------------------------------------------------
*/ 



/* FOOTER TOOLBAR TABLE */
/* Jul18: settings here are extended or replaced by other rules below. */

.footerdiv {
    position: fixed;              /* anchor to bottom of display */
    bottom: 0;                    /* position:fixed + scroll doesn't work for <table> */
    overflow-x: auto; /*scroll*/  /* scroll, scrollbar iff needed (see URL hover popups) */ 
    width: 100%;                  /* overflow-x:auto adds scrollbar space iff needed */
    left: 0px;                    /* no space on left for <body> indent */
}

    /* cruft */
    /* 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;      /* use border because color may be same as some content */
    left: 0px;                    /* get rid of small blank space on the left side */
    min-width: 700px;             /* too crammed to see below this; else scrolbars don't appear */
    width: 100%;                  /* span full screen horizontally */
    height: 1em;                  /* 3 = alt for url popup overlays in dumb browsers (but too big) */
}

    /* cruft/original */
    /* border: 0px; */            /* if on table only, 2px renders as outside-only border */

    /* dec-15 */
    /* right: 0px; */             /* but not this, or margin-left; css seems very redundant and ad hoc */
    /* table-layout: fixed; */    /* alt: small words isolated, not as good when window is shrunk (+) */
    /** 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? */
    /** overflow-x: scroll; */    /* show scrollbar for items clipped - supposedly (no-op if pos:fixed) */

    /* feb-18 */
    /* max-width: 100%; */        /* seems useless here */
    /* top: 0; */                 /* top of screen alt */
    /* margin-top: 30px; */       /* doesn't work here either if in <div>: use <br>s */

    /* 
     * (+) Caution: "table-layout: fixed;" causes rightmost item to be clipped when
     * window shrunk, if padding on both left and right of table td items; don't use
     */



/* FOOTER TOOLBAR LINKS */
/* Jul18: settings here are extended or replaced by other rules below. */

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

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

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



/* 
------------------------------------------------------------------------------------
Jul18: scale up toolbar links for smaller mobile devices, else can be hard
to scroll/activate with swipe/touch.  Keep the former size on larger/desktop 
devices: generally mouse-based or movable windows not constrained to bottom 
of the device.  Uses CSS device-width, not width, to avoid larger toolbars 
when windows shrunk on larger devices.

Caveat: this relies on browser-specific behavior.  Toolbars may not upscale in
landscape mode on some high-res mobiles (e.g., Galaxy S8+/9+), but the screen 
edge is more usable in this mode.  Conversely, toolbars may upscale on some 
tablets in portrait mode (e.g., older Firefoxes on Windows 8 tablets), but this
is an acceptable tradeoff.  Also used in training-main.css, apps' user guides. 
------------------------------------------------------------------------------------
*/

@media screen and (max-device-width: 640px) {
.footertable { 
    min-width: 800px;             /* 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;
}
}



/* 
------------------------------------------------------------------------------------ 
Jul18: add some left/right (only) padding around toolbar table items, so they 
don't run together in Android Firefox when set to use a huge system-global font.
This hasn't been seen in other contexts (but...).  This change has virtually no 
impact on layout in any other browsers, because the cell <td>s are center-aligned.
------------------------------------------------------------------------------------
*/

.footertable td {            /* for all <td> nested in a class=footertable */
    padding-left: 5px;       /* limit the damage of large-font crunch */
    padding-right: 5px;
}



/* 
------------------------------------------------------------------------------------
Apr18: TBD - kill space reserved for scroll below the toolbar?

  --DEFUNCT: SEE may18 resolution above--

The scroll space appears on desktop browsers only, but seems a waste.
It's required for recent Firefox, else url-hover popup covers links.
Without the space, Firefox is usable but just barely - must move cursor.
Edge is beyond help either way - its popup is rude (and its traffic is ~3%).
Chrome, Safari, and IE don't need the space, but Firefox is 17% of traffic.
JavaScript tricks to disable popup or detect Firefox are non-starters.

PUNT for now, and add space to program user guide docs for consistency.

.footerdiv {
    overflow-x: auto;     /* show scroll iff needed *
}
.footertable {
    height: 1em;          /* 3 also helps, but it's chunky *
}
------------------------------------------------------------------------------------
*/



/* 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 concise */
}




/* 
====================================================================================
BOOK-TITLE PAGES EDITION TABLES
used for all 3 title pages' editions tables, but not for top of page layout (divs)
====================================================================================
*/



/* EDITIONS LINKS */
/* caution/caveat: these are used in purchase-pointers.html too */

.booktablelink {
   font-weight: bold;               /* same as <B><I>...</I></B> */
   font-style: italic;              /* when used, <td> uses "nowrap"; css "white-space: nowrap" in IE8+ only */
   text-decoration: none; 
}

.booktablelink:hover {
    text-decoration: underline;    /* active feedback */
}



/* EDITIONS TABLE */

/*
------------------------------------------------------------------------------------
Apr18: restyle the book index-page edition tables, such that the top and bottom
rows aren't "short-changed" on whitespace.  This is almost like a simple html 
table's "cellpadding=4 cellspacing=2" but the top row gets more space above 
it, and the bottom row gets more space below it, yielding a more uniform look.
Otherwise, the rows in the middle seem to be further apart (picky, but true...).

Html cellspacing is space between cell borders
    in css, <table style="border-spacing: 5px; border-collapse: separate;">

Html cellpadding is space inside cells, to the border
    in css, <th style="padding: 3px;">, for all <th> in a table/class

Though css spacing may not be portable to IE < 7 (see HTML IE comments form).
------------------------------------------------------------------------------------
*/


.edstable th {                  /* for all <th> within <table class=edstab> */
    padding-top: 3px;
    padding-bottom: 3px;
}

.edstable td, .edstable th {    /* ditto, but for both all <th> and all <td> */
    padding-left: 4px;
    padding-right: 4px;
}
    
.edstable td {                  /* for all <td> only (data rows) */
    padding-top: 6px;
}

.edstablelastrow td {           /* for all <td> within <tr class=edstablastrow> */
    padding-bottom: 6px;
}




/* 
====================================================================================
NOT CURRENTLY USED
====================================================================================
*/


#pagenavtan, #pagenavblue, #pagenavgrey {      /* and use id=name, not class=name */
    background-color: cornsilk;
    float: left;
    padding: 5px;
    padding-bottom: 10px;
    border-width: 10px;
}

    /* other ideas */
    /* 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 class=nftable> (or id=xxx for #xxx) to activate
====================================================================================
*/


.plaintable {
    text-align: center;
    /*border-collapse: collapse;*/     /* kill double lines */
    border: 1px solid black;           /* firefox draws single lines badly */ 
}

.plaincell {
    padding: 3px;
    text-align: right;
}



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

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

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




/*
====================================================================================
BOOK-PAGE IMAGES
feb18: need to scale down for mobile, else long words split wrap-around text
====================================================================================
*/


/* 
------------------------------------------------------------------------------------
Same for all screen sizes: continuous responsive.
Max-sizes avoid bleed over; alt: set on <div> container?
Also use higher-resolution images so sharper when larger.
------------------------------------------------------------------------------------
*/


.bookimg {         
     width: 30%;
     height: auto;
     max-height: 250px;
     max-width: 200px;
     margin-right: 20px;
     margin-bottom: 10px;
}

.bookimgtall {             /* override for pyref class="x y" */         
     max-height: 250px;
     max-width: 150px;
}



/* 
------------------------------------------------------------------------------------
Alternative...

@media screen and (orientation: portrait) {
  img { max-width: 90%; }
}

@media screen and (orientation: landscape) {
  img { max-height: 90%; }
}
------------------------------------------------------------------------------------
*/



/* 
------------------------------------------------------------------------------------
Alternative...

.bookimg {                       /* 0.479 *
     width: 50%;
     height: auto;
}

@media screen and (min-width: 480px) {
.bookimg {                       /* 480..639 *
     width: 33%;
     height: auto;
}
}

@media screen and (min-width: 640px) {
.bookimg {                       /* 640+ *
     width: 25%;
     height: auto;
}
}
------------------------------------------------------------------------------------
*/



 
/*
====================================================================================
LISTS
add space between bullet and number items for usability/readability
====================================================================================
*/


/*
------------------------------------------------------------------------------------
NOT USED: this might be VERY good site-wide too (like PRE), but there are 
too many old special-cases, and some merit more whitespace than others.
Changing pages as they are worked on to use this in-page, and drop all
<br><br>s (see also later alternative below).

LI {                           /* feb18 mobile: redesign lists for small screens *
    margin-bottom: 10px;       /* all double-space, else hard to read or tap *
}
------------------------------------------------------------------------------------
*/



/* 
------------------------------------------------------------------------------------
Apr18: use <ul|ol class=spaced> to space lists' <li> only.  A tactical 
alternative to the preceding strategic option, and minimizes edits.
Note - some pages use more/less pixels via in-page or in-tag styles.
------------------------------------------------------------------------------------
*/


.spaced LI {
    margin-bottom: 7px;
}

.spacednested LI {
    margin-top: 7px;         /* better for nested lists */
}




/*
====================================================================================
GENERIC WHITE TABLES
====================================================================================
*/


/* 
------------------------------------------------------------------------------------
Feb18: white tables in latest-edition and purchase-pointers pages.
These don't break Chrome toolbar when shrunk: breaks iff nowrap? 
------------------------------------------------------------------------------------
*/
 
/* 
------------------------------------------------------------------------------------
MORE ON TABLES (per much blood, sweat, and tears...):

For tables, either don't use nowrap, or use "overflow-x: auto" to scroll. 
The latter is best if wrapped text too weird or table too wide in general.
Otherwise, the table overflows window, causing 2 scrolls (with the toolbar).
Note that the overflow-x must be coded in a <div> surrounding the <table>.
Also note that wrapping is probably preferred for mobile in most contexts;
nowrap sometimes works anyhow, for very narrow columns (post-release-updates).

Minor update: ALSO may need scroll if table content is unbreakable and long 
(e.g., urls, paths), and may need to allow that content to be broken too
if it exceeds the size of its container (e.g., text > viewport=devicesize).
------------------------------------------------------------------------------------
*/


.bktable {                     /* better tables through nasty css */
    border-collapse: collapse; 
    background-color: white;

    /* border: 1px solid grey; */
    /* padding: 8px; */
}

.bktable th, .bktable td {     /* for all <th>+<td> descendants of <table class=bktable> */
    border: 1px solid grey;
}

@media screen and (min-width: 480px) {
.bktable {                     /* 480+: indent table on larger screens/windows */
     margin-left: 30px;
}
}




/*
====================================================================================
ETC
====================================================================================
*/


/*
------------------------------------------------------------------------------------
Aug18: notebox is no longer repeated in multiple pages (an artifact of 
its gradual adoption).  It's still customized in some pages for color
differences (and copied and possibly tailored in all app user guides).
------------------------------------------------------------------------------------
*/

.notebox {                      /* a simple box for text */
    margin-left: 40px;          /* now common across site */
    margin-right: 40px;         /* use in <p> (with <br>s) or <div> (with <p>s) */
    margin-top: 45px;
    margin-bottom: 20px;
    border-style: solid; 
    border-width: 1px;          /* was "1" which = "1px" in quirks mode (only) */ 
    padding: 5px;
    background-color: ivory;    /* was too saturated: cornsilk; */
}

.notebox-slim {                 /* use class="a B" mix to mod common version */
    margin-top: 30px;           /* css has no direct class inheritance/overrides */
    margin-bottom: 30px;        /* another .notebox {} mods props in same classname */
}




/* 
------------------------------------------------------------------------------------
Added feb-2018: for rare lesser stuff, don't distract with link
------------------------------------------------------------------------------------
*/

.subtlelink {
   font-weight: bold;        /* 'normal;' is a bit too subtle, really... */
   font-style: normal;       /* especially on touchscreens */
   text-decoration: none;    /* initially: "site" link on homepage */
   color: black
}

.subtlelink:hover {
    font-style: italic;           /* caveat: hover won't work on touchscreens */
    text-decoration: underline;   /* for consistency woth new footer style */ 
}



/* 
------------------------------------------------------------------------------------
Apr18: use class=this in an enclosing <div> to prevent following content from 
bleeding into components of the <div> when the screen is big or fonts are small.
This is an alternative to making the section a <table> with margins below it, 
which can wreak havoc with the placement of nested tables (e.g., about-lp.html).
------------------------------------------------------------------------------------
*/


.nobleedin {
    overflow: auto;
}



/*
------------------------------------------------------------------------------------
Apr18: use class=this in a <span> around text to prevent it from being split 
for line wraps (e.g., toc dates in python-changes page).  This prevents all 
splitting, dashes included - why is this part of "white-space" in css?...
------------------------------------------------------------------------------------
*/


.nolinewrap {
    white-space: nowrap;       /* IE 8+ only? */
}




/*
====================================================================================
MARGINS [site-wide]
apr18: add a small bit of space on the left and right of the entire body, all pages
====================================================================================
*/


/*
------------------------------------------------------------------------------------
Initially to address distortion at the edges of curved screens on Galaxy 7/8/9, 
but the extra whitespace makes text in general marginally more inviting (yes, pun).
Downsides: (1) on Android Chrome it also shrinks the text font (a font-boosting 
algorithm issue?), and (2) on very small 4" screens like iPod touch, pixels are 
already a precious asset.  This required restyling purchase-pointers.html to be
more flexible/responsive, and is copied in training-main.css (like much else here).
------------------------------------------------------------------------------------
*/ 


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; */
}




/*
====================================================================================
HEADER FONTS - NOT USED (commented-out)
apr18: scale header fonts down on smaller screens? - smaller is not always better,
and reduces whitespace; done in training page's css only, for title text crunch;
see the end of learning-python.com/cgi/showcode.py?name=training-main.css;
====================================================================================


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


@media screen and (min-width: 480px) {
H1 {                         
    font-size: 200%;                /* 480+, go large=default *
}
H2 {
    font-size: 150%;
}
}
------------------------------------------------------------------------------------
*/




/*
====================================================================================
SEE ALSO: in-page CSS with media queries and other magic in other pages:
purchase-pointers, sitesearch, python-activities-history, programs, bullets, ...
====================================================================================
*/



[Home] Books Programs Blog Python Author Training Search Email ©M.Lutz