html{
	font-family:"helvetica";
	background-color: #ecebea;
}
 #container {
	padding-top: 12px;
	display:table;
	margin: auto;
	width: 870px;
	height: 300px;
}
body {
	/*max-width: 1200px;*/
	margin: auto;
}
.chordSelector{
	margin: 10px 0 20px 0;
	transform-origin: top left;
	transform: scale(2,2);
	width:50%;
}
.keyDiagram{
	margin:0;
	margin-top:0;
	width:620px;
	height:100%;
	position:relative;
	transform-origin: top left;
	transform: scale(1.46,1.46);
}
#chordName {
	font-weight:bold;
	font-size:68px;
	width:594px;
	height:80px;
	Text-align:center;
	position:absolute;
	top:0;
	left:0;
}
.whiteKeys{
	margin-top:80px;
	position:absolute;
	top:0px;
	left:0px;
	border:solid black 2px;
}
.blackKeys{
	margin-top:50px;
	padding-left:22px;
	position:absolute;
	top:0px;
	left:0px;
}
.whiteKey {
	border:solid black 1px;
	background-color: white;
	width:40px;
	height:200px;
	float:left;
	cursor:pointer;
}
.blackKey {
	border:solid black 1px;
	margin:30px 15px 0 0;
	width:30px;
	height:120px;
	float:left;
	background-color:black;
	cursor:pointer;
}
.gapKey {
	margin-left:30px;
}
.blackDot{
	color:white;
	line-height: 1.3rem;
	margin:0 10px;
	margin-top:160px;
	text-align:center;
	background-color:black;
	height:20px;
	width:20px;
	border-radius:100%;
	color:white;
	visibility:hidden;
	transform-origin: center;
	transform: scale(1.4);
}
.whiteDot{
	line-height: 0.6rem;
	font-size: 0.6rem;
	padding: 1px;
	margin:0 5px;
	margin-left: 4px;
	margin-top:90px;
	text-align:center;
	background-color:white;
	height:20px;
	width:20px;
	border-radius:100%;
	visibility:hidden;
	transform-origin: center bottom;
	transform: scale(1.25);
}

sup, sub {
  vertical-align: baseline;
  position: relative;
  top: -0.4em;
}
.flat {
  vertical-align: top;
  position: relative;
  top: -0.16em;
  font-size: 1em;
}
.sharp {
  vertical-align: top;
  position: relative;
  top: -0.04em;
  font-size: 0.9em;
}

@media screen and (max-width: 1024px) {
	.sharp {top: -0.2em;}
}

/* Safari 7.1+ */
_::-webkit-full-page-media, _:future, :root .sharp, _::-webkit-full-page-media, _:future, :root .flat {
  vertical-align: bassline;
  font-size: 0.7em;
  top:0.25em;
  left: -0.15em;
}

/* Safari 10.1+ */
@media not all and (min-resolution:.001dpcm) {
	@media {
		.sharp, .flat {
		  vertical-align: bassline;
		  font-size: 0.7em;
		  top:0.25em;
		  left: -0.15em;
		}
	}
}


/*Menu styling*/

#menuCover {
	max-width: 1020px;
	/*background-color: rgba(21,18,26,0.95);*/
}
#menuCover li:hover {
	opacity: 0.95;
	background-color: #334;
}
li {color:white;}
.hoverIcon {cursor:pointer;}

.tutorial {
	width:100%;
	margin-top: 50px;
	/*display:none;*/
}
#notation {
	min-width: 380px;
	margin-right: 10px;
	float: left;
}
#chordImg {display:none; margin:auto;}
#info {
	font-family: "Trebuchet MS";
	position: relative;
	/*max-width: 460px;*/
	float: left;
	font-size:19pt;
}

.typeSelectors {
	position: relative;
	width: 96%;
	margin:auto;
	margin-top: 480px;
	display:grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	column-gap: 30px;
	row-gap: 22px;
}
.typeSelector {
	color: white;
	font-size: 22pt;
	height: 50px;
	border-radius: 25px;
	background-color: black;
	cursor: pointer;
}
.chordSelect {
	width: 24px;
	height: 24px;
	font-size: 16pt;
	text-align:center;
	border: 1px solid black;
	margin:auto;
}
.chordSelector {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
	width: 49%;
	margin-left: 1%;
	margin-bottom: 50px;
	position: relative;
	top: 425px;
}
.sharpChord {
	font-size:8pt;
	line-height: 1em;
}
#chordName {
	pointer-events:none;
}
#majorButton {
	background-color:white;
	color: black;
}
.typeSelector:hover {
	scale(1.01);
}
#chordSelect, #chordType {display:none;}
#menuBurger {position: absolute; right: 30px;}

