html {
	background-color: #fcfdff;
}

li {color:white;}

#menuBurger {
	position:absolute;
	right: 20px;
	top: 20px;
	cursor: pointer;
}

p {
	line-height: 1rem;
}

.pane {
	min-width: 900px;
	height:908px;
	margin: 30px 20px;
	overflow:hidden;
	float: left;
	white-space:nowrap;
	transform: scale(0.9);
	transform-origin: top;
}

#wheel {
	min-width: 906px;
	margin: 30px 0 -70px 30px;
}
		
#title {
	font-family: Georgia;
	font-size: 50px;
	font-style: italic;
	text-align: center;
	line-height: 52px;
	position: relative;
	top: 380px;
	width: 200px;
	height: 200px;
	margin: auto;
	margin-bottom: -200px;
	z-index: 20;
	pointer-events:none;
}
.smallFont {
	font-size: 30px;
	line-height: 30px;
	margin-top: 0;
	margin-bottom: 10px;
	display:inline block;
}

#bgCircle {
	width: 900px;
	height: 900px;
	border: solid black 2px;
	margin:auto;
	padding-top: 2px;
}

#romanNumerals {
	display:none;
	width: 600px;
	height: 400px;
	position: absolute;
	top:0;
	left: calc(453px - 300px);
	z-index:200;
	pointer-events: none;
	opacity:0.4;
}
.numeral {
	font-family: serif;
	text-align: center;
	position:absolute;
	width: 100%;
}
.majorNumeral {
	font-size: 30pt;
}
.minorNumeral {
	font-size: 25pt;
}

#I { left: -84px; top: 14px; transform: rotate(-8.5deg); }
#V { left: 138px; top: 28px; transform: rotate(22deg); }
#IV { left: -274px; top: 106px; transform: rotate(-40deg); }
#iii { left: 99px; top: 144px; transform: rotate(22deg); }
#vi { left: -62px; top: 132px; transform: rotate(-5deg); }
#ii { left: -202px; top: 204px; transform: rotate(-40deg); }
#vii { top: 253px; left: -24px; font-size: 20pt; transform: rotate(-5deg); }

#scaleDegrees {
	display:none;
	font-size: 20pt;
	width: 800px;
	height: 900px;
	position: absolute;
	top:0;
	left: 200px;
	z-index:200;
	pointer-events: none;
}
.degree {position:absolute; color:darkred; transform-origin: top; font-size: 14pt; width: 150px; text-align: center;}
#tonic {left: 180px; top: 106px;}
#supertonic {left: 481px; top: 285px; transform: rotate(61.5deg);}
#mediant {left: 480px; top: 624px; transform: rotate(121deg);}
#subdominant {left: 0; top: 155px; transform: rotate(-30.5deg);}
#dominant {left: 358px; top: 155px; transform: rotate(30.5deg);}
#submediant {left: 524px; top: 454px; transform: rotate(90deg);}
#leadingTone {left: 349px; top: 755px;  transform: rotate(150deg);}

