/*  ************************************************************************  *
 *                               document.css                                 *
 *  ************************************************************************  */

/*  This style sheet is for every document page. Include after MASTER.CSS. 

    Familiarity with MASTER.CSS and its comments is assumed!  */

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

/*  This stylesheet is definitive for the page's essential styling, the 
    default expectation being that the document page is viewed as the whole 
    of its window. This certainly is how the page is worked on at design 
    time. Text for the document is prepared naturally, i.e., with no 
    knowledge of its eventual presentation in a document pane alongside a 
    banner and a table of contents (TOC). This same simple presentation must 
    work in the browser. If nothing else, the document may be viewed with 
    scripts disabled. 

    It must also work if scripts load the document into a frame (whether a 
    FRAME or IFRAME) - not that they do any more. Nowadays, it must work 
    when scripts build a viewer above what is written as the page's BODY. 
    The viewer is a set of BODY, DIV and IFRAME elements which each have an 
    ID for styling. What was written as the document's BODY becomes a DIV in 
    the viewer. Substantial re-styling is then done in VIEWER.CSS but always 
    with the aim of keeping DOCUMENT.CSS definitive.  */

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

/*  TO DO: 

    Internet Explorer 7 - when not in quirks mode! - shows a horizontal 
    scrollbar even when the BODY seems to have no overflow. Experiments show 
    it is worse because of font-style:italic on the #Banner #Logo p and the 
    display:inline-block on the enclosed SPAN elements - but removing these 
    does not make the scrollbar go away.  */

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

/*  Despite the admonishment in MASTER.CSS about styling the HTML and BODY, 
    and thus despite the specification there of no border, margin or 
    padding, we don't want the document's content flush with the browser 
    window. 

    TO DO: 

    This can go away if ever all document pages have their content wrapped 
    in one or more DIV elements (as Header, Main and Footer) or indeed in 
    one or more HEADER, MAIN and FOOTER elements.  */

body {
    padding:1em;
}

/*  Let's have a little colour for headings. Even on narrow screens, a 
    heading that breaks to another line looks wrong.  */

h1, h2, h3, h4, h5, h6 {
    color:#993333;
    font-weight:normal;
    white-space:nowrap;
}

h1 {
    font-size:2em;
}

h2 {
    font-size:1.5em;
}

h3 {
    font-size:1.29em;
    font-size:calc(9em/7);
    *font-size:1.29em;
}

h4 {
    font-size:1.14em;
    font-size:calc(8em/7);
    *font-size:1.14em;
}

h5, h6 { /* one in rare use, the other ideally never */
    font-size:1em;
}

/*  While dealing with headings, tell the browser not to leave any heading 
    as the last line on a printed page. While dealing with this, we may as 
    well specify that we don't want a lone line at either the top or bottom 
    of any printed page.  */

@media print {

h1, h2, h3, h4, h5, h6 {
    page-break-after:avoid;     /* Internet Explorer 8 and higher */
}

blockquote, ol, p, pre, ul {
    orphans:2;                  /* Internet Explorer 8 and higher */
    widows:2;                   /* Internet Explorer 8 and higher */
}

} /* @media print */

/*  The overall appearance seems a little better with a little more leading 
    than the default (1.15).  */

blockquote, ol, p, ul {
    line-height:1.29;
    line-height:calc(9em/7);
    *line-height:1.29;
}

li, pre, th, td {
    line-height:1.14;
    line-height:calc(8em/7);
    *line-height:1.14;
}

/*  The default indentation (40px) for some items is much more than a bit 
    excessive.  */

blockquote {
    margin-left:2em;
    margin-right:2em;
}

ol, ul {
    padding-left:2em;
}

/*  ************************************************************************  */
/*  Tables  */

/*  Many pages have tables. These few rules define a house style, especially 
    for borders. We want a thin border between cells but a thick border 
    around the whole table.  */
    
table {
    border-collapse:collapse;
}

