body, html { /* must do html for full-screen mode, at least in Chrome */
	overflow:hidden;
	background:#808080; 
}
html, body { touch-action:none; }

body { --ctrlht:177px; }
body.basic { --ctrlht:127px; }
body.ctrldown { --ctrlht:95px; }
body.ctrldown.basic { --ctrlht:45px; }
/*body.ctrldown.basic, body.ctrldown { --ctrlht:11px; } /* if allowing the whole area to hide */

body { /* or these could be on body or on :root */
	--backH:180; /* hue for background color */
	--backL:100%; /* 50% for full color, 0% for black, 100% for white */
	--backS:100%; /* 100% for full color, 0% for gray */
}

/* NEED TO DECIDE:
	Should display be shown around the control area edges, or stop at its top?
	Should rings and spokes (and spiral) have a circular mask (by setting border-radius)?
		If not, should they be limited to a square or should they fill the entire screen?
		If no mask, then let it fill the screen (non-square).
	Currently, fill and mask is the default, but it can be controlled by query string (?fill=0&mask=0)
	
	NOTE sizes are multiplied by 1.5 in order to fill the entire window when rotated by 45deg
*/



#back {
	background-color:hsl(var(--backH), var(--backS), var(--backL));
}

#display { /* or these could be on body or on :root */
	--pdpx:100px; /* period for stripes and rings -- will be set by JS */
	--spokes:11;  /* number of spokes -- will be set by JS */
	--movepx:0px; /* animation for stripes and rings */
	--moveturn:0turn; /* animation for spokes */
	--foreH:0; /* foreground hue for display */
	--foreL:0%; /* 50% for full color, 0% for black, 100% for white */
	--foreS:100%; /* 100% for full color, 0% for gray */
	--degDir:0deg; /* rotation for stripes, 0, 90, 180, -90 to set up the slip, verge, and diag displays */
	--degTilt:0deg; /* additional tilt for stripes; not exposed to UI */
	--degRot:0deg; /* rotation of the display as a whole */
}

#display, #back {
	position:absolute;
	--size:calc(1.5 * max(100vw,100vh));
	left:calc((100vw - var(--size)) / 2);
	top:calc((100vh - var(--ctrlht) - var(--size)) / 2);
	width:var(--size);
	height:var(--size); 
	transform:rotate(var(--degRot));
}

/* sizes and locations for display and for the split displays */
.spokes #display, .spokes #back, 
.rings #display, .rings #back, 
.spiral #display, .spiral #back {
	--size:calc(min(100vw,100vh));
	left:calc((100vw - var(--size)) / 2);
	top:calc((100vh - var(--ctrlht) - var(--size)) / 2);
	width:var(--size);
	height:var(--size);
	border-radius:50%;
}
.fill.spokes #display, .fill.spokes #back, 
.fill.rings #display, .fill.rings #back, 
.fill.spiral #display, .fill.spiral #back {
	--size:calc(max(100vw,100vh));
	border-radius:0%; 
}
.fill.mask.spokes #display, .fill.mask.spokes #back, 
.fill.mask.rings #display, .fill.mask.rings #back, 
.fill.mask.spiral #display, .fill.mask.spiral #back {
	--size:calc(min(100vw,100vh));
	border-radius:50%; 
}
#left, #right {
	right:calc(var(--size) / 2);
	width:calc(var(--size) / 2);
	height:inherit;
	position:absolute;
}
#right {
	left:calc(var(--size) / 2);
	right:unset;
	transform:rotate(180deg);
}
#upper, #lower {
	--size:calc(1.5 * max(100vw,100vh));
	top:calc(var(--size) / 2);
	width:inherit;
	height:calc(var(--size) / 2);
	position:absolute;
}
#upper {
	top:unset;
}
#lower {
	bottom:unset;
	transform:rotate(180deg);
}

/* view after movement ends */
#stopscreen {
	position:absolute;
	left:0px; top:0px;
	width:100vw; height:100vh;
	background-image:url('img/mottle.png');
	display:none;
}

