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

/*  This style sheet 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 (originally 
    a frameset, but nowadays simulated with BODY, DIV and IFRAME elements) 
    for the banner, the appropriate TOC and the document. Each of these 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 interpreting styling of 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 - but even then, take care.  */

html, 
body {
    border:0;
    height:100%;
    margin:0;
    padding:0;
    width:100%;
}

/*  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. 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. For editing pages, 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.  */

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

/*  Both types of banner present horizontal lists of links. We're as well to 
    style them in common. 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;
}

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

.UnderConstruction {
    display:none !important;
}

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