table, th, td {
    border-color:#CCCCFF;
    border-style:solid;
}

table {
    border-width:2px;
}

th, td {
    border-width:1px;
}

/*  Headings are almost always of columns and thus run horizontally as the 
    table's top row, which is usefully separated from the rows beneath by 
    duplicating the outside border. 

    TO DO: 

    Revisit this when all tables have explicit THEAD and TBODY elements.  */

th {
    border-bottom-width:2px;
    text-align:left;
}

/*  Let's also have some uniform padding to push the cells' content in from 
    the borders.  */

th, td {
    padding:1em;
}

/*  Beyond the preceding, table styling - especially of columns - gets very 
    tricky, essentially because the CSS model does not fit well with the 
    table model in the HTML. Early versions of Internet Explorer recognise 
    that the HTML may assign table cells to both rows and columns, and allow 
    that the columns can be styled by CLASS or ID. For other browsers, 
    columns can be styled only with independent knowledge of their position. 

    The worst case is Internet Explorer 8, which ditches the earlier 
    versions' superior but non-standard support for styling COL by CLASS 
    without yet supporting the :nth-child pseudo-class. 

    That the last paragraph is the worst case is just for tables that are 
    simple grids. Throw ROWSPAN into a table and you get a world of hurt 
    because CSS counts columns by the TD elements that are children of the 
    TR.  */

/*  EXPERIMENTAL  */

td pre {
    margin:0;
}

@media print {

table {
    page-break-inside:avoid;
}
 
} /* @media print */

/*  ************************************************************************  */
/*  Text Decoration  */

/*  Familiarity with Microsoft Word over decades has the author still 
    thinking in terms of its paragraph and character styles. The former are 
    expected on DIV, P and PRE elements - and perhaps could be on more. The 
    latter are for SPAN elements. A paragraph style on a SPAN element is, in 
    effect, a character style. 

    The class names begin in lower case because scripts have them double as 
    tooltips to explain the formatting.  */

/*  ================  */
/*  Paragraph Styles  */

/*  For warning about various forms of incompleteness, e.g., that the text 
    is still in preparation or that something is missed if browsing without 
    scripts  */

.alert {
    color:#FF0000;
}

/*  For text that is still in preparation and is advanced enough that I want 
    to see it when working on the document and don't mind if others see it, 
    as long as it's plainly marked  */

.draft {
    color:#887799;
}

/*  A trial for getting attention  */

.highlight {
    background-color:#FFFF99;
}

/*  To suggest console input or output, and to show such things as function 
    prototypes, structure definitions and code fragments - typically applied 
    to PRE blocks  */

.email, .input, .output, .source {
    font-family:"Courier New",Courier,monospace;
    white-space:pre;
} 

/*  ================  */
/*  Character Styles  */

/*  Styles for inline text, called "character styles" in word processing, 
    are quite a problem when using Expression Web, since they are presented 
    in the user interface only if the text that is to receive the style is 
    already in a SPAN. This is ridiculously silly since Expression Web will 
    itself generate a SPAN if applying a global class. 

    One workaround - which used to be implemented, such that this comment is 
    retained for reference - is to make some empty definitions just as class 
    selectors. Better, however, is to avoid the poor program's user-interface 
    when assigning text to a character style.  */

/*  Most character styles are defined in each subweb. Each subweb may have a 
    script to translate the style's name for a tooltip. All character styles 
    defined in this sheet must have names that are suitable for use as 
    tooltips without translation.  */

span.citation, 
span.definition, 
span.emphasis, 
span.foreign, 
span.musical, 
span.title {
    font-style:italic;
}

/*  ===================  */
/*  White-Space Control  */

/*  The following is not so much a character style even though it applies 
    only to SPAN elements. Text enclosed in a SPAN with this class becomes 
    text that the browser will try to keep to one rectangle.  */

span.PreferNoWrap {
    display:inline-block;
}

