{font-style:bold;}
ul{display:inline-block;}
hr {background-color: #004200; height: 5px; border:none; clear: both; width: 98%;}
em {font-style:italic; font-weight: 600; color: maroon}
red {font-weight: 600; color: #F00;}
black {font-weight: 300; color: #000; }
comp {font-style:italic; font-weight: 200; color: #930; }
purple {color:purple}
green {color:green}
a{color:#004200; 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}
.nobullet{list-style-type:none; padding:0; margin:0;}
.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;}
.top-bar {background-image:url("/images/spindle.jpg"); background-color:#a0CCC1}
.just{text-align:justify;}
.fr{float:right!important; display:inline; }
.fc{float:center!important; display:inline; }
.centre{text-align:center}
.padding{padding:5px}
#topNav, #newsNav, #galleryNav, #treeNav, #gardenNav, #trophyNav{ display: flex;}
#topNav a, #newsNav a, #galleryNav 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: 15px;
border-left: 1px solid white;
}
#topNav a, #treeNav a, #gardenNav a, #newsNav a, #galleryNav a, #trophyNav a{width:100%; padding:5px; }
.hambutton {padding:5px}
.foot{background-color: #004200; color:#fff; font-weight:600}
.foot a{color:#fff;}
.foot a:hover{background-color:#A0CCC1; color:#004200}
.active, .active a{background-color:#CEE4DE!important; color: #004200!important;}
.button{margin: 10px; margin-bottom:20px}
.button a{padding: 1px 10px 1px 10px; background-color:#99C7BB; color: #004200; font-size:15px; font-weight: 600; text-decoration: none; border-radius: 50px; }
/* 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}}
}
/*colours used */
.palestgreen, .palestgreen a{background-color: #EBF5E0; color: #004200;}
.palergreen, .palergreen a {background-color: #BDDBD3; color:white;}
.palegreen, .palegreen a {background-color: #99C7BB; color:white;}
.lightergreen, .lightergreen a{background-color: #89BEB0; color:white!important}
.lightgreen, .lightgreen a{background-color: #78B5A5 ; color:white;}
.darkgreen, .darkgreen a{background-color: #6BAE9C; color:white;}
.darkergreen, .darkergreen a{background-color: #5BA491;color:white;}
.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;}
.wood-type {color: #781D42; font-size: 14px; font-weight: 700; padding:2px;}
.size-price {font-style:italic; color:#004200;}
.date-large {color: #004200; font-weight: 600; font-size:20px;}
.date {font-style: italic; color: #8A0000; font-weight:600; float: left; margin-left: 15px;}
.place {color: #004200; 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: 3px; border-color: #004200; border-radius: 5px; margin-top: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;}
.full{float:left; width:100%; height:100%; margin-top:10px;}
.fifth, .fifthR {float:left; width: 19.9999%; margin-top:10px;}
.quarter, .quarterR{float:left; width:24.9999%; margin-top:10px;}
.third, .thirdR{float: left; width:33.333333%; margin-top:10px;}
.thirdRightR{float: right; width:33.333333%; margin-top:10px; margin-left:10px; margin-right:10 px}
.half, .halfR{float: left; width:49.99999%}
.twothirds, .twothirdsR{float: left; width:66.6666%; padding: 10px;}
.threequarter, .threequarterR{float: left; width:74.99999%; padding: 10px;}
.quarter img, .quarterR img, .third img, .thirdR img, .fifth img, .fifthR img {border-style:solid; border-width:1px; border-color: #A0CCC1;}
.quarter img, .third img, .halfR img, .half img, .whole img, .fifthR img {width:95%; }
.quarterRightR{float:right; width:24.99999%; margin-top:10px; margin-left:10px}
.half-gallery{float: left; width: 48%; margin: 1%; border-style:solid; border-width:1px; border-color: #5BA491; border-radius: 5px}
.half-fixed{float:left; width: 47%; height: 100%; margin: 1% 1%;}
.quarter-fixed{float:left; width:23%; height:100%; margin:1% 1%; }
.third, .third-fixed{float: left; width:31%; height:100%; margin: 1% 1%;}
.whole {float: left; width: 98%; margin: 1% 1%;}
.caption, {margin:1px 0px 10px; background-color: #EBF4F2!important; color: #004200!important; border-radius:5px; border-style:solid; border-width:1px; border-color: #A0CCC1;}
.caption p{padding:1px; border:2px; margin:2px; text-align:justify}
.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; border-top: 5px}
.light-back {background-color: gray}
.bar{font-size:18px; background-color:#99C7BB; color: #004200}
.bar:after{content:""; display:table; clear:both}
.bar a:hover{background-color:#004200; color:white}
.modalContainer {
display:block;
position:fixed;
top: 30px;
width:100%;
}
/* 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;
}
.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;
}
/* 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: #004200;
color: #fff;
text-align: center;
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;
}
.container {
margin: 200px auto;
width: 500px;
height: 60px
}
/* 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;
}
.button{margin-top: 20px; margin-bottom: 20px}
.button a{padding: 5px 10px 5px 10px; background-color:#004200; color: white; font-size:18; font-weight: 600; text-decoration: none; border-radius: 50px; }
/*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 {
position: relative;
display: inline;
width:100%;
padding:5px;
border-left: solid 1px white;
border-bottom: 2px solid transparent;
}
.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;
}
/* 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%}
.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+4) {display: none;}
.half, .quarter, .third, .twothirds{width:100% }
.showif600{display:inline;} /*only visible on small screen*/
.hideif600{display:none} /*hidden on small screen */
.search-field{ width:80%}
}