/* 
TO CHANGE YOUR SITE'S COLOR SCHEME:
Use the ":root" section below to change site's color scheme.
SOME EXAMPLE COMBOS
Example 01/blue:	39f/28c/369/012
Example 02/green:	696/585/474/121
Example 03/brown:	ba7/a96/985/321
Example 04/browngreen:	997/886/775/442
Example 05/brownpurple:	a98/987/765/210
Example 06/turqoise:	799/688/577/033
Example 07/purple:	789/678/567/234
Example 08/magenta:	a56/945/723/612
Example 09: 888/666/444/222
Example 10: 07b/059/048/222
*/

/* FOR TESTING/VIEWING LAYOUT ON W3NOISE.org */
/*
#soundlistwrapper { background-color: #f00; }
.sounditemclass { background-color: #246; }
.itemtitle { background-color: #0f0; }
.itembuttons { background-color: #00f; }
#footerwrapperdiv { background-color: #f00; }
#stickywrapper { background-color: #eee; }   REMOVE ITS BGCOLOR BELOW
.controlrowclass { background-color: #fff; }
#voiceplayerinner { background-color:#0f0; }
 */


:root {
  --textcolor: #fff;
  --textdimcolor: #ddd;
  --lightcolor: #036;
  --midcolor: #024; /* 333 */
  --darkcolor: #012; /* 222 */
  --darkercolor: #000;
  --darkestcolor: #000;
  --videoxflashcolor: #f00;
  --bgbuttoncolor: #002B00; /* Used for midpoint between 020 and 030: https://meyerweb.com/eric/tools/color-blend */
}



/* GENERAL PAGE STYLES */


html{
    min-height:100%; /* This is needed for our background images */
    position:relative;
    scroll-behavior: smooth;
}


/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'RobotoCondensed';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/roboto-condensed-v27-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* i Made audiofont in Inkscape
   It only has 3 characters: D (down arrow), > (play button), and | (for pause button) INSTEAD OF: ⏸, ▶ / ▶
   Converted to woff at: https://cloudconvert.com/ttf-to-woff2 / OR https://convertio.co/ttf-woff/  | or vertopal.com
   https://www.youtube.com/watch?v=9rNex959Zbs
   https://www.youtube.com/watch?v=9rNex959Zbs
*/
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'AudioFont';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/audiofont.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'RobotoCondensed';
  font-style: normal;
  font-weight: 700;
  src: url('fonts/roboto-condensed-v27-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


body, input, select {
	font-family: RobotoCondensed, 'Arial Narrow', Arial, Helvetica, sans-serif;
	/* font-size is set in responsive section */
	color:var(--textcolor);
	margin:0;
	background-color:var(--lightcolor);
}



button {
	font-family: RobotoCondensed, 'Arial Narrow', Arial, Helvetica, sans-serif;
	font-size: 15px; /* was 16 for liberation */
}

button:hover{ cursor:pointer; }


.buttoncontinue {
	font-size: 16px;
	font-weight:bold;
	width:85px;
}


.buttonexit {
	font-size: 16px;
	font-weight:bold;
	width:50px;
}


.buttoncancel {
	font-size: 16px;
	font-weight:bold;
	width:70px;
}



#wrapper {
	margin:0;
}


a{color:var(--textcolor);text-decoration:underline;}
a:visited{color:var(--textcolor);}
a:hover{color:var(--textcolor);}


/*
YOUR OWN LOGO:
Name your logo "logo.png", put it in /pics/ folder, and change the values below to its width/height.
The recommended max width for a logo is 250px.
*/


#toplogodiv {
	margin:20px auto 15px auto;
	width:250px;
	height:auto;
}


#logo {
	width:250px; 
	/* height:128px; */
	height:auto;
}



#maincontentdiv {
	width:90%;
	max-width:550px;
	margin-left:auto;
	margin-right:auto;
	text-align:center;
}

.texttop {
	text-align:center;
	background-color:var(--midcolor);
	font-size:1.1em;
	display:block; /* Was inline-block */
}

