/*
Theme Name: GOERT 2021
Theme URI: https://goert.ca
Description: a custom theme to power the GOERT website, 2021
Author: Rocketday Arts
Author URI: https://rocketday.studio


root font size 20px
baseline grid 30px

main text 20px / 1.5 (30px) black
navigation 14px / 1.3 (18.2px) white
captions & small text 0.75rem (15px) / 1.3 (19.5px) #898


PAGE LAYOUT DESKTOP

page width 900px
nav#subnav 225px (float left) 
article 605px content area + 70px padding



COLOURS

background = light green #8a8

links all BLUE
	text links based on #369, hover #702d3d
	navigation boxes vary, hover #702d3d
	plant prop boxes #c3dae7, hover #702d3d

navigation TOP link box = white text, teal css gradient 
navigation SUB link box = white text, blue css gradient (#146 to #257) 

current section navigation = #146
headings green = #33563e and #528261

plant propagation list = #1c5a7c text


FONTS

navigation: Adelle 400 600 700 normal & italic
headings: Garamond Premier Pro Subhead 400 normal
native plant propagation: Garamond Premier Pro 500 normal italic
body text: Minion Pro 400 700 normal & italic (w onum, smcp, lnum)
extra notes: Adelle Sans 400 600 normal & italic


========================================
FOUNDATION
========================================
*/

html
{
	font-size: 20px;
	line-height: 30px;
}

body
{
	color: black;
	background-color: #8A8;
	background-image: url(images/GOERT-background-site.jpg);
	background-repeat: no-repeat;
	background-position: center bottom;
	background-attachment: fixed;
	font-family: minion-pro, serif;
	font-variant-numeric: oldstyle-nums;
	font-feature-settings: "onum";
	font-size: 20px;
	line-height: 30px;
	font-weight: 400;
	margin: 0;
	padding: 0;
}

div
{
	display: block;
	margin: 0;
	padding: 0;
}

div.clear { clear: both; }

/* used for items that print but don't appear on screen */
.for_print { display: none; }

/* used for hiding elements in scripts */
.invisible { display: none; }

/* used for hiding elements in CSS that may be helpful for accessibility, like additional HRs */
.for_accessibility { display: none; }

/*
========================================
ALL NAVIGATION
========================================
*/

nav,
nav a, 
nav a:hover, 
a.editlink, 
input, 
a.button, 
div.person_bio_toggle
{
	font-family: adelle, serif;
	font-size: 0.7rem;
	line-height: 1.3;
	font-weight: 400;
	color: white;
	text-decoration: none;
}

nav a:hover, 
ul#ul_topnav li a.topnav_link:hover, 
ul.subnav li a:hover, 
ul.subnav li ul.children li a:hover,
ul.subnav li.current_page_item ul.children li a:hover,
a.editlink:hover, 
nav#quicklinks a:hover,
a.button:hover, 
div.person_bio_toggle:hover
{
	color: white !important;
	background-color: #702d3d !important;
	background: #702d3d !important;	
}

button, 
div.person_bio_toggle {
	display: inline-block; 
	appearance: none;
	cursor: pointer;
	font-family: adelle, serif;
	font-size: 0.7rem;
	line-height: 1.3;
	font-weight: 400;
	background-color: #369; 
	border-radius: 3px;
	padding: 10px 15px; 

}

/*
========================================
MAIN BLOCKS
========================================
*/

main 
{
	display: block;
	width: 100%;
	margin: 0 auto;
	padding: 0; 
}

header#full_site
{
	display: block;
	width: 900px;
	height: 200px;
	margin: 0 auto;
	background-color: #8a8;
	background-image: url(images/GOERT-web-top-banner-2021-wide.jpg);
	background-repeat: no-repeat;
	background-position: 0 0;
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
}

nav#topnav
{
	display: block;
	width: 900px;
	margin: 2px auto 0 auto;
}

div#content_and_sub_navigation
{
	width: 900px;
	margin: 0 auto 30px auto;
	border-top: 8px solid #146;
}

