body { 
	--ctrlht:143px;
}
.ctrldown {
	--ctrlht:43px;
}

:root {
	--bg-color:#f4f4f4; /**************** OR #fff */
}


#fig {
	height:calc(100% - var(--ctrlht));
	max-height:700px;
}


body.loc .stim { display:none; }
body.stim .loc { display:none; }




svg {
	overflow:visible;
}

html, body { background:var(--bg-color); }

.controlflex { 
	display:flex; 
	justify-content:space-between; 
}

input[type='range'] {
	width:120px;
	vertical-align:2px;
}
#deg {
	display:inline-block;
	width:36px;
	text-align:right; 
}
.controlgrid.one :nth-child(n+2) {
	margin-left:4px;
}
.controlgrid.one:nth-of-type(2) {
	padding-left:6px;
}

input[type='radio'] {
	margin-left:0px;
}


#degback { /* to make a zero line; maybe an image would be better. */
	padding:3px 0px;
	margin:0px;
	background:linear-gradient(to right,#0000,#0000 28%,#aaa 28%,#aaa 30%,#0000 30%,#0000 50%,#888 50%,#888 52%,#0000 52%, #0000 72%, #aaa 72%, #aaa 73%,#0000 73%,#0000 100%);
}




#fig {
	background:var(--bg-color);
}


svg * {
	vector-effect:non-scaling-stroke;
}


#wavefront {
	opacity:0.2;
	fill:none;
	stroke:#000;
	stroke-width:10px;
}
#head {
	opacity:1; 
	fill:#fc9;
	stroke:none;
}
#shadow {
	opacity:0.6; /* may try to make this a gradient from 0.6 to 1.0 */
	fill:#fff; /****************** or #eee if background is #fff */
	stroke:none;
}
#mask polygon {
	fill:var(--bg-color);
	stroke:none;
}
#speaker {
	fill:#ccc;
	stroke:#333;
}




#grid line {
	stroke:#ccc;
}

#leftstim, #rightstim, #toneleft, #toneright, #clickleft, #clickright {
	stroke-width:2px;
	fill:none;
}
#leftstim, #toneleft, #clickleft {
	stroke:#00d;
}
#rightstim, #toneright, #clickright {
	stroke:#c00;
}


#scalebar line {
	stroke-width:2px;
	stroke:#333;
}


svg text {
	font-family:Arial;
	font-size:16px;
	text-anchor:start;
	fill:black;
}

#scalebar text {
	text-anchor:middle;
	font-size:14px;
}

svg #stimdeg {
	text-anchor:end;
}


#leftstim, #rightstim {
	overflow:hidden;
}