/* 27 jun 2024 */

/* order of a: stuff matters: link/visited/hover/active */

/* Colors, bluish tint

color                  #09033d; 
background-color:      #eceded;
code background:       #dce2e2;
blockquote background: #e2e5e5; 

News headers, text     #3a4b59;

*/

a    { color: #09033d; }
a: link      { text-decoration: underline dotted #09033d; }
a: visited   { text-decoration: underline dotted #09033d; }
a: hover     { color: red;     text-decoration: underline dotted red; }
a: active    { text-decoration: underline dotted #09033d; }

h1+br+img    { max-width: 100% }
div          { display: inline-block; }

/* DEFAULT IS MOBILE */

/* top bar logo and nav on all pages except home */

.menuCont    { float: right; width: 90%; margin-right: 20px; margin-left: 20px;
      padding: 5px; text-align: center;
      background-color: white; opacity: 0.5; border: 1px solid #09033d; 
      position: -webkit-sticky; position: sticky; top: 10px;
      height: 22px;
     }

.menuBox     { display: flex; flex-wrap: nowrap; justify-content: space-between;
      position: -webkit-sticky; position: sticky; top: 10px;
      float: right; width: 70%; margin-right: 20px; margin-left: 20px;
      padding: 5px; 
      background-color: white; opacity: 0.9; border: 1px solid #09033d; 
    }


.menuHome    { float: left;  text-align: left;  width: 25%; overflow: clip; }
.menuTopof   { float: right; text-align: right; width: 125px; overflow: clip; }
.menuItem    { text-align: center; margin-right: 40px; text-decoration: none; }
 
a.menuItem: link      { text-decoration: underline dotted #09033d; }
a.menuItem: visited   { text-decoration: underline dotted #09033d; }
a.menuItem: hover     { text-decoration: underline dotted red; color: red; }
a.menuItem: active    { text-decoration: underline dotted #09033d; }


/* pulldown scrollable menu */

.dropdown   { text-align: left; text-decoration: none; }

/* Each instance of this will need style for height, max-height, overflow-y: scroll, etc.
 * These work for the sr-ix home page. 
 *
 * NOTE: Each dropdown-content may need added style:
 * margin-left: XXpx;    to push hover content to the right of the menu
 *                       (margin-right for pulldown menus on the right)
 * margin-top: 15px;     to position the dropdown content such that the
 *                       mouse can reach it!
 * max-width: 500px;     Restrict hover box width
 */
.dropdown-content { 
      border: 1px solid #09033d;
      display: none; position: absolute; 
      background-color: white; 
      overflow-x: hidden; overflow-y: hidden; 
      z-index: 1; 
    } 
 
.dropdown-content a:hover { background-color: #eceded; color: white; }
.dropdown:hover .dropdown-content {display: block;}
.dropdown: hover { display: block; }

/* end top menu/pulldown menu */



/* Small "mobile" screen as defaults. Wide-screen override below. */

body     { font-family: Arial,Helvetica; font-display: swap; 
      font-size: 14pt; color: #09033d; background-color:  #eceded; }

img        {               max-width: 100%; }
.icon      { width: 60px;  max-width: 60px; height: auto; }
.rmargin   { width: 15%;   max-width: 20%;  min-width: 100px; height: auto; }
.intro     { width: 66%;   max-width: 600px; min-width: 100px; height: auto; }
.inline    {               max-width: 60%;  height: auto; margin-bottom: 20px; }
.index     { width: 33%;   max-width: 300px; height: auto; }
.full      { width: 95%;   max-width: 95%; height: auto; }
.small     { width: 20%;   max-width: 300px; min-width: 100px; height: auto; }

table     { border-collapse: collapse; vertical-align: top; margin-left: 5px; margin-right: 5px; }
.data     { width: 60%; margin-left: 40px; margin-right: 20px; border: 1px solid #0c0c0c; }
.toc      { max-width: 90%; border: 1px solid #09033d; }
table.toc tr { border: 1px solid #09033d; }
table.toc tr: hover { background-color: white; }
td        { padding: 5px 5px; word-wrap: break-word; }

ul        { word-wrap: break-word; margin-left: 5px; margin-right: 10px; width: 100%; }
ol        { word-wrap: break-word; margin-left: 5px; margin-right: 10px; width: 100%; }
dl        { word-wrap: break-word; margin-left: 5px; margin-right: 10px; width: 100%; }
li        { padding: 8px; width: 100%; }

p         { margin-left: 5px; margin-right: 5px; margin-bottom: 15px; }
small     {}
strong    { font-weight: bold; }
med       { font-size: 15pt; font-weight: bold; }
big       { font-size: 16pt; font-weight: bold; }

pre       { font-family: Courier,monospace; }
code      { font-family: Courier,monospace; 
            font-weight: bold; color: #000000; background-color: #dce2e2; }
blockquote { font-family: Courier,monospace; font-weight: bold; padding: 4px; 
      margin-left: 10px; margin-right: 10px; white-space: pre; 
      color: #000000; background-color: #e2e5e5; }
quote     { font-family: Courier,monospace; margin-left: 25px; margin-right: 25px; margin-bottom: 5px; }

h1        { margin-left: 2px; font-size: 18pt; font-weight: bold; }
h2        { margin-left: 2px; font-size: 16pt; font-weight: bold; }
h3        { margin-left: 2px; font-size: 14pt; font-weight: bold; }
h4        { margin-left: 2px; font-size: 14pt; font-weight: bold; }
h5        { margin-left: 2px; font-size: 14pt; font-weight: bold; }

hr        { margin-left: 2px; width: 80%; text-align: left; margin-bottom: 10px; }

.prose    { line-height: 1.4; width: 90%; margin-left: 20px; margin-right: 20px; }
video     { max-width: 98%; max-height: 90%; margin-left: 5px; margin-right: 5px; border: 1px solid #09033d; }
audio     { max-width: 50%; float: center; margin-left: 5px; margin-right: 5px; }

CCOMLIC   { margin-left: 2px; font-size: 12pt; font-weight: bold; }




/* Narrow screeni overrides of default. */

@media (min-width: 641px) {

.menuCont  { width: 70%; }

body     {               max-width: 1600px; }
img     {               max-width: 60%; }
.smicon   { width: 80px;   height: auto; }
.rmargin   { width: 20%; }
.intro     { width: 33%;   max-width: 400px; min-width: 200px; }
.index     { width: 33%;   max-width: 300px; min-width: 200px; }
.inline   {               max-width: 60%; padding: 20px; height: auto; margin-bottom: 50px; }
.full     {               max-width: 100%; }

p     { margin-left: 20px; margin-right: 80px; }
small     { font-size: 12pt; }
quote     { margin-left: 10px; margin-right: 10px; margin-bottom: 10px; }

table     { margin-left: 40px; margin-right: 20px; }
.toc     { max-width: 60%; border-spacing: 10px; }
.smtext    { font-size: 24pt; }

ul        { margin-left: 10px; margin-right: 20px; }
ol        { margin-left: 10px; margin-right: 20px; }
dl        { margin-left: 10px; margin-right: 20px; }

hr    { margin-left: 10px; width: 60%; }

/* For The delivery; text for extended reading. */

.prose    { font-size: 15pt; line-height: 1.4; width: 60%; margin-left: 20px; margin-right: 20px; }
video    { max-width: 80%; float: center; margin-left: 20px; margin-right: 10px; }

} /* end @media */