/* Box-shadows don't work well on spans, so we're setting a max-width for each paragraph separately */
#texttop1 {
	max-width:500px;
	margin:0 auto 10px auto;
	border:3px solid #fff;
	border-radius:30px;
	padding:10px 10px;
}

.clickbox { 
	width:180px;
	text-align:center;
	margin:10px 15px;
	background-color: var(--darkercolor);
	padding:2px 4px;
	border:1px solid var(--textdimcolor);
	font-size:0.85em; /* Was 0.75 */
	border-radius:0.5em;
	display:inline-block;
	position:relative;
	text-decoration:none;
}

.clickbox:hover {
	cursor: pointer;
	border:1px solid var(--textcolor);
}

.boldclick {
	font-weight:bold;
	font-size:1.15em;
}


#bgimgdiv {
  position: fixed;
  left:0;
  right:0;
  width:100%;
  top:0;
  bottom:0;
  height: 100%;
  z-index:-500;
}


/* WAS USING THIS RATHER THAN bgimg01/01overly below UNTIL 10/2024
#bgimgdiv img {
  position: absolute;
  left:0;
  right:0;
  width:100%;
  top:0;
  bottom:0;
  height: 100%;
  transition: opacity 1.0s;
}
*/

#bgimg01 {
  position: absolute;
  left:0;
  right:0;
  width:100%;
  top:0;
  bottom:0;
  height: 100%;
  /* transition: opacity 1.0s; */
}


#bgimg01overlay {
	position: absolute;
	left:0;
	right:0;
	width:100%;
	top:0;
	bottom:0;
	height: 100%;
	opacity: 0;
	transition: opacity 2s;
	-webkit-transition-duration: 2s;
	-moz-transition-duration: 2s;
	-o-transition-duration: 2s;
	transition-duration: 2s;
}


.listreg {
	max-width:210px;
	text-align:center;
	font-size:1em;
	margin:20px auto;
	/* background-color:var(--lightcolor); */ 
	/* text-shadow: 0px 2px 2px rgba(255, 0, 0, 3); */
	/* box-shadow: 0 0 10px 10px var(--lightcolor); */
}

.listreg a { 
	position:relative;
	background-color:var(--lightcolor);
	text-decoration:none;
}

.clickdiv {
	background-color:var(--midcolor); 
	border:2px solid var(--textdimcolor);
	padding:10px;
	margin-top:10px;
}

.closetextdiv {  /* This is the circled X on dropdown movie and faq's */
	height:2.6ex;
	width:2.6ex;
	border-radius:50px;
	cursor:pointer;
	border:1px solid var(--textcolor);
	position:absolute;
	top:-12px;
	right:-12px;
	background-color:var(--midcolor);
	font-weight:bold;
	z-index:10;
	line-height:2.6ex;
	text-align:center;
}

.closetextbutton {
	width:100%;
	margin:0 auto 15px auto;
	background-color:var(--darkercolor);
	color:var(--textcolor);
	font-size:1.1em;
	font-weight:bold;
	padding:7px;
	border-radius:10px;
	cursor:pointer;
}

.closetextbutton:hover {
	background-color:var(--darkestcolor);
}

#closevideoxdiv {
	position: fixed;
	top: 0; /* was 30px */
	right: 0;
	z-index:1030;
	display:none;
	padding:0;
	text-align:right;
	width:150px;
}

#closevideoxsubdiv1 {  /* This is now covering the YT share button to avoid audio sharing confusion */
	width:150px;
	height:60px;
	margin:0 auto;
	font-size:30px;
	color:var(--textcolor);
	background-color:#000;
	font-weight:bold;
	text-decoration:none;
	text-align:center;
	/* cursor:pointer; */
}

#closevideoxsubdiv2 {
	width:110px;
	padding:10px 10px 0 0;
	overflow:hidden;
	line-height:90px;
	font-size:150px;
	color:var(--textcolor);
	font-weight:bold;
	text-decoration:none;
	text-shadow:1px 1px 2px black;
	cursor:pointer;
}

.boldclass {
	font-weight:bold;
}

.nowrapspan {
	margin-right:10px;
	margin-left:10px;
	white-space:nowrap;
}


