main.css

html{
	margin:0;
	padding:0;
}
body{
	width:500px;
	margin:100px auto 0 auto;
	padding:0;
	font-family: Helvetica, arial, sans-serif;
	font-size:16px;
	font-weight:300;
	background-color:#F0F0F0;
	color:#333;
}

a{
	color:inherit;
}

footer{
	position:fixed;
	text-align:right;
	bottom:0;
	right:0;
	padding:10px 15px;
	font-size:12px;
	color:#444;
}
div.explain{
	position:relative;
	top:-80px;
	position:absolute;
	top:240px;
	box-sizing: border-box;
	width:500px;
	padding:15px;
	margin:10px 0;
	border-radius:3px;
	color:#222;
	text-align:center;
	border:1px solid #C8AF83;
	background-color:#EAC58D;
	background-image:url('img/purty_wood.png');
}
div.explain p{
	padding-bottom:25px;
	border-bottom:1px dotted rgba(0,0,0,0.3);
}
div.step{
	display:inline-block;
	vertical-align:text-top;
	width:120px;
	padding:15px;
	font-size:13px;
	border-radius:4px;
}
	div.step div{
		width:100px;
		color:#444;
		margin:0 auto;
	}
		div.step div:first-child{
			margin-bottom:10px;
		}
	div.step span{
		font-size:60px;
	}
	#step1{
		-webkit-animation: highlightstep 9s infinite;
	}
	#step2{
		-webkit-animation: highlightstep 9s 3s infinite;
	}
	#step3{
		-webkit-animation: highlightstep 9s 6s infinite;
	}

@-webkit-keyframes highlightstep {
	0%, 20%, 60%, 100% {background-color:rgba(255,255,255,0.0); }
	40% { background-color:rgba(255,255,255,0.5);}
}

div.timer{
	position:relative;
	background-color:#FAFAFA;
	/*background-color:#D0FFD0;*/
	border:1px solid #EEE;
	/*border:1px solid #B2FFAB;*/
	border-radius:3px;
	padding:15px;
	font-size:80px;
	/* -webkit-animation: pulse 2s infinite;
	-webkit-transition: all .2s ease-in-out;*/
}
div.timer.break{
	background-image:url('img/purty_wood.png');
	border:1px solid #C7A878;
	color:#555;
}
	/*
	div.timer.break + div.progress{
		opacity:0.4;
	}
	*/
	span.colon{
		padding:0;
		margin:0;
		display:inline-block;
		position:absolute;
		top:-8px;
		left:108px;
	}
	div.timer.break .btn{
		opacity:0.8;
	}
	div.timer.break .btn-red{
		text-shadow:none;
		background-color:#BBB; 
	    background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC));
	    border:1px solid #888;
	    box-shadow:	inset 0 1px 0 #FFF,
	    			inset 0 20px 0 rgba(255,255,255,0.05),
	    			0 0 3px #888;
	    color:#222;
	}
/*
div.timer:hover{
	box-shadow: 0 0 20px #76AFFF;
	-webkit-transition: all .2s ease-in-out;
}


@-webkit-keyframes pulse {
	0%, 100%   { box-shadow: 0 0 20px #76AFFF; }
	50% { box-shadow: 0 0 10px #BCD8FF}
}
*/
span.time{
	display:inline-block;
	position:relative;
	left:0;
	width:90px;
	padding:10px;
	margin:0;
}
div.controls{
	position:absolute;
	/*top:10px;
	right:10px;*/
	top:50px;
	left:280px;
	width:200px;
	/*height:100px;*/
	/*
	border-radius:2px;
	border:1px solid #DDD;
	background-color:#EEE;
	*/
}


.btn{
	min-width:140px;
	text-align:center;
	text-transform:uppercase;
	font-size:20px;
	margin:0;
	position:relative;
	display:inline-block;
	padding:10px 20px;
	vertical-align:text-top;
	border-radius:5px;

    color:#FFF;
    text-decoration:none;
    cursor:pointer;
    background-color:#BBB; 
    background: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC));
    border:1px solid #888;
    box-shadow:	inset 0 1px 0 #FFF,
    			inset 0 20px 0 rgba(255,255,255,0.05),
    			0 0 3px #888;
    color:#222;
}
.btn:hover{
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.3),
				inset 0 3px 0 rgba(255,255,255,0.1),
				inset 0 20px 0 rgba(255,255,255,0.05),
				0 0 5px #666;
}
.btn:active{
	box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),
				inset 0 3px 0 rgba(0,0,0,0.05),
				0 0 3px #AAA;
}

.btn-blue{
	text-shadow: 0 -1px #222;
	color:#FFF;
	background-color:#222ECD; 
    background: -webkit-gradient(linear, left top, left bottom, from(#384EFF), to(#222ECD));
    border:1px solid #141B7A;
    box-shadow:	inset 0 1px 0 #6584FF,
    			inset 0 20px 0 rgba(255,255,255,0.05),
    			0 0 8px #666;
}
.btn-red{
	text-shadow: 0 -1px #222;
	color:#FFF;
	background-color:#C20000;
	background: -webkit-gradient(linear, left top, left bottom, from(#EE523F), to(#C20000));
    border:1px solid #953428;
    box-shadow:	inset 0 1px 0 #FF8F8A,
    			inset 0 20px 0 rgba(255,255,255,0.05),
    			0 0 8px #666;

}

div.progress{
	z-index:-1;
	position:relative;
	top:0;
	padding:25px;
	background-color:#FFF;
	border-radius:3px;
	border:1px solid #F0F0F0;
}

div.ui-progress{
	-webkit-transition: all .2s ease-in-out; 
}