/* CSS file 

    Adjustments to W3.css elements used by the new NABF web pages.

    Last updated: 
    
    4/6/2022 3:22:30 PM
    
*/

    body {
      border-style:none;
      border-radius:25px;
      background-color: DarkRed;
      margin:auto;
      position: relative; /* For affix */
      max-width: 1600px;
      font-size:15px;
    }
    
    .pageBody {
        border-style: none;
        border-radius: 25px;
        background-color: #F8FFFF;
        max-width: 1100px;
        margin: 20px auto;
        padding-bottom: 1px;
    }
    
    .proj {
      border:8px outset red;
    }
    
    .tdproj {
      border:1px solid red;
      color:red;
      padding:15px;
    }
    
    .C20Black {
      text-align:center;
      font-size:20px;
      color:Black;
    }
    
    .C20Red {
      text-align:center;
      font-size:20px;
      color:Red;
    }
    
    .L20Black {
      text-align:left;
      margin-left: 20px;
      font-size:20px;
      color:Black;
    }
    
    .L20Red {
      text-align:left;
      margin-left: 20px;
      font-size:20px;
      color:Red;
    }
    
    .C24Black {
      text-align:center;
      font-size:24px;
      color:Black;
    }
    
    .C24Red {
      text-align:center;
      font-size:24px;
      color:Red;
    }
    
    .C30Black {
      text-align:center;
      font-size:30px;
      color:Black;
    }
    
    .C30Red {
      text-align:center;
      font-size:30px;
      color:Red;
    }
    
    .Cphoto {
      text-align:center;
      padding:.5%;
      border-radius:2%;
      background-color:black;
    }
    
    .CphotoTxt {
      text-align:center;
      padding:10px;
      border-radius:5%;
      background-color:#FFFF80;
      font-size:22px;
    }
    
    .Sphoto img {
      border:5px solid black;
      border-radius:15%;
      margin:5%
    }
    
    .Sphoto img:hover {
      border:5px solid Red;
    }
    
    .Cphoto img {
      width:100%;
      border-radius:1.5%;
    }
    
    table.textbody {
      width:100%;
      table-layout:fixed;
    }
  
    .affix {
        top:0;
        width: 95%;
        z-index: 9999 !important; /* Overlay other texts and data */
    }
    .affix ~ .container-fluid {
       position: relative;
       top: 0px;
    }
    
    .B {
      font-weight:bold; 
    }
    
    .Big {
      font-size:25px;
    }
  
    .Big a {
      text-decoration: underline;
    }
  
    .C {
      text-align:center;
    }
    
    .imgC {
      padding:0 60px;
    }
    
    hr {
      margin: 0px;
      border-top: 1px solid black;
    }
  
    /* Beginning of Web text controls */
    
  .cal1 {
    border: 8px ridge Red;
    background-color:#F8FFFF;
    padding: 3px;
    margin:10px;
    width: 90%;
  }
  
  .cal2 {
    border: 8px ridge Silver;
    background-color:#F8FFFF;
    padding: 3px;
    margin:10px;
    width: 90%;
  }
  
  .calhead {
    text-align:center;
    font-weight:bold;
    font-style:italic;
    font-size:35px;
    background-color: #BFFFFF;
  }
  
  .calhead1 {
    text-align:center;
    font-weight:bold;
    font-style:italic;
    font-size:35px;
    background-color: #DFFFFF;
  }
  
  .calhead2 {
    text-align:center;
    font-weight:bold;
    font-style:italic;
    font-size:35px;
    background-color: #FF99FF;
  }
  
  .calhead3 {
    text-align:center;
    font-weight:bold;
    font-style:italic;
    font-size:35px;
    background-color: #FF99BF;
  }
  
  .calBody1 {
    font-size:16px;
    padding:10px;
    background-color: #BFFFFF;
  }
  
  .calBody2 {
    font-size:16px;
    padding:10px;
    background-color: #FFBBFF;
  }
  
  .calBody3 {
    font-size:16px;
    padding:10px;
    background-color: #FFBBBF;
  }
  
  .textbodytop {
    width:100%;
/*    border-top:6px double silver;
    border-right:6px double silver;
    border-left:6px double silver;
    border-bottom:0px double silver;
    border-radius:25px 25px 0 0;
    border-collapse:collapse;  */
    margin:0px auto 5px auto;
    background-color:white;
    table-layout:fixed;
    font-size:20px;
  }
  
  .textbodybtm {
    width:100%;
/*    border-top:0px double silver;
    border-right:6px double silver;
    border-left:6px double silver;
    border-bottom:6px double silver;
    border-radius:0 0 25px 25px;
    border-collapse:collapse;  */
    margin:0px auto 5px auto;
    background-color:white;
    table-layout:fixed;
    font-size:20px;
  }

  .aligntop {
    vertical-align:top;
  }
  
  .mapArea {
    width:100%;
  }
  
  .cellArea {
    width:60%;
  }
  
  .blkBdr {
    border: 2px solid black;
    border-radius: 10px;
  }
  
   /* ol counter is lower case alpha */
   .lAlpha {
    list-style-type:lower-alpha;
   }
   
   /* list marker is a filled circle */
   .lDisc {
    list-style-type:disc;
   }
   
   /* list marker is blank */
   .lNone {
    list-style-type:none;
   }
   
   /* list marker is blank indented by 110px */
   .lNoneIn110 {
    list-style-type:none;
    margin-left:110px;
   }
   
   .pagetext {
/*      margin:0px 0px 20px 50px; */
      padding:0px 20px;
      text-align:left;
   }
   
   .pagetextBorder {
      margin:5px 0px;
      padding:2px;
      border:6px double silver;
      border-radius:25px;
      background-color:white;
      overflow: hidden;
   }
   
   .pagetextBorderRed {
      margin:5px 0px;
      padding:2px;
      border:6px double red;
      border-radius:25px;
      background-color:white;
      overflow: hidden;
   }
   
    button.hidden-text {
      width:85%;
    }
    
    button.hidden-text:hover {
      background-color:DarkRed;
      color:white;
    }
    
   .in05pct {
     margin-left:5%;
   }
   
   .in10pct {
     margin-left:10%;
   }
   
   .in20pct {
     margin-left:20%;
   }
   
   .in30pct {
     margin-left:30%;
   }
   
   .in40pct {
     margin-left:40%;
   }
   
   .in20 {
     margin-left:20px;
   }
   
   .in40 {
     margin-left:40px;
   }
   
   .in80 {
     margin-left:80px;
   }
   
   .in100 {
     margin-left:100px;
   }
   
   .in200 {
     margin-left:200px;
   }
   
  .LGreen {
    border-radius: 35px;
    padding: 0px 20px;
    background-color:#b4f5b4;
  }
  
  .LGray {
    border-radius: 35px;
    padding: 0px 20px;
    background-color:lightgray;
  }
  
  .LBlue {
    border-radius: 35px;
    padding: 0px 20px;
    background-color:darkblue;
    color: white;
    font-weight: bold;
  }
  
  .CFBlue {
    border-radius: 35px;
    padding: 0px 20px;
    background-color:cornflowerblue;
    color: white;
    font-weight: bold;
  }
  
  .LGold {
    border-radius: 35px;
    padding: 0px 20px;
    background-color:gold;
  }
  
  .LYellow {
    border-radius: 35px;
    padding: 0px 20px;
    background-color:#ffffaf;
  }
  
  .Gray {
    border-radius: 35px;
    padding: 0px 20px;
    background-color:gray;
    color:white;
  }
  
  .LWhite {
    border-radius: 35px;
    padding: 0px 20px;
    background-color:white;
  }
  
  .sticker3 {
    font-size:25px; 
    color:black; 
    transform:rotate(-7deg); 
      -ms-transform:rotate(-7deg); /* IE 9 */ 
      -webkit-transform:rotate(-7deg); /* Safari and Chrome */
    text-align:center;
  }
  
  .bgBlue {
    background-color:LightBlue;
  }
  
  .BlueText {
    color: Blue;
  }
  
  .ThisPg {
    background-color:LightBlue !important;
    color: black;
    border-radius:25px;
  }
  
  /* Nav button on active sub page */
  .thissubpg {
  	background-color:lightgreen;
  }
   
  .navLinks {
    background-color:lightgray;
    border-radius:17px;
    margin:auto;
    padding-top:0px;
    font-family:verdana;
    font-variant:small-caps;
    font-weight:bold; 
    font-size:10pt; 
    width: 30%;
  }
  
  /* Navagation and news "buttons" (<ul>) */
  .navb {
    list-style-type:none;
    padding:0px;
    margin:0px;
    color:black;
    overflow: hidden;
  }

  /* Navagation list items (<li>) */
  .navb li {
    height:auto;
    background-color:linen;
    padding:5px;
    margin:3px 0px 3px 0px;
    border:3px outset lightblue;
    text-align:center;
    border-radius:19px;
  }
  
   /* Navagation and news link hover actions */
  .navb a:hover, .newsb a:hover {
    background-color:DarkRed;
    color:white;
    text-decoration: none;
  }
  
  .navb a, .newsb a {
    display:block;
    padding:6px;
    margin:-4px;
    border-radius:17px;
    text-decoration: none;
  }
  
  .banner4 {
    letter-spacing:5px; 
    font-weight:bold; 
    font-size:50px; 
    font-variant:small-caps;
    text-align:center;
    overflow: hidden;
  }
  
  .banner5 {
    letter-spacing:2px; 
    font-weight:bold; 
    font-size:25px; 
    font-variant:small-caps;
    text-align:center;
  }
  
    /* End of Web text controls */

    /* Add a lightblue background, a border and some padding to the header */
     header {
    	border:6px double silver;
      border-radius:25px;
      margin:1px auto 5px auto;
      background-color:lightblue;
      font-family: "Times New Roman";
      font-weight: bold;
      padding: 0px;
    }
    
    header h1{
      display: inline-block;
      width: 70%;
      font-size: 30px;
    }
    
    header p {
      margin: 4px 0;
      font-size: 14px;
      color: red;
    }
    
    /* End of the header */
  
    /* Add a gray background color and some padding to the footer */
    footer {
      border: 2px solid silver;
      width: 95%;
      margin: 0 auto 70px auto;
      background-color: lightgray;
      font-size: 75%; 
      color: #000066;
    }
    footer hr {
      margin-top: 5px;
      margin-bottom: 5px;
      border: 1px solid black;
    }
    /* End of the footer */
  
    /* Add controls to the navagation menus */
    nav {
      font-size: 16px;
    }
    
    .w3-bar .w3-dropdown-hover{
      width:12.5%;
    }

    nav .full-width{
      width:100%;
    }

    nav .w3-dropdown-content{
        background-color: lightgray;
        min-width: 190px;
    }
    nav .w3-bar .w3-bar-item, nav .w3-byn, nav .w3-button {
        padding: 8px 8px;
    }
      
    nav .w3-button {
        background-color: transparent;
    }
      
    nav .my-0, nav .my-1{
    }
    
    .hide-GT-800 {
      display: none !important;
        font-size: 150%; /* Increase 'hamburger' size */
        line-height: 1;  /* Reduce line height to same as other lines */
        position: fixed; /* Set position of switch */
        top: 0;          /* Distance from top */
        /* right: 0;        Distance from right edge */
        color: black;
        background-color: lightgray;
        opacity: 0.7;    /* 30% see through */
    }

    .hide-GT-500 {
      display: none !important;
      font-size: 150%; /* Increase 'hamburger' size */
      line-height: 1;  /* Reduce line height to same as other lines */
/*      position: fixed; /* Set position of switch */
      top: 0;          /* Distance from top */
      left: 0;        /* Distance from left edge */
      color: black;
      background-color: lightgray;
      opacity: 0.7;    /* 30% see through */
    }

    .w3-show-GT-500 {
      display: table-cell !important;
    }

    .w3-hide-GT-500 {
      display: table-cell !important;
    }

    nav .w3-hide {
      display: block !important;
    }

    .w3-dropdown-hover:first-child, .w3-dropdown-click:hover {
        background-color: transparent;
        color: white;
    }
    
    /* MAX-WIDTH settings need the higher ...px numbers to appear first on this page
       while MIN-WIDTH settings need the lower ...px numbers to appear first.
       Mixing MAX-WIDTH and MIN-WIDTH can lead to unexpected results!               */

    /* Settings that appear above this point apply to screen sizes larger than this definition. */
    @media screen and (max-width:1200px){ /* True if LT 1200 */
      nav {
        font-size: 16px;
      }
    
      header h1{
        font-size: 36px;
      }
      
      header p {
        font-size: 20px;
      }
      
    }

    @media screen and (max-width:1000px){ /* True if LT 1000 */
      nav {
        font-size: 12px;
      }
    }
    
    @media screen and (max-width:800px){ /* True if LT 800 */
      header h1{
        font-size: 22px;
      }
    
      nav .w3-dropdown-hover.w3-mobile{
        width: 100%;
        text-align: left;
      }
      
      nav .w3-dropdown-content {
          display: block;
          width: 60%;
          margin-left: 25%;
          position: relative;
      }
      
      nav .my-0 {
        width: 70% !important;
        text-align: center !important;
      }
      
      nav .my-1 {
        width: 70% !important;
        color: #fff !important;
        background-color: #9c27b0 !important;
      }

      header .banner4 {
        font-size: 30px;
      }
      
      header .banner5 {
        font-size: 20px;
      }
      
      header img {
        height: 60px;
      }
    
      .hide-GT-800 {
        display: inline-block !important;
      }

      nav .w3-hide {
        display: none !important;
      }

    } 

    @media screen and (max-width:600px){ /* True if LT 600 */
      header h1{
        font-size: 20px;
      }
      
      header .banner4 {
        font-size: 12px;
      }
      
      header .banner5 {
        font-size: 10px;
      }
      
      header img {
        height: 50px;
      }
      
    } 

    @media screen and (max-width:500px){ /* True if LT 500 */
      .hide-GT-500 {
        display: table-cell !important;
      }
    
      .w3-hide-GT-500 {
        display: none !important;
      }
    
      .w3-show-GT-500 {
        display: table-cell !important;
      }
    
      .w3-bar {
        font-size: 10px;
      }
    
    }

    /* End of the nav */