/* CSS Code | CrustFungi.Com */


/*-------------------------*/
/* Themes */

/* original */
/*:root {
	--nav_background: #ededed;  
	--nav_text: #2E2E2E;  
	--nav_text_hover: white; 
	--nav_text_hover_background: teal;
	--nav_border: #ccc;
	--content_h1: darkslategray;
	--content_h2: teal;
	--content_h3: teal;
	--content_a: #bc1b3e;
	--content_a_hover: #f86787;
}*/

/* watermelon */
:root {
	--body_background: #bbbbbb;
	--nav_background: #f4efe9;
	--nav_text: #414141;
	--nav_text_hover: white;
	--nav_text_hover_background: #056571;
	--nav_border: #ccdfcb;
	--content_background: white;
	--content_h1: darkslategray;
	--content_h2: #056571;
	--content_h3: #ff615c;
	--content_a: #ff615c;
	--content_a_hover: #ccdfcb;
}


/*-------------------------*/
/* Fonts */

@font-face {
	font-family: "Peich";
	src: url("/css/fonts/peich/peich.otf");
}

@font-face {
	font-family: "Roboto-Regular";
	src: url("/css/fonts/roboto/roboto-regular.ttf");
}

@font-face {
	font-family: "Roboto-Italic";
	src: url("/css/fonts/roboto/roboto-italic.ttf");
}

@font-face {
	font-family: "Roboto-Thin-Italic";
	src: url("/css/fonts/roboto/roboto-thin-italic.ttf");
}


/*-------------------------*/
/* Responsive Formatting */

body {
	margin: 0px;
}

* {box-sizing: border-box;}

/* Extra small devices (phones, 600px and down) */
/* Responsive top navigation: https://www.w3schools.com/howto/howto_js_topnav_responsive.asp */
/* Sticky top navigation: https://www.w3schools.com/css/css_navbar.asp */
@media only screen and (max-width: 600px) {
	.nav {
		overflow: hidden; /* This is necessary so that the page content is below the navigation bar */
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
	.nav #logo, .nav #copyright {
		display: none;
	}
	.nav a {
		float: left; /* Adding float: left; to a display: block; element makes it act more like an inline element */
		display: block; /* With float: left; specified, this display rule seems redundant */
		padding: 11px;
	}
	.nav a:not(:first-child) {
		display: none;
	}
	.nav a.nav-icon {
		float: right;
		display: block;
	}
	.nav.responsive {
		position: relative;
		position: -webkit-sticky;
		position: sticky;
		top: 0;
	}
	.nav.responsive a {
		float: none;
		display: block;
		text-align: left;
	}
	.nav.responsive .nav-icon {
		position: absolute;
		right: 0;
		top: 0;
	}
	.index-content-new-entry {
		margin: 10px 0px;
	}
	.introduction-flex-container {
		flex-wrap: wrap;
	}
	.introduction-flex-content {
		margin-bottom: 10px;
	}
	.species-flex-child img {
		width: 100%;
	}
	.species-description-content {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}
	.species-description-images {
		margin: 20px 0px;
	}
	.literature table {
		display: block;
		max-width: -moz-fit-content;
		max-width: fit-content;
		margin: 0 auto;
		overflow-x: auto;
		white-space: nowrap;
	}
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 601px) {
	.nav {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		display: flex;
		align-items: center;
	}
	.nav #copyright,#logo p {
		display: none;
	}
	.nav #logo img {
		width: 60px;
		opacity: .9;
		height: auto;
		filter: var(--logo_filter);
		padding: 0px 5px;
	}
	.nav a {
		float: left;
		display: block;
		padding: 11px;
	}
	.nav .nav-icon {
		display: none;
	}
	.index-content-flex-container {
		display: flex;
		flex-direction: row;
	}
	.index-content-new-entry {
		margin: 10px 0px 0px 30px;
	}
	.introduction-flex-container {
		flex-wrap: nowrap;
	}
	.introduction-flex-content {
		margin: 0px 10px;
	}
	.species-flex-child img {
		width: 300px;
	}
	.species-description-content {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
	}
	.species-description-text {
		flex-basis: 100%;
	}
	.species-description-images {
		margin: 20px 0px 0px 30px;
		flex-basis: 50%;
	}
} 

/* Medium devices (landscape tablets, 900px and up) */
@media only screen and (min-width: 900px) {
	.body-flex-container {
		display: flex;
	}
	.nav {
		flex: 0 0 200px;
		height: 100vh;
		display: flex;
		flex-direction: column;
		overflow: auto;
		align-items: stretch;
	}
	.nav #logo, .nav #links, .nav #copyright {
		display: block;
	}
	.nav #logo {
		padding-top: 25px;
		padding-bottom: 25px;
	}
	.nav #logo img {
		width: 180px;
		opacity: .8;
		height: auto;
		display: block;
		margin-left: auto;
		margin-right: auto;
		padding-top: -2px;
		padding-bottom: 10px;
		filter: var(--logo_filter);
	}
	.nav #logo p {
		display: block;
		font-size: 50px;
		text-align: center;
		color: var(--nav_text);
		margin: 0;
		padding: 5px;
		line-height: .5;
	}
	.nav a {
		float: none;
		text-align: left;
		padding: 10px 0px 10px 42px;
		line-height: 1;
	}
}  

