/*  ************************************************************************  *
 *                                master.css                                  *
 *  ************************************************************************  */

/*  This stylesheet is for every page. Always include first.  */

/*  ************************************************************************  */

/*  Broadly speaking, this website has three types of page. 

    There is one banner page, named banner.htm, which uses MASTER.CSS and 
    BANNER.CSS. 

    There are a handful of TOC pages, each named toc.htm, each using 
    MASTER.CSS and TOC.CSS. 

    There are very many document pages, named arbitrarily, each using 
    MASTER.CSS and DOCUMENT.CSS.

    If scripts run, each document page is rebuilt into a viewer for the 
    banner, the appropriate TOC and the document. Each of the banner and TOC 
    is in its own IFRAME to isolate its formatting from the viewer's. The 
    viewer's stylesheets are MASTER.CSS, DOCUMENT.CSS and VIEWER.CSS. 

/*  ************************************************************************  */

/*  For concreteness... 

    This is no joke. Early versions of Internet Explorer make quite a mess 
    of styling the HTML object. This especially includes version 7 in quirks 
    mode, which we can expect to find ourselves in, at least until all 
    documents at this site have been edited to have a modern !doctype, but 
    even then if users put us in Compatibility View. Among the problems with 
    these early versions are:

        HTML margin ignored: 
        HTML border rendered without border-color; 
        HTML padding rendered without background-color; 
        HTML padding-top inside BODY border-top; 
        scrollbars rendered inside BODY border. 

    So, do not style the HTML object - ever! Also avoid styling the BODY 
    object. This is not just because of browsers but our own design. The 
    banner, most notably, depends on placing elements right against one or 
    another edge of a frame or of the viewport. Styling the BODY can be 
    tolerated on document pages only for the case when scripts don't run - 
    but even then, take care. 

    For concreteness...  */

html, body {
    border:0;
    margin:0;
    padding:0;
}

/*  What's mainly wanted from this master stylesheet is to set a consistent 
    font for all pages. 

    Fitting in with the browser's default would be good, especially if doing 
    so respects the users choice of larger or smaller text, but the typical 
    browser's default of 16px is much too large for the author's editing! 

    At 96dpi, the default 16px is 12pt. This is a little too large while 
    authoring - for instance, it's larger than Microsoft itself chooses as 
    the default for Word - but 10pt does not convert to whole pixels. Let's 
    take our cue from Wikipedia and reduce from the default to 14px, which 
    is 10.5pt. 

    A straightforward scaling is problematic because both Internet Explorer 
    and Microsoft Edge merely approximate the 0.875 (as 0.87). The computed 
    font-size is then not in whole pixels. Using calc, if the browser 
    supports it, gets the multiplication done exactly.  */

body {
    font-family:Arial,Helvetica,sans-serif;
    font-size:0.875em;
    font-size:calc(1em * 0.875);    /* Internet Explorer 9 and higher */

    /*  The preceding use of calc is a problem for the continued use of 
        Expression Web as this site's word processor. That Expression Web is 
        too old to know of calc is fine, but it demonstrably doesn't just 
        ignore what it thinks is invalid CSS. It reverts font-size to the 
        default - which, as noted, is too large for the author's taste (and 
        for that of Microsoft's own programmers of other word processors). 
        Expression Web apparently parses like Internet Explorer 7. The 
        following abuses a bug in the latter - just so the author can 
        tolerate Expression Web.  */

    *font-size:0.875em;
}

/*  For early versions of Internet Explorer and even for later ones in 
    quirks mode, the font-family propagates to TABLE from BODY but the 
    font-size does not. Fortunately, even though the property isn't 
    inherited from the parent, a percentage value if we set the property 
    explicitly is interpreted relative to the parent.  */

table {
    font-size:100%;
}

/*  ************************************************************************  */
/*  Lists of Links  */

