/* Body and Main */
body{ background-color: seashell;   color: dimgrey;
      font-family: Arial, Helvetica, sans-serif;}
#page{position: relative;
      min-height: 89vh;}
main{ max-width: 1280px;
      padding: 0 15px 0 15px;
      margin: 140px auto 80px;}

/* Header */
header{ position: absolute;
        background-image: url(/Images/img-banner-clouds.png);
        background-size: contain;   background-repeat: repeat-x;
        height: 120px;    width: 100%;    top: 0;   left: 0;}
@supports (-webkit-text-stroke: 1px black) {
  header h1{-webkit-text-stroke-width: 1px;   -webkit-text-stroke-color: black;}}
@supports not (-webkit-text-stroke: 1px black) {
  header h1{text-shadow: 1px 0px 0 black, -1px 0px 0 black, 0px 1px 0 black, 0px -1px 0 black;}}
#hdr{ height: 120px;  max-width: 1280px;
      margin: 0 auto;}
header h1{position: absolute;   color: white;
          bottom: 5px; margin: 0 auto;}
@media (max-width: 1300px) {
  header h1{position: absolute;   color: white;
            left: 15px; bottom: 5px; margin: 0 auto;}}
main h1{color: darkgreen;}
h2,h5,h6{color: darkgreen;}
h3{ color: darkgreen;
    margin-bottom: 0.3em;}
h4{ color: darkgreen;
    margin-bottom: 0;}

/* Footer */
footer{ position: absolute;
        width: 100%;    bottom: 0;    left: 0;}
footer > a{ position: absolute;
            bottom: 0;  right: 0;}
.nav-in::after{ content: ' > ';}
.nav-out::after{content: '️ ... ';}
/*.nav-in-z::after{ content: '️';}
.nav-out-z::after{content: '️';}*/

/* General */
p{line-height: 1.33em;  margin-top: 0.4em;  margin-bottom: 0.8em;}
li{ line-height: 1.33em;}
dt{ margin-top: 0.4em;}
dd{ line-height: 1.33em;}
ul > li{list-style-type:"\27A2";}
dt{ font-weight: bold;}
blockquote{ color: darkgreen;}
q {font-style: italic;}
cite a{ color: inherit; text-decoration: none;}

/* Tables */
table,th,td{border-collapse: collapse;    border: 1px solid darkgrey;
            padding: 3px 5px 2px 5px;     text-align: center;}
tbody th{text-align: left;}
caption{font-weight: bold;  font-size: 1.1rem;  color: darkgreen;}

/* Images */
main img{ width: min(1152px, auto); height: auto;
          max-width: 90vw;          max-height: 90vh;}
figure{ margin-left: 0px;}
figcaption{ font-weight: bold;  font-size: 1.1rem;  color: darkgreen;}

/* Mobile Tooltips */
@media (pointer: coarse), (hover: none) {
  [title] { position: relative;
            display: inline-flex;
            justify-content: center;}
  [title]:focus::after {
        content: attr(title);
        position: absolute;   top: 90%;
        color: #000;          background-color: #fff;
        border: 1px solid;    width: fit-content;
        padding: 3px;}}

/* Classes */
.notbold{ font-weight: normal;}
.smaller{ font-size: smaller;}
.larger{  font-size: larger;}
.passive{ color: maroon;
          font-style: italic;}
.quote{   line-height: 0.2;}

.darkgreen {color: darkgreen;}
.red       {color: red;}
.dodgerblue{color: dodgerblue;}

.smallcaps{ font-variant: small-caps;}
.uppercase{ text-transform: uppercase;}
.lowercase{ text-transform: lowercase;}
.titlecase{ text-transform: capitalize;}
.condensed{ font-stretch: condensed;}
.expanded{  font-stretch: expanded;}

.MathJax{   font-size: 1em !important;}