.header1_left {
		flex: 1 1 70px;          /* grow | shrink | min width */
		
	}
	.footer_box {
	  height: 1em;	
	  margin:auto;
	  max-width: 940px;
	}
	.footer {
		height: 100px;
		font-family: 'Calibri';
		padding: 0.5em;
		width:100%;
		margin:0;
		padding:0;
        /* background: linear-gradient(160deg,#555 30%,#000 100%); */
		background: #fff;
		border-top:1px solid gray;
		text-align:left;
		color: #333;  
	}
	.footer a:link {
		float: left; 
		color:#333;
		margin-right:1em;
		text-decoration: underline;
	}
	.footer a:link:hover{
		color:#333;
		text-decoration: underline;
	}
	.content {
		background-color: #fff;
		margin:auto;
		opacity: 1.0;
		padding-left:10px;
		padding-bottom:50px;
		line-height: 1.5em;
		max-width:964px;
	}
	.header1_right {
		margin-top:2em; 
		border-top: 1px solid #333; 
		float: right; 
		font-size:0.71em;
		height:2.5em;
		overflow:hidden;
		width:700px;
	}
	.header1_right languageIndicator {
		max-height: 0.1em; 
		float:left; 
		margin-top:0;
		margin-bottom:0;
		line-height: 0em;
		color:#333;
		font-size: 1.2em;
	}
	.float_left {
	  float:left;
	  padding-bottom:90px;
	}
	.float_left img{
	  max-width:100%;
	  padding:0.5em;
	}
	.float_right {
	  font-size: 0.8em;
	  float:right;
	  max-width:40%;
	}
	.float_right img{
	  max-width:100%;
	  padding:0.5em;
	}
	.login {
	  width:250px;
 	  margin: 0 auto;     /* centers horizontally */		
	}
	.intro_text {
	  max-width:400px; 
	  padding:1em; 
	  font-size:1.2em;
	  background-color: rgb(119, 21, 21);
	  margin:1em;
	  margin-right:0px;
	  color:#fff;
	  float:right;  
	}
	.flags {
	  float:right; 
	  width: 200px; 
	  height:50px;
	}
	.header1 .flag {
	  float: right;
	  margin: 0.4em 0 0 0;
	  height:1em;
	  padding-left:1em;
	}
