/* BODY CSS */

@media screen and (min-width: 800px) {
  a.menu_extended {
    display: inline;
  }
     .hdp-container {
      all: initial;                 /* wipe out inherited styles */
      font-family: var(--hdp-font, sans-serif);
      box-sizing: border-box;
      display: inline-block;        /* let it size to its contents */
    }
  a.current_extended {
    display: inline;
  }

  .google-map {
    width: 650px;
  }

  #footer {
    padding: 10px;

    border-top: solid 1px #dedede;

    background-color: #231f20;

    color: #e5eaed;

    font-size: 18px;

    font-weight: 300;

    line-height: 160%;

    text-align: center;
  }
  /* affects sizing of photo thumbnails */
  .invisibleTable {
    max-width: 200px;
    float: left;
  }
  /* affects sizing of photo thumbnails */
  .photo-gallery {
    width: 160px;
  }
}

@media screen and (max-width: 799px) {
  a.menu_extended {
    display: none;
  }

  a.current_extended {
    display: none;
  }

  .google-map {
    width: 270px;
  }
  #footer {
    padding: 10px;

    border-top: solid 1px #dedede;

    background-color: #231f20;

    color: #e5eaed;

    font-size: 12px;

    font-weight: 300;

    line-height: 160%;

    text-align: center;
  }
  /* affects sizing of photo thumbnails */
  .invisibleTable {
    max-width: 120px;
  }
  /* affects sizing of photo thumbnails */
  .photo-gallery {
    width: 90px;
  }
}

body {
  font-family: "Source Sans Pro", sans-serif;

  font-size: 14px;

  margin: 0px;

  background-color: #f7f6f3;
}

body,
p {
  color: #231f20;
}

p {
  margin-bottom: 2px;
}

h1 {
  /*width:90%;

max-width: 900px;*/

  /*margin-left:auto;

margin-right:auto;

margin-bottom:0px;*/

  margin: 0;

  font-weight: 900;

  color: #231f20;

  background-color: #ffffff;

  text-align: left;

  padding-bottom: 12px;

  /*padding: 12px;*/
}

/* doesn't do anything at this time. goal: to center the photos grid so there is no uneven right margin at various screen sizes */
.photoDiv {
  margin: 0 auto;
}

h1 a:link,
a:visited {
  color: #231f20;
}

h2 {
  color: #231f20;

  /*color: #f1592a;*/

  padding-right: 10px;

  margin-top: 24px;

  margin-bottom: 12px;

  font-weight: 900;
}

h3 {
  color: #231f20;

  font-weight: 700;

  padding-right: 10px;

  margin-top: 24px;

  margin-bottom: 12px;
}

a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
}

#contact-desktop {
  border-radius: 5px;

  width: 90%;

  max-width: 896px;

  /*background-color: #FFFFFF;*/

  background-color: #231f20;

  color: #f7f6f3;

  margin-left: auto;

  margin-right: auto;

  margin-top: 12px;

  margin-bottom: 12px;

  padding: 12px;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  position: relative;

  z-index: 90;
}

#contact-mobile {
  border-radius: 5px;

  width: 90%;

  max-width: 896px;

  /*background-color: #FFFFFF;*/

  background-color: #231f20;

  color: #f7f6f3;

  margin-left: auto;

  margin-right: auto;

  margin-top: 12px;

  margin-bottom: 12px;

  padding: 12px;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  position: relative;

  z-index: 90;
}

.list-group {
  width: 80%;
}

.list-group-item {
  position: relative;

  display: block;

  padding: 10px 15px;

  margin-bottom: -1px;

  background-color: #231f20;

  color: #808080;

  border: 1px solid #231f20;

  text-decoration: none;
}

a.list-group-item:link,
a.list-group-item:visited {
  text-decoration: none;

  background-color: #231f20;

  color: #dedede;
}

a.list-group-item:hover {
  text-decoration: none;

  background-color: #231f20;

  color: #ffffff;
}

ul.external {
  font-size: 80%;
  line-height: 1.6;
}

select.styled-select {
  font-size: 18px;
  line-height: 18px;
  margin-bottom: 4px;

  font-family: "Source Sans Pro", sans-serif;
}

/* HEADER CSS */

