body, html { 
	background:#808080; 
}

#ctrlback {
	width:662px;
}

.horizvert { display:none; }
.horiz { display:inline-block; }
.keepsquare .horiz { display:none; }
.keepsquare .horizvert { display:inline-block; }

.overlay { position:absolute; }

#grid {
	position:absolute;
}

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

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

#colorgroup { flex:0 1 244px; }
#sizegroup { flex:0 1 245px; }
#typegroup { flex:0 1 152px; }

#ctrlback div.controlgroup:nth-of-type(3) { /* weird; its the third div but the first one with .controlgroup */
	border-left:none;
}

/* sizes */
#sizegroup .subgroup .label { width:12px; text-align:center; display:inline-block; }

.groupheading { left:6px; }

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

.groupheading {
	width:80px;
	height:40px;
}

#typegroup .subgroup label:first-of-type {
	display:inline-block;
	width:65px;
}
input[name='pattern'] {
	margin-right:5px;
	margin-top:3px;
}

.fuzzygrid span.horiz { display:none !important; }

input[type='number'] {
	width:48px;
}

#flipcolors {
	width:30px; /* width, left, and top may be overridden in each user.css */
	right:2px;
	top:0px;
	height:56px; 
	position:absolute;
}
#flipcolors svg {
	width:17px;
	height:17px;
	margin-top:5px;
}