body {
	margin:0;
	padding:0;
	background-color: #000;
	color: #333;
	font-family: 'Calibri';
	font-size:1.1em;
	line-height: 2em;
	width:100%;
	overflow-x:hidden;
}
.body {
	/*
	background-image: url('../images/home/bg.png');
	background-repeat: no-repeat;
	background-attachment: fixed;
    background-position: center bottom; 
	background-size: 100% 50%;
	background: linear-gradient(160deg,#545 30%,#000 100%);
	*/

	background-color: #fff;
	font-size:1.2em;
	margin: auto;
	color: #333;
	display: flex;
	flex-direction: column;
	overflow:hidden;
}
.no_scroll {
	display:none;	
}
.backline {
	background-color: #eee;
	width: 947px;	
	max-height:0.7em;
	text-align:left;
	font-size:0.7em;
	color: #333; 
	margin:auto;
	font-family: 'Calibri';
	line-height: 1.2em;
	margin-bottom: 0;
	padding: 0.5em;
}
.backline:hover{
	background-color: #aaa;
	width: 947px;	
	max-height:0.7em;
	text-decoration: underline;
	text-align:left;
	font-size:0.7em;
	color: #333; 
	margin:auto;
	font-family: 'Calibri';
	line-height: 1.2em;
	margin-bottom: 0;
	padding: 0.5em;
}
.content em {
	color: #333;
	font-weight: bold;
}
sup2 {
	color: #333;
}
sup1 {
	font-size: 85%;
}
.content img{
	width: auto;	
	margin:0;
	padding:0;
}
div .button_control {
	background-color: #101010;
	max-height: 50px;	
	display: block;
	margin-top:30px;
}
.button {
	height: 30px;
	margin-right: 10px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Calibri';
	color:#26337b;
	margin-bottom: 0.5em;
}
h1 {
	font-size: 1.4em;
	font-weight: 800;
}
h2 {
	font-size: 1.2em;
	font-weight: 600;
}
h6 {
	font-weight: 100;
	margin: 1em 0 0 0;
	padding: 0em;
	line-height: 0.7em;	
}
input:checked {
	accent-color: #101010;
}
.input_label {
	color: #101010;
}
a:link {
	color:#333;
	margin:5px;
	padding:5px;
}
a:hover {
	text-decoration: underline;
	color: #000;	
}
.header1 {
	height: 6em;
	color: #333;
	background: #fff;
	width:100%;
	margin:0;
	padding:0;
}
.header1 title1 {
	font-family: 'Calibri', sans-serif;
	font-size: 1.5em;
	vertical-align: top;
	height:50%;
	display: inline-block;
	margin-top:10px;
	margin-left: 1em;
}
.div_back {
	width: 90px;
	text-align: center;
	vertical-align:top;
	margin-top: 0px;
	display: inline-block;
	margin-left: 100px;
}
.div_back:hover{
	color: #000;
}
.header1 img {
	height:100%;
}
ul,
ol {
	padding: 3px 3px 0 0;
	margin: 0 0 9px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
	margin-bottom: 0;
}
li {
	line-height: 1.5em;
	padding-left:1em;
	margin-bottom: 3px;
	word-wrap: break-word;
}
div .fazit {
	padding:5px;
	background: #a6cdf6;
	color:#222;
}
div .fazit a:link {
	color: #0062c8;
}
div .fazit  em {
	color: #000;
	font-weight: bold;
}
div .fazit1 {
	padding:5px;
	background: #FBE4D5;
	color:#222;
}
div .fazit1 a:link {
	color: #0062c8;
}
div .fazit1  em {
	color: #000;
	font-weight: bold;
}
div .fazit2 {
	padding:5px;
	background: #FFF2CC;
	color:#222;
}
div .fazit2 a:link {
	color: #0062c8;
}
div .fazit2  em {
	color: #000;
	font-weight: bold;
}
div .fazit3 {
	padding:5px;
	background: #E2EFD9;
	color:#222;
}
div .fazit3 a:link {
	color: #0062c8;
}
div .fazit3  em {
	color: #000;
	font-weight: bold;
}
div .fazit4 {
	padding:5px;
	background: #D9E2F3;
	color:#222;
}
div .fazit4 a:link {
	color: #0062c8;
}
div .fazit4 em {
	color: #000;
	font-weight: bold;
}
table.WithoutHeader td {
  border: 0px solid;
  vertical-align: top;
  text-align: left;
  padding-right:10px;
  border-collapse: collapse;
}

table.yellowTable {
  max-width: calc(100% - 1px);
  min-width: calc(100% - 1px);
  background-color: #fff;
  text-align: center;
  border-collapse: collapse;
}
table.yellowTable td {
  border: 1px solid #333;
  padding: 2px 2px;
  padding-left: 5px;
  line-height: 22px;
}
table.yellowTable th {
  border: 1px solid #666;
  padding: 2px 2px;
  padding-left: 5px;
  line-height: 22px;
}
table.yellowTable td.notop, table.yellowTable th.notop {
  border-top: none;
}
table.yellowTable td.nobottom, table.yellowTable th.nobottom {
  border-bottom: none;
}
table.yellowTable td.notopleft, table.yellowTable th.notopleft {
  border-top: none;
  border-left: none;
}
table.yellowTable td.notopright, table.yellowTable th.notopright {
  border-top: none;
  border-right: none;
}
table.yellowTable a {
  color: #26337b;
}
table.yellowTable th.bright {
  border: 1px solid #ccc;
  background-color: #8fb0d3;
  color: #101010;
  padding: 3px 2px;
}
table.yellowTable td.dark {
  border: 1px solid #ccc;
  background-color: #DEEAF6;
  color: #000;
  padding: 3px 2px;
}
table.yellowTable tbody td {
  font-size: 15.5px;
  color: #000;
}
table.yellowTable.small tbody td {
  font-size: 14px;
  color: #ccc;
}
table.yellowTable thead {
  background-color: rgb(166, 205, 246);
}
table.yellowTable thead th {
	font-size: 15.5px;
	font-weight: bold;
	color: #000000;
}
table.yellowTable.small thead th {
	font-size: 14px;
	font-weight: bold;
	color: #000000;
}
table.yellowTable thead select {
	font-size: 13px;
	font-weight: normal;
	color: #000000;
	background: #555;
}
table.yellowTable thead th.yellow {
  font-size: 13px;
  font-weight: normal;
  background: #555;
  color: #bbbbbb;
}
table.yellowTable thead th.yellow_font {
  font-size: 13px;
  font-weight: normal;
  color: #555;
}
table.yellowTable td.green_font{
  color: #158c15;
}
table.yellowTable td.bold_font{
  font-weight:bold;
}
table.yellowTable td.gray1{
  background: #d4e9ff;
}
table.yellowTable td.gray2{
  background: #005252;
}
table.yellowTable td.gray3{
  color: #959595;
}
table.yellowTable td.yellow{
  background: #c49300;
  color: #333;
}
table.yellowTable td.yellow2{
  background: #FFF2CC;
  color: #333;
}
table.yellowTable td.yellow1{
  background: #b38200;
  color: #333;
}
table.yellowTable td.green{
  background: #507a34;
  color: #eee;
}
table.yellowTable td.green1{
  background: #305812;
  color: #ccc;
}
table.yellowTable td.green2{
  background: #E2EFD9;
  color: #333;
}

