/* 
		http://meyerweb.com/eric/tools/css/reset/ 
		v2.0 | 20110126
		License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}





/* 
		That's it for the "reset".  From here on is
		my own code.
		"GENERAL" stuff is used for all of my sites.
		"CUSTOM" stuff is for a specific instance...
*/


		
		
/* 	=========================================
		GENERAL COMMON SELECTORS
		========================================= */

		html, body {
			position: relative;
			height: 100%;
		}
				
		div#hero {
			
		}

		main {
			
		}
		
		section {
			width: 1200px;
			margin: 0 auto;
			position: relative;
		}
		
		header {}
		
		footer { padding: 0 2em; }		
		
		h1 {}

		h2 {
			font-size: 150%;
			font-weight: bold;
			margin-bottom: 1em;
		}

		h3 {}
		
		h4 {
			font-size: 100%;
			font-weight: bold;
			margin-bottom: .25em;
		}		

		p { margin-bottom: 1em; }
		b { font-weight: bold; }
		i { font-style: oblique; }

		a:link, a:visited, a:hover, a:active { color: blue; }
		a.grey:link, a.grey:visited, a.grey:hover, a.grey:active { color: grey; }
		a.black:link, a.black:visited, a.black:hover, 
		a.black:active { color: black; }
		
		hr {
			clear: both;
			border-style: none;			
			height: 0;
			border-top: 5px solid #fff;
			margin: 20px 0 5px 0;
		}


		ol {
			list-style: decimal;
			margin-left: 1.25em;			
		}
		
		ul {
			list-style: disc;
			margin-left: 1em;
		}		

		nav {
			margin: 12px 0 0 0;
			float: left;
			font-size: 200%;
			letter-spacing: 1px;
			font-weight: normal;
			font-family: 'Oswald', sans-serif; /* WILLFIX */
			color: #0972b9;
		}
	
		nav a:link, nav a:visited, nav a:hover, nav a:active {
			color: #0972b9; text-decoration: none;
		}	

		nav a.current {
			color: #000; text-decoration: underline;
		}	
		
		nav a:hover { text-decoration: underline; }
		nav table { margin-top: 18px; width: 930px; }
		nav table td { text-align: center; }


		footer nav { display: block; padding: 17px 0 20px 0; line-height: 1.4; }
		footer nav a:link, 
		footer nav a:visited, 
		footer nav a:hover, 
		footer nav a:active {
			color: #fff; 
			text-decoration: none;
			display: inline-block;
			float: left;
			padding-right: 40px;
			font-family: 'Oswald', sans-serif;
		}
		
		footer nav a:hover { text-decoration: underline; }
		
		
		


/* 	=========================================
		<< CUSTOM >> COMMON SELECTORS
		========================================= */

		html, body, footer {
			background-color: #006600;
		}	
		
		html, body {
			color: #000;
			font-size: 16px;
			line-height: 1.3;
			font-family: Verdana, Geneva, sans-serif;
		}
			
		header {
			background-color: #fff;	/* main bg color */
		}

				header section 		{ height: 110px; }

				footer section 		{ min-height: 600px; }
				
				div#hero section	{  }
		
				main							{ 
					background-color: #fff;
					border-top: 1px solid transparent; /* HACK */
				}

/* 	=========================================
		GENERAL SPECIFIC SELECTORS
		( used for all sites )
		========================================= */

		#version {
			position: absolute;
			bottom: 5px;
			right: 7px;
			font-size: 80%;
			/* color: #ffd300; */
			color: #bbb;
		}
		
		div.spinner {
			visibility: visible;
			width: 32px;
			height: 32px;
			line-height: 0;
			position: relative;
			top:-18px;
			right: 5px;
			display: inline-block;
			width: 0px;
		}

		div.spinner.active {
			background-image: url('../images/loading2.gif');
			display: inline-block;
			width: 32px;
		}
		
		#grill {
			display: none;
		}		

/* 	=========================================
		<< CUSTOM >> SPECIFIC SELECTORS
		( used this site specifically )
		========================================= */


	



