@charset "utf-8";
/* undated 28-MAY-2022 */
/* https://www.w3schools.com/cssref/default.asp
echo "<link rel='stylesheet' type='text/css' href='_css/main.css?" . time() . "'>\n";
<link rel="stylesheet" type="text/css" href="_css/main.css?<?php echo time(); ?>" />
CSS units
    % - The % unit is used to set the font-size relative to the current font-size. 
    em - It is used to set the relative size. It is relative to the font-size of the element. 
    Note: Here 2em meaning 2times the size of current font. 
    rem - Relative to the browser base font-size. 
    px - It defines the font-size in terms of pixels. (96px = 1in)
    vh - Relative to 1% of the height of the viewport. 
    vw - Relative to 1% of the width of the viewport.  (not recommended https://www.freecodecamp.org/news/html-page-width-height/)
	
MARGIN & PADDING
	0 20px 0 13em = TOP RIGHT BOTTOM LEFT
	0 20px 0 = TOP RIGHT/LEFT BOTTOM
	0 20px = TOP/BOTTOM RIGHT/LEFT
	5px = all four margins 
*/

body {
	font-family: Arial, Helvetica, sans-serif;
	margin: 8px; /* it's good practice to zero the margin and padding of the body element to account for differing browser defaults */
	padding: 0;
	text-align: left;
	word-break: break-word;
	transition: background-color .3s;
	font-size: 1em;
	min-height: 100vh;
}

/* Start Dark Mode toggle box */
.DarkMode {
	position: fixed;
	top: 7px;
	right: 7px;
	width: 66px;
	height: 40px;
	border: 3px solid DimGray;
	box-shadow: 0 0 5px DarkGray, 0 0 5px DarkGray, 0 0 5px DarkGray, 0 0 5px DarkGray;
	background-color: DimGray !important;
	color: WhiteSmoke;
	font-family: sans-serif;
    font-weight: bold;
	font-size: 2mm;
	z-index: 99;
}

/*Light Mode Button  */ 
.light-mode-button {
	background:0;
	border: 0;
	box-sizing: border-box;
    margin-top: 1px;
	cursor: pointer;
	width: 30px;
	height: 16px;
	border: 3px solid rgba(255,255,255,0); /* Black */
	position: absolute;
	z-index: 99;
}

.light-mode-button:focus {
	outline:none; 
}

.light-mode-button span:nth-child(1) {
	position: absolute;
	top:0;
	left:0;
	width: 30px;
	height:16px;
	background-color: DarkGray;
	border-radius: 9px;
	box-shadow: inset 1px 1px 3px 0 rgb(0 0 0 / 40%); /* Black */
	transition: .3s;
}

.light-mode-button span:nth-child(2) {
	position: absolute;
	top:3px;
	left:3px;
	width: 10px;
	height: 10px;
	background-color: WhiteSmoke;
	border-radius: 50%;
	box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 40%); /* Black */
	transition: .3s;
}


/* Light & Dark Mode Styles  */ 
body[light-mode=dark] {
	background-color: Black;
	color: OldLace;
}

body[light-mode=light] {
	background-color: WhiteSmoke;
	color: Black;
}

body[light-mode=dark] .light-mode-button span:nth-child(1){
	background-color: DarkGray;
}

body[light-mode=dark] .light-mode-button span:nth-child(2) {
	left: 17px;
	background-color: Black;
}

body[light-mode=dark] a:link, a:visited {
	color: Cyan;
	font-weight: bolder;
	text-decoration: none;
}

body[light-mode=dark] a {
	color: Cyan;
	font-weight: bolder;
	text-decoration: none;
}

body[light-mode=light] a:link, a:visited {
	color: Blue;
	font-weight: bolder;
	text-decoration: none;
}

body[light-mode=dark] a:hover {
	color: Blue;
	font-weight: bolder;
	text-decoration: none;
	text-shadow: 0 0 5px White, 0 0 5px White, 0 0 5px White, 0 0 5px White;
/*	transform: scale(1.2); */
}

