/*  ************************************************************************  *
 *                                banner.css                                  *
 *  ************************************************************************  */

/*  This style sheet is for the banner page only. Load after MASTER.CSS, 
    familiarity with which is assumed.  */

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

/*  The banner page (BANNER.HTM) is loaded into an IFRAME (BannerFrame) that 
    is sized to be the whole of its containing DIV (BannerDiv) which in turn 
    has fixed position, specifically at the top of the viewport, taking the 
    whole width. This arrangement is assumed, e.g., for loose references to 
    the viewport's width. 

    That the banner is in an IFRAME is the work of DOCUMENT.JS as loaded for 
    some document page. Styling of the BannerFrame and its ancestors is the 
    work of VIEWER.CSS. The styling here is just of the banner page in its 
    IFRAME. 

    Bear in mind, though, that if the banner page is loaded directly to show 
    in its own window, then the styling in BANNER.CSS and MASTER.CSS is all 
    that the banner gets. Though this case is unwanted, we do want that the 
    banner will show acceptably.  */

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

html {

    /*  Whatever is to be done about the banner when the viewport is too 
        narrow for all parts to be shown whole, one thing is certainly not 
        wanted: scrollbars.  */

    overflow:hidden;
}

/*  It's perhaps as well to be specific that the banner's design requires 
    that both the HTML and BODY fill the IFRAME that we're loaded into.  */

html, 
body {
    height:100%;
    width:100%;
}

body {

    /*  Set a discreet colour gradient for the background, but specify a 
        plain colour to fall back to. For this gradient to work pleasingly 
        over the whole banner, it is apparently vital that the HTML (not the 
        BODY) actually be the whole banner. 
        
        The linear-gradient is available in Internet Explorer 10 and higher. 
        Earlier versions, back to 5.5, have a non-standard property named 
        filter that does much the same (if the security option "Binary and 
        script behaviors" is not disabled). Keep it in for old browsers for 
        as long as it seems to do no harm. 

        While Expression Web is the word processor, be sure to have filter 
        before the background-image. Otherwise, Expression Web removes it - 
        and any comments that follow it - from the CSS on disk. 
        
        TO DO: 
        
        The present choice of lighter colour in this gradient, #7799BB, has 
        insufficient contrast against the #DDDDEE that VIEWER.CSS sets for 
        the space between the panels and which is matched for some of the 
        banner (see below), including for text. To avoid this showing as a 
        contrast issue in at least one browser's development tools, the 
        lighter colour needs to be something like #334477. Low contrast is 
        not something to subject anyone to, but setting the suggested colour 
        is much too dark even as the average (on the understanding that the 
        contrast rarely is against the lighter end of the gradient). Sort 
        this out some time!  */

    background-color:#4477AA;
    filter:progid:DXImageTransform.Microsoft.Gradient (startColorStr="#7799BB", endColorStr="#115599", gradientType="1");
    background-image:linear-gradient(135deg, #7799BB, #115599);

    /*  Right or wrong, all layout in the banner is computed in pixels. The 
        computations are easier if the font size is always also the line 
        height (in pixels).  */

    line-height:1.0;

    /*  If the browser supports @media queries, then a narrow viewport can 
        be accommodated, however awkwardly, by VIEWER.CSS giving the banner 
        more space and by resizing and rearranging within the banner. These 
        elaborations of @media are relatively recent for Internet Explorer. 
        Before its version 9, be content just to clip the banner to its 
        right so that what remains on show is intact. 

        This min-width is determined by observation. It's slightly larger 
        than what's computed for later versions as the width that sees the 
        Logo and Links parts collide - see below. Remember to undo this in 
        the @media queries!  */

    min-width:920px;
}

/*  Let's not leave the remembering of the preceding comment to be 
    forgotten.  */

@media only screen and (max-width:920px) {

body {
    min-width:0;
}

} /* @media only screen and (max-width:920px) */

/*  ************************************************************************  */
/*  Positioning  */

/*  The banner is laid out in four parts, each implemented as a DIV. These 
    originally had absolute positioning but they are now floated, as some 
    attempt to allow the banner to grow downwards as the viewport 
    narrows. The order here is required to be their order in the HTML.  */

/*  At the top right are some site-wide Links.  */

#Links {
    float:right;
}

