/* style-responsive-reefco.css
   Created 2019-10-10 for Responsive REEFCO site
   Modified from Responsive Paradise Connections css
*/
/* TOP */
/*
12/28/2024 - added scroll to top functionality
7/25/2019 - https://zinoui.com/blog/css-tables-tutorial Trying out their css for tables and then will make responsive with horizontal scrolling.

7/22/2019 - Added video-responsive class for YouTube videos (from bargecharters css)

Set default font size to 16px which is standard in most browsers
12/30/2018 - Added dropdown menu & wrote out color names
*/

/*
1/17/2019 - Added xspace class to add a bit of lower extra padding.
1/21/2019 - Media query for barge list change layout a bit earlier (new-660 old=650)
1/30/2019 - Added * so everything is box-sizing: border-Flexbox
2/12/2019 - Added classes for GoToTop button
2/12/2019 - Make the MORE dropdown in the menu be transparent and border-bottom have line
2/17/2019 - Added code for Regions/Belgium page for belgian barges. Has 2 columns of 50% that change to 100% (stacks) if viewport less than 675px
2/22/2019 - Modified file for flexing barges.html
2/25/2019 - Added class "indent-2" for 2nd level indent
3/9/2019 - Added more to box-sizing
3/14/2019 - Added xspace-top
3/15/2019 - Added "bold" class
7/6/2019 - Modified default font weight to 500 (normal=400) because it is too light
9/1/2020 - Modified default font weight to 600 (normal=400) because it is too light. Punctuation such as semicolon is difficult to see. Put back to 500 because even 550 looked bold, not slightly darker
9/1/2020 - Removed background (zigzag) image
*/

*, *::before, *::after {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}

body {
  background-color: #ffffff; /* color outside of content */
}

#container {
  max-width: 800px;
  margin: 0 auto;
  border: 3px solid #a4a4a4;
  border-radius: 5px;
  background-color: white;
  padding: 1rem;
  font-size: 1rem;
  font-family: Arial,Helvetica,Verdana,sans-serif;
  font-weight: 500;
  color: black;
  line-height: 1.7;
}

.color-reefco {
  color: darkblue;
}

.color-title {
  color: seagreen;
}

h1 {
  font-size: 2rem; /* 32px */
  font-weight: normal;
  line-height: 1.2;
  color: darkblue;
}
h2 {
  font-size: 1.5rem; /* 24px */
  font-weight: normal;
  line-height: 1.2;
  color: darkblue;
}
h3 {
  font-family: "Times New Roman", Times, serif;
  font-size: 1.25rem; /* 20px */
  font-weight: normal;
  line-height: 1.2;
}

table {
  border-collapse: collapse;
}
img, a img {
  border:  none;
}

.center {
  text-align: center;
}
.right {
  text-align: right;
}
.bold {
  font-weight: bold;
}
.tiny {
  font-size: 0.625rem; /* 10px */
  font-style: italic;
}
.xspace {
  margin-bottom: 2em;
}
.xspace-top {
  margin-top: 1.5em;
}
.nospace-top {
  margin-top: 0;
}
.nospace-bottom {
  margin-bottom: 0;
}
.no-decoration {
  text-decoration: none;
}
.indent-1{
  margin-left: 1.5rem;
}
.indent-2 {
  margin-left: 2.0rem;
}
.indent-3 {
  margin-left: 2.5rem;
}


/* HYPERLINKS for site and barges */

a {
  font-style: normal;
  font-weight: bold;
  text-decoration: underline;
}
a:link {
  color: #505050; /* 505050 = gray */
}
a:visited {
  color: #505050;
}
a:active {
  color: #505050;
}
a:hover {
  color: white;
  background-color: blue;
}


/* Class for SITE YACHT MENU to be used with div */

.nav-reefco ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: white;
  overflow: hidden;
}
.nav-reefco ul li {
  float: left;
}
.nav-reefco ul li a {
    display: block;
    color: #666666;
    text-align: center;
    padding: 0.5rem 0.5rem; /* 8px 8px */
    text-decoration: none;
}
.nav-reefco ul li a:hover {
  color: white;
  background-color: blue;
}
.nav-reefco ul ul {
  position: absolute;
  left: -999em;
}
.nav-reefco ul li:hover ul {
  left: auto;
  background: rgba(255, 250, 250, 0.8);
  border-bottom: 2px solid blue;
}
.nav-reefco ul li ul li {
  float: none;
}
.nav-reefco ul li ul li a:hover {
  color: blue;
  background-color: white;
}

/* START New class for barge list on barges page menu-bargelist to be used with div class */

