body{
	margin: 0px;

	color: #fff;
	background-color: #000;
}
body.popout{
	overflow:  hidden;
}
a:link {
	color: #88f;
}
a:visited{
	color: #66d;
}
a:hover{
	color: #edecbb;
}
a:active{
	color: #f00;
}

#container{
	width: 100%;
	height: 100%;
	position:absolute;
}

#game,
#soundnote,
#diarybar,
#diary,
#diarytitle,
#diarynote,
#docs,
#cc
{
	margin: auto;
	display: block;
}
#diarytitle{
	font-variant: small-caps;
	font-style: italic;
	font-size: large;
	text-align: center;
}
#diarynote,
#soundnote,
#popoutnote,
#cc{
	font-style: italic;
	font-size: small;
	text-align: center;
}
#diarybar{
	width: 768px;
}

#docs{
	text-align: center;
	margin-top:  1em;
	margin-bottom:  1em;
}
.docspan{
	margin-left: 2em;
	margin-right: 2em;
}

canvas {
	imageSmoothingEnabled: false;
	webkitImageSmoothingEnabled: false;
	mozImageSmoothingEnabled: false;

	/*experimental new defs for high-density displays*/
	/* http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas */
	image-rendering: optimizeSpeed;             /* Older versions of FF          */
	image-rendering: -moz-crisp-edges;          /* FF 6.0+                       */
	image-rendering: -webkit-optimize-contrast; /* Safari                        */
	image-rendering: -o-crisp-edges;            /* OS X & Windows Opera (12.02+) */
	image-rendering: pixelated;                 /* Awesome future-browsers       */
	-ms-interpolation-mode: nearest-neighbor;   /* IE                            */
}

.buttons{
	position: fixed;
	bottom: 10%;
	height: 150px;
}
#buttons_left{
	left: 0%;
	width: 180px;
}
#buttons_right{
	right: 0%;
	width: 140px;
}
.control{
	width: 50px;
	height: 50px;
	position:absolute;
	opacity: 0.5;
}
#btn_up{
	top:0px;
	left:70px;
}
#btn_down{
	bottom:0px;
	left:70px;
}
#btn_left{
	top:50px;
	left:20px;
}
#btn_right{
	top:50px;
	left:120px;
}
#btn_A{
	top:50px;
	right:20px;
}
#btn_B{
	top:50px;
	right:80px;
}