nav#subnav_after_topnav
{
	display: block;
	width: 225px;
	float: left;
	margin: 0 0 30px 0;
	padding: 20px 0 30px 0;
	border: 0;
	background-color: #257;
	background: linear-gradient(0deg, rgba(34,85,119,1) 75%, rgba(17,68,102,1) 100%);
	border-bottom-left-radius: 12px;
}

div#content_and_footer_containter
{
	width: 675px;
	float: right;
}

div#content_and_footer_containter_wide { width: 900px; }

article
{
	display: block;
	width: 605px;
	padding: 35px 35px 60px 35px;
	background-color: white;
}

footer
{
	display: block;
	width: calc( 100% - 70px );
	background-color: #464;
	padding: 10px 35px;
	font-size: 0.8rem;
	line-height: 1.5;
	color: #cdc;
	opacity: 0.8;
	margin: 0 auto; 
	border-bottom-right-radius: 12px;
	border-bottom-left-radius: 12px;
}

/*
========================================
TOP HEADER
========================================
*/

h1
{
	margin: 0;
	padding: 0;
}

nav#quicklinks
{
	display: block;
	width: 600px;
	height: 75px;
	float: right;
	text-align: right;
	margin: 0 35px 0 0;
	padding: 0;
}

nav#quicklinks a
{
	display: block; 
	float: right; 
	clear: none; 
	padding: 10px;
	margin: 0 6px 0 0; 
	border: 0;
	border-radius: 0 0 3px 3px;
	background-color: #527785;
	background: linear-gradient(0deg, rgba(96,135,148,1) 0%, rgba(48,82,98,1) 100%);
}

nav#quicklinks a.current_page_item, 
nav#quicklinks a.current_page_item:hover
{
	background-color: #146 !important;
	background: rgb(17,68,102);
}


/*
========================================
TOP NAVIGATION
========================================
*/

img#menu_button { display: none; }

ul#ul_topnav
{
	display: block;
	width: 900px;
	margin: 0;
	padding: 0;
	list-style-type: none;
}

ul#ul_topnav li
{
	display: block;
	float: left;
	text-align: left;
	list-style-type: none;
}

ul#ul_topnav li a.topnav_link
{
	display: block;
	height: 70px;
	width: 113.4px;
	padding: 5px 5px 0 5px;
	margin: 4px 6px 6px 0;
	float: left;
	clear: left;
	border: 0;
	border-radius: 3px;
	background-color: #527785;
	background: linear-gradient(0deg, rgba(96,135,148,1) 0%, rgba(48,82,98,1) 100%);
}

ul#ul_topnav li.current_page_item a.topnav_link,
ul#ul_topnav li.current_page_item a.topnav_link:hover
{
	margin: 4px 6px 0 0;
	height: 76px;
	background-color: #146 !important;
	background: rgb(17,68,102);
	border-bottom-left-radius: 0px;
	border-bottom-right-radius: 0px;
}

ul#ul_topnav li:last-of-type a.topnav_link { margin-right: 0 !important; }

/*
========================================
SUB NAVIGATION
========================================
*/

ul.subnav
{
	display: block;
	margin: 10px 0 0 0;
	padding: 0;
	text-decoration: none;
	list-style-type: none;
	float: right;
}

ul#ul_subnav_after_topnav { width: 225px; }
ul#ul_subnav_within_topnav { display: none; }

ul.subnav li
{
	display: block;
	clear: both;
	list-style-type: none;
	margin: 0;
	padding: 0;
	text-align: left;
}

ul.subnav li a
{
	display: block;
	float: right;
	clear: both;
	width: calc(100% - 35px);
	padding: 7px 15px 7px 5px;
	color: white;
	background-color: transparent;
	border-top: 1px solid #557c96;
}

ul.subnav li.current_page_item a,
ul.subnav li.current_page_item a:hover
{
	display: block;
	color: black;
	background-color: white;
	border-top-left-radius: 3px;
}

ul.subnav li ul.children
{
	width: calc(100% - 35px);
	margin: 0;
	padding: 0;
	float: right;
}

ul.subnav li ul.children li a,
ul.subnav li.current_page_item ul.children li a
{
	display: block;
	float: right;
	clear: both;
	width: calc(100% - 25px);
	font-style: italic;
	color: white;
	background-color: transparent;
	border-color: #446c88;
	border-width: 1px 0 0 0;
	border-style: solid;
}

