/* CSS for Consignment Boat Sales */

* {
  box-sizing: border-box;
}

html {
  font-family: "Lucida Sans", sans-serif;
  color: #999999;
  background-color: #1d1d1d;
}

body {
  padding: 0;
  margin: 0;
}

.cbs-content {
  margin-left: auto;
  margin-right: auto;
}

/* Header/logo Title */
.header {
  padding: 15px;
  background-color: #1d1d1d;
  margin: auto;
}

/* Header container */
.hrow {
  display: flex;
  flex-wrap: wrap;
}

.hleft {
  flex: 70%;
}

.hright {
  flex: 30%;
}

/* Clear floats after the columns */
.hrow:after {
  content: "";
  display: table;
  clear: both;
}

/* On screens that are 980px wide or less, make the columns stack on top of each other instead of next to each other */
@media only screen and (max-device-width: 1024px) {
  .hleft {
    width: 100%;
  }
  .hright {
    width: 100%;
  }
}

/* Style the top navigation bar */
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

ul.topnav li {
  float: left;
  border: 2px solid #169ed2;
  border-radius: 8px;
  margin-right: 10px;
  margin-bottom: 10px;
}

ul.topnav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

ul.topnav li a:hover {
  background-image: linear-gradient(
    #1d1d1d,
    #169ed2
  ); /* Standard syntax (must be last) */
  color: #f2f2f2;
}

ul.topnav li.right {
  float: right;
}

