@charset "UTF-8";


/*  body {background: #f5f5f5;}      #828282;   #88CCFF;  */
body {background: white;}    /*  #828282;   #88CCFF;  */


/*  footer {
    grid-area: footer; font-family: Arial, Helvetica, sans-serif;  font-size: .8em; font-weight: bold; text-align: center;    font-size: 12pt; 
    background-color: #f5f5f5; color: #0f3467; 
    padding: 1em;  left: 0;  bottom: 0;  width: 98%;  
    height: auto; }   */

footer {
      grid-area: footer; font-family: Arial, Helvetica, sans-serif;  font-size: .8em; font-weight: bold; text-align: center;  /*  font-size: 12pt; */
      background-color: white; color: #0f3467; 
      padding: 1em;  left: 0;  bottom: 0;  width: 98%;  
      height: auto; }
  
            
/*#wrapper {margin:auto; max-width: 1110px; min-width: 1045px ; background: #E6F0FF; border:10px #E6F0FF solid; font-size:medium; } /*   background:#88CCFF; */
/* #wrapper {position:absolute; margin:auto; width: 98%;  background: #f5f5f5; border:1px #f5f5f5 solid; font-size: medium; }    background:#88CCFF; */
#wrapper {position:absolute; margin:auto; width: 98%;  background: white; border:1px white solid; font-size: medium; }

/* header,nav,article,section,footer, figure {display:block;}  */
header, nav, footer, figure {display:block;}
/* header { grid-area: banner;  background-color: #f5f5f5; width: 98%; height: auto; text-align: center; font-weight: bold;
         background-size: cover;  font-family: Arial, Helvetica, sans-serif;     
         margin-top:0;   border-radius: 10px; border-bottom:10px #f5f5f5 ; }       height: 7em ;    height:211px ;    */

header { grid-area: banner;  background-color: white; width: 98%; height: auto; text-align: center; font-weight: bold;
          background-size: cover;  font-family: Arial, Helvetica, sans-serif;     
          margin-top:0;   border-radius: 10px; border-bottom:10px white ; }     /* height: 7em ;    height:211px ;    */

          
/*   #content { position:relative; width:98%; background-color: #f5f5f5;}     background:#88CCFF;  */
#content { position:relative; width:98%; background-color: white;}   /*  background:#88CCFF;  */


/*  figure {float:left; margin-left:5px; }  */

