/* 23 apr 2024 */

/* RAMBLERLORE -- DROPDOWN MENU IS DIFFERENT */

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

/* Colors

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


*/


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 */

/* fixed non-scrolling box at top of screen */
.menuBox { display: flex; flex-wrap: nowrap; 
      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; 
      height: 60px;
    }

/* this houses the active element */
.menuCont  { width: 100%; }

.menuIcon  { height: 60px; width: 60px; margin: auto; }
.menuHome  { float: left;  text-align: left;  width: 35%; overflow: clip; }
.menuItem  { float: center; margin: auto; }
.menuTOP   { float: right; margin: auto; margin-right: 20px; }

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; }

.dropdown  { } 

/* height: 600px; width: 200px; overflow-y: scroll; */
.dropdown-content { 
      display: none; position: absolute; z-index: 1;
      overflow-x: clip; overflow-y: clip;
      background-color: white; color: #09033d; border: 1px solid #09033d; 
      width: 350px; 
    } 

.dropdown-content a { padding: 2px 6px; text-decoration: none; display: block; } 
.dropdown-content a:hover { background-color: #eceded; color: white; } 
.dropdown:hover .dropdown-content { display: block; } 
.dropdown:hover .dropbtn { background-color: #eceded; color: white; } 


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

img      {width:100%;  height:auto;}
.icon    {width:80px;  max-width:60px;}
.rmargin {width:15%;   max-width:20%;   min-width:100px;}
.intro   {width:66%;   max-width:600px; min-width:100px;}
.modest  {width:100%;  height:auto; }
.inline  {width:100%;  height:auto; }
.index   {width:100%;  max-width:200px; min-width:100px; }
.full    {width:100%;  max-width:100%;}

/* the tr:hover is used in min index's article tables. */
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      {width:60%; max-width:90%; border: 1px solid #0c0c0c; }
table.toc tr  {border:1px solid #0c0c0c;}
table.toc tr:hover {background-color: white;}

td        {padding:5px 5px; font-size:14pt; 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: 4px; width:100%;}

p       {margin-left:7px; margin-right:5px; margin-top: 0px; margin-bottom:15px;}
small   {}
strong  {font-weight:bold;}
med     {font-size:13pt; font-weight: bold;}
big     {font-size:14pt; font-weight: bold;}
pre     {font-family:Courier; line-spacing:16pt;}
code    {font-family:Courier,monospace; font-weight:bold; background-color:#dce2e2; color:black; }
blockquote {font-family:Courier,monospace; color:black; background-color:#dce2e2; 
        font-weight:bold; margin-left:10px; margin-right:10px; white-space:pre; }
quote  {font-family:Courier,monospace; margin-left:5px; margin-right:5px; margin-bottom:5px; }

h1     {margin-left:2px; font-size:20pt; font-weight:bold;}
h2     {margin-left:2px; font-size:18pt; font-weight:bold;}
h3     {margin-left:2px; font-size:16pt; font-weight:bold;}
h4     {margin-left:2px; font-size:15pt; font-weight:bold;}
h5     {margin-left:2px; font-size:15pt; 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; }




/* "desktop" width screens inherit default. */

@media (min-width: 641px) {

body     {width:100%;  max-width:1600px; font-size:14pt; background-color: #eceded;}

img      {max-width:80%;}
.rmargin {width:20%;}
.intro   {width:33%;   max-width:400px; min-width:200px; }
.index   {width:100%;   max-width:400px; min-width:200px; }
.modest  {max-width:40%;} 
.inline   {max-width:40%;}
.full    {max-width:90%;}

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

table    {margin-left:40px; margin-right:20px;}
.toc     {width:60%; border-spacing:10px;}

ul       {font-size:14pt; margin-left: 10px; margin-right: 20px;}
ol       {font-size:14pt; margin-left: 10px; margin-right: 20px;}
dl       {font-size:14pt; margin-left: 10px; margin-right: 20px;}

} /* end if desktop @media */