body[light-mode=light] a:hover {
	color: WhiteSmoke;
	font-weight: bolder;
	text-decoration: none;
	text-shadow: 0 0 5px Black, 0 0 5px Black, 0 0 5px Black, 0 0 5px Black;
/*	transform: scale(1.2); */
}
/*
body[light-mode=dark] .photo:hover {
	filter: alpha(opacity=80); 
	box-shadow: 0 0 5px White, 0 0 5px White, 0 0 5px White, 0 0 5px White;
	-webkit-box-shadow: 0px 0px 15px 10px rgba(255,255,255,0.8); 
	-moz-box-shadow: 0px 0px 15px 10px rgba(255,255,255,0.8);
	border: 2px solid DarkGray;
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
}

body[light-mode=light] .photo:hover {
	box-shadow: 0 0 5px Black, 0 0 5px Black, 0 0 5px Black, 0 0 5px White;
	-webkit-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.8); 
	-moz-box-shadow: 0px 0px 15px 10px rgba(0,0,0,0.8);
	border: 2px solid Black;
	border-radius: 10px 10px 10px 10px;
	-webkit-border-radius: 10px 10px 10px 10px;
	-moz-border-radius: 10px 10px 10px 10px;
}
*/
/* Used for mouse over (hover) on ALL images <a href="URL"><img src ...></a> */
body[light-mode=dark] a:link img:hover {
    opacity: 0.9;
    filter: alpha(opacity=90); 
	background-color: Black;
	box-shadow: 0 0 5px White, 0 0 5px White, 0 0 5px White, 0 0 5px White;
}

body[light-mode=light] a:link img:hover {
    opacity: 0.9;
    filter: alpha(opacity=90); 
	box-shadow: 0 0 5px Black, 0 0 5px Black, 0 0 5px Black, 0 0 5px White;
}

img:hover.link {
    opacity: 0.9;
    filter: alpha(opacity=90); 
}

/* End Dark Mode Toggle */

/* START form field defaults */
*,
*::before,
*::after {
	box-sizing: border-box;
}

input, select, textarea {
	font-size: 16px;
	font-size: max(16px, 1em);
	font-family: inherit;
	font-weight: bold;
	padding: 0.25em 0.5em;
	margin: 3px;
	box-sizing: border-box;
	background-color: Gainsboro;
	border: 2px solid;
	border-radius: 4px;
	overflow: auto;
}

body[light-mode=dark] input:focus, select:focus, textarea:focus, radio:focus, checkbox:focus, input[type=password]:focus, input[type=email]:focus {
	background-color: HoneyDew;
	outline: 3px solid transparent;
    box-shadow: -2px 2px 5px 6px rgba(0,0,0,0.4);
}

body[light-mode=light] input:focus, select:focus, textarea:focus, radio:focus, checkbox:focus, input[type=password]:focus, input[type=email]:focus {
	background-color: HoneyDew;
	outline: 3px solid transparent;
    box-shadow: -2px 2px 5px 6px rgba(0,0,0,0.4);
}

body[light-mode=dark] input[type="radio"] {
	font: inherit;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.1;	
	display: inline-block;
	width: 15px;
	height: 15px;  
	padding: 3px;
	background-clip: content-box;
	border: 2px solid;
	border-radius: 50%;
	margin-right: 0;
}

body[light-mode=light] input[type="radio"] {
	font: inherit;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.1;	
	display: inline-block;
	width: 15px;
	height: 15px;  
	padding: 3px;
	background-clip: content-box;
	border: 2px solid;
	border-radius: 50%;
	margin-right: 0;
}

body[light-mode=dark] input:hover, select:hover, textarea:hover, radio:hover, checkbox:hover, input[type=checkbox]:hover, input[type=password]:hover, input[type=email]:hover, input[type=text]:hover  {
    box-shadow: 0 0 3px 3px White;
}

body[light-mode=light] input:hover, select:hover, textarea:hover, radio:hover, checkbox:hover, input[type=checkbox]:hover, input[type=password]:hover, input[type=email]:hover, input[type=text]:hover  {
    box-shadow: 0 0 3px 3px Black
}
/* END form field defaults */

.twoColHybLt #container {
	width: 100%;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0px solid #FFF;
	text-align: left; /* this overrides the text-align: center on the body element. */
	color: #000;
	font-size: 100%;
	font-family:Verdana, Geneva, sans-serif;
} 

/* Tips for sidebar1:
1. Since we are working in relative units, it's best not to use padding on the sidebar. It will be added to the overall width for standards compliant browsers creating an unknown actual width. 
2. Since em units are used for the sidebar value, be aware that its width will vary with different default text sizes.
3. Space between the side of the div and the elements within it can be created by placing a left and right margin on those elements as seen in the ".twoColHybLt #sidebar1 p" rule.
*/
.twoColHybLt #sidebar1 {
	float: left;
	width: 180px;
	height: auto;
	clear: left;
	font-size: small;
	text-align: left;
}
.twoColHybLt #sidebar1 h3, .twoColHybLt #sidebar1 p {
	text-align: left;
	width: 8em;
}