.videobuttons { 
	position:relative;
	text-align:center;
	margin:7px;
	background-color: var(--darkestcolor);
	padding:3px 6px 4px 6px;
	border:1px solid var(--textdimcolor);
	/* box-shadow:0 0 1px 1px var(--textcolor); */
	font-size:0.75em;
	border-radius:.6em;
	display:inline-block;
	cursor:pointer;
	text-decoration:none;
}

.videobuttons:hover {
	border:1px solid var(--textcolor);
	box-shadow:0 0 1px 1px var(--textcolor); 
}



/* POPUP/MODAL TEXT BOX STYLES */

.poptextwrapperdiv {
    justify-content: center;
    align-items: center;
	width: 100%;
	/* height: 100%; Removed 2/14 */
	margin: 0;
	background-color:var(--midcolor);
	position:fixed;
	top:0;
	left:0;
	bottom: 0; /* Added 2/14 */
	overflow-y:scroll; /* Added 2/14 */
}

#poptextwrapperdiv1 { z-index:400; }
#poptextwrapperdiv2 { z-index:401; }
#poptextwrapperdiv3 { z-index:402; }
#poptextwrapperdiv4 { z-index:403; }
#poptextwrapperdiv5 { z-index:404; }
#poptextwrapperdiv6 { z-index:405; }
#poptextwrapperdiv7 { z-index:406; }

.poptextcontent {
	width: calc(100% - 20px);
	max-width:600px; /* This is also set in the popShowText function, special case for narrower content */
	color:var(--textdkcolor);
	/* max-height: calc(100% - 20px); Removed 2/14 */
	/* overflow:auto; Removed 2/14 */
	background-color:var(--darkcolor);
	padding:0 10px 15px 12px;
	border: 1px solid rgba(255, 255, 255, .5);
	border-radius:10px;
}


.hiddenpopups {
	display:none;
}

/* These are the fullscreens */
#youtubeframe, #vimeoframe {
	margin: 0;
	width: 100%;
	height: 100%;
	background-color:#000;
	z-index:1020;
	position:fixed;
	top:0;
	left:0;
}

.sharelinkinput {
	width:100%;
	text-align:center;
	font-size:0.8em;
	margin:1px auto;
	padding:2px;
	background-color:var(--lightcolor);
	border:0;
	color:var(--textcolor);
	border:1px solid var(--darkcolor);
}

#sharelinkinput2::selection { background-color: var(--darkcolor); }
#sharelinkinput2::-moz-selection { background-color: var(--darkcolor); }

#sharelocalvideo {
	width:100%;
	text-align:center;
	font-size:0.8em;
	margin:15px auto 1px auto;
	padding-top:7px;
	padding-bottom:20px;
	background-color:transparent;
	border:0;
	color:var(--textdimcolor);
	opacity:60%;
	cursor:pointer;
	text-decoration:underline;
}

#sharelocalvideo::selection { background-color: var(--midcolor); }
#sharelocalvideo::-moz-selection { background-color: var(--darkcolor); }


.stopbodyscroll { /* This is in scripts.js */
  height: 100%;
  overflow: hidden;
}


/* POPUP/MODAL MOVIE BOX STYLES */


#videodiv {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 80%;
	max-width: 640px;
	padding:0; /* Not in one version */
	margin:0 auto; /* Not in one version */
	text-align:center; /* Not in one version */
	background: #000 url('pics/loading.gif') top center/100% no-repeat; /* WAS: background: #000 url('pics/loading.gif') top left no-repeat; BUT: that wasn't getting the 100% below */
    background-size: 100% auto;
    background-repeat: no-repeat;
	z-index: 1020;
	overflow: visible;
}

#videoxdiv {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	width: 80%;
	height: 315px; 
	max-width: 560px;
	padding:0; /* Not in one version */
	margin:0 auto; /* Not in one version */
	text-align:center; /* Not in one version */
	background-color: #000; 
	z-index: 1020;
	overflow: visible;
}

#videoxiframe {
	border:none;
	border:0;
	margin:0;
}

