/*
 Description:    Bawd Hall
 Author:         Mark Evens
 */
/* Base styles - Styled tags*/

html {font-size: 62.5%;} /* so that 1 rem = 10 px */

body {
  font-size: 1.3rem; /* =13px */
  line-height: 1.8rem;
}

body {
  background: url(images/pagebg-top.png) repeat-x,
  url(images/pagebg-bottom.png);
  min-height: 800px;
}

h1 {
  font-size: 3rem; /* = 30px */
  margin-bottom: .5rem;
  margin-top: .5rem;
}

h2 {
  font-size: 2.5rem; /* = 25px */
  margin-bottom: .75rem;
  margin-top: .75rem;
}

h3 {
  font-size: 2rem; /* = 20px */
  margin-bottom: .857rem;
  margin-top: .857rem;
}

h4 {
  font-size: 1.8rem; /* = 18px */
  margin-bottom: 1rem;
  margin-top: 1rem;
}

h5 {
  font-size: 1.6rem; /* = 16px */
  margin-bottom: 1.125rem;
  margin-top: 1.125rem;
}

h6 {
  font-size: 1.5rem; /* = 15px */
  margin-bottom: 1.1rem;
  margin-top: 1.1rem;
}

p {margin-top: 1.5rem;}

img {
  float: left;
  padding: 1rem;
}

fieldset {margin-bottom: 10px}

legend, dl, dt {
  margin: 0px;
  padding: 0px;
  font-size: 1.4rem !important;
}


footer {
  background: #e5b325;
  margin: 0 auto;
  padding: 5px 20px;
}

footer p {
  text-align: center;
  font-size: 12px;
  margin: 0;
  padding: 5px;
}

footer .footer-links li {
  display: inline-block;
  padding: 0 3.078px;
  font-size: 14px;
  border-right: 1px solid #FFFFFF;
}

/* Don't show links for images, or javascript/internal links */
pre, blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
}

thead {display: table-header-group;}

/* h5bp.com/t */
tr, img {
  page-break-inside: avoid;
}

img {max-width: 100% !important;}

@page {margin: .5cm;}

p, h2, h3 {
  orphans: 3;
  widows: 3;
}

h2, h3 {page-break-after: avoid;}

/* Layouts - Styles for containers etc.*/

header {
  background: #F2E688; /* gold  - Doesn't normally display except on Safari "bounce" on ipad */
  height: auto;
  margin-top: 5px;
  position: relative;
  padding-top: 45px;
}

header a {
  color: #F2E688 !important;
  z-index: 5000 !important;
}

#logo img {
  float: none;
  width: 100%;
}
.contact-lg {
  font-size: 1.6rem; /* = 16px */
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.contact-sm {
  font-size: 1.4rem; /* = 14px */
  margin-bottom: 1.1rem;
  margin-top: 1.1rem;
}

#icons a {
  margin-top: 8px;
}

#wrap {
  padding-top: 0px;
  position: absolute;
  top: 0;
  width: 100%;
}

#wrapper {
  background: url(images/mainbg.png) repeat-x #fff;
  padding-left: 10px;
  padding-right: 10px;
}

/* Reduce padding on small devices */
@media screen and (max-width: 650px) {
  #wrapper {padding: 1px 5px 5px 5px; }
  #container {padding: 10px 10px 0px 10px;}
  #footer {padding: 0px 10px 0px 10px;}
}

/* Hide floor plans on small screens */
@media screen and (max-width: 767px) {
  .plans {display: none;}
}

@media screen and (min-width: 768px) {
  .noplans {display: none;}
}

/*reduce text in jumbotron header on extremely small screens */

@media screen and (max-width: 285px) {
  .jumbotron .extra-text2 {
    display: none;
  }
}

/* Widgets - Menus, forms etc */

/* set break point for navbar to collapse */
@media (max-width: 992px) {
  /*Break point is the same as lowest width for medium devices - used to switch from 2 to 1 col */
  .navbar-header {float: none;}
  .navbar-left, .navbar-right {float: none !important;}
  .navbar-toggle {display: block;}
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
  }
  .navbar-collapse.collapse {
    display: none !important;
  }
  .navbar-nav {
    float: none !important;
    margin-top: 7.5px;
  }
  .navbar-nav > li {float: none;}
  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .collapse.in {display: block !important;}
}

body {
  overflow-x: hidden;
  overflow-y: scroll !important;
}