/* Tips for mainContent:
1. The space between the mainContent and sidebar1 is created with the left margin on the mainContent div.  No matter how much content the sidebar1 div contains, the column space will remain. You can remove this left margin if you want the #mainContent div's text to fill the #sidebar1 space when the content in #sidebar1 ends.
2. Be aware it is possible to cause float drop (the dropping of the non-floated mainContent area below the sidebar) if an element wider than it can contain is placed within the mainContent div. WIth a hybrid layout (percentage-based overall width with em-based sidebar), it may not be possible to calculate the exact width available. If the user's text size is larger than average, you will have a wider sidebar div and thus, less room in the mainContent div. You should be aware of this limitation - especially if the client is adding content with Contribute.
3. In the Internet Explorer Conditional Comment below, the zoom property is used to give the mainContent "hasLayout." This may help avoid several IE-specific bugs.
*/
.twoColHybLt #mainContent {
	margin: 0 0 0 13em; 
	text-align: left;
	font-family:Verdana, Geneva, sans-serif;
} 

/* Use floatleft, floatright, and clearfloat all used together to left and right justify text on the same line
Syntax: 
	<span class="floatleft">Text on the left.</span>
	<span class="floatright">Text on the right.</span>
	<div class="clearfloat;"></div>
*/

.floatleft { /* used to left justify text on the same line as right justify */
	float: left;
}

.floatcenter { /* used to right justify text on the same line as left justify */
	text-align: center;
	margin: auto;
	width: 100%;
}

.floatright { /* used to right justify text on the same line as left justify */
	text-align: right;
}

.clearfloat { /* used to clear the float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
/* end left and right justify text on the same line */

/* Use for left, center, and right elements on the same line
Syntax: 
	<span class="floatleft">Text on the left.</span>
	<span class="floatright">Text on the right.</span>
	<div class="clearfloat;"></div>
*/

.leftccenterright {
	float: left;
	width: 33.33%;
	vertical-align: middle;
	justify-content: center;

}

@media screen and (max-width: 770px) {
	.leftccenterright {
		display: flex;
		width: 98%;
		margin-right: 1.1%;
		margin-left: 1.1%;
	}
}

.clearleftccenterright::after {
  content: "";
  clear: both;
  display: table;
}
/* end left, center, and right on the same line */

.MainContent {
	text-align: center;
}
.twoColHybLt #container #mainContent p strong {
	text-align: center;
}
#container #mainContent p strong {
	text-align: center;
}
.center {
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto; 
}
.Center {
    text-align: center;
    align-items: center;
    justify-content: center;
    margin: 0 auto; 
}
/* center both horizontally and vertically <div class='centerHorzVert'> */
.centerHorzVert {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
.twoColHybLt #container #mainContent .Center {
	color: #309;
	font-weight: bold;
}
#webgallery {
	height: 645px;
	width: 860px;  
	margin: 0 0 0 0;
	text-align: center;
}
.HighlightYellow {
	background-color: Yellow !important;
	color: Black !important;
} 
.HighlightYellowLight {
	background-color: rgb(255, 255, 179) !important;
	color: Black !important;
} 
.HighlightGray {
	background-color: lightGray !important;
	color: Black !important;
} 
.PageHeader {
	text-align: center;
	font-size: calc(100% + 3vw);
    margin: 5px 0px; /* top/bottom left/right */
}

/* Media Popup screen code */
.tab {
	display: inline-block;
}

.tab div {
	display: none;
}

.tab div:target {
	display: block;
}

.className {
	opacity: 1;
	max-width: 90%;
	max-height: 90%;
	width: 90%; 
	z-index: 5;
	margin: auto;
	overflow: auto;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	top: 0;
	-o-object-fit: contain;
	object-fit: contain;
	-webkit-border-radius: 8 !important;
	-moz-border-radius: 8 !important;
	border-radius: 8px !important;
	box-shadow: 0 0 10px 7px DarkGray !important;;
	background-color: Black !important;
}

.closePopup {
	text-decoration: none !important;
	text-shadow: none !important;
}

.className.closeMe  {    
	z-index: 9 !important;
	background-color: PaleGreen !important;
	border: 3px solid black !important;
	margin-top: 15px;
	max-width: 165px;
	max-height: 28px;
	display: flex;
	justify-content: center;
}

/* End Media Popup screen code */

/* Use for centering a table.  Table code is <table class="center">*/ 
/*
table.center {
	margin-left:auto; 
	margin-right:auto;
}

!important is used specifically to keep the table items in Dark/Light modes
see https://www.w3schools.com/css/css_important.asp
*/
table { 
	width: 98%; 
	border-collapse: collapse; 
    table-layout: auto;
	font-size: 14px;
    margin-left: auto; 
    margin-right: auto;
    width: 300px;
}

body[light-mode=dark] table { 
    border: 1px solid Gainsboro;
}

body[light-mode=light] table { 
    border: 1px solid Black;
}
	
body[light-mode=dark] th {
	color: MidnightBlue;
	background-color: BurlyWood;
	font-weight: bold;
    border: 1px solid MidnightBlue;
	position: sticky; /* keeps header rown on scroll */
	top: 0; /* Don't forget this, requiRed for the stickiness */
}

