/* === define DarkMode or LiteMode by moving Comment tags === */
:root	{
	/* --- Begin DarkMode---*/
	/*===startSupress===
	--mainBGcolor: black;
	--mainTXTcolor: white;  
	--helpBGcolor: DarkBlue;
	--hoverColor: yellow;
	--activeColor: blue;
	===endSupress===*/
	/* --- End DarkMode---*/

	/* --- Begin LiteMode---*/
	--mainBGcolor: white;  
	--mainTXTcolor: black;  
	--helpBGcolor: LightBlue; 
	--hoverColor: blue;
	--activeColor: yellow;
	/* --- End LiteMode---*/
	}
/* === end define DarkMode or LiteMode by moving Comment tags === */

body 	{
	background: var(--mainBGcolor);
	color: var(--mainTXTcolor);
	font-family:courier; font-weight: bold; font-size: 250%;
	}

.homePG {
	font-family: "Times New Roman", Times, serif; font-size: 14px;
	}

h1{font-size:200%;}
h2{font-size:160%;}
h3{font-size:120%;}
h1,h2,h3{margin:1em 0;}
h4,h5,h6{font-size:100%;font-weight:normal;}

.blnk3	{display: block; 
	float: left; 
	clear: left; 
	font-family: serif;
	font-size:100%;
	font-weight:bold;
	width: 20%;
	min-height: 50px;
	text-align: center;
	text-decoration: none;
	border-radius: 8px;
	border-color: transparent;
	border-style: solid;
	border-width: 5px;
	margin: 10px 10px 20px 3px;
	padding: 2px 6px 2px 6px;
	}
.blnk3:hover {border-color: yellow;}
.blnk3:active {border-color: aqua;}

.blok1 {font-size:20px;
	font-family:serif;
	font-weight: normal;
	}

	/* <div class="blok1A"> puts a border around div */
.blok1A {border-style: solid;
	border-color: var(--mainTXTcolor);
	border-width: 2px;
	border-radius: 10px;
	padding: 8px;
	}

.ATL	{
	/* color:lightgray; */
	color:lightgray;
	font-size: 75%;
	font-style: italic;
	}

/* a:link {color:lightgray;} */
/* a:visited {color:lightgray;} */
/* a:hover {color:lightgray;} */
/* a:active {color:whitesmoke;} */
/* a {color: var(--mainTXTcolor);} */
a:link		{color: var(--mainTXTcolor); background-color: var(--mainBGcolor); }
a:visited	{color: var(--mainTXTcolor); background-color: var(--mainBGcolor); }
a:hover		{color: var(--hoverColor); background-color: var(--mainBGcolor); }
a:active	{color: var(--activeColor); background-color: var(--mainBGcolor); }

button	{
	font-family:courier;
	font-size: x-large;
	font-weight: bold;
	padding: 5px;
	margin: 5px auto;
	margin-right: 10px;
	/* color: #ccc; */
	/* background-color: #555; */
	color: var(--mainTXTcolor);
	background-color: DarkGray;
	border: 0 none;
	border-radius: 3px;
	text-shadow: 0 -1px 0 #000;
	}

button:active {
	color: black;
	/* background-color: whitesmoke; */
	background-color: palegreen;
	}

button.A {/* Button indicates current "Active" key */
	width: 15%;
	color: black;
	/* background-color: whitesmoke; */
	background-color: palegreen;
	}
button.C {width: 30%;
	}
button.CR {width: 30%;
	background-color: red; /* used in setup help page */
	} 
button.D {/* indicates "Active" (used for metronome)*/
	width: 30%;
	font-weight:bold;
	color: black;
	background-color: palegreen;
	}
button.F {width: 15%;} /* Inactive */

button.G {font-size: large;}

/* following buttons used for scrolling */
button.W {width: 13%; /* Blank & Hidden (like C,Z) */
	/* color: gray; */
	/* background: black; */
	font-size: large;
	}
button.X {width: 13%; /* Active (like A) */
	color: black;
	/* background-color: whitesmoke; */
	background-color: palegreen;
	font-size: large;
	}
button.Y {width: 27%; /* Inactive (like C) */
	font-size: large;
	}
button.Z {width: 13%; /* Inactive (like F) */
	font-size: large;
	}


label	{font-family:courier;
	font-size: large;
	font-weight: bold;
	/* color: #ccc; */
	/* color: white; ---DarkMode---*/
	/* color: black; ---LiteMode---*/
	/* background-color: black; ---DarkMode---*/
	/* background-color: white; ---LiteMode---*/
	}

#lyrix	{font-family:courier;
	font-family:Times New Roman;
	font-weight: bold;
	font-size: x-large;
	font-style : normal;
	overflow-y: auto;
	max-height: 1500px;
	}

/* ----- SETUPS FOR [Index] FILES -----*/
div#indexWrap { /* setup for [Index] files only */
	font-family:courier; font-size: x-large; 
	}


/* setup default link styles for <div id="indexWrap"> */
div#indexWrap a {color:var(--mainTXTcolor);}

/* <span class="ABC"> (uses default) used for target file link */

/* <span class="FNP"> used for File aNd Path only link */
div#indexWrap  .FNP a {color:lightblue;}

/* <span class="HIX"> used for Home IndeX link */
div#indexWrap  .HIX a {color:DimGray;}

/* <span class="PPP"> used Playlist Current Entry link */
div#indexWrap  .PPP a {color:Lime;}

div#idxx {
	width:100%;
	background-color: var(--mainBGcolor); 
	opacity: 90%;
	top: 5px;
	position: fixed;
	-webkit-backface-visibility: hidden; /* for position: fixed; in Android WebView */
	}

div#bottombox {
	/* clear:both; */
	width: 100%;
	overflow:auto;
	position: static;
	}

div#indexWrap button	{
	/* font-family:monospace; */
	font-size: 120%;
	font-weight: bold;
	padding: 1px;
	margin-top: 5px;
	margin-bottom: 0px;
	margin-right: 5px;
	margin-left: 0px;
	color: whitesmoke;
	background-color: #555;
	border: 5px none;
	border-radius: 10px;
	}

div#indexWrap button.I {
	/* width: 60px; */
	width: 40px;
	}
div#indexWrap button.I6 {
	/* width: 180px; */
	width: 120px;
	}