#videobgdiv {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1010;
	width: 100%;
	height: 100%;
	overflow: auto; /* Not in one version */
	background-color: var(--darkcolor);
	/* If want opacity, do:
	-moz-opacity: 0.8;
	opacity: 0.8;
	filter: alpha(opacity=80);
	*/
}

.copyvidurlconfirmation {
	position:absolute; 
	display:none;
	left:-130px;
	top:-30px; /* top:-40px */
	z-index:1100;
	background-color:var(--darkestcolor);
	color:var(--textcolor);
	text-align:center;
	font-size:1em;
	font-weight:bold;
	padding:7px 7px 6px 6px;
	white-space:nowrap;
	border-radius:5px;  /* border-radius:0 0 0 5px; */
	border:1px solid var(--textdimcolor);
	transition: opacity .3s ease-in-out;
}

#creditsdiv{
	display:none;
	background-color: var(--darkestcolor);
	border-radius: 15px;
	padding:15px;
	text-align:left;
	color:var(--textcolor);
	position: fixed;
	width: 280px;
	max-width:90%;
	max-height:85%;
	overflow-x: hidden; 
	overflow-y: auto; 
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 1015;
}

#creditsdiv li{
	font-weight:normal;
	margin-bottom:8px;
}

.creditslittle {
	font-size:0.8em;
	color:var(--textdimcolor);
}

#creditsclosebuttondiv {
	position:absolute;
	/* For testing: background-color:#f00; */
	right:5px;
	top:5px;
	font-size:45px;
	font-weight:bold;
	cursor:pointer;
	line-height:30px;
	height:auto;
	width:auto;
}


#imagecreditsdiv {
	text-align:right;
	display:none;
	position:fixed;
	font-size:0.9em;
	z-index:500; /* Was 1, but needs to be above timer */
	padding:0 3px;
	opacity:0.8;
	white-space:nowrap;
	line-height:200%;
}

#imagenextdiv {
	text-align:right;
	display:block; /* was "none" for responsive */
	position:fixed;
	font-size:0.8em;
	z-index:1;
	padding:0 3px;
	opacity:0.8;
	white-space:nowrap;
}

.imagecreditslink, #imagenextlink {
	background-color:var(--darkcolor);
	padding:1px 5px;
	border:1px solid var(--textcolor);
	border-radius:0.3em;
	text-decoration:none;
}


/* COPY2CLIPBOARD CONFIRMATION FOR VIDEOS */

#copyconfirmationdiv {
	position:fixed;
	top:8px;
	right:8px;
	z-index:1100;
	background-color:var(--darkestcolor);
	text-align:center;
	font-size:1em;
	font-weight:bold;
	color:var(--textcolor);
	padding:7px 7px 6px 6px;
	opacity:1;
	white-space:nowrap;
	border-radius:5px;  /* border-radius:0 0 0 5px; */
	border:1px solid var(--textdimcolor);
	transition: opacity .3s ease-in-out;
}



/* BEGIN WNOISE ONLY STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES */
/* BEGIN WNOISE ONLY STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES */
/* BEGIN WNOISE ONLY STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES | BEGIN WNOISE STYLES */

audio {
	width: 50%;
}


/* Audio player */
.audioplayerclass {
	width: 100%;
	margin-bottom: 15px;
}


#stickywrapper {
	display: none;
	margin:0 auto;
	position: sticky;
	top: 0;
	width:100%;
	max-width:550px;
	text-align:center;
	background-color:#024;
	border:3px solid #fff;
	border-radius:30px;
	padding:5px 0 0 0; /* bottom was 10px before min/maximize */
	z-index:100;
}


#controlwrapper {
	text-align:center;
	margin:0 auto;
	width:90%;
	max-width:550px;
}


#controlallsection {
	width:360px;
	max-width:95%;
	text-align:center;
	margin:5px auto 0 auto;
}


.controlrowclass {
	display: flex;
	width:100%;
	margin:-5px auto 0 auto;
}


