/* ========================================================================= */
/* Global stuff, applies to all pages */

/* This is for old-browser html5 compatibility */
header, section, footer, aside, nav, main, article, figure {
   display: block;
}

/* Needed for IE */
a, img {
   border: none;
   outline: none
}

* {
   margin: 0;
   padding: 0;
}

a:link {
   color: #694f03;
   text-decoration: none;
   border-bottom: 1px dotted;
}

a:visited {
   color: #694f03;
   text-decoration: none;
}

a:hover {
   background-color: #FFFF00;
}

a:active {
   background-color: #FFFF00;
}

img {
   object-fit: contain;
   max-width: 100%;
   display: block;

   user-drag: none;
   -webkit-user-drag: none;
   
   -moz-border-radius: 14px;
   -webkit-border-radius: 14px;
   border-radius: 14px;
}

h1 {
   font-family: 'Macondo', sans-serif;
   font-size: 4.0em;
   font-weight: bold;
   margin-top: 40px;
   margin-bottom: 10px;
   text-shadow: 3px 3px 4px #999999;
}

h2 {
   font-family: 'Macondo', sans-serif;
   font-size: 2.0em;
   font-weight: bold;
   margin-bottom: 37px;
}

h3 {
   font-family: 'Dosis', sans-serif;
   font-size: 1.6em;
   font-weight: bold;
   margin-top: 15px;
   margin-bottom: 17px;
}

h4 {
   font-family: 'Dosis', sans-serif;
   font-size: 1.4em;
   font-weight: bold;
   margin-top: 15px;
   margin-bottom: 15px;
}

p {
/*   line-height: 1;*/
   margin-top: 0;
   margin-bottom: 15px;
}

body {
   direction: ltr;
   word-wrap: break-word;
   overflow-wrap: break-word;
/*   -webkit-hyphens: auto;
   -moz-hyphens: auto;
   hyphens: auto;*/
   
   font-family: 'Dosis', sans-serif;
   font-size: 1.4em;
   color: #694f03;

   background: #ffffff;
   background-image: url("/img/backg/01.jpg");
   height: auto;
   width: auto;
   min-height: 100%; 
   min-width: 100%;
   background-position: center;
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-size: cover;

   opacity: 1.0;
   -webkit-transition: background 10s ease;
   -moz-transition: background 10s ease;
   -o-transition: background 10s ease;
   -ms-transition: background 10s ease;
   transition: background 10s ease;
}

ul.bodylist {
   list-style-type: outside;
   display: table;
   border-spacing: 0 10px;
   margin-bottom: 0;
}

ul.bodylist > li {
   display: table-row;
}

ul.bodylist > li::before {
   content: "\2022";
   display: table-cell;
   text-align: left;
   width: 20px;
}

table {
   font-size: 80%;
}

/* ========================================================================= */
/* Wraps everything */
#wrapper {
   text-align: left;
   width: 100%;
   max-width: 1000px;
   min-width: 300px;
   margin-left: auto;
   margin-right: auto;
   margin-top: 50px;
}

/* ========================================================================= */
/* Single column only for this site */
.mainBox {
   background: #FFFFFF;
   padding-left: 4%;
   padding-right: 4%;
   padding-top: 10px;
   padding-bottom: 10px;
   
   border-radius: 25px;
   -moz-border-radius: 25px;
   -webkit-border-radius: 25px;
   
   box-shadow: 10px 10px 20px #222222;
}

table.gallery {
   width: 90%;
   margin-left: 10%;
   margin-right: 5%;
   margin-top: 30px;
}

a.highslide:link, a.highslide:visited, a.highslide:hover, a.highslide:active  {
   background-color: initial;
   border-bottom: none;
}

/*.quote-bubble {
   background: #FFFFDD;
   padding: 10px 10px 5px 10px;
   margin: 0 10px 20px 10px;

   border: 5px solid #FFFFDD;
   border-radius: 25px;
   box-shadow: 10px 10px 20px #222222;
}*/

