body{
		background: white;
}

/* set links to green colour, not the original red (delete this to take it back to red) */
.comment-form .logged-in-as a:last-child:hover, .comment-form .logged-in-as a:last-child:focus, .post-cats > span a:hover, .post-cats > span a:focus, .main-header a:hover, .main-header a:focus, .main-header a:active, .top-menu > ul > li > a:hover, .main-menu ul ul li:hover > a, .main-menu ul li.current-menu-item > a, .header-2 .main-menu > ul > li.current-menu-item > a, .main-menu ul li:hover > a, .post-navigation .nav-links a:hover, .post-navigation .nav-links a:focus, .tabs-nav li.tab-active a, .tabs-nav li.tab-active, .tabs-nav li.tab-active a, .tabs-nav li.tab-active, ul.trail-items li a:hover span, .author-socials a:hover, .post-date a:focus, .post-date a:hover, .post-excerpt a:hover, .post-excerpt a:focus, .content a:hover, .content a:focus, .post-footer > span a:hover, .post-footer > span a:focus, .widget a:hover, .widget a:focus, .footer-menu li a:hover, .footer-menu li a:focus, .footer-social-links a:hover, .footer-social-links a:focus, .site-footer a:hover, .tags-links a, .tags-links i, .post-cats > span i, .promo-three .post-category a, .site-footer a:focus, .content-area p a {
		color: #15800b;
}
/* and make the non-navigation stuff bold */
.comment-form .logged-in-as a:last-child:hover, .comment-form .logged-in-as a:last-child:focus, .post-cats > span a:hover, .post-cats > span a:focus, .main-header a:hover, .main-header a:focus, .main-header a:active, .post-navigation .nav-links a:hover, .post-navigation .nav-links a:focus, .tabs-nav li.tab-active a, .tabs-nav li.tab-active, .tabs-nav li.tab-active a, .tabs-nav li.tab-active, ul.trail-items li a:hover span, .author-socials a:hover, .post-date a:focus, .post-date a:hover, .post-excerpt a:hover, .post-excerpt a:focus, .content a:hover, .content a:focus, .post-footer > span a:hover, .post-footer > span a:focus, .widget a:hover, .widget a:focus, .footer-menu li a:hover, .footer-menu li a:focus, .footer-social-links a:hover, .footer-social-links a:focus, .site-footer a:hover, .tags-links a, .tags-links i, .post-cats > span i, .promo-three .post-category a, .site-footer a:focus, .content-area p a {
		font-weight: 600;
}

h1.site-title{
		display: none;
}
.header-1 .head_one{
		background: none;
		max-width: 1920px;
		height: 430px;
		/* background-image: url("/wp-content/uploads/2022/09/6692403213_8e3981fd50_o-scaled-e1663839460770.jpg"); */
		/* background-image: url("/wp-content/uploads/2023/06/019-Manuka-with-honeybee-scaled-e1688135499415.jpg"); */
		/* background-image: url("/wp-content/uploads/2023/07/019-Manuka-with-honeybee-scaled-e1688555228693.jpg"); */
		/* background-image: url("/wp-content/uploads/2023/10/PHOTO-header-APP4_With_Logos-NEW.png"); */
		background-image: url("/wp-content/uploads/2023/11/Slider_For_APP4_Logos_Central_.png");
		background-size: 1920px, 5%;
		background-position: bottom center;
    background-repeat: no-repeat;
}
.header-1 .head_one .logo{
		padding-top: 15px;
		padding-bottom: 150px;

}
.header-1 #site-navigation{
		border-top: none;
}

.bhpslogo{
		width: 75%;
		height: 75%;
		margin-left: auto;
		margin-right: auto;
}

.post-title{
		border-bottom-style: solid;
		border-bottom-width: thin;
		border-bottom-color: lightgray;
}

