{font-style:bold;}
ul{display:inline-block;}
hr {background-color: #060; height: 5px; border:none; clear: both; width: 95%;}
em {font-style:italic; font-weight: 600; color: maroon}
a{color:#060; font-weight:600}
body{font-family:"Segoe UI",Arial,sans-serif; font-size:14px }
.clear, .clear50{ clear: both; width: 100%; font-size: 0px; }
.clear50 {height: 50px}
.new-row {clear: both}
.archive, .archive a{background-color: #800!important; color:#fff!important; text-align:center; padding: 5px; font-style: italic; font-size: 16px; margin-bottom: 5px; margin-top: 0px}
.nobullet{list-style-type:none; padding:0; margin:0;}
.boldlink a{color: #800000; font-weight: bold}
.content-main { width: 100%; max-width:1260px; margin:auto; box-sizing: border-box;}
.content-sub, .content-sub>.quarter, .content-sub>.half>.third {padding:0px 5px} /*sets row padding for sub content block and for quarter within it*/
.top, .center, .foot{text-align: center;}
.topbar {background-color:#a0CCC1; width=100%}
.topmargin15{margin-top:15px!important}
.just{text-align:justify;}
.fr{float:right!important; display:inline; }
.fc{float:center!important; display:inline; }
.centre{text-align:center}
.padding{ padding:5px}
.anchor-offset {position: relative; padding-top: 60px; font-weight: bold}
#topNav, #turningNav, #treeNav, #gardenNav, #trophyNav{ display: flex;}
#topNav a, #turningNav a, .hambutton, .sidebar a, .search-container form, #treeNav a, #gardenNav a, #trophyNav a, .dropdown{
text-decoration: none;
text-align: center;
cursor: pointer;
font-family: Arial;
font-size: 14px;
border-left: 1px solid white;
}
#topNav a, #treeNav a, #gardenNav a, #turningNav a, #trophyNav a{width:100%; padding:5px; }
.webnav, .webnav a{background-color: #E3E3E3; color: #800}
.hambutton {padding:5px}
.foot{background-color: #060; color:#fff; font-weight:600}
.foot a{color:#fff;}
.foot a:hover{background-color:#A0CCC1; color:#060}
.active, .active a{background-color:#CEE4DE!important; color: #060!important;}
/* The container - needed to position the dropdown content */
.showif600 {display: none;}
.hideif600{display: inline}
.noArrow:{display: none;}
.sidebar{
display:none;
width:180px;
z-index:1;
overflow:auto;
color:white;
}
.sidebar {position:fixed!important;}
.sidebar a{
display:inline-block;
width:100%;
padding:5px;
}
.sidebar a:first-child{text-align: left}
.animate-left{position:relative;animation:animateleft 0.5s}@keyframes animateleft{from{left:50px;opacity:0} to{left:70px;opacity:1}}
.animate-top{position:relative;animation:animatetop 0.5s}@keyframes animatetop{from{top:50px;opacity:0} to{top:50px;opacity:1}}
.animate-opacity { @keyframes animateleft{from{left:50px;opacity:0} to{left:50px;opacity:1}}
}
.alert, .alert a{background-color: #800000; color:white; text-align:center; padding: 3px; font-size: 12px; margin-bottom: 3px;}
/*colours used */
.palestgreen, .palestgreen a{background-color:#CEE4DE; color: #030;}
.palergreen, .palergreen a {background-color: #BDDBD3; color:#030;}
.palegreen, .palegreen a {background-color: #99C7BB; color:#030;}
.lightergreen, .lightergreen a{background-color: #89BEB0; color:white!important}
.lightgreen, .lightgreen a{background-color: #78B5A5 ; color:#030;}
.darkgreen, .darkgreen a{background-color: #6BAE9C; color:#030;}
.darkergreen, .darkergreen a{background-color: #5BA491;color:#030;}
.palegreen a, .palergreen a, .lightgreen a, .lightergreen a, .darkgreen a, .darkergreen a{border-bottom: 2px solid transparent;}
.palegreen a:hover, .palergreen a:hover, .lightgreen a:hover, .lightergreen a:hover, .darkgreen a:hover, .darkergreen a:hover{border-bottom: 2px solid white;}
.purple, .purple a{background-color:purple!important;}
yellow { background-color: #FF0; color: #000}
red {color:#F00}
green {color: #060}
blue {color:#00F}
w {color: #781D42 }
grey {color: gray}
faded {color: #E3E3E3;}
.wood-type {color: #781D42; font-size: 14px; font-weight: 700; padding:2px; align-items:center;}
.size-price {font-style:italic; color:#060; text-align: center}
.date-large {color: #060; font-weight: 600; font-size:20px;}
.date {font-style: italic; color: #8A0000; font-weight:600; float:left; margin-left: 5px}
.place {color: #060; font-weight: 600; font-size:16px; text-align: center}
.entry {font-style:italic; color: #808080; float: right; margin-right:15px;}
img.hover-shadow {transition: 0.3s;}
.hover-shadow:hover {box-shadow: 0 4px 8px 0; cursor:pointer;}
.border{border-style:solid; border-width:1px; border-color: #008; border-radius: 5px}
.mySlide {border-radius: 5px; transition: 0.3s; margin-top:5px; width:100%; height:auto;}
.mySlide:hover {box-shadow: 0 4px 8px 0; cursor:pointer;}
.quarter, .quarterR {float:left; width:24.99999%; height:100%; margin-top:0px; padding:5px}
.third, .thirdR{float: left; width:33.333333%; height:100%; margin-top:0px; margin-bottom:0px; padding:5px;}
.twothirds, .twothirdsR {float: left; width:66.6666%; padding: 10px;}
.fifth {float: left; width: 19.99%; height:100%; padding: 5px}
.threequarter, .threequarterR{float: left; width:74.99999%}
.half, .halfR{float: left; width:49.99999%; height:100%; margin-top:0px; padding:5px}
.whole{width:100%; height:auto%; margin-top:0px; padding:5px}
.quarter img, .quarterR img, .third img, .thirdR img, .half img, .halfR img, .fifth img{border-style:solid; border-width:1px; border-color: #A0CCC1;}
.quarter img, .quarterR img, .third img, .thirdR img, .half img, .halfR img, .whole img, .fifth img{width:98%; height:auto}
.thirdRightR{float: right; width:33.333333%; margin-top:10px; margin-left:10px; margin-right:10 px}
.quarterRightR{float:right; width:24.99999%; margin-top:10px; margin-left:10px}
.caption {margin:1px 0px 10px; background-color: #EBF4F2!important; border-radius:5px; border-style:solid; border-width:1px; border-color: #A0CCC1;}
.caption p{padding:5px; border:2px; margin:2px; text-align: center}
.captionJ {margin:1px 0px 10px; background-color: #E8F2F0; border-radius:5px; border-style:solid; border-width:1px; border-color: #A0CCC1;}
.captionJ p{padding:10px; border:2px; margin:2px; text-align: justify}
.captionT {margin:1px 0px 10px; background-color: #EBF4F2!important; border-radius:5px; border-style:solid; border-width:1px; border-color: #A0CCC1;}
.captionT p{padding:10px; border:2px; margin:2px; text-align: center}
.captionTree {margin:1px 0px 1px; font-size:10px; font-style:italic; color: #060; text-align: center}
.row-padding, .row-padding>.quarter{padding:0px 5px} /* controls gap between columns html box-sizing at top ensures padding incuded in any width*/
.padding-small {padding:4px 3px!important}
.padded {padding-top:40px!important; padding-bottom:40px!important;}
.padding-sides {padding-left:15px; padding-right:15px;}
.border-sides {box-sizing: border-box; border-left:10px; border-right:10px;}
.light-back {background-color: gray}
.nopadding-sides {padding:0px 0px!important}
.bar{font-size:18px; background-color:#99C7BB; color: #060}
.bar:after{content:""; display:table; clear:both}
.bar a:hover{background-color:#060; color:white}
.button{margin: 10px;}
.button a{padding: 1px 10px; background-color:#99C7BB; color: #040; font-size:15px; font-weight: 600; text-decoration: none; border-radius: 50px;
display: inline-block; /* Ensure the anchor behaves like a block element */
min-height: 24px; /* Recommended minimum height for touch targets */
line-height: 36px; /* Center text vertically */ }
/*.button a{padding: 1px 10px; background-color:#CEE4DE; color: #040; font-size:10px; font-weight: 600; text-decoration: none; border-radius: 1px;
display: inline-block;
min-height: 12px;
line-height: 14px;}
/* The Modal (background) */
.modal {
display: none;
position: absolute;
z-index: 2;
padding: 10px;
left: 0;
top: 0;
width:auto;
height:auto;
overflow: auto;
background-color: #E6E6E6;
}
.modalImage {
margin: auto;
display: inline;
max-width: 100%;
height: auto;
z-index: 2;
}
.modalContainer {
display:block;
position:fixed;
top: 30px;
width:100%;
z-index:2
}
.caption-container {max-width:600px;}
/* Add Animation (not actually used at moment*/
.modalImage {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 10px;
right: 12px;
color: #f1f1f1;
background-color: black;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: white;
background-color: #8A0000;
text-decoration: none;
cursor: pointer;
}
.container {
margin: 200px auto;
width: 500px;
height: 60px
}
/* Popup container */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
color: maroon;
font-style: italic; font-weight:600; text-decoration:underline;
}
/* The actual popup (appears on top) */
.popup .popuptext {
visibility: hidden;
width: 200px;
background-color: #060;
color: #fff;
text-align: center;
font-size: 14px;
font-style: normal;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
.hidePopUp {
display: none;
}
.myDIV:hover + .hidePopUp {
display: block;
color: red;
}
/* search form More set with .topNav*/
.search-container form{
display: flex;
flex-direction: row;
padding: 4px;
}
.search-field {
width: 25%;
padding: 1px 2px 1px 2px;
border: 1px;
border-radius: 50px;
outline: none;
}
.search-button {
background: transparent;
border: none;
outline: none;
margin-left: -33px;
}
.search-button img {
width: 20px;
height: 20px;
object-fit: cover;
}
/*This makes the whole of the dropdown menu tabs (divs) active as a click button. Without this only the text is clickable*/
. menu, .menuAtSide{
text-align:center;
width: 100%;
height: 100%;
top: 0;
left: 0;
padding:5px;
z-index: 1;}
.menuAtSide{position:relative;}
.dropdown, .dropdown a{
position: relative;
display: inline;
width:100%;
padding:5px;
border-left: solid 1px white;
border-bottom: 2px solid transparent;
z-index: 0;
}
.dropdown:hover{border-bottom: 2px solid white;}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
top: 25px;
left: 2px;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
float:none;
padding: 6px 8px;
text-decoration: none;
display: block;
z-index: 0;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.noArrow {display:none;}
.showArrow { display:inline}
.downArrow{}
.upArrow{}
.show{display:inline;}
/* Add a dark background on topnav links and the dropdown button on hover */
.image_fl {float: left; margin: 10px;}
.image_fr {float: right; margin: 10px;}
.sticky {position: fixed; top: 0; width: 100%; max-width: 1260px; margin:auto;}
.sticky + .content-main {padding-top: 5px;}
.stickyTop{top: 0}
/*the changes for 780 need to come before those for 600, so they don't override the 600 ones*/
@media only screen and (max-width: 780px) {
.hide{display:none}
.quarter{width:49.9999%;} .search-field{width:90%;} .half{width:100%} .whole{width:98%;}
.modalImage {width: 90%;}
.modal-content {width: 100%;}
}
/* (B) SMALL SCREEN - COLLAPSE INTO SINGLE COLUMN Place at bottom of stylesheet to over-ride class statements above*/
@media only screen and (max-width: 600px) {
#topNav a:nth-child(n+3) {display: none;}
.half, .quarter, .third, .twothirds, .threequarter, .fifth, .whole {width:98%;}
.showif600{display:inline;} /*only visible on small screen*/
.hideif600{display:none} /*hidden on small screen */
.search-field{ width:80%}
.button a {
padding: 1px 6px;
font-size: 10px;
border-radius: 5px;
min-height: 18px;
line-height: 20px;
}
}