/* SECTION v. ARTICLE  The manual does not specify "rank".  One might say
   that a newspaper contains several sections - news, business, sport etc.,
   and the sports section, say, contains several articles.
   But a scientific article (paper) contains several sections - intro,
   background, maths, results, conclusion, etc..
   The manual for NAV does say that a NAV relates to a SECTION (or a document)
   and certainly a second SECTION ignores the NAV(s) of the first SECTION.
*/

ARTICLE { width: 100%;                                            /* ARTICLE */
          min-width: 500px;
          padding: 2px;
          border:  1px solid brown;
          background-color: lightpink;
        }

/* <header>  Defines a header for the document or a section */
HEADER { text-align: center;                                       /* HEADER */
         border: 1px solid black;
         color: black;
         background-color: lightgrey;
         clear: both;
       }

/* <nav>  Defines navigation links in the document */
NAV { background-color: #DDFFDD;                                      /* NAV */
      width:auto;  /* auto | 120px | 2cm | ... */
      min-width:  80px;
      max-width: 150px;
      margin:  0px;
      padding: 1px;
      border:  1px solid gray;
      color: black;
      overflow: hidden;
    }

NAV.left  { float: left;                                         /* NAV.left */
            /* position: fixed;  NB. zaps the SECTION's auto margin. */
            /* 'fixed' means the nav doesn't scroll off screen, but  */
            /* a SECTION's auto margin ignores such a NAV.           */
          }

NAV.right { float: right;                                       /* NAV.right */
          }

/* also see header and footer (and nav) */
SECTION { margin-left:  auto;                                     /* SECTION */
          margin-right: auto;
          padding: 2px;
          border:  1px solid green;
          color: black;
          background-color: lightblue;
          overflow: hidden;
        }

/* <footer>  Defines a footer for the document or a section */
FOOTER { text-align: center;                                       /* FOOTER */
         border: 1px solid black;
         color: black;
         background-color: lightgrey;
         clear: both;
       }
/* ......................................................................... */

BODY   { background-color: white;  /* default colour of bg; see below   */
         color: black;             /* default colour of text */
       }

BODY.BGweakGrey { background-color:EEEEEE; }  /* e.g., for older news pages */
/* ......................................................................... */

.break   { page-break-before: always; }  /* Page Break, or not...      */

.nobreak { page-break-inside: avoid;  }  /* e.g. SPAN class=nobr, ditto TR  */
                                              /* And, no line break... */

.nobr    { white-space: nowrap; }            /* SPAN class=nobr ~ NOBR */


.floatL    { float: left;  }
.floatR    { float: right; }
.clearAll  { clear: both;  }    /* BR CLASS=clearAll  ~ BR CLEAR="all" */
.clearBoth { clear: both;  }    /* BR CLASS=clearBoth ~ BR CLEAR="all" */
.width200  { width: 200px; }

.weakRed    { color: #880000; }  /* e.g., FONT CLASS=weakRed, ditto P */
.weakGreen  { color: #008800; }  /* for colours of text */
.weakBlue   { color: #000088; }  /* -"- */
.weakGrey   { color: #BBBBBB; }  /* -"- */


TABLE { border-collapse: collapse;   /* ~ cellspacing=0 */          /* TABLE */
        border: 0px solid black;     /* ~ BORDER=0 */
        page-break-inside: auto;
      }

TABLE.border0 { border: 0px; }             /* ~ BORDER=0, is default */
TABLE.border1 { border: 1px solid black; } /* ~ BORDER=1 */

TABLE.BGwhite  { background-color:#FFFFFF; }  /* table background */
TABLE.BGyellow { background-color:#FFFFCC; }

TBODY { border: inherit; }       /* don't forget, even if implicit ! */
TR    { border: inherit; }
TH    { border: inherit; }
TD    { border: inherit; }
THEAD { display: table-header-group }
TFOOT { display: table-footer-group }

.bottom { vertical-align:bottom; }    /* e.g. TR & TD  VALIGN=... */
.middle { vertical-align:middle; }
.top    { vertical-align:top;    }
.left   { text-align:left;  }         /* e.g. TD ALIGN=...  */
.right  { text-align:right; }

                                       /* FORM elements ... */
TEXTAREA { font-family: monospace; }   /* default TEXTAREA */
INPUT    { font-family: monospace; }   /* default INPUT area */

HR    { border-width:1px; border-style:solid; }  /* ~ [HR SIZE=1 NOSHADE] */


H1, H2, H3, H4, H5, H6 {                                         /* headings */
   page-break-inside: avoid;
   page-break-after:  avoid;  }   /* ? ...after  not in 2016 firefox, bug? */
/* see ...
   http://stackoverflow.com/questions/34808650/orphan-css-how-avoid-headers-h1-h2-on-bottom-page
*/

H1 { font-size: 1.7em; }  /* default seems smaller ? */
H2 { font-size: 1.5em; }
H3 { font-size: 1.3em; }
H4 { font-size: 1.1em; }

CODE, PRE, TT  { font-size: 1.05em; }

.smallish { font-size: 0.9em; }
.small    { font-size: 0.8em; }  /* e.g. [SPAN CLASS=small] ...small text... */
.smaller  { font-size: smaller; }
.xsmall   { font-size: 0.6em; }  /* or [P ...], or [DIV ...]  */
.large    { font-size: 1.2em; }
.xlarge   { font-size: 1.5em; }
.larger   { font-size: larger; }

A         { color: black; }
A:link    { color: blue; }
A:visited { color: darkblue; }
A:hover   { color: red;  }
A:active  { color: blue; }

DIV.center { text-align:center; }   /* e.g., DIV CLASS=center  */

IMG.center { display: block;
             margin:  auto;  }      /* e.g., IMG CLASS=center  */
/* ......................................................................... */

/* (c) Lloyd Allison, 5 Dec 2016. */