/* prominent block to link to the search tool */
.searchnowcta{
	  display: block;
		position: relative;
		background-imageXX: url("/wp-content/uploads/2023/10/APP4-logo-with-white-graduated-circular-background-to-go-on-any-colour-CROPPED-500px.png");
		background-color: lightgray;
		background-position: left;
		background-size: contain;
		background-repeat: no-repeat;
		padding: 30px 0px 30px 170px;
		border: buttonshadow;
		border-style: solid;
		border-color: white;
		border-radius: 10px;
		border-width: 0px;
		text-align: left;
		font-size: 2em;
		font-weight: bold;
}
.searchnowcta:before { /* this puts the background image so that it overlaps outside the cta */
    content: "";
    position: absolute;
    width: 157px;
    height: 160px;
    background-image: url("/wp-content/uploads/2023/10/APP4-logo-with-white-graduated-circular-background-to-go-on-any-colour-CROPPED-500px.png");
    background-repeat: no-repeat;
		background-size: cover;
		z-index: 100;
		top: -30px;
    left: -20px; //adjust your positioning as necessary
}
p.searchnowcta a{ /*  a:link a:visited a:hover a:active */
		color: #15800b;
		text-decoration: none !important;
}
p.searchnowcta a:hover{ /*  a:link a:visited a:hover a:active */
		color: gray;
		text-decoration: none !important;
}

/* style the display of search related stuff */
#map{
		height: 300px;
    width: 630px;
		margin-bottom: 2em;
}
/* hide the lat lon coords stuff in the 3857 format */
p.latlon{
		display: none;
}

/* style the AT, MD, etc. variables list into three columns */
div.leftcolumnUL, div.centrecolumnUL, div.rightcolumnUL {
		width: 33%;
		clear: none;
		float: left;
}

/* style the 'edit search' button */
#submitlocscen {
    background-color: #e6e6e6; /* Button color */
    color: #15800b; /* Text color */
    font-weight: bold; /* Text bold */
    border: none; /* Removes default button styling */
    cursor: pointer; /* Changes the cursor when you hover over the button */
    padding: 10px 20px; /* Button size (optional) */
    border-radius: 12px; /* Rounded corners */
}

/* now style the display of the species data */
/* place the common name on the same line as the species name */
article.app_species div.post-wrap{
	padding-top: 0;	
}
article.app_species div.post-wrap div.post-content{
	padding-top: 0;
	overflow: visible;
}
article.app_species div.post-wrap div.post-excerpt, article.app_species div.post-wrap div.content{
	margin-bottom: 1px;
}
article.app_species div.post-wrap div.post-content h2.post-title{
	margin-top: 0;
  margin-bottom: 5px;
}
article.app_species div.post-wrap div.post-content div.post-date{
	display: none;
}
h2.post-title.entry-title, h1.post-title.entry-title, p.commonnameintitle {
    display: inline-block;
}
 p.commonnameintitle {
		 font-size: 1.1em;
		 margin-left: 20px;
     margin-bottom: 5px;
}
div.optimumConditions {
		margin-bottom: 5px;
		padding: 5px;
		background-color: #e6e6e6;
		border-radius: 5px;
}
div.optimumConditions p {
		margin-bottom: 0;
}
div.speciesDataBlock{
		width: 49%;
		float: left;
		background-color: #e6e6e6;
		margin-bottom: 10px;
		padding: 5px;
		border-radius: 5px;
}
div.speciesDataBlock.oddNumbered{
		clear: both;
		margin-right: 10px;
}
/* on the species archive page, hide the speciesDataBlock divs by default */
body.post-type-archive-app_species div.speciesDataBlock{
		display: none;
}
/* and control the appearance of the show/hide controls in the footer of each species */
p.showhidespeciesdata{
		padding: 5px;
		margin-bottom: 0;
		background-color: #e6e6e6;
		border-radius: 5px;
}
span.apphidespeciesdata a, span.appshowspeciesdata a{
		font-weight: bold;
}
/* single and archive view */
.single .post-excerpt div.speciesDataBlock h4, .post-excerpt div.speciesDataBlock h4{
		font-size: 1em;
		font-weight: bold;
		margin-bottom: 5px;
}