/* Large devices (laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	body {
		background-color: var(--body_background);
	}
	.body-flex-container {
		display: flex;
		margin: 0 auto;
		width: 1200px;
		background-color: var(--content_background);
	}
	.content {
		width: 1000px;
	}
}


/*-------------------------*/
/* Sidebar */

.nav {
	background-color: var(--nav_background);
	font-family: Peich, Arial, sans-serif;
	z-index: 2;
}

.nav a {
	color: var(--nav_text);
	text-decoration: none;
	font-size: 28px;
}

.nav a:hover {
	color: var(--nav_text_hover);
	background-color: var(--nav_text_hover_background);
	}

.nav .nav-icon {
	padding: 0px; /* This ensures that the menu icon container doesn't have any clickable space that doesn't animate the icon */
	margin-right: 4px;
}

.menu {
	display: inline-block;
	cursor: pointer;
	margin-bottom: -7px; /* This is to prevent the menu from having extra space due to the 6px margins of the nav icon bars (see below), which is clickable but doesnt animate */
	padding: 6px; /* More padding leads to more clickable space */
}

.menu:hover {
	background-color: var(--nav_background);
}

.bar1, .bar2, .bar3 {
	width: 35px;
	height: 5px;
	background-color: var(--nav_text);
	margin: 6px 0;
	transition: 0.4s;
}

.menu:hover .bar1, .menu:hover .bar2, .menu:hover .bar3 {
	background-color: var(--nav_text_hover_background);
}

.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-9px, 6px);
	transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
	opacity: 0;
}

.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-8px, -8px);
	transform: rotate(45deg) translate(-8px, -8px);
}

.nav #copyright {
	flex-shrink: 0;
	margin-top: auto;
}

.nav #copyright p {
	font-size: 18px;
	color: var(--nav_text);
	border-top: 4px solid var(--nav_border);
	vertical-align: bottom;
	text-align: center;
	padding-top: 10px;
}


/*-------------------------*/
/* Site-wide Content Formatting */

.content {
	padding-left: 25px;
	padding-right: 25px;
	display: flex;
	flex-direction: column;
	font-family: Roboto-Regular, Arial, sans-serif;
}

.content h1 {
	color: var(--content_h1);
	border-bottom: 4px solid var(--nav_border);
	padding-bottom: 5px;
	margin-bottom: 5px;
}

.content h2 {
	font-size: 20px;
	color: var(--content_h2);
}

.content h3 {
	margin-top: 25px;
	font-size: 15px;
	color: var(--content_h3);
}

.content p {
	font-size: 15px;
	line-height: 25px;
	color: var(--nav_text);
}

.content blockquote {
	font-size: 15px;
	line-height: 25px;
	color: var(--nav_text);
	border-left: 3px solid var(--content_h3);
	padding-left: 10px;
}

.content a {
	color: var(--content_a);
}

.content a:hover {
	color: var(--content_a_hover);
}

.content strong {
	color: var(--content_h2);
}

.content ul {
	margin-top: -10px;
	font-size: 15px;
	line-height: 25px;
	color: var(--nav_text);
}

.content hr {
	border: 1px solid var(--nav_border);
}

.content ol {
	font-size: 15px;
	line-height: 25px;
	color: var(--nav_text);
}


/*-------------------------*/
/* Index */

.index-banner-flex-container {
	display: flex;
	margin: 0 -22.5px;
}

.index-banner-column {
	flex: 25%;
	padding: 5px 2.5px;
}

.index-content-text {
	flex: 1;
	text-align: justify;
}

.index-content-new-entry {
	align-self: flex-start;
	flex-basis: 100%;
	flex: 1;
}

.index header {
	background: white;
	z-index: 1;
}

.index-content-new-entry img {
	width: 100%;
	border-radius: 10px;
	border: 5px solid var(--nav_border);
}

.index-content-new-entry p {
	margin: -3px 0;
}

#donate {
	text-align: center;
	margin-top: -5px;
}


/*-------------------------*/
/* Introduction */

.introduction-flex-container {
	display: flex;
	flex-direction: row;
	margin: 20px -10px 20px -10px;
}

.introduction-flex-content {
	display: flex;
	flex-direction: column;
	background-color: var(--nav_border);
	border-radius: 5px;
	padding: 10px;
}

.introduction-flex-content img {
	width: 100%;
	height: auto;
	border-radius: 5px;
}

.introduction-flex-content p {
	margin: auto;
	padding: 5px;
}