@media only screen and (max-width: 980px) {
  ul.topnav li.right,
  ul.topnav li {
    float: none;
  }
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* home page body container */
.brow {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.bodyLeft {
  flex: 33%;
  padding: 20px;
}

.bodyRight {
  flex: 67%;
  padding: 20px;
}

/* Clear floats after the columns */
.brow:after {
  content: "";
  display: table;
  clear: both;
}

/* On screens that are 1100px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1100px) {
  .bodyLeft {
    width: 100%;
  }
  .bodyRight {
    width: 100%;
  }
}

h1.home {
  font-size: 22px;
  margin: 0px;
  padding: 0px;
  font-weight: bold;
  text-decoration: none;
  color: #169ed2;
}

/* for Boat Listings on home page*/

.hb4sblock {
  float: left;
  width: 100%;
  padding: 10px;
  margin-top: 10px;
  margin-bottom: 20px;
  background-color: #1a4355;
  border: 2px solid #636363;
}

.hb4sblock a {
  text-decoration: none;
}

h2.hb4sListing {
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0px;
}

h3.hb4sListing {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 14px;
  padding: 0px;
}

p.hb4sListing {
  font-size: 10px;
  color: #fff;
  margin-top: 12px;
  margin-bottom: 5px;
  padding: 0px;
}

/* for the About Us page */

div.aboutLeft {
  flex: 33%;
  padding: 20px;
}

div.aboutRight {
  flex: 67%;
  padding: 20px;
}

/* On screens that are 1100px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1100px) {
  div.aboutLeft {
    display: none;
  }
}

/* for the LUSYB page */

div.lusybLeft {
  flex: 50%;
  padding: 30px;
}

div.lusybRight {
  flex: 50%;
  padding: 30px;
}

/* On screens that are 1100px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1100px) {
  div.lusybLeft {
    display: none;
  }
}

/* Local Fishing Guide page body container */

.lfgLeft {
  flex: 50%;
  padding: 20px;
}

.lfgRight {
  flex: 50%;
  padding: 20px;
}

/* On screens that are 1100px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1100px) {
  .lfgLeft {
    width: 100%;
  }
  .lfgRight {
    width: 100%;
  }
}

.lfgblock {
  float: left;
  width: 100%;
  padding: 10px;
  margin-top: 0px;
  margin-bottom: 40px;
  background-color: #1a4355;
  border: 2px solid #636363;
}

h1.lfgPage {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #169ed2;
  font-size: 2.4em;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

h2.lfgPage {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #169ed2;
  font-size: 1.6em;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

p.lfgPage {
  text-align: center;
  font-size: 1.2em;
  color: #aaa;
  margin-top: 12px;
  margin-bottom: 10px;
  padding: 0px;
}

p.lfgPage a {
  color: #ddd;
  text-decoration: none;
}

p.lfgPage a:hover {
  color: #fff;
}

/* for Boats 4 Sale page*/

/* home page body container */
.b4srow {
  display: flex;
  flex-wrap: wrap;
  width: 95%;
  margin: auto;
  margin-bottom: 20px;
}

/* Clear floats after the columns */
.b4srow:after {
  content: "";
  display: table;
  clear: both;
}

/* Create four equal columns that floats next to each other */
.b4sblock {
  float: left;
  width: 22%;
  padding: 10px;
  margin: 10px;
  background-color: #1a4355;
  border: 2px solid #636363;
}

.b4sblock a {
  text-decoration: none;
}

/* Clear floats after the columns */
.b4srow:after {
  content: "";
  display: table;
  clear: both;
}

/* On screens that are 1000px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1000px) {
  .b4sblock {
    width: 100%;
  }
}

h1.b4sListing {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #169ed2;
  font-size: 2em;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

h2.b4sListing {
  font-size: 1.1em;
  font-weight: bold;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0px;
}

h3.b4sListing {
  font-size: 1em;
  font-weight: bold;
  color: #bfbfbf;
  margin-top: 10px;
  margin-bottom: 10px;
  padding: 0px;
}

p.b4sListing {
  font-size: 0.9em;
  color: #fff;
  margin-top: 12px;
  margin-bottom: 5px;
  padding: 0px;
}

.b4sListingimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 2px solid #636363;
}

.counter-table {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  font-size: 0.7em;
  font-weight: lighter;
}

.counter-table a {
  color: #ffffff;
  font-weight: bold;
  text-decoration: none;
}

.counter-table a:hover {
  color: #a3c2df;
}

/* for the Boat Display page */

.imageDisplay {
  display: block;
  width: 100%;
  margin-top: 20px;
  margin-right: auto;
  margin-bottom: 20px;
  margin-left: auto;
}

/* display discription container */
.drow {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.discLeft {
  flex: 50%;
  padding: 20px;
}

.discRight {
  flex: 50%;
  padding: 20px;
}

/* Clear floats after the columns */
.drow:after {
  content: "";
  display: table;
  clear: both;
}

/* On screens that are 1100px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1100px) {
  .discLeft {
    width: 100%;
  }
  .discRight {
    width: 100%;
  }
}

/* for Table on Display and LUSYB pages */
.specs {
  width: 100%;
  border: none;
  font-size: 12px;
  line-height: 24px;
  border: 1px solid #169ed2;
  float: left;
}

.specs h2 {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  padding: 0px;
  margin: 0px;
}
.specs td {
  padding: 4px 10px;
}
.specs .blue {
  background-color: #272f33;
}

.specs a.small_btn {
  font-size: 14px;
  font-weight: bold;
  background-color: #006699;
  color: #a3c2df;
  text-decoration: none;
  line-height: 14px;
  padding: 4px 10px;
  float: right;
  display: block;
}
.specs a.small_btn:hover {
  background-color: #0099cc;
}

.contact {
  width: 100%;
  border: none;
  font-size: 12px;
  line-height: 24px;
  border: 1px solid #169ed2;
  float: left;
}
.contact input,
textarea {
  padding: 1px;
  border: 1px solid #3399cc;
  width: 100%;
  float: right;
}
.contact h2 {
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  padding: 0px;
  margin: 0px;
}
.contact td {
  padding: 4px 10px;
}
.contact .blue {
  background-color: #272f33;
}

.contact a.small_btn {
  font-size: 14px;
  font-weight: bold;
  background-color: #006699;
  color: #a3c2df;
  text-decoration: none;
  line-height: 14px;
  padding: 4px 10px;
  float: right;
  display: block;
}
.contact a.small_btn:hover {
  background-color: #0099cc;
}

.contact_info {
  float: right;
  width: 280px;
}

h1.displayPage {
  width: 100%;
  text-align: center;
  font-weight: bold;
  color: #169ed2;
  font-size: 2em;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
}

h2.displayPage {
  text-align: center;
  font-weight: bold;
  color: #bfbfbf;
  font-size: 1.6em;
  margin-top: 10px;
  margin-right: 0px;
  margin-bottom: 10px;
  margin-left: 0px;
}

p.displayPage {
  font-size: 0.8em;
  margin-top: 12px;
  margin-bottom: 10px;
  padding: 0px;
}

p.sold {
  font-size: 3em;
  margin-top: 12px;
  text-align: center;
  font-weight: bold;
  color: red;
  margin-bottom: 10px;
  padding: 0px;
}

/* for the Mail Responder page */

div.mrLeft {
  flex: 40%;
  padding: 30px;
}

div.mrRight {
  flex: 60%;
  padding: 30px;
}

/* On screens that are 1100px wide or less, make the columns stack on top of each other instead of next to each other */
@media screen and (max-width: 1100px) {
  div.mrLeft {
    display: none;
  }
}

/* Address Block */
.address {
  width: 200px;
  background-color: #000000;
  border: 1px solid #484848;
  font-size: 14px;
  font-weight: bold;
  text-align: left;
  color: #169ed2;
  text-decoration: none;
  padding: 8px;
  margin-top: 0px;
  margin-bottom: 20px;
}

.address a {
  color: #fff;
  text-decoration: none;
}

.himg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  margin-bottom: 20px;
  border: 2px solid #636363;
}

/* Footer */
.footer {
  padding: 10px;
  font-size: 10px;
}

.footer a {
  color: #ffffff;
  text-decoration: none;
}

.footer a:hover {
  color: #a3c2df;
}

input,
textarea,
select {
  border-radius: 8px;
  padding: 12px;
  border: none;
  margin: 10px auto;
  box-shadow: 0px 0px 10px -13px rgba(0, 0, 0, 0.33);
  display: block;
  background-color: rgba(0, 139, 139, 0.33);
}

select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg fill='black' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='32' height='32'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 1.5em auto, 100%;
  padding-right: 2.5em;
}

table {
  border: none;
  outline: none;
  box-shadow: none;
}

table td {
  border: none;
}

table.container {
  box-shadow: 0px 0px 33px -12px rgba(0, 0, 0, 0.33);
  border-radius: 12px;
  overflow: hidden;
  border: none;
  padding: 20px;
  margin-bottom: 50px;
  width: revert-layer;
}

img:not(.main-logo) {
  border-radius: 12px;
  border: none;
  box-shadow: 0px 0px 33px -12px rgba(0, 0, 0, 0.33);
  margin: 15px 0;
}

a,
span {
  color: #000;
}

input[type="submit"],
a.main-btn {
  background-color: darkcyan;
  color: #fff;
  border: none;
  padding: 12px 30px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0px 0px 33px -12px rgba(0, 0, 0, 0.33);
  transition: 500ms ease;
}

input[type="submit"]:hover,
a.main-btn:hover {
  transform: translateY(-5px);
}

td[bgcolor="darkcyan"] {
  border-radius: 8px;
}

form {
  margin-block-end: 0 !important;
}

.contactArea a{
    color:#ffffff !important;
}