@charset "UTF-8";
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #e0e0e0;
}

/* at small sizes show everything in a stack */
.container {
    display: grid;
    justify-content: start;
    grid-template-areas:
      "tabset"
      "main"
      "sidebar";
}

/* once there's adequate width, move the sidebar to the side */
@media (min-width: 600px) {
  .container {
    grid-template-areas: 
      "sidebar tabset"
      "sidebar main";
  }
}

.sidebar {
    grid-area: sidebar;
    padding-right: 12px;
}
.tabset {
    grid-area: tabset;
    display: grid;
    grid-template-columns: repeat(5, 85px);
    grid-template-rows: 30px;
    grid-column-gap: 3px;
}
.tab {
    border-top: 1px solid black;
    border-left: 1px solid black;
    border-right: 1px solid black;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-top: 5px;
    text-align: center;
    cursor: pointer;
}
.tab:hover {
  background-color: #ccc;
}
.tab:active {
    background-color: #bbb;
}
.current-tab {
    background-color: white;
}

.main {
    grid-area: main;
    border: 1px solid black;
    background-color: white;
}

.content {
    padding: 5px;
    padding-top: 10px;
}

/* ####################################################### */
/* general purpose classes & stylings */
/* ####################################################### */

.not-for-now {
    text-decoration: line-through;
    color: #f01a06;
}
.covid-note {
    color: #f01a06;
}
a {
    color: #e78007; 
    text-decoration: none;
}
a:hover {
    color: #e61a06;
}
ul {
  margin-top: 0px;
  margin-bottom: 0px;
}

/* approximately an <h2> title line */
.heading {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: .5em;
    margin-bottom: .2em;
}

/* more standout than a heading */
.banner {
    font-size: 1.1em;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 4px;
    padding: 5px 10px;
    background: #fff5e9; 
    border: 1px solid #f87740; 
    border-radius: 14px; 
}

/* a call-out box */
.highlight {
    margin: 30px 0; 
    padding: 12px 16px 2px; 
    background: #fff5e9; 
    border: 1px solid #f87740; 
    border-radius: 14px; 
}

.highlight>div {
    margin-bottom: .5em;
}

.paragraph {
    margin-bottom: .5em;
    padding-left: 10px;
}

.emphatic-note {
    font-size: 80%;
    color: red;
    padding-left: 25px;
}

/* ####################################################### */
/* sidebar */
/* ####################################################### */

.address {
    padding-top: 20px;
    font-size: 90%;
    line-height: 1.4;
}
.contact {
    padding-top: 10px;
    font-size: 90%;
    line-height: 1.6;
}
.media {
    padding-top: 10px;
}
.copyright {
  padding-top: 15px;
  font-size: 90%;
  font-style: italic;
}

/* ####################################################### */
/* home panel */
/* ####################################################### */

.home-nav {
    color: #e78007;
    cursor: pointer;
}
.home-nav:hover {
    color: #e61a06;
}

/* ####################################################### */
/* class panel */
/* ####################################################### */

.cls-gallery {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 1px solid black;
    display: grid;
    grid-template-areas:
    "image1"
    "image2"
    "image3";
    grid-row-gap: 3px;
}
.cls-gallery>img {
    width: 100%;
    object-fit: contain;
}
#cls-img1 { grid-area: image1; }
#cls-img2 { grid-area: image2; }
#cls-img3 { grid-area: image3; }

/* once there's adequate width, place the images side by side */
@media (min-width: 1000px) {
  .cls-gallery {
    grid-template-areas: 
      "image1 image2 image3";
    grid-column-gap: 3px;
  }
}


.cls-additional-info {
    margin: 10px 0; 
    padding: 10px 16px 5px 16px; 
    background: #f0f5e9; 
    border: 1px solid #407740; 
    border-radius: 14px; 
}

.cls-size-form {
    display: grid;
    grid-template-columns: 1fr;
    padding-left: 10px;
}

