body { background-color: #FFFFFF; font-family: Tahoma,Arial,sans-serif; }

 .boxed {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 } 

 .foot-wrapper {
     display: grid;
     grid-template-columns: auto auto auto;
     gap: 10px;
 }

 .foot1     {font:  10pt Arial,sans-serif; color: gray; text-align: left;}
 .foot2     {font:  10pt Arial,sans-serif; color: gray; text-align: center;}
 .foot3     {font:  10pt Arial,sans-serif; color: gray; text-align: right;}
 .copyright {font:  10pt Arial,sans-serif; color: gray}

 .grid-ul-wrapper {
     display: grid;
     grid-template-columns: .3fr .3fr .3fr;
     gap: 10px;
 }

 .grid-wrapper {
     display: grid;
     grid-template-columns: .5fr .5fr;
     gap: 10px;
 }
 .grid-item {
     border: 1px solid rgba(0, 0, 0, 0.8);
     padding: 10px;
 }

 .grid-wrapper70 {
     display: grid;
     grid-template-columns: .7fr .3fr;
     gap: 10px;
 }
 .grid-item70 {
     border: 0;
     padding: 10px;
 }

  a          { color: #6c63a2; text-decoration: none; }
  a:visited  { color: darkslateblue }
  a:hover    { color: blue; text-decoration: underline; }

 .centered  { text-align: center; }

 .indent    { margin-left: 1.1in; }

 .rightImage { height: 180px; float: right; margin-left:20px }
 .menuIcon   { height: 40px; /* display: float; */
	       padding-top: 1em;
	       padding-left:1em; }

 .banner    {font-family: Tahoma,Arial,sans-serif; width: 100%;
	     vertical-align: middle;
	     min-height: 2.0in; 
	     box-sizing: border-box;
	     background-color: #4498E9; }  

 .banner2   {font-family: Tahoma,Arial,sans-serif; width: 100%;
	     vertical-align: middle;
	     min-height: 1.5in; 
	     background-size: cover;
	     box-sizing: border-box;
	     background-color: transparent; }  

 .bandw     {font-family: Tahoma,Arial,sans-serif; width: 100%;
	     vertical-align: middle;
	     min-height: 24px; /* .5in; */
	     box-sizing: border-box;
	     background-color: lightgrey; }  

 .header    {font-size: clamp(20px,4vw,50px); 
	     font: Tahoma,Arial,sans-serif; letter-spacing: +8px; width: 70%;
	     display: inline-block; padding-left: 1em; padding-top: .5em;
	     vertical-align: middle; max-height: 2.0in;
	     box-sizing: border-box;
	     /* float: left;  screws things up - not with inline */
	     background-color: inherit }
	     
.title     {font: 12pt Tahoma,Arial,sans-serif; font-weight: bold; }
.title2    {font: 14pt Tahoma,Arial,sans-serif; font-weight: bold; }
.cite      {font: 8pt Tahoma,Arial,sans-serif; font-weight: italic; }

.festbanner { height: .90in; font: 24pt Tahoma,Arial,sans-serif;         vertical-align: middle;  background-color: #99c2ff; padding: 20px;}

.mosasuarImage {
    min-width: 200px;
    max-width: 800px;
    width: 100%;
}
    
}
 input[type=button] {
        padding: 5px 15px;
        background: lightgray;
        border: 0 none;
        cursor: pointer;
	font-size: 1.5vw; /* 1vw; */
        -webkit-border-radius: 5px;
        border-radius: 5px;
 }

 .linkrow { 
    gap: 10px;
    width: 100%;
    display: grid;
    grid-template-columns: .32fr .32fr .32fr ;
    font-size: clamp(14px,2vw,28px);
 }
 .ablock {
    font: Tahoma,Arial,sans-serif; 
    display: inline;
    background-color: lightblue; 
    font-size: inherit;
    width: 20vw;
    text-align: center;
}

.ablock a {
    display: inline-block;
    text-align: center;
    margin: 2px;
}

 .logo      { min-height: 2.0in; width: 30%; padding: 6px; box-sizing: border-box;
	      display: inline; float: right; background-color: inherit}

 .icons     { padding-top: 1em; }

 .facebook  {font: 12pt Lucidas,sans-serif; text-align: right; color: #3D5B9A; 
	     padding-top: 10px; padding-right: 1em; padding-bottom: .5em;}


 /* Style the active link (or home/logo) */
 .active {
     background-color: #4498E9;
     color: white;
 } 
 
 /* https://www.w3schools.com/howto/howto_css_dropdown.asp */
 
 /* Bogus hack to move menu over */
 
 .droppad {
     float: left;
     width: 2px
 }
 
 .dropbtn {
     /* background-color: #04AA6D; */
     color: black; /* #4498E9; white; */
     margin: 2px;
     background-color: inherit;
     /* position: relative; deleted - no match to websited version */
     padding: 8px;
     float: left;
     font-size: 20px;
     border: none;
 }
 
 .dropdown {
     position: relative;
     /* W3 example is inline-block.  But it comes out underneath and messes up my Facebook/Twitter Icons */
     display: inline;             
     /* CRITICAL OR NOT?  I deleted and it seemed to work ok */
     /* cursor: pointer;  */
     /* So it floats over the menu button and we don't leave the popup 
	because of space between 'Menu' and the entries */
     float: left;
 }
 
 .dropdown-content {
     display: none;
     /* cursor: pointer - not needed, only on the a */
     position: absolute;
     background-color: #f1f1f1;
     min-width: 160px;
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     z-index: 1;
 }
 
 .dropdown-content a {
     color: black;
     padding: 8px 16px;
     text-decoration: none;
     display: block;
 }
 
 .dropdown-content a:hover {background-color: #ddd; }

 .dropdown:hover .dropdown-content {display: block;}

 .dropdown:hover .dropbtn {background-color: #4498E9;}

 @media screen and (max-width:740px) {

     .grid-wrapper { grid-template-columns: auto;   }
     .grid-ul-wrapper { grid-template-columns:  auto;  }
     .grid-wrapper70 { grid-template-columns: auto;   }
     .grid-item70 td { font-size: 14; height: 12; }
     .grid-item70 { font-size: 14; }

     .foot-wrapper { grid-template-columns: auto; }
     .foot1 { text-align: center; }
     .foot2 { text-align: center; }
     .foot3 { text-align: center; }
     
     .rightImage { height: 80px; float: right;  max-height: 1.25in }
     .banner { min-height: .9in }
     .banner2 { min-height: .9in; background-image: none; background-color: #4498E9; }
     .header { padding-top: 14px; min-height: inherit; 
	       width: 100%; text-align: center; }
     .logo   { display: none; }
     input[type=button] {
	font-size: 2vw; /* 1vw; */
     }
 }

 @media screen and (max-width:350px) {
     .header {
	 font-size: 18px;
     }
 }