

@media screen {
  .background-test {
    background: rgba(255,255,255, 0.75) url(Ground.jpg);
    background-repeat: repeat;
    /*background-size: cover;*/
    opacity: 0.35;
    position: fixed;
    top: 0vh;
    right: 0vw;
    bottom: 0vh;
    left: 0vw;
    z-index: -100;
  }
}

@media all {
  :root {
    font-size: 16px;
    /* Primary BSA Colors */
    --Red: rgb(206,17,38);
    --Blue: rgb(0,63,135);
    --Tan: rgb(214,206,189);
    --Gray: rgb(81,83,84);
    --White: rgb(255,255,255);
    /* Secondary BSA Colors */
    --LightBlue: rgb(154,179,213);
    --DarkBlue: rgb(0,51,102);
    --LightTan: rgb(233,233,228);
    --DarkTan: rgb(173,157,123);
    --PaleGray: rgb(133,135,135);
    --DarkGray: rgb(35,37,40);
    /* Cub Scouting Colors */
    --csGold: rgb(252,209,22);
    /* Scouts BSA Colors */
    --sOlive: rgb(36,62,44);
    /* Venturing Colors */
    --vGreen: rgb(0,107,63);
    --vYellow: rgb(252,209,22);
    /* Sea Scouting Colors */
    --ssYellow: rgb(255,204,0);
    /* Exploring Colors */
    /* Varsity Colors */
    /* Wood Badge Colors */
    --wwRed: rgb(227,24,55);
    --wwGold: rgb(241,181,28);
    --wwGreen: rgb(30,100,50);
    --wwBlue: rgb(33,49,100);
  
    /*             */
    /* 75% Opacity */
    /*             */
    /* Primary BSA Colors */
    --Red75: rgba(206,17,38,0.75);
    --Blue75: rgba(0,63,135,0.75);
    --Tan75: rgba(214,206,189,0.75);
    --Gray75: rgba(81,83,84,0.75);
    --White75: rgba(255,255,255,0.75);
    /* Secondary BSA Colors */
    --LightBlue75: rgba(154,179,213,0.75);
    --DarkBlue75: rgba(0,51,102,0.75);
    --LightTan75: rgba(233,233,228,0.75);
    --DarkTan75: rgba(173,157,123,0.75);
    --PaleGray75: rgba(133,135,135,0.75);
    --DarkGray75: rgba(35,37,40,0.75);
    /* Cub Scouting Colors */
    --csGold75: rgba(252,209,22,0.75);
    /* Scouts BSA Colors */
    --sOlive75: rgba(36,62,44,0.75);
    /* Venturing Colors */
    --vGreen75: rgba(0,107,63,0.75);
    --vYellow75: rgba(252,209,22,0.75);
    /* Sea Scouting Colors */
    --ssYellow75: rgba(255,204,0,0.75);
    /* Exploring Colors */
    /* Varsity Colors */
    /* Wood Badge Colors */
    --wwRed75: rgba(227,24,55,0.75);
    --wwGold75: rgba(241,181,28,0.75);
    --wwGreen75: rgba(30,100,50,0.75);
    --wwBlue75: rgba(33,49,100,0.75);
  
    /*             */
    /* 50% Opacity */
    /*             */
  
    /* Primary BSA Colors */
    --Red50: rgba(206,17,38,0.5);
    --Blue50: rgba(0,63,135,0.5);
    --Tan50: rgba(214,206,189,0.5);
    --Gray50: rgba(81,83,84,0.5);
    --White50: rgba(255,255,255,0.5);
    /* Secondary BSA Colors */
    --LightBlue50: rgba(154,179,213,0.5);
    --DarkBlue50: rgba(0,51,102,0.5);
    --LightTan50: rgba(233,233,228,0.5);
    --DarkTan50: rgba(173,157,123,0.5);
    --PaleGray50: rgba(133,135,135,0.5);
    --DarkGray50: rgba(35,37,40,0.5);
    /* Cub Scouting Colors */
    --csGold50: rgba(252,209,22,0.5);
    /* Scouts BSA Colors */
    --sOlive50: rgba(36,62,44,0.5);
    /* Venturing Colors */
    --vGreen50: rgba(0,107,63,0.5);
    --vYellow50: rgba(252,209,22,0.5);
    /* Sea Scouting Colors */
    --ssYellow50: rgba(255,204,0,0.5);
    /* Exploring Colors */
    /* Varsity Colors */
    /* Wood Badge Colors */
    --wwRed50: rgba(227,24,55,0.5);
    --wwGold50: rgba(241,181,28,0.5);
    --wwGreen50: rgba(30,100,50,0.5);
    --wwBlue50: rgba(33,49,100,0.5);
  
    /*             */
    /* 25% Opacity */
    /*             */
    
    /* Primary BSA Colors */
    --Red25: rgba(206,17,38,0.25);
    --Blue25: rgba(0,63,135,0.25);
    --Tan25: rgba(214,206,189,0.25);
    --Gray25: rgba(81,83,84,0.25);
    --White25: rgba(255,255,255,0.25);
    /* Secondary BSA Colors */
    --LightBlue25: rgba(154,179,213,0.25);
    --DarkBlue25: rgba(0,51,102,0.25);
    --LightTan25: rgba(233,233,228,0.25);
    --DarkTan25: rgba(173,157,123,0.25);
    --PaleGray25: rgba(133,135,135,0.25);
    --DarkGray25: rgba(35,37,40,0.25);
    /* Cub Scouting Colors */
    --csGold25: rgba(252,209,22,0.25);
    /* Scouts BSA Colors */
    --sOlive25: rgba(36,62,44,0.25);
    /* Venturing Colors */
    --vGreen25: rgba(0,107,63,0.25);
    --vYellow25: rgba(252,209,22,0.25);
    /* Sea Scouting Colors */
    --ssYellow25: rgba(255,204,0,0.25);
    /* Exploring Colors */
    /* Varsity Colors */
    /* Wood Badge Colors */
    --wwRed25: rgba(227,24,55,0.25);
    --wwGold25: rgba(241,181,28,0.25);
    --wwGreen25: rgba(30,100,50,0.25);
    --wwBlue25: rgba(33,49,100,0.25);
  }
  body {
    font-family: "Roboto Condensed", sans-serif;
  }
  body::-webkit-scrollbar {
    width: 0.5rem;
  }
  body::-webkit-scrollbar-track {
    background: rgba(30,30,36)
  }
  body::-webkit-scrollbar-thumb {
    background: rgba(102,73,184)
  }

  hr {
    margin: 2px 3px;
    border: 2px ridge tan;
  }

  
  .issue-number {
    font-size: 1.5em;
  }
  .banner-img > img {
    height: 7.5em;
    width: 35em;
    margin: 0em;
  }
  .issue-date {
    font-size: 1.5em;
  }
  .newsletter-title {
    font-family: "Roboto Slab", serif;
    font-size: 3em;
    line-height: 0em;
    text-shadow: 0.25em 0.125em 0.25em #aaa;
    margin: -0.0025em auto -0.125em;
  }
  .newsletter-slogan {
    font-style: italic;
    margin: -2em auto auto;
  }
  .banner-welcome {
    font-family: "Roboto Slab", serif;
    font-style: italic;
    font-size: .75em;
    line-height: 1.25em;
    margin: .25em 0 -1em 0;
  }
  .banner-title {
    font-family: "Roboto Slab", serif;
    font-size: 2em;
    line-height: 1em;
    text-shadow: 0.25em 0.125em 0.25em #aaa;
    margin: -0.0025em auto -0.125em;
  }


  /* Start Banner Grid Section*/
  .item1 {
    grid-area: a;
  }
  .item2 {
    grid-area: b;
  }
  .item3 {
    grid-area: c;
  }
  .item4 {
    grid-area: d;
  }
  .item5 {
    grid-area: e;
  }
  .item6 {
    grid-area: f;
  }
  .item7 {
    grid-area: g;
  }
  .banner-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 4fr 3fr 2fr 1fr;
    grid-template-areas:
      "a a a a a a a"
      "b b c c c d d"
      "e e e e e e e"
      "f f f f f f f"
      "g g g g g g g";
    align-items: center;
    text-align: center;
  }
  /* End Banner Grid Section*/

  /* Start Page Navigation Bar */
  nav {
    /*background-color: var(--LightBlue);*/
    background-color: var(--LightBlue);
    border-radius: 1em;
    color: black;
    padding: 1em 0;
    margin: 0 0.5em 0.5em;
    text-align: center;
  }
  nav a {
    font-size: 1.25em;
    margin: 0.5em 0.125em;
    border: 0px solid blue;
    padding: 0.5em 0.5em;
    color: var(--Blue);
  }
  nav a:hover {
    background-color: var(--Red);
    border-radius: 1em 0.25em;
    margin: 0.5em 0.125em;
    padding: 0.5em 0.5em;
  }
  .inside {
    border: 0.75em solid var(--DarkBlue);
    background: var(--LightBlue);
    border-radius: 4em 1em;
    padding: 2em 0.75em;
    text-wrap: nowrap;
    line-height: 2em;
    grid-area: a;
    place-self: start stretch;
    margin: 0.5em 0 0;
  }
  .inside ul {
    padding: 0.5em;
    list-style-position: inside;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .inside ul:hover {
    overflow: visible;
    background: var(--LightBlue);
  }
  .inside > ul {
    padding: 0em;
  }
  .inside li {
    padding: 0em;
  }
  .hrblue {
    border: 0.1px ridge blue;
    background-color: blue;
  }
  .cover-article img {
    height: 15em;
    place-self: center;
    border: 0.75em outset var(--DarkBlue);
    border-radius: 4em 1em;
    margin: 0.5em auto 1.5em;
    display: block;
  }
  .cover-article {
    grid-area: b;
    /*background: var(--LightBlue25);*/
    background: var(--LightBlue25);
    border-radius: 2em;
    padding: 1em;
  }
  .cover {
    display: grid;
    grid-template-columns: 4fr 4fr 4fr 1fr 5fr 5fr 5fr 5fr;
    grid-template-areas:
      "a a a . b b b b"
      "a a a . b b b b";
    align-items: center;
    text-align: justify;
    padding: 0em 0.5em;
  }
  /* End page navigation bar */

  .content-right,
  .content-left {
    background: var(--LightBlue25);
    margin: 0.5em;
    padding: 0.5em;
    border-radius: 2em;
  }
  .content-right > img,
  .content-left > img {
    border: 0.5em outset var(--DarkBlue);
    border-radius: 2em 1em;
  }
  .content-right > .content-img {
    float: right;
    clear: right;
    margin: 0.25em 0.25em 0.5em 1em;
    border-color: var(--LightBlue);
    border-radius: 4em 1em;
  }
  .content-left > .content-img {
    float: left;
    clear: left;
    margin: 0.5em 1em 0.25em 0.25em;
    border-color: var(--LightBlue);
    border-radius: 4em 1em;
  }
  .leader-name,
  .leader-position {
    margin-left: 1em;
  }
  .slideshow-display-container {
    position: relative;
    width: 50em;
    margin: auto;
  }
  .slideshow-display-container > img {
    width: 50em;
  }
  .slideshow-display-left,
  .slideshow-display-right {
    border: none;
    display: inline-block;
    padding: 8px 16px;
    vertical-align: middle;
    overflow: hidden;
    text-decoration: none;
    color: var(--Tan75);
    background-color: var(--Gray75);
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
  }
  .slideshow-display-left {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(-0%, -50%);
  }
  .slideshow-display-right {
    position: absolute;
    top: 50%;
    right: 0%;
    transform: translate(0%, -50%);
    -ms-transform: translate(0%, -50%);
  }
  /* Footer */
  .hrfooter {
    margin: 8px 3px;
    border-width: 3px;
  }
  footer {
    margin: 0.5em 4em;
  }
  footer img {
    display: block;
    margin: auto;
    width: 20em;
  }
  /* End Footer */

  /* Wireframing */ /*
  html {
   --fill: #F7F6F1BB;
   --wire: gray;
  }
  
  [data-wf] {
    outline: 2px solid var(--wire);
    position: relative; z-index: 1;
  }
  [data-wf]::before {
    position: absolute; z-index: 8675309;
    top: 0; bottom: 0; right: 0; left: 0;
    background:
      linear-gradient(to top right,
        transparent calc(50% - 1px), var(--wire) calc(50% - 1px),
        var(--wire) calc(50% + 1px), transparent calc(50% + 1px)),
      linear-gradient(to bottom right,
        transparent calc(50% - 1px), var(--wire) calc(50% - 1px),
        var(--wire) calc(50% + 1px), transparent calc(50% + 1px)),
      var(--fill);
    content: attr(data-wf);
    font: bold 2em Jubilat, Georgia, serif;
    color: var(--wire);
    text-shadow:
      0 0 0.25em var(--fill), 0 0 0.25em var(--fill),
      0 0 0.25em var(--fill), 0 0 0.25em var(--fill),
      0 0 0.25em var(--fill);
    display: flex; justify-content: center; align-items: center;
  } End Wireframes*/ /* End Wireframing */
} /* end media query */
/*
@media print {
  body {
    width: 6in;
  }
}
*/