/*  Almost every page at the site has a horizontal list of links - indeed, 
    two such lists. The most prominent example is the banner in BANNER.HTM.
    That's just one page. The styling of its lists could be left to 
    BANNER.CSS, except that every document page includes a simulated banner 
    that shows only if scripts don't run. The simulation has the lists too. 
    
    We're as well to style such lists of links in common. Once upon a time, 
    the lists and their items were each a DIV (the items in turn containing 
    an A). All the way back in 2007, they were briefly TD elements in a 
    TABLE. Nowadays, these lists are actual lists and the LinkList and 
    LinkListItem classes are applied to UL and LI tags respectively.  */

.LinkList, 
.LinkListItem {
    border:0;
    margin:0;
    padding:0;
}

.LinkList {
    white-space:nowrap;
}

.LinkListItem {
    display:inline-block;
    list-style:none;
}

/*  Microsoft dates inline-block to Internet Explorer 5.5, but perhaps only 
    as some statement of intent. Left with just the preceding, Internet 
    Explorer 7 renders the list vertically. The following induces it to lay 
    out the list horizontally, but not if merged into the preceding!  */

.LinkListItem {
    *display:inline;    /*  for Internet Explorer 7  */
}

/*  Each list item's sole child is an A tag so that the whole item will 
    seem to respond to the :hover pseudo-selector.  */

.LinkList a {
    border:0;
    display:block;
    margin:0;
    padding:0;
    text-decoration:none;
}

/*  ************************************************************************  */
/*  With and Without Scripts  */

/*  Each TOC and each document page is written to show adequately if scripts 
    don't run.

    From the website's first use of scripts in 2007, some pages have items - 
    notably the simulated banner - that are intended to show only if scripts 
    don't run. The usual reason is to explain what's missed by not running 
    scripts. All material that is to show only if scripts don't run has the 
    NoScript class or has an ancestor that has it. Setting display:none for 
    this ancestor hides all its descendants too. 

    It used to be that the scripts would get this effect by adding a rule to 
    a stylesheet. Now they assign the HTML node to the Scripted class. By 
    whatever method, the rule must succeed even for items whose display 
    property is set by a rule that has higher specificity. Thus do we get to 
    use !important. 

    A recent elaboration is that material is meant to show if scripts don't 
    run and eventually even if the scripts do run. This material is assigned 
    to a class named Deferred. The material must be found by some script 
    which then removes the class to reveal the material (typically after 
    some reworking).  */

html.Scripted .NoScript, 
html.Scripted .Deferrable {
    display:none !important;
}

/*  Also a recent development is that some material is to show only if the 
    scripts do run. These have a class named ScriptOnly. Since they are to 
    be hidden if scripts don't run, all elements that have this class must 
    start with display:none here in the stylesheet.  */

.ScriptOnly {
    display:none !important;
}

/*  In the absence of a way to undo display:none when the HTML gets marked 
    as Scripted, this ScriptOnly provision has only very limited use, which 
    presently means for DIV, P and SPAN only. The alternative is that 
    scripts can find all occurrences of ScriptOnly in a CLASS and remove 
    them. */

html.Scripted div.ScriptOnly, 
html.Scripted p.ScriptOnly {
    display:block !important;
}

html.Scripted span.ScriptOnly {
    display:inline !important;
}

/*  ************************************************************************  */
/*  Construction  */

/*  When scripts do run, TOC and document pages would ordinarily show first 
    as if the scripts hadn't yet run. The appearance will soon change, 
    typically a lot. If nothing else, the document page shrinks to the 
    document pane to make way for the banner and TOC. The TOC presents 
    initially as fully expanded, but the default when drawn in the TOC pane 
    is to expand just one level. 

    Scripts hide these initial states by adding the following class to one 
    or another element until the construction is ready to be revealed. This 
    must work even if the element's ordinary styling has rules that have 
    higher specificity (notably for the element by ID).  */

.UnderConstruction {
    display:none !important;
}

/*  ************************************************************************  *
 *        Copyright © 2007-2022. Geoff Chappell. All rights reserved.         *
 *  ************************************************************************  */