ul.subnav li ul.children li.current_page_item a,
ul.subnav li ul.children li.current_page_item a:hover
{
	display: block;
	color: black;
	background-color: white;
	border-top-left-radius: 3px;
}

/*
========================================
INTERNAL PAGE NAVIGATION 
========================================
*/

nav.internal_page {
	display: block; 
	width: calc( 100% - 62px ); 
	margin: 30px 0 0 0;
	padding: 30px; 
	border: 1px solid #b7d3dd;
	background-color: #b7d3dd;
}

input, 
a.button {
	display: inline-block; 
	color: white !important; 
	background-color: #369 !important;
	text-decoration: none;
	margin: 0 1rem; 
	padding: 7.5px 15px; 
	border: 1px solid #369; 
	border-radius: 3px;
}

input:hover, 
a.button:hover {
	color: white !important; 
	background-color: #702d3d !important;
	border-color: #702d3d !important; 
}

a.button_large {
	font-size: 1rem; 
	font-weight: 600; 
	margin: 1.5rem 0 0 0; 
	padding: 15px 45px; 
	
}

a.clean
{
	border-bottom: none !important; 
}

.icon
{
	position: relative; 
	top: 5px; 
	width: 20px;
	height: 20px;
	margin: 2px;
	fill: #336699;
	border-bottom: none !important;
}

a.edit .icon
{
	opacity: 0.5; 
}

a.edit .icon:hover
{
	opacity: 1; 
}



/*
========================================
EDIT IN WORDPRESS LINK
========================================
*/

a.editlink
{
	display: block;
	position: fixed;
	bottom: 30px;
	left: 0px;
	opacity: 0.8;
	width: 90px;
	padding: 9px 18px;
	margin: 0;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
	background-color: #464;
}

/*
===============================
FOOTER
===============================
*/

footer a
{
	color: #cdc;
	text-decoration: none;
	border-bottom: 1px dotted #cdc;
}

footer a:hover
{
	color: #cdc;
	text-decoration: none;
	border-bottom: 1px solid #cdc;
}

/*
===============================
CONTENT AREA STYLES
===============================
*/

main
{
	font-family: minion-pro, serif;
	font-variant-numeric: oldstyle-nums;
	font-feature-settings: "onum";
	font-size: 1rem;
	line-height: 1.5;
	font-weight: 400;
}

main a,
main a em, 
div.welcome_box a, 
div.welcome_box a em
{
	color: #369 !important;
	text-decoration: none;
	border-bottom: 1px dotted #369;
}

main a:hover,
main a:hover em, 
div.welcome_box a:hover, 
div.welcome_box a:hover em
{
	color: #702d3d !important;
	text-decoration: none;
	border-bottom: 1px solid #702d3d;
}

main h2
{
	margin: 15px 30px 30px 0;
	color: #33563e;
	font-family: garamond-premier-pro-subhead, serif;
	font-size: 45px;
	line-height: 60px;
	font-weight: 400;
	letter-spacing: 0.05rem;
}

main h2.plant_english_name { margin: 0; }

main h2.plant_scientific_name
{
	font-family: garamond-premier-pro, serif;
	font-weight: 500;
	font-size: 1.2rem;
	line-height: 30px;
	margin: 0;
	color: #528261;
}

main h3, 
main h4, 
main h5, 
main h6
{
	font-family: adelle, serif;
	letter-spacing: 0.05rem;
	line-height: 30px;
	font-weight: 600 !important;
	margin: 60px 0 30px 0;
	color: #528261;
}

main h3
{
	text-transform: uppercase;
	font-size: 1rem;
}

main h4
{
	font-size: 1rem;
	font-weight: 700;
}

main p, ul, ol { margin: 30px 0 0 0; }

main ul li ul, 
main ol li ul
{
	margin-top: 10px !important;
}

main ul li
{
	margin-top: 10px;
	list-style-type: square;
}

main ol li { margin-top: 10px; }
main li:first-child { margin-top: 0; }

main em { font-style: italic; }

main strong
{
	font-weight: 700;
	font-style: normal;
}

