@import url('https://fonts.googleapis.com/css2?family=Russo+One&family=Ubuntu:wght@300&display=swap');

@font-face {
  font-family: "LCS";
  src: url("https://www.classtools.net/timer/lcd.ttf") format("truetype");
}

.mainWrapper,.wrapper,.tuneoptions,.preloadingBlurb,.introBlurb
{
-webkit-border-radius: 0px 20px 20px 20px;
-moz-border-radius: 0px 20px 20px 20px;
border-radius: 0px 20px 20px 20px;	
}
.vwrap {
  border-radius: 20px;
  overflow: hidden;
  z-index: 1000000;
  height:150px;
	width:200px;
	border:2px yellow solid;
}
.butt
{
background:#CCC;
border:1px black solid;
margin-top:10px;
padding:15px;
text-decoration:none;
color:black;
font-size:large;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right:5px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
cursor:pointer;	
}
.bg
{
-moz-transition: background-color 0.5s linear 0s;
    -webkit-transition: background-color 0.5s linear 0s;
    transition: background-color 0.5s linear 0s;	
	-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
}

select {
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #ccc;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(./images/down2.png) 96% / 15% no-repeat #eee;
}

input
{
line-height:0px;
display:block;
padding-top:0px;
margin:0px;	
}

.cent {
	text-align: center;
	margin:auto;
}

.youtube
{
height:200px;
width:300px;
border:0px;	
position:absolute;
top:0px;
left:0px;
}

.link
{
color:blue;	
cursor:pointer;
}
.tuneoptions
{
position:absolute;
font-family:Verdana, Geneva, sans-serif;
text-align:left;
display:none;
width:100%;
height:100%;
z-index:52;
background:yellow;
top:0px;left:0px;	
}