/* ========================================================================= */
/* Figures */
figure {
   display: inline-table;
   margin: 0;
   padding: 0;
}

.left {
   float: left;
   width: 30%;
   margin: 5px 25px 0 0;
}

.right {
   float: right;
   width: 30%;
   margin: 5px 0 0 15px;
}

figure img {
   max-width: 100%;
   padding: 0;
}

figure figcaption {
   display: table-caption;
   caption-side: bottom;
   margin: 5px 0 5px 0;
   padding: 0;
   text-align: center;
   font-size: 0.9em;
   font-weight: bold;
/*   line-height: 1.0;*/
}

/* ========================================================================= */
/* Upper navigation bar, shown at top of all pages */
#nav1 {
   display: block;
   width: 100%;
   margin: 0;
   padding: 0 0 5px 0;
   font-size: 1.0em;
   font-weight: bold;
}

#nav1 ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

#nav1 ul li {
   margin: 0;
   padding: 0 20px 0 0;
   list-style: none;
   float: left;
}

#nav1 li a {
   border-bottom: none;
}

#nav1 li.home a,
#nav1 li.about a,
#nav1 li.attractions a,
#nav1 li.map a,
#nav1 li.reviews a,
#nav1 li.booking a,
#nav1 li.contact a
{
   background-color: #fefe0a;
}

@media only screen and (max-width: 750px) {
   #button_row_nav1 {
   display: none;
   }
}

/* ========================================================================= */
/* Lower navigation bar, below the top one */
#nav2 {
   display: block;
   float: left;
   width: 100%;
   min-height: 25px;
   margin: 0;
   padding: 10px 0 0 0;
   font-size: 1.0em;
   font-weight: bold;
}

#nav2 ul {
   margin: 0;
   padding: 0;
   list-style-type: none;
}

#nav2 ul li {
   margin: 0;
   padding: 0 20px 0 0;
   list-style: none;
   float: left;
}

#nav2 li a {
   border-bottom: none;
}

#nav2 li.your_break a,
#nav2 li.garage_to_cottage a,
#nav2 li.inside_and_outside a,
#nav2 li.in_winter a,
#nav2 li.amenities a,
#nav2 li.walking a,
#nav2 li.birding a,
#nav2 li.canoeing a,
#nav2 li.riding a,
#nav2 li.climbing a,
#nav2 li.history a,
#nav2 li.eating_out a,
#nav2 li.shopping a,
#nav2 li.other_attractions a,
#nav2 li.booking_availability a,
#nav2 li.booking_before a,
#nav2 li.booking_making a,
#nav2 li.guestbook a,
#nav2 li.airbnb a,
#nav2 li.booking_com a,
#nav2 li.tripadvisor a,
#nav2 li.vrbo a
{
   background-color: #fefe0a;
}

#button_row_nav1 {
   margin: 0;
   padding: 0;
   float: right;
}

#button_row_nav1 img {
   width: 30px;
   vertical-align: middle;
   padding: 0 5px 0 0;
   border: 0;
   display: inline;
}

#button_row_nav1 a {
   border-bottom: none;
}

/* ========================================================================= */
/* The footer on every page */
#pgend {
   width: 100%;
   height: 130px;
   font-size: 0.9em;
   line-height: 2;
}

#pgend img {
   display: inline;
   vertical-align: middle;
   
   -moz-border-radius: initial; 
   -webkit-border-radius: initial; 
   border-radius: initial;
}

#pgend a {
   border-bottom: none;
}

#pgend .page_date {
   float: right; 
   margin: 10px 0 20px 0;
   padding: 0;
   font-size: 0.7em;
}

#pgend .social_icon {
   width: 30px;
   height: 30px;
   margin: 0 5px 0 0;
   padding: 0;
}