#header {
  width: 100%;

  text-align: center;

  background-color: #231f20;

  color: #f7f6f3;

  margin: 0;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);
}
#maintenance-header {
  width: 100%;

  text-align: center;

  background-color: #231f20;

  background-image: url("images/header-maintenance-napa.jpg");

  color: #f7f6f3;

  margin: 0;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  height: 300px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
#offers-header {
  width: 100%;

  text-align: center;

  background-color: #231f20;

  background-image: url("images/header-offers-crop.jpg");

  color: #f7f6f3;

  margin: 0;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  height: 300px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
#photos-header {
  width: 100%;

  text-align: center;

  background-color: #231f20;

  background-image: url("images/header-photos-crop1.jpg");

  color: #f7f6f3;

  margin: 0;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  height: 300px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
#home-header {
  width: 100%;

  text-align: center;

  background-color: #231f20;

  background-image: url("images/header-photos-crop2.jpg");

  color: #f7f6f3;

  margin: 0;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  height: 300px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
#reserve-header {
  width: 100%;

  text-align: center;

  background-color: #231f20;

  background-image: url("images/header-reserve-crop.jpg");

  color: #f7f6f3;

  margin: 0;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  height: 300px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
#rates-header {
  width: 100%;

  text-align: center;

  background-color: #231f20;

  background-image: url("images/header-rates-napa.jpg");

  color: #f7f6f3;

  margin: 0;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  height: 300px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}
#directions-header {
  width: 100%;

  text-align: center;

  background-color: #231f20;

  background-image: url("images/header-rates-napa.jpg");

  color: #f7f6f3;

  margin: 0;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  height: 300px; /* You must set a specified height */
  background-position: center; /* Center the image */
  background-repeat: no-repeat; /* Do not repeat the image */
  background-size: cover; /* Resize the background image to cover the entire container */
}

#logo {
  height: 130px;

  margin: auto;
}
#logo-large {
  height: 260px;

  margin: auto;
}
#logo-small {
  height: 65px;
  margin: auto;
}

#header-image {
  height: auto;

  margin: auto;

  width: 100%;

  max-width: 500px;
}
#smaller-image {
  height: auto;
  margin: auto;
  width: 120px;
}
.div-centered {
  width: 100%;
  text-align: center;
}

#map {
  height: 200px;

  margin: auto;
}

.aboutPic {
  float: right;

  width: 100px;
}
.anniversaryPic {
  float: left;
  height: 100px;
  padding-right: 12px;
}

nav {
  height: 25px;

  width: 100%;

  margin-left: -8px;
}

li.toplist {
  display: inline;

  margin-left: 18px;
}

a.menu,
a.menu_extended {
  color: #ffffff;
}

a.menu:hover,
a.menu_extended:hover {
  color: #f2b29e;
}

a.current,
a.current_extended {
  color: #f1592a;
}

a.current:hover,
a.current_extended:hover {
  color: #f2b29e;
}

/* Small Smartphones (portrait and landscape) ----------- */

@media only screen and (min-device-width: 320px) and (max-device-width: 400px) {
  #contactList {
    display: none;
  }

  #contactMobile {
    display: normal;
  }
}

#topnavList {
  /*height: 35px;*/

  display: inline;

  /* width: 100%; */

  margin: 0;

  font-size: 14px;

  padding: 0px 5px 0px 0px;

  list-style-type: none;

}

#topnavList a:link,
#topnavList a:visited {
  text-decoration: none;
}

#main {
  /*border-top-left-radius:5px;

border-top-right-radius:5px;*/

  border-radius: 5px;

  width: 90%;

  max-width: 896px;

  background-color: #ffffff;

  margin-left: auto;

  margin-right: auto;

  margin-top: 12px;

  margin-bottom: 12px;

  padding: 12px;

  -webkit-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  -moz-box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);

  box-shadow: 0px 3px 5px rgba(100, 100, 100, 0.69);
}

input {
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 4px;
  font-family: "Source Sans Pro", sans-serif;
}

input,
select,
textarea,
.radio {
  padding: 8px;
}

hr {
  color: #e6ebee;

  border: 0;

  height: 1px;

  background-color: #e6ebee;
}

/* FOOTER CSS */

