screen.css

/* Color palette: Still standing @ colourlovers.com */

/* Some nice fonts */
/* @import url(http://fonts.googleapis.com/css?family=Pontano+Sans); */
/* @import url(http://fonts.googleapis.com/css?family=Inconsolata); */

/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}

body  {
	font-family: "Pontano Sans";
}

header {
	padding-left: 1em;
	padding-top: 1em;
}
header h1, header h2, header h3 {
	display: inline;
}

header h1 {
	font-size: 1.5em;
}

header h2 {
	font-size: 1em;
}

header h2 a {
	color: #AAAAAA;
}
header h2 a:hover {
	color: deeppink;
}

header h3 {
	font-size: 0.8em;
	color: lightgray;
}

canvas {
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	border: 1px solid lightgray;
}

/* Game */

#game {
	width: 50%;
	text-align: center;
}

#game canvas {
	margin: 3em;
	background-color: white;
}

#game canvas:-webkit-full-screen {
	width: 200%;
}

#game table {
	margin: auto;
	margin-bottom: 2em;
}

#game table td {
	padding: 0 2em;
}

body {
	overflow: hidden;
}

/* Controls */

#controls {
  margin-bottom: 2em;
}

/* Menu */

aside {
	width: 50%;
	height: 100%;
	position: absolute;
	top: 0;
	right: -54%;
	padding: 2%;
	background-color: #F0F0F0;
	transition: right 0.3s ease-out;
}

aside > #expand_button {
	padding: 0.5em;
	position: absolute;
	left: -40px;
	top: 100px;
	transform: rotate(-90deg);
	display: inline-block;
	background-color: #F0F0F0;
}

aside:hover {
	right: 0;
	transition: right 0.3s ease-out;
}

/* First level categories */

aside > section h3 {
	line-height: 2em;
	padding-left: 0.5em;
	cursor: pointer;
}

aside > section {
	height: 2em;
	overflow: hidden;
	background-color: white
}

aside > section.expanded {
	height: auto;
	transition: height 1s;
}

/* Second level */

aside > section > section h4 {
	line-height: 1em;
	padding: 0.3em;
	padding-left: 1em;
	cursor: pointer;
}

aside > section > section {
	height: 1.6em;
	overflow: hidden;
}

aside > section > section.expanded {
	height: auto;
	transition: height 1s;
}

/* Settings */

#settings {
}

#settings h3 {
	background-color: #75D9B4;
}

#settings h4 {
	background-color: #ADD9C9;
}

#settings .palette {
	display: inline-block;
	margin-right: 0.5em;
	height: 1em;
	border: 1px solid lightgray;
}

#settings .palette.selected {
	border: 1px solid red;
}

#settings .palette .square {
	display: inline-block;
	width: 1em;
	height: 1em;
}

/* Debugger */

#debugger {
	font-family: "Inconsolata";
}

#debugger h3 {
	background-color: #F2896F;
}

#debugger h4 {
	background-color: #F2B5A6;
}

#debugger table {
	border: 1px solid black;
	border-collapse: collapse;
}

#debugger table td {
	border: 1px solid black;
}

#buttons button {
	width: 4em;
}

#registers, #flags, #memory, #breakpoints {
	vertical-align: top;
}

#flags label:after {
	content: "\000A";
	white-space: pre;
}

#video span {
	position: relative;
}

#video span canvas {
	position: absolute;
	top: 0;
	left: 0;
};

#video #tiles, #video #background, #video #oam {
	display: inline-block;
	vertical-align: top;
}

#video #oam span {
	padding-left: 0.2em;
}

/* About */

#about h3 {
	background-color: #FFB87F;
}

#about p {
  margin: 1em .5em;
}

/* Changelog */

#changelog h3 {
	background-color: #FFEC72;
}

#changelog h4 {
	background-color: #FFF4Ac;
}

#changelog p {
	margin-top: 1em;
}

#changelog li {
	padding-left: 2em;
}