body
{
	width: 100%;
	font-family: Verdana, Geneva, sans-serif;
	background-image: url("Images/background.png");
	background-size: 100% 100%;
}

#title
{
	color: white;
	width: 15%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
	font-size: 30pt;
	text-align: center;
}

#description
{
	text-align: center;
	font-size: 15pt;
	padding-bottom: 50px;
	color: gray;
}

.button
{ 
	color: white;
	background-size: 100% 100%;
	font-size: 1.5em;
	font-family: Verdana, Geneva, sans-serif;
	background-color: transparent;
	border: none;
	cursor: pointer;
	opacity: 0.9;
	outline: none;
}

.button:hover 
{
	opacity: 1;
}

.button:active 
{
  box-shadow: 0 5px rgba(200,200,200,0.54);
  transform: translateY(4px);
}

.button2
{ 
	color: white;
	background-size: 100% 100%;
	font-size: 1.5em;
	font-family: Verdana, Geneva, sans-serif;
	background-color: transparent;
	border: none;
	cursor: pointer;
	opacity: 0.8;
	outline: none;
}

.button2:focus 
{
	opacity: 1;
}

#main_buttons
{
	resize: both;
	overflow: auto;
}

#auto
{
	background-image: url("Buttons/auto.png");
	background-size: 100% 100%;
	width: 13%;
	height: 13%;
	position: absolute;
	top: 25%;
	left: 31%;
}

#start
{
	background-image: url("Buttons/start.png");
	background-size: 100% 100%;
	border-radius: 20px;
	width: 13%;
	height: 13%;
	position: absolute;
	top: 25%;
	left: 45%;
}

#AO
{
	background-image: url("Buttons/advanced_options.png");
	background-size: 100% 100%;
	width: 13%;
	height: 13%;
	position: absolute;
	top: 25%;
	left: 59%;
}

#first1
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 46%;
	left: 25%;
}

#second1
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 48.6%;
	left: 25%;
}

#third1
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 51.2%;
	left: 25%;
}

#fourth1
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 53.8%;
	left: 25%;
}

#fifth1
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 56.4%;
	left: 25%;
}

#first2
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 72.7%;
	left: 25%;
}

#second2
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 75.3%;
	left: 25%;
}

#third2
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 77.9%;
	left: 25%;
}

#fourth2
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 80.5%;
	left: 25%;
}

#fifth2
{
	position: absolute;
	width: 50%;
	height: 0.3%;
	top: 83.7%;
	left: 25%;
}

#vert1
{
	position: absolute;
	width: 0.2%;
	height: 38%;
	top: 46%;
	left: 25%;
}

#vert2
{
	position: absolute;
	width: 0.2%;
	height: 38%;
	top: 46%;
	left: 75%;
}

#problems
{
	position: absolute;
	font-size: 12pt;
	color: gray;
	bottom: 0%;
	left: 23%;
}

#major
{
	background-image: url("Buttons/major.png");
	width: 25%;
	height: 10%;
	left: 20%;
}

#major:hover 
{
	background-image: url("Buttons/major_inversed.png");
	color: #8A3B8E;
}

#minor
{
	background-image: url("Buttons/minor.png");
	width: 25%;
	height: 10%;
	left: 10%;
	margin-right: 5%;
}

#minor:hover 
{
	background-image: url("Buttons/minor_inversed.png");
	color: #8A3B8E;
}

#reset
{
	visibility: hidden;
	border-radius: 20px;
	background-image: url("Buttons/start.png");
	width: 9%;
	height: 10%;
	position: absolute;
	left: 65%;
	top: 88%
}

.modal 
{
	display: none; 
	position: fixed;
	z-index: 10; 
	left: 0;
	top: 0;
	width: 100%; 
	height: 100%; 
	overflow: auto; 
	background-color: rgba(0,0,0,0.4); 
}

.modal-content 
{
	background-image: url("Images/modal_background.jpg");
	margin: 15% auto; 
	padding: 20px;
	border: 1px solid #888;
	width: 50%; 
	outline-style: outset;
	outline-color: darkgray;
	outline-width: 7px;
}

.close 
{
	color: #aaa;
	float: right;
	font-size: 28px;
	font-weight: bold;
}

.close:hover,
.close:focus 
{
  color: black;
  text-decoration: none;
  cursor: pointer;
}


.slider 
{
	-webkit-appearance: none; 
	padding-top:5px;
	appearance: none;
	width: 30%; 
	height: 25px; 
	background: #d3d3d3; 
	outline: none; 
	opacity: 0.8; 
	-webkit-transition: .2s; 
	transition: opacity .2s;
}

.slider:hover 
{
	opacity: 1; 
}

.slider::-webkit-slider-thumb 
{
	-webkit-appearance: none;
	appearance: none;
	width: 30px;
	height: 30px;
	border: 0;
	background: url("Buttons/slider.png");
	cursor: pointer;
}

.slider::-moz-range-thumb 
{
	width: 30px;
	height: 30px;
	border: 0;
	background: url("Buttons/slider.png");
	cursor: pointer;
}

#slider_value
{
	position: relative;
	color: white;
	font-size: 16pt;
	text-align: right;
	background: url("Buttons/value.png");
	background-size: 100% 100%;
	outline: none;
	border: none;
	width: 60px;
	height: 25px;
	top: -5px;
	opacity: 0.9;
}

#SN 
{
	background: url("Buttons/button.png");
	background-size: 100% 100%;
	border-radius: 30px;
	width: 20%;
	height: 13%;
	margin-top: 15px;
	margin-left: 15%;
	opacity: 0.8;
}

#SN:hover 
{
	background-image: url("Buttons/button_inversed.png");
	color: #8A3B8E;
}

.dropdown 
{
  position: relative;
  left: 15.2%;
  display: inline-block;
}

.dropdown-content 
{
	margin-left: 20;
	display: none;
	position: absolute;
	background-color: #f1f1f1;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	z-index: 1;
}

.dropdown-content a 
{
	color: black;
	padding: 5px 16px;
	text-decoration: none;
	display: block;
}

.dropdown-content a:hover 
{
	background-color: #ddd
}

.show 
{
	display:block;
}

table
{
	position: relative;
	bottom: 100px;
	left: 50%;
}

table, th, td
{	
	color: white;
	font-size: 20pt;
	font-family: Verdana, Geneva, sans-serif;
	border-collapse: collapse;
}

td
{
	cursor: pointer;
	padding: 16px;
	text-align: left; 
	color: white;
	height: 70%;	
}

#apply
{
	position: relative;
	background-image: url("Buttons/button.png");
	border-radius: 20px;
	background-size: 100% 100%;
	left: 42%;
	width: 18%;
	height: 13%;
}

#apply:hover 
{
	background-image: url("Buttons/button_inversed.png");
	color: #8A3B8E;
}

.octave_button
{
	background: url("Buttons/rekt.png");
	opacity: 0.8; 
	background-size: 100% 100%;
	outline: none;
}

.octave_button:hover 
{
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.octave_button:focus
{
	opacity: 1;
}