/* ========================================================================= */
/* Front page */
#welsh_flag {
   display: inline-block;
   width: 60px; 
   vertical-align: baseline; 
   border-style: solid; 
   border-width: 1px; 
   border-color: black;
}

/* ========================================================================= */
/* The gallery of images */
#gallery-area {
   width: 420px;
   height: 420px;
   float: right;
   margin: 10px 0 10px 5px;
   padding: 0;
   border: none;
}

.gallery-image {
   max-width: 100%;
   height: auto;
}

/* ========================================================================= */
/* Responsive iframe stuff for videos */

.video16to9 {
   position: relative;
   overflow: hidden;
   width: 100%;
   padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
   border: 1px solid;
   
   -moz-border-radius: 14px;
   -webkit-border-radius: 14px;
   border-radius: 14px;
}

.videoframe {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
   border: 0;
}

/* ========================================================================= */
/* Videos */
.myvideo {
   max-width: 100%;
   height: auto;
   margin: 10px 0 10px 0;
   border: 1px solid black;
}

/* ========================================================================= */
/* The calendar on the bookings page */
#calendar {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
}

/* The containing div of the calendar on the bookings page */
#calendar_parent {
   height: 1300px;
   margin: 0;
   padding: 0;
}

/* ========================================================================= */
/* The map on the contact page */
#map {
   height: 600px;
   width: 100%;
   margin: 0;
   padding: 0;
}

/* ========================================================================= */
/* Amenities table on the About page */
table.amenitiesTable {
   border: 1px solid #1C6EA4;
   background-color: #E2EFF6;
   width: 100%;
   text-align: left;
   border-collapse: collapse;
}

table.amenitiesTable td, table.amenitiesTable th {
   border: 1px solid #AAAAAA;
   padding: 5px;
}

table.amenitiesTable tr:nth-child(even) {
   background: #D0E4F5;
}

table.amenitiesTable td {
   font-size: 1.2em;
}

/* ========================================================================= */
/* Attractions on the Nearby page */
table.attractionsTable {
   border: 1px solid #1C6EA4;
   background-color: #E2EFF6;
   width: 100%;
   text-align: left;
   border-collapse: collapse;
}

table.attractionsTable td, table.attractionsTable th {
   border: 1px solid #AAAAAA;
   padding: 5px;
}

table.attractionsTable tr:nth-child(even) {
   background: #D0E4F5;
}

/*table.attractionsTable td {
   font-size: 1.2em;
}*/

/* ========================================================================= */
/* Review types on the Reviews page */
table.reviewTable {
   border: 1px solid #1C6EA4;
   background-color: #E2EFF6;
   width: 100%;
   text-align: left;
   border-collapse: collapse;
}

table.reviewTable td, table.reviewTable th {
   border: 1px solid #AAAAAA;
   padding: 5px;
}

table.reviewTable tr:nth-child(even) {
   background: #D0E4F5;
}

table.reviewTable td {
   font-size: 1.2em;
}

/* ========================================================================= */
/* Stages of making a booking on the Booking page */
table.bookingTable {
   border: 1px solid #1C6EA4;
   background-color: #E2EFF6;
   width: 100%;
   text-align: left;
   border-collapse: collapse;
}

table.bookingTable td, table.bookingTable th {
   border: 1px solid #AAAAAA;
   padding: 5px;
}

table.bookingTable tr:nth-child(even) {
   background: #D0E4F5;
}

/*table.bookingTable td {
   font-size: 1.2em;
}*/

/* ========================================================================= */
/* Agencies table on the Booking page */
table.agenciesTable {
   border: 1px solid #C6C9CB;
   background-color: white;
   width: 100%;
   text-align: center;
   border-collapse: collapse;
}

table.agenciesTable td, table.agenciesTable th {
   border: 1px solid #C6C9CB;
   padding: 5px;
}

/*table.agenciesTable td {
   font-size: 1.2em;
}*/

/* ========================================================================= */