body {
   background-color: #EEE8CD;         /* cornsilk2 */
   font-weight: bold; 
   font-size: 10pt;
   line-height: 14pt; 
   font-family:Verdana,Helvetica,Arial,sans-serif;
}

a:link    {
   color: #800000;                                 /* maroon */
   text-decoration: none;          /* this supresses the underlined links */
}
a:visited { color: black }
a:hover   { color: #C71585; text-decoration; }     /* medium violet red */
a:active  { color: red }

nav {
   padding: 1rem;
   display: flex;
   flex-direction: row;
   background-color: #EEE8CD;         /* cornsilk2 */
}

nav a {
   font-weight: normal; 
   font-size: 8pt;
   flex-grow: 1;
}

nav a:link {
   text-decoration: underline;
}

.header-main {
   top: 0;
   width: 100%
   height: 60px;
   display: flex;
   flex-direction: row;
   justify-context: flex-end;
   z-index: 1000;
}
      
.header-main img {
   display: flow;
   margin-left: 10px;
   margin-right: 10px;
   flex-grow: 1;
   width: 80%;
}


.main-wrapper {
   display: flex;
   flex-direction: column;
}

.main-top {
   display: flex;
   flex-direction: column;
   flex: 1; /* Allows the main content to grow and fill available space */
   flex-grow: 1;
   width: 100%;
}

.main-top hr {
   width: 100%;
}

.main-body {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: top;
}
      
.main-body img {
   margin: 10px;
   max-width: 50%;
   object-fit: contain;
}

.main-body hr {
   width: 100%;
}

.body-text {
   flex: 1; /* Allows the main content to grow and fill available space */
   margin-left: 20px;
   min-width: 30%;
   max-width: 50%;
   font-family:sans-serif;
   font-size:10pt;
   color: #00008B;             /* Darkblue */
   font-weight: normal; 
}

.quotation {
   font-weight: normal; 
   font-size: 10pt;
   font-style: normal;
   color: darkred;
   padding-left: 4px;
   margin-left: 20px;
}

.annotation {
   font-weight: normal; 
   font-size: 8pt;
   font-style: italic;
   color: gray;
   padding-left: 4px;
}

.pagename {
   color: gray;
   font-weight: bold; 
   font-size: 11pt;
   line-height: 14pt; 
   font-family:Verdana,Helvetica,Arial,sans-serif;
}

/* hide the mobile specific elements here
.xxxxxxxxxxx {
   display: none;
}
 */
 
.popupmenu {
   background-color: #EEE8CD;         /* cornsilk2 */
   flex-grow: 1;
   right: 8;
   z-index: 900;
}

dialog {
   background-color: #EEE8CD;         /* cornsilk2 */
   margin: 5;                         /* `margin: auto;` is the default. */
   transform: translateX(-50%);
   left: 80%;
}

.menu-button {
   display: none;     /* hide mobile specific element */
   background-color: #EEE8CD;         /* cornsilk2 */
   font-family: "Verdana", sans-serif; /* Changes the font type */
   font-size: 14px;                     /* Changes the font size */
   font-weight: bold;                   /* Changes the font weight */
   color: black;                        /* Changes the font color */
   border-color: black;                 /* Changes the font color */
   /* padding: 15px 32px;                Adds space around the text */
   /*border: none;                       Removes default border */
   cursor: pointer;                     /* Changes cursor to pointer on hover */
}

/* MOBILE VERSION */

@media only screen and (max-width: 600px) {
   /* hide the full nav here and display the popup nav button instead */
   nav {
      display: none;
   }
   .menu-button {
      display: block;
   }
   /* for debugging only
   body {
      background-color: yellow;
   }
   */
         
   .main-body img {
      max-width: 35%;
   }
}