table.yellowTable td.yellow_font{
  color: #d0b20b;
}
table.yellowTable td.blue2{
  background: #365d73;
  color: #CCCCCC;
}
table.yellowTable td.blue_font{
  color: #abc4ff;
}
table.yellowTable td.brown{
  background: #3d1901;
  color: #CCCCCC;
}
table.yellowTable td.blue1{
  background: #012d45;
  color: #CCCCCC;
}
table.yellowTable td.red{
  background: #770000;
  color: #AAAAAA;
}
table.yellowTable td.red1{
  background: #660000;
  color: #AAAAAA;
}
table.yellowTable td.red_font{
  color: #FF6363;
}
table.yellowTable td.red2{
  background: #6e293c;
  color: #c679ce;
}
table.yellowTable td.red3{
  background: #FFC2A3;
}
table.yellowTable td.red2_font{
  color: #dd74e8;
}
table.yellowTable td.silver{
  color: #acacac;
}
table.yellowTable td.silver1{
  background: #888888;
  color: #CCCCCC;
}
table.yellowTable td.underline_font {
	text-decoration: underline;
}
table.yellowTable td.strikediag {
   background-image: repeating-linear-gradient(163deg, transparent 0%, transparent 48%, #555 50%, transparent 52%, transparent 100%);
}
table.yellowTable td.white{
  border-left-style:none;
  border-top-style:none;
  border-right-style:none;
  background: #EEEEEE;
  color: #222222;
  width: 30px;
}
table.yellowTable td.white1{
  border-left-style:none;
  border-bottom-style:none;
  border-right-style:none;
  background: #EEEEEE;
  color: #222222;
  width: 30px;
}
table.yellowTable td.black{
  border-left-style:none;
  border-right-style:none;
  background: #343434;
  color: #CCCCCC;
  width: 30px;
}
table.yellowTable td.fix{
  width: 30px;
}
table.yellowTable small{
  font-size: 11px;
  color: #666666;
}
table.Comments {
	border: none;
	border-spacing: 5px 20px;
}
table.Comments tr td{
	border: none;
	font-size: 1.3em;
	margin-bottom: 1em;
	vertical-align:top;
}
table.whiteTable {
  border: 1px solid #A58100;
  background: #FFFEEA;
  text-align: center;
  font-family: "Calibri", sans-serif;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
table.whiteTable td, 
table.whiteTable th {
  border: 1px solid #898989;
  padding: 3px 2px;
  white-space:nowrap;
	width: 8.3333%;
}
table.whiteTable td:nth-child(12n+3),
table.whiteTable td:nth-child(12n+4),
table.whiteTable td:nth-child(12n+7),
table.whiteTable td:nth-child(12n+8),
table.whiteTable th:nth-child(6n+2),
table.whiteTable th:nth-child(6n+4)
{
    background: #EEEDD9;
	width: 8.3333%;
}
table.whiteTable tr.no_h_border {
	border-bottom: hidden;
	line-height:14px;
}
table.whiteTable th.hero:hover{
  background-color: #771515;
  color: #FFFEEA;
}
table.whiteTable th.hero:hover a:link {
	text-decoration: underline;
  color: #FFFEEA;
}
table.whiteTable th.hero:hover a:hover {
	color: #dda200;
	font-size: 16px;
	font-weight: bold;  
}
table.whiteTable td.hero:hover{
  background-color: #771515;
  color: #FFFEEA;
}
table.whiteTable td.hero:hover a:link {
	text-decoration: underline;
	color: #FFFEEA;
}
table.whiteTable td.hero:hover a:hover {
	color: #dda200;
}
table.whiteTable tbody td {
  color: #000000;
}
table.whiteTable thead {
 background: #FFFEEA;
}
table.whiteTable thead th {
  font-weight: normal;
  color: #000000;
}

table.whiteTable a:link {
	color: #000;
	text-decoration: underline;
}
table.whiteTable a:hover, a:focus {
	color: #9f7a02;
}

table.whiteTable2nd td:nth-child(12n+1),
table.whiteTable2nd td:nth-child(12n+2),
table.whiteTable2nd td:nth-child(12n+5),
table.whiteTable2nd td:nth-child(12n+6),
table.whiteTable2nd td:nth-child(12n+9),
table.whiteTable2nd td:nth-child(12n+10),
table.whiteTable2nd th:nth-child(6n+1),
table.whiteTable2nd th:nth-child(6n+3),
table.whiteTable2nd th:nth-child(6n+5)
{
  background: #EEEDD9;
  	width: 8.3333%;
}
table.whiteTable2nd td:nth-child(12n+3),
table.whiteTable2nd td:nth-child(12n+4),
table.whiteTable2nd td:nth-child(12n+7),
table.whiteTable2nd td:nth-child(12n+8),
table.whiteTable2nd td:nth-child(12n+11),
table.whiteTable2nd td:nth-child(12n+12),
table.whiteTable2nd th:nth-child(6n+2),
table.whiteTable2nd th:nth-child(6n+4),
table.whiteTable2nd th:nth-child(6n+6)
{
    background: #FFFEEA;
	width: 8.3333%;
}

table.whiteTable2nd td{
  color: black;
}

table.whiteTable2nd {
  border: 1px solid #A58100;
  width: 100%;
  background: #FFFEEA;
  text-align: center;
  border-collapse: collapse;
  font-size: 13px;
}

tabi {
	margin-left: 30px;
}

#ComboNotes{
 width:60px;   
 background-color: #555; 
 color: #eee; 
 border: 0;
}

#ComboScales{
 width:330px;   
 background-color: #555; 
 color: #eee; 
 border: 0;
}