/* spot for the user to focus on */
#focus {
	--size:20px;
	top:calc(50% - var(--size) / 2);
	left:calc(50% - var(--size) / 2);
	width:var(--size);
	height:var(--size);
	background:red;
	opacity:0.5;
	border-radius:50%;
	position:absolute;
}
.rings #focus, .spiral #focus {
	display:none;
}
.spokes #focus {
	--size:calc(2px * var(--spokes));
	background:#808080; /* hides ugly aliasing in the center */
	opacity:1;
}


/* only show and put backgrounds on the ones in use */
#left, #right, #upper, #lower, #spiral { display:none; background:none; }
.spiral #spiral { display:block; }
.spiral #display { background:none; }
.slip #left, .slip #right { display:block; }
.verge #upper, .verge #lower { display:block; }
.slip #display, .verge #display { background:none; }

/* style the parts for square or sinusoidal gratings */
.vert #display,
.slip #left, .slip #right, 
.verge #upper, .verge #lower
{
	--halfpd:var(--pdpx) / 2; /* half a period */
	background: repeating-linear-gradient(
		calc(var(--degDir) + var(--degTilt)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(0.5 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(1.5 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(1.5 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(2.5 * var(--halfpd) - var(--movepx))
	);
}
.freeRotate #display {	/* smooth for rotations other than 0, 45, 90deg */
	background: repeating-linear-gradient(
		calc(var(--degDir) + var(--degTilt)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(0.5 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(1.5 * var(--halfpd) - 1px - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(1.5 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(2.5 * var(--halfpd) - 1px - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(2.5 * var(--halfpd) - var(--movepx))
	);
}
.vert.sine #display,
.slip.sine #left, .slip.sine #right, 
.verge.sine #upper, .verge.sine #lower
{
	background: repeating-linear-gradient(
		calc(var(--degDir) + var(--degTilt)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(0.000 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.978) calc(0.095 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.925) calc(0.177 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.857) calc(0.247 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.781) calc(0.310 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.701) calc(0.368 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.620) calc(0.423 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.538) calc(0.476 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.455) calc(0.529 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.373) calc(0.582 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.291) calc(0.637 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.212) calc(0.695 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.138) calc(0.758 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.070) calc(0.829 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.019) calc(0.912 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(1.000 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.019) calc(1.095 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.070) calc(1.177 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.138) calc(1.247 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.212) calc(1.310 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.291) calc(1.368 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.373) calc(1.423 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.455) calc(1.476 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.538) calc(1.529 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.620) calc(1.582 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.701) calc(1.637 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.781) calc(1.695 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.857) calc(1.758 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.925) calc(1.829 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.978) calc(1.912 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(2.000 * var(--halfpd) - var(--movepx))
	);
}

.rings #display { /* could smooth it as I did for .freerotate */
	--halfpd:var(--pdpx) / 2; /* half a period */
	background: repeating-radial-gradient(
		circle,
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(0.5 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(1.5 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(1.5 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(2.5 * var(--halfpd) - var(--movepx))
	);
}
.rings.sine #display {
	background: repeating-radial-gradient(
		circle,
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(0.000 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.978) calc(0.095 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.925) calc(0.177 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.857) calc(0.247 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.781) calc(0.310 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.701) calc(0.368 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.620) calc(0.423 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.538) calc(0.476 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.455) calc(0.529 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.373) calc(0.582 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.291) calc(0.637 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.212) calc(0.695 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.138) calc(0.758 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.070) calc(0.829 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.019) calc(0.912 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(1.000 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.019) calc(1.095 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.070) calc(1.177 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.138) calc(1.247 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.212) calc(1.310 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.291) calc(1.368 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.373) calc(1.423 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.455) calc(1.476 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.538) calc(1.529 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.620) calc(1.582 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.701) calc(1.637 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.781) calc(1.695 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.857) calc(1.758 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.925) calc(1.829 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.978) calc(1.912 * var(--halfpd) - var(--movepx)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(2.000 * var(--halfpd) - var(--movepx))
	);
}

.spokes #display {
	--halfpd:calc(0.5turn / var(--spokes)); /* half a period */
	background: repeating-conic-gradient(
		from var(--moveturn),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0) calc(0.5 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0) calc(1.5 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1) calc(1.5 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1) calc(2.5 * var(--halfpd))
	);
}
.spokes.sine #display {
	background: repeating-conic-gradient(
		from var(--moveturn),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(0.000 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.978) calc(0.095 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.925) calc(0.177 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.857) calc(0.247 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.781) calc(0.310 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.701) calc(0.368 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.620) calc(0.423 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.538) calc(0.476 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.455) calc(0.529 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.373) calc(0.582 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.291) calc(0.637 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.212) calc(0.695 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.138) calc(0.758 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.070) calc(0.829 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.019) calc(0.912 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.000) calc(1.000 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.019) calc(1.095 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.070) calc(1.177 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.138) calc(1.247 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.212) calc(1.310 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.291) calc(1.368 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.373) calc(1.423 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.455) calc(1.476 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.538) calc(1.529 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.620) calc(1.582 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.701) calc(1.637 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.781) calc(1.695 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.857) calc(1.758 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.925) calc(1.829 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 0.978) calc(1.912 * var(--halfpd)),
		hsla(var(--foreH), var(--foreS), var(--foreL), 1.000) calc(2.000 * var(--halfpd))
	);
}

.spiral #spiral {
	transform:rotate(var(--moveturn));
	filter:url('#colorize');
	position:absolute;
	--size:calc(1.5 * max(100vw,100vh));
	left:calc((100vw - var(--size)) / 2);
	top:calc((100vh - var(--ctrlht) - var(--size)) / 2);
	width:var(--size);
	height:var(--size); 
}
.fill.mask #spiral {
	clip-path: circle(calc(min(50vw,50vh)));
}

/************************** controls *************************/

#ctrlback { 
	display:flex; 
	flex-flow:column nowrap; 
	justify-content:space-between; 
	align-items:flex-start; 
}

span.spokes { display:none; }
.spokes span.notradial { display:none; }
.spokes span.spokes { display:inline-block; }
.basic span.spokes { display:none; }

.controlflex { 
	display:flex; 
	flex-flow:row wrap; 
	justify-content:space-between; 
	align-items:flex-start; 
	position:relative; 
	width:100%; 
	margin:2px 0px 2px 0px;
	height:76px;
}

.controlgroup { 
	position:relative; 
	border-left:2px groove #f8f8f8; 
	height:75px;
}
.groupheading {
	width:76px;
	height:38px;
	margin-left:2px;
}
.subgroup {
	display:block;
	position:absolute; 
	left:22px;
	display:flex;
	flex-flow:row wrap;
}
.subgroup.top { top:0px; }
.subgroup.middle { top:26px; }
.subgroup.bottom { top:57px; }

.flexcolumns {
	display:flex;
	flex-flow:column wrap;
}

.flexrows {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
}

/* control groups */
.controlflex div.controlgroup:nth-child(1) {
	border-left:none;
}
.controlflex div.controlgroup:nth-child(1) .groupheading {
	margin-left:0px;
}
.controlflex div.controlgroup:nth-child(1) .subgroup {
	left:20px;
}
#patterngroup {
	flex:0 1 235px;
}
#movementgroup {
	flex:0 1 203px;
}
#controlgroup {
	flex:0 1 176px;
}
#resultsgroup {
	flex:0 1 142px;
}


#startgroup {
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	align-items:flex-start;
	width:125px;
	left:22px;
	position:absolute;
	top:0px;
}
#stopgroup {
	top:51px;
}

#directiongroup label.btn {
	margin:0px -1px -1px 0px;
}
button[name='reverse'] { margin-left:4px; }



#patterngroup .bottom {
	width:212px; /* without this, the flexrows doesn't spread the controls; not sure why */
}



