#pagenotfound {														/* PARAGRAPH STYLE FOR 404.ASP */
	font-size: 28px;
	padding: 0px 150px;
	text-align: justify;
}
@font-face {														/* FONT CONTAINING SPEAKER (TREE NAME PRONUNCIATION) AND DOWNLOAD (WAYPOINTS DOWNLOAD) ICONS */
	font-family: icon;												/* change font-family in span.icon selector below when adjusting this */
	src: url(/fa-solid-900.woff2);									/* webfonts/fa-solid-900.woff2 from https://use.fontawesome.com/releases/v7.0.0/fontawesome-free-7.0.0-web.zip */
}
a,																	/* TEXT COLOR */
body,
div.dropdown button,
div.map button,
div.waypoints button {
	color: black;
}
a.icon,																/* REMOVE UNDERLINE FROM TREE NAME PRONUNCIATION AND WAYPOINTS DOWNLOAD ICONS, DROPDOWN MENU AND HOMEPAGE THUMBNAIL HYPERLIINKS, AND BOTTOM NAVIGATION BUTTONS */
div.dropdown-content a, 
div.navigation-bottom a,
div.thumbnail-container a,  
div.waypoints-content a {
	text-decoration: none;
}
area,																/* ELIMINATE BORDER UPON CLICK OF DIRECTORY BUTTONS AND MAP NUMBERS AND TOP NAVIGATION BAR BUTTONS */
div.dropdown button,
div.map button,
div.waypoints button {
	outline: none;
}
body {																/* BODY DEFAULT STYLES */
	background: #561E07 url(/home/background.jpg) fixed;			/* default background color, image, and position */
	border: 0px;													/* eliminate default border in Safari */
	font-family: verdana;											/* default font */
	font-size: 16px;												/* default font size */
	margin: 0px;													/* eliminate default margin in Safari */
	padding: 20px 0px;												/* change default padding in Safari: set window.scrollY > (195 + top paddding) in include_javascript.shtml when adjusting this */
	text-size-adjust: none;											/* disable text size adjustment for smartphones and tablets */
	user-select: none;												/* disable text selection */
	-khtml-user-select: none;										/* Konqueror */
	-moz-user-select: none;											/* Firefox */
	-ms-user-select: none;											/* Edge and Internet Explorer */
	-o-user-select: none;											/* Opera */
	-webkit-text-size-adjust: none;									/* Safari */
	-webkit-touch-callout: none;									/* Safari */
	-webkit-user-select: none;										/* Safari */
	&.bottomfade div.navigation-bottom-button,
	&.topfade div.map,
	&.topfade div.navigation-top,
	&.topfade div.shadows-homepage,
	&.topfade div.waypoints {
		opacity: 0.4;						 						/* fade top navigation bar, bottom navigation, and directory buttons upon scroll using include_javascript.shtml */
	}
	&.bottomfade div.navigation-bottom-button:hover,
	&.topfade div.map:hover,
	&.topfade div.navigation-top:hover,
	&.topfade div.shadows-homepage:hover,
	&.topfade div.waypoints:hover {
		opacity: 1.0;												/* unfade top navigation bar, bottom navigation, and directory buttons upon hover */
	}
}
div.buffer {														/* SPACE BETWEEN TOP NAVIGATION BAR AND FIRST TITLE, TREE THUMBNAIL TRAIT AND METRIC TEXT, AND CONTENT AND BOTTOM NAVIGATION ON HOMEPAGE */
	height: 7px;
}
div.directory {														/* DIRECTORY */
	border-top: 1px solid black;
	padding: 0px 23px 5px 23px;
	width: 980px;
	& p {
		text-align: justify;
		& img {														/* display directory numbers */
			float: left;
			margin: 2px 5px 0px 0px;
		}
	}
}
div.dropdown {														/* DROPDOWN MENUS */
	float: left;													/* display top navigation bar buttons */
	position: relative;
	& button {														/* top navigation bar dropdown buttons */
		border: 0px;												/* eliminate default button border in Safari */
		cursor: pointer;											/* use pointing hand cursor */
		font-size: 18px;											/* maximum font size for button = 20px */
		margin: 0px;												/* eliminate default button margin in Safari */
		padding: 0px;												/* eliminate default button padding in Safari */
		width: 256px;
	}
	&:first-child button {
		width: 258px;												/* widen Coast Redwoods menu */
	}
	&:hover div.dropdown-content {
		display: block;												/* display dropdown content upon hover */
	}
	&:last-child div.dropdown-content {
		left: -98px;												/* shift left and widen Redwood Parks menu */
		width: 354px;
	}
	&:nth-child(2) div.dropdown-content {
		width: 264px;												/* widen Giant Redwoods menu */
	}
}
div.dropdown:hover button,											/* EMBOLDEN TOP NAVIGATION BAR AND DIRECTORY DROPDOWN BUTTONS AND ALL HYPERLINKS (EXCEPT THOSE ON HOMEPAGE) UPON HOVER */
div.map:hover button,
div:not(.thumbnail-container) a:hover,
div.waypoints:hover button {
	text-shadow: 1px 0px 0px;
}
div.dropdown-content {												/* DROPDOWN MENUS CONTENT */
	display: none;													/* hide dropdown content until hover */
	max-height: 70vh;												/* dropdown menu length (% viewport height) */
	overflow: auto;													/* display dropdown scrollbars when necessary */
	position: absolute;
	width: 100%;													/* dropdown menu width = button width */
	& a {
		display: block;												/* display dropdown hyperlinks */
		padding: 0px 6px;
	}
}
div.dropdown-content,												/* SCROLLBARS */
html {
	@supports not selector(::-webkit-scrollbar) {					/* standard scrollbar (Firefox) */
		scrollbar-color: #E5CEB4 #FEFDFC;
		scrollbar-width: thin;
	}
	&::-webkit-scrollbar {											/* non-standard scrollbar width (Chrome, Edge,Opera, Safari) */
		width: 10px;
	}
	&::-webkit-scrollbar-thumb {									/* non-standard scrollbar thumb (Chrome, Edge, Opera, Safari) */
		background: #EFE1D1;
		border-radius: 5px;
		box-shadow: 0px 0px 2px inset;
	}
	&::-webkit-scrollbar-thumb:hover {								/* non-standard scrollbar thumb darken upon hover (Chrome, Edge, Opera, Safari) */
		background: #E5CEB4;
	}
	&::-webkit-scrollbar-track {									/* non-standard scrollbar track (Chrome, Edge, Opera, Safari) */
		background: #FEFDFC;
		box-shadow: 0px 0px 1px inset;
	}
}
div.dropdown button,												/* BACKGROUND COLOR */
div.dropdown-content,
div.map button,
div.map-content,
div.navigation-bottom-button,
div.shadows,
div.shadows-homepage,
div.thumbnail,
div.waypoints button,
div.waypoints-content {
	background-color: #F9F4EE;
}
div.dropdown-content,												/* SHADOWS */
div.map button,
div.map-content,
div.navigation-bottom-button,
div.photo,
div.shadows,
div.shadows-homepage,
div.thumbnail,
div.waypoints button,
div.waypoints-content {
	box-shadow: 		4px 4px 12px 0px rgba(0,0,0,0.5);			/* adjust box-shadow in div.thumbnail:hover when adjusting this */
	-webkit-box-shadow: 4px 4px 12px 0px rgba(0,0,0,0.5);			/* Safari */
}
div.dropdown-content:last-child,									/* BOTTOM PADDING FOR LAST HYPERLINK IN DROPDOWN MENUS */
div.waypoints-content:last-child {
	padding-bottom: 2px;
}
div.map {															/* DIRECTORY MAP */
	float: left;													/* required to display waypoints download dropdown */
	z-index: 1;														/* display directory map above waypoints download dropdown */
	&:hover div.map-content {
		display: block;												/* display directory map upon hover */
	}
}
div.map,
div.waypoints {
	margin-top: -40px;
	position: sticky;												/* stick map and waypoints download buttons upon scroll */
	position: -webkit-sticky;										/* Safari */
	top: 21px;
	& button {
		border: 0px;												/* eliminate default button border in Safari */
		border-radius: 5px;
		cursor: pointer;
		font-size: 24px;
		margin: 0px;												/* eliminate default button margin in Safari */
		padding: 5px 0px;
		width: 278px;
		& span {													/* MAP ICON */
			font-size: inherit;										/* increase font-size from 16px (span.icon) to 24 px (div.map button span and div.waypoints button span) */
			margin-right: 15px;										/* increase space after icon from 5px (span.icon) to 15 px (div.map button span and div.waypoints button span) */
		}
	}
}
div.map-content {													/* DIRECTORY MAP CONTENT */
	margin-left: -23px;												/* shift left map */
	padding: 23px;
	& img {
		border: 1px solid black;
	}
}
div.map-content,
div.waypoints-content {
	display: none;													/* hide map and waypoints download content until hover */
	position: absolute;
}
div.name {															/* PAGE NAME */
	font-size: 32px;
	padding-top: 15px;												/* add space between dropdown menu and page name */
	text-align: center;
}
div.navigation-bottom,												/* HOMEPAGE AND TOP AND BOTTOM NAVIGATION BARS SHADOWS CONTAINER */
div.navigation-top,
div.shadows-homepage {
	margin: auto;
	position: sticky;												/* stick top and bottom navigation bars upon scroll */
	position: -webkit-sticky;										/* Safari */
	width: 1026px;
}
div.navigation-bottom {												/* BOTTOM NAVIGATION BAR */
	bottom: 0px;													/* stick to bottom upon scroll */
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
div.navigation-bottom-button {										/* BOTTOM NAVIGATION BAR BUTTONS */
	padding: 2px 0px;
	text-align: center;
	width: 252px;
}
div.navigation-top {												/* TOP NAVIGATION BAR */
	top: 0px;														/* stick nanvigation bar upon scroll */
	height: 23px;
	z-index: 2;														/* display dropdown menus in front of bottom navigation bar buttons and directory buttons */
}
div.nearby,															/* LINE HEIGHT FOR NEARBY LISTS, GROVE/TREE LISTS, AND PARAGRAPHS */
li,
p {
	line-height: 1.5;
}
div.nearby span {													/* NEARBY FAMOUS REDWOODS INCLUDE LISTS */
	&:first-child:not(:nth-last-child(2))::after,
	&:not(:first-child):not(:last-child)::after {
		content: ',';												/* add ',' after first tree in lists with more than two trees and second through penultimate trees */
	}
	&:not(:first-child):not(:last-child)::before {
		content: ' ';												/* add ' ' before second through penultimate trees */
	}
	&:last-child::after {
		content: '.';												/* add '.' after last tree */
	}
	&:last-child::before {
		content: ' and ';											/* add ' and ' before last tree */
	}
}
div.panorama {														/* PANORAMAS */
	border: 0px;
	display: flex;
	flex-flow: wrap;
	justify-content: space-between;
}
div.photo-container {												/* DIRECT HYPERLINK PHOTOS */
	display: flex;
	justify-content: center;
}
div.section {														/* TREE/GROVE/PARK PAGE SECTIONS */
	border-top: 1px solid black;
	padding: 0px 23px 5px 23px;
	text-align: justify;
	width: 980px;
	& img:last-child {
		padding-bottom: 15px;										/* remove 5px from bottom padding of last image in each section to compensate for bottom padding of each section */
	}
}
div.section img,													/* BOTTOM PADDING FOR MAPS, PANORAMAS, PHOTOGRAPHS, AND LAST ROW OF HIKE TABLE */
table.hike tr:last-child td {
	padding-bottom: 20px;
}
div.shadows {														/* SHADOWS */
	margin: auto;
	width: 1026px;
}
div.shadows-homepage {												/* SHADOWS HOMEPAGE */
	top: -195px;													/* stick to top without logo visible */
	z-index: 1;														/* display top navigation bar in front of thumbnails on homepage */
}
div.thumbnail {														/* HOMEPAGE THUMBNAILS */
	font-size: 12px;
	height: 200px;
	margin-bottom: 7px;												/* space below thumbnails */
	text-align: center;	
	width: 200px;
	&:hover {														/* enlarge homepage thumbnails upon hover */
		box-shadow: 8px 8px 24px 0px rgba(0,0,0,0.5);				/* double shadow size upon hover: adjust box-shadow in grouped divs dropdown-content, etc. when adjusting this */
		transform: scale(1.02);
		transition-timing-function: ease-in;
		-webkit-box-shadow: 8px 8px 24px 0px rgba(0,0,0,0.5);		/* Safari */
		-webkit-transform: scale(1.02);								/* Safari */
	}
}
div.thumbnail-container {											/* HOMEPAGE THUMBNAILS AND TITLES */
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	margin: auto;
	width: 1026px;
}
div.waypoints {														/* WAYPOINTS DOWNLOAD DROPDOWN */
	float: right;
	&:hover div.waypoints-content {									/* display waypoints download dropdown menu upon hover */
		display: block;
	}
}
div.waypoints-content {												/* WAYPOINTS DOWNLOAD DROPDOWN CONTENT */
	padding: 0px 6px;
}
img.title {															/* HOMEPAGE TITLES */
	padding: 5px 143px;
}
img + p,															/* REMOVE DEFAULT PARAGRAPH TOP MARGIN BELOW MAPS AND YOSEMITE NATIONAL PARK EXPANSION TABLE */
table.yosemite + p {
	margin-top: 0;
}
mark, 																/* BACKGROUND COLOR FOR NEW TREES IN DIRECTORY AND RANKINGS */
#new {
	background-color: #B1E79B;
}
span.icon {															/* SPEAKER ICON FOR TREE NAME PRONUNCIATION AND DOWNLOAD ICON FOR WAYPOINTS DOWNLOAD*/
	font-family: icon;												/* change font-family in @font-face selector above when adjusting this */
	font-size: 16px;												/* icon size */
	margin-right: 5px;												/* space after icon */
}
sup {																/* SUPERSCRIPTS */
	font-size: 75%;													/* reduce superscript font size relative to that of parent text */
	vertical-align: top;											/* vertical alignment of superscripts */
}
table {																/* TABLES */
	width: 100%;
	border-collapse: collapse;
	&.champion td,													/* adjust Champion and Tree Metric table cells */
	&.tree td {
		height: 22px;
		padding: 0px;
		vertical-align: bottom;
	}
	&.champion td:nth-child(3),										/* right-align text in various table columns */
	&.champion td:nth-child(4),
	&.champion td:nth-child(6),
	&.champion td:nth-child(7),
	&.hike td:last-child,
	&.tree td:last-child {
		text-align: right;
	}
	&.champion td:nth-child(4),										/* left padding for various columns of Champions table */
	&.champion td:nth-child(7) {
		padding-left: 4px;
	}
	&.champion td:nth-child(2),										/* left padding for various columns of Champions table */
	&.champion th:nth-child(2) {
		padding-left: 3px;
	}
	&.champion td:nth-child(5),										/* left padding for various columns of Champions table */
	&.champion th:nth-child(3) {
		padding-left: 10px;
	}
	&.champion th,													/* Champions and Rankings table headers */
	&.rankings th {
		height: 22px;
		padding: 10px 0px;
		font-size: 18px;
	}
	&.champion tr:nth-child(odd),									/* background color for odd rows of Champions and Rankings tables */
	&.rankings tr:nth-child(odd) {
		background-color: #F2E8DB;
	}
	&.hike td:nth-child(1),											/* embolden text in various columns of Hike and Tree Metrics tables */
	&.hike td:nth-child(3),
	&.hike td:nth-child(6),
	&.tree td:nth-child(1),
	&.tree td:nth-child(4),
	&.tree td:nth-child(6) {
		font-weight: bold;
	}
	&.rankings td:first-child,										/* center-align text in first column and headers of Rankings table */
	&.rankings th {
		text-align: center;
	}
	&.rankings td:nth-child(2),										/* padding for various columns of Rankings table */
	&.rankings td:nth-child(3),
	&.rankings td:nth-child(4) {
		padding-left: 65px;
	}
	&.rankings th:first-child {										/* left-align text in first row first column of Rankings table */
		text-align: left;
	}
	&.tree th {														/* space between tree name and top of Tree Metrics table */ 
		height: 14px;												/* height of table header = space between grove/park name and top of notes */
	}
	&.yosemite {													/* Yosemite National Park expansion table */
		& td {
			padding-bottom: 15px;
		}
		& td:nth-child(1) {
			width: 16%;
			padding-top: 4px;										/* top padding added to align text in first column with exponents in third column */
		}
		& td:nth-child(2) {
			width: 25%;
			padding-top: 4px;										/* top padding added to align text in second column with exponents in third column */
		}
		& td:nth-child(3) {
			width: 59%;
			text-align: justify;
		}
		& tr:first-child > td:nth-child(3) {
			padding-top: 4px;										/* top padding added to align text in first row third column (no exponents) with text in adjacent columns */
		}
	}
}
td {																/* VERTICAL ALIGNMENT OF TABLE COLUMNS */
	vertical-align: top;
}
ul {																/* UNORDERED LISTS */
	margin: 0px;
	padding: 0px;													/* remove default padding */
	&.grove {
		list-style: inside disc url(/list_icon_grove.png);			/* display grove icons */
	}
	&.tree {
		list-style: inside disc url(/list_icon_tree.png);			/* display tree icons */
	}
}