/****************************************
  ==== RESETS
****************************************/

html,body,div,canvas,#wrapper { margin: 0; padding: 0; }
html,body,#wrapper { height:100%;}

::-moz-selection { color: #333; text-shadow: none; }
::selection {  color: #333; text-shadow: none; }
.clear:after { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.clear { display: inline-table; clear: both; }
/* Hides from IE-mac \*/ * html .clear { height: 1%; } .clear { display: block; } /* End hide from IE-mac */

/****************************************
  ==== LAYOUT
****************************************/

html,body,#wrapper { width: 100%;  font-family: Helvetica, Verdana, Arial, sans-serif; }
body { }
p.header, p.footer { display: none; }
div.logo { width: 204px; height: 38px; float: left; background: url(logo.png) 0 0 no-repeat; position: relative; z-index: 10; }
div.title { height: 38px; line-height: 38px; padding: 0 10px; margin: 0 1px 0 0; float: right; color: #333; text-align: right; font-size: 18px; position: relative; z-index: 10; }
.fullscreen { float: right; position: relative; z-index: 10; }
canvas {
	position: relative;
	height:100%;
	width:100%;
}
body.template { }
#wrapper {
  position:absolute;
  text-align:center;
  top: 0; bottom: 0; left: 0; right: 0;
}
.wrapper {
	position: relative;
	width: 100%; /* <-- just a default, can be anything. */
	
}
#top, #middle, #bottom {
  position:relative;
}

#top {
  width:100%;
}
#middle {
  top:10px;
  display:inline-block;
  width: 75%;
  padding-bottom: 75%; /* 16:9 */
}
#bottom {
  bottom:0;
  height:50px;
  width:100%;
}