/* CSS Document */

html {
  border-style: solid;
  border-color: WhiteSmoke;
  border-width: 4vw;
}

body {
  background: white;
  font: 1rem "Lucida Grande","Lucida Sans Unicode",geneva,verdana,sans-serif;
  color: DimGray;
  border: 3px solid Gainsboro;
  margin: 0;
}

* {
  margin: 0;
  padding: 0;
  outline: none;
}

#header {
  padding:3em 2.5em 1.5em;
}

#header h1 {
  font-family: "Times New Roman", Times, serif;
  font-weight: normal;
  font-size: 4rem;
}

#header p {
  text-indent: 0.2rem;
}

#navbar ul {
  list-style-type: none;
  background: MediumAquaMarine;
  border-top: 3px solid LimeGreen;
  border-bottom: 3px solid LimeGreen;
  padding: 1em;
  font-weight: bold;
}

#navbar ul li {
  display: inline;
  color: White;
}

#navbar ul li.active {
  color: DarkCyan;
}

#navbar ul li a {
  color: inherit;
  padding: 0.5em;
  text-decoration: none;
}

#navbar ul li a:hover {
  background: Turquoise;
}

#container {
  width: 90%;
  margin: 2rem 0;
}

#content p {
  margin-bottom: 1.5em;
  line-height: 1.75em;
  word-spacing: 2px;
}

#content a {
  color: DimGray;
  text-decoration: none;
  border-bottom:1px solid Silver;
}

#content a:hover {
  color: Black;
  border-bottom:1px solid Black;
}

#content ol {
  padding-left: 5%;
  padding-bottom: 1.5em;
}

#content li {
  margin-left: 1%;
  margin-top: 0.5em;
}

#content {
  width: 70%;
  float: left;
  margin-left: 3%;
  margin-bottom: 2rem;
}

table.moorings {
  width: 60%;
  text-align: center;
  margin:1em auto;
  border:1px solid Gainsboro;
}

table.moorings th {
  padding: 0.3em;
  color: #6CCC26;
  border-bottom:1px solid Gainsboro;
}

table.moorings td {
  padding: 0.3em;
}

table.tidetable {
  text-align: center;
  margin: 2em;
}

table.tidetable caption {
  caption-side: bottom;
  text-align: right;
  padding-top: 1em;
  font: Arial;
  font-size: 12px;
  color: Black;
}

table.tidetable td, th {
  padding: 0.2em 1em;
}

.ppl-user td {
  padding: 0.2em 1em;
}

#infobox {
  width: 20%;
  float: right;
  border-left: 1px solid Gainsboro;
  padding-left: 3em;
  margin-bottom: 2rem;
}

#infobox p {
  padding-bottom: 1em;
}

#footer {
  border-top: 2px solid Gainsboro;
  margin-top: 2em;
  padding: 2em;
  clear: both;
  text-align: center;
  font-size: 60%;
}

::placeholder {
  color: Red;
}