main mark
{
	background-color: #e0e3ea;
	font-variant: small-caps;
	font-feature-settings: "smcp";
}

main blockquote
{
	margin: 30px 0 0 0;
	padding: 30px; 
	border-left: 2px solid #dee5de;
}

main blockquote p
{
	text-indent: 0;
	margin-top: 0 !important;
	font-weight: normal;
	font-style: italic !important;
	color: #889988 !important;
}

main blockquote p em
{
	font-style: normal !important;
}


main table
{
	width: 100%;
	font-family: adelle-sans, sans-serif;
	font-variant-numeric: tabular-nums lining-nums;
	font-feature-settings: "lnum";
	font-size: 0.7rem;
	line-height: 1.3;
	border: 0;
	text-align: left;
	margin: 30px 0 0 0;
}

main table th
{
	border: 0;
	color: white; 
	background-color: #528261;
	font-weight: 600;
	text-align: left;
	padding: 5px;
}

main table th.subheading {
	background-color: #74a282;
	text-align: center;
	padding: 15px 5px; 
}

main table tr td
{
	background-color: #e6edde;
	text-align: left;
	vertical-align: middle;
	padding: 5px;
}

main table tr:nth-child(even) td 
{
	background-color: #f3f7ee;
}

main table tr th.center,
main table tr td.center {
	text-align: center; 
}

main img
{
	margin: 0;
	vertical-align: bottom;
	border-radius: 12px;
}

main .caption, 
main p.wp-caption-text 
{
	text-align: left;
	font-size: 0.75rem;
	line-height: 1.3;
	color: #898;
}

main p.wp-caption-text {
	margin: 6px 10px 0 0;
	padding: 0;
}

main .alignright {
	margin: 30px 0 30px 30px;
	float: right;
	clear: right;
}

main .alignleft {
	margin: 30px 30px 30px 0;
	float: left;
	clear: left;
}

main .alignnone, 
main .aligncenter {
	margin-top: 30px; 
}

main iframe,
main div.video { margin: 30px 0 0 0; }

/*
========================================
EVENTS
========================================
*/

main#events h2 {
	margin-top: 45px; 
}

div.event {
	display: block; 
	width: 100%; /* 605px */
	border-top: 1px solid #8a8; 
	margin: 30px 0 0 0; 
	padding: 0; 
}

div.event h4 {
	margin: 15px 0; 
}

div.event div.event_image_text_container {
	display: flex; 
	flex-direction: row; 
	justify-content: flex-start;
	align-items: flex-start; 
	gap: 30px; 
}

div.event a.button {
	margin-left: 0 !important; 
}

/*
========================================
PEOPLE
========================================
*/

div.person {
	display: block; 
	width: 100%; /* 605px */
	border-top: 1px solid #8a8; 
	margin: 30px 0 0 0; 
	padding: 15px 0 0 0; 
}

div.person_header_container {
	display: flex; 
	flex-direction: row; 
	align-items: flex-start; 
	gap: 35px; 
}

div.person img.size-large {
	width: 190px; 
	height: auto; 
	margin: 0; 
}

div.person div.image_coming_soon {
	width: 160px; 
	height: 160px; 
	margin: 0; 
	background-color: #ccc; 
	border-radius: 12px; 
	text-align: left; 
	font-size: 0.8rem; 
	line-height: 1rem; 
	padding: 15px;
	color: #777; 
}

div.person_name_title_org_container {
	width: 380px; 
}

div.person h4 {
	margin: 15px 0 0 0; 
}

div.person div.person_job_title_org {
	font-style: italic; 
	color: #777; 
}

div.person div.person_job_title_org span.person_job_title {
	color: #000; 
}

div.person div.person_bio, 
div.person div.person_bio_empty {
	width: calc(100% - 30px); 
	margin: 15px; 
}

div.person div.person_bio_empty {
	color: #777; 
}

div.person_bio_toggle {
	margin: 10px 15px; 
}

/*
========================================
RESTORATION SITES
========================================
*/

div.extra_content 
{
	display: block;
	width: calc( 100% - 2px );
	border: 1px solid #b7d3dd;
	background-color: #b7d3dd;
}

