* {
	display: border-box;
}

datalist, datalist option {
	visibility:hidden;
}

hr {
	margin:1em 0;
}

header, main, form > div {
	padding:1em;
}
label {
	display: block;
	padding:0.75em 0;
	text-shadow: #fff 3px 3px 10px;
}
label::after {
	content: ':';
}
fieldset {
	margin-bottom: 1em;
	border-radius: 0.25em;
}
fieldset fieldset { background: #eee;}
fieldset fieldset fieldset { background: #ddd; }
fieldset fieldset fieldset fieldset { background: #ccc; }

legend {
	padding: 0.25em;
	border: 1px solid #ddd;
	border-radius: 0.25em;
}

code {
	font-family: Consolas, Monaco, sans-serif;
	overflow-x: scroll;
	white-space:nowrap;
}

code, legend {
	background:#fdf6e3;
}

.form-field {
	display: block;
}

	.form-field .example, .form-field code {
		/* Old Mozilla */
		display:-moz-inline-box;
		/* Modern */
		display:inline-block;
		vertical-align:top;
		margin: 0.5em auto;
	}

	.form-field .example {
		width: 32%;
	}

	.form-field code {
		border: 1px solid #ddd;
		border-radius:0.25em;
		margin-left: 0.5em;
		padding:0.5em;
		width: 64%;
	}

.example {
	text-align: center;
}

	.example > * {
		margin: 0 auto;
		text-align:left;
		width:90%;
	}

	.example > code {
		width: inherit;
	}

output {
	text-align:left;
}

input:active + label, input:hover + label, input:focus + label {
	font-size:1.5em;
	font-weight:bold;
}

[type="checkbox"] + label, [type="option"] + label{
	font-weight:normal;
}

[type="checkbox"]:checked + label, [type="option"]:checked + label {
	font-weight:bold;
}

[required]:valid + label {
	color: green;
}
[required]:invalid + label {
	font-weight:bold;
	color: red;
}

.antipattern {
	background: #c77;
}
	.antipattern fieldset {
		background: #a55;
	}