.controlallbuttons {
	margin:0 10px 0 0; /* Do other margins on "controlallsection" */
	display:inline-block;
	background-color:#369;
	padding:3px 5px;
	color:#fff;
	font-weight:bold;
	border:none;
	border-radius:5px;
	cursor:pointer;
}

.controlallbuttons:hover {
	background-color: #258; /* Darker on hover */
}


#bookmarkbox {
	display:none;
	text-align:center;
	/* background-color:#ccc; */
	padding:5px 0 5px 0;
	margin:0 auto 0 auto;
	/* border-top:1px solid #ccc; */
	width:90%;
	max-width:550px;
}


.bookmarkbuttons {
	margin:0; /* Do first div's right margin in "bookmarkbox" */
	display:inline-block;
	background-color:#555;
	padding:3px 5px;
	color:#fff;
	border:none;
	border-radius:5px;
	cursor:pointer;
}


.bookmarkbuttons:hover {
	background-color: #333; /* Darker on hover */
}


.timerbuttons {
	margin:0;
	display:inline-block;
	background-color:#036;
	border:1px solid #eee;
	padding:3px 5px;
	/* font-size:1em; SET IN INDIVIDUAL SECTIONS */ 
	color:#fff;
	font-weight:bold;
	border-radius:5px;
	cursor:pointer;
}

.timerbuttons:hover {
	background-color: #012; /* Darker on hover */
}


.closetimerx {
	position:absolute;
	right:-10px;
	top:-10px;
	font-weight:bold;
	font-size:24px;
	line-height:27px;
	height:28px;
	width:28px;
	text-align:center;
	border-radius:50%;
	background-color:#012;
	color:#fff;
	border:1px solid #fff;
	cursor:pointer;
}


#playpauseallbutton {
	/* display:none; */
}

.playbuttonclass {
	width:40px;
	height:40px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size:25px;
	background-color: #369; /* Match the slider thumb */
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	text-decoration:none;
}

.playbuttonclass:hover {
	background-color: #147; /* Darker on hover */
}



.volumesliderclass {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width:calc(100% - 85px);
	height: 10px;
	margin: 15px auto 0 auto;
	color:#f00;
	background-color: #999;
	outline: none; /* Remove outline */
	border-radius: 5px;
	cursor: pointer;
}


/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
.volumesliderclass::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 25px; /* Set a specific slider handle width */
	height: 25px; /* Slider handle height */
	border-radius: 50%;
	background: #258; /* For color background of handle */
	cursor: pointer; /* Cursor on hover */
}

.volumesliderclass::-moz-range-thumb {
	width: 25px; /* Set a specific slider handle width */
	height: 25px; /* Slider handle height */
	border-radius: 50%;
	background: #258; /* For color background of handle */
	cursor: pointer; /* Cursor on hover */
}


#machine01 {
	text-align:center;
	background-color:transparent; /* 012 / transparent */
	max-width:350px;
	margin:0 auto 25px auto;
	/* border:3px solid #fff; */
	border-radius:10px;
	padding:15px 0;
	cursor:pointer;
}

.machinebuttonswrapper {
	display:block;
	white-space:nowrap;
}

.machinebuttons {
	display:inline-block;
	width:125px;
	margin:15px auto;
	background-color:#024;
	border:3px solid #369;
	padding:3px 5px;
	color:#fff;
	font-weight:bold;
	border-radius:5px;
	cursor:pointer;
}

.machinebuttons:hover {
	/* background-color: #012; Darker on hover */
	border:3px solid #eee;
}

#machinestartbutton {
	display: flex;
	justify-content: center;
	align-items: center;
	border:2px solid #0c0;
	border-radius:20px;
	margin:0 auto 15px auto;
	padding:0;
	background-color:#024;
	width:95%;
	height:41px;
	font-size:1.1em;
	color:#fff;
	font-weight:bold;
	white-space:nowrap;
	cursor:pointer;
}

.machinebuttonsnotloaded {
	display:inline-block;
	width:160px;
	margin:15px auto;
	background-color:#333;
	opacity:0.4;
	color:#eee;
	border:3px solid transparent;
	padding:3px 5px;
	/* font-size:1em; SET IN INDIVIDUAL SECTIONS */ 
	font-weight:bold;
	border-radius:5px;
}