/* Main menu item highlighting */
#about .menu-about, #about_activities .menu-activities, #about_walking .menu-walking, #about_families .menu-families,
#about_cycling .menu-cycling, #about_gatherings .menu-gatherings, #about_countryhouse .menu-countryhouse,
#house .menu-house, #house_location .menu-location, #house_plans .menu-plans, #house_bedrooms .menu-bedrooms,
#house_kitchen-dining .menu-kitchen-dining, #house_lounges .menu-lounges, #house_bathrooms .menu-bathrooms, #house_utility .menu-utility,
#house_garden .menu-garden, #house_access .menu-access,
#stay .menu-stay, #stay_walking .menu-stay_walking, #stay_cycling .menu-stay_cycling, #stay_boating .menu-stay_boating,
#stay_other .menu-stay_other, #stay_places .menu-stay_places, #stay_shopping .menu-stay_shopping,
#stay_eating .menu-stay_eating, #stay_wildlife .menu-stay_wildlife, #stay_weather .menu-stay_weather,
#prices .menu-prices,
#booking .menu-booking,
#manage .menu-manage {
  text-decoration: underline;
  font-weight: bold;
  cursor: default;
}

/* To hide the "manage" menu until it is completed (see also commenting out in html*/
.menu-manage a {display: none !important;}

/* dropdown menu highlighting */
#about .home, #about_activities .home, #about_walking .home, #about_families .home,
#about_cycling .home #about_gatherings .home, #about_countryhouse .home,
#house .house, #house_location .house, #house_plans .house, #house_bedrooms .house,
#house_kitchen-dining .house, #house_lounges .house, #house_bathrooms .house, #house_utility .house,
#house_garden .house, #house_access .house,
#stay .stay, #stay_walking .stay, #stay_cycling .stay, #stay_boating .stay,
#stay_other .stay, #stay_places .stay, #stay_shopping .stay,
#stay_eating .stay, #stay_wildlife .stay, #stay_weather .stay {
  text-decoration: underline;
  font-weight: bold;
}

/* Bottom menu item highlighting */
#xfoot_cookies .menu-cookies, #xfoot_terms .terms, #xfoot_privacy .menu-privacy, #xfoot_disclaimer .menu-disclaimer,
#xfoot_copyright .menu-copyright, #xfoot_accessibility .menu-accessibility {
  text-decoration: underline;
  font-weight: bold;
  cursor: default;
}

#topnavbar, #bottomnavbar {
  font-size: 1.4rem;
  font-weight: bold;
  margin-bottom: 0px !important; /*to make sure following container adjoins*/
  border-width: 0px;
}

.navbar-nav > li > a {color: #337ab7 !important;}

.navbar-brand img {
  padding: 0;
  margin-left: 10px;
}

.jumbotron {
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  padding: 0rem 0rem !important;
  margin-bottom: 0rem !important;
  background-color: #eceeef;
  border-radius: .3rem;
  color: #F2E688;
}

.banner-caption {
  position: absolute;
  top: 50px;
  right: 15px;
  color: #F2E688;
}

.modal-backdrop {z-index: 1025;}

#tel-modal .modal-content, #email-modal .modal-content {
  background-color: #337ab7;
  padding: 5px;
}

#tel-modal .modal-content .close, #email-modal .modal-content .close {
  color: #F2E688;
}

#tel-modal {
  top: 5%;
  right: 50%;
  outline: none;
}

#email-modal {
  top: 5%;
  left: 50%;
  outline: none;
}

#bkg-modal .modal-header, .modal-footer button {
  background-color: #337ab7;
  color: white;
}

.gold {background-color: #F2E688;}

.boldred {
  color: #ff0000;
  font-weight: bold;
}

.navbar-default {background-color: rgba(0, 0, 0, 0);}

.navbar-brand {
  padding: 0px 0px 0px 10px;
  height: auto !important;
  font-size: small;
}

/* To fix jQuery dialog box to match font of Bootstrap */
.ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Carousels */
.carousel {
  max-height: 700px;
  overflow: hidden;
}

/* Carousel heights */

/* Large devices (large desktops, 1200px and up) */
@media screen and (min-width: 1200px) {
  .slider-size {height: 400px !important;}
}

/* Medium devices (desktops, 992px and up) */
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .slider-size {height: 300px !important;}
}

/* Small devices (tablets, 768px and up) */
@media screen and (min-width: 768px) and (max-width: 991px) {
  .slider-size {height: 400px !important; }  /*goes back up to 400px because it is in one column*/
}

/* Extra small devices (phones, less than 768px) */
@media screen and (min-width: 400px) and (max-width: 767px) {
  .slider-size {height: 300px;}
}

/* REALLY small devices (phones, less than 400px) */
.slider-size {height: 200px;}

.carousel {
  width: 100%;
  margin: 0 auto; /* center your carousel if other than 100% */
}

.carousel-caption {
  bottom: auto !important;
  top: 13px;
  padding: 0px !important;
}

