/*  				style25_L1.css			rev 2025-01-29		*/
/*  colors:	see _TMPLT_README.txt							*/
/*  HTML5 semantic layout elements = header, nav, main, article, aside, footer		*/
/*								*/

@import url("layout_toplevel.css");

body 		{ font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
		font-size: 1.2em;
		color: #000000;
		background-color: #67b;
		}

header		{ padding-left: 5px;
		  background-color: #9d9c9b;
		}

/*  NAV       new semantic element named 'nav' added 2022-12-12  			*/

nav	    {	padding-left: 5px;
		background-color: #9f9f9f
		}

/* 		see DIV ID's for styles				*/
/*								*/
/*		*/
/*		overflow: auto;					*/

/*   MAIN   -- formerly '#content'			*/
/* 							*/
main     {	margin: 0 auto;
		float: left;
		width: 100%;
		padding: 5px;
		overflow: auto;
		background-color: #ffffff;
		position: relative;
		}

main img {	display: block;
		visibility: visible;
		border: 2px solid #ffffff;
		}

main p  { 	padding-left: 5px;
	/*	margin-left: 5px;		*/
		display: block;
		margin-block-start: 0.1em;
		margin-block-end: 0.1em;
		}

/*    FOOTER    i.e. new HTML5 semantic element 		*/

footer	{	clear: both;
		width: 100%;
		font-size: 0.9em;
		background-color: #9d9c9b;
		padding: 0;
		overflow: auto;
		margin-top: 0px;
		}
footer p {	text-align: center;
		margin: 1px;
		padding: 2px;
		}
footer a {	color: #030303;
		text-decoration: underline;
		}
footer a:hover {
		color: #3f3f3f;
		text-decoration: none;
		}

div	{	display: block;
		}

a	{	color: #04b;
		text-decoration: underline;
		}
a:hover {	color: #333;
		text-decoration: none;
	}

/*   ID's						*/

#container { 	width: 100%;
		margin: 0 auto;
		background-color: #8fffff;
		}

#masthead {
		text-align: right;
		position: relative;
		font-size: 1.1em;
		width: 100%;
		height: 180px;
		margin-top: 0px;
		margin-right: 0px;
		overflow: auto;
		color: rgb(210, 189, 125);
		background-color: rgb(0, 64, 128);
		background-repeat: no-repeat;
		z-index: 0;
		}
#masthead img { float: left;
		position: relative;
		}

#LOGO	img	{ z-index: 1;
		float: left;
		width: 240px;
		height: 80px;
		}
#HERO 	{	background-position: center center;
		background-size: 100%;
		background-repeat: no-repeat;
	  	width:  100vw;
		}
/*		background-position: left top;      "		*/

#OpacityRegulator { 	width: 100vw;
		/*	height: 400vh;		*/
			background-color: rgba(255, 150, 150, 0.7);
			background-size: cover;
			transition: opacity 500ms;
			visibility: visible;
		/*	opacity: 70;		*/
		}
#main_PixPage_1perrow	{
		/*	width: 100%;		*/
			margin: 0.5em;
		}

#main_PixPage_1perrow p	{
			float: right;
		/*	width: 100vw;		*/
		/*	width: 95%;		*/
			width: 95vmax;
		/*	height: auto;		*/
			border: 1em solid #99aabb;
			margin: 0.5em;	
		/*	margin-top: 1em;	*/
		/*	margin-left: 1em;	*/
			background-color: #ffffff;
		/*	margin-inline-start: 0px;	*/
		/*	margin-inline-end: 0px;		*/
		}
/*			display: block;	already in effect?   YES! inherited from main p	*/

#main_PixPage_1perrow img	{
		/*	clear: both;			*/
			float: right;
			margin-top: 0.5em;
			position: relative;
		/*	width: 90%;		*/
			max-width: 70vw;	
		/*	width: 95vmax;		*/
		/*	height: 95vmax;		*/
			max-height: 90vh;	
		/*	height: auto;		*/
			text-align: right;
		}
#main_PixPage_1perrow video	{
			float: right;
			position: relative;
			margin-top: 0.5em;
			max-width: 70vw;	
			max-height: 90vh;	
			text-align: right;
		}

#main_wSidebar_L_and_R {
		margin-left:  5px;
		padding: 5px;
		vertical-align: top;
		width: 70%;
		background-size: 100%;
		
	}
/*	float: left;	position: relative;		*/
/*						*/
/*		                   		*/