/* #footer {

    padding: 10px;

    border-top: solid 1px #DEDEDE;

    background-color: #231f20;

    color: #E5EAEd;

    font-size: 12px;

    font-weight: 300;

    line-height: 160%;

} */

#pre-footer {
  /* mimics width of #main */

  padding: 12px;

  background-color: #f7f6f3;

  width: 90%;

  max-width: 896px;

  height: 80px;

  margin-left: auto;

  margin-right: auto;
}

#footer a:link,
#footer a:visited {
  color: #e5eaed;
}

.page-link {
  text-decoration: underline;
}

.contact-link {
  text-decoration: none;
}

/* RESERVATION PAGE CUSTOM CSS */

legend {
  color: #f13d06;

  font-size: 14px;

  padding-right: 10px;
}

/* Credit Card Fields */
.date-field {
  width: 300px;
}

.card-number,
.month select,
.year select,
.cvv {
  opacity: 0.9;
  /* color: #86939e; */
  font-weight: 100;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  line-height: 18px;
}
.month select,
.year select {
  width: 45%;
}
.month select {
  float: left;
}
.card-number {
  margin-bottom: 12px;
  margin-top: 6px;
  width: 65%;
}
.cvv {
  width: 25%;
}
.year select {
  float: inline-end;
  margin-left: 6px;
}
.invalid {
  font-size: 24px;
  margin-left: 6px;
  color: rgb(146, 1, 1);
  visibility: hidden;
  font-family: "Source Sans Pro", sans-serif;
}

.ratesize {
  color: #231f20;
  font-size: 24px;
  font-weight: 700;
  padding-right: 10px;
  margin-top: 24px;
  margin-bottom: 12px;
}
tiny {
  font-size: 12px;
}

tiny-alert {
  font-size: 12px;

  color: #f13d06;
}

p.vacancy-alert {
  font-size: 14px;

  font-style: italic;

  color: #f13d06;
}
p.covid-alert {
  font-size: 18px;

  font-style: italic;

  color: #046875;
}
p.rate {
  font-size: 16px;

  font-style: italic;

  font-weight: bold;
}

input.hidden {
  visibility: hidden;

  display: none;
}

mouse {
  font-size: 12px;

  font-style: italic;
}

p.mouse {
  font-size: 12px;

  font-style: italic;
}

p.input-notice {
  font-size: 12px;

  font-style: italic;

  margin-top: -4px;
}

x-large {
  font-size: 24px;
}

large {
  font-size: 16px;
}

signature {
  font-size: 24px;

  font-family: "Playfair Display", serif;

  font-weight: 900;

  font-style: italic;

  margin-top: 12px;
}

p.large {
  font-size: 16px;
}

p.input-header {
  font-size: 18px;

  font-weight: 600;
}

label.radio {
  font-size: 18px;

  vertical-align: top;
}

label.checkbox {
  vertical-align: top;
}

input.policycheckbox {
  vertical-align: middle;
}

.subpara {
  font-size: 14px;
  display: block;
}

textarea.comments {
  height: 60px;
  width: 90%;
  font-size: 14px;       
  line-height: 1.4;
}

input.policy-checkbox {
  margin-top: 8px;

  font-size: 16px;
}

fieldset {
  line-height: 19px;

  border: 1px solid #e5eaed;

  border-collapse: collapse;
}

/* RESERVATION SUCCESS CUSTOM CSS */

#signature {
  width: 150px;
}

/* MAIN PAGE CUSTOM CSS */

.sideNavLink {
  text-decoration: none;
}

#sideNav {
  color: #fbfcca;

  line-height: 110%;
}

/* TABLES CUSTOM CSS */

table,
th,
td {
  border: 1px solid #e5eaed;

  border-collapse: collapse;

  background-color: #fff;
}

th,
td {
  padding: 10px;
}

td {
  color: #666666;
}

table {
  width: 95%;

  /* max-width: 400px; */
  max-width: 400px;
  margin: 12px;

  /*padding:12px;*/

  -webkit-box-shadow: 0px 0px 3px 0px rgba(163, 163, 163, 0.69);

  -moz-box-shadow: 0px 0px 3px 0px rgba(163, 163, 163, 0.69);

  box-shadow: 0px 0px 3px 0px rgba(163, 163, 163, 0.69);
}
.Rates_Table {
  float: left;
}
#Deposit_Table {
  margin-left: auto;
  margin-right: auto;
}