.machinedownbutton, .machineclosebutton {
	display:none;
	text-decoration:none;
	background-color:#024;
	border-radius:50%;
	width:32px;
	height:32px;
	line-height:32px;
	text-align:center;
	font-weight:bold;
	color:#fff;
	cursor:pointer;
}

.machineclosebutton {
	margin-right:5px;
	font-size:22px;
}

.machinedownbutton {
	margin-left:5px;
	font-size:16px;
	font-family: AudioFont, RobotoCondensed, 'Arial Narrow', Arial, Helvetica, sans-serif;
}

#volumeslidermachinediv {
	display:none;
	position: sticky;
	justify-content: center;
	align-items: center;
	top: -5px;
	border:3px solid #369;
	border-radius:20px;
	background-color:#024;
	height:41px;
	width:calc(100% - 6px); /* Compensate for border */
	margin:0 auto 15px auto;
	/* padding:3px 5px; */
	/* font-size:1em; SET IN INDIVIDUAL SECTIONS */ 
	color:#fff;
	font-weight:bold;
	cursor:pointer;
}


#volumeslidermachine {
	-webkit-appearance: none;  /* Override default CSS styles */
	appearance: none;
	width:calc(100% - 10px);
	height: 10px;
	margin: 0 auto;
	padding:0;
	/* color:#f00; */
	background-color: #369;
	outline: none; /* Remove outline */
	/* border-radius: 5px; */
	cursor: pointer;
}


/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
#volumeslidermachine::-webkit-slider-thumb {
	-webkit-appearance: none; /* Override default look */
	appearance: none;
	width: 25px; /* Set a specific slider handle width */
	height: 25px; /* Slider handle height */
	border:none;
	/* border-radius: 50%; */
	background: url('pics/slider.png');
	/* background: #369; For color background of handle / fallback */
	cursor: pointer; /* Cursor on hover */
}

#volumeslidermachine::-moz-range-thumb {
	width: 25px; /* Set a specific slider handle width */
	height: 25px; /* Slider handle height */
	border:none;
	/* border-radius: 50%; */
	background: url('pics/slider.png');
	/* background: #369; For color background of handle / fallback */
	cursor: pointer; /* Cursor on hover */
}


.meditationbuttons {
	display:inline-block;
	width:25px;
	margin:15px auto;
	background-color:#024;
	border:3px solid #369;
	padding:3px 5px;
	color:#fff;
	font-weight:bold;
	border-radius:5px;
	cursor:pointer;
}

.meditationbuttons:hover {
	/* background-color: #012; Darker on hover */
	border:3px solid #eee;
}


.closebuttonclass {
	height:32px;
	width:32px;
	margin:4px 0 0 0;
	font-size:25px;
	font-weight:bold;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size:20px;
	color:#fff;
	background-color:#369;
	border:0;
	border-radius:50%;
	cursor:pointer;
}

.closebuttonclass:hover {
	background-color: #147; /* Darker on hover */
}


.audiotitlespanclass {
	font-size:0.9em;
}

.volumelevelspanclass {
	font-size:0.9em;
	margin-left:10px;
}


#soundlistwrapper {
	font-size:1.1em;
	text-align:center;
	margin:0 auto;
	width:100%;
	max-width:550px;
	/* Testing: background-color:#f00; */
}


.sounditemclass {
	width:90%;
	margin:15px auto 25px auto;
	/* background-color:#246; */
	border-radius:10px;
	padding:2px 0;
}

.sountitempopular {
	margin-top:25px;
}

.itemtitle {
	display:inline-block;
	position:relative; top:1px; /* This is to vertical align the title text with the buttons */
	width:225px;
	white-space:nowrap;
	/* text-align:center|LEFT; This is set below, and with scripts */
	font-weight:bold;
	margin-right:10px;
	/* TESTING: background-color:#0f0; */
}

.itemtitlespan {
	color:#fff;
	background-color:#036;
	border-radius:5px;
	padding:0 5px;
}