#ComboShowFunctions{
 width:100px;   
 background-color: #555; 
 color: #eee; 
 border: 0;
}

.dark {
 background-color: #222222; 
 color: #AAAAAA; 
}

.crop 
{ 
    width: 600px;
	margin-bottom: 20px;
	height: 300px;
	overflow: hidden;
} 

.notesOneLine01
{
	height: 0;
	padding-bottom: 18%;
	overflow: hidden;
	/* background: #FFFEEA;*/
	background: #fff;
	margin-top: 0px;
	margin-bottom: 20px;
}

.notesOneLine01 img
{
	width: 100%;
	overflow: hidden;
	margin-top: 0.5%;
}
.notesOneLine01Plus
{
	height: 0;
	padding-bottom: 22%;
	overflow: hidden;
	/* background: #FFFEEA;*/
	background: #fff;
	margin-top: 0px;
	margin-bottom: 20px;
}

.notesOneLine01Plus img
{
	width: 100%;
	overflow: hidden;
	margin-top: 0.5%;
}

.notesOneLine01narrow
{
	height: 0;
	padding-bottom: 17%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notesOneLine01narrow img
{
	width: 100%;
	overflow: hidden;
	margin-top: -3%;
}

.notesOneLine01narrow1
{
	height: 0;
	padding-top: 1%;
	padding-bottom: 16%;
	overflow: hidden;
	background: #fff;
	margin-top:-4px;
	margin-bottom: -5px;
}

.notesOneLine01narrow1 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -4%;
}


.notesOneLine02
{
	height: 0;
	padding-bottom: 25%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notesOneLine02 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -3%;
}
.notesOneLine02-1
{
	height: 0;
	padding-bottom: 25%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notesOneLine02-1 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -2.7%;
}

.notesOneLine02-2
{
	height: 0;
	padding-bottom: 25%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notesOneLine02-2 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -1.3%;
}

.notesOneLine03
{
	height: 0;
	padding-bottom: 23%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notesOneLine03 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -1%;
}