/* 	=========================================
		GENERAL QUIRKY THINGS
		========================================= */

		/* quirky things */		
		.desktop_only {  }
		.mobile_only { display: none; }
		
		.no_select {
				user-select: none; /* supported by Chrome and Opera */
			 -webkit-user-select: none; /* Safari */
			 -khtml-user-select: none; /* Konqueror HTML */
			 -moz-user-select: none; /* Firefox */
			 -ms-user-select: none; /* Internet Explorer/Edge */
		}	
/*		^ .no_select prevents elements from highlighting
				see: https://www.arungudelli.com/tutorial/css/disable-text-selection-in-html-using-user-select-css-property/ 
*/		
		.break_long_words {
			overflow-wrap: break-word;
			word-wrap: break-word;
			word-break: break-all;
			word-break: break-word;
			hyphens: auto;
		}

		aside {
			background-color: #fff;
			padding: 11px 7px 7px 17px;
			box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5);
		}
		
		.oswald { font-family: 'Oswald', sans-serif; }
		.verdana { font-family: Verdana, Geneva, sans-serif; }
		.roboto { font-family: 'Roboto Slab', serif; }
		
		.grey, gray { color: #999; }
		.green 			{ color: rgb(140, 198, 63); }
		.blue				{ color: #009dcf; }
		.orange			{ color: #fc0; }
		.pink				{ color: #f26b8a; }
		/* WILLFIX: more colors here! */
		
		.icon_fix { position: relative; top: 5px;}
		
		.cover {
			background-size: cover;
		}
		
		h2.utility_header {
			border-top: 5px solid #000;
			clear: both; 
			padding: 12px 15px 14px 3px; 
			border-bottom: 5px solid #000;
			margin-bottom: 0;
		}
		
		div.utility_content {
			padding: 2em 0;
			minimum-height: 400px;
			font-size: 140%;
		}		
		
		div.utility_content h1 { font-size: 150%; margin-bottom: 1em;  }
		
		.hint {
			font-size: 80%;
			font-family: 'Roboto Slab', serif;
		}
		
		.orange_button {
			padding: 10px 15px;
			border-radius: 5px;
			font-size: 120%;			
			background-color: orange;
			border: 3px solid #000;
			color: #fff;
			font-weight: bold;
			box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5);
			cursor: pointer;			
		}			

		footer a.yellow:link, 
		footer a.yellow:visited, 
		footer a.yellow:hover, 
		footer a.yellow:active
		 { color: yellow ; display: inline-block; padding-top: 15px; }

		/* nav highlighting */
		footer nav a.current {
			text-decoration: underline;
		}



	
	
/* 	=========================================
		The MOTHER OF
				 ALL GRIDS !!!
		========================================= */	
		
.grid_1, .grid_2, .grid_3, .grid_4,
.grid_1x2, .grid_2x1 {
  display: grid;
  column-gap: 1.5em;
  margin-bottom: 1.5em;
}

.grid_1 { grid-template-columns: 1fr; }
.grid_2 { grid-template-columns: 1fr 1fr; }
.grid_3 { grid-template-columns: 1fr 1fr 1fr; }
.grid_4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.grid_1x2 { grid-template-columns: 11fr 16fr; }
.grid_2x1 { grid-template-columns: 16fr 11fr; }

.box {
	padding: 1em;
	position: relative;
	font-size: 150%;
}

div.top_gutter 			{ border-top: 1.5em solid transparent; }
div.bottom_gutter_mobile  { border-bottom: none; }		
section.bottom_gutter 	{ border-bottom: .2em solid transparent; }	
div.grid_img				{ padding-top: 85%; background-size: cover; }
div.align_centered 	{ text-align: center; padding: 1em 3em;	}
div.align_middle 		{ display: flex; flex-direction: column; justify-content: center; }
div.align_left 			{ text-align: left; padding: 2em 1em 2em 2em;	}


.box.striped { border-top: 20px solid #333; border-bottom: 20px solid #333; }
.box.dashed { border: 2px dashed #009dcf; }
	
	

.box h3, .box h4 { line-height: 1.0; }
.box h3 { margin: 0 0 .5em 0; font-size: 170%; font-weight: bold; }
.box h4 { margin: 0 0 .5em 0; font-size: 110%;  }		

.box.orange, .box.orange.striped  { background-color: #F2CA85; border-color: #D97448; }
.box.orange h3 { color: #D97448; }

.box.lt_green, .box.lt_green.striped  { background-color: #f4f8a5; border-color: #8cc63f; }
.box.lt_green h3 { color: #8cc63f; }

.box.lt_blue, .box.lt_blue.striped  { background-color: #8dcfec; border-color: #009dcf; }
.box.lt_blue h3 { color: #009dcf; }

.box.lt_grey, .box.lt_grey.striped  { background-color: #eeeeee; border-color: #999; }
.box.lt_grey h3 { color: #666; }

.box.pink, .box.pink.striped  { background-color: #fadde6; border-color: #e9658d; }
.box.pink h3 { color: #e9658d; }

.box.green, .box.green.striped  { color: #000; background-color: #8cc63f; border-color: #5a8d03; }
.box.green h3 { color: #5a8d03; }

.box.white  { background-color: #fff; 
	padding-top: .5em; padding-bottom: .5em; margin: 0 0 0 0; } 
	
.box.blank  { background-color: #fff; 
	padding-top: .5em; padding-bottom: .5em; margin: 1em 0 0 0; }  TWEAK: make same as "main" bg */
.box.blank h3, .box.blank h4 { color: #000; margin: 0; }

/* transparent and cards go together */
.box.transparent { margin: 0; padding: 0; }
.box.transparent .card {
	background-color: #ebebeb; padding: 1em 1em 1em 1em; 
	box-shadow: 1px 2px 13px 2px rgba(0,0,0,0.5);
	border: 5px solid #000; width: 70%; margin: 0 auto; }





/* 	=========================================
		CUSTOM HERO SECTION MUCKERY
		========================================= */
		div#hero {
			background-image: url('../images/hero_background_1.jpg');
			background-repeat:no-repeat;
			background-position: center center;
			background-size: cover;
		}
		
		div#hero section	{ 
			height: 600px; 
			display: flex;
			justify-content: center;
			align-items: center;			
		}
		
		#poster {
			display: inline-block;
			background-color: #fff;
			/* background: linear-gradient(45deg, #fff, #ececec); */
			box-sizing: border-box;
			color: #000;
			position: relative;
		}
		
		#poster div.sheet {
			display: inline-block;
			text-align: center;
			padding: 2.5em 3em 2.5em 3em;
			line-height: 1.3;
			font-size: 24px;
			box-shadow: 1px 2px 13px 2px rgba(0,0,0,0.5);
			position: relative;
		}

		/* SPONSORS GRID */

		#sponsors_grid {
			display: grid;
			grid-gap: 90px;
			grid-template-columns: repeat(auto-fill, 230px);
			margin-bottom: 2em;
		}

		#poster div.sheet #sheet_bee {
				position: absolute;
				left: 8px;
				top: 8px;
				width: 70px;
		}

		#sponsors_grid>* {
			background-color: transparent;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		
		#sponsors_grid img {
			width: 100%;
		}
		
		/* FOOTER GRID */	
		
		footer div.grid_3 div.box {
			font-size: 100%;
			/* background-color: green; */
			padding: 0;
			margin: 0;
			min-height: 100px;
			color: #fff;
		}
		
		footer table td {
			vertical-align: top;	
		}
		
		footer div.grid_3 a { 
			color: white; 
			text-decoration: none;
		}		
		
		/* https://stackoverflow.com/questions/63430483/how-to-make-this-facebook-svg-icon */
		.facebook_logo {
			fill: white;
			stroke: white;
			width: 44px;
			height: 80px;
			display: inline-block;
			position: relative;
			left: -10px; top: -14px; 
		}
		
		footer #debug {
			position: absolute;
			opacity: .1;
			color: #fff;
			right: -15px; bottom: 7px;
			text-align: right;
			line-height: 1.0;
			font-weight: normal;
		}
		
		footer #debug.active {
			opacity: 1;
		}		
		
		/* BACKGROUND DECORATIONS */

a#logo {
	background: url('../images/css_sprites_3g.png') -10px -1370px;
	background-position: -10 -1370px;
	display: inline-block;
	height: 100px;
	width: 250px;
	border: 5px solid #fff;
	float: left;
}
	
div#decoration_bee {
	background: url('../images/css_sprites_3g.png') -10px -100px;
	background-repeat: no-repeat;		
	background-position: -10 -100px;
	width: 70px; height: 62px;
	display: inline-block;
	position: absolute;
	left: 3px; top: 11px;	
}	
div#decoration_ecofest {
	background: url('../images/css_sprites_3g.png') -10px -10px;
	background-repeat: no-repeat;		
	background-position: -10 -10px;
	width: 250px; height: 70px;
	display: inline-block;
}
	
.decoration_sun {
	background: url('../images/css_sprites_3g.png') -10px -205px;
	background-repeat: no-repeat;		
	background-position: right -205px;
}		
.decoration_three {
  background: url('../images/css_sprites_3g.png') -10px -365px;
	background-repeat: no-repeat;
	background-position: -10 -365px;
}	

.decoration_one {
	background: url('../images/css_sprites_3g.png') -10px -568px;
	background-repeat: no-repeat;
	background-position: right -568px;
}	
.decoration_swirls {
	background: url('../images/css_sprites_3g.png') -10px -1839px;
	background-repeat: no-repeat;
	background-position: right -1839px;
}	
		
div.decoration_thankyou {
	background: url('../images/css_sprites_3g.png') -10px -1058px;
	background-repeat: no-repeat;		
	background-position: -10px -1058px;
	width: 300px; height: 143px;
	display: inline-block;
}		

div.decoration_envelope {
	background: url('../images/css_sprites_3g.png') -10px -775px;
	background-repeat: no-repeat;		
	background-position: -10px -775px;
	width: 120px; height: 118px;
	display: inline-block;
}
		
		
		
		
		.decoration_leafytop {
			background-image: url('../images/decoration_leafytop.png');
			background-position: right top;
			background-size: contain;
			background-repeat: no-repeat;
		}	
		
/* 	=========================================
		MOBILE BREAK POINT
		========================================= */
		
@media all and (max-width: 1190px) { 

		html, body {
			/* background-color: #ffffe0;	*/
		}
		
		main {
			border-top: none; /* HACK */
		}
		
		section {
			width: 100%;
		}
		
		header {
			background-color: #006600; /* logo background color */
			position: relative;
		}
		
		nav { display: none; }
		
		footer { padding: 0 1.5em; }
		footer nav { display: block; padding: 10px 0 20px 0; }
		footer nav a:link, 
		footer nav a:visited, 
		footer nav a:hover, 
		footer nav a:active {
			padding-right: 20px;
		}		

		#poster div.sheet #sheet_bee {
			left: -8px;
			top: 11px;
		}

		/* GRILL MUCKERY */
		#grill {
			color: #fff;
			position: absolute;
			right: 10px;
			top: 20px;
			display: inline-block;
			padding: 1em 1em 1em 1.5em;
			z-index: 1;
		}
				#grill span {
					font-size: 45px;
					cursor: pointer;
					float: right;
					-webkit-transform: rotate(0deg);
					-moz-transform: rotate(0deg);
					-o-transform: rotate(0deg);
					transform: rotate(0deg);
					-webkit-transition: .25s ease-in-out;
					-moz-transition: .25s ease-in-out;
					-o-transition: .25s ease-in-out;
					transition: .25s ease-in-out;					
				}
				
				#grill a {
					display: inline-block;
					font-size: 25px;
					font-weight: bold;
					color: #fff;
					clear: left;
					margin-bottom: .25em;
					border-bottom: 2px solid #fff;
					padding: 5px 0;
					display: none;
				}
				
				#grill a {
					text-decoration: none;
				}
				
				#grill.open {
					box-shadow: 2px 2px 11px black;
					background-color: #a3ca2b;
					width: 200px;
					
				}
				
				#grill.open a {
					display: inline-block;
				}
				#grill.open span {
						-webkit-transform: rotate(90deg);
						-moz-transform: rotate(90deg);
						-o-transform: rotate(90deg);
						transform: rotate(90deg);
						-webkit-transition: .25s ease-in-out;
						-moz-transition: .25s ease-in-out;
						-o-transition: .25s ease-in-out;
						transition: .25s ease-in-out;
				}
				
				div#grill a.current {
					color: yellow;
				}
				
				
		a#logo {
			border-color: transparent;
			margin-left: 10px;
		}



							/* HERO MUCKERY */
							div#hero section	{ 
								height: 407px; 
								display: block;
								background-color: #77b41b;
								padding: 10px 10px 13px 10px;
								box-sizing: border-box;
							}
							
							#poster {		
								width: 100%;
								box-sizing: border-box;
								text-align: center;
							}

							#poster div.sheet {
								font-size: 19px;
								box-shadow: none;
							}
								
								#poster div.sheet #decoration_bee {
									left: -12px; top: 9px;
								}
								
		



		
		aside {
			background-color: #fff;
			padding: 9px 7px 7px 15px;
			position: relative;
			left: -4px;
			box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.5);
			line-height: 1.0;
		}