/*  h1 {position:relative; top:-15px; margin-left:30px; font-size:250%; color:#0f3467; font-weight:bold;}   */
/*  h1 {position:relative; top:5px; margin-left:30px; font-size:250%; color:#0f3467; font-weight:bold; text-align: center; }   */
h1 {position: relative; top:5px; margin-left: auto ; margin-right: auto  ; font-size:250%; color:#0f3467; font-weight: bold; text-align: center; }

h2 {font-size:150%; text-align:center;}
p  {font-size:120%; text-align:center;}
a {font-size:120%;}

/* .city_h1 { background: #f5f5f5; background: color #f5f5f5; color: #0F3467; padding: 25px; text-align: center; width:100%;}   */
.city_h1 { background-color: #0f3467; color: #f5f5f5; padding: 25px; text-align: center; width:98%;} 

.city_h2 { background-color: #32746D; color: #f5f5f5; padding: 20px; text-align: center; width:98%; margin-left:0%; margin-right:0%;} 

 img {  display: block;     margin-left: auto;    margin-right: auto;  width: 100%; }  
/*  https://www.w3schools.com/css/tryit.asp?filename=trycss_ex_images_card  */
/*  https://www.w3schools.com/css/tryit.asp?filename=trycss_image_modal_js  */


#midcol { position:relative; margin-left:0%; margin-right:0%; background: white; padding:5px; width:98% ;}
/* #midcol { position:relative; margin-left:0%; margin-right:0%; background: #f5f5f5; padding:5px; width:98% ;}  */
/* #midcol { display: flex; justify-content: center; align-items: center; /*height: 600px;  border: 1px solid black; }  */
/*  #midcol { justify-content: center; align-items: center; }  */


br.clear {clear:both}

/*  #midcol-left {float:left; width:49%; font-weight:bold;}
#midcol-right {float:right; width:49%; font-weight:bold;}  */

/*  -------------------------------------------------------------------------  */
/*  --------------------------------   nav   --------------------------------  */


nav.sticky {
    grid-area: nav;
    font-family: Arial, Helvetica, sans-serif;          
    background-color: #f5f5f5;                    
    border: double 5px #f5f5f5;   /* the two ranges with another color compared to background color    */
    border-radius: 15px;             /* the edge of the square rounded and not 90  */
    margin: 0;                       /* margin here is the distance from the screen range left and right  */
    margin-left: 2%;
  
    overflow: hidden;
    /* position: sticky;  */
    /* position: -webkit-sticky;  */
    top: 0;
  
  }

  /* if .sticky it changes size for buttoms due to their text size   */ 
nav ul {  margin: 0; padding: 0; list-style-type: none; display: flex; justify-content: center; color: #0F3467}  
nav ul li {    font-size: 1.0em;  font-weight: bold; font: bold 4.0em ; text-transform: uppercase;   letter-spacing: .2em; text-align: center;}
nav ul li a { 	 display: block; 	border: 1px solid; 	 border-radius: 1.0em; 	padding: 0.5em 1.5em; margin: 1%; }   /*  border-radius: .5em;  */


nav.sticky ul li a:link, nav.sticky ul li a:visited {
    color: #0f3467;                            /*  color of menu on the "nav" */
    /*  border: double 5px #3f3467;  */
    border: double 5px #0f3467;  
    font: bold 4.0em;
    background-color: #f5f5f5;
    background-color: white;
    
  }

nav.sticky ul li a:focus, nav.sticky ul li a:hover, nav.sticky ul li a:active {
    color: #0F3467;          
    font: bold 4.0em;                                        /*  if the mouse on the title the etxt is white  */
    background-color: white;  /*   color of the background if the mouse is over the text   */
    background-color: #D9B2EC;
    border: double 5px #0F3467;  /* the range color will be changed from green to blue if the mouse above */
 }    


 /* --------------------------------------------------------------- */
 /* --------------------------------------------------------------- */
 /* --------------------------------------------------------------- */
.left {text-align:left;}
.quote {float:right; font-weight:normal; font-size:90%;}

li.btn a {border-radius: 5px;}
#wrapper {border-radius:15px;}
#content {border-radius:6px;}
header {border-top-left-radius:6px; border-top-right-radius:6px; }
footer {border-top-left-radius:6px; border-top-right-radius:6px; }

/*set vertical button menu column*/
nav#vertical ul {float:left; width:150px; margin-left:-5px; padding-left:0; list-style-type:none;}
/*set general side button styles*/
li.vbtn {width:115px; line-height:20px; margin-bottom:3px; text-align:center;}  /*  it was marton-bottom:3x  */
    /* set general anchor styles */
li.vbtn a {display:block; width:115px; color:purple; font-family:arial; font-size:small; font-weight:bold; text-decoration:none;}
    /* mouseout (default) */
li.vbtn a {display:block; background: #bda208; border:4px outset #559a55;}
    /* mouseover */
li.vbtn a:hover { background:red; border:4px outset red; color:white}
    /* mousedown */
li.vbtn a:active {background:maroon; border:4px inset maroon; color :yellow}


/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
/* -------------------------------------------------------- */
img {max-width: 98%; }
.center {
  display: block;  margin-left: auto;   margin-right: auto;  width: 90%;
}
/* -------------------------------------------------------- */
/* ----------------------------------------------------------------------------------- */
/*  explain grid-area     -->  https://www.w3schools.com/cssref/pr_grid-area.php                    */

/* adjustment web size depending on the screen     */  
@media screen and (min-width: 360px) {
    nav ul li {
      flex:  none;
      font-size: 0.8em;   
    }
    nav ul {
      justify-content: center; 
    }
    header h1 {
      /* font-style: italic; */
      font-weight: bold;
      font-size: 2.0em;
      margin-top: -5px;
      color: mediumvioletred; 
    }

    #midcol, h2, h3 {
      font-family: Verdana,  Georgia, serif; 
      font-weight: bold;
      font-size: 1.0em;
      margin-top: -5px;
    }

    h2 {
      font-family: Verdana,  Georgia, serif; 
      font-weight: bold;
      font-size: 1.0em;
      margin-top: -5px;
    }
  
  }
  /* ----------------------------------------------------------------------------------- */
  @media screen and (max-width: 500px) {
    nav ul li {
      flex:  none;
      float:none; width:100%;
      font-size: 0.8em;   
    }
    
    #midcol img {
      float: left;
      margin: 0 1em 1em 0;
    }

    header h1 {
      font-weight: bold;
      font-size: 2.0em;
      margin-top: -5px;
      color: mediumvioletred;    
      }

    h2 {
      font-family: Verdana,  Georgia, serif; 
      font-style: italic;
      font-weight: bold;
      font-size: 1.0em;
      margin-top: -5px;
    }

    #midcol h2 {
      font-family: Verdana,  Georgia, serif; 
      font-style: italic;
      font-weight: bold;
      font-size: 1.0em;
      margin-top: -5px;
    }
    
  }
  
  /* ----------------------------------------------------------------------------------- */
  @media screen and (max-width: 700px) {
    nav ul li {
      flex:  1 1 50%;    /*  none;  */
      font-size: 0.8em;
              }
    nav ul {
      justify-content: center; 
      flex-wrap: wrap;
           }
    header h1 {
      margin-top: 4.0em;
      font: bold 2.5em Verdana, Georgia, serif;
      /*  text-shadow: .15em -.10em .02em rgb(74, 51, 95); /* shadow move right & backword/ down/ distributed and not sharf  */
      /*color: rgb(240, 20, 174);  */
              }
    header h1 {
      font-weight: bold;
      font-size: 2.5em;
      margin-top: -5px;
      color: mediumvioletred;    
      }

    #midcol, h2, h3 {
        font-family: Verdana,  Georgia, serif; 
        font-weight: bold;
        font-size: 1.5em;
        margin-top: -5px;
     }
      
      h2 {
        font-family: Verdana,  Georgia, serif; 
        font-style: italic;
        font-weight: bold;
        font-size: 1.5em;
        margin-top: -5px;
      }
    
    footer h2 {
      font-size: 0.9em;
      font-weight: bold;
    }
    
  }
  
  /* ----------------------------------------------------------------------------------- */
  @media screen and (min-width: 700px) {
    nav ul li {
      flex:  1 1 33.3%;    /*  none;  */
      font-size: 0.8em;
              }
  
    /* header h1 {
      font-style: italic;
      font-weight: bold;
      font-size: 2.0em;
      margin-top: -12px;
      color: mediumvioletred; 
    }  */
    /*  
    #midcol, h2, h3 {
      font-family: Verdana,  Georgia, serif; 
      font-weight: bold;
      font-size: 1.5em;
      margin-top: -5px;
    }
      */
/*
    h2, h3 {
      font-weight: bold;
      font-size: 1.5em;
      margin-top: -5px;
    } */

    #midcol {
      line-height: 1.8em;
      padding: 1em;
      border: none;
      /* border-radius: 25px; */
      margin: 1%; 
    }
    
  }
  /* ----------------------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------------------- */
  @media screen and (max-width: 980px) {         /* 940px */
    nav ul li {
      flex:  1 1 33.3%;    /*  none;  */
      font-size: 0.8em;
              }
  }
  /* ----------------------------------------------------------------------------------- */
  /* ----------------------------------------------------------------------------------- */
  
  @media screen and (min-width: 980px) {
    #wrapper {
      display: grid;
      grid-template-rows: auto auto auto auto;
      grid-template-columns: 1fr, 1fr, 0.75fr;
      grid-template-areas: 
        "banner banner banner"
        "nav nav nav"
        "main article hours"
        "footer footer footer"; 
      max-width: 1400px;
      margin: 0 auto;
      position: relative;
             }
    header {
       grid-area: banner;  
           } 
           
    #midcol {
      grid-area: main;
         } 
    
    footer {
      grid-area: footer;
           }        
  } 
  

/* -------------------------------------------------------- */