.content div.speciesimgholder p.speciesficaption{
		margin-bottom: 0;
		font-size: 0.8em;
		color: #303030;
}

/* single view */
.single .post-excerpt div.speciesDataBlock ul{
		margin: 0 0 0 0;
		padding: 0 0 0 0;
}
/* single view - styling to remove the right sidebar and make the content full width */
/* this works in conjunction with /themes/promos-child/functions.php and the section add_filter('body_class', function($classes) { */
.single.single-right-sidebar.no-sidebar #sidebar {
    display: none;
}
.single.single-right-sidebar.no-sidebar #primary {
    width: 100%;
		max-width: 100%;
		flex: 0 0 100%;
}
/* single view - hide app-species post thumbnail (featured image) */
main.single-species div.post-thumbnail{
		display: none;
}

/* archive view */
.post-excerpt div.speciesDataBlock ul{
		padding: 0 0 0 15px;
}
/* archive view - hide app-species post thumbnail (featured image) */
body.post-type-archive-app_species div.post-media{
		display: none;
}
/* single and archive view */
.single .post-excerpt div.speciesDataBlock ul li, .post-excerpt div.speciesDataBlock ul li{
		margin: 0 0 0 0;
		padding: 0 0 0 1em;
    text-indent: -1em;
		color: black;
}
.speciesimgholder{
	text-align: center;	
}
.speciesDataBlock img.wp-post-image{
  max-height: 400px;
  width: auto;
  height: auto;
}

/* and style the suitability traffic lights */
div.suitTrafficLights{
		padding: 3px 3px 3px 3px;
		height: 2.7em;
		margin-bottom: 5px;
		background-color: #e6e6e6;
		overflow: visible;
		border-radius: 5px;
}
div.suitTrafficLights div{
		float: left;
		width: 3.0em;
		margin-right: 0.5em;
		padding-top: 0.7em;
		padding-bottom: 0.7em;
		text-align: center;
		font-size: 0.8em;
		font-family: "Pragati Narrow", Arial, Helvetica, sans-serif;
		font-stretchXX: condensed;
		font-weight: bold;
		border-radius: 40px;
}
div.suitA{
		background-color: limegreen;
}
div.suitB{
		background-color: yellow;
}
div.suitC{
		background-color: orange;
}
div.suitD{
		background-color: red;
}
div.suitI{
		background-color: white;
}
div.suitL{
		background-color: lightcyan;
}
/* add styling for the traffic lights key (user information colour chart) */
div.suitTrafficLights span.keytext{
		font-size: 0.9em;
		font-weight: bold;
}
div.suitTrafficLights.key {
    display: flex;
    align-items: center;
    justify-content: center;
		justify-content: flex-start; /* Aligns items to the start of the flex container */
}
/* and add tooltip styling for the traffic lights */
  .tltooltip {
    position: relative;
    display: inline-block;
  }
  .tltooltip .tooltiptext {
    visibility: hidden;
    width: 260px;
    background-color: black;
    color: #fff;
    text-align: center;
		font-weight: Normal;
		font-size: 1.2em;
    padding: 5px 0;
    border-radius: 5px;
    /* Position the tooltip */
    position: absolute;
		top: 2em;
		left: -1em;
	  z-index: 100;
  }
  .tltooltip:hover .tooltiptext {
    visibility: visible;
  }

/* attributes and uses tool tips */
  .autooltip {
    position: relative;
    display: inline;
		font-size: 1.2em;
  }
  .autooltip .autooltiptext {
    visibility: hidden;
    width: 260px;
    background-color: black;
    color: #fff;
    text-align: center;
		font-weight: Normal;
		font-size: 0.8em;
    padding: 5px 0;
    border-radius: 5px;
    /* Position the tooltip */
    position: absolute;
		bottom: 1.5em;
		left: -1em;
	  z-index: 100;
  }
  .autooltip:hover .autooltiptext {
    visibility: visible;
  }

p.locationerrormessage{
		font-weight: bold;
		color: red;
}