body, html { 
	background:#fff; 
}

.centered {
	bottom:200px; /* 150 for #ctrlback, 225 for #ctrlback with more options, 11 for #ctrlback down */
}

/************ style the display itself ******************/

svg {
	overflow:visible;
}

defs g * {
	stroke:black;
	stroke-width:4;
}

/* TWO ways of styling anaglyph colors; can't mix them */
/* this set works together, at least in Chrome NOT IN SAFARI */
XX.anaglyph defs g * {
	mix-blend-mode: multiply; 
	isolation:isolate;
}
XX.anaglyph defs g.right * {
	filter:url('#red');
}
XX.anaglyph defs g.left * {
	filter:url('#cyan');
}
/* this set works together, at least in Chrome AND Safari */
/*.anaglyph*/ use { 
	mix-blend-mode: multiply; 
	isolation:isolate;
}
#right use {
	filter:url('#filterright');
}
#left use {
	filter:url('#filterleft');
}

.dots :nth-child(1) {
	stroke:none;
	fill:url('#fillback');
}
.dots :nth-child(2) {
	stroke:none;
	fill:url('#fillfore');
}


/*********** style the basic options *************/
/* there are ugly kludges to make things align; should revisit this with better use of flex grid */


svg.icon {
	width:17px;
	height:13px;
	overflow:visible;
	position:relative;
	top:3px;
}

#disparitycontrols {
	padding-top:5px;
}

#disparityrange { /* to make a zero line; maybe an image would be better. */
	padding:0px;
	margin:0px;
	padding-left:3px;
	margin-left:-7px;
	background:linear-gradient(to right,#0000,#0000 49%,#888 49%,#888 51%,#0000 51%, #0000 100%);
	padding-top:4px;
}

.basicoptions {
	grid-template-columns: 155px 202px 335px 73px; 
	padding-bottom:0px;
}

.groupheading {
	margin-left:8px;
}

.controlgrid.one:nth-of-type(2) {
	margin-left:8px;
}
.controlgrid.one:nth-of-type(3) {
	margin-left:8px;
}


.controlgrid.one input+span {
	position:relative;
	top:-3px;
}


input[type='range'] {
	width:101px; /* was 178 */
	vertical-align:4px; 
}
.zeroline {  /************************** can't make consistent for Safari/Chrome/FF, so abandoned */
	border-left:2px groove #f8f8f8; 
	position:relative; 
	left:26px;  /* 52 for Safari, 26 for Chrome */
	top:-2px; 
	width:0px; 
}

input[type='number'] {
	width:50px;
	font-size:13px;
	text-align:right;
	margin-right:2px;
	position:relative;
	top:-3px;
}

select.btn {
	width:140px;
}
.controlgrid.one :nth-child(n+2).btn {
	margin-left:-3px;
}


#basic {
	bottom:-14px;
	right:-7px;
}


/************ style the distortion options (grid worked very well here) ********************/


.moreoptions {
	grid-template-columns:repeat(2,auto); /* for best fit, override the repeat number in each file */
	grid-column-gap:0px; /* still needed for some browsers; eventually remove this */
	column-gap:0px; /* replaces grid-column-gap in new standards */
}

.controlgrid.one :nth-child(n+2) {
	margin-left:0px;
}

.moreoptions input[type='number'] { 
	width:44px;
	top:0px;
}

.groupheading {
	z-index:0; /* default is -1 to keep it from "covering" adjacent controls; this one IS a control; also made it narrower so it should be OK */
}

/* yucky hack to even out the gaps */
.distort:nth-of-type(2) span:nth-of-type(1), .distort:nth-of-type(2) span:nth-of-type(2) {
	margin-left:10px;
}
.distort:nth-of-type(2) span:nth-of-type(5), .distort:nth-of-type(2) span:nth-of-type(6) {
	margin-right:-8px;
}