/* --------- Default Values ----------------- */
body {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  padding: 0;
  background-color: rgb(227, 247, 212); /* Light green */
  color: rgb(53,94,53);  /* very dark deep green */
  font-family: sans-serif;
  font-size: 11pt;
}

/* --------------- Color classes --------------
rgb(227, 247, 212);  Light Green --       Background
rgb(102, 176,  50);  Dark Bright Green -- Bright contrast
rgb( 52, 123, 152);  Dark  Blue/Green --  Normal Text
rgb(  2,  71, 254);  Dark Bright Blue --  Bright text
rgb(  9,  21,  52);  Very deep dark blue -- 

rgb( 53,  94,  53);  Very dark deep green -- Header?
#fafafa;             Light neutral --     Lite text?
---------------------------------------------- */
.color-default {
  background-color: rgb(227, 247, 212);  /* Light Green */ 
  color: rgb(53,94,53);  /* very dark deep green */
}
.color-contrast-hi {
  background-color: rgb(102, 176, 50);   /* Dark bright green */
  color: rgb(53,94,53);  /* very dark deep green */
}
.color-contrast-lo {
  background-color: rgb(53,94,53);  /* very dark deep green */
  color: rgb(227, 247, 212);  /* Light Green */
}
.color-contrast-hi_hdr {
  background-color: rgba(203,244,203,0.7);  /* very dark deep green */
  color: rgb(53,94,53);  /* very dark deep green */
}
.color-contrast-lo_hdr {
  background-color: rgba(53,94,53,0.9);    /* very dark deep green */
  color: rgb(227, 247, 212);  /* Light Green */
}
.color-contrast-aside {
  background-color: rgba(203,244,203,0.7);  /* very dark deep green */
  color: rgb(53,94,53);  /* very dark deep green */
}


/* --------------- Header Classes ------------*/
#header-wrapper {
/*  margin: 0; */
/*  padding: 0; */
  width: 100%;
  height: 12vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
}
header {
  height: 55%;
  height: 62%;
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0 0 0 0.5em;
}
    #header-logo {
      margin: 0; 
      padding: 3px 1em 3px 1em;
      height: 90%;
    }
    #header-title {
      font-size: 1.25em;
      font-weight: bold;
    }
      #header-title:hover {
        cursor: pointer;
        text-shadow: 0 0 10px 10px rgba(127, 247, 112, 0.6);  /* Light Green */
      }

  nav {
    display: flex;
    height: 38%;
    width: 100%;
/*    margin: 0;
    padding: 1px;
*/    position: relative;
    bottom: 0;
    align-items: center;
    justify-content: center;
}
    .header-nav-menu {
      display: flex;
      flex-direction: row;
      list-style: none;
      margin: 0;
      padding: 0;
      position: fixed;
    }
    .header-nav-button {
      display: block;
      border: none;
      background: none;
      font-size: 0.95em;
      padding: 0.65em 1.5em;
      background-color: rgba(53,94,53,0.9);  /* Very dark deep green */
      color: rgb(227, 247, 212);             /* Light Green */
    }
/*
        .header-nav-button:focus {
        background-color: #e0e0e0;
        color: rgb(55,96,137);

      } 
*/
      .header-nav-button:hover {
        background-color: rgb(102,176,50);  /* Dark bright green */
        cursor: pointer;
      }


/* ---------------- Main Content -------------- */
main {
  display: flex;
  flex-direction: row;
  position: relative;
  min-height: 90vh;
}

  /* --------- Aside(s) ----------------- */
/*  aside {

  }
*/
    .left-aside {
      position: fixed;
      top: 12vh;
      left: 0;
      width: 17vw;
      min-height: 30vh;
/*       max-height: 80vh; */
      padding-bottom: 2em;
    }
    .aside-title {
      margin: 1em auto 10px auto;
      padding: 0;
      text-align: center;
      font-size: 12pt;
      font-weight: bold;
    }
    .aside-menu {
      list-style: none;
      margin: 5pt;
      padding: 0;
      text-align: center;
    }
    .aside-link {
      display:none;
      width: 100%;
      min-height: 1.5em;
      background-color: rgba(203,244,203,0.7);  /* very dark deep green */
      color: rgb(53,94,53);   /* Dark bright green */
      text-decoration: none;
      padding: 0.5em 0;
    }
    .aside-link.alwaysShow {
      display: block;
    }
      .aside-link:hover {
        background-color: rgb(53,94,53);  /* very dark deep green */
        color: rgb(227, 247, 212);             /* Light Green */
        cursor: pointer;
      }

      h1, h2, h3, h4, h5, h6 {
        color: rgb(53,94,53); /* Deep dark green */
        padding: 5px 10px;
        margin: 0;
      }
      h1 {
        padding: 0;
        margin: 0;
      }
/*      h2 {
        color: rgb(53,150,53); * Deep dark a little brighter green *
        color: rgb(102, 176,  50);
      } */
      p {
        padding: 0;
        margin: 0.5em 0 0.75em 0;
      }
      
      
  /* -- The actual content element ---------------- */
  #content {
    display: flex;
    flex-direction: column;
    margin-top: 13vh;
    margin-left: 18vw;
    margin-right: 4vh;
    padding: 0 3vh 3vh 3vh;
    flex: 1;
  }
    section {
      display: none;
    }
    .isActive {
      display: block;
    }
    
    article {
      margin-bottom: 3vh;
    }
      article p {
        margin-left: 10px;
      }


/* -- Footer element ------------------------------ */
footer {
  width: 100%;
  height: 10vh;
  font-size: 0.75em;
}
  footer p {
    padding: 5px 5px 0 20px;
  }
  footer p:first-of-type {
    padding: 10px 5px 0 20px;
  }



.iShade {
  color: rgb(102, 176,  50);
  
}

  .iShade:hover {
    cursor: pointer;
    background-color: rgba(53,94,53,0.1);  /* very dark deep green */
    box-shadow: 
       0 0 1px 1px rgba(53,94,53,0.3),
       0 0 12px 3px rgba(102, 176, 50,0.4); /* Dark bright green */
  }
.iShade + div, .iShade + p, #home {
  padding: 10px;
  margin-bottom: 1em;
  box-shadow: 0.5em 0.5em 6px 3px rgba(53,94,53,0.5),  /* very dark deep green */
              0 0 1px 1px rgba(53,94,53,0.9);  /* very dark deep green */

}
.isRolled {
  display: none;
}
.iShade + div .noShadow, .iShade + p .noShadow {
  box-shadow: none;
}

.protip {
	margin: auto;
	width: 85%;
	border: 3px solid green;
	padding: 10px;
  color: green;
  background-color: rgb(220,255,220);
}