/*
 * Rev new: Steve Fox, Apr 20, 2020
 *
 * This common style sheet overrides the browser defaults for many HTML features.
 * It gives the whole website a consistent look and feel.
 * Colors, borders, text sizes, etc. should be controlled by these settings.
 *
 * Reference website: http://www.w3schools.com/css/
 *
 */

/* ----- Box model: This ensures the box model includes the borders and margins, not just the content ----- */
* {                         /* "*" makes it apply to all elements */
    box-sizing: border-box; /* padding and border are included in the width and height */
}

/* defaults for the entire site */
body {
   font-family: Arial;
   font-size: 1em;
   color: black;
   background-color: white;
   margin: 0em;
}

/* ----- Nav stays stuck at top of the screen ----- */
nav {
   position: fixed;
   right: 0;
   top: 0;
   font-size: 1.0em;
   font-weight: normal;
   width: auto;
   text-align: left;
   /*z-index: 20;*/       /* greater than 10 for #content */
   text-decoration: none;
   color: white;
   background-color: black;
   padding: 0.1em 0.1em;
   cursor: pointer;
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
}

/* everything else is below the nav */
#content {
   position: relative;
   top: 0em;   /* was 1.5, which pushes content down that much */
   padding-top: 0em;
   margin-top: 0em;
   /*z-index: 10;*/ /* which is less than z-index 20 for the nav */
}

a.navLink {
   font-size: 1em;   /* small screens */
   text-decoration: none;
   color: white;
   background-color: black;
   padding: 0.1em 0.1em;
   cursor: pointer;
   font-weight: 100;
   padding-right: 0.5em;
   padding-left: 1.5em;
   padding-top: 0.5em;
   padding-bottom: 0.5em;
}
@media all and (min-width: 751px) {
   a.navLink {
      font-size: 0.8em; /* smaller font for bigger screens */
   }
}
a.navLink:link { }
a.navLink:visited { }
a.navLink:hover { }
a.navLink:active { }

a.ourlink:link { color: white; text-decoration: none;  }    /* unvisited link */
a.ourlink:visited {  color: white; text-decoration: none;  }
a.ourlink:hover { color: #A9A9A9; text-decoration: none;  }
a.ourlink:active { color: white;  text-decoration: none; }  /* selected link */


/* ----- Menus (at top of screen) ----- */
.menubar {   /* Container of menu items */
   width: 80%;
   padding-top: 0em;
   font-weight: normal;
   background-color: black;
   flex-wrap: wrap;
   justify-content: space-around;
   display:none;     /* for small screens */
}
@media all and (min-width: 751px) { /* bigger screens */
    .menubar {
        display: flex;
    }
}
.menuItem {
   /*flex-grow: 1;
   flex-shrink: 1; 
   flex-basis: auto; */
   font-size: 1em;
   font-weight: 100;
   color: white;
   background-color: black;
   padding-right: 1em;
   padding-left: 1em; 
   padding-top: 0.5em;
   padding-bottom: 0.5em;
}
.subMenuItem {
   flex-grow: 1;
   flex-shrink: 1;
   flex-basis: auto;
   font-size: 1em;
   font-weight: 100;
   color: black;
   background-color: white;
   padding-right: 1.5em;
}

/* ----- header, article and aside -----*/
header, article {
    width: 100%; /* for small screens */
}
aside {
    padding: 1em;
    font-size: 1em;
}

/* --------- Flexible boxes ------------- */
.row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 100%;
    flex-direction: row;
}
.left {
    flex-grow: 1; /* It can grow */
    flex-shrink: 0; /* but not shrink */
    flex-basis: 50%; /* should use all of available width. Or specify something like 80% (initial value since it can grow) */
    border: none;
}
.right {
    flex-grow: 0;    /* Do not allow this box to grow or shrink */
    flex-shrink: 0;
    flex-basis: 15em; /* since it can't shrink or grow, this is the width at all times */
    border: none;
    padding-right: 0.5em;
    padding-left: 0.5em;
    padding-top: 0em;
    padding-bottom: 0em;
}
.rightphone {
    display: none;   /* hide on phones */
    flex-grow: 0;    /* Do not allow this box to grow or shrink */
    flex-shrink: 0;
    flex-basis: 15em; /* since it can't shrink or grow, this is the width at all times */
    border: none;
}
@media all and (min-width: 751px) { /* bigger screens */
    .rightphone {
        display: block;
    }
}
.fullwidth {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 0; /* must be full width, don't let it grow or shrink */
    flex-shrink: 0;
    flex-basis: auto;
    flex-direction: row;
    align-items: stretch;
}
.interactiveMapSidebar {
    flex-grow: 1; /* for phone so it's full-width */
    text-align: center;
    border: none; /* used to be: solid black 1px; */
}
@media all and (min-width: 751px) { /* bigger screens */
    .interactiveMapSidebar {
    flex-grow: 0; /* stay narrow */
    }
}
.button-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* --------- Footer Styles ---- */
footer {
    font-size: 1em;
    font-weight: normal;
    text-align: center;
    background-color: #DCDCDC;
    color: black;
}
figcaption {
    flex-grow: 0; /* It can't grow but can shrink */
    flex-shrink: 1;
    flex-basis: 40em; /* initial length */
    flex-wrap: none;
    padding: 2em;
    text-align: center;
}
/* ----- Figures ----- */
img { width: 100%; }

figure {
    flex-basis: 15em; /* initial length */
    /* margin-right: 3em; */
    margin-left: 0em;
    margin-bottom: 0em;
    margin-top: 0em;
    /* padding: 1em;
    padding-left: 6em; */
}
figcaption {
    font-size: smaller;
    text-align: left;
}

