* {
	margin: 0;
	padding: 0;
}

html {
	overflow-y: hidden;
	width: 100%;
	height: 100%;
}

body {
	padding: 2.5em;
}

h1 {
	margin-bottom: 0.5em;
	font-weight: normal;
	font-size: 2.5em;
}

input + label {
	padding-left: 0.25em;
}

label[for],
input[type=radio],
button:not([disabled]) {
	cursor: pointer;
}

.content {
	margin: 0 auto;
	text-align: center;
}

.options, .actions {
	margin: 1em 0;
}

.options li, .actions li {
	list-style-type: none;
	font-size: 1em;
	display: inline;
}

.database-dropdown,
.pattern-dropdown,
.pattern-buttons {
	margin-left: 0.5em;
	margin-right: 0.5em;
}

.pattern-buttons li + li,
.actions li + li {
	margin-left: 0.5em;
}

.options {
	line-height: 2em;
}

.database-dropdown,
.pattern-dropdown,
.pattern-buttons {
	display: inline-block;
}

button {
	font-size: 1.25em;
	padding: 0.4em;
}

.names li {
	list-style-type: none;
	line-height: 1.5;
	font-size: 1em;
}

.names li:first-child {
	font-size: 1.5em;
	margin: 0.5em 0;
}

.names li:nth-child(12) { opacity: 0.90; }
.names li:nth-child(13) { opacity: 0.80; }
.names li:nth-child(14) { opacity: 0.70; }
.names li:nth-child(15) { opacity: 0.60; }
.names li:nth-child(16) { opacity: 0.50; }
.names li:nth-child(17) { opacity: 0.40; }
.names li:nth-child(18) { opacity: 0.30; }
.names li:nth-child(19) { opacity: 0.20; }
.names li:nth-child(20) { opacity: 0.10; }
.names li:nth-child(n+21) { display: none; }

.settings {
	position: absolute;
	top: 0;
	right: 0;
	margin-top: 1.5em;
	margin-right: 1.5em;
}

.settings dt, .settings dd, .settings ul, .settings li	 {
	display: inline;
}

.settings dt:after {
	content: ":";
}

.settings li:not(:last-child):after {
	content: " | ";
}

select {
	font-size: 1em;
}