/*  While expressing preferences for wrapping at white space, define classes 
    that specify one way or the other.  */

.AllowWrap {
    white-space:normal;
}

.ForceNoWrap {
    white-space:nowrap;
}

/*  ==============  */
/*  Text Alignment  */

/*  While defining classes whose names are less about classifying purpose 
    than suggesting style...  */
    
.Centered {
    text-align:center;
}

/*  ************************************************************************  */
/*  Headers and Footers  */

div.Header {
    margin:0;
    padding:0;
    width:100%;
}

/*  Though headers are always (in practice) followed by an H1, footers can 
    follow just about anything, and benefit from having a top border as 
    visual separation.  */

div.Footer {
    border-top:1px #88AACC solid;
    clear:both;
    margin-top:1em;
    width:100%;
}

div.Footer .Copyright,
div.Footer .Dates {
    font-size:0.86em;
    font-size:calc(6em/7);
    *font-size:0.86em;
    line-height:1em;
}

div.Footer .PlaceholderLinks {  /* typically also .NoScript */
    color:#AA88CC;
}

div.Footer p {
    margin-top:1em;
}

/*  Don't bother with the placeholder links when printing.  */

@media print {

div.Footer .PlaceholderLinks {
    display:none;
}

} /* @media print */

/*  ===============  */
/*  Other Divisions  */

div.Abstract {
    border-bottom:1px #99CCFF solid;
    border-top:1px #99CCFF solid;
    clear:both;
    color:#333366;
    font-style:italic;
    margin:1em 0;
    padding:1em 2em;
    width:67%;
}

div.Notice {
    border-bottom:1px #99CCFF solid;
    border-top:1px #99CCFF solid;
    clear:both;
    color:#333399;
    font-size:larger;
    margin:2em 0;
    padding:1em 2em;
    width:75%;
}

/*  =========  */
/*  Footnotes  */

/*  Though footnotes aren't common in web pages, some pages at this site 
    were written originally as Word documents and have footnotes. Editing of 
    those for presentation here was easier if the footnotes could be kept. 
    Footnotes have anyway turned out to be useful for some new pages.  */

a.FootnoteReference, 
span.FootnoteReference {
    bottom:1ex;
    font-size:0.71em;
    font-size:calc(5em/7);
    *font-size:0.71em;
    position:relative;
    vertical-align:0;
}

div.Footnotes {
    clear:both;
    font-size:0.86em;
    font-size:calc(6em/7);
    *font-size:0.86em;
    width:100%;
}

a.Footnote {
    bottom:1ex;
    font-size:0.71em;
    font-size:calc(5em/7);
    *font-size:0.71em;
    margin-right:0.25em;
    position:relative;
    vertical-align:0;
}

/*  To separate the footnotes from preceding text, but without taking the 
    whole width (as would seem to be required by a visible border), remember 
    to begin the footnotes with an HR.  */

div.Footnotes hr {
    height:1px;
    margin:0px;
    padding:0px;
    text-align:left;
    width:25%;
}

/*  ************************************************************************  */
/*  Simulated Banner  */

/*  When scripts run, the document is presented with a banner from a 
    separate file (BANNER.HTM with styling in BANNER.CSS). So that something 
    like this shows even when scripts don't run, each document page has a 
    design-time inclusion of a simulated banner. This has Banner as its ID 
    and is assigned to the NoScript class so that it gets hidden if the 
    scripts do run. 

    The simulated banner might instead be in a NOSCRIPT block - but then it 
    shows awkwardly in Expression Web whenever a document is written or 
    edited. That the simulated banner must show well at design time is a 
    recurring complication. 

    Some colouring and spacing is particular to the fake banner.  */

#Banner {
    background-color:#EEEEDD;
    border:1px #CCCCFF solid;
    margin:0;
    padding:0;
}

/*  Don't bother with the simulated banner when printing.  */

@media print {

#Banner {
    display:none;
}

} /* @media print */

