/*
Version: V1.0
Copyright 2020, Matt Pestle, All rights reserved.
Date: April 2020
Author: Matt Pestle, Afino Systems (matt.pestle@afinosystems.com)
*/

table.icoef_table td {
	padding-left: 1.2vw;
}

.versionText {
	font-size: 1.5vw;
}

.waytoosharp {
	background-color: blue;
	color: white;
}
.waytooflat {
	background-color: red;
	color: white;
}
.bittoosharp {
	background-color: lightblue;
}
.bittooflat {
	background-color: pink;
}
.ok {
	background-color: lightgreen;
}


.openingText {
	font-size: 2vw;
	font-style: italic;
}

.flashing {
  animation-name: example;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

.flashingups {
  animation-name: goingups;
  animation-duration: .1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes goingups {
  from {
	background-color: green;
	}
  to {
	background-color: lightblue;
	 background-image: -webkit-linear-gradient(bottom, green 30%, lightblue 100%, transparent 100%, transparent 100%);
	}
}

.flashingdowns {
  animation-name: goingdowns;
  animation-duration: .1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes goingdowns {
  from {
	background-color: green;
	}
  to {
	background-color: pink;
	 background-image: -webkit-linear-gradient(bottom, pink 30%, green 100%, transparent 100%, transparent 100%);
	}
}
.flashingupb {
  animation-name: goingupb;
  animation-duration: .1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes goingupb {
  from {
	background-color: green;
	}
  to {
	background-color: blue;
	 background-image: -webkit-linear-gradient(bottom, green 30%, blue 100%, transparent 100%, transparent 100%);
	}
}

.flashingdownb {
  animation-name: goingdownb;
  animation-duration: .1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes goingdownb {
  from {
	background-color: green;
	}
  to {
	background-color: red;
	 background-image: -webkit-linear-gradient(bottom, red 30%, green 100%, transparent 100%, transparent 100%);
	}
}
body {
}
.warning {
	color: red;
	font-style: italic;
}
.mybutton:focus, .mybutton:active {
	background-color: #a783d6;
	border-width:0px;
	border-color: white;
	border-style: solid;
}
.mybutton.active_button {
	background-color: #a783d6;
	border-width:0px;
	border-color: white;
	border-style: solid;
}
.mybutton.spacer {
	background-color: white;
	border: 0px solid white;
}
.mybutton {
	background-color: #7b629c;
	color: white;
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	width:8vw;
	height: 4vw;
	border-radius:1.0vw;
	margin-top: 0.2vw;
	margin-right: 0.2vw;
	display : inline-block;
	cursor: grab;
	font-size: 1.2vw;
	padding: 0;
}
.shortcut {
	display: none;
}
.slider_object {
	margin-top:10;
}
#setupcontainer {
	border: 0.1vw solid black;
	margin-top:1vw;
	margin-bottom:1vw;
	padding: 1vw;
	display:none;
}
#feedback2 {
	color: red;
	margin-left:1vw;
}
#feedback {
	margin-left:1vw;
	width:100vw;
	cursor: grab;
	padding-left: 3vw;
	display:none;
}
th {
	vertical-align: top;
}
.key {
	float: left;
	position: relative;
	vertical-align: bottom;
}
.white {
	height: 14vw;
	width: 4.34vw;
	z-index: 1;
	border-top: 0.12vw solid #AAAAAA;
	border-bottom: 0.12vw solid #AAAAAA;
	border-left: 0.12vw solid #AAAAAA;
	background-color: white;
}
.a, .b, .d, .e, .g, .black {
	margin: 0 0 0 -1.1676190476vw;
}
.middle_c {
	background-color: #EEEEEE;
}
.black {
	height: 8vw;
	width: 2.1vw;
	z-index: 3;
	border: 0.01vw solid #000000;
	background-color: #222222;
	margin: 0 0 0 -1.1676190476vw;
}
#keyboard > .key:last-child {
	border-right: 0.12vw solid #AAAAAA;
}
.key_active {
	background-color: lightgreen;
	z-index: 2;
}
.white.key_active {
	border-top: 0.12vw solid #AAAAAA;
	border-bottom: 0.12vw solid #AAAAAA;
	border-left: 0.12vw solid #AAAAAA;
}
#keyboard {
	width: 98vw;
	display:block;
	position: absolute;
	top:5vw;
	left:1vw;
}
.pin_gif {
    width: 60%;
    height: 60%;
    border: solid .25vw;
    transform: rotateY(0deg) rotate(45deg); /* needs Y at 0 deg to behave properly*/
    transition: transform 2s;
	border-radius: 0.9vw;
	margin: auto;
}
#pinblock_black {
	height: 4.0vw;
	position: absolute;
	top: 1.0vw;
	left:1vw;
}
#pinblock_white {
	height: 4.5vw;
	position: absolute;
	top: 20vw;
	left:1vw;
}
#pinblock {
	display:block;
	width:95vw;
	position: absolute;
}
#pinblock_white > .white_pin:last-child {
}
.pin_active {
	background-color: green;
	border: solid 0.3vw green;
}
.pin > .pin_active {
	color: green;
}
.black_pin > .pin_gif > .pin_active {
	background-color: green;
}
.black_pin {
	float: left;
	position: relative;
	height: 4.4vw;
	width: 4.35vw;
	background-color: white;
}
.white_pin {
	position: relative;
	float: left;
	height: 4.4vw;
	width: 4.4vw;
	background-color: white;
}
.black_pin_spacer0 {
	float: left;
	position: relative;
	height: 4.4vw;
	width: 2.5vw;
	background-color: white;
}
.black_pin_spacer1 {
	float: left;
	position: relative;
	height: 4.4vw;
	width: 4.5vw;
	background-color: white;
}
.tunercontainer {
/*	height:5vw; */
	position: relative;
	left:1vw;
	padding-top: 0vw;
	padding-bottom: 1vw;
}
#tuner .ui-slider-handle {
	background-color: green;
	width:4vw;
	height:4vw;
	text-align: center;
	vertical-align: middle;
	color: white;
	font-size: 1.5vw;
}
#tuner {
	border: 0.1vw solid green;
	height:3.3vw;
	display:none;
}
#other {
	display:flex;
	width: 98vw;
	margin-left:1vw;
	position: absolute;
	top: 23vw;
	margin-left: 1vw;
	padding-top: 2vw;
}
#get_started_panel {
	display:none;
	margin:auto;
	text-align: center;
	max-width: 90vw;
}
#tuningOptions {
	display:none;
}