/* v2026:008 */
/*	@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: 1200px;
		--PageMargin: 20px;
		--ColorDiv: #728242;
		--MenuHover: #FCF90E;
		--LinkColor: #FFFFC0;
		--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			{ margin: 10px auto; padding: 0px 10px; min-height: 320px; width: 100%; max-width: var(--PageWidth);
				  /* background-color: #212121; border: 1px solid #4C4C4C; */ }
MAIN P			{ 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; }

H3				{ font: 20pt Monda,sans-serif; }
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.TopMnu { 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; }

/*************************************************************************************************/
/* 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.TopMnu			{ background: linear-gradient(to bottom, #555, #000); display: flex; justify-content: center;
			  align-items: center; }
NAV.TopMnu A		{ color: #FFF; }
NAV.TopMnu 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; }

/*************************************************************************************************/
/* Banners */
TABLE.Banners		{ max-width: 90%; border-collapse: collapse; max-width: var(--PageWidth); margin: 26px auto 0px auto; }
TABLE.Banners TD A	{ color: #DDD; display: block; padding-bottom: 6px; text-decoration: none; }
TABLE.Banners TH	{ font-size: 10pt; font-weight: normal; text-align: right; }
TABLE.Banners IMG	{ width: 100%; display: block; }


/*************************************************************************************************/
/* Home Page */
DIV.News		{ xtext-align: center; }
DIV.ListBlock,
DIV.News ARTICLE{ display: block; background-color: #282828; border: 1px solid #4C4C4C;
		overflow: overlay; color: #CCC; padding: 20px; text-align: left; margin: 5px 0px 15px 0px;
		box-shadow: 3px 3px 7px 2px #000; }
/*
DIV.News ARTICLE>IMG	{ max-width: 560px; width: 100%; display: block; margin: 10px auto 0px; }
DIV.News H3		{ text-align: left; margin: 0px var(--PageMargin); padding: 0px; }
*/
DIV.News IMG.Cover	{ width: 80%; height: auto; display: block; margin: 20px auto; border: 1px solid #000; }
DIV.News IMG.Tile	{ border: 1px solid #000; margin: 0px 20px 10px 0px; float: left; max-width: 160px; width: 42%; }
DIV.News H4.Title	{ text-align: left; font: 300 18pt Oswald,sans-serif; margin: 0px; }
DIV.News LI,
DIV.News P		{ font: 14pt 'PT Sans',sans-serif; }
DIV.News BR		{ clear: left; }
DIV.News .Ads	{ background-color: #282828; border: 1px solid #4C4C4C;
				  margin: 5px 20px 15px 20px; padding: 20px 19px 15px 19px; }

DIV.News DIV.Pix		{ border: 1px solid black; background-color: #E5E5E5; padding: 10px;
				   		  max-width: 620px; margin: 15px auto; text-align: center; color: #000; }
DIV.News DIV.Pix IMG	{ width: 100%; border: 1px solid black; display: block; }
DIV.News DIV.Pix P		{ color: #000; font-size: 12pt; font-style: italic; text-align: left; }

DIV.News A.More	{ color: #00E7FF; display: block; margin: 20px 0px 0px 0px;
				  overflow: overlay; padding: 1px 5px 2px 30px; border: 0px solid #FFF;
	background: url(/sysLibrary/images/box.asp?m=f061&s=26&c=00E7FF&k=o&t=0) no-repeat;
}

/* These tags are temporary disabled for porting from previous version */
DIV.HomeNewsCmnt	{ display: none; }

/* Recently Aired Album Covers */
DIV.Recent		{ display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: 0px 0px 0px 20px; }    /* var(--PageMargin);  */
DIV.Recent H3	{ }
DIV.Recent IMG	{ width: 160px; height: 160px; border: 1px solid #000; margin: 0px 20px 20px 0px; }

/*************************************************************************************************/
/* Home Page Hosts Block */
DIV.Hosts		{ display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap; padding: 0px; }
DIV.Hosts H3	{ }
DIV.Hosts A		{ display: inline-block; font: 12pt 'PT Sans Narrow','Arial Narrow'; text-align: center; margin: 0px 15px; }
DIV.Hosts IMG	{ display: block; height: 140px; width: auto; border: 1px solid #000; margin: 15px auto 0px; }
DIV.Hosts A:Hover		{ color: var(--LinkHover); }
DIV.Hosts A:Hover IMG	{ border-color: var(--LinkHover); }

/*************************************************************************************************/
NAV.BlockMenu	{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;
	  align-items: center; margin: 5px 10px; justify-content: center; float: right; } /* justify-content: space-between; */
NAV.BlockMenu B	{ background-image: linear-gradient(to bottom, #005CB9 0%, #004080 100%);
	  border-radius: 5px; box-shadow: 2px 2px 5px #000; color: var(--LinkColor); display: inline-block;
	  font: 14pt Monda,helvetica; margin: 0px 5px 10px 5px; min-width: 128px; padding: 3px 15px 3px 35px;
	  text-align: center; text-decoration: none; text-shadow: #000 2px 2px 0; cursor: pointer;
	/*	flex-grow: 1; */ 	}
NAV.BlockMenu B:Hover	{ color: var(--LinkHover); }

NAV.BlockMenu B.Up::after { width: 24px; height: 14px;
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' fill='%23AAFFAA'%3E%3Cpath transform='translate(9)' d='M7.5,0 14,15 0,15Z'/%3E%3C/svg%3E");
}
NAV.BlockMenu B.Dw::after { width: 24px; height: 14px;
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14' fill='%23AAFFAA'%3E%3Cpath transform='translate(9)' d='M0,0 14,0 7.5,15Z'/%3E%3C/svg%3E");
}
NAV.BlockMenu B.No::after { width: 24px; height: 14px;
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='14'%3E%3C/svg%3E");
}

/* <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 30 30" fill="#FFF"><path d="M0,0 30,0 15,25Z"/></svg> */

/*************************************************************************************************/
/* Home Page Flags Block */
DIV.Flags		{ display: flex; justify-content: center; align-items: flex-start; flex-wrap: wrap;
				  padding: 0px; clear: both; }

DIV.Flags P		{ display: flex; flex-direction: column; align-items: center; justify-content: flex-start; margin: 4px 7px;}
DIV.Flags IMG	{ display: block; height: 48px; width: 64px; border: 1px solid #FFF; margin: 15px auto 0px;
			      box-sizing: content-box; }
DIV.Flags B		{ display: inline-block; font: 400 12pt 'PT Sans Narrow','Arial Narrow'; text-align: center;
				  margin: 0px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; width: 64px; }

/*************************************************************************************************/
/* World Map Push Pins (flags are used from home page). L for Large */
DIV.pinL	{ width: 50px; height: 58px; position: relative; top: 40px;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="red" opacity="0.4" width="50" height="78" viewBox="30 22 20 48"><path d="M39.7,35 C70,34 46.7,36.9 40,70 33.2,36.9 10.3,34 39.7,35Z"></path><circle cx="40" cy="38" r="15"/></svg>');
}
DIV.pinL IMG	{ width: 37px; height: 27.75px; position: relative; top: 12px; border: 1px solid black; display: block; margin: 0px auto; }

DIV.pin	{ width: 32px; height: 54px; background-size: 32px 54px; position: relative; top: 18px;
	background-repeat: no-repeat;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="red" opacity="0.4" width="50" height="78" viewBox="30 22 20 48"><path d="M39.7,35 C70,34 46.7,36.9 40,70 33.2,36.9 10.3,34 39.7,35Z"></path><circle cx="40" cy="38" r="15"/></svg>');
}
DIV.pin IMG	{ width: 24px; height: 18px; position: relative; top: 8px; border: 1px solid black; display: block; margin: 0px auto; }

/*************************************************************************************************/
/* Country List */
DIV.CountryList H4.Title		{ margin-bottom: 20px; }
DIV.CountryList	IMG		{ width: 220px; float: left; margin: 0px 20px 10px 0px; border: 3px solid #FFF; }
DIV.CountryList ARTICLE P:first-child	{ margin-top: -5px; }


/*************************************************************************************************/
/* Block Item */
DIV.Block		{ display: block; background-color: #282828; border: 1px solid #4C4C4C; overflow: overlay;
		padding: 0px; text-align: left; margin: 5px 0px 15px 0px; box-shadow: 3px 3px 7px 2px #000; }
DIV.Block H4		{ font: 18pt Monda,sans-serif; text-align: left; padding: 5px 30px; border: 1px solid #AAA;
	background: linear-gradient(to bottom, #606060, #404040); text-shadow: 6px 6px 4px #000; color: #DDD;
				margin: 0px; }

DIV.Block IMG.Tile	{ border: 1px solid #000; margin: 0px 20px 5px 0px; float: left;
			max-width: 160px; width: 42%; }

DIV.Block DIV	{ padding: 20px 20px 15px 20px;
	/* border: 1px solid #AAA; border-top-width: 0px; margin: 0px 0px 0px 30px; padding: 20px 0px 0px 0px; */
				}

DIV.Block LI	{ margin: 5px 0px; }
DIV.Block P		{}

/*************************************************************************************************/
/* Common Styles */
DIV.Pix		{ border: 1px solid black; background-color: #EAEAEA; padding: 10px; max-width: 620px; margin: 15px auto; box-shadow: 4px 4px 8px 2px #00000052; }
DIV.Pix IMG	{ width: 100%; }
DIV.Pix P	{ margin: 0px; font-size: 12pt; font-style: italic; color: #000; }

/*************************************************************************************************/
/* 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; }




/************************************************************************/


/************ Menu Expanded ************/
@media (min-width: 1100px) { /* 1024 950px */
	NAV.TopMnu #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.TopMnu				{ justify-content: flex-end; }
	NAV.TopMnu #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.Logo	{ 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: 0px; left: 0px; height: 100vh; 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: 53px; 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.TopMnu DIV A				{ display: block; margin: 7px 10px; padding-bottom: 5px; color: #FFF;
						  border-bottom: 1px solid #AAA; text-decoration: none; }
	NAV.TopMnu DIV A:last-child	{ border-bottom: 0px; }
    A.Donate	{  }
}

@media (max-width: 830px) {
	HEADER DIV.v2024	{ flex-direction: column; }
	HEADER DIV.phLeft	{ margin-top: 10px; }
}

@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) { }

/************************************************************************/
