style.css

/* 
 * Falldown canvas game
 * Copyright 2011 Viktor Barsk
 * Licenced under CC BY-SA 2.5 
 * http://creativecommons.org/licenses/by-sa/2.5/
 * Source code: https://github.com/Ahtenus/falldown
*/

*{margin:0;padding:0;}
body{
	background-color: hsl(60, 14%,20%);
	font-family: Calibri,sans,arial, Sans-serif;
	width:100%;
	height:100%;
	color: hsl(60, 4%,10%);
	   -moz-transition: all 2s ease-out;	/* FF3.7+ */
	     -o-transition: all 2s ease-out;	/* Opera 10.5 */
	-webkit-transition: all 2s ease-out;	/* Saf3.2+, Chrome */
	        transition: all 2s ease-out;
}
body.end{
	background-color:white;
}
body.start{
	background-color: hsl(60, 4%,80%);
}
body.top10{
	background-color: hsl(120, 40%,50%);
}
body.highscore{
	background-color: hsl(120, 60%,50%);
}
canvas{
	background-color: hsl(60, 4%,14%);
	position:absolute;
	z-index:1;
	cursor:crosshair;
}
div.screen{
	background-color: hsl(60, 4%,5%);
	width:700px;
	height: 480px;
	opacity:0;
	text-align:center;
	position:absolute;
	color: hsl(60, 60%,65%);
	   -moz-transition: all 1s ease-out;	/* FF3.7+ */
	     -o-transition: all 1s ease-out;	/* Opera 10.5 */
	-webkit-transition: all 1s ease-out;	/* Saf3.2+, Chrome */
	        transition: all 1s ease-out;	
	z-index:2;
}
body.end div#endscreen{
	opacity:0.8;
	z-index:3;
}
body.start div#startscreen{
	opacity:1;
	z-index:3;
}
div.screen .container{
	display:none; /* To avoid accidential clicks */
}
body.end div#endscreen .container, body.start div#startscreen .container{
	display:inline;
}
div#startscreen h1{
	font-size: 48px;
	margin-top:100px;
	font-weight:normal;
	margin-bottom:200px;
}
div#endscreen table{
	margin: 75px auto 50px;
	color: white;
	font-family: arial, sans-serif;
	font-size: 12px;
	line-height: 1.5;
	text-align:left;
	padding: 10px 20px;
	width:200px;
	background-color: hsl(60, 9%,7%);
     -moz-border-radius: 5px; /* FF1+ */
  -webkit-border-radius: 5px; /* Saf3-4 */
          border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome */
}
body.top10 div#endscreen table, body.highscore table {
	margin:50px auto;
}
div#endscreen tr:first-child{
	width:100px;	
}
div#endscreen h2{
	margin-top:30px;
	margin-bottom:10px;
}
form.postscore{
	display:none;
}
form.postscore #inp{
	margin-bottom:-22px;
}
body.top10 form.postscore,body.highscore form.postscore{
	display:block;
}
body.top10 .h{display:none;}
body.highscore .ten{display:none;}
.button{
	background-color: hsl(60, 9%,9%);
	border:none;
	color: hsl(60, 60%,65%);
     -moz-border-radius: 5px; /* FF1+ */
  -webkit-border-radius: 5px; /* Saf3-4 */
          border-radius: 5px; /* Opera 10.5, IE9, Saf5, Chrome */
	  
	padding: 3px;
}
a.play{
	font-size: 24px;
	padding: 10px;
	left: 275px;
	line-height: 40px;
	height: 40px;
	cursor:pointer;
}
div#bar{
	font-family: arial,Sans-serif;
	padding: 0 15px;
	font-size: 12px;
	height: 30px;
	line-height:30px;
	color:gray;
	background-color:hsl(60, 4%,5%);
}
body.start div#bar * {
	opacity:0;
}
div#bar .score{float:left;}
div#bar .level{
	text-align:right;
	width:70px;
	float:right;
}
div#container {
	-moz-box-shadow: 2px 2px 10px rgba(0,0,0,0.7);
	-webkit-box-shadow: 2px 2px 10px rgba(0,0,0,0.7);
	box-shadow: 2px 2px 10px rgba(0,0,0,0.7); /* Opera 10.5, IE9 */
	height: 510px;
	left: 50%;
	top: 50%;
	margin-left: -350px;
	margin-top: -255px;
	position:absolute;
	width:700px;
}
footer {
	position:absolute;
	font-size:10px;
	bottom:5%;
	opacity:0.5;
	width:100%;
	text-align:center;
	line-height:14px;
}
body.end footer{
	opacity:0.65;
}
footer span{
	font-size:14px;
}
footer a{ color:inherit; text-decoration:none;}
footer a:hover{ text-decoration:underline;}