body[light-mode=light] th {
	color: White;
	background-color: Black;
	font-weight: bold;
	position: sticky; /* keeps header rown on scroll */
	top: 0; /* Don't forget this, requiRed for the stickiness */
}

body[light-mode=dark] tr { 
	border: 1px solid DarkGray;
	left: 6px;
	color: Khaki;
}

body[light-mode=light] tr { 
	border: 1px solid Black;
	left: 6px;
	color: Black;
}

body[light-mode=dark] tr:nth-child(odd){
	background-color: DarkSlateBlue;
	color: Khaki;
}

body[light-mode=dark] tr:nth-child(even){
	background-color: MidnightBlue;
	color: Khaki;
}

body[light-mode=light] tr:nth-child(odd){
	background-color: Cornsilk;
	color: Black;
}

body[light-mode=light] tr:nth-child(even){
	background-color: PowderBlue;
	color: Black;
}

body[light-mode=dark] td a:link {
	color: Khaki;
}

body[light-mode=light] td a:link {
	color: Black;
}

body[light-mode=dark] td a:visited {
	color: Khaki;
}

body[light-mode=light] td a:visited {
	color: Black;
}

/* the image will scale down if it has to, but never scale up */
img {
  max-width: 98%;
  height: auto;
}

/* Photo styling */
.photocontainer {
	width: 100%;
    display: grid;
    grid-gap: 10px;
    grid-template-columns: repeat(auto-fit, [col-start] minmax(125px, 1fr) [col-end]);
    grid-auto-rows: auto;
	grid-auto-columns: auto;
	grid-auto-flow: dense; /* Fill all spaces with fitted images */
}

/* Styling the links */
.photocontainer a img {
    width: 100%;
    height: auto;
    object-fit: contain;
	text-decoration:none;
	border: 2px solid DarkGray;
	-webkit-border-radius: 10; 
    -moz-border-radius: 10; 
    border-radius: 6px; 
	box-shadow: 0 0 2px DarkGray, 0 0 2px DarkGray, 0 0 2px DarkGray, 0 0 12px DarkGray;
}

@media screen and (min-width: 1024px){
	.photocontainer{
		width: 960px;
		margin: 0 auto;
	}
}

/* centers and scales photo on screen */
.photo {
	display: inline-block;
	border: 2px solid DarkGray;
	max-width: 80vw;
	max-height: 80vh;
	margin-left: auto;
	margin-right: auto;
	-webkit-border-radius: 10;
	-moz-border-radius: 10;
	border-radius: 10px;
}
 
.galleryimage {
	display: block; 
	margin: auto;
	text-align: center;
	border: solid Black;
    max-width: 80vw;
    max-height: 80vh;
	-webkit-border-radius: 18; 
    -moz-border-radius: 18; 
    border-radius: 18px; 
	box-shadow: 0 0 10px 7px DarkGray;
}
/* End photo styling */

/* Used for videos */
video {
    max-width: 480px;
    height: auto;
}
/* Used for videos iframe syntax: <div class="videoWrapperOuter"><div class="videoWrapperInner"><iframe ... ></iframe></div></div> */
.videoWrapperOuter {
  max-width:480px; 
}
.videoWrapperInner {
  float: none;
  clear: both;
  width: 100%;
  position: relative;
  padding-bottom: 50%;
  padding-top: 25px;
  height: 0;
}
.videoWrapperInner iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
/* media display syntax: <div class="mediadisplay"> ... </div>*/
/* media display syntax: <div class="mediadisplay"> ... </div>*/
.mediadisplay {
	padding: 6px;

    }
/*colors every odd dark display*/
body[light-mode=dark] .mediadisplay:nth-of-type(odd) {
	border-top: medium;
	border-left: medium;
	border-right: medium;
    border-bottom: 0px;
	border-style: solid;
    border-color: DarkGray;
	background-color: DarkRed;
	color: White;
}
/*colors every even dark display*/
body[light-mode=dark] .mediadisplay:nth-of-type(even) {
	border-top: medium;
	border-left: medium;
	border-right: medium;
    border-bottom: 0px;
	border-style: solid;
    border-color: DarkGray;
	background-color: MidnightBlue;
	color: White;
}
/*colors every odd light display*/
body[light-mode=light] .mediadisplay:nth-of-type(odd) {
	border-top: medium;
	border-left: medium;
	border-right: medium;
    border-bottom: 0px;
	border-style: solid;
	background-color: Cornsilk;
	color: Black;
}
/*colors every even light display*/
body[light-mode=light] .mediadisplay:nth-of-type(even) {
	border-top: medium;
	border-left: medium;
	border-right: medium;
    border-bottom: 0px;
	border-style: solid;
	background-color: PowderBlue;
	color: Black;
}

