/* v2024 */
/*	@import url(https://fonts.googleapis.com/css?family=Oswald:300,400,700|PT+Serif:400,700|Open+Sans:300,400,700|Monda);	*/

@media screen {
	BODY			{
		--PageWidth: 1100px; /* 1100px 1240px */
		--PageMargin: 20px;
		--ColorDiv: #728242;
		--MenuHover: #FCF90E;
		--LinkHover: #FF9D9D;
		--DebugWidth: 0px;
	}
}


/*************************************************************************************************/
/* Common elements */
HTML					{ box-sizing: border-box; }
*, *:before, *:after	{ box-sizing: inherit; }

BODY			{ margin: 0px; background-color: #181818; }
BODY, P			{ color: #FFF; font: 13.5pt 'PT Sans',sans-serif; }
A				{ color: #FFFFC0; border-width: 0px; } /* #F7ECA1 */

MAIN			{ background-color: #212121; min-height: 320px; width: 100%; max-width: var(--PageWidth); margin: 10px auto; border: 1px solid #4C4C4C; }
MAIN P, MAIN LI	{ color: #CCC; font: 14pt 'PT Sans',sans-serif; }

MAIN P A		{ color: #F1F0C5; text-decoration: none; transition: 300ms; }
MAIN P A:Hover	{ color: #FF8080; text-decoration: underline; }


HEADER DIV.v2022, DIV.Head, DIV.HeadSE, DIV.Body, FOOTER UL, FOOTER ARTICLE
				{ max-width: var(--PageWidth); margin: 0px auto; }
HR				{ border-color: var(--ColorDiv); }
SPAN.nobr		{ white-space: nowrap; }


/*************************************************************************************************/
/*	Header */
/*	Width:	1239 x 105 */

HEADER				{ background-color: #1B1B1B; }
HEADER DIV.TopBar	{ background-color: #000; position: sticky; top: 0; z-index: 20; }
NAV { position: sticky; top: 0; z-index: 30; }
HEADER DIV.v2024	{ border: var(--DebugWidth) solid blue;	align-items: center;
					display: flex; flex-direction: row; min-height: 67px; margin: 0 auto; max-width: var(--PageWidth, 1240px);
					padding: 0 16px; justify-content: space-between; transition: all .3s ease; }
HEADER DIV.phLeft	{ display: flex; border: var(--DebugWidth) solid red; justify-content: flex-start;
					  align-items: center; flex-wrap: wrap; align-content: flex-start; }
HEADER DIV.phRight	{ display: flex; border: var(--DebugWidth) solid green;
					  align-items: center; flex-wrap: wrap; }

HEADER DIV.v2024 A.Logo { display: contents; }
HEADER DIV.v2024 IMG	{ max-width: 210px; width: 100%; margin: 0px; }
HEADER H1	{ font: 300 28pt Oswald,sans-serif; margin: 0px; color: #DDD; text-shadow: 6px 6px 4px #000;
			  text-align: center; }

A.Donate		{ display: inline-flex; align-items: center; justify-content: center;
	border-radius: 4px; width: 116px; height: 40px; margin: 7px 15px 7px 10px; padding: 3px;
	background: linear-gradient(to bottom, #8DF144, #259320); font: 14pt 'PT Sans',sans-serif;
	text-shadow:  2px 2px 0px #000; color: #FFF; text-decoration: none;	text-transform: uppercase;
}

HEADER #DoTheSearch	{ margin: 7px 20px 0px 10px; }
HEADER SVG.search	{ fill: red; width: 31px; height: 31px; }

/*


HEADER			{ background-color: #1B1B1B; }
HEADER DIV.v2022		{ padding: 15px 20px; text-align: center; display: flex; align-items: center; }
HEADER IMG		{ max-width: 540px; width: 89%; margin: 3px auto; }
*/
/*************************************************************************************************/
/* Head frame, title, slogan and subtitle */
DIV.Head		{ padding: 20px; }
H1, #Top THEAD TH /*	, H2.SubTitle,	DIV.Head H2		*/
	{ color: #DDD; text-shadow: 6px 6px 4px #000; }



/*************************************************************************************************/
/* Top Menu */
NAV			{ background: linear-gradient(to bottom, #555, #000); display: flex; justify-content: center;
			  align-items: center; }
NAV A		{ color: #FFF; }
NAV A:hover	{ color: var(--MenuHover); }
DIV.TopMnu	{ display: none; text-align: left; } /* Default is off for all screens */
DIV.TopMnu IMG	{ margin: 8px 0px 0px 7px; vertical-align: top;  overflow: hidden;
				  width: 15px; height: 16px;
				  transition-duration: 0.8s; transition-property: transform; }
#SubStates	{ display: none; }
DIV.TopMnu	{ transition: opacity 0.8s; opacity: 0; }


/*************************************************************************************************/
/* Footer */

FOOTER			{ background-color: #111111; padding: 0px 0px; border-top: 1px solid var(--ColorDiv); }
FOOTER UL		{ display: flex; list-style: none; padding: 0px 15px; margin: 55px auto 20px auto;
				  justify-content: space-between; gap: 10px 30px; }
FOOTER H4		{ font: 23px 'PT Sans',sans-serif; margin: 0px 0px 25px 0px; }
FOOTER LI		{ margin: 0px; font: 12pt 'PT Sans',sans-serif; flex-grow: 1; width: 28%; }
FOOTER LI A		{ display: block; font: 12pt 'PT Sans',sans-serif; color: #FFF;
				  border-bottom: 1px solid #363636; padding: 10px 5px 10px 0px; }
FOOTER LI:first-child A::before		{ content: "\f101"; font: 10pt FontAwesome; padding-right: 5px; color: #AAA; }
			/*	{ content: "> "; font-size: 10pt; padding-right: 5px; color: #AAA;}	*/

FOOTER .Apps	{ margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #363636; text-align: left; }
FOOTER .Apps IMG{ vertical-align: middle; display: inline-block; margin: 10px 20px 10px 0px; height: 40px; }
FOOTER .Apps A	{ border-width: 0px; padding: 0px; }
FOOTER .Apps A::before { content: ""; }

FOOTER SPAN A	{ display: inline-block; border-width: 0px; }
FOOTER LI #FB, FOOTER #TW, FOOTER #IG, FOOTER #YT
				{ font: 30pt FontAwesome; margin: 5px 25px 25px 0px; color: #FFF; line-height: 5px; }
FOOTER #FB::before	{ content: "\f082"; }
FOOTER #TW::before	{ content: "\f081"; }
FOOTER #IG::before	{ content: "\f16D"; }
FOOTER #YT::before	{ content: "\f166"; }

FOOTER UL LI:nth-of-type(3)	{ line-height: 16pt; color: #CCC; font: 12pt 'PT Sans',sans-serif; }
FOOTER UL LI:nth-of-type(3) A{ line-height: 29pt; display: inline-block; border-width: 0px; padding: 0px; }
FOOTER UL LI:nth-of-type(3) A:first-child { margin-top: 25px; }
FOOTER UL LI:nth-of-type(3) A::before	{ content: "\f095"; font: 14pt FontAwesome; padding-right: 10px; color: #AAA; }
FOOTER UL LI:nth-of-type(3) .Email::before	{ content: "\f003"; }
FOOTER UL LI:nth-of-type(3) .Cont::before	{ content: "\f040"; }
FOOTER ADDRESS	{ font-style: normal; margin-bottom: 10px; }

FOOTER A		{ text-decoration: none; transition: 300ms; }
FOOTER #FB:hover, FOOTER #TW:hover, FOOTER #IG:hover, FOOTER #YT:hover,
FOOTER LI A:hover	{ color: var(--LinkHover); }

FOOTER ARTICLE	{ border-top: 1px solid #363636; padding: 10px; color: #CCC; }
FOOTER ARTICLE .Credit { text-align: center; font-size: 13pt; font-style: normal; } /* The 13.3px margin matches the default top margin of P's */
FOOTER ARTICLE .Credit IMG { width: 200px; background-color: #FFF; }
#Cr1	{ float: right; margin-top: 5.3px; }
#Cr2	{ margin: 20px 15px; }
FOOTER ARTICLE U { display: block; text-align: center; font-size: 12pt; text-decoration: none; }
FOOTER ARTICLE U IMG { width: 120px; }
FOOTER ARTICLE, FOOTER ARTICLE P
				{ font-size: 10pt; }

FOOTER SECTION	{ height: 54px; background-color: #282828;
				  color: #777; font: 11pt 'PT Sans',sans-serif;
				  display: flex; justify-content: center; align-items: center; }


/*************************************************************************************************/
/* Login Page */

DIV.LoginNote	{ margin-bottom: 30px; }
DIV.LoginNote B	{ font-weight: normal; color: #FFF; }
DIV.LoginPage	{ display: flex; justify-content: space-between; }
DIV.LoginBlock	{ flex-grow: 1; }

TABLE.Login		{ border: 1px solid #4C4C4C; xmax-width: 420px; text-align: left;
					background-color: #212121; border-collapse: collapse; }
TABLE.Login THEAD TH	{ font: 15pt Monda,sans-serif; background: linear-gradient(to bottom, #606060, #404040);
		margin: 0px 0px 15px 0px; text-align: center; text-shadow: 1px 1px black; }

TABLE.Login TBODY TH	{ color: #CCC; padding: 10px 5px 0px 15px; width: 50%; }
TABLE.Login TBODY TD	{ color: #CCC; padding: 10px 15px 0px 5px; width: 50%; }
TABLE.Login TBODY TH,
TABLE.Login TBODY INPUT	{ font: 14pt 'PT Sans',sans-serif; }
TABLE.Login TBODY INPUT	{ background-color: #FFF; width: 100%; }
TABLE.Login TFOOT INPUT	{ background: linear-gradient(to bottom, #DDD, #999); padding: 0px 10px;
		text-shadow: 1px 1px 0px #CCC; color: #000; border-radius: 2px; font: 14pt Monda,sans-serif;
		display: block; margin: 10px auto; text-decoration: none; cursor: pointer; width: auto; }

TABLE.Login INPUT[TYPE=CHECKBOX] { zoom: 1.7; display: inline-block; margin: 3px 7px 7px 3px; }

TABLE.Login TFOOT TD	{ text-align: center; font-size: 12pt; padding: 10px 10px 15px; }
TABLE.Login TFOOT TD P	{ margin-block: 0px; padding-left: 40px; text-indent: -40px; text-align: left; font-size: 14pt; color: #CCC; }
TABLE.Login TFOOT TH P	{ margin: 20px 15px; }
FORM.Signup S			{ text-decoration: none; color: #FF0000; }
FORM.Signup I			{ font-style: normal; color: #00FF00; }

DIV.LoginPage SMALL	{ border: 1px solid #CCC; font-size: 14pt; background-color: #006799; color: #FFF;
	margin: 30px 0px; padding: 20px; display: block; text-align: center;  }
DIV.LoginPage SMALL A	{ white-space: nowrap; }

DIV.LoginPhoto		{ margin-left: 30px; }
DIV.LoginPhoto IMG	{ display: block; width: 100%; max-width: 640px; margin-bottom: 10px; }
DIV.LoginPhoto P	{ margin: 0px 0px 5px; padding: 0px; font-size: 10pt; text-align: right; }
P.InMsg,
P.ErMsg,
P.OkMsg { border: 1px solid #FFF; color: #FFF; background-color: #A00000; padding: 20px 15px; }
P.ErMsg { background-color: #A00000; }
P.OkMsg { background-color: #00A000; }
P.InMsg { background-color: #FF00FF; }
P.InMsg A:Hover,
P.InMsg A { color: #00FFFF; }


DIV.g-recaptcha			{ text-align: center; padding: 10px 0px 0px; }
DIV.g-recaptcha > DIV	{ display: inline-block; }




/************************************************************************/


/************ Menu Expanded ************/
@media (min-width: 1100px) { /* 1024 950px */
	NAV #MenuFrame	{ display: flex; justify-content: center; align-items: center; }
	DIV.Dimm, A.Menu { display: none; }

	DIV.TopMnu	{ display: none; background-color: #444; border: 1px solid #000;
		box-shadow: 6px 6px 12px 0px rgb(0 0 0 / 75%); font: 15pt/23pt Monda,sans-serif;
	    margin: 0px 5px; max-height: calc(100vh - 100px); max-width: 400px;
	    overflow-y: auto; overflow: visible; overscroll-behavior: contain; padding: 0px 15px;
	    position: absolute; z-index: 2;
	}
	DIV.TopMnu A	{ display: block; margin: 7px 1px; padding-bottom: 5px;
					  border-bottom: 1px solid #AAA; text-decoration: none; }
	DIV.TopMnu A:last-child	{ border-bottom: 0px; }

	/* Now, overwrite the root menu with the defaults */
	#Sub0	{ display: block; background-color: transparent; border-width: 0px;
		box-shadow: none; font: 14pt Monda,sans-serif;
	    left: auto; margin: 0px; max-height: none; max-width: none;
	    overflow-y: visible; overflow: visible; overscroll-behavior: auto; padding: 0px;
	    position: static; top: auto; z-index: auto; text-align: center;
		opacity: 1;
	}

	#Sub0 A	{ display: inline-block; padding: 0px 10px; text-decoration: none; border-width: 0px;
			  font: 14pt Monda,sans-serif; }
}
/************ Menu Collapsed ************/
@media (max-width: 1099px) { /* 1023  */
	NAV				{ justify-content: flex-end; }
	NAV #MenuFrame	{ display: none; }
	/**********************************************************/
	/* Burger Button */
	A.Menu			{ display: block; position: absolute; left: 10px; /* top: 4px; */
		width: 28px; margin: 5px; padding: 5px 0px; border: 3px solid #FFF;
		border-width: 3px 0px; }

	A.Menu B	{ display: block; width: 100%; height: 3px; background-color: #FFF; }

	HEADER IMG	{ margin: 3px auto 0px auto; }
	HEADER UL	{ display: none; }

	/**********************************************************/
	/* Cover Gray-out Layer */
	DIV.Dimm	{ display: none; position: fixed; background-color: #000; z-index: 1;
			  	  top: 108px; left: 0px; height: calc(100vh - 113px); width: 100vw; opacity: 0.6; }

	/*	NAV	6/6/2022 9:45PM	*/
	DIV.TopMnu { display: none; background-color: #444; border: 1px solid #000;
		box-shadow: 6px 6px 12px 0px rgb(0 0 0 / 75%); font: 15pt/23pt Monda,sans-serif;
	    margin: 0px 5px; max-height: calc(100vh - 100px); max-width: 400px;
	    overflow-y: auto; overflow: visible; overscroll-behavior: contain; padding: 0px;
	    position: absolute; z-index: 2; top: 39px; left: -5px;

		margin: 39px 0px 0px 39px; /* Offset to the right-bottom */
	}
	#Sub0	{ margin: 0px 5px; } /* Compensate right-bottom offset */
	DIV.TopMnu IMG		{ float: right; }
	NAV A				{ display: block; margin: 7px 10px; padding-bottom: 5px; color: #FFF;
						  border-bottom: 1px solid #AAA; text-decoration: none; }
	NAV A:last-child	{ border-bottom: 0px; }
    A.Donate	{  }
}


@media (min-width: 580px) and (max-width: 919px) {
	FOOTER UL LI:nth-of-type(3) A.Tel	{ line-height: inherit; display: block; margin-top: 20px; }
	FOOTER UL LI:nth-of-type(3) A.Tel:first-child	{ margin-top: 0px; }
	FOOTER UL LI:nth-of-type(3) A.Email	{ margin-top: 15px; }
}


@media (max-width: 599px) {
	#Top	{ justify-content: center; }
	#Top TABLE	{ width: 80%; max-width: none; }
	#Air { margin-bottom: 20px; margin-right: 0px; }
	FOOTER UL LI	{ display: block; }
}
@media (max-width: 579px) {
	FOOTER			{ border-top-color: #111; }
	FOOTER UL		{ display: block; margin-top: 0px; }
	FOOTER UL LI	{ display: block; width: 100%; }
	FOOTER LI A:last-child	{ border-width: 0px; }
	FOOTER UL LI H4	{ margin-top: 50px; border-top: 1px solid var(--ColorDiv); padding-top: 5px; }
	FOOTER .Apps	{ border-bottom: 0px; }
	FOOTER .Apps A	{ display: inline-block ; }
	FOOTER .Apps A:nth-child(2)	{ margin-left: 20px; }
	FOOTER .Apps IMG{ margin-right: 7px; }
}
@media (max-width: 370px) {
	FOOTER .Apps A	{ display: block ; }
	FOOTER .Apps A:nth-child(2)	{ margin-left: 0px; }
	FOOTER .Apps IMG{ margin-right: 20px; height: 48px; }
}
@media (max-width: 840px), handheld and (orientation: landscape) { }

/************************************************************************/