/* 	=========================================
		START of GRID overrides
		========================================= */	
		.grid_1, .grid_2, .grid_3, .grid_4,
		.grid_1x2, .grid_2x1 { display: block; margin-bottom: 0; }
		
		.grid_1 { grid-template-columns: 1fr; }
		.grid_2 { grid-template-columns: 1fr 1fr; }
		.grid_3 { grid-template-columns: 1fr 1fr 1fr; }
		.grid_4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
		.grid_1x2 { grid-template-columns: 1fr 1fr; }
		.grid_2x1 { grid-template-columns: 1fr 1fr; } 
		
		div.box { margin: 0; padding: 1em .75em .5em 1em; }	
		div.box h3, div.box h4  { margin: 0 0 .5em 0; }	
		div.box.blank { padding: 1em 1em 1em 1em; }
		div.box.transparent .card {
			padding: .75em 1em 1em 1em; width: 100%; margin: 0; 
			box-sizing: border-box; 
			box-shadow: none; border-left: none; border-right: none;
		}
		div.box.dashed { border: none; }

		div.top_gutter 			{ border-top: none; }
		div.bottom_gutter_mobile  { border-bottom: 1em solid #fff; }		
		section.bottom_gutter 	{ border-bottom: none; }
		div.grid_img				{ padding-top: 85%; background-size: cover; }
		div.align_left 			{ text-align: left; padding: 1.5em .75em 1.5em 1em;	}	
		div.align_centered		{ padding: 1em 1em 1em 1em;	}	
/* 	=========================================
		END of GRID overrides
		========================================= */	

		/* quirky things */		
		.desktop_only { display: none; }
		.mobile_only { display: inline-block; line-height: 0; }
		
		h2.utility_header { 
			padding-left: 15px; 
		}		
		
		div.utility_content {
			padding: 1em 1em;
			minimum-height: 400px;
			font-size: 140%;
		}			
		
		#sponsors_grid {
			grid-gap: 40px;
			grid-template-columns: 1fr 1fr;
		}

		#sponsors_grid>* {
			height: auto;
		}
		
		footer div.grid_3 {
			display: flex;
			flex-direction: column-reverse;
		}
		
		footer div.grid_3 div.box {
			
		}
		
		footer div.grid_3 .box:nth-child(2) {
			/* background-color: green; */
		}
		
		footer div.grid_3 .box:nth-child(3) {
			display: none;
		}
		
}


/* 	=========================================
		DEBUG
		========================================= */

		/*
		header		{ background-color: aqua; }
		footer		{ background-color: teal; }
		div#hero 	{ background-color: yellow; }
		main 			{ background-color: orange; }
		section 	{ background-color: transparent; }
		*/
		
		.WILLFIX {
			padding: 1em; background-color: #fff;
			display: inline-block;
		}
		
		.FLEX_CENTER {
			display: flex;
			justify-content: center;
			align-items: center;
		}