/* custom-button syntax: <input type="button" value="Click me" onclick="msg()" class="custom-button"> to add color use class="custom-button Red" to center button add style="margin:0 auto;display:block;" */
.custom-button, .clickable-heading {
	border-radius: 6px;
	border: 3px solid DarkGray;
	font-weight:bold;
	width: auto;
	margin: 6px;
	padding: 3px 8px;
	White-space: nowrap;
	background: -moz-linear-gradient(top, WhiteSmoke, Gray);
	background: -ms-linear-gradient(top, WhiteSmoke, Gray);
	background: -webkit-linear-gradient(top, WhiteSmoke, Gray);
	background: linear-gradient(top, WhiteSmoke, Gray);
	color: Black !important;
	cursor: pointer;
}

.custom-button, .clickable-heading a {
	text-decoration: none;
	color:inherit;
}

.red {
	background: -moz-linear-gradient(top, Red, DarkRed);
	background: -ms-linear-gradient(top, Red, DarkRed);
	background: -webkit-linear-gradient(top, Red, DarkRed);
	background: linear-gradient(top, Red, DarkRed);
	color: Yellow !important;
}

.blue {
	background: -moz-linear-gradient(top, PowderBlue, Blue);
	background: -ms-linear-gradient(top, PowderBlue, Blue);
	background: -webkit-linear-gradient(top, PowderBlue , Blue);
	background: linear-gradient(top, PowderBlue, Blue);
	color: Yellow !important;
}

.darkblue {
	background: -moz-linear-gradient(top, DodgerBlue, DarkBlue);
	background: -ms-linear-gradient(top, DodgerBlue, DarkBlue);
	background: -webkit-linear-gradient(top, DodgerBlue, MidnightBlue);
	background: linear-gradient(top, DodgerBlue, DarkBlue);
	color: Yellow !important;
}

.cyan {
	background: -moz-linear-gradient(top, LightCyan, Cyan);
	background: -ms-linear-gradient(top, LightCyan, Cyan);
	background: -webkit-linear-gradient(top, LightCyan, CornflowerBlue);
	background: linear-gradient(top, LightCyan, Cyan);
	color: Black !important;
}

.green {
	background: -moz-linear-gradient(top, LimeGreen , DarkGreen);
	background: -ms-linear-gradient(top, LimeGreen , DarkGreen);
	background: -webkit-linear-gradient(top, LimeGreen , DarkGreen);
	background: linear-gradient(top, LimeGreen , DarkGreen);
	color: Yellow !important; // WhiteSmoke
}

.yellow, .clickable-heading {
	background: -moz-linear-gradient(top, Yellow, GoldenRod);
	background: -ms-linear-gradient(top, Yellow, GoldenRod);
	background: -webkit-linear-gradient(top, Yellow, GoldenRod);
	background: linear-gradient(top, Yellow, GoldenRod);
	color: Black !important;
}

.black {
	background: -moz-linear-gradient(top, DarkGray, Black);
	background: -ms-linear-gradient(top, DarkGray, Black);
	background: -webkit-linear-gradient(top, DarkGray, Black);
	background: linear-gradient(top, DarkGray, Black);
	color: Yellow !important;
}

.custom-button:hover {
	box-shadow: 0 0 7px 7px Black;
}

body[light-mode=dark] .custom-button:hover, .clickable-heading:hover {
	box-shadow: 0 0 7px 7px White !important;
}

body[light-mode=light] .custom-button:hover, .clickable-heading:hover {
	box-shadow: 0 0 7px 7px Black !important;
}


/* end custom-button */

/* start favplay-button favorite-playlist button <button class="favplay-button"> */
.favplay-button {
	background-color: Black;
	border: none;
	display: inline-block;
	color: White;
	padding: 5px;
	margin: 4px 2px;
	cursor: pointer;
	border-radius: 8px;
}

.favplay-button:hover {
	opacity: 0.5;
	filter: alpha(opacity=50); /* For IE8 and earlier */
	box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
/*	transform: scale(1.2); */
}
/* end favplay-button favorite-playlist button */

/* set two columns Syntax: <div class="twocolumns"> ... </div>*/
.twocolumns {
  -webkit-columns: 2 200px; /* Chrome, Safari, Opera */
     -moz-columns: 2 200px; /* Firefox */
          columns: 2 200px;
  -webkit-column-gap: 4em; /* Chrome, Safari, Opera */
     -moz-column-gap: 4em; /* Firefox */
          column-gap: 4em;
  -webkit-column-rule: 1px outset Gray; /* Chrome, Safari, Opera */
     -moz-column-rule: 1px outset Gray; /* Firefox */
          column-rule: 1px outset Gray;
  -webkit-column-rule-style: solid; /* Chrome, Safari, Opera */
     -moz-column-rule-style: solid; /* Firefox */
          column-rule-style: solid;

}
@media screen and (max-width: 700px) {
    .twocolumns {
		-webkit-column-count: 1; /* Chrome, Safari, Opera */
		   -moz-column-count: 1; /* Firefox */
				column-count: 1;
    }
}

