/*      ÉÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ
 PROGRAMº Menu.css                                DATE WRITTEN³ ??/??/?? ³BY³ Chuck Milbourne
        º                                         LAST CHANGED³ 10/29/25 ³BY³ Chuck Milbourne
 PURPOSEº Style Sheet for Horizontal Menu for website
 CHANGE º Changed such that each selection has background-color: rgb(22,113,114)
        º Added styling for data-title attribute                                     . ->2024Aug01CM
        º Changed font to Google's "Open Sans".
        º Adapted with Responsive Web Design techniques.
ÄÄÄÄÄÄÄÄÈÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍÍ
2025Oct29CM:  Looks reasonably good down to a viwport of just 790px.
ÍÍÍÍÍÍÍÍÍÍÍ
2024Aug01CM:  The styling for data-title only works on the Home page for unknown reasons BUT, I
ÍÍÍÍÍÍÍÍÍÍÍ   prefer it that way.
ÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄÄ*/
*                 {box-sizing: border-box; }
#Menu             { float: left; width: 100%; clear: both; height: 36px;
                    border: 0px rgb(204, 204, 204) solid;
                    font-weight:bold;  font-size: clamp(.5rem, 2.5vw, 2rem);
/*                  font-weight:bold;  font-size: 32px;                                           */
                    font-family: 'Open Sans', sans-serif;
                    Text-Shadow: 2px 2px 2px rgb(0,0,0);
                  }
#Menu ul          { margin: 0px; }
#Menu a:link      { color: white;}
#Menu a:visited   { color: white;}
#Menu a:active    { color: white;}
#Menu a:hover     { color: yellow; background-color: rgb(22,113,114); text-decoration: none;
                    text-shadow: 2px 2px 2px rgb(0,0,0)}
#Menu a:focus     { color: aqua;}
#Menu ul li       { display:inline;  }
#Menu ul li a     { border-right: 2px solid rgb(204, 204, 204);
                    float: left; padding: 1px 20px; background-color: rgb(22,113,114)}
@media screen and (min-width: 1000px)
                  {
#Menu                { margin-bottom: 30px;}
#Menu .tooltip .tooltiptext
                     {background-color: blue;}
#Menu a[data-title]:hover:after
                     {content: attr(data-title); position: absolute; top: 160px; left: 40px;
                      width: 95%;background-color: rgb(255,96,55);font-size: 24px;
                      border: 3px solid rgb(22,113,114);}
                  }