/*
CSS theme for the Blue Wall Birding Festival 
Author:         Jeff Click
Version:        1.0
Date:			Jan 27, 2020

Derived from GCBC CSS and original BWBF website; really needs additional cleanup.

NOTES ON COLORS:
  Background / area / border colors:
	#BABEC2 - Body background color.  Used as the neutral gray of the background OUTSIDE the section of the pages with text.  Only visible on larger screens.
	# - Header (title) background.
	# - Top navigational bar.
	# - Navigational button HOVER color.
	#E6EAF0 - Section (main area) background.  Light grey - slight hint of blue... apparently.
  Font colors:
	

NOTES ON FONTS AND FONT SIZES:
	- Open Sans - Used for paragraph text and within <h4> and <h5> for descriptive text, at 400 wt.  Also used in navigational buttons at 600 weight, all caps.  <p> sized at 0.9375 em; text within headers sized to hit the same target based on inherited sizes.
	- Roboto - Used for <h4> and <h5> at 700 wt and at 400 wt / italic for included notes.
	- Spectral SC - Used for <h1> at 400 wt and <h3> at 500 wt.
	- Spectral - Used for <h2>.

NOTES ON SCREEN-SIZE BREAKPOINTS:
	Breakpoints selected for website content and not for specific devices.  Breakpoints are:
	- Below ??? px (probably 550 or 600): For tiny screens / phones in portrait
		- 

NOTES ON IMAGES, MAPS, ETC.:


NOTES ON MAKING INTERNET EXPLORER WORK:
	No idea yet.
*/