main section {
	display: block; 
	background-color: #f1f6e0; 
	margin: 14px; 
	border: 1px solid #f1f6e0; 
	border-radius: 10px;  
	padding: 20px; 
}

section:first-of-type {
	margin-top: 0; 
}

section h4 {
	margin: 15px 0 0 0; 
}

section.restoration_site div.location_where_to_find, 
section.restoration_site div.location_steward {
	margin: 7.5px 0 0 0; 
	color: #2a4633;
	font-style: italic;  
}

section.restoration_site div.location_contact_info {
	margin: 30px; 
	font-family: adelle-sans, sans-serif;
	font-size: 0.75rem; 
	letter-spacing: 0.02rem; 
	font-weight: 400; 
	color: #2a4633;
}

section.restoration_site div.location_contact_info strong {
	font-weight: 400; 
}

/*
===============================
WELCOME PAGE UPDATED
===============================
*/

div#land_acknowledgement
{
	display: block;
	width: auto; 
	max-width: 800px; 
	margin: 10px 0; 
	padding: 20px 50px; 
	color: #33563e; 
	background-color: #e9f5db;
	clear: both; 
	font-style: italic; 
}

div#welcome_boxes
{
	display: block;
	margin: 5px -5px 5px -5px;
	width: 910px;
}

a.welcome_box
{
	display: block;
	width: 293.33px;
	height: 194px;
	float: left;
	clear: none;
	background-color: #e9f5db;
	background-repeat: no-repeat;
	background-position: -20px 0;
	background-attachment: scroll;
	margin: 0;
	border: 5px solid #8a8; 
	border-radius: 10px;
	color: black; 
	text-decoration: none; 
}

a.welcome_box p
{
	margin: 15px 10px 15px 150px;
	font-family: minion-pro, serif;
	font-variant-numeric: oldstyle-nums;
	font-feature-settings: "onum";
	font-size: 0.8rem;
	line-height: 1.3; 
	font-weight: 400;
	color: black; 
	text-decoration: none; 
}

a.welcome_box p strong 
{
	font-weight: 700;
	font-style: normal;
}

a.welcome_box p.action 
{
	color: #369; 
	text-transform: lowercase; 
	font-variant: small-caps; 
	font-feature-settings: "smcp"; 
}

a.welcome_box:hover 
{
	border-color: #702d3d; 
	background-position: 0 0;
	transition: 0.5s; 
}

/*
===============================
PLANT PROPAGATION
===============================
*/

nav#plant_propagation_list a.species
{
	display: block;
	border: 0;
	width: 285px;
	height: 450px;
	margin: 30px 30px 0 0;
	padding: 0; 
	float: left;
	clear: none;
	color: #1c5a7c;
	background-color: #c3dae7;
	border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	border-bottom: none !important;
}

nav#plant_propagation_list a.species:hover, 
nav#plant_propagation_list a.species:hover em
{
	color: white !important;
	background-color: #702d3d;
	border-bottom: none !important;
}

nav#plant_propagation_list a.species:nth-of-type(2n) { margin: 30px 0 0 0; }

nav#plant_propagation_list a.species img
{
	display: block;
	width: 285px;
	height: 285px;
	margin: 0 !important; 
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

nav#plant_propagation_list a.species div.species_english_name
{
	display: block;
	width: 265px;
	min-height: 30px;
	margin: 20px 10px 0 10px;
	font-family: garamond-premier-pro, serif;
	font-weight: 400;
	font-size: 1.2rem;
	line-height: 1.5;
}

nav#plant_propagation_list a.species div.species_scientific_name
{
	display: block;
	width: 265px;
	margin: 10px 10px 0 10px;
	font-family: garamond-premier-pro, serif;
	font-weight: 400;
	font-size: 0.8rem;
	line-height: 1.5;
}

nav#plant_propagation_list a.species div.species_scientific_name em { border: 0 !important; }

main#plant_propagation_single_view img
{
	display: block;
	width: 600px;
	height: 600px;
	margin: 45px 0 0 0;
}

main#plant_propagation_single_view h2.species_scientific_name
{
	display: block;
	margin: 10px 10px 0 10px;
	font-family: garamond-premier-pro, serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 25px;
}


main#plant_propagation_single_view h3.species_info_heading
{
	margin: 45px 0 5px 0;
	padding: 0 0 0 0;
	border-bottom: 1px solid #c0d6ca;
}

main#plant_propagation_single_view div.species_info_html p:first-of-type { margin: 0; }

/*
===============================
JOURNAL
===============================
*/

main#journal_list_view h4 {
	margin: 45px 0 10px 0; 
}

