img { display: block; width: 100%; height: auto; } /* removes margins around images */
svg { display: block; } /* removes margins around svgs */

body {
  margin: 0;
  display: grid;
  grid-template-columns: 20% 1% 78% 1%;
  grid-template-rows: 200 1%;
/*  grid-template-rows: 1% 1%; */
}
nav {
  background: #71a5e1; /* f8f8f8; */
  grid-column: 1 / span 4;
  grid-row: 1;
}
aside {
  background: #e5e5e5;
  grid-column: 1;
  grid-row: 2;
}
spacer {
  background: #f8f8f8;
  grid-column: 2;
  grid-row: 2;
}
article {
  background: #f8f8f8;
  grid-column: 3;
  grid-row: 2;
}
spacer2 {
  background: #f8f8f8;
  grid-column: 4;
  grid-row: 2;
}
h1 {
  font-family:  'Roboto', sans-serif;
  font-size: calc(2.1vw);
}
p {
  font-family:  'Roboto', sans-serif;
  font-size: calc(2.0vw);
  line-height: 1.4;
} /* https://stackoverflow.com/questions/23984629/how-to-set-min-font-size-in-css calc(5px + 1.0vw) */
a {
  color: #002288;
  text-decoration-line: none;
}
figure {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
}
figure.focus { /* <figure class="focus"> */
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}
figure.width_23 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 23.45%;
}
figure.width_28 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 28.10%;
}
figure.width_30 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 30%;
}
figure.width_34 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 34.31%;
}
figure.width_46 {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 46.38%;
}
figcaption {
  padding: 1em;
  text-align: center;
  font-family:  'Roboto', sans-serif;
  font-size: calc(1.8vw);
}
/* table { display: block; width: 100%; height: auto; } */
#tablecolumns { width: 20%; }
caption {
  padding: 0.0em;
  text-align: left;
  font-family:  'Roboto', sans-serif;
  font-weight: bold;
  font-size: calc(2.0vw);
  height: 1.8em;
}
td {
  padding: 0.3em;
  text-align: left;
  font-family:  'Roboto', sans-serif;
  font-size: calc(2.0vw);
/*  height: 2.0em; */
}
#tableid { background-color: #f8f8f8; }
#darkline { background-color: #dddddd; }

svg .top_on { fill: #002288; opacity: 0.2; }
svg .top_off { fill: #4285c4; opacity: 0.2; }
svg .top_select { fill: #ffffff; opacity: 0.0; } /* white overlay to indicate selectability, initially transparent */
svg .top_select:hover { opacity: 0.2; } /* overlay less transparent */
svg .top_text { font-style:normal; font-weight:normal; font-family: 'Roboto', sans-serif; font-size: calc(20px); fill: #ffffff; text-anchor: middle; } /* font-size: calc(18px); */
svg .top_logo_text { font-style:italic; font-weight:normal; font-family: Verdana, Geneva, sans-serif; font-size: calc(22px); fill: #ffffff }
svg .welcome_text { font-style:normal; font-weight:normal; font-family: 'Roboto', sans-serif; font-size: calc(20px); fill: #000000 }
svg .welcome_text_b { font-style:normal; font-weight:bold; font-family: 'Roboto', sans-serif; font-size: calc(20px); fill: #000000 }

svg .aside_on { fill: #f8f8f8; }
svg .aside_off { fill: #e5e5e5; }
svg .aside2_on { fill: #f8f8f8; }
svg .aside2_off { fill: #ececec; }
svg .aside_select { fill: #000000; opacity: 0.0} /* black overlay to indicate selectability, initially transparent */
svg .aside_select:hover { opacity: 0.1; } /* overlay less transparent */
svg .aside_text { font-style:normal; font-weight:normal; font-family:  'Roboto', sans-serif; font-size: calc(95px + 0.0vw); fill: #444444 }