body{
  background-color: #387494;				/*carolina blue*/
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
  width: 100%;
  text-size-adjust: none;
  -webkit-text-size-adjust: none;
  -moz-text-size-adjust: none;
  -ms-text-size-adjust: none;
}

a:link {
  color: #D58729;
  text-decoration: underline;
  font-weight: normal;
}

a:visited {
  color: #D58729;
  text-decoration: underline;
  font-weight: normal;
}

a:hover {
  color: #A76313;
  text-decoration: underline;
  font-weight: bold;
}

a:active {
  color: #A76313;
  text-decoration: underline;
  font-weight: normal;
}

/*MAIN DIVISIONS*/
#wrapper{
  display: grid;
  grid-template-columns: 12em minmax(35em, 80fr);
  grid-template-rows: 4em minmax(6em, auto) auto auto;
  grid-template-areas:
    "leftimage headertext"
    "menu classes"
    "menu content"
    "adobe footer";
  gap: 0.0625em;
  align-items: stretch;
  align-content: start;
  align-self: stretch;
}

/* This block is some special setup for smaller-screen devices (mobile phones, etc.). */
@media (max-width: 40em) {
  #wrapper{
    display: grid;
    grid-template-columns: 12em minmax(25em, 80fr);
    grid-template-rows: 4em auto minmax(6em, auto) auto auto auto;
    grid-template-areas:
      "leftimage headertext"
      "menu menu"
      "classes classes"
      "content content"
      "adobe adobe"
      "footer footer";
    gap: 0.0625em;
    align-items: stretch;
    align-content: start;
    align-self: stretch;
  }
  
  #navigation{
    flex-wrap: wrap;
    display: flex;
/*    column-count: 3; */
    list-style-type: none;
    text-align: left;
    text-decoration: none;
  }

  #navigation li{
    flex: 1 0 25%;
    text-decoration: none;
    list-style-type: none;
    padding: 0.3125em;
    background-color: #E9A350;				/*Indian yellow*/
  }

  #materials li{
    text-align: right;
  }
}

#leftimage{
  grid-area: leftimage;
  float: left;
  margin: 0;
  height: 4em;
  min-width: 15%;
  background-color: #E9A350;				/*Indian yellow*/
}

#headertext{
  grid-area: headertext;
  font-size: 180%;
  font-weight: bold;
  margin: 0;
  min-width: 85%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #E9A350;				/*Indian yellow*/
  color: white;
}

#leftwrapper{
  grid-area: menu;
  float: left;
  background-color: #E9A350;				/*Indian yellow*/
}

#leftsidebar{
  text-align: left;
}

#navigation {
  padding: 0.25em;
}

#navigation ul{
  width: 80%;
  list-style-type: none;
  text-align: left;
  text-decoration: none;
}

#navigation li{
  text-decoration: none;
  list-style-type: none;
  padding: 0.3125em;
  background-color: #E9A350;				/*Indian yellow*/
}

#navigation li a{
  text-decoration: none;
  list-style-type: none;
  font-size: 90%;
  font-weight: bold;
  color: white;
}

#navigation li a:hover {
  color: #A76313;
  font-weight: bold;
}

#materials li{
  list-style-type: none;
}

#separatorline {
  color: #742929;
  text-align: center;
}

#beginnerclass{
  grid-area: classes;
  min-height: 0;
  max-height: 7.5em;
  background-color: #A76313;				/*golden brown*/
  margin: 0 5% 0 5%;
  padding: 0;
  text-align: center;
  font-weight: bold;
  font-style: italic;
  font-size: 120%;
  color: white;
  border: 0.3125em #A76313;				/*golden brown*/
  border-style: ridge;
}

#contentwrapper{
  grid-area: content;
  float: left;
  width: 100%;
  background-color: #387494;
}

#content{
  padding: 0 0.625em 0.25em 0.625em;
  color: #387494;
  background-color: white;
  margin: auto;
  width: 95%;
}

#content h1{
  font-size: 150%;
  text-align: center;
  margin: 0.625em -0.5em 0 -0.5em;
  color: white;
  background-color: #387494;				/*carolina blue*/
}

#content p{
  padding: 0 0.5em 0 0.25em;
}

/* The following section is for any page without a beginner class banner. */
/* This section should copy the above "content" items with the exception of grid-area. */
#totalcontent{
  grid-area: classes;
  padding: 0 0.625em 0.25em 0.625em;
  color: #387494;
  background-color: white;
}

#totalcontent h2{
  text-align: center;
  margin: 0.625em -0.625em 0 -0.625em;
  color: white;
  background-color: #387494;				/*carolina blue*/
}

#total content p{
  padding: 0 0.5em 0 0.25em;
}

/* Olney class page */
#localclassheader{
  grid-area: classes;
  text-align: center;
  color: white;
  font-size: 80%;
  height: 3em;
}

#olneyclass{
  grid-area: classes;
  width: 100%;
  background-color: #A76313;				/*golden brown*/
  padding: 0 0.5em 0 0.625em;
  margin: -2.5em 0 0 -0.625em;
  text-align: left;
  color: white;
  border: 0.3125em ridge #A76313;				/*golden brown*/
  font-size: 100%;
}

#olneyclass h1{
  font-size: 120%;
  text-align: left;
}

.boldblock{
  font-weight: bold;
  font-style: italic;
}

#bridgeemail{
  background-color: white;
}

#copybutton{
}

#copybutton:hover{
  visibility: visible;
  opacity: 1;
}

.classlinks{
  background-color: white;
}

#materialstable td{
  padding: 0.5em;
}

/* Bidding Page */
.biddingcaption{
  float: left;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
}

.biddingtable{
  text-align: center;
  width: 90%;
  table-layout: fixed;
}
  
.biddingtable td{
  padding: 0.3125em;
  width: 33%;
  margin: auto;
}

/* Footer section */
#footer{
  grid-area: footer;
  width: 90%;
  margin: 0;  
  font-size: 80%;
  color: white;
}

#footer ul{
  font-weight: bold;
  list-style-type: none;
  text-align: center;
}

#footer li{
  display: inline;
}

#footer li a{
  text-decoration: none;
  padding: 0.25em 0.75em;
  color: white;
}

#adobedownload {
  grid-area: adobe;
  margin-left: 0.0625em;
  margin-right: 0.0625em;
  padding: 0.25em;
  background-color: #E9A350;				/*Indian yellow*/
  color: white;
  font-weight: normal;
  font-size: 80%;
  text-align: left;
}