:root {
  --primary: #3f51b5;
  --action: #cdf800;
  --negative: #FFEB8F;
  --bannerwidth: 20em;
  --bannerheight: 9.8em;
  --headerheight: 8em;
}
html{
  min-height:100%;/* make sure it is at least as tall as the viewport */
  position:relative;
}

body{
  height:100%; /* force the BODY element to match the height of the HTML element */
}
header {
  min-height: var(--headerheight);
}
main {
  height: 100%;
  padding-top: 3em !important;
}
@media (max-width: 1241px) {
  main {
    padding-top: 4em !important;
  }
}
@media (max-width: 789px) {
  main {
    padding-top: 5em !important;
  }
}
@media (max-width: 661px) {
  main {
    padding-top: 10em !important;
  }
}
.headercontent {
  padding: 1em;
  padding-right: var(--bannerwidth);
}
.headerform {
  padding-right: 10px !important;
}

.banner {
  background-image: url(/static/img/PageArt2.png);
  background-size: auto 100%;
  background-position: center right;
  background-repeat: no-repeat;
  width: var(--bannerwidth);
  height: var(--bannerheight);
  right:1em;;
  background-color: rgba(0,0,0,0);
}
.banner  h1 {
  text-align: right;
  padding-left: 50%;
  padding-right: 1em;
  padding-top: 0.5em;
  text-shadow: 2px 2px 5px indigo; 
  color: white;
  margin-block: 0;
}
@media (max-width: 500px) {
  .banner {
    height: 5em;
  }
  .banner h1 {
    font-size: 1em;
  }
}

th.sorter:hover {
  cursor: pointer;
}

td .prodimg {
  width: 100%;
  max-width: 50px;
}

td:hover .prodimg {
  max-width: 250px;
}

tr.prodimg {
  transition: border-color 0.2s background-color 0.2s;
}

tr.prodimg:hover {
  border-color: var(--action);
  background-color: linear-gradient(white, var(--action));
}

footer > div {
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
}

.w3-bottom section {
  display: none;
}

.w3-theme-neg {
color:var(--primary) !important;background-color:var(--negative) !important}
.w3-theme-banner {
color:var(--action) !important;background-color:var(--primary) !important}
.w3-theme {
color:#fff !important;background-color:var(--primary) !important}
.w3-theme-light {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-dark {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-l5 {
color:#000 !important;background-color:#e8eaf6 !important}
.w3-theme-l4 {
color:#000 !important;background-color:#c5cae9 !important}
.w3-theme-l3 {
color:#000 !important;background-color:#9fa8da !important}
.w3-theme-l2 {
color:#fff !important;background-color:#7986cb !important}
.w3-theme-l1 {
color:#fff !important;background-color:#5c6bc0 !important}
.w3-theme-d1 {
color:#fff !important;background-color:#3949ab !important}
.w3-theme-d2 {
color:#fff !important;background-color:#303f9f !important}
.w3-theme-d3 {
color:#fff !important;background-color:#283593 !important}
.w3-theme-d4 {
color:#fff !important;background-color:#1a237e !important}
.w3-theme-action {
color:#fff !important;background-color:#311b92 !important}
.w3-text-theme {
color:#1a237e !important}