input[type='range'] {
	width:98px;
	Xmargin-left:-1px;
}
input[type='range'] + span {
	width:24px;
	text-align:right;
}
input[type='range']:disabled + span + span {
	color:#aaa;
}


/* define the pattern */
#edgegroup label { margin-left:4px; height:26px; margin-bottom:-1px; }



#rotgroup {
	margin-top:9px;
}
#speedgroup {
	margin-top:3px;
}



/* control the movement */
[name='startstop'] { height:26px; width:148px; }

/* check the results */
[name='aftereffectgone'], #report { position:absolute; width:118px; height:56px; left:22px; top:0px; }
#report, #report span { line-height:13px; padding-top:1px; font-size:11px; user-select:initial; }



/* label buttons all use the same image sprite */
label.btn:after, button[name='reverse']:after { content:url('img/btn.svg'); left:0px; position:relative; margin-left:-2px; }
label, button[name='reverse'] { overflow:hidden; }
#directiongroup.rev label.btn:after { left:-20px; border:none; } /* switch to reversed version */

#directiongroup label:nth-of-type(1):after { top:0px; } /* vert */
#directiongroup label:nth-of-type(2):after { top:-80px; } /* slipV */
#directiongroup label:nth-of-type(3):after { top:-120px; } /* vergeV */
#directiongroup label:nth-of-type(4):after { top:-160px; } /* rotate */
#directiongroup label:nth-of-type(5):after { top:-180px; } /* rings */
#directiongroup label:nth-of-type(6):after { top:-200px; } /* spiral */
#directiongroup label:nth-of-type(9):after { top:-140px; } /* vergeH */
button[name='reverse']:after { top:-320px; } /* reverse */