body
	{background-color:#BABEC2;max-width:768px;margin-left:auto;margin-right:auto;margin-top:0px;margin-bottom:0px;display:grid;font-size:100%}

*	{box-sizing: border-box}
				
h1		{color:#ffffff;font-family:Spectral,serif;font-weight:400;font-size:2.5em;margin-top:8px;margin-bottom:6px;line-height:1em;text-align:center}
h2		{color:#565858;font-family:Roboto,sans-serif;font-weight:600;font-size:1.5em;line-height:1em;margin-bottom:8px;}
h3		{color:#454747;font-family:'Open Sans',sans-serif;font-weight:600;font-size:1.25em;}
h4		{color:#545a5f;font-family:'Open Sans',sans-serif;font-weight:600;font-size:0.85em;}
h5		{color:#545a5f;font-family:Roboto,sans-serif;font-weight:400;font-size:0.6875em;text-align:center;margin-top:0;font-style:italic;}
h6		{color:#ffffff;font-family:Spectral,serif;font-weight:400;;font-size:1.25em;text-align:center;margin-top:2px;margin-bottom:8px;font-style:italic;}
p		{color:black;font-family:Spectral,sans-serif;font-weight:400;font-size:1.05em;}
	
a:link    {color:#0000FF; background-color:transparent; text-decoration:none;}
a:visited {color:#0000b2; background-color:transparent; text-decoration:none;}
a:hover   {color:#00B200; background-color:transparent; text-decoration:underline;}
a:active  {color:#ff0000; background-color:transparent; text-decoration:underline;}


ul.nav {
list-style-type: none;
margin-top: 0%;
margin-bottom: 0%;
padding: 0;
overflow: hidden;
background color: #6F847A;
}

li.navbut {
float: left;
}

li.navbut a {
display: block;
color: #eef2f7;
padding-top: 14px;
padding-bottom: 14px;
background-color: #6F847A;
text-align: center;
text-decoration: none;
border-left:1px solid;
border-left-color:#9eaea6;
font-family:'Open Sans',sans-serif;font-weight:600;font-size:1.0em;
}

li.navbut:last-child a {	
border-right:1px solid;
border-right-color:#9eaea6;
}

li.navbut a:hover {
background-color: #c7d1cc;
color: #0000ff;
}

ul.details	{color:black;font-family:Spectral,sans-serif;font-weight:400;font-size:0.9375em;}

.subsect	{border-bottom-style:solid;
			border-bottom-width:2px;
			border-bottom-color:#006600;
			}

.trip		{border-bottom-style:solid;
			border-bottom-width:1px;
			border-bottom-color:#a0a6ab;
			padding-bottom:15px;
			margin-bottom:30px;
			}

.triplast	{padding-bottom:15px;
			margin-bottom:30px;
			}

.tripdesc	{padding-left:25px;}

.desktop	{max-width:100%}
.handheld	{max-width:100%}

.welcome	{
			padding-top:0px;
			margin-top:15px;
			margin-bottom:0;
			color:green;
			font-weight:300;
			font-size:3.0em;
			text-align:center;
			}

.row::after	{
			content: "";
			clear: both;
			display: table;
			}

.col-50		{
			width:50%;
			float:left;
			display:inline-block;
			margin-left:30px;
			margin-right:30px;
			border-width:1px;
			border-color:black;
			}
			
.col-45L	{
			width:45%;
			float:left;
			display:inline-block;
			}
			
.col-45R	{
			width:45%;
			float:right;
			display:inline-block;
			}
			
.col-25R	{
			width:25%;
			float:right;
			display:inline-block;
			}	
			
.col-65L	{
			width:65%;
			float:left;
			display:inline-block;
			}

.loc-title		{
			display:block;
			margin-top:0;
			}
			
.loc-note-div	{
			display:inline-block;
			margin:0;
			padding:0;
			}
			
.loc-note		{
			float:left;
			margin-left:25px;
			margin-right:45px;
			margin-bottom:15px;
			display:inline-block;
			color:#545a5f;
			font-family:Roboto,sans-serif;
			font-weight:300;
			font-size:0.8em;
			padding-top:0;
			padding-bottom:0px;
			}

.loc-desc		{
			margin-top:0;
			}
			
.location-note-div	{
			float:left;
			width:100%;
			padding:0;
			margin:0;
			}
			
.location-note	{
			padding-left:25px;
			padding-right:25px;
			display:block;
			color:#545a5f;
			font-family:Roboto,sans-serif;
			font-weight:300;
			font-size:0.8em;
			margin-top:0px;}

.w-0900		{width:9.0%}
.w-1000		{width:10.0%}
.w-1250		{width:12.5%}
.w-1350		{width:13.5%}
.w-1500		{width:15.0%}
.w-2000		{width:20.0%}
.w-3333		{width:33.33%}

.menubutton-hh {
			background-color: #6F847A;
			border: none;
			color: #eef2f7;
			padding: 10px 0px;
			text-align: center;
			text-decoration: none;
			display: inline-block;
			font-family:'Open Sans',sans-serif;
			font-weight:600;
			font-size: 1em;
			width: 100%;
			}
			
.menubutton-hh:link    {color:#eef2f7; background-color:transparent; text-decoration:none;}
.menubutton-hh:visited {color:#eef2f7; background-color:transparent; text-decoration:none;}
.menubutton-hh:hover   {color:#0000ff; background-color:#c7d1cc; text-decoration:none;}
.menubutton-hh:active  {color:#0000ff; background-color:#c7d1cc; text-decoration:none;}

.navbtn-hh	{
			width: 20%;
			}

.navbut-hh	{
			display: block;
			color: #eef2f7;
			padding-top: 14px;
			padding-bottom: 14px;
			background-color: #264d73;
			text-align: center;
			text-decoration: none;
			font-family:'Open Sans',sans-serif;font-weight:600;font-size:0.85em;
			}

.dropdown 	{
			position: relative;
			display: inline-block;
			}
			
.dropbtn 	{
			}
			
.dropdown-content {
			display: none;
			position: absolute;
			right: 0;
			background-color: #f9f9f9;
			min-width: 160px;
			text-align: left;
			box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
			padding: 0;
			z-index: 1;
			overflow: auto;
			}

.menuitem	{
			display:block;
			color: black;
			padding: 6px 12px;
			text-decoration: none;
			font-family:'Open Sans',sans-serif;
			font-weight: 400;
			font-size: 0.9em;
			}

.menuitem:visited	{color:black;}
			
.menuitem:hover		{color: #0000ff;background-color: #d8e5f3;text-decoration: none;}

.dropdown:hover .dropdown-content {display: block;}

.cbcmap		{margin-left:5%;margin-right:5%;height:800px;max-width:100%}

.h4desc		{font-family:'Open Sans',sans-serif;font-weight:400;font-size:0.8333em;color:black;font-style:normal;}
.h4desc-full	{font-family:'Open Sans',sans-serif;font-weight:400;color:black;font-style:normal;}
.h4tripnote	{font-weight:300;font-style:italic;font-size:0.9778em;color:#484d51;}

.h5desc		{font-family:'Open Sans',sans-serif;font-weight:400;font-size:0.9375em;color:black;font-style:normal;}
.h5tripnote	{font-weight:300;font-style:italic;font-size:0.9778em;color:#484d51;}

.report		{font-family:'Open Sans',sans-serif;font-weight:600;font-size:0.9375em;color:black;margin-left:25px;}

.indent		{padding-left: 25px;}

.rednote	{color:#e60000}


#header-handheld {
	max-width:470px;
	background-color:#9eaea6;
	text-align:center;
	padding:1px;
	}	
#header-desktop {
	background-color:#9eaea6;
	text-align:center;
	padding:1px;
	}	
#navbar {
	line-height:13px;
	background-color:#6F847A;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	text-align:center;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:0%;
	padding-right:0%;
	}
#navbar-handheld	{
	background-color:#6F847A;
	position: -webkit-sticky; /* Safari */
	position: sticky;
	top: 0;
	text-align:center;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:0%;
	padding-right:0%;
	}

#section {
	background-color:#E6EAF0;
	max-width:768px;
	height:100%;
	float:left;
	padding-left:8%;
	padding-right:8%;
	}

	
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	h1	{font-size:27px}
	h2	{font-size:21px}
	h3	{font-size:20px}
	h4	{font-size:18px}
	h5	{font-size:16px}
	p	{font-size:15px}
	
	.report			{font-size:15px}
	li.navbut a		{font-size:13.6px}
}
	
@media only screen and (max-width: 470px)	{
	#header-desktop {display:none;}
	#navbar-handheld	{max-width:470px;}
	#navbar 	{display:none;}
	#section 	{max-width:470px;
				padding-left:15px;
				padding-right:15px;
				}
	li.navbut a {font-size:1.0em;
				border:none;
				}
	.cbcmap		{display:none;}	
	.desktop	{display:none;}
	li.navbut 	{width:20%;}
	.welcome	{font-size:2em;}
	[class*="col-"]
				{width: 100%;
				margin:0;
				padding:0;}
}
	
@media only screen and (min-width: 470px) and (max-width: 740px)	{
	#header-handheld {display:none;}
	#navbar 	{display:none;}
	#section 	{max-width:740px;
				padding-left:15px;
				padding-right:15px;
				}
	li.navbut a {font-size:1.0em;
				border:none;
				}
	.location-note	{
				display:inline-block;}
	.cbcmap		{display:none;}	
	.desktop	{display:none;}
	}		
	
@media only screen and (max-width: 992px) and (min-width: 740px)	{
	body		{max-width:992px;}
	#header-handheld {display:none;}
	#navbar-handheld	{display:none;}
	#navbar		{max-width:100%;
				padding-left:0%;
				padding-right:0px;
				}
	#section	{max-width:100%;
				padding-left:5%;
				padding-right:5%;
				}
	.handheld	{display:none;}
}	

@media only screen and (min-width: 992px)	{
	body		{max-width:992px}
	#header-handheld {display:none;}
	#navbar-handheld	{display:none;}
	#navbar		{max-width:100%;
				padding-left:5%;
				padding-right:5%;
				}
	#section	{max-width:992px;
				padding-left:8%;
				padding-right:8%;
				}
	.handheld	{display:none;}
}