.rainbow-wheel {
  transform: rotate(15deg);
  position: relative;
  margin: 1em auto;
  border: solid 2em white;
  width: 16em; height: 16em;
  border-radius: 50%;
  background: 
	linear-gradient(30deg, #dedede 36.6%, transparent 36.6%) 0 0, 			/* Bb */
	linear-gradient(60deg, #ccc 63.2%, transparent 63.2%) 0 0,				/* F  */
	linear-gradient(90deg, #dedede 100%, transparent 100%) 0 0,				/* C  */
	linear-gradient(-30deg, #ccc 36.6%, transparent 36.6%) 100% 0,			/* A  */
	linear-gradient(-60deg, #dedede  63.2%, transparent 63.2%) 100% 0,		/* D  */
	linear-gradient(-90deg, #ccc 100%, transparent 100%) 100% 0,			/* G  */
	linear-gradient(60deg, #dedede 36.6%, transparent 36.6%) 100% 100%,		/* Gb */
	linear-gradient(30deg, #ccc 63.2%, transparent 63.2%) 100% 100%,		/* B  */
	linear-gradient(90deg, #dedede 100%, transparent 100%) 100% 100%,		/* E  */
	linear-gradient(-60deg, #ccc 36.6%, transparent 36.6%) 0 100%,			/* Db */
	linear-gradient(-30deg, #dedede 63.2%, transparent 63.2%) 0 100%,		/* Ab */
	linear-gradient(90deg, #ccc 100%, transparent 100%) 0 100%,				/* Eb */
	#ccc;
  background-repeat: no-repeat;
  background-size: 50% 50%;
  transition: 0.5s;
}

.rainbow-wheel::after {
  position: absolute;
  top: 50%; left: 50%;
  margin: -102px;
  width: 200px; height: 200px;
  border: 2px black solid;
  border-radius: 50%;
  /* add slash at end of line to see central part *
  opacity: .15; /**/
  background: white;
  opacity: 0.8;
  content: '';
}

.major {
	transform: rotate(-15deg);
	font-size: 70px;
	transform-origin: 35px 450px;
	left: 415px;
	height: 50px;
	width: 70px;
	position: absolute;
	top: 0;
	padding-top: 20px;
	padding-bottom: 50px;
	text-align: center;
	cursor: pointer;
	border-radius:50%;
	z-index: 20;
	transition: 0.3s;
}
.major:hover {
	font-size: 72px;
	padding-top: 19px;
	color: #C00;
}

#majorMinorDivide {
	position: absolute;
	top: 125px;
	right: 124px;
	width: 650px;
	height: 650px;
	border-radius: 50%;
	border: dotted black 1px;
	margin:auto;
}

.minor {
	transform: rotate(-15deg);
	font-size: 50px;
	transform-origin: 50px 296px;
	left: 400px;
	height: 80px;
	width: 100px;
	position: absolute;
	margin-top: 150px;
	padding-bottom: 0;
	padding-top: 4px;
	text-align: center;
	cursor: pointer;
	border-radius:50%;
	z-index: 30;
	transition: 0.3s;
}
.minor:hover {
	font-size: 51px;
	color: #0A0;
}

#minorDiminishedDivide {
	position: absolute;
	top: 250px;
	left:250px;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	border: dotted #444 1px;
	margin:auto;
}

.dim {
	color: gray;
	transform: rotate(-15deg);
	font-size: 36px;
	transform-origin: 50px 180px;
	left: 412px;
	height: 80px;
	width: 100px;
	position: absolute;
	margin-top: 268px;
	padding-bottom: 0;
	padding-top: 12px;
	text-align: center;
	margin-left: -10px;
	cursor: pointer;
	border-radius:50%;
	z-index: 30;
	transition: 0.5s;
}
/*.dim:hover {
	font-size: 37px;
	color: #111;
}*/

.flat {
	line-height: 80px;
}

.flat:hover {
	padding-top: 20px;
	margin-left: 1px;
}

.C  { transform: rotate(-15deg); }
.G  { transform: rotate(15deg);  }
.D  { transform: rotate(45deg);  }
.A  { transform: rotate(75deg);  }
.E  { transform: rotate(105deg); }
.B  { transform: rotate(135deg); }
.Gb { transform: rotate(165deg); }
	.splitMajor {font-size: 50px; line-height: 50px; padding-top: 8px;}
	.splitMajor:hover {font-size: 52px; margin-left: 0; padding-top: 9px;}
	.splitMinor { font-size: 44px; line-height: 44px; margin-top: 165px; left: 403px; padding-top: 0;}
	.splitMinor:hover {font-size: 45px; padding-top: 0;}
	.splitDim {font-size: 35px; line-height: 35px; margin-top: 280px; padding-top: 14px; left: 411px;}
	.splitDim:hover {font-size: 35px; line-height: 35px; margin-top: 280px; left: 415px;}
	#Fdim {left: 412px;}
	#Cdim {left: 405px;}
	#Asdim {left: 420px;}
.Db { transform: rotate(195deg); }
.Ab { transform: rotate(225deg); }
.Eb { transform: rotate(255deg); }
.Bb { transform: rotate(285deg); }
.F  { transform: rotate(315deg); }


#description {
	font-size: 44px;
	text-align: center;
	min-width: 920px;
	margin: 10px auto -15px auto;
	height: auto;
}

#descriptionHeader {
	font-size: 86px;
	text-align:center;
	margin-top: 0;
	margin-bottom: 20px;
}

#scale { margin-top: -5px;	cursor:pointer;}
#scale span {letter-spacing: 8px; line-height: 1.4em;}
#scale .halfLine {margin: 22px auto;}
#scale .halfLine span {line-height: 1.4em; display:inline;}
#chords {cursor:pointer; margin: 30px auto;}
#chords span {letter-spacing: 8px; line-height: 1.4em;}



#relativeKey {cursor: pointer; line-height: 1em; margin-bottom: 0;}
#relativeKey:hover .maj {color:#C00;}
#relativeKey:hover .min {color:#0A0;}

#highlightCone {}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */

	#description {
		font-size: 40px;
	}
}

.overlay {
	display:none;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: 908px;
	height: 908px;
	opacity: 0.2;
}
#overlayCanvas2 {}

.overlayTrigger {
	border-radius: 5px;
}

#keySig { display:none; }

/*Menu styling*/
#menuCover {
	/*background-color: rgba(5,48,5,0.87);*/
	font-family: "helvetica", arial;
}
#menuCover li:hover {
	opacity: 0.95;
	/*background-color: #1218;*/
}
/*.selected {background-color: #283625cc}*/