.itembuttons {
	display:inline-block;
	width:225px;
	white-space:nowrap;
	/* text-align:center|LEFT; This is set below, and with scripts */
	white-space:nowrap;
	/* TESTING background-color:#00f; */
}


.itempopular {
	font-weight:bold;
	font-size:0.65em;
	color:#fff;
	background-color:#012;
	vertical-align:top;
	margin-right:7px;
	border-radius:5px;
	padding:1px 2px;
}

.itemsample, .itemadd, .itemdown, .iteminfo {
	display:inline-block;
	margin-right:15px;
	text-decoration:none;
	background-color:#024;
	border-radius:50%;
	width:30px;
	height:30px;
	line-height:33px;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	color:#fff;
	cursor:pointer;
}

.itemdownpink {
	display:inline-block;
	margin-right:15px;
	text-decoration:none;
	background-color:#024;
	border-radius:50%;
	width:30px;
	height:30px;
	line-height:30px;
	text-align:center;
	font-size:16px;
	font-weight:bold;
	color:#9ce;
	cursor:pointer;
}

.playbuttonclass, .itemsample, .itemadd, .itemdown, .itemdownpink, .iteminfo {
	font-family: AudioFont, RobotoCondensed, 'Arial Narrow', Arial, Helvetica, sans-serif;
}

.iteminfohidden {
	/* visibility:hidden; */
	/* display:inline-block; */
	display:none;
	margin-right:15px;
	text-decoration:none;
	border-radius:50%;
	width:30px;
	height:30px;
	line-height:30px;
	font-size:15px;
	text-align:center;
	font-weight:bold;
}

.itemsample {
	position:relative;
	padding-left:1px;
	z-index:10;
}

.itemadd {
	position:relative;
	padding-left:3px;
	z-index:5;
}


/* Blinking text from: https://www.geeksforgeeks.org/how-to-create-blinking-text-using-css */

@keyframes blink {
	0% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}

	100% {
		opacity: 1;
	}
}

.nowplayingspanclass {
	font-family:RobotoCondensed;
	position:absolute; 
	/* left:-28px; */
	/* top:-25px; */
	left:-7px; /* was: 15px; */
	top:31px; /* was: -15px; */
	line-height:16px;
	font-size:14px;
	font-weight:bold;
	color:#fff;
	background-color:#036;
	padding:1px 3px;
	border-radius:5px;
	animation: blink 1.5s infinite;
}


#footerbellset, #footerbellmid, #footerbellmin, #footerbellmax, #footersort {
	display:none; /* When visible: inline-block */
	background-color:#024;
	color:#fff;
	font-size:1.3em;
	text-align:center;
	/* width will be defined by content with inline-block */
	padding:2px 3px 5px 3px;
	border-bottom:1px solid #246;
	border-radius:8px 8px 0 0;
	z-index:400;
}


#footerbellset, #footersort {
	border-top:18px solid #012;
	border-left:18px solid #012;
	border-right:18px solid #012;
	border-bottom:0;
}


#footerwrapperdiv {
	position:fixed;
	bottom:0;
	width:100%;
	text-align:center;
	/* background-color:#f00; */
	z-index:200;
}


#footerdiv {
	display:inline-block;
	width:515px;
	max-width:90%;
	background-color:#024;
	padding:2px 3px 8px 3px;
	margin-bottom:-4px;
	border-radius:5px;
	white-space:nowrap;
}

#headerwrapperdiv {
	position:fixed;
	top:0;
	width:100%;
	text-align:center;
	/* background-color:#f00; */
	z-index:190;
}

#headerdiv {
	display:inline-block;
	width:250px;
	max-width:90%;
	background-color:#024;
	padding:5px 3px 3px 3px;
	margin:-4px auto 0 auto;
	border-radius:5px;
	white-space:nowrap;
}

