html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
	background:	#222;
}
body, table, input {
	font-size: 13px;
	line-height: 1.2em;
	font-family: calibri;
	color: #14b700;
}

#tetris	{
	position: relative;
	margin: 0	auto;
  width: 300px;
	height:	309px;
	background:	#000;
	border:	#fff	1px	solid;
}

#tetris	.left {
	background:	#000;
	position: absolute;
	width: 130px;
	height:	100%;
	left: 0px;
	top: 0px;
}
.left-border { background: #fff;	position: absolute;	z-index: 100; top: 0px;	left: 129px; width:	1px; height: 100%; }

#tetris-area {
	/* 168,308 +2px	borders	*/
	background:	#000;
	position: absolute;
	width: 168px;
	height:	308px;
	left: 131px;
	top: 0px;
	overflow: hidden;
  background:url('gamebg.gif') no-repeat center center;
  background-size: 307px 307px
}

#tetris	.block0,
#tetris	.block1,
#tetris	.block2,
#tetris	.block3,
#tetris	.block4,
#tetris	.block5,
#tetris	.block6	{
	z-index: 1000;
	font-size: 10px;
	line-height: 1em;
	position: absolute;
	width: 13px;
	height:	13px;
	background: #08310a;
  border:	0.5px solid #14b700;
  /*box-shadow:0 -1px 40px #14b700;*/
	/* with	margin 0.5px there were	problems with offsetLeft and offsetTop */
}

#tetris .left h1, #tetris .left h2 {
	color: #14b700;
	font-size: 18px;
	font-weight: bold;
	text-align:	center;
	margin-top:	12px;
	margin-bottom: 10px;
  padding-right:2px;
}

/* menu	*/

#tetris	.left .menu	{
	margin-top:	1em;

}
#tetris	.menu a, #tetris .menu a:visited {
	display: block;
	text-decoration: none;
	color: #14b700;
	background:	#222;
	border-width: 1px;
	margin-bottom: 5px;
	border-style: solid;
	border-color: #115014;
	cursor:	pointer;
	text-align:	center;
	padding: 1px 7px;
	height: 19px;
	line-height: 19px;
	width: 78px;
	margin-left: 18px;
  font-size:14px;
  font-weight:bold;
  border-radius:2px;
}
#tetris .menu a:hover { background: #072f09; border-color:#17671a; }

/* game	over */

#tetris-gameover {
	position: absolute;
	width: 100%;
	top: 50%;
	text-align:	center;
	font-weight: bold;
	display: none;
}

/* next	puzzle */
#tetris-nextpuzzle {
	position: absolute;
	top: 47%;
	left: 35%;
	background:	#ffffff;
	overflow: visible;
	display: none;
}
#tetris-keys {
	position: absolute;
	left: 25px;
	top: 135px;
}
#tetris div.h5 { margin-bottom: 0.5em; display: block; font-weight: bold; }
#tetris-keys td { padding-right: 1px; padding-bottom: 1px; }
#tetris-keys img { border-width: 0px; margin-bottom:-2px;margin-top:3px;}

/* stats */

#tetris	.left .stats {
	position: absolute;
	left: 25px;
	bottom:	10px;
}
#tetris	.stats td {	padding-bottom:	1px; line-height: 1.25em; }

#tetris	.stats .level {	text-align:	left; padding-right: 5px; }
#tetris-stats-level	{ font-weight: bold; }

#tetris	.stats .time { text-align: left; padding-right:	5px; }
#tetris-stats-time { font-weight: bold;	}

#tetris	.stats .apm	{ text-align: left;	padding-right: 5px;	}
#tetris-stats-apm {	font-weight: bold; }

#tetris	.stats .lines {	text-align:	left; padding-right: 5px; }
#tetris-stats-lines	{ font-weight: bold; }

#tetris	.stats .score {	text-align:	left; padding-right: 5px; }
#tetris-stats-score	{ font-weight: bold; }


/*** window	***/

#tetris	.window	{
	background:	#000;
	position: absolute;
	width: 167px;
	height:	307px;
	left: 132px;
	top: 1px;
	z-index: 50000;
	display: none;
}
#tetris	.window	.top {
	position: relative;
	background:	#222;
	letter-spacing:	+1px;
	height:	20px;
	line-height: 20px;
	vertical-align:	middle;
	border-bottom: 1px solid #ffffff;
	text-indent: 10px;    
}
#tetris	.window	.top .close	{
	position: absolute;
	background:	#222;
	font-weight: bold;
	right: 0px;
	top: 0px;
	height:	20px;
	line-height: 19px;
	text-indent: 7px;
	width: 21px;
	border-left: 1px solid #ffffff;
	cursor:	pointer;
}
#tetris	.window	.top .close:hover {
	background:	#000;
}
#tetris	.window	.content {
	margin:	10px;
}
#tetris	.window	.content table {
}