@charset "utf-8";

body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  margin: 0;
  padding: 0;
  background:#fffef9;
  color:#333;
  width: 95%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Header */
.header-inner {
  overflow: auto;
  padding: 10px 0;
}
.logo {
  float: left;
  width: 140px;
  height: 60px;
  object-fit: inherit;
  margin-right: 10px;
}
#site-title {
  margin: 10px 0 0 0;
  padding-top: 8px;
  font-size: 1.5em;
  text-shadow: 2px 2px 3px #ccc;
}

/* Navigation */
nav {
  clear: both;
  margin-top: 6px;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: auto;
}
nav li {
  float: left;
  width: 25%;
  text-align: center;
}
nav a {
  display: block;
  padding: 10px 0;
  text-decoration: none;
  background: moccasin;
  color: cadetblue;
  transition: background-color .4s, color .3s;
}
nav a:hover,
nav a:focus {
  background: darkblue;
  color: ivory;
}
nav a.current {
  background: linear-gradient(90deg, #0b6fb2, #ff9f1c);
  color: white;
}

/* "Hero" */
#hero {
  margin-top: 16px;
  padding: 18px;
  background: #f1f7fc;
  overflow: auto;
}
.hero-img {
  float: right;
  width: 30%;
  margin-left: 12px;
  display: block;
}
#hero h2 {
  margin-top: 0;
}

/* Columns using floats */
.three-col .col {
  float: left;
  width: 32%;
  background: #fff;
  margin-right: 2%;
  padding: 12px;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.three-col .col:last-child { margin-right: 0; }

/* two-column layout */
.two-col .col-left {
  float: left;
  width: 65%;
  padding: 10px 0;
  box-sizing: border-box;
}
.two-col .col-right {
  float: right;
  width: 30%;
  padding: 10px 0;
  box-sizing: border-box;
}

/* Gallery using floats */
.imgGallery { margin-top: 12px; overflow: auto; }
.imgItem {
  float: left;
  width: 23%;
  margin-right: 2%;
  margin-bottom: 12px;
}
.imgItem img {
  width: 100%;
  display: block;
}
.imgItem .caption { font-size: 0.9em; text-align: center; margin-top: 6px; }
.imgItem:nth-child(4n) { margin-right: 0; }

#gallery {
  clear: both;
}

/* Table */
table {
  width: 100%;
  border-collapse: collapse;
  border: 8px double #075d92;
}
th, td {
  padding: 10px;
  border: 1px solid #999;
  text-align: left;
}
thead, tfoot {
  background: #075d92;
  color: #fff;
}
tbody tr:nth-child(even) {
  background: #c5cde0;
}

/* Form styles */
form {
  width: 100%;
  margin: 1em 0;
}
fieldset {
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}
legend { font-weight: bold; }
label { display: block; margin-bottom: 6px; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  width: 95%;
  padding: 6px;
  margin-bottom: 8px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  font-size: 1rem;
}
input[type="submit"], input[type="reset"], .button {
  display: inline-block;
  padding: 8px 14px;
  background: #0b6fb2;
  color: white;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 4px;
}
input[type="reset"] { background: #888; }

:focus { outline: 3px solid #1e90ff; outline-offset: 2px; }
input:valid, textarea:valid, select:valid { border: 2px solid #2e8b57; background: #f6fff6; }
input:invalid, textarea:invalid, select:invalid { border: 2px solid #d9534f; background: #fff6f6; }

/* Footer */
footer {
  clear: both;
  margin-top: 12px;
  padding: 10px;
  background: moccasin;
  text-align: center;
  color: rgba(102,102,102,0.9);
  font-weight: bold;
}

/* Utilities */
.center { text-align: center; }

@media only screen and (max-width: 768px) {
  .logo { float:none; display:block; margin: 0 auto 6px auto; }
  #site-title { text-align: center; padding-top: 0; }
  nav li { float: none; width: 100%; }
  .hero-img { float:none; width: 60%; margin: 0 auto 12px auto; display:block; }
  .three-col .col, .imgItem, .two-col .col-left, .two-col .col-right {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  table, tbody, tr, td, th { display: block; }
  thead, tfoot { display: none; }
  tbody td { padding-left: 40%; position: relative; }
  td::before { content: attr(data-label); position: absolute; left: 0; top: 0; padding: 10px; width: 38%; font-weight: bold; }
}

@media only screen and (min-width: 769px) and (max-width: 1100px) {
  .three-col .col { width: 48%; margin-right: 4%; }
  .three-col .col:last-child { margin-right: 0; }
  .imgItem { width: 48%; margin-right: 4%; }
  .imgItem:nth-child(2n) { margin-right: 0; }
}