
<style type="text/css">
/* ===== General page layout ===== */
body {
  font-family: Verdana, Arial, sans-serif;
  font-size: 100%;
  font-weight: normal;
  line-height: 1.6;
  margin: 0 0 40px 0;
  padding: 40px;
  background-color: #00ffff;
  box-sizing: border-box;
}

h1 { margin: 1.1em 20px .5em; color: #069; line-height: 1.3; }
h2 { margin: 1.2em 20px .5em; color: #069; line-height: 1.3; }
h3 { margin: 1.3em 20px .5em; color: #069; line-height: 1.3; }
h4 { margin: 1.4em 10px .5em; color: #069; line-height: 1.3; }
h5 { margin: 1.0em 20px .5em; color: #069; line-height: 1.3; }

p {
  margin: 0 25px 25px 25px;
  font-size: 120%;
}

img {
  float: right;
  margin: 0 4px 4px 4px;
  max-width: 100%;
  height: auto;
}

a { font-weight: bold; color: #8A2BE2; }
a:visited { color: #0000FF; }
a:hover { color: #FF7F50; }
a:active { color: #006400; }

a.special {
  font-weight: bold;
  color: #8B0000;
  font-size: 3em;
}
a.special:visited { color: #DC143C; }
a.special:hover { color: #FF7F50; }
a.special:active { color: #006400; }

p.largetext {
  font-size: 4em;
  font-weight: bold;
  margin-top: 1em;
}

.clearthefloats { clear: both; }
.positionabsolute1 { position: absolute; top: 1340px; left: 500px; }
.positionstatic { position: static; }

.day {
  font-size: 1.4em;
  font-style: italic;
  font-weight: bold;
  color: #FF0611;
}

/* ===== Cruise schedule: desktop/tablet ===== */
.cruise-schedule {
  width: auto;
  max-width: 100%;
  margin: 12px 0 12px 20px;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 1.35;
}

.cruise-schedule th,
.cruise-schedule td {
  padding: 5px 9px;
  border-bottom: 1px solid #777;
  text-align: left;
  vertical-align: top;
}

.cruise-schedule th { font-weight: bold; }
.cruise-schedule td:first-child { white-space: nowrap; }

/* ===== Phone layout ===== */
@media (max-width: 600px) {

  body {
    padding: 12px;
    margin-bottom: 20px;
  }

  h1, h2, h3, h4, h5 {
    margin: 1em 4px .5em;
  }

  h1 { font-size: 1.65em; }
  h2 { font-size: 1.4em; }
  h3 { font-size: 1.2em; }
  h4 { font-size: 1.1em; }

  p {
    margin: 0 4px 18px;
    font-size: 100%;
    line-height: 1.55;
  }

  /* Images stack rather than squeezing text on a phone */
  img {
    float: none !important;
    display: block;
    max-width: 100%;
    height: auto !important;
    margin: 12px auto;
  }

  p.largetext {
    font-size: 2em;
  }

  a.special {
    font-size: 1.6em;
  }

  .positionabsolute1 {
    position: static;
  }

  /* Each cruise day becomes an individual card */
  .cruise-schedule {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 12px 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
    box-sizing: border-box;
  }

  .cruise-schedule thead {
    display: none;
  }

  .cruise-schedule tbody {
    display: block;
    width: 100%;
  }

  .cruise-schedule tr {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
    padding: 8px;
    border: 1px solid #777;
    border-radius: 6px;
  }

  .cruise-schedule td {
    display: block !important;
    width: 100%;
    box-sizing: border-box;
    padding: 6px 2px;
    border: none;
    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    min-width: 0;
  }

  /* Labels appear ABOVE their information */
  .cruise-schedule td::before {
    content: attr(data-label);
    display: block !important;
    width: 100%;
    margin-bottom: 3px;
    font-weight: bold;
  }
  .photo-section-divider {
  border: 0;
  border-top: 1px solid #999;
  width: 65%;
  margin: 30px auto;
  }
}
</style>