.introBlurb,.preloadingBlurb
{
position:absolute;
font-family: 'Ubuntu', sans-serif;
text-align:center;
display:block;
width:100%;
height:100%;
z-index:53;
top:0px;left:0px;
color:black;	

background: #ffff42; /* Old browsers */

background: -moz-linear-gradient(top,  #ffff42 51%, #e512ad 100%); /* FF3.6+ */

background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,#ffff42), color-stop(100%,#e512ad)); /* Chrome,Safari4+ */

background: -webkit-linear-gradient(top,  #ffff42 51%,#e512ad 100%); /* Chrome10+,Safari5.1+ */

background: -o-linear-gradient(top,  #ffff42 51%,#e512ad 100%); /* Opera 11.10+ */

background: -ms-linear-gradient(top,  #ffff42 51%,#e512ad 100%); /* IE10+ */

background: linear-gradient(to bottom,  #ffff42 51%,#e512ad 100%); /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffff42', endColorstr='#e512ad',GradientType=0 ); /* IE6-9 */

}

.preloadingBlurb {
background:black;
}

.loader-inner {
    bottom: 0;
    height: 60px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}

.loader-line-wrap {
    animation: 
		spin 2000ms cubic-bezier(.175, .885, .32, 1.275) infinite
	;
    box-sizing: border-box;
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    transform-origin: 50% 100%;
    width: 100px;
}
.loader-line {
    border: 4px solid transparent;
    border-radius: 100%;
    box-sizing: border-box;
    height: 100px;
    left: 0;
    margin: 0 auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 100px;
}
.loader-line-wrap:nth-child(1) { animation-delay: -50ms; }
.loader-line-wrap:nth-child(2) { animation-delay: -100ms; }
.loader-line-wrap:nth-child(3) { animation-delay: -150ms; }
.loader-line-wrap:nth-child(4) { animation-delay: -200ms; }
.loader-line-wrap:nth-child(5) { animation-delay: -250ms; }

.loader-line-wrap:nth-child(1) .loader-line {
    border-color: hsl(0, 80%, 60%);
    height: 90px;
    width: 90px;
    top: 7px;
}
.loader-line-wrap:nth-child(2) .loader-line {
    border-color: hsl(60, 80%, 60%);
    height: 76px;
    width: 76px;
    top: 14px;
}
.loader-line-wrap:nth-child(3) .loader-line {
    border-color: hsl(120, 80%, 60%);
    height: 62px;
    width: 62px;
    top: 21px;
}
.loader-line-wrap:nth-child(4) .loader-line {
    border-color: hsl(180, 80%, 60%);
    height: 48px;
    width: 48px;
    top: 28px;
}
.loader-line-wrap:nth-child(5) .loader-line {
    border-color: hsl(240, 80%, 60%);
    height: 34px;
    width: 34px;
    top: 35px;
}

@keyframes spin {
    0%, 15% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}


a:link
{
text-decoration:none;	
}

.red
{
color:red;	
}
h1
{
font-size:3em;	
}

.mainWrapper
{
position:relative;
margin-left: auto;
margin-right: auto;
left:0px;
width:80%;
}

#sideWrapper
{
font-family:"LCS", Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;	
position:fixed;font-size:1.2em;text-align:center;right:10px;width:300px;height:100%;z-index:51;padding:5px;
background: rgb(4,1,65);
background: linear-gradient(0deg, rgba(4,1,65,1) 0%, rgba(19,19,140,1) 62%, rgba(96,0,185,1) 100%);
color:white;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
border:1px yellow solid;
}
#sideWrapper a
{color:white;}

body,html
{background:black;
padding-top:15px;
padding-bottom:0px;
}


.delete, .add, .tune, .save, .fsBtn, .ssBtn
{
width:48px;
height:48px;
padding:5px;	
cursor:pointer;
}
.deletebutton, .addbutton, .tunebutton, .savebutton{
	position:absolute;
}
.deletebutton{display:none;}
.deletebutton, .savebutton
{
top:0px;right:0px;	
}
.addbutton
{
bottom:0px;	right:0px;
}
.tunebutton
{
bottom:0px;left:0px;
}


.lcd
{font-family:"LCS", 'Russo One', Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;	
font-size:5em;
color:red;
}




.wrapper
{
position:relative;
padding:20px;
text-align:center;
background: rgb(4,1,65);
background: linear-gradient(180deg, rgba(4,1,65,1) 0%, rgba(19,19,140,1) 62%, rgba(96,0,185,1) 100%);
border:1px yellow solid;
width:80%;
margin-left: auto;
margin-right: auto;	
}

.title{
font-family:"LCS", 'Russo One', Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
text-align:center;
border:0px;
background:transparent;
color:red;
font-size:5em;
}

.tabber
{text-align:center;
display: block;
border:0px;
width:0.75em;
font-size:15em;
padding:0px;
margin:0px;
font-family:"LCS", 'Russo One', Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
background: transparent;
color:red;
}

.but{
text-align:center;
font-size:5em;
font-family:"LCS", 'Russo One', Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
background:grey;
color:white;	
border: 0px;
}
.cent {
	text-align: center;
	color:white;
	font-family:"LCS", 'Russo One', Palatino, "Palatino Linotype", "Book Antiqua", Georgia, "Times New Roman", serif;
}


.btn {
	cursor:pointer;
	-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
	-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
	box-shadow:inset 0px 1px 0px 0px #ffffff;
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );
	background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');
	background-color:#ededed;
	-webkit-border-top-left-radius:37px;
	-moz-border-radius-topleft:37px;
	border-top-left-radius:37px;
	-webkit-border-top-right-radius:0px;
	-moz-border-radius-topright:0px;
	border-top-right-radius:0px;
	-webkit-border-bottom-right-radius:37px;
	-moz-border-radius-bottomright:37px;
	border-bottom-right-radius:37px;
	-webkit-border-bottom-left-radius:0px;
	-moz-border-radius-bottomleft:0px;
	border-bottom-left-radius:0px;
	text-indent:0;
	border:3px solid #dcdcdc;
	display:inline-block;
	color:blue;
	font-family:Arial;
	font-size:23px;
	font-weight:bold;
	font-style:normal;
	height:54px;
	line-height:54px;
	width:137px;
	text-decoration:none;
	text-align:center;
	text-shadow:1px 1px 0px #ffffff;
}
.btn:hover {
	background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );
	background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');
	background-color:#dfdfdf;
}.btn:active {
	position:relative;
	top:1px;
}

.largeBold
{
font-size:large;
font-weight:bold;
}

.introBlurb table {
    border-collapse: separate;
    border-spacing: 10;
}
.introBlurb td {
    border: 1px solid black;
    border-radius: 5px;
    -moz-border-radius: 5px;
    padding: 5px;
}



/* Main Classes */
.myinput[type="checkbox"]:before {
  position: relative;
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid #808080;
  content: "";
  background: #FFF;
}

.myinput[type="checkbox"]:after {
  position: relative;
  display: block;
  left: 2px;
  top: -11px;
  width: 7px;
  height: 7px;
  border-width: 1px;
  border-style: solid;
  border-color: #B3B3B3 #dcddde #dcddde #B3B3B3;
  content: "";
  background-image: linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
  background-repeat: no-repeat;
  background-position: center;
}

.myinput[type="checkbox"]:checked:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #B1B6BE 0%, #FFF 100%);
}

.myinput[type="checkbox"]:disabled:after {
  -webkit-filter: opacity(0.4);
}

.myinput[type="checkbox"]:not(:disabled):checked:hover:after {
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAQAAABuW59YAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAB2SURBVHjaAGkAlv8A3QDyAP0A/QD+Dam3W+kCAAD8APYAAgTVZaZCGwwA5wr0AvcA+Dh+7UX/x24AqK3Wg/8nt6w4/5q71wAAVP9g/7rTXf9n/+9N+AAAtpJa/zf/S//DhP8H/wAA4gzWj2P4lsf0JP0A/wADAHB0Ngka6UmKAAAAAElFTkSuQmCC'), linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
}

.myinput[type="checkbox"]:not(:disabled):hover:after {
  background-image: linear-gradient(135deg, #8BB0C2 0%, #FFF 100%);
  border-color: #85A9BB #92C2DA #92C2DA #85A9BB;
}

.myinput[type="checkbox"]:not(:disabled):hover:before {
  border-color: #3D7591;
}

/* Large checkboxes */
.myinput.large {
  height: 22px;
  width: 22px;
}

.myinput.large[type="checkbox"]:before {
  width: 20px;
  height: 20px;
}

.myinput.large[type="checkbox"]:after {
  top: -20px;
  width: 16px;
  height: 16px;
}