*         { box-sizing: border-box; }

body      { background: #ffffff url(i_bg.png) no-repeat left top; 
               /* white, with a non-repeating image top-left */
          }

th, h1    { color: #1f004d; 
            font: italic 1.2em "Trebuchet MS", sans-serif; 
            font-weight: bold; 
            text-align: center; }
h2, h3, h4, h5, h6
          { color: #1f004d; 
            font: 1.4em "Trebuchet MS", sans-serif; }
p, li     { font: 1.2em "Trebuchet MS", sans-serif; 
            color: #1f004d; 
            clear: none; }
img       { max-width: 100%; 
            height: auto;
            border: none; }
a         { color: #1f004d; }

/* headers and footers */
.hdr      { min-height: 260px; 
            }                                            /* cover most of graphic */
.ftr      { background-color: #80002a; }                 /* cranberry */
.hdr,.ftr { margin: 20px -15px; 
            padding: 30px; 
            clear: both; }
.hdr h1   { text-align: right; 
            font-size: 1.8em; }
.ftr p    { color: white; }

/* navigation bar */
.hdr ul   { list-style-type: none;                       /* the menu */
            margin: 0; 
            padding: 0; 
            min-height: 40px; }
.hdr li   { float: left;                                 /* menu items */ 
            color: white; 
            padding: 10px;
            background-color: #1f004d; }                 /* purple */
.btn, li a                                               /* .btn for non-links */
          { display: inline-block;
            color: white; 
            text-decoration: none; }
li a:hover, .drop:hover, .btn:hover                      /* mouse over menus */
          { background-color: #80002a; }                 /* cranberry */
.drop     { position: relative;                          /* drop-down within menu */
            display: inline-block; 
            cursor: pointer; }
.drcn     { display: none;                               /* = drop-down content */
            position: absolute;
            z-index: 1;
            background-color: #c0d1e8;
            min-width: 250px;
            margin-top: 5px;
            margin-left: -10px; }
.drcn a   { color: #1f004d;                              /* links within drcn */
            display: block;
            padding: 10px; }
.drcn a:hover                                            /* mouse over drcn */
          { background-color: #80002a;
            color: white; }
.drop:hover .drcn                                        /* make it visible */
          { display: block; }

/* columns */
.left, .right, .plain
              { width: 100%;                             /* no columns on phones */
                padding-top: 10px; }
.right        { margin-top: -15px; }
.left, .plain { margin-top: 15px; }

@media only screen and (min-width: 768px) 
{
    .left, .plain
              { width: 35%;
                min-height: 200px; }
    .left a   { font-size: 1.2em; }
    .right    { width: 65%; }
    .left, .right, .plain
              { float: left;
                padding-left: 10px; }
    .row      { border-bottom: solid thin #000033; }
    .row::after                                          /* stop stuff overlapping */
              { content: "";
                clear: both;
                display: table; }
    .sm       { display: none; }                         /* show only on small screens */
}

/* universe buttons  */
.left a   { text-decoration: none;
            color: #1f004d;  
            border-top: solid #80002a;
            border-bottom: solid #80002a;
            padding: 10px; }
.left a:hover
          { background-color: #80002a;
            color: white;
            border: none;
            border-radius: 5px; }
.left img { margin-top: 10px;
            margin-bottom: 0; }

/* universe state, new, note, other text types */
.active   { background-color: rgba(128,0,41,0.5);          /* faded cranberry */
            color: #1f004d; }
.inact    { background-color: rgba(192,209,232,1); }       /* blue-grey */

.ind      { margin: 80px; }
.note     { font-size: 0.8em; }
.mid      { text-align: center; }
.rt       { text-align: right; }
.new      { color: #80002a; }
.sec      { margin-top: 50px; }

/* table rules */
table     { border-collapse: collapse; }
td a:link, td a:visited, td a:active 
          { color: #1f004d; }
th, td    { background-color: #ffffff; 
            border: thin ridge #999999;
            padding: 10px; }
td p      { color: #1f004d; }

/* miscellaneous rules   */
.main     { width: auto; 
            clear: both;
            padding: 0em;
            margin: 0 auto; }
.clear    { clear: both; }

.sticky   { position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 0; }

hr        { border: thin ridge #1f004d; width: 75%; }