/* 29 jun 2026 */

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

/* 

Style hints shamelessly stolen from techtinkering.com! But
I was pretty close already.

color                  #32cd32; 
background-color:      #222129;
code background:       #222128;
links                  #ace600;
hx colors              #bfff00;

*/

body {
  background: #222129;
  color: #32cd32;
  font-family: Bitstream Vera Sans Mono, Liberation Mono, 
    Lucida Console, Lucida Sans Typewriter, monospace;
  line-height: 1.5;
  height: 100%;
  font-size: 1.1rem;
}


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

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

/* DEFAULT IS MOBILE */

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

     /* flex-wrap: was nowrap */
.menuBox { position: -webkit-sticky; position: sticky; top: 15px; display:
  flex; flex-wrap: wrap; justify-content: space-between; width: 90%; max-width:
  800px; margin-left: 5px; background-color: #222128; opacity: 0.9; 
  border: 1px solid #ace600; }

.menuTOP { 
      position: -webkit-sticky; position: sticky; top: 10px;
      height: 24px;
      margin-right: 5px; margin-left: 4px;
      margin-top: 2px; margin-bottom: 2px; 
      text-decoration: none; text-align: center;
      background-color: #222128; opacity: 0.9; 
      a:link { text-decoration: none; }
      a:hover { color: #32cd32; border: 2px solid #32cd32;}
}

.menu { 
      margin-right: 5px; margin-left: 4px;
      margin-top: 2px; margin-bottom: 2px; 
      text-decoration: none; text-align: center;
      background-color: #222128; opacity: 0.9; 
      a:link { text-decoration: none; }
      a:hover { color: #32cd32; border: 2px solid #32cd32;}
}

.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 #ace600; }
a.menuItem: visited   { text-decoration: underline dotted #ace600; }
a.menuItem: hover     { text-decoration: underline dotted red; color: red; }
a.menuItem: active    { text-decoration: underline dotted #ace600; }


/* 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 #ace600;
      display: none; position: absolute; 
      background-color: white; 
      overflow-x: hidden; overflow-y: hidden; 
      z-index: 1; 
} 
 
.dropdown-content a:hover { background-color: #333445; 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: Bitstream Vera Sans Mono, Liberation Mono, 
             Lucida Console, Lucida Sans Typewriter, monospace;
             line-height: 1.5; height: 100%; font-size: 1.1rem;
             font-display: swap; 
             font-size: 14pt; color: #32cd32; background-color: #222129; }

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


table     { border-collapse: collapse; vertical-align: top; 
            border: 1px solid #bfff00; background: #333445; 
            margin-left: 5px; margin-right: 5px; 
            background-color: #222128;
}
.data     { width: 60%; margin-left: 40px; margin-right: 20px; 
            border: 1px solid #333445; }
.toc      { max-width: 90%; border: 1px solid #333445; }
table.toc tr { border: 1px solid #bfff00; }
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; max-width: 800px; }
ol        { word-wrap: break-word; margin-left: 5px; 
            margin-right: 10px; max-width: 800px; }
dl        { word-wrap: break-word; margin-left: 5px; 
            margin-right: 10px; max-width: 800px; }
li        { padding: 8px; }

p         { margin-left: 5px; margin-right: 5px; 
            margin-bottom: 15px; max-width: 800px; }

co        { color: #222128; }
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      { white-space: pre; font-family: Courier,monospace; 
            font-weight: bold; color: #ace600; }
blockquote { font-family: Courier,monospace; font-weight: bold; padding: 4px; 
            margin-left: 10px; margin-right: 10px; white-space: pre; 
            color: black; background-color: #333445; }
quote     { font-family: Courier,monospace; margin-left: 25px; 
            margin-right: 25px; margin-bottom: 5px; }

h1        { color: #bfff00; margin-left: 2px; font-size: 160%; line-height: 1.4; }
h2        { color: #bfff00; margin-left: 2px; font-size: 140%; line-height: 1.4; }
h3        { color: #bfff00; margin-left: 2px; font-size: 120%; line-height: 1.4; }
h4        { color: #bfff00; margin-left: 2px; font-size: 110%; line-height: 1.4; }
h5        { color: #bfff00; margin-left: 2px; font-size: 110%; line-height: 1.4; }

hr         { margin-left: 5px; margin-right: 5px; 
            margin-bottom: 15px; max-width: 800px; }

video     { max-width: 98%; max-height: 90%; margin-left: 5px; 
            margin-right: 5px; border: 1px solid #ace600; }
audio     { max-width: 50%; float: center; margin-left: 5px; margin-right: 5px; }

.CCOMLIC   { max-width: 800px; margin-left: 2px; font-size: 10pt; }




/* Narrow screen overrides of default. */

@media (min-width: 641px) {

.menuCont  { width: 70%; }

body       { max-width: 1600px; }
img        {  max-width: 600px; }
.smicon    { width: 80px;   }
.rmargin   { width: 20%; }
.intro     { width: 33%;   max-width: 400px; min-width: 200px; }
.index     { width: 33%;   max-width: 300px; min-width: 200px; }
.inline    {               max-width: 600px; padding: 20px; 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; }

video      { max-width: 80%; float: center; margin-left: 20px; 
             margin-right: 10px; }

} /* end @media */