/*--Layout--*/
body {
  margin: 0px;
  background-color: #dbe2e9;
  color: #000;
  font-family: Verdana, Arial;
  font-size: 0.9em;
  text-align: center;
}

main {
  max-width: 942px;
  margin: 20px auto 20px;
  padding: 10px 20px 40px;
  border: 1px solid #000;
  background-color: #fff;
  line-height: 150%;
  color: #000;
  text-align: left;
  box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px;
}

div#heading {
  margin-bottom: 40px;
}

footer {
  max-width: 942px;
  margin: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px 10px 20px 6px;
}

div#footerNav {
    padding-bottom: 20px;
}

div#copyright {
  color: #555;
}


/*--Basic sections--*/
section {
  margin-bottom: 40px;
}

div.sectionHeading {
  margin-bottom: 0px;
  padding-bottom: 0px;
  font-size: 1.1em;
  font-weight: bold;
}


/*--Form elements--*/
div.inputHeading {
  margin: 25px 0px 5px;
  font-weight: bold;
}

div#submissionPanel {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

label {
  display: inline-flex;
  align-items: center;
  padding: 5px 5px 5px 0px;
  line-height: 100%;
}

label input {
  margin-right: 7px;
}

input[type="text"], textarea {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 5px;
  padding: 5px;
  font-family: Verdana, Arial;
  font-size: 0.9em;
}

input[type="submit"] {
  margin: 15px 45px 15px 0px;
  padding: 3px 5px;
}


/*--Custom elements--*/
div.collapsible {
  height: auto;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}

div.info {
  min-height: 35px;
  display: flex;
  align-items: center;
  padding: 0px 10px 10px 45px;
  background-image: url("info_icon.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 35px;
}

div.success {
  min-height: 35px;
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 45px;
  background-image: url("success_icon.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 35px;
}

div.error {
  min-height: 35px;
  display: flex;
  align-items: center;
  padding: 10px 10px 10px 45px;
  background-image: url("error_icon.png");
  background-repeat: no-repeat;
  background-position: left;
  background-size: 35px;
  color: #f00;
}


/*--Tooltips (from https://medium.com/free-code-camp/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346)--*/
[tooltip] {
  position: relative;
}

[tooltip]::before {
  position: absolute;
  left: 50%;
  top: -6px;
  z-index: 99;
  transform: translateX(-50%);
  border-width: 4px 6px 0px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.7) transparent transparent;
  content: "";
  opacity: 0%;
}

[tooltip]::after {
  position: absolute;
  left: 50%;
  top: -6px;
  z-index: 99;
  transform: translateX(-50%) translateY(-100%);
  min-width: 100px;
  padding: 5px;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 0.9em;
  content: attr(tooltip);
  border-radius: 5px;
  opacity: 0%;
  pointer-events: none;
}

[tooltip-position="top"]::before{
  left: 50%;
}

[tooltip-position="bottom"]::before{
  top: 100%;
  margin-top: 8px;
  transform: translateX(-50%) translatey(-100%) rotate(-180deg);
}

[tooltip-position="left"]::before{
  left: 0%;
  top: 50%;
  margin-left: -12px;
  transform: translatey(-50%) rotate(-90deg);
}

[tooltip-position="right"]::before{
  left: 100%;
  top: 50%;
  margin-left: 1px;
  transform: translatey(-50%) rotate(90deg);
}

[tooltip-position="top"]::after{
  left: 50%;
}

[tooltip-position="bottom"]::after{
  top: 100%;
  margin-top: 8px;
  transform: translateX(-50%) translateY(0%);
}

[tooltip-position="left"]::after{
  left: 0%;
  top: 50%;
  margin-left: -8px;
  transform: translateX(-100%) translateY(-50%);
}

[tooltip-position="right"]::after{
  left: 100%;
  top: 50%;
  margin-left: 8px;
  transform: translateX(0%) translateY(-50%);
}

[tooltip]:hover::after, [tooltip]:hover::before {
   opacity: 100%;
}


/*--Headings--*/
h1 {
  margin-bottom: 0px;
  line-height: 100%;
  font-size: 1.8em;
  font-weight: bold;
}

h3 {
  margin-top: 10px;
  color: #555;
  font-size: 1.2em;
  font-weight: normal;
}


/*--Link styles--*/
a, a:visited {
  color: #0066cc;
  text-decoration: none;
}

a:hover, a:active {
  color: #2086ec;
}

div#footerNav a, div#footerNav a:visited {
  padding: 4px;
  color: #25496d;
  font-weight: bold;
}

div#footerNav a:hover, div#footerNav a:active {
  color: #306ca7;
}


/*--Responsive elements--*/

@media screen and (max-width: 962px) {
  body {
    background-image: none;
  }

  main {
    margin: 0px;
    padding: 5px 10px 30px;
    border: none;
    box-shadow: none;
  }

  footer {
    flex-direction: row;
    justify-content: space-between;
  }

  div#footerNav {
    padding: 0px;
  }
}