body, html { 
	background:#ddd; 
}

body { 
	--ctrlht:189px;
}
.ctrldown {
	--ctrlht:99px;
}

.ctrldown #ctrlback { height:unset; } /* hide only the caption */





/* where did 57px come from? I think that limiting the size would be good */
#fig { width:99%; max-width:1024px; height:calc(99% - var(--ctrlht)); }

#fig .none, #fig .spectrum, #fig .spectrogram, #pair {
	position:absolute; /* relative works for #pair */
}
/******************** vertical centering isn't workng; check others where it does work */

/************ style the controls ******************/


.moreoptions {
	border-bottom:none;
	grid-template-columns: repeat(4,auto);
}

span.top { margin-top:12px; }
span.bottom { margin-top:38px; }

button, .btn { width:77px; height:34px; margin-right:6px; padding-top:7px;}
button, .btn { width:60px; height:34px; margin-right:6px; padding-top:7px;}
button span:nth-of-type(1) { color:#c00; }
button span:nth-of-type(2) { color:#00c; margin-left:6px; }

button span { pointer-events: none; }

.controlgrid.three :nth-child(n+5) { margin-left:0px; } /* undo spacer between columns from demo.css */

.top button:last-of-type, .bottom button:last-of-type { margin-right:-4px; } /* broken after adding spans in button spans */

.backline {
	display: block;
	position: absolute;
	z-index: -1;
	border: 6px solid #888;
	width: 355px;
	height: 44px;
	left: 288px;
	top: 31px;
}
.backlineOLD {
	display: block;
	position: absolute;
	z-index: -1;
	border: 6px solid #888;
	width: 438px;
	height: 44px;
	left: 288px;
	top: 31px;
}
.backlineREL {
	display: block;
	position: relative;
	z-index: -1;
	border: 6px solid #888;
	width: 86%;
	height: 44px;
	left: 7%;
	top: -26px; 
}
/******* COULD make the buttons shrink as the window gets narrower than 730px, and also shrink the backline */



/* show the correct analysis */

.none .none { visibility:visible; }
.none .spectrum { visibility:hidden; }
.none .spectrogram { visibility:hidden; }
.spectrum .none { visibility:hidden; }
.spectrum .spectrum { visibility:visible; }
.spectrum .spectrogram { visibility:hidden; }
.spectrogram .none { visibility:hidden; }
.spectrogram .spectrum { visibility:hidden; }
.spectrogram .spectrogram { visibility:visible; }

/* pair of pitches */
#first, #second { font-size:18px!important; }
.first { color:#c00; fill:#c00; }
.second { color:#00c; fill:#00c; }

/* as positioned, the note names are placed well for graphs but asymmetrically for no analysis */
/* the CSS below fixes that in Chrome but fails in Safari (Mojave), which gets stuck in the .none position */
/* the translate(0px) stuff below didn't help with Safari */
/*#first { transform: translate(0px); } /* no help in Safari */
/*#first { transform: translate(0px); } */
/*body.none #first { transform: translate(-28px); } /* oddly, Safari in Mojave gets stuck here and doesn't move back */
/*body:not(.none) #first { transform: translate(0px); } /* no help in Safari */

/* lines for the spectrum display */

#spectrum-lines { stroke:#eee; stroke-width:2; stroke-linecap:round; } /* or #eee? or 1.5 */
/* THIS WORKED FOR CHROME BUT NOT FOR SAFARI OR FIREFOX, so I replaced it by a JS version */
/* 1 C F# */
XX.pair1 #spectrum-lines :nth-child(12n + 12) { stroke:#c00; }
XX.pair1 #spectrum-lines :nth-child(12n + 6) { stroke:#00c; }
/* 2 C# G */
XX.pair2 #spectrum-lines :nth-child(12n + 1) { stroke:#c00; }
XX.pair2 #spectrum-lines :nth-child(12n + 7) { stroke:#00c; }
/* 3 D G# */
XX.pair3 #spectrum-lines :nth-child(12n + 2) { stroke:#c00; }
XX.pair3 #spectrum-lines :nth-child(12n + 8) { stroke:#00c; }
/* 4 D# A */
XX.pair4 #spectrum-lines :nth-child(12n + 3) { stroke:#c00; }
XX.pair4 #spectrum-lines :nth-child(12n + 9) { stroke:#00c; }
/* 5 E A# */
XX.pair5 #spectrum-lines :nth-child(12n + 4) { stroke:#c00; }
XX.pair5 #spectrum-lines :nth-child(12n + 10) { stroke:#00c; }
/* 6 F B */
XX.pair6 #spectrum-lines :nth-child(12n + 5) { stroke:#c00; }
XX.pair6 #spectrum-lines :nth-child(12n + 11) { stroke:#00c; }
/* 7 F# C */
XX.pair7 #spectrum-lines :nth-child(12n + 6) { stroke:#c00; }
XX.pair7 #spectrum-lines :nth-child(12n + 12) { stroke:#00c; }
/* 8 G C# */
XX.pair8 #spectrum-lines :nth-child(12n + 7) { stroke:#c00; }
XX.pair8 #spectrum-lines :nth-child(12n + 1) { stroke:#00c; }
/* 9 G# D */
XX.pair9 #spectrum-lines :nth-child(12n + 8) { stroke:#c00; }
XX.pair9 #spectrum-lines :nth-child(12n + 2) { stroke:#00c; }
/* 10 A D# */
XX.pair10 #spectrum-lines :nth-child(12n + 9) { stroke:#c00; }
XX.pair10 #spectrum-lines :nth-child(12n + 3) { stroke:#00c; }
/* 11 A# E */
XX.pair11 #spectrum-lines :nth-child(12n + 10) { stroke:#c00; }
XX.pair11 #spectrum-lines :nth-child(12n + 4) { stroke:#00c; }
/* 12 B F */
XX.pair12 #spectrum-lines :nth-child(12n + 11) { stroke:#c00; }
XX.pair12 #spectrum-lines :nth-child(12n + 5) { stroke:#00c; }

/* blocks for no-analysis display */

#cube, polyline.cover, line.cover {
	fill:#E4C0B1;
	stroke:#742009;
	stroke-linejoin:round; /* or bevel */
	/*stroke-width:3px;
	stroke:white;*/
	stroke-width:2px;
}

#cubes polygon.inset, #cubes polyline.inset, #cubes line.inset {
	fill:none;
	stroke:#fee;
	stroke-width:1px;
}

#cubes text {
/*	font:11.5px 'Donegal One'; /* less bold than bitter but with good # */
font:12px Bitter; /* bolder than donegal but smaller lower # */
	text-anchor:middle;
	alignment-baseline:middle;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; /* white border */
	xtext-shadow:1px 1px 0 rgba(255,255,255,0.6), -1px -1px 1px rgba(0,0,0,0.67); /* inset*/
}
#cubes text.r { fill:red; }
#cubes text.g { fill:green; }
#cubes text.b { fill:blue; }
#cubes text.t { transform:translate(17.5px,10.5px) skewX(-33deg); }
#cubes text.f { transform:translate(18.5px,31px) skewX(33deg); }
#cubes text.s { transform:translate(37px,21.5px) skewX(32deg) skewY(-40deg); }



/************ these are for the DIV version; try it later */


.cubegroup {
	width:94px;
	height:80px;
	position:absolute;
	top:10px;
}
.cubegroup span { /* somehow fails when I change this from span to p */
	display:block;
	transform-origin: 0 0;
	position: relative;
	width:48px;
	height:48px;
	background:#e4c0b1;
	font:26px Bitter;
	text-align:center;
	padding-top:7px;
	box-shadow:inset 0 0 2px 3px white;
	text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white; /* white border */
	border:3px solid #742009;
}
.cubegroup div :nth-child(1) { transform:translate(22.6px, 0px) skewX(-29.5deg) scaleY(0.833); }
.cubegroup div :nth-child(2) { transform: translate(0px, -8.0px) skewX(29.5deg) scaleY(0.833); }
.cubegroup div :nth-child(3) { transform:translate(47.8px, -56.0px) skewX(29.5deg) skewY(-41.5deg) scaleY(0.833) scaleX(0.94); }

.cubegroup div.rgb :nth-child(1) { border-color:#d00; color:red; }
.cubegroup div.rgb :nth-child(2) { border-color:#060; color:green; }
.cubegroup div.rgb :nth-child(3) { border-color:#00d; color:blue; }
.cubegroup div.gbr :nth-child(1) { border-color:#060; color:green; }
.cubegroup div.gbr :nth-child(2) { border-color:#00d; color:blue; }
.cubegroup div.gbr :nth-child(3) { border-color:#d00; color:red; }
.cubegroup div.brg :nth-child(1) { border-color:#00d; color:blue; }
.cubegroup div.brg :nth-child(2) { border-color:#d00; color:red; }
.cubegroup div.brg :nth-child(3) { border-color:#060; color:green; }

.cubegroup div { position:absolute; }
.cubegroup div:nth-of-type(1) { left:40px; top:206px; }
.cubegroup div:nth-of-type(2) { left:0px; top:276px; }
.cubegroup div:nth-of-type(3) { left:80px; top:276px; }
.cubegroup div:nth-of-type(4) { left:160px; top:276px; }
.cubegroup div:nth-of-type(5) { left:240px; top:276px; }
.cubegroup div:nth-of-type(6) { left:320px; top:276px; }
.cubegroup div:nth-of-type(7) { left:280px; top:207px; }
.cubegroup div:nth-of-type(8) { left:240px; top:138px; }
.cubegroup div:nth-of-type(9) { left:200px; top:69px; }
.cubegroup div:nth-of-type(10) { left:160px; top:0px; }
.cubegroup div:nth-of-type(11) { left:120px; top:69px; }
.cubegroup div:nth-of-type(12) { left:80px; top:138px; }
/* these close the ring */
.cubegroup div.closetopright { left:40px; top:206px; }
.cubegroup div.closetop { left:80px; top:276px; }
.cubegroup div.closetopright :nth-child(2) { visibility:hidden; }
.cubegroup div.closetop :nth-child(2) { visibility:hidden; }
.cubegroup div.closetop :nth-child(3) { visibility:hidden; }





#lines {
	stroke-width:10;
	stroke:#ddd;
	opacity:0.5;
}
#circles {
	stroke-width:6;
	fill:#fff;
	stroke:#ddd;
}
#notes text {
	font-size:42px;
	font-family:Bitter; /* bolder than donegal but smaller lower # */
	text-anchor:middle;
	alignment-baseline:central;
	fill:#ddd;
}

#notes text.silent { fill:#ddd; }
#notes text.first { fill:#d00; }
#notes text.second { fill:#00d; }

#circles circle.silent { stroke:#ddd; fill:#fff; }
#circles circle.first { stroke:#d00; fill:#fff; }
#circles circle.second { stroke:#00d; fill:#fff; }


text.fade-first { animation: fadeoutfill 1s; animation-fill-mode:forwards; } 
@keyframes fadeoutfill {
	0% { fill:#c00; }
	48% { fill:#c00; }
	52% { fill:#e88; }
	100% { fill:#e88; }
}
text.fade-second { animation: fadeinfill 1s; animation-fill-mode:forwards; } 
@keyframes fadeinfill {
	0% { fill:#ddd; } /* was bbd */
	48% { fill:#ddd; } /* was bbd */
	52% { fill:#00c; }
	90% { fill:#00c; }
	100% { fill:#88f; }
}
circle.fade-first { animation: fadeoutstroke 1s; animation-fill-mode:forwards; } 
@keyframes fadeoutstroke {
	0% { stroke:#c00; }
	48% { stroke:#c00; }
	52% { stroke:#e88; }
	100% { stroke:#e88; }
}
circle.fade-second { animation: fadeinstroke 1s; animation-fill-mode:forwards; } 
@keyframes fadeinstroke {
	0% { stroke:#ddd; } /* was bbd */
	48% { stroke:#ddd; } /* was bbd */
	52% { stroke:#00f; }
	90% { stroke:#00f; }
	100% { stroke:#88f; }
}

#spectrum-lines line.fade-first { animation: fadeoutstrokeS 1s; animation-fill-mode:forwards; } 
#spectrum-lines line.fade-second { animation: fadeinstrokeS 1s; animation-fill-mode:forwards; }
@keyframes fadeoutstrokeS {
	0% { stroke:#c00; }
	48% { stroke:#c00; }
	52% { stroke:#e88; }
	100% { stroke:#e88; }
}
@keyframes fadeinstrokeS {
	0% { stroke:#bbf; }
	48% { stroke:#bbf; }
	52% { stroke:#00f; }
	90% { stroke:#00f; }
	100% { stroke:#88f; }
}







.none #first, .none #second {
	visibility:hidden;
}