/*  The top left of the Banner is for a Logo, which may be either or both of 
    an image or some text. (It has been just text for well over a decade.) 
    On a wide screen, the Logo and Links will be side by side.  */

#Logo {
    float:left;
}

/*  Space at the bottom right was originally set aside for a textbox from 
    which to search the site. This, of course, would require some sort of 
    server-side magic. Experiments never turned out well. The area has been 
    repurposed to show when the site last had attention. 

    Specify right-side clearance so that the Notification, floated right, 
    cannot be placed to the left of the Links, as would happen if the screen 
    is wide enough for the Logo, Notification and Links all along the top.  */

#Notification {
    clear:right;
    float:right;
}

/*  Space at the bottom left is for navigating Subwebs. This absolutely must 
    be at the bottom, flush with the border that the banner shares with the 
    TOC and document panels.  */

#Subwebs {
    bottom:0;
    left:0;
    position:absolute;
}

/*  ************************************************************************  */
/*  Sizing  */

/*  With 12px for the font-size and for horizontal padding of links, the 
    current content (which hasn't changed in well over a decade) is a little 
    more than 340px wide. That really ought to be enough to fit whole on 
    even the narrowest of mobile phones. If the viewport is narrower than 
    this, then lose links rather than break to a second line. 

    Define a buffer to the left of the Links for its collision with the Logo 
    (which occurs when the viewport narrows to approximately 900px). 

    Vertical padding of 6px in the links brings the Links height to 24px. 

    The Links DIV contains UL and LI tags as a list of links. Sizing is 
    affected by these too, but their styling in MASTER.JS through the 
    LinkList and LinkListItem classes needs no overriding.  */

#Links {
    font-size:12px;
    margin-left:40px;
}

#Links a {
    padding:6px 12px;
}

/*  The intention in the design is that the large Logo can be side-by-side 
    with either or both of the relatively small Links and Notification. This 
    cannot happen if the Logo claims the viewport's full width, which a P 
    element (for the Logo's text) would usually do when its containing DIV 
    has no width specified. 

    With the font-size at 36px, the logo's present text (also unlikely ever 
    to change) is not quite 520px wide, counting an 18px margin to keep the 
    text from the viewport's left.  */

#Logo {
    font-size:36px;
    max-width:520px;
}

#Logo p {
    margin:24px 0 24px 18px;
}

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

/*  The text in the Notification is on two lines: a brief explanation; then 
    a date. With 12px for the font-size and a 12px margin to keep it from 
    the viewport's right edge, the Notification is not quite 120px wide.  */

#Notification {
    font-size:12px;
}

#Notification p {
    margin:24px 12px 0 0;
}

#Notification span.Date {
    display:block;
    padding:6px 0;
}

/*  The Subwebs DIV is carefully contrived to be very nearly 600px wide. As 
    with the Links, above, the Subwebs contain UL and LI tags that have the 
    LinkList and LinkListItem classes. Again, no override of their styles 
    from MASTER.JS is needed.  */

#Subwebs {
    font-size:14px;
}

#Subwebs a {
    border-width:1px 1px 0 1px;
    margin:0 2px;
    padding:6px 14px 7px 14px;
}

/*  ==========================  */
/*  Mobile Phone Accommodation  */

/*  Narrowing the viewport to 640px brings collision of the Logo and 
    Notification (at 520px and 120px, respectively). Of course, 640px is 
    chosen for its historical significance as the smallest that generations 
    of PC programmers ever imagined catering to. Horizontal space is bought 
    for the Notification by shrinking the Logo in two ways. A smaller font 
    gives mostly a vertical reduction but has a small effect horizontally. 
    Reducing the max-width allows the text to break onto two lines.  */

