/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("background.png");
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: white;
  font-family: sans-serif;
  padding: 10px;
  max-width: 1500px;
  margin: auto;
  margin-top: 8px;
}

.left {
  width: 190px;
  float: left;
  padding: 10px;
  margin-bottom: 20px;
  background-color: #132b45;
}
    
    .left img {
      width: 100%;
    }
    
    .left h1 {
      margin: 0;
      text-align: center;
      font-size: 22px;
      text-shadow: 2px 2px black;
      color: #328065;
    }
    
    .left h2 {
      margin: 0;
      text-align: center;
      font-size: 35px;
      margin-bottom: 8px;
      text-shadow: 2px 2px black;
      color: #43b58e;
      margin-top: -5px;
    }
    
    .left h3 {
      margin: 0;
      width: 100%;
      float: left;
      margin-top: 12px;
      border-bottom: 1px solid white;
      margin-bottom: 5px;
    }
    
    .left a {
      margin: 0;
      width: 100%;
      float: left;
      color: white;
      text-decoration: none;
    }
    
    .left a:hover {
      text-decoration: underline;
    }

.right {
  width: calc(100% - 230px);
  float: right;
  margin-bottom: 20px;
}

    .right .tabs {
      margin: 0;
      height: 20px;
    }
    
        .right .tabs p {
          background-color: #132b45;
          float: right;
          margin-left: 10px;
          text-align: center;
          padding: 6px 12px 6px 12px;
        }
        
        .right .tabs p:before {
          content: "2 "
        }
    
        .right .tabs a {
          background-color: #132b45;
          color: white;
          float: left;
          margin-right: 10px;
          text-align: center;
          padding: 6px 12px 6px 12px;
        }
        
        .right .tabs a:hover {
          text-decoration: underline;
          filter: none;
        }

    .right .body {
      background-color: #132b45;
      padding: 5px 10px 15px 10px;
      margin-top: 8px;
      /*min-height: 750px;*/
    }
    
        .right p {
          padding: 0 10px 0 10px;
          text-align: justify;
          margin: 0
        }
        
        .right h1 {
          padding: 0;
          margin: 10px;
          border-bottom: 2px solid #328065;
          margin-bottom: 20px;
        }
        
        .right h2 {
          padding: 0;
          margin: 20px 10px 10px 10px;
        }
        
        .right hr {
          margin: -10px 10px 10px 10px;
          border-width: 1px;
          border-style: solid;
          border-color: #328065;
        }
        
        .right a {
          color: #6baccc;
          text-decoration: none;
        }
        
        .right a:hover {
          filter: brightness(120%);
          text-decoration: underline;
        }
        
        .right .tablelist {
          width: calc(100% - 25px);
          margin: 10px 0 10px 10px;
          border-collapse: collapse;
          box-shadow: 5px 5px black;
        }
        
          .right .tablelist th {
            background-color: #328065;
            padding: 5px;
          }
          
          .right .tablelist td {
            background-color: #364b62;
            padding: 5px;
          }

.infobox {
  background-color: #328065;
  float: right;
  max-width: 400px;
  margin: 0 15px 20px 20px;
  box-shadow: 5px 5px black;
}

    .infobox h1 {
      background-color: #328065;
      margin: 0;
      text-align: center;
      padding: 10px 10px 0px 10px;
      text-shadow: 3px 3px black;
    }
    
    .infobox .tab {
      background-color: #328065;
      padding: 0;
      margin: 0;
    }
    
    .infobox .tab button {
      background-color: #328065;
      border: none;
      padding: 5px;
      color: white;
      float: left;
    }
    
        .infobox .tab button:hover {
          background-color: #40a381;
        }
        
        .infobox .tab #active {
          border-bottom: solid;
          border-width: 2px;
        }
    
    .infobox img {
      width: 100%;
      display: none;
    }
    
    .infobox table {
      width: 100%;
      padding: 5px;
    }
    
    .infobox th {
      width: 30%;
      text-align: right;
      padding-right: 10px;
    }
    
.hub {
  margin: auto;
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

    .hub .item {
      margin: 10px;
      padding-bottom: 5px;
      width: 150px;
      text-align: center;
      background-color: #328065;
      box-shadow: 5px 5px black;
      font-size: 20px;
    }
    
        .hub a {
          color: white;
          font-weight: bold;
        }
        
        .hub .item img {
          width: 150px
        }
        
.nav {
  background-color: #364b62;
  margin: 20px 10px 0 10px;
  width: calc(100% - 25px);
  border-collapse: collapse;
  box-shadow: 5px 5px black;
}

  .nav #header {
    font-size: 24px;
    background-color: #328065;
  }
  
  .nav th {
    width: 30%;
    margin: 20px;
    padding: 10px;
  }

.gallery {
  margin: -20px 10px 0 10px;
  display: inline-block;
}

  .gallery .galleryimage {
    float: left;
    margin-top: 12px;
  }

    .gallery img {
      height: 150px;
      max-height: 250px;
      margin: 10px;
      box-shadow: 5px 5px black;
    }
    
    .gallery p {
      font-size: 12px;
      margin-top: -5px;
      margin-bottom: 0;
    }

.icon {
  height: 20px;
  vertical-align: -4px;
}

a[href="safari.html"] {
  color: orange;
  font-weight: bold;
}