div.journal_date,
div.journal_categories, 
div.next_previous
{
	margin: 0 30px; 
	font-family: adelle-sans, sans-serif;
	font-size: 0.7rem;
	line-height: 1.5;
}

div.next_previous {
	margin: 30px 0 0 0;
}

/*
===============================
PAYPAL
===============================
*/

div#PayPal {
	display: block; 
	margin: 45px 30px 30px 30px; 
	border: 1px solid #8a8; 
	padding: 45px; 
}

div#PayPal div#invoiceidDiv, 
div#PayPal p#invoiceidError {
	display: none; 
}

div#PayPal p {
	margin: 10px 0 0 0 !important; 
}

div#PayPal label {
	display: block; 
	margin: 0 0 10px 0; 
}


/* ==================== RESPONSIVE DESIGN */

@media screen and (max-width : 910px)
{
	nav#subnav_after_topnav, 
	a.editlink, 
	a.edit, 
	article table span.fileinfo { display: none; }

	div#welcome_boxes {
		width: auto !important; 
		max-width: 100% !important; 
		margin: 5px 0; 
	}

	header#full_site, 
	nav#topnav, 
	nav#topnav ul#ul_topnav, 
	div#content_and_sub_navigation, 
	div#content_and_footer_containter, 
	div#content_and_footer_containter_wide, 
	main, 
	article, 
	footer
	{
		width: auto !important; 
		max-width: 670px !important; 
		float: none; 
	}

	article div.wp-caption, 
	article img, 
	article select {
		width: auto !important; 
		max-width: 100% !important; 
		height: auto; 
	}

	article table, 
	article table tbody, 
	article table tbody tr {
		max-width: 100% !important; 
	}

	img#menu_button
	{
		display: block !important;
		width: 90px;
		margin: 15px auto;
	}
	
	nav#topnav
	{
		display: none;
		clear: both;
		margin-bottom: 30px;
	}
	
	ul#ul_topnav li
	{
		float: none;
		clear: both;
		width: 100%;
	}
	
	ul#ul_topnav li a.topnav_link, 
	ul#ul_topnav li.current_page_item a.topnav_link
	{
		display: block;
		width: calc(100% - 50px);
		height: auto !important;
		margin: 10px 0 0 0;
		padding: 10px 25px;
	}
	
	ul#ul_topnav li a.topnav_link { background: rgb(82,119,133); }
	ul#ul_topnav li.current_page_item a.topnav_link { color: #7da7c4; }
	
	ul#ul_subnav_within_topnav
	{
		display: block;
		width: calc(100% - 50px);
		float: left;
		margin: 0 0 0 50px;
		padding: 20px 0 30px 0;
		border: 0;
		background-color: #257;
		background: linear-gradient(0deg, rgba(34,85,119,1) 75%, rgba(17,68,102,1) 100%);
		border-bottom-left-radius: 12px;
	}
	
	ul#ul_subnav_within_topnav li a, 
	ul#ul_subnav_within_topnav li.current_page_item a,
	ul#ul_subnav_within_topnav li ul.children,
	ul#ul_subnav_within_topnav li ul.children li a,
	ul#ul_subnav_within_topnav li.current_page_item ul.children li a { 
		height: auto !important; 
	}

	div.person_header_container {
		flex-direction: column; 
		gap: 0; 
	}

	article div.person img.size-large {
		width: 100% !important; 
	}

}

@media screen and (max-width : 600px)
{

	header#full_site
	{
		background-image: url(images/GOERT-web-top-banner-2021-narrow.jpg);
		background-position: bottom center; 
		background-size: 100% auto;
	}

	div#welcome_boxes a.welcome_box {
		display: block; 
		float: none; 
		clear: both; 
		margin-left: auto !important; 
		margin-right: auto !important; 
	}

}