﻿* {  box-sizing: border-box;}

html, body { font-size: 100%; width: 100%;  height:100%; margin:0; padding:0; }
    
body { background-color:white; font-size: 1rem; font-weight:200; color:black; min-width:280px;}
p, address, ul { font-size: 1rem;	line-height: 1.5rem; padding-top: 1.5rem; }
h1 { font-size: 3.7rem; font-weight:200; padding:0; margin:0; margin-left:3rem; padding-top:0.8rem; color:black;}
h1 a {text-decoration:none;}

h2 {font-size:2.2rem; padding-top:.6rem; padding-bottom:2rem; text-align:left; color:rgb(0, 128, 0);}

a:link, a:visited {	color:black;}

body, address {	font-family: 'Old Standard TT','Oswald', helvetica, 'sans-serif'; }

p, li {font-family:'Open Sans', helvetica, 'sans-serif'; padding-left:0.2rem; padding-right:0.2rem; }
strong {color:rgb(0, 128, 0); font-size:1.4rem;}
em {font-style:normal;}

/*Responsive images*/
img { max-width: 100%; height: auto;}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
header { width:100%; height:8rem; margin:0; padding:0; background-color: rgba(204, 230, 204,0.8);  position:fixed; left:0; top:0; z-index:1;}
header p {	color:black; padding:0; margin:0.2rem 0 0 3rem;}
#Title {float:left;}
#TitleContact {width:25rem; float:left; margin-top:1.5rem; margin-left:10%; padding:0.5rem; text-align:center;}
#TitleContact p {margin:0; padding:0; line-height:2rem; }
#TitleContact a { font-size:1.2rem; color:rgb(0, 128, 0);}

#TitleContact span {display:block;}
#TitleContact em {font-size:1.2rem;} /*Phone number*/

#TitleIcons {position:absolute; right:4rem; top:0.8em;}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
section {width:100%; min-height:100vh;}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/*History Page*/
#History { display:flex; flex-wrap: wrap; border-bottom:1px dashed black; margin-top: 12rem;}
#HistoryText  {flex: 50%; padding-left:3rem;}
#HistoryImage {flex: 50%; align-items:flex-start; display:flex; justify-content:center; height:auto; padding:3rem 1rem 1rem 1rem; } /*Centre image horizontally and at top, with padding surround.*/

#HistoryImage img { border-radius: 50%;  width:40em; }

.strapline {font-family:Tangerine; text-align:center; font-size:4rem; line-height:4rem; margin-top:3rem; color:rgb(0, 128, 0)}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/*Book & Map Page*/
#Book {display:flex; flex-wrap: wrap; border-bottom:1px dashed black; margin-top: 3rem;}
#BookText {flex: 50%; padding-left:3rem;}
#BookMap {flex: 50%; }
#BookMap p {text-align:center;}
#BookText em, #BookText a {color:rgb(0,128,0); font-size:0.8rem;}

.iframeContainer { position: relative; width: 90%; overflow: hidden; margin-left:auto; margin-right:auto; padding-top: 56.25%; /* 1:1 Aspect Ratio */}
.responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; }

ul {list-style-position: outside; list-style-image:url('Images/Circle-20x20.png'); padding-left:2rem; }
li { margin-bottom:0.5rem;}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/*Terms and Conditions*/
#Terms {width:100%; margin-top:3rem; padding-bottom:3rem;}
#TermsText {padding-left:3rem; padding-right:3rem;}

#TermsText p {padding-top:0.5rem; padding-bottom:0.5rem;}

tr {line-height:1.5rem;}
table {	margin-left:1rem;}
td {padding-left:1rem;}
td:first-of-type{width:6rem;}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
/*Footer*/
footer { width:100%; height:6rem; margin:0; padding:0; background-color: rgba(204, 230, 204,0.8); display:flex; flex-wrap: nowrap; justify-content: space-around;  align-items: center;}
footer img { width:3rem; padding:0; margin:0;}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ */
