html {
	text-align: center; font-family: "Open Sans", sans-serif; 
	color: #444; background-color: #EEE; }
body { width: 500px; margin: 0px auto; }

h1, #score, #grid { font-family: "Comfortaa"; }

header, #grid, #level, footer {
	cursor: default;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}


header a, nav a { 
	display: inline-block; padding: 2px 4px; font-size: 12px;
	background-color: white; border-radius: 3px; color: #444;
	text-decoration: none; box-shadow: 0px 3px 0px #CCC; cursor: pointer; }
header a:active, nav a:active { 
	box-shadow: 0px 0px 0px #CCC; position: relative; top: 3px; }

header { position: relative; height: 64px; margin-top: 12px; }
h1 {
	position: absolute; top: 0px; left: 30px; 
	display: inline-block; width: 190px;
	font-size: 48px; line-height: 64px; margin: 0px; }
header div {
	position: absolute; top: 0px; right: 0px; 
	display: inline-block; width: 250px; }
header p { margin: 0px; }
#score { font-size: 24px; line-height: 36px; height: 36px; }

#game { position: relative; width: 500px; height: 500px; margin: 10px 0px; }
#game > div { position: absolute; top: 0px; left: 0px;  }

#grid {
	width: 480px; height: 480px; padding: 10px;
	background-color: #DDD;	border-radius: 8px;
	box-shadow: 0px 3px 0px #BBB inset; }
#grid div { 
	display: inline-block; width: 110px; height: 110px; 
	margin: 5px; border-radius: 5px; float: left;
	line-height: 110px; font-size: 60px;
	box-shadow: 0px 3px 0px #CCC; background-color: white; }

#grid div.bv { background-color: white; box-shadow: 0px 0px 15px #DDD inset, 0px 3px 0px #CCC; }
#grid div.b2 { background-color: #EAF4F9; box-shadow: 0px 0px 15px #CAE9F7 inset, 0px 3px 0px #CCC; }
#grid div.b4 { background-color: #E0F5FF; box-shadow: 0px 0px 15px #C1EBFF inset, 0px 3px 0px #CCC; }
#grid div.b8 { background-color: #C9EDFF; box-shadow: 0px 0px 15px #96DDFF inset, 0px 3px 0px #CCC; }
#grid div.b16 { background-color: #CCF3F3; box-shadow: 0px 0px 15px #93F2F2 inset, 0px 3px 0px #CCC; }
#grid div.b32 { background-color: #D5EEBC; box-shadow: 0px 0px 15px #C0ED93 inset, 0px 3px 0px #CCC; }
#grid div.b64 { background-color: #E8DBFF; box-shadow: 0px 0px 15px #CDB2FF inset, 0px 3px 0px #CCC; }
#grid div.b128 { background-color: #FBCDDA; box-shadow: 0px 0px 15px #F99FB9 inset, 0px 3px 0px #CCC; font-size: 50px; }
#grid div.b256 { background-color: #FFE5CA; box-shadow: 0px 0px 15px #FFC993 inset, 0px 3px 0px #CCC; font-size: 50px; }
#grid div.b512 { background-color: #FFA200; box-shadow: 0px 0px 15px #FFCD77 inset, 0px 3px 0px #CCC; color: white; font-size: 50px; }
#grid div.b1024 { background-color: #FFFA87; box-shadow: 0px 0px 15px #FFF547 inset, 0px 3px 0px #CCC; font-size: 40px;}
#grid div.b2048 { background-color: #333; box-shadow: 0px 0px 15px #555 inset, 0px 3px 0px #CCC; color: white; font-size: 40px; }

#grid.over div {
	background-color: #CCC; box-shadow: 0px 0px 15px #AAA inset, 0px 3px 0px #CCC; }

#touch { width: 500px; height: 500px; }
#touch div { position: absolute; }
#touch div:nth-child(1) { top: 15px; left: 135px; width: 230px; height: 110px; }
#touch div:nth-child(2) { top: 135px; left: 15px; width: 110px; height: 230px; }
#touch div:nth-child(3) { bottom: 135px; right: 15px; width: 110px; height: 230px; }
#touch div:nth-child(4) { bottom: 15px; right: 135px; width: 230px; height: 110px; }

#text { color: #999; position: relative; height: 16px; }
#text p { position: absolute; top: 0px; margin-bottom: 0px; }
#text p:first-child { left: 0px; }
#text p:last-child { right: 0px; }

#bar {
	position: relative; height: 5px; margin-top: 16px;
	border-radius: 2.5px; background-color: #DDD; }
#bar div { 
	height: 5px; width: 0%; background-color: white; }

nav.big { margin: 50px 0px 15px; }
nav.big a { font-size: 20px; margin: 0px 10px; padding: 2px 8px; }
nav.small { margin: 0px 0px 20px; }
nav.small a { margin: 0px 5px; }

footer { font-size: 12px; color: #777; }
footer a { color: #26F; text-decoration: none; }
footer a:hover { color: #38F; text-decoration: underline; }
/*
     FILE ARCHIVED ON 08:41:11 Dec 11, 2014 AND RETRIEVED FROM THE
     INTERNET ARCHIVE ON 11:48:13 Jul 10, 2024.
     JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE.

     ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C.
     SECTION 108(a)(3)).
*/
/*
playback timings (ms):
  captures_list: 1.287
  exclusion.robots: 0.096
  exclusion.robots.policy: 0.069
  esindex: 0.022
  cdx.remote: 162.071
  LoadShardBlock: 93.987 (3)
  PetaboxLoader3.datanode: 86.318 (4)
  PetaboxLoader3.resolve: 99.758 (2)
  load_resource: 110.647
*/