#edgegroup label:nth-of-type(1):after { top:-260px; } /* soft */
#edgegroup label:nth-of-type(2):after { top:-240px; } /* hard */

#stopgroup label:nth-of-type(1):after { top:-300px; } /* mottle */
#stopgroup label:nth-of-type(2):after { top:-280px; } /* gray */
#stopgroup label:nth-of-type(3):after { content:''; padding-right:3px; } /* same */

#stopgroup .btn { height:24px; margin-right:-1px; }
#stopgroup { line-height:24px; padding-top:1px; }
#stopgroup label:nth-of-type(1) { margin-left:4px; }
#stopgroup label:nth-of-type(3) { width:53px; padding-top:4px; }
#timergroup { padding-top:3px; }
#timergroup label { padding-top:2px; }
#countdown { width:38px; height:10px; margin-left:4px; margin-top:5px; }

label.btn { width:25px; }


input[type='number'] {
	width:45px;
	height:20px;
	font-size:13px;
	text-align:right;
	margin-right:2px;
	margin-left:2px;
}
input[name='contrast'] {
	margin-left:0px;
}
input[name='timer'] {
	margin-left:8px;
}

div.colorselect {
	width:180px; /* for rgbcmykbw */
	margin-bottom:-1px; /* join upper and lower borders */
}


#basic {
	right:0px;
	bottom:-2px;
}

/************* changes when showing only the basic controls ******************************/


.basic .controlflex {
	height:26px;
}
.basic .subgroup {
	left:0px;
}
.basic .subgroup.middle {
	left:0px;
	top:0px;
}
.basic .groupheading {
	display:none;
}
.basic .controlgroup {
	border:none;
}


.basic [name='startstop'] {
	width:120px;
}

.basic #timergroup {
	left:132px;
	width:185px;
}
.basic #countdown { 
	margin-left:8px; 
	width:55px;
}

.basic #directiongroup {
	width:190px;
	left:317px;
}
.basic #rotgroup {
	left:510px;
	width:200px;
	margin-top:5px;
}
.basic [name='reverse'] {
	order:99;
	margin-left:8px; 
}
.basic #movementgroup {
	position:absolute;
}
.basic #directiongroup label {
	width:26px; 
}

/* https://css-tricks.com/snippets/css/browser-specific-hacks/ */
/*#speedgroup, x:-moz-any-link { left:145px; } /* hack to fix FF bug seen 10/27/17; see https://borishoekmeijer.nl/tutorials/how-to-target-a-specific-browser-css-only/ */

/* from https://www.wired.com/2010/02/browser-specific_css_hacks/ I like it better than the above */
@-moz-document url-prefix() { #speedgroup { left:145px; } }