/*  ACCESIBILITY ITEMS */
#site-description,
.skip-link {
  position: absolute;
  text-indent: -9999px;
}

/* MAIN */
body {
  font-size: 14px;
}

img.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}
ul.theBoard li {
    list-style: none;
}

 .bold {
    font-weight: 900;
}

.dear-friends h2 {
    font-size: 1.2em;
}
hr.underline {
  align-self: center;
  width: 27%;
  color: rgb(232, 220, 220);
}

hr.show {
  width: 50%;
}

#site-title {
  background: url("newsletter-header-image_.png") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.site-title a {
  display: none;
  text-indent: -9999px;
}

.programs ul {
  padding: 0;
  margin: 0.5rem 1rem;
}

.programs ul li {
    list-style-type: none;
  background-color: inherit;
  font-size: 1em;
  margin: 0 0.5rem 0 0;
  padding-bottom: 0.4em;
}

nav#header-navigation {
  clear: both;
  background-color: #fff;
  border: 0 green solid;
  /* use for debugging layout */
  clear: left;
  height: 30px;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-top: 0px;
}

ul#main-menu {
  background-color: #fff;
  border-top: 0 #444 solid;
  /* use for debugging layout */
  display: flex;
  justify-content: space-between;
  list-style-type: none;
  margin: 2px;
  padding: 3px;
}

li.menu-item {
  background-color: #fff;
  border: 1px solid #444;
  /* #fdd887;*/
  border-radius: 3px;
  display: block;
  height: 24px;
  margin: 1px;
  padding: 3px 2px 2px 2px;
  text-align: center;
  width: 15%;
}

.dear-friends {
  padding: 3px 5px;
}

.dear-friends p {

  padding: 0 0 0.5em 0;
  margin: 0;
  text-indent: 1.5em;
}

p.caption {
  text-align: left;
  line-height: 1.5em;
  padding: 0;
  margin-top: 0;
  font-size: small;
  font-style: italic;
}

img.webimage {
  width: 50%;
}

.footer {
  background-color: #5d472a;
  width: 100%;
  padding: 2em auto;
  color: white;
}
.footer p {
  font-size: small;
  line-height: 1.3em;
  text-align: center;
  padding: 0 50px;
  margin: 0;
}

@supports (grid-area: auto) {
  @media screen and (min-width: 767px) {
    body {
      max-width: 999px;
      font-size: 16px;
      margin: 0 auto;
      padding: 1em 2em;
      box-shadow: 12px 0 15px -4px rgba(195, 198, 170, 0.9),
        -12px 0 8px -4px rgba(195, 198, 170, 0.4);
    }

    .footer {
      width: 100%;
      padding: 3em auto;
    }
    .footer p {
      font-size: small;
      line-height: 1.3em;
      text-align: center;
      padding: 5px 50px;
      margin: 0;
    }

    hr.underline {
      display: none;
    }

    hr.show {
      width: 65%;
      color: black;
    }

    .page-content {
      padding-left: 0.5em;
      padding-right: 0.5em;
      color: black;
      display: grid;
      grid-template-columns: repeat(7, fr);
      column-gap: 1em;
      grid-template-rows: auto;
      grid-template-areas:
        "dear dear dear dear  board board board"
        "dear dear dear dear  board2 board2 board2"
        "left1 left1 left1 left1 right1 right1 right1"
        "left2 left2 left2 left22 right2 right2 right2"
        "left3 left3 left3 left3 left3 left3 left3";
    }
    article.dear-friends {
      padding-right: 3em;
      grid-area: dear;
      outline: 0 dotted red;
    }

    article.hall-of {
      border-bottom: 0 solid brown;
      border-top: 0 solid brown;
      grid-area: right1;
    }

    article.what-else {
      grid-area: left2;
      border-bottom: 0 solid brown;
      border-top: 0 solid brown;
    }
    article.what-else h2 {
        padding-top: 0;
    }

    article.help-us {
      padding-top: 2em;
      grid-area: right2;
      border-bottom: 0 solid darkolivegreen;
    }

    article.programs {
      grid-area: board2;
      padding-left: 1em;
      background-color: rgba(195, 198, 170, 0.2);
      outline: 0 dotted darkolivegreen;
    }

    article.annual-meeting {
      grid-area: left1;
      border-bottom: 0 solid blue;
    }

    article.trustees {
      border-top: 1px brown solid;
      margin-top: 7em;
      border-top: 0solid brown;
      border-bottom: 0 solid blue;
      grid-area: board;
    }

    article.trustees h2 {
        text-align: center;
        font-size: 1.1em;
    }

   

    article.like-us {
      grid-area: left3;
      border-bottom: 0 solid darkolivegreen;
    }
  }
}