.dfal {
	display: flex;
	flex-flow: row nowrap;
	aside {
		display: grid;
		grid-template-rows: 385px auto;
		width: 200px;
		flex: auto 0;
		padding-right: 0.5em;
		margin-right: 0.5em;
		border-right: thin solid #0006;
		ol {
			grid-row: 1;
			list-style: none;
			margin: 0 0 7px 0;
			padding: 6px;
			border: thin solid black;
			border-radius: 4px;
			overflow-y: scroll;
			background-color: #fff8;
		}
		li {
			border: thin solid black;
			margin: 0.25em 0;
			padding: 0.5em;
			text-align: center;
			border-radius: 5px;
			background-color: #fff3;
			a {
				visibility: hidden;
				float: right;
			}
			&:hover {
				box-shadow: 0 0 4px 0px orangered;
				border-color: red;
				cursor: pointer;
				a {
					visibility: visible;
				}
			}
		}
		button {
			grid-row: 2;
		}
	}
	li.active {
		background: url(../../../ui/parchment.jpg) repeat;
		background-color: #0000;
		border-color: red;
		&:hover {
			cursor: default;
			box-shadow: none;
		}
	}
	main {
		flex: 1 0;
		display: grid;
		grid-template-rows: auto 1fr;
		>table {
			td {
				&:nth-child(2) {
					text-align: right;
				}
			}
			grid-row: 1;
			a {
				margin-right: 5px;
			}
			input[name="offset"] {
				margin-right: 5px;
				width: 70px;
			}
		}
		>section {
			grid-row: 2;
			border: solid thin #0006;
			margin-top: .5em;
			padding: .5em;
			border-radius: 4px;
			background-color: #fff8;
			div {
				display: flex;
				flex-flow: row nowrap;
				margin-bottom: 0.25em;
				padding: 0.25em;
				background-color: #fff8;
				border: thin solid black;
				border-radius: 5px;
				align-items: center;
				input[type="checked"] {
					flex: 0 0;
				}
				label {
					flex: 1 0;
				}
				input[type="number"] {
					width: 100px;
				}
				input[type="color"] {
					width: 100px;
				}
			}
		}
	}
}