.threecolumns {
  -webkit-columns: 3;
     -moz-columns: 3;
          columns: 3;
  -webkit-column-gap: 20px;
     -moz-column-gap: 20px;
          column-gap: 20px;
    -webkit-column-width: 280px; /* Chrome, Safari, Opera */
    -moz-column-width: 280px; /* Firefox */
    column-width: 280px;

}


.nowrap { /* Syntax: <span class="nowrap"> text goes here</span>*/
    White-space: nowrap;
}

/* Tooltip Syntax: <div class="tooltip" onclick="tooltip()">Tip title goes here<span class="tooltiptext" id="tooltiptext">Tip goes here </span></div> */
.tooltip {
	position: relative;
	display: inline-block;
	color: Orange;
	font-weight: bold;
	cursor: pointer;
}

.tooltip .tooltiptext {
	visibility: hidden;
	width: 500px;
	background-color: Gainsboro;
	color: Black;
	text-align: left;
	White-space: normal;
	border: 2px Black solid;
	border-radius: 6px;
	padding: 5px 5px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
/* Position the tooltip */
	position: absolute;
	z-index: 1;
	margin-left: -60px;
	bottom: 100%;
/*

	left: -100%;
    margin-left: -150px;
*/
}

.tooltiptext ul  {
    margin: -4px 0;
}

.tooltiptext ul li {
	margin-left: -24px;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
/*	transform: scale(1.2); */
}
/* End Tool tips */

/*for member profile display makes 3 columns autoadjustable */
.memberdisplay {
	padding: 6px;
	color: Black;
}

/*colors every odd dark display*/
body[light-mode=dark] .memberdisplay:nth-of-type(odd) {
	border-top: medium;
	border-left: medium;
	border-right: medium;
    border-bottom: 0px;
	border-style: solid;
    border-color: DarkGray;
/*	background-color: DarkSlateBlue; */
	background-color: DarkBlue;
	color: Khaki;
}
/*colors every even dark display*/
body[light-mode=dark] .memberdisplay:nth-of-type(even) {
	border-top: medium;
	border-left: medium;
	border-right: medium;
    border-bottom: 0px;
	border-style: solid;
    border-color: DarkGray;
	background-color: MidnightBlue;
	color: Khaki;
}
/*colors every odd light display*/
body[light-mode=light] .memberdisplay:nth-of-type(odd) {
	border-top: medium;
	border-left: medium;
	border-right: medium;
    border-bottom: 0px;
	border-style: solid;
	background-color: Cornsilk;
	color: Black;
}
/*colors every even light display*/
body[light-mode=light] .memberdisplay:nth-of-type(even) {
	border-top: medium;
	border-left: medium;
	border-right: medium;
    border-bottom: 0px;
	border-style: solid;
	background-color: PowderBlue;
	color: Black;
}

/*Location colors for dark display*/
body[light-mode=dark] .location {
	color: Yellow;
	font-weight:bold;
}

/*Location colors for light display*/
body[light-mode=light] .location {
	color: Red;
	font-weight:bold;
}
/*Location colors for dark display*/
body[light-mode=dark] .location {
	color: OldLace;
	font-weight:bold;
}

body[light-mode=dark] .BottomMargin:nth-of-type(even) {
	margin-top: 0px;

	border: solid 2px DarkGray;
}

body[light-mode=dark] .BottomMargin:nth-last-of-type(odd) {
	margin-top: 0px;

	border: solid 2px DarkGray;
}
body[light-mode=light] .BottomMargin:nth-of-type(even) {
	margin-top: 0px;

/*	border: solid 2px DarkGray; Black odd*/
	border: solid 2px Black;
}

body[light-mode=light] .BottomMargin:nth-last-of-type(odd) {
	margin-top: 0px;

	border: solid 2px Black;
}

/* for members photos */
.member-photos .photos {
	border: 1px solid Black;
	padding: 5px;
//	margin-right: 5px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	float: left;
	width: auto;
	height: auto;
	font-size: 0.9em;
}
/*for member profile display  hanging indent paragraph syntax <p class="HangingIndent"> */
p.HangingIndent {
    list-style-type:none;
    padding: 0em;
    text-indent: -20px;
    padding-left: 20px;
    margin: 0;
}