.menu-bargelist ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background-color: darkred;
  overflow: hidden;
}
.menu-bargelist ul li {
  float: left;
}
.menu-bargelist ul li a {
    display: block;
    color: gold;
    font-weight: 400;
    text-align: center;
    padding: 0.5rem 0.5rem; /* 8px 8px */
    text-decoration: none;
}
.menu-bargelist ul li a:hover {
  color: gold;
  background-color: black;
}


/* START Clearfix */

.clear {
  clear: both;
  }
.clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  display: inline-block;
}
/* END Clearfix */

/* Header banner - SITE & BARGE pages */

.banner-yachts {
  color: blue;
  font-weight: bold;
  font-size: 1.5rem; /* 24px */
  background-color: yellow;
  margin: 0;
  padding: 0;
}

/* HR */

hr.reefco-hr {
   height: 0.25em; /* 4px */
   margin-left: auto;
   margin-right: auto;
   background-color: blue;
   color: blue;
   border: 0 none;
   margin-top: 0.25rem; /* 4px */
   margin-bottom: 0.25rem; /* 4px */
}

/* RATES TABLE */

.rates-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal .8rem Arial, sans-serif;
    font-weight: 500;
}
.rates-table-boat a {
    color: white;
    text-decoration: none;
}
.rates-table-boat {
  background-color: cadetblue;
  border: solid 1px cadetblue;
  color: white;
  font: normal 1rem Arial, sans-serif;
  padding: 4px;
  text-align: left;
}
.rates-table thead th {
    background-color: cadetblue;
    border: solid 1px cadetblue;
    color: white;
    font: normal 1rem Arial, sans-serif;
    padding: 4px;
    text-align: left;
}
.rates-table tbody td {
    border: solid 1px cadetblue;
    color: black;
    padding: 4px;
}
.rates-table-highlight tbody tr:hover {
    background-color: #CCE7E7;
}
.rates-table-horizontal tbody td {
    border-left: none;
    border-right: none;
}

/* WHY DO I NEED THIS? AS "a"? OH WELL, IT WORKS
Using ugly code from Blogger because it give a blue background, white text, and all is clickable not just text */
a.yacht-button {
  color: white;
  background-color: blue;
  font-weight: normal;
}
.yacht-button {
  border: medium solid blue;
  border-radius: 8px;
  color: white;
  padding: .25rem .35rem;
  width: 30%;
  text-align: center;
  text-decoration: none;
  font-size: 1rem;
  margin: 0 auto;
  cursor: pointer;
}

/* Responsive YOUTUBE video */

.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}


/* font size for BARGES cabin rate table */
.font-cabin-rates {
  font-size: 0.75rem; /* 12px - 75% of 16px */
}

@media screen and (max-width: 560px){
  .font-cabin-rates {
    font-size: 0.625rem; /* 10px */
  }
}


/* css for BARGES 2-columns */

.two-col-row {
  display: flex;
}

/* Create two equal columns that sits next to each other */
.two-col-column {
  flex: 50%;
  padding: 10px;
}
/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 675px) {
  .two-col-row {
    display:block;
  }
  .two-col-column {
    width: 100%;
  }
}
/* END css for 2 columns */

/* Flexbox stuff for barges.html */
/* 2019-2-22- new barge list FLEX */
.flex-section-container-bargelist {
  display: flex;
  background-color: white;
  padding: 0;
  margin: 0;
}
.flex-article-barge {
  flex: 1;
  text-align:center;
  background-color: white;
  padding: .10rem;
  margin: 0;
  border-bottom: 3px solid darkred;
}
@media screen and (max-width: 660px) {
  .flex-section-container-bargelist {
    flex-flow: column wrap;
  }
}
/* css for BARGE HEADER 2-columns */

.test-two-col-row {
  display: flex;
  justify-content: center;
  text-align: center;
}

/* Create two equal columns that sits next to each other */
.test-two-col-column-1 {
  background: red;
  margin: 5px;
  flex: 1;
}
.test-two-col-column-2 {
  flex-basis: 300px;
  margin-left: 15px;
}
/* Floating Scroll To Top arrow for long pages */
.stt {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: rgb(128, 128, 255) url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath fill='currentColor' d='M352 352c-8.188 0-16.38-3.125-22.62-9.375L192 205.3l-137.4 137.4c-12.5 12.5-32.75 12.5-45.25 0s-12.5-32.75 0-45.25l160-160c12.5-12.5 32.75-12.5 45.25 0l160 160c12.5 12.5 12.5 32.75 0 45.25C368.4 348.9 360.2 352 352 352z'%3E%3C/path%3E%3C/svg%3E") center no-repeat;
  box-shadow: 0 0.25rem 0.5rem 0 gray;
  opacity: 0.7;
}.stt:hover {
  opacity: 0.8;
}.stt:focus {
  opacity: 0.9;
}.stt:active {
  opacity: 1;
}