#inputTable {
  margin-left: 0px;
}

.end-float {
  clear: both;
}

/* DIRECTIONS PAGE CUSTOM CSS */

#map-canvas {
  height: 200px;

  margin: 0px;

  padding: 0px;
}

#startingAddress {
  max-width: 400px;

  width: 100%;
}

#submitDirections {
  margin-top: 10px;
}

/* POLICIES PAGE CUSTOM CSS */

#policies-main {
  max-width: 600px;
}

/* REVIEWS PAGE CUSTOM CSS */

.quote-name {
  font-weight: 700;

  font-style: italic;

  color: #f1592a;

  text-align: right;
}

/*CUSTOM BUTTON DESIGN from http://codepen.io/simonbusborg/pen/cyxad */

.button {
  border: 0 none;

  border-radius: 2px 2px 2px 2px;

  color: #ffffff;

  cursor: pointer;

  display: inline-block;

  font-family: "Source Sans Pro", sans-serif;

  font-size: 12px;

  font-weight: bold;

  line-height: 20px;

  margin-bottom: 0;

  /*margin-top: 10px;*/

  padding: 7px 10px;

  text-transform: none;

  transition: all 0.3s ease 0s;

  -moz-transition: all 0.3s ease 0s;

  -webkit-transition: all 0.3s ease 0s;

  /*width: 16.795%;*/ /* auto */

  /*text-align: center;*/ /* DELETE WHEN WIDTH AUTO */

  text-decoration: none;

  float: left;
}
.paymentlinkButton {
  background-color: #434a52;
  border: none;
  color: #fff;
  padding: 15px 30px;
  text-decoration: none;
  margin: 4px 2px;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 18px;
  font-weight: bold;
  line-height: 20px;
  margin-bottom: 0;
  cursor: pointer;
  box-shadow: 0px 3px 5px 0px rgba(163, 163, 163, 0.69);
}
.rc-anchor .rc-anchor-normal .rc-anchor-light {
}

.g-recaptcha {
  display: inline-block;
}

a.dark:link,
a.dark:visited {
  background: none repeat scroll 0 0 #f1592a;

  color: #ffffff;
}

a.dark:hover,
a.dark:active {
  background: none repeat scroll 0 0 #444444;

  color: #ffffff;
}

/*CSS Corner Ribbon from http://jsfiddle.net/chriscoyier/H6rQ6/1/ */

/*.wrapper {

  margin: 50px auto;

  width: 280px;

  height: 370px;

  background: white;

  border-radius: 10px;

  -webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);

  -moz-box-shadow:    0px 0px 8px rgba(0,0,0,0.3);

  box-shadow:         0px 0px 8px rgba(0,0,0,0.3);

  position: relative;

  z-index: 90;

}*/

.ribbon-wrapper-green {
  width: 85px;

  height: 88px;

  overflow: hidden;

  position: absolute;

  top: -3px;

  right: -3px;
}

.ribbon-green {
  font: bold 15px Sans-Serif;

  color: #333;

  text-align: center;

  text-shadow: rgba(255, 255, 255, 0.5) 0px 1px 0px;

  -webkit-transform: rotate(45deg);

  -moz-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  -o-transform: rotate(45deg);

  position: relative;

  padding: 7px 0;

  left: -5px;

  top: 15px;

  width: 120px;

  /*BLUE*/

  background-color: #4285f4;

  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(#4285f4),
    to(#1e6be6)
  );

  background-image: -webkit-linear-gradient(top, #4285f4, #1e6be6);

  background-image: -moz-linear-gradient(top, #4285f4, #1e6be6);

  background-image: -ms-linear-gradient(top, #4285f4, #1e6be6);

  background-image: -o-linear-gradient(top, #4285f4, #1e6be6);

  color: #334274;

  -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);

  -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);

  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.3);
}

.ribbon-green:before,
.ribbon-green:after {
  content: "";

  border-top: 3px solid #0257df;

  border-left: 3px solid transparent;

  border-right: 3px solid transparent;

  position: absolute;

  bottom: -3px;
}

.ribbon-green:before {
  left: 0;
}

.ribbon-green:after {
  right: 0;
}