#notationDiagram {
	background-color:#ecebea;
	width:360px;
	height:268px;
	position:relative;
	font-size:2em;
	padding-top:12px;
	display:none;
}
hr {border:1px solid black;}
.staffline {border:0;position:absolute;width:99.5%; height:16px; border-bottom:2px solid black; display:inline-block;}
.ledger {width: 32px; margin-left:50%;}
.ledger_alt {width: 32px; margin-right:50%;}
#hr0 {top:-6px; visibility:hidden;}
#hr1 {top:12px; }
#hr2 {top:30px; }
#hr3 {top:48px; }
#hr4 {top:66px; }
#hr5 {top:84px; }
#hr6 {top:102px; visibility:hidden;}
#hr7 {top:120px; visibility:hidden;}
#hr8 {top:138px; visibility:hidden;}
#hr9 {top:156px;}
#hr10{top:174px;}
#hr11{top:192px;}
#hr12{top:210px;}
#hr13{top:228px;}
#hr14{top:246px; visibility:hidden;}

.clef {
	position:absolute;
	left: 12px;
}
#trebelClef {
	top: 5px;
}
#bassClef {
	bottom: 45px;
}
.noteContainer {
	position:absolute;
	left: 26px; /*168px;*/
}
.noteContainer_alt {
	position:absolute;
	left: 166px; /*268px;*/
}
.noteLetter {
	color: white;
	font-size: 9pt;
	position: absolute;
	top: 10px;
	left: 0;
	text-align:center;
	vertical-align:center;
	line-height: 18px;
	width:20px;
	height: 16px;
	margin: 1px 2px ;
}
#trebel_R {	top: 99px; }
#trebel_R_alt {	top: 99px; }
#trebel_3 { top: 81px; }
#trebel_5 { top: 63px; }
#trebel_7 { top: 45px; visibility:hidden; }
#bass_R {bottom: 44px; }
#bass_3 {bottom: 62px; }
#bass_5 {bottom: 80px; }
#bass_7 {bottom: 98px; visibility:hidden; }

#trebel_7_alt { visibility: hidden;}
#bass_7_alt { visibility: hidden;}

.accidental {
	display:block;
	position: absolute;
	left: 0;/*0px;*/
}
#sharp1 { left: 0;}
#sharp2 { left: -38px;}
#sharp3 { left: -19px;}
#sharp4 { left: 0px;}
#sharp5 { left: 0px;}
#sharp6 { left: -38px;}
#sharp7 { left: -19px;}
#sharp8 { left: 0px;}
#flat1  { left: 0px;}
#flat2  { left: -17px;}
#flat3  { left: -34px;}
#flat4  { left: 0px;}
#flat5  { left: 0px;}
#flat6  { left: -17px;}
#flat7  { left: -34px;}
#flat8  { left: 0px;}

#dsharp1 { left: 0;}
#dsharp2 { left: -38px;}
#dsharp3 { left: -19px;}
#dsharp4 { left: 0px;}
#dsharp5 { left: 0px;}
#dsharp6 { left: -38px;}
#dsharp7 { left: -19px;}
#dsharp8 { left: 0px;}
#dflat1  { left: 0px;}
#dflat2  { left: -17px;}
#dflat3  { left: -34px;}
#dflat4  { left: 0px;}
#dflat5  { left: 0px;}
#dflat6  { left: -17px;}
#dflat7  { left: -34px;}
#dflat8  { left: 0px;}

#sharp1_alt { left: 140px; display:none;}
#sharp2_alt { left: 102px; display:none;}
#sharp3_alt { left: 121px; display:none;}
#sharp4_alt { left: 140px; display:none;}
#sharp5_alt { left: 140px; display:none;}
#sharp6_alt { left: 102px; display:none;}
#sharp7_alt { left: 121px; display:none;}
#sharp8_alt { left: 140px; display:none;}
#flat1_alt  { left: 140px; display:none;}
#flat2_alt  { left: 125px; display:none;}
#flat3_alt  { left: 110px; display:none;}
#flat4_alt  { left: 140px; display:none;}
#flat5_alt  { left: 140px; display:none;}
#flat6_alt  { left: 125px; display:none;}
#flat7_alt  { left: 110px; display:none;}
#flat8_alt  { left: 140px; display:none;}

#dsharp1_alt { left: 140px; display:none;}
#dsharp2_alt { left: 102px; display:none;}
#dsharp3_alt { left: 121px; display:none;}
#dsharp4_alt { left: 140px; display:none;}
#dsharp5_alt { left: 140px; display:none;}
#dsharp6_alt { left: 102px; display:none;}
#dsharp7_alt { left: 121px; display:none;}
#dsharp8_alt { left: 140px; display:none;}
#dflat1_alt  { left: 140px; display:none;}
#dflat2_alt  { left: 125px; display:none;}
#dflat3_alt  { left: 110px; display:none;}
#dflat4_alt  { left: 140px; display:none;}
#dflat5_alt  { left: 140px; display:none;}
#dflat6_alt  { left: 125px; display:none;}
#dflat7_alt  { left: 110px; display:none;}
#dflat8_alt  { left: 140px; display:none;}

#accidentalContainer {
	position:relative;
	top:0;
	left: 0;
	height: 280px;
}

.dblSharpOffset {
	position:relative;
	left: -0.2em;
}
.dblSharp {
	font-size:2.2em; 
	display:block;
	position:relative;
	top:-10pt;
	left:0.3em;
}

#notes {
	position:absolute; 
	top:0; 
	height: 279px;
	left:159px; 
}