@media only screen and (max-width:640px) {

#Logo {
    clear:right;
    font-size:30px;
    max-width:235px;
}

#Logo p {
    margin:12px 0 12px 15px;
}

} /* @media only screen and (max-width:640px) */

/*  At 600px, the Subwebs either must break, which is not welcome, or be 
    shrunk. There must be some argument that 600 and 640 are so close that 
    this may as well be done at the latter.  */

@media only screen and (max-width:600px) {

#Subwebs {
    font-size:12px;
}

#Subwebs a {
    margin:0 1px;
    padding:3px 4px 6px 4px;
}

} /* @media only screen and (max-width:600px) */

/*  The 12px font for the Subwebs, with horizontal padding also reduced 
    disproportionally to 4px, holds the Subwebs as one line until the 
    viewport narrows to a little under 400px. This is contrived to be under 
    the 414px and 411px of popular phones from Apple and Google. How anyone 
    could get much from this website's typical content when viewing through 
    so small a screen is beyond answering, but we must go even further: 
    phones have viewports as narrow as 375 pixels (Apple) and 360 (Samsung). 
    With the font shrunk to 10px, the Subwebs DIV is just under 360px wide. 
    Anyone with a smaller screen is on their own!  */

@media only screen and (max-width:400px) {

body {
    min-width:360px;
}

#Links {
    font-size:10px;
}

#Links a {
    padding:5px 10px;
}

#Subwebs {
    font-size:10px;
}

#Subwebs a {
    margin:0 1px;
    padding:2px 5px 5px 5px;
}

} /* @media only screen and (max-width:400px) */

/*  ************************************************************************  */
/*  Decoration  */

/*  If only for now, choices of font, colour and other styling are 
    independent of screen width.  */

/*  =====  */
/*  Links  */

#Links a {
    background-color:#223366;           /*  was #224488, but low contrast  */
    border-bottom-left-radius:3px;      /*  Internet Explorer 9 and higher  */
    border-bottom-right-radius:3px;
    color:#CCCCCC;
}

#Links a.highlight {
    color:#FFFFFF;
}

#Links a:hover {
    background-color:#88AACC;
    color:#FFFFFF;
}

/*  ====  */
/*  Logo  */

#Logo p {
    color:#FFFFFF;
    font-family:"Times New Roman", Times, serif;
    font-style:italic;
    text-shadow:2px 1px 1px #996666;    /*  Internet Explorer 10 and higher  */
}

#Logo a {
    background-color:transparent;
    color:#FFFFFF;
    text-decoration:none;
}

/*  ============  */
/*  Notification  */

#Notification p {
    color:#CCCCCC;
    white-space:nowrap;
}

#Notification p span.Date {
    color:#EEEEEE;
}

/*  =======  */
/*  Subwebs  */

/*  The border colour of all links, must match the border colour that is set 
    in VIEWER.CSS for the common space between the banner, TOC and document 
    panels.  */

#Subwebs a {
    background-color:transparent;
    border-color:#DDDDEE;       /* match with BannerDiv in VIEWER.CSS */
    border-top-left-radius:3px;
    border-top-right-radius:3px;
    border-style:solid;
    border-width:1px 1px 0px 1px;
    color:#DDDDEE;
}

/*  The links are slightly brighter when hovered. The background colour must 
    be brighter than whatever shows through from the whole banner, i.e., 
    brighter than the brighter end of the BODY's gradient. It's good if the 
    same colour is used in other panels, especially for hover effects, but 
    it is not necessary.  */

#Subwebs a:hover {
    background-color:#88AACC;
    color:#FFFFFF;
}

/*  One link is "current" and shows very differently - as if it's part of 
    the frame that the banner doesn't know it's in.  */

#Subwebs .Current a, 
#Subwebs .Current a:hover {
    background-color:#DDDDEE;   /* match with BannerDiv in VIEWER.CSS */
    color:#000000;
}

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