/*  ************************************************************************  *
 *                               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 expecation 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., as headings, 
    paragraphs, tables, etc., directly in the BODY. 

    This also 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. 
    
    It mostly still applies if 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. This involves a little 
    re-styling in VIEWER.CSS but always with the aim of keeping DOCUMENT.CSS 
    definitive.  */

body {
    background-color:#FFFFFF;
    margin:1em;
}

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

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

blockquote, 
p {
    line-height:1.33;
}

blockquote {
    margin:1em 2em;
}

img {
    border-width:0;
}

/*  Many pages have tables. These few rules define a house style, especially 
    for borders.  */

table {
    border-collapse:collapse;
}

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

table {
    border-width:2px;
}

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

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

/*  **************  */
/*  General 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 not fully displayed  */

.draft {
    color:#887799;
    display:none;
}

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

.input, .output, .source {
    font-family:"Courier New",Courier,monospace;
    font-size:0.875em;
    font-size:calc(1em * 0.875);
    *font-size:0.875em;
    margin-bottom:0pt;
    margin-top:0pt; 
    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 a SPAN will be 
    generated even if applying a global class. In the hope that the 
    Expression Web programmers realise this, I stick with SPAN selectors and 
    meanwhile work around the problem by making some empty definitions.  */

.citation, .definition, .emphasis, .foreign, .highlight {
}

/*  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 {
    font-style:italic;
}

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

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

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

div.Abstract p {
    font-style:italic;
}

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%;
}

/*  Though headers are always (in practice) followed by a level-1 heading, 
    footers can follow just about anything, and benefit from visual 
    separation.  */

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

div.Footer .Copyright,
div.Footer .Dates {
    font-size:smaller;
}

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

/*  *********  */
/*  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 {
    bottom:1ex;
    font-size:smaller;
    position:relative;
    vertical-align:0;
}

div.Footnotes {
    clear:both;
    width:100%;
}

/*  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. If the scripts do run, they 
    add a "display:none;" rule to hide all elements in the NoScript class.

    The simulated banner might 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.  */

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

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

@media print {

#Banner, 
.PlaceholderLinks {
    display:none;
}

} /* @media print */

/*  =====  */
/*  Parts  */

/*  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 are a list much as for the real banner. 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 the links to blocks that are floated left.  */

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

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

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

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

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

/*  The Links DIV contains an unordered list. The UL has class LinkList and 
    each LI has class LinkListItem. Formatting for these is in MASTER.CSS. 

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

#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-weight:bold;
    font-style:italic;
    margin:0;
}

#Banner #Logo span.PreferNoWrap {
    display:inline-block;
}

/*  ***************  */
/*  Decorated Links  */

img.LinkDecoration {
    display:inline-block;
    margin-left:0.25em;
    margin-right:0.25em;
}

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