* {
		box-sizing: border-box;
	}
	
	body {
		font-family: sans-serif;
		background: #DDD;
	}
	
	h2 {
		margin: 0;
	}
	
	#heading {
		position: fixed;
		top: 0;
		left: 0;
		right: 50%;
		padding: 1em;
	}
	
	#picker-list {
		position: fixed;
		top: 0;
		left: 0;
		right: 50%;
		bottom: 0;
		overflow-y: scroll;
		padding: 1em;
	}
	
	#design {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 50%;
		right: 0;
		padding: 1em;
		overflow: scroll;
	}
	
	#output {
		background: yellow;
		width: 100%;
		height: 10em;
		margin: 1em;
	}
	
	#disposition {
		background: #aaf;
		line-height: 0;
		margin: 1em;
	}
	
	#disposition ::selection {
		background-color: transparent;
	}
	
	.slot {
		background: #aff;
		display: inline-block;
		position: relative;
		border: 1px solid black;
	}
	
	.slot::after {
		display: block;
		position: absolute;
		content: '?';
		font-size: 200%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}
	
	.slot-content {
		left: 0;
		top: 0;
		background: red;
		position: absolute;
		cursor: move;
		z-index: 10;
		display: none;
	}
	
	.container {
		width: 100px;
		height: 100px;
		margin: 5px;
		float: left;
		border: 1px solid #999;
	}
	
	.icon {
		width: 128px;
		height: 128px;
		display: none;
	}
	
	.container:hover .icon {
		border: 1px solid black;
		box-shadow: 5px 5px 5px #999;
		position: absolute;
		transform-origin: center center;
		transform: translate(-15%, -15%);
		z-index: 1;
		cursor: pointer;
		display: block;
	}
	
	#list td {
		padding: 4px;
		border: 1px solid #ccc;
	}
	
	#list {
		display: none;
	}
	
	code {
		margin: 5px;
		padding: 5px;
		background: #AFA;
		font-size: 150%;
	}
	
	label, button {
		padding: 3px;
		font-weight: bolder;
		background: #AFA;
		cursor: pointer;
		display: inline-block;
		margin: 3px;
		font-size: 1em;
	}
	
	.rounded {
		border-radius: 3px;
		border: 1px solid black;
	}
	
	.shadow {
		box-shadow: 2px 2px 2px #999;
	}
	
	.index-danger {
		border: 3px dotted #900;
		color: #900;
		background: yellow;
	}
	
	.index-danger:after {
		content: "DANGEROUS CHOICE, REINDEXING MAY BREAK SPRITES";
		display: block;
	}
	
	a.rounded.shadow {
		background: yellow;
		padding: 3px;
		font-weight: bolder;
		color: black;
		text-decoration: none;
	}

	.cover {
		z-index: 10;
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		cursor: not-allowed;
	}
	
	.cover-content {
		position: fixed;
		z-index: 20;
		max-height: 80%;
		padding: 15px;
		width: 75%;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		background: #EEE;
		overflow-y: scroll;
	}