body, html { 
	background:#808080; 
}

#grid {
	position:absolute;
}

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

.gapinfo { display:none; }
.gap .gapinfo { display:inline-block; }

/* control groups */
.controlgroup { 
	position:relative; 
	margin-top:4px; 
	border-left:2px groove #f8f8f8; 
	height:81px; 
	margin-bottom:2px; 
}
.groupheading {
	width:80px;
	height:40px;
	margin-left:2px;
}
.subgroup {
	display:block;
	position:absolute; 
	left:24px;
}
.subgroup.top { top:0px; }
.subgroup.middle { top:30px; }
.subgroup.bottom { top:60px; }


#ctrlback div.controlgroup:nth-child(3) {
	border-left:none;
}
#gridtype {
	flex:0 1 246px;
}
#sizes {
	flex:0 1 246px;
}
#colors {
	flex:0 1 248px;
}

#colors .middle, #colors .bottom {
	margin-top:-6px;
}
#colors .top {
	display:flex;
	justify-content:space-between;
	width:222px;
}

#gridtype .subgroup span:nth-of-type(2) {
	left:114px;
	top:0px;
	width:150px; /* not sure why this is necessary; any number >100 will do */
	position:absolute;
}
#gridtype hr {
	top:14px;
	position:relative;
	left:24px;
	width:220px;
	border:none;
	border-top:1px dotted #aaa;
}

input[value='normal'] {
	margin-top:3px;
}

.linker {
	display:inline-block;
	position:absolute;
	right:0px;
	top:4px;
	line-height:25px;
}

#gridtype .bottom span {
	margin-left:15px;
}

#colors input[type='number'] {
	width:40px;
}

/* need to style these so all look like Chrome */
input[type='range'] {
	width:100px;
	vertical-align:2px;
}
input[type='checkbox'] {
	margin-top:4px;
}
input[type='number'] {
	width:48px;
	font-size:13px;
	text-align:right;
	margin-right:2px;
}

#squaregrid {
	line-height:20px;
}


#flipcolors {
	width:36px;
	right:2px;
	top:24px;
}
#flipcolors svg {
	width:17px;
	height:17px;
	margin-top:5px;
}