/* MEMBERSEARCH replaced by MEMBERDISPLAY */
/*for member searh display colors every even display */
.membersearch:nth-of-type(odd) {
	border: medium;
	border-style: solid;
	color: Black;
	background-color: Cornsilk;

}
.membersearch:nth-of-type(even) {
	border-left: medium;
	border-right: medium;
	border-style: solid;
	border-top: 0px;
	border-bottom: 0px;
	color: Black;
	background-color: PowderBlue;

}
.membersearch a:link {
	color: Black;
}
.membersearch a:visited {
	color: Black;
}
.membersearch a:hover {
	color: blue;
	text-shadow: 1px 1px 15px Black;
/*	transform: scale(1.2); */
}

/* Change members only general items to Yellow */
body[light-mode=dark] .members {
	font-weight: bold;
	text-decoration: none;
	color: Yellow !important;
	font-size: 1.1em !important;
}

body[light-mode=light] .members {
	font-weight: bold;
	text-decoration: none;
	color: Yellow !important;
	text-shadow: -1px 0 Black, 0 1px Black, 1px 0 Black, 0 -1px Black !important;
	font-size: 1em !important;
}

body[light-mode=dark] .members:hover {
	color: Black !important;
	font-weight: bolder;
	text-decoration: none;
	text-shadow: 0 0 5px Yellow, 0 0 5px Yellow, 0 0 5px Yellow, 0 0 5px Yellow !important;
/*	transform: scale(1.2); */
}

body[light-mode=light] .members:hover {
	color: Yellow !important;
	font-weight: bolder;
	text-decoration: none;
	text-shadow: 0 0 5px Black, 0 0 5px Black, 0 0 5px Black, 0 0 5px Black !important;
/*	transform: scale(1.2); */
}

body[light-mode=dark] .allviewers  {
	font-weight: bold;
	text-decoration: none;
	color: White !important;
	font-size: 1.1em !important;
}

body[light-mode=light] .allviewers {
	font-weight: bold;
	text-decoration: none;
	color: Black !important;
	font-size: 1.1em !important;
}

body[light-mode=dark] .allviewers:hover {
	color: Black !important;
	font-weight: bolder;
	text-decoration: none;
	text-shadow: 0 0 5px White, 0 0 5px White, 0 0 5px White, 0 0 5px White !important;
/*	transform: scale(1.2); */
}

body[light-mode=light] .allviewers:hover {
	color: White !important;
	font-weight: bolder;
	text-decoration: none;
	text-shadow: 0 0 5px Black, 0 0 5px Black, 0 0 5px Black, 0 0 5px Black !important;
/*	transform: scale(1.2); */
}

/* Footer begin */
.footerelementleft { 
  float: left;
  vertical-align: middle;
  margin-right: 1.1%;
  margin-left: 1.1%;
}

.footerelementright { 
  position: absolute;
  right: 70px;
  text-align: right;
  vertical-align: middle;
  min-width: 250px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 250px) {
	.footerelementright { 
		float: left;
		width: 98%;
		text-align: left;
		vertical-align: middle;
		margin-right: 1.1%;
		margin-left: 1.1%;
	}
}
/* Footer end */

/* Start Login screen Full-width input fields */
.login input[type=text], input[type=password] {
	width: 100%;
	display: inline-block;
	box-sizing: border-box;
	border-radius: 6px;
}

/* The Modal (background) */
.modal {
	display: none; /* Hidden by default */
	position: fixed; /* Stay in place */
	z-index: 1; /* Sit on top */
	left: 0;
	top: 0;
	width: 100%; /* Full width */
	height: 100%; /* Full height */
	overflow: auto; /* Enable scroll if needed */
	border-radius: 6px;
	background-color: rgb(0,0,0); /* Fallback color */
	background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 }

/* Modal Content/Box */
.modal-content {
	background-color: White;
	margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */
	border: 1px solid Black;
	border-radius: 6px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.4);
	max-width: 425px;
}

/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 400px) {
  .modal-content {
     margin-left: 15px;
     margin-right: 15px;
  }
  .optionbuttons {
     width: 100%;
     margin-bottom: 12px;
     height: 28px;
  }
  .containerbuttons {
     padding-bottom: 100px;
  }
}
/*end Login Screen */

/* 
START MENU BAR CODE 
!important is used specifically to keep the menu items in Dark/Light modes
see https://www.w3schools.com/css/css_important.asp
*/
#container {
	margin: 0 auto;
	max-width: 890px;
}

.toggle,
[id^=drop] {
	display: none;
}

/* Giving a background-color to the nav container. */
nav { 
	margin:0;
	padding: 0;
	background-color: DimGray !important; 
	color: White !important;
}

/* Since we'll have the "ul li" "float:left"
 * we need to add a clear after the container. */
nav:after {
	content:"";
	display:table;
	clear:both;
}

/* Removing padding, margin and "list-style" from the "ul",
 * and adding "position:reltive" and centering top horizontal menu */