.introduction-fig-description {
	margin: -10px 0 20px 0px;
}

.introduction-fig-description p {
	font-size: 14px;
}


/*-------------------------*/
/* Key */

.key-container {
	display: flex;
	flex-direction: column;
}


/*-------------------------*/
/* Species */

.species-filters {
	position: -webkit-sticky;
	position: sticky;
	top: 0px;
	z-index: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	background-color: white;
	padding-top: 5px;
	padding-bottom: 5px;
}

.species-filters-buttons button {
	border: none;
	outline: none;
	padding: 12px 16px;
	background-color: var(--content_a);
	color: var(--nav_text_hover);
	cursor: pointer;
	font-size: 16px;
	border-radius: 4px;
}

.species-filters-buttons button:hover {
	background-color: var(--content_a_hover);
}

.species-filters-buttons .active {
	background-color: var(--content_a_hover);
}

.species-flex-parent {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	margin-left: -12px;
	margin-right: -12px;
}

.species-flex-child {
	display: flex;
	flex-direction: column;
	margin: 12px;
	text-align: center;
}

.species-flex-child p {
	margin: 0;
	align-content: center;
}

.species-flex-child a img:hover{
	opacity: .75;
}

#species-list-view {
	display: none;
}

.species-family {
	margin-left: 15px;
}

.species-species {
	margin-left: 30px;
}


/*-------------------------*/
/* Literature */

.literature table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
	border: 2px solid var(--nav_border);
	counter-reset: rowNumber; /*part of code to automatically number row*/
	margin-bottom: 12px;
	margin-top: 12px;
}

.literature th {
	color: var(--content_h2);
	background-color: var(--nav_border);
	font-size: 20px;
}

.literature th, .literature td {
	text-align: left;
	padding: 10px 20px;
}

.literature td {
	line-height: 25px;
}

.literature td img {
	height: 25px;
}

.literature td img:hover {
	opacity: .5;
}

.literature tr:nth-child(even) {
	background-color: var(--nav_background);
}

.literature tr:not(:first-child) {
	counter-increment: rowNumber; /*part of code to automatically number row*/
} 

.literature tr td:first-child::before {
	content: counter(rowNumber); /*part of code to automatically number row*/
	min-width: 1em;
	margin-right: 0.5em;
	font-size: 15px;
	color: var(--content_h2);
	font-weight: bold;
} 


/*-------------------------*/
/* Species Profiles */

.banner {
	margin-left: -25px;
	margin-right: -25px;
}

.banner img {
	width: 100%;
	height: auto;
	opacity: .75;
	filter: alpha(opacity = 0.75); /* For IE8 and earlier */
}

.species-description header {
	border-bottom: 4px solid var(--nav_border);
}

.species-description h1 {
	border-bottom: 0px;
}

.species-description #common-name{
	margin-top: 0;
	font-size: 24px;
	color: var(--content_a);
}

.species-name {
	color: var(--content_h1);
}

.taxonomy {
	margin-top: -10px;
}

.taxonomy img {
	vertical-align: middle;
	padding-left: 10px;
}	

.taxonomy p {
	color: var(--content_h2);
}

.species-description-text {	
	text-align: justify;
	position: -webkit-sticky;
	position: sticky;
	align-self: flex-end;
	bottom: 0;
}

.species-description-text h2 {	
	margin-top: 25px;
}

.species-description-images img { 
	width: 100%;
	height: auto;
}

.species-description-images p { 
	font-size: 14px;
	line-height: 1.5;
	margin-top: 0px;
	margin-bottom: 20px;
}

.species-description-footer {
	margin-top: 25px;
	font-family: Roboto-Thin-Italic;
}

.species-description-footer p {
	color: var(--content_h2);
	font-weight: bold;
}


/*-------------------------*/
/* Dichotomous Keys */

/* formatting modified from: https://codepen.io/Kseso/pen/AwRYgZ */
/* rather than actually making a line, a dotted border is shifted so it looks like a dotted line */
/* and white background over the text hides it when there's text */

.dichotomous-key p {
	position: relative;
	background-color: white;
	padding-right: 150px; /* this determines how much space there is from the right before the couplet description breaks to form a new line, if the number is too small the text will go behine the couplet value */
	margin: 0;
}

.dichotomous-key p:before {
	content: '';
	position: absolute;
	bottom: 8px; /* this determines the position of the dotted line */
	width: 100%;
	border-bottom: 2px dotted var(--nav_text);
}

.couplet-description {
	position: relative;
	background-color: white;
	display: inline;
	z-index: 1;
	padding-right: 4px;
}

.couplet-value {
	background-color: white; /* necessary to hide the line dotted background line */
	position: absolute;
	bottom: 0;
	right: 0;
	padding-left: 4px; /* sets the white space to the left of the text, changing how much of the line is shown */
	text-align: right;
	z-index: 2;
}