.cls-radio-label {
    grid-row: 1;
}
.cls-grp-radio {
    display: grid;
    grid-template-columns: 40px 40px 40px 40px;
    grid-row-gap: 2px;
    grid-row: 2;
}
.cls-grp-radio-2 {
    display: grid;
    grid-template-columns: 60px 60px;
    grid-row-gap: 2px;
    grid-row: 2;
}
.cls-grp-radio-3 {
    display: grid;
    grid-template-columns: 60px 80px 60px;
    grid-row-gap: 2px;
    grid-row: 2;
}
#class-form input[type=radio] {
    grid-row: 1;
    justify-self: center;
}

.cls-grp-label {
    grid-row: 2;
    justify-self: center;
    padding-left: 2px;
}

#class-form input[type=submit] {
    grid-row: 3;
    justify-self: start;
    margin-top: 10px;
}

.cls-description {
    margin: 20px 0 10px 0; 
    padding: 10px 16px 5px 16px; 
    background: #f0f5e9; 
    border: 1px solid #407740; 
    border-radius: 14px; 
}

.box-with-fig {
    display: grid;
    grid-template-areas: "fig-area" "text-area";
    grid-column-gap: 3px;
}

@media (min-width: 1000px) {
  .box-with-fig {
    grid-template-areas: 
      "fig-area text-area";
    grid-column-gap: 3px;
  }
}

.box-fig-section { 
    grid-area: fig-area;
}
.box-fig-section>img {
    width: 120px;
    height: auto;
}
.box-text-section {
    grid-area: text-area;
}

/*
 *[ "which session"
 *  [ radio-b sess1
 *  [ radio-b sess2
 *  [
 * [ name box
*/
.sym-form {
    display: grid;
    grid-template-columns: 1fr;
    padding-left: 10px;
}

#sym-session-title {
    grid-row: 1;
    justify-self: left;
    padding-left: 8px;
    padding-top: 10px;
}
.sym-session-radio {
    grid-row: 2;
    display: grid;
    grid-template-columns: 30px 1fr;
    grid-row-gap: 2px;
    padding-top: 5px;
}
.sym-radio-button {
  grid-column: 1;
}
.sym-radio-label {
  grid-column: 2;
}
.sym-reg {
  grid-row: 3;
  display: grid;
  grid-template-columns: 100px 150px;
  grid-row-gap: 5px;
  padding-top: 10px;
}
#sym-submit {
  grid-row: 4;
  justify-self: center;
  margin: 15px 0 10px 20px;
  font-size: 120%;
  border-radius: 5px;
  background-color: #fca33d;  
  padding-top: 15px;
}

/* ####################################################### */
/* modal dialog boxes */
/* ####################################################### */

.modal-bg {
    display: none; 		/* Hidden by default */
    position: fixed; 	/* Stay in place */
    z-index: 1; 		/* Sit on top */
    left: 0;
    top: 0;
    width: 100%; 		/* Full width */
    height: 100%; 		/* Full height */
    overflow: auto; 	/* Enable scroll if needed */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */

.edit-box {
    display: grid;
    grid-row-gap: 2px;
    margin: 15% auto; 				/* 15% from the top and centered */
    padding: 20px;
    width: 80%;
    background: #fff5e9; 
    border: 2px solid #f87740;
    border-radius: 14px; 
}
@media (min-width: 1000px) {         /* don't need a ton of space for popup on a laptop */
  .edit-box { 
    width: 30%; 
  }
}
.edit-header {
    display: grid;
    grid-template-columns: auto 20px;
}
.edit-header-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #993300;
}
.edit-header-x {
    font-size: 1.2em;
    font-weight: bold;
    text-align: center;
    border: 1px solid black;
    border-radius: 4px;
    cursor: pointer;
}
.edit-header-x:hover {
    color: #e61a06;
}
.edit-form input[type=radio] {
    justify-self: center;
}
.edit-form input[type=submit] {
    justify-self: start;
    margin-top: 10px;
}
.edit-form {
    display: grid;
}