.phone { display: inline; }
.nophone {display: none;}
@media all and (min-width: 751px) { /* bigger screens  Steve - 751px*/
    .phone { display: none; /* don't display */
    }
    .nophone { display: inline; }
}

/* - - - - - - - - - - - Heading styles - - - - - - - - - - - - - */
h1 {
   position: relative;
   font-size: 1.8em;
   text-align: center;
   font-weight: bold;
}

h2 {
   font-size: 1.3em;
   text-align: left;
   font-weight: bold;
   padding-bottom: 1em;
}

h3.interactiveMapSidebar {
   font-size: 1.1em;
   text-align: center;
   font-weight: bold;
   padding: 0px 0px 0px 0px;
   padding-bottom: 0.5em;
   margin-top: 3em;
   margin-bottom: 0em; /* the expanding box has bottom padding */
}

h4.footer {  /* Headers used in Footer */
   text-transform: uppercase; /* This makes it possible to change your mind without retyping a bunch of text */
   font-size: 1em;
   text-align: center;
   font-weight: normal;
   text-decoration: none;
   margin-top: 2em;
   margin-bottom: 1em;
}

h5 {  /* Headers for Lists*/
   font-size: 1em;
   text-align: left;
   font-weight: normal;
   padding-bottom: 0em;
   margin-bottom: 0.5em;
}


/* - - - - - paragraph styles- - - - - - - */
p {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.center {
   text-align: center;
}
.indent {
   text-align: left;
   position: relative;
   font-size: 1em;
   font-weight: normal;
   padding: 1px; /* just a teeny bit for phone */
   margin: 0em;
   }
@media all and (min-width: 751px) { /* bigger screens */
    .indent {
    margin: 1.5em;
    }
}
.PageTitle { /* Use for the title of each page */
   position: relative;
   text-align: center;
   font-size: 2em;
   font-weight: bold;
   margin-bottom: 0.2em;
   margin-top: 0em;
}
.explain {
    font-size: 0.9em;
    /* font-style: italic; ... Eileen Removed 042520 */
}
p.clear { clear: both; } /* starts anew below all floating elements */

/* ----- Showing hidden stuff in an expand area ----- */
.expand {
    text-decoration: underline;
    font-size: 1em;
    margin-bottom: 0.7em;
    cursor: zoom-in;
}
.expand:hover { color:blue;}
.expand:active { color:blue; } /* mouse button down This is for sidebar peak groups */
div.expandList {
   padding-left: 0em;
   padding-bottom: 1.5em;
   font-size: 0.88em;
   font-family: Helvitica;
}

/* - - - - - link styles   */
.interactiveMapContent a:link { color: blue; text-decoration: none;  }    /* unvisited link */
.interactiveMapContent a:visited { color: blue; } /* visited link */
.interactiveMapContent a:hover { text-decoration: underline;  }   /* mouse over link */
.interactiveMapContent a:active {  }  /* selected link */

/* ----- Clickable areas ----- */
.click-blue, .click-yellow {
    stroke: black;
    fill-opacity: .0; /* Make sure these numbers match the Javascript. */
    stroke-opacity: .0;    
    filter: drop-shadow(16px 16px 20px black); /* JUST PLAYING, EILEEN */}
.click-blue {
    fill: CornflowerBlue;    
}
.click-yellow {
    fill: yellow;
}
.click-blue:hover, click-yellow:hover {
    transition: 0.1s;
    fill-opacity: .25; /* Make sure these numbers match the Javascript. */
    stroke-opacity: .7;
}
.click-circle {
    fill: yellow;
    stroke: Black;
    fill-opacity: .0; /* make sure these match the Javascript at bottom of HTML */
    stroke-opacity: .0;
}
.click-circle:hover {
    transition: 0.1s;
    fill-opacity: 1; /* Make sure these numbers match the Javascript. */
    stroke-opacity: .5;
}

/* ----- Lists ----- */
ul {
   margin-top: 0;
}
ul.NoBullet {
   display: block;
   list-style-type: none;
   margin-top: 1em;
   margin-bottom: 1em;
   margin-left: 0;
   margin-right: 0;
   padding-left: 0px;
   text-align: center;
   background: none;
}
.interactiveMapContent li {
   background-image: url("../img/icon.svg"); /* bullet image */
   background-repeat: no-repeat;
   background-size: 1.0em;
   background-position: left 5px;
   background-attachment: scroll;
   padding-left: 1.5em; /* leaves room for the special bullet image */
   padding-bottom: 0.2em;
   list-style-type: none;
   height: auto;
}
@media all and (min-width: 751px) { /* bigger screens */
    .interactiveMapContent li {
        padding-left: 1.5em; /* get rid of all this block? */
    }
}
.interactiveMapContent li.footer {
    background: none;
    padding-left: 0em;
    padding-bottom: 0em;
    list-style-type: none;
}
.interactiveMapContent li::before {
  padding-right: 8px;
  color: white;
  /* content: "--"; */
}
.mtnBullet {
   width:.65em;
}

/* ----- Buttons ----- */
.interactiveMapContent a.button {
   font-weight: 200;
   font-size: 1.1em;
   text-align: center;
   text-decoration: none;
   color: Black;
   background-color: #DCDCDC;
   padding: 10px 24px;
   border-radius: 0.2em;
   margin-top: 0.5em;
   margin-bottom: 0.5em;
}
.interactiveMapContent a.button:hover {
   background-color: black;
   color: white;
}

/* --- special formatting ---*/
.webmaster { /* note to self */
   color: red;
   background-color: yellow;
}