html, body {
	margin:				0;
	height:				100%;
}

body {
	background-color:	#eee;
}

body.freeze {
	overflow:			hidden;
}

#center {
	width:				960px;
	margin:				auto;
	padding-top:		1em;
	padding-bottom:		1em;
	background-color:	#fff;
	text-align:			center;
}

#letterbox {
	transition:			background 1s;
}

#letterbox.active {
	position:			absolute;
	left:				0;
	top:				0;
	right:				0;
	bottom:				0;
	background:			black;
	z-index:			10;
}

#myCanvas {
	margin:				auto; 
	border:				1px solid #bbb;
}

h1 {
	margin-top:			0;
	margin-bottom:		1em;
	font-family:		sans-serif;
	font-size:			larger;
}

h2 {
	font-family:		sans-serif;
	font-size:			large;
	color:				#444;
}

h2::before, h2::after {
	position:			relative;
	content:			'\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7\b7';
	color:				#bbb;
}
h2::before {
	padding-right:		1em;
}
h2::after {
	padding-left:		1em;
}

p {
	width:				40%;
	margin:				1em auto;
}

.list-dots {
	width:				40%;
	margin:				1em auto;
	list-style-type:	disc;
	text-align:			left;
}
.list-plain {
	list-style-type:	none;
	padding:			0;
}