a.footerlink,a.headerlink{ color:#eee; text-decoration:underline; }
a.footerlink:visited,a.headerlink:visited{ color:#eee; text-decoration:underline; }
a.footerlink:hover,a.headerlink:hover{ color:#ffff; text-decoration:underline; }

#voiceplayerinner {   /* audioplayer4voice is inside of voiceplayerinner */
	display:inline-block;
	width:calc(100% - 45px);
	/* background-color:#0f0; */
}


#voiceplayerclosebutton {
	float:right;
}


#audioplayer4voice {   /* inside of voiceplayerinner div */
	margin:0 5px 0 0;
	padding:0;
	width:100%;
	height:35px;
	display:block;
	background-color:#246;
	float:left;
	border-radius:10px;
	background:none;
}


#footerbellset input[type='radio'] {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  margin-right:3px;
}

#footerbellset select {
	display:block;
	font-size:0.9em;
	margin:5px auto 5px auto;
	color:#fff;
	background-color:#036;
	border:1px solid #999;
}





/* BEGIN LOOPER STYLES | BEGIN LOOPER STYLES | BEGIN LOOPER STYLES | BEGIN LOOPER STYLES | BEGIN LOOPER STYLES */
/* BEGIN LOOPER STYLES | BEGIN LOOPER STYLES | BEGIN LOOPER STYLES | BEGIN LOOPER STYLES | BEGIN LOOPER STYLES */



#looperdivflexwrapper {
	display: flex;
	justify-content: center; /* Horizontal centering */
	align-items: center;     /* Vertical centering */
	height: 100vh;         /* Make sure the container takes full viewport height */
}

#looperdiv {
	text-align:center;
	background-color:var(--midcolor);
	font-size:1.1em;
	display:block; /* Was inline-block */
	max-width:100%;
	margin:0 auto 0 auto;
	border:3px solid #fff;
	border-radius:30px;
	padding:10px 0;
	z-index: 195; /* Above top menu, below bottom menu */
}


#loopercontrolwrapper {
	text-align:center;
	margin:0 auto;
}

.looperstartbuttons {
	display: flex;
	justify-content: center;
	align-items: center;
	border:2px solid #999;
	border-radius:20px;
	margin:0 auto 25px auto;
	padding:0;
	background-color:#036;
	width:265px;
	height:35px;
	color:#fff;
	font-size:0.95em;
	font-weight:bold;
	white-space:nowrap;
	cursor:pointer;
}

.looperstartbuttons:hover {
	border:2px solid #fff;
}


/* END LOOPER STYLES | END LOOPER STYLES | END LOOPER STYLES | END LOOPER STYLES | END LOOPER STYLES */
/* END LOOPER STYLES | END LOOPER STYLES | END LOOPER STYLES | END LOOPER STYLES | END LOOPER STYLES */



.binauralstartstopbuttons {
	display: flex;
	justify-content: center;
	align-items: center;
	border:2px solid #999;
	border-radius:20px;
	margin:25px auto 30px auto;
	padding:0;
	background-color:#036;
	height:35px;
	color:#fff;
	font-size:0.95em;
	font-weight:bold;
	white-space:nowrap;
	cursor:pointer;
}

#binauralstartstopbuttons:hover {
	border:2px solid #fff;
}



/* END WNOISE ONLY STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES */
/* END WNOISE ONLY STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES */
/* END WNOISE ONLY STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES | END WNOISE STYLES */



/* MOBILE RESPONSIVE ITEMS */
	

/* Text size for screen 1700px or narrower */
@media only screen and (max-width: 1700px) {
	body, input, select { font-size: 19px; }
}

/* Text size for screen 1701px or narrower */
@media only screen and (min-width: 1701px) {   
	body, input, select { font-size: 20px; }
}


/* If screen is 700px or narrower */
@media only screen and (max-width: 700px) {
	/* #bgimgdiv, .imagecreditslink, #imagenextdiv { display: none; } */
	#imagecreditsdiv { bottom:30px; right: 7px; }
	#imagenextdiv { bottom: 105px; right: 5px; }
}

/* If screen is 701px or wider */
@media only screen and (min-width: 701px) {   
	/* #imagecreditsdiv, #imagenextdiv { display: block; } */
	#imagecreditsdiv { top:7px; right: 7px; }
	#imagenextdiv { top: 45%; right: 15px; }
}