.darktext {color: #993a33;}

.well {
  background-color: #6167a6;
  opacity: 0.6;
}

/* Comment ticker */
.ticker {
  font-size: 1.4rem;
  padding: 20px;
}

.ticker div {
  /* automatic div created by jquery to replace ul */
  background-color: #F2E688; /* gold */
  min-height: 4rem;
}

.noshow {display: none;}

/* put boxes round tabbed areas */
.tab-content {
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  padding: 10px;
}

.nav-tabs {margin-bottom: 0;}

/* Modifiers - Sundry modifiers - classes & ids*/

/* General modifiers */
.margined {
  margin-right: 10px;
  margin-left: 10px;
}

/* Context-specific modifiers */
#logo img {padding: 0rem;}

/* remove padding on small devices */

@media screen and (max-width: 400px) {
  #bh-contact .bh-tel {padding-left: 0px;}
  #bh-contact .bh-mail {padding-right: 0px;}
}

legend {
  border-bottom: 1px solid #f7f7f7 !important;
  border-top: 1px solid #b9b9b9 !important;
}


/* For javascript error messages inside booking form dioalog */
.error-msg li {
  color: #ff0000;
  font-weight: bold;
}

/*Styles for floor plans (NB se also layout section)*/
.plans img {
  position: relative;
  z-index: 100; /*To ensure they overlay the bottom nav bar */
}

/* Styles for the availability and booking page */
#availability {
  max-width: 40rem;
  margin: 0 auto;
}

#availability {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background-color: #f8f8f0;
}

#availability h1 {
  font-weight: bold;
  color: #0377b3;
  text-align: center;
}

#availability h3 {
  font-weight: bold;
  color: #0377b3;
  text-align: center;
  font-size: 18px;
}

#availability table.avail {
  background-color: #e5b325;
  text-align: center;
  font-size: 12px; /* IE6 needs font-family */
  border-collapse: collapse;
  border-color: #000000;
}

#availability .hdr {background-color: #C0C0C0;}

/* Table header */

#availability .A {background-color: #88f099;}

/* Week Available */
#availability .B {background-color: #e03030;}

/* Week Booked    */
#availability .P {background-color: #FF8080;}

#availability .table-hover > tbody > tr:hover .A {opacity: 0.6;}

#availability .table-hover > tbody > tr:hover .B {opacity: 0.6;}

#availability .table-hover > tbody > tr:hover .P {opacity: 0.6;}

/* Week Part let  */
#availability p.center {text-align: center;}

#availability p.update {
  text-align: center;
  font-size: 11px;
  color: #3333aa;
  margin: 2px;
}

#availability p.credit {
  text-align: center;
  font-size: 11px;
  color: #808080;
  margin: 0px;
}

#availability p.version {
  text-align: right;
  font-size: 11px;
  color: #606060;
  margin: 0px;
}

#availability .small {
  font-size: 12px;
  font-style: italic;
  margin: 0px;
}

#availability td {padding: 0px;}

#availability .year {
  background-color: #FFFFD6;
  font-weight: bold;
}

#availability .startdate {display: none;}

/* Styles for the booking form dialog */
#booking-dialog-form {overflow: visible;}

.hunny-pot {
  visibility: hidden;
  height: 5px;
  overflow: hidden;
}

/*To fix problem with background scrolling on touch devices*/
.modal {
  -webkit-overflow-scrolling: auto
}

/*Style to remove margins where not required */
.nomargin {margin: 0px;}

.date-picker-wrapper {z-index: 4000 !important;}  /* to get calendar to appear over dialog */


@media screen /*and (min-width: 768px)*/ {
  #calendar-container {position: relative;}
}
/*
@media screen and (max-width: 768px) {
  #calendar-container {
    position: absolute;
    top: -80px;
    left: -5px;
  }
}
*/
#bookingform input, #bookingform select option {font-size: 1.6rem;}

#calendar-container .changeover {color: #b9b9b9;}

.week-name > th:nth-child(2), .week-name > th:nth-child(6) {color: orange;}

#calendar-container tbody td > div.invalid {color: #dadada;}

#calendar-container tbody td:nth-child(2) > div.valid.changeover, #calendar-container tbody td:nth-child(6) > div.valid.changeover {
  color: #ffe3ad;
}


#calendar-container tbody td:nth-child(2) > div.invalid, #calendar-container tbody td:nth-child(6) > div.invalid {
  color: #dadada;
}


#calendar-container tbody td:nth-child(2) > div, #calendar-container tbody td:nth-child(6) > div {
  color: orange;
}

/*Make prev and next arrows on calendar larger. Make header clearer*/
.next, .prev {
  font-size: 2rem; /* = 20px */
  font-weight: bold;
}

.default-top {
  color: black;
  font-weight:bold;
}