.notesOneLine04
{
	height: 0;
	padding-bottom: 24%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notesOneLine04 img
{
	width: 100%;
	overflow: hidden;
	margin-top:0%;
}

.notes2lines1
{
 	height: 0;
	padding-bottom: 37%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
	width: 100%;
}

.notes2lines1 img
{
	width: 100%;
	overflow: hidden;
	margin-top: 0;
}

.notes2lines1border
{
 	height: 0;
	padding-bottom: 33%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
	border: 4px solid #b88a00;	
}

.notes2lines1border img
{
	width: 100%;
	overflow: hidden;
	margin-top: 0;
}

.notes2lines2
{
	height: 0;
	padding-bottom: 53%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes2lines2 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -3%;
}

.notes2lines3
{
	height: 0;
	padding-bottom: 38%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes2lines3 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -2%;
}

.notes2lines4
{
	height: 0;
	padding-bottom: 53%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes2lines4 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -1%;
}

.notes2lines5
{
	height: 0;
	padding-bottom: 42%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes2lines5 img
{
	width: 100%;
	overflow: hidden;
	margin-top: 1%;
}
.notes3lines1
{
	height: 0;
	padding-bottom: 65%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes3lines1 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -2%;
}

.notes3lines2
{
	height: 0;
	padding-bottom: 80%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes3lines2 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -2%;
}

.notes3lines3
{
	height: 0;
	padding-bottom: 60%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes3lines3 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -2%;
}

.notes4lines1
{
	height: 0;
	padding-bottom: 100%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes4lines1 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -2%;
}

.notes5lines1
{
	height: 0;
	padding-bottom: 117%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes5lines1 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -3%;
}

.notes5lines2
{
	height: 0;
	padding-bottom: 90%;
	overflow: hidden;
	background: #fff;
	margin-top: -3px;
	margin-bottom: 20px;
}

.notes5lines2 img
{
	width: 100%;
	overflow: hidden;
	margin-top: 1%;
}

.notesSlashTriads
{
	height: 0;
	padding-bottom: 67%;
	overflow: hidden;
	background: #fff;
	margin-top: -5px;
	margin-bottom: 20px;
}

.notesSlashTriads img
{
	width: 100%;
	overflow: hidden;
	margin-top: -2%;
}

.notesSlash1
{
	height: 0;
	padding-bottom: 48%;
	overflow: hidden;
	background: #fff;
	margin-top: -5px;
	margin-bottom: 20px;
}

.notesSlash1 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -2%;
}

.notesSlash2
{
	height: 0;
	padding-bottom: 125%;
	overflow: hidden;
	background: #fff;
	margin-top: -5px;
	margin-bottom: 20px;
}

.notesSlash2 img
{
	width: 100%;
	overflow: hidden;
	margin-top: -1%;
}
.notesSlash2_1
{
	height: 0;
	padding-bottom: 140%;
	overflow: hidden;
	background: #fff;
	margin-top: -5px;
	margin-bottom: 0px;
}

.notesSlash2_1 img
{
	width: 100%;
	overflow: hidden;
	margin-top: 0%;
}

.container_footer {
	background-color: rgb(87, 87, 86);
    margin: 20px 0px 0px 0px;
	padding: 30px 10px 0px 10px;
    height: 30px;    
}
.container_footer:hover {
}

.zoom {
  padding: 20px;
  flex: 1 1 220px; /* grow | shrink | min width */
  background: linear-gradient(160deg,#7396a4 30%,#000 100%);
  color: #fff;
  transition: transform .2s; 
  height: 203px;
  max-width: 220px;
  width: 220px;
  margin-left:20px;
  margin-right:30px;
  margin-top:30px;  
}
.zoom img{
  max-height: 70%;
  max-width: 100%;
  margin: 0px;
}
.zoom p{
	font-size: 20px;
	font-family: 'Calibri', sans-serif;
	margin: 0px 0px 0 0;
}
.zoom:hover {
  transform: scale(1.05);
  background-color: #772626;
  color: #DDDCC8;
  transition: transform .2s
}
.zoom2 {
  padding: 8px;
  float: left;
  background-color: #772626;
  color: #9f7a02;
  transition: transform .2s; 
  height: 220px;
  width: 190px;
  margin: 20px 20px 10px 0px;
}
.zoom2:hover {
  transform: scale(1.2);
  background-color: #771515;
  color: #DDDCC8;
  transition: transform .2s
}
.zoom_small {
  padding: 5px;
  justify-content: center;
  background-color: #772626;
  color: #Bf9c24;
  font-size: 16px;
  transition: transform .2s; 
  height: 60px;
  width: 260px;
  margin: 5px 5px 5px 0px;
}
.zoom_small:hover {
  transform: scale(1.2);
  background-color: #771515;
  color: #DDDCC8;
  transition: transform .2s}

.zoom1 {
  padding: 8px;
  float: left;
  background-color: #772626;
  color: #9f7a02;
  transition: transform .2s; 
  height: 40px;
  width: 8.3333%;
  margin: 20px 20px 20px 0px;
}
.zoom1:hover {
  transform: scale(1.2);
  background-color: #772626;
  color: #DDDCC8;
  transition: transform .2s}

.harmony {
  width: 30%;
}
.harmony1 {
  padding: 8px;
  float: right;
  background-color: #772626;
  color: #9f7a02;
  transition: transform .2s; 
  width: 300px;
  margin:0px 0px 0px 100px;
}
.wrapper {
  height: 100%;
  width: 100%;
  overflow-x:auto;     	
}
.board {
	width:2600px;
}
table.pianoTable {
  border-collapse: collapse; 
  table-layout: fixed;
  white-space: nowrap;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  color:#fff;
  background: #454545;
  vertical-align: middle;
}
table.pianoTable tr.keys {
  text-align: center;
  line-height: 16px;  
}
table.pianoTable tr.no {
  background: #624500;
  height: 30px;
  text-align: center;
  overflow:hidden;
}
table.pianoTable td {
  overflow: hidden;
  padding: 0;
  margin: 0;
}
table.pianoTable th {
  border-left: 1px solid #666666;
  border-right: 1px solid #666666;
  overflow: hidden;
  max-height:1px;
}
table.pianoTable td.rot90 {
  transform:  translateX(0%) translateY(0%) rotate(-90deg);
  height: 35px;
  text-align:center;
}
table.pianoTable th img{
    width: 100%;
	height: 90px;
	opacity:0.7;	
}
table.pianoTable th.voice{
  display: inline-block;
  height: 12px;
}
.white{
  background: #eeedd9;
  color: #222222;
}
.white_r{
  border-right: 1px solid #898989;
  background: #eeedd9;
  color: #222222;
}
.white_l{
  border-left: 1px solid #898989;
  background: #eeedd9;
  color: #222222;
}
.black{
  background: #343434;
  color: #CCCCCC;
}
.black_l{
  border-left: 1px solid #898989;
  background: #343434;
  color: #CCCCCC;
}
.black_r{
  border-right: 1px solid #898989;
  background: #343434;
  color: #CCCCCC;
}
.bass{
  background: #DF2B25;
  height: 10px;
}
.git{
  background: #F5E706;
  height: 10px;
}
.bVoice{
  background: #ED891F;
  height: 10px;
}
.alt{
  background: #375AA6;
  height: 10px;
}
.sopran{
  background: #712B82;
  height: 10px;
}
.tenor{
  background: #258046;
  height: 10px;
}
.gray{
  background: #777777;
}
.highlight{
  background: #00FF00;
  color: #FF0000;
}
p1{
  font-size: 1em;
  line-height: 1.2em;
}
.username {
  line-height: 1.3em;
  margin: 0.5em 0 1em 0;
  width:14em;
}
.btn_hero {
  background-color: rgb(119, 21, 21);
  width:7em;
  height:3em;  
  color:#fff;
}
.editable {
  border-collapse: collapse;
  max-width:95%;
  table-layout: fixed;
  font-size:0.7em;
  margin:0.5em;
  padding:0.5em;
  overflow-wrap: break-word;
  
}
.editable th, .editable td {
  text-align: left;
  padding:5px;
}
.editable thead {
  color: #333;
  background: #a58424;
}
.editable tbody tr:nth-child(2n+1) {
  background: #333;
  color:#ccc;
}
.editable tbody tr:nth-child(2n) {
  background: #555;
  color:#ccc;
}
.editable td.edit {
  background: #777;
}
.header_box {
  height: 6em;
  margin:auto;
  max-width: 964px;
  display: flex;
  flex-wrap: wrap;          /* allows wrapping on smaller screens */
	
}
.content_top {
  margin-top:0;
  padding:0;
  margin:auto;
  max-width: 940px;
}
.content_top img {
  margin:auto;
  max-width: 100%;
}
.terms_conditions {
	position: absolute;
    bottom: 0;
	width:100%;
	color: #fff;
	min-height:2em;
	padding:1em;
	background: #7396a4;
}
.zoom_container {
	display: flex;
	flex-wrap: wrap;          /* allows wrapping on smaller screens */
  	gap: 16px;                /* spacing between boxes */	
}