body {
	font-family: 'Times New Roman', Times, serif;
	background: #eee;
	margin: 0;
	position: relative;
	min-height: 60em;
	padding-bottom: 12em;
}

.wrapper {
	width: 990px;
	margin: 0 auto;
}

header {
	background: #ddd;
	margin: 0;
}

header .wrapper {
	padding: 1em 0 0 10em;
	box-sizing: border-box;
	background: url(https://avatars0.githubusercontent.com/u/13209832?v=3&s=200) no-repeat 0 50%;
	background-size: 100px 100px;
	min-height: 7em;
}

header p {
	margin-bottom: 0;
}

h1 {
	margin: 0;
	font-size: 2em;
	font-weight: 400;
}

aside {
	background: #eee;
	margin: 0;
}

html.toolbar-fixed header {
	margin-bottom: 2em;
}

html.toolbar-fixed aside {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 2;
}

.styled-select {
	position: relative;
	display: inline-block;
	min-height: 1.5em;
	overflow: hidden;
	background: #fff url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMzUwIj48cG9seWdvbiBwb2ludHM9IjEwMCAwIDIwMCAxNTAgMCAxNTAiIGZpbGw9IiM3MmMwMmMiLz48cG9seWdvbiBwb2ludHM9IjEwMCAzNTAgMjAwIDIwMCAwIDIwMCIgZmlsbD0iIzcyYzAyYyIvPjwvc3ZnPgo=) no-repeat 97% 50%;
	background-size: 1em 50%;
	padding-right: 1em;
	color: #333;
}

html.wf-loading .styled-select.face {
	background: #fff url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHdpZHRoPSczMnB4JyBoZWlnaHQ9JzMycHgnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHByZXNlcnZlQXNwZWN0UmF0aW89InhNaWRZTWlkIiBjbGFzcz0idWlsLXJpbmciPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiBmaWxsPSJub25lIiBjbGFzcz0iYmsiPjwvcmVjdD48Y2lyY2xlIGN4PSI1MCIgY3k9IjUwIiByPSI0MCIgc3Ryb2tlLWRhc2hhcnJheT0iMTYzLjM2MjgxNzk4NjY2OTI2IDg3Ljk2NDU5NDMwMDUxNDIiIHN0cm9rZT0iIzc0YmUzOSIgZmlsbD0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIyMCI+PGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHZhbHVlcz0iMCA1MCA1MDsxODAgNTAgNTA7MzYwIDUwIDUwOyIga2V5VGltZXM9IjA7MC41OzEiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMHMiPjwvYW5pbWF0ZVRyYW5zZm9ybT48L2NpcmNsZT48L3N2Zz4=) no-repeat 97% 50%;
	background-size: 1.5em 50%;
	padding-right: 1em;
}

.styled-select select {
	background: transparent;
	min-width: 120%;
	padding: 0;
	font-size: .8em;
	line-height: 1;
	border: 0;
	border-radius: 0;
	height: 26px;
	outline: none;
	opacity: 0;
}

.styled-select span {
	cursor: default;
	position: absolute;
	left: .5em;
	top: .5em;
	font-size: .8em;
}

.styled-select.layer1 span,
#grid li .layer1 {
	color: red;
}

.styled-select.layer2 span,
#grid li .layer2 {
	color: #090;
}

#grid {
	list-style: none;
	margin: 0 auto;
	padding: .5em 5px;
	width: 202px;
	position: relative;
	box-sizing: border-box;
}

#grid li {
	display: inline-block;
	width: 12px;
	height: 12px;
	font-size: .5em;
	position: relative;
	cursor: default;
	text-align: center;
}

#grid li em {
	display: block;
	position: absolute;
	top: 0;
	width: 100%;
	background: #ccc;
	font-size: .2em;
	font-family: Hack, monospace;
	font-style: normal;
}

#grid li span {
	display: block;
	position: absolute;
	top: .3em;
	left: 0;
	width: 100%;
	z-index: 1;
}

.view-Details #grid {
	width: 526px;
}

.view-Details #grid li {
	width: 32px;
	height: 60px;
	font-size: 2em;
	line-height: 1.2;
	font-family: 'Times New Roman', Times, serif;
}

.view-Table #grid li em {
	display: none;
}

.view-Zoom #grid {
	width: 90%;
	line-height: 1.6;
}

.view-Zoom #grid li {
	width: 128px;
	height: 240px;
	padding-top: 0;
	top: 1em;
	font-size: 8em;
}

.view-Zoom #grid li span {
	top: .1em;
}

.view-Zoom #grid li em {
	font-size: .1em;
}

footer {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	box-sizing: border-box;
	background: #666;
	color: #fff;
	text-align: center;
	padding: 1em 0;
}