#main_wSidebar_L {
			margin-left: 5px;
			padding: 5px;
			position: relative;
			display: block;
	/*	 	clear: both;		*/
			width: 82%;
			float: right;
			overflow: auto;
			background-color: #f6f7f8;
		}

/*		vertical-align: top;
		float: left;              		*/

#main_wSidebar_L p { 	margin: 0;
			display: block;
		}

#main_wSidebar_R {
		width: 85%;
		float: left;
		}
#main_wSidebar_none {
		width: 100%;
		float: left;
		}

/*   NAV					*/
/* Styles for Navigation & Sidebars	*/

#sidebar_right_Promo {
		float: right;
		width: 15%;
		background-color: #cdf;
		}
/*		valign: top;		 */
/*		min-width: 100px;	 */
/*		height: 100vw;	 */
/*		position: relative;	 */
/*		clear: both;		*/
/*		display: inline;	 */
/*		font-size: 1.0em;	 */

#sidebar_right_Promo img { 
		float: left;
		}

#sidebar_right_Promo p { 
		font-size: 0.9em;
		}


#sidebar_left { float: left;
		width: 15%;
		min-width: 100px;
		height: 100vw;
		background-color: #cdf;
		position: relative;
		font-size: 1.0em;
		}
/*	display: inline;
	clear: both;  float: left;  */


#sidebar_left ul {
		list-style-type: none;
		display: block;
		margin: 0;
		padding: 0;
		}
/*		width: 100%;	*/


#sidebar_left li {
		display: block;
		border: 1px solid #cdf;
		}
#sidebar_left a {
		font-weight: bold;
		text-decoration: none;
		color: #04b;
		display: block;
		padding: 5px;
		border-bottom: 1px solid #f9f9f9;
		}
#sidebar_left a:hover {
		font-weight: bold;
		text-decoration: underline;
		color: #333;
		border-bottom: 1px solid #f9f9f9;
		background-color: #f9f9f9;
		}
#nav-selectpagenumber	{
	/*	width: 100%;		*/
		display: block;
		font-weight: bold;
		font-size: 1.2em;
		}
#nav-selectpagenumber	a {
		text-decoration: underline;
		color: #04b;
	/*	padding: 15px;		*/
		padding: 0.5em;
		background-color: #f9f9f9;
		border-bottom: 1px solid #f9f9f9;
		}
#nav-selectpagenumber	a:hover {
		text-decoration: none;
		color: #333;
	/*	padding: 15px;		*/
		padding: 1.0em;
		background-color: #00ffff;
		border-bottom: 1px solid #f9f9f9;
		}

/*  STYLE CLASSES			*/
.style_sponsor {
		display:	block;
		font-weight: 	bold;
		font-size: 	1.2em;
		margin-block-start: 0.5em;
		margin-block-end: 0.5em;
		margin-inline-start: 0px;
		margin-inline-end: 0px;
	}

.style_sponsor p {
		clear:		both;
		font-size: 	3.2em;
	}
.style_bold {
		font-weight: bold;
	}
.style_italic {
		font-style: italic;
	}
.style_ptext_sz2em_bold  {
		font-weight: 	bold;
		font-size: 	2.1em;
	}
.button		{
	    text-align: center;
	    cursor: default;
	    box-sizing: border-box;
	/*    background-color: buttonface;	*/
	/*    color: buttontext;		*/
	    white-space: pre;
	display: inline-block;
	    padding-block: 1px;
	    padding-inline: 6px;
	    border-width: 2px;
	    border-style: outset;
	    border-color: buttonborder;
	    border-image: initial;
	        background-color: #000000;
        	color: #FFFFFF;
	/*	padding: 10px;		*/
		border-radius: 10px;
        	-moz-border-radius: 10px;
        	-webkit-border-radius: 10px;
        	margin:10px
		}

.button-med	{
		font-size: 1.5em;
		width: 300px;
		height: 100px;
	/*	width: 15vw;		*/
	/*	height: 10vh;		*/
		
		}

/*											*/
/* REFERENCE & UPDATE LOG 								*/
/*  header changed from an 'id' (e.g. #header) to a semantic element    2022-12-12   */
/* 2025-01-29	copied from style22_L1a
	"	removed #footer id ref's
		#masthead old  	color: rgb(210, 189, 125);
masthead p moved 2025-01-31   there is no p in masthead
#masthead p { 	text-align: right;
		margin: 0;
		margin-top: 5px;
		margin-right: 10px;
		padding: 0;
		font-weight: bold;
		}
1vmin = 1vw or 1vh, whichever is smaller
1vmax = 1vw or 1vh, whichever is larger
*/