/*  =================  */
/*  Position and Size  */

/*  The simulated banner has two parts - Links and a Logo - each implemented 
    as a DIV. 

    The Links are flush with the top right. The Logo is at the bottom left, 
    necessarily clear of the Links and with padding for a little distance 
    from both the Links and the boundary.  */

#Banner #Links {
    float:right;
}

#Banner #Logo {
    clear:right;
    padding:1em;
}

/*  -----  */
/*  Links  */

/*  The links in the Links DIV are a list much as for the real banner. The 
    UL has class LinkList and each LI has class LinkListItem. Common styling 
    is defined in MASTER.CSS. The ideal, set there, is that the list items 
    are horizontal for being inline (well, inline-block). Expression Web, 
    however, seems unable to recognise this styling and instead shows the 
    NoScript banner with the links arranged vertically. So, for the author's 
    ease while editing, change to blocks that are floated left.  */

#Banner #Links ul, 
#Banner #Links li {
    border:0;
    margin:0;
    padding:0;
}

#Banner #Links ul.LinkList {
    display:block;
    float:left;
    list-style:none;
}

#Banner #Links ul.LinkList ul.PreferNoWrap {
    display:block;
    float:left;
    padding:0;
}

#Banner #Links ul.LinkList ul.PreferNoWrap li {
    display:block;
}

#Banner #Links ul.LinkList li.LinkListItem {
    display:block;
    float:left;
}

#Banner #Links a {
    background-color:#DDDDCC;
    border-bottom-left-radius:10%;      /*  Internet Explorer 9 and higher  */
    border-bottom-right-radius:10%;     /*  Internet Explorer 9 and higher  */
    color:#3333CC;
    padding:1ex 1em;
}

#Banner #Links a:hover {
    background-color:#FFFFEE;
    color:#6666FF;
}

/*  ----  */
/*  Logo  */

/*  Long, long ago, the logo had an image. Now it's just some large text.  */

#Banner #Logo p {
    color:#224488;
    font-family:"Times New Roman",Times,serif;
    font-size:2em;
    font-style:italic;
    font-weight:bold;
    margin:0;
}

/*  ************************************************************************  */
/*  Readability Limit on Line Length  */

/*  The immediate cause of this section is that if nothing's done to the 
    contrary, loading our pages into a maximised browser on a large monitor
    leaves the document page with unreadably long lines of text. 

    A good guide for the maximum width is surely what was established more 
    than a century ago for typewriters (if not long before then): 80 
    characters of fixed-pitch font. Most of our text is not fixed-pitch and 
    CSS anyway doesn't provide for counting characters: 80ex is likely not 
    far off, but let's stick to em as our font-based unit.  */

p {
    max-width:40em;
}

/*  Adjust for elements whose content is ordinarily indented.  */

blockquote {
    max-width:36em;
}

ol, 
ul {
    max-width:38em;
}

/*  Though the headers, footers and other special divisions have their 
    textual content constrained by the preceding, some also have borders. 
    Limit them too.  */

div.Header, 
div.Footer {
    max-width:40em;
}

div.Footer .Copyright, 
div.Footer .Dates {
    max-width:none;
}

div.Abstract, 
div.Notice {
    max-width:30em;
}

/*  Exempt the simulated banner and everything within it.  */

#Banner, 
#Banner * {
    max-width:none;
}

/*  Exempt anything that the HTML author does not want to wrap.  */

.ForceNoWrap {
    max-width:none;
}

/*  TO DO: 

    What's presently done here for the usual text elements can be 
    unsatisfactory when the page also has elements that we want to show at 
    full width, as with images, tables and PRE blocks. 

    The problem case has 

        viewport width < P max-width < PRE width 

    Because the document must be wide enough for the full-width element, 
    it's wide enough too for the paragraphs to extend to their max-width - 
    and then their text needs to be scrolled repeatedly for reading.  */

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