nav ul {
	float: right;
	display: flex;
	justify-content: center;
	padding:0;
	margin:0;
	list-style: none;
	position: relative;
	color: White !important;
}
	
/* Positioning the navigation items inline */
nav ul li {
	margin: 0px;
	display:inline-block;
	background-color: DimGray !important;
	color: White !important;
	}

/* Styling the links a:link, a:visited then a:hover */
nav a {
	display:block;
	padding: 0 10px;	
	line-height: 30px;
    width: auto;
	color: White !important;
	text-decoration:none;
	font-size: 0.9em;
	font-weight: bold;
}

nav ul li ul a:link {
	color: White !important;
	font-weight: bold;
	background-color: transparent;
	text-decoration: none;
}

nav ul li ul a:visited {
  color: White;
  font-weight: bold;
  background-color: transparent;
  text-decoration: none;
}

nav a:hover { 
	background: Orange !important; 
	font-size: 0.9em; /* has to be the same number as "nav a" */
	font-weight: bold; /* has to be the same number as "nav a" */
	text-shadow: 0 0 5px Black, 0 0 5px Black, 0 0 5px Black, 0 0 5px Black !important;
}

/* Hide Dropdowns by Default
 * and giving it a position of absolute */
nav ul ul {
	display: none;
	position: absolute; 
	top: 30px; /* has to be the same number as "nav a" */
    min-width: 100px; /* has to be the same number as "nav a" */
}
	
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:inherit;
}
	
/* First Tier Dropdown */
nav ul ul li {
	width: auto;
	float:none;
	display:list-item;
	position: relative;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
	z-index: 99; /* Higher  number the closer to the front */
}

/* Second, Third and more Tiers	
 * We move the 2nd and 3rd etc tier dropdowns to the left
 * by the amount of the width of the first tier.
*/
nav ul ul ul li {
	position: relative;
	top:-60px;
	/* has to be the same number as the "width" of "nav ul ul li" */ 
	left:170px; 
	color: White !important;
}

/* Change ' +' in order to change the Dropdown symbol */
nav li > a:after { content:  ' +'; }
nav li > a:only-child:after { content: ''; }


/* Change members only menu items to Yellow */
nav ul ul li.membersonly a {
	color: Yellow !important;
	font-weight: bolder;
	text-decoration: none;
}

/* Change members only menu items to Yellow */
nav ul li.membersonly a {
	color: Yellow !important;
  font-weight:bolder;
}

/* Media Queries
--------------------------------------------- */
@media all and (max-width : 768px) {

	nav {
		margin: 0;
	}

	/* Hide the navigation menu by default */
	/* Also hide the  */
	.toggle + a,
	.menu {
		display: none;
	}
	
	nav a {
		padding-left: 20px;
	}
	/* Styling the toggle label */
	.toggle {
		display: block;
		background-color: DimGray;
		color: White;
		padding: 4px 20px;	
		text-decoration:none;
		border:none;
		color: White;
		font-size: 0.9em;
		font-weight: bold;
	}

	.toggle:hover {
		background: Orange !important; 
		font-size: 0.9em; /* has to be the same number as "nav a" */
		font-weight: bold; /* has to be the same number as "nav a" */
		text-shadow: 0 0 5px Black, 0 0 5px Black, 0 0 5px Black, 0 0 5px Black !important;

	}

	/* Display Dropdown when clicked on Parent label */
	[id^=drop]:checked + ul {
		display: block;
		padding-left: 10px;
	}

	/* Change menu item's width to 100% */
	nav ul li {
		display: block;
		width: 100%;
		padding-left: 0px;
		}

	nav ul ul .toggle,
	nav ul ul a {
		padding: 0 40px;
		color: White;
	}

	nav ul ul ul a {
		padding: 0 80px;
		color: White;
	}

	nav ul li ul li .toggle,
	nav ul ul a,
	nav ul ul ul a{
		padding:14px 20px;	
		color: White;
		font-size: 0.9em;
		font-weight: bold;
	}
  
	nav ul li ul li .toggle,
	nav ul ul a {
		padding: 0px 20px;	
	}

	/* Hide Dropdowns by Default */
	nav ul ul {
		float: none;
		position:static;
		color: Black;
		/* has to be the same number as the "line-height" of "nav a" */
	}
		
	/* Hide menus on hover */
	nav ul ul li:hover > ul,
	nav ul li:hover > ul {
		display: none;
	}
		
	/* First Tier Dropdown */
	nav ul ul li {
		display: block;
		width: 100%;
	}

	nav ul ul ul li {
		position: static;
		/* has to be the same number as the "width" of "nav ul ul li" */ 

	}
}

@media all and (max-width : 330px) {
	nav ul li {
		display:block;
		width: 94%;
	}
}
/* End Menu bar code */