html {
	height:100%;
	background:radial-gradient(circle,#ffffff,#cc6ab0);
}
* {
	margin:0;
	padding:0;
	font-family:arial;
	font-size:14px;
	font-weight:bold;
}
#calculator {
	width:325px;
	height:310px;
	margin:100px auto;
	background:linear-gradient(#9dd2ea,#8bceec);
	box-shadow:0 4px #009de4,0 10px 15px rgba(0,0,0,0.2);
	border-radius:3px;
	padding:20px 20px 9px 20px;
}
.top span {
	float:left;
}
.top .screen {
	width:212px;
	height:40px;
	background:rgba(0,0,0,0.2);
	border-radius:3px;
	font-size:17px;
	float:right;
	box-shadow:0 4px rgba(0,0,0,0.2) inset;
	padding:0 10px;
	color:#ffffff;
	text-align:right;
	letter-spacing:1px;
	text-shadow:1px 1px 2px rgba(0,0,0,0.2);
	line-height:40px;
}
.top {
	display:inline-block;
}
.keys span,.top span {
	width:66px;
	height:36px;
	border-radius:3px;
	background-color:#ffffff;
	float:left;
	margin:0 7px 11px 0;
	text-align:center;
	line-height:36px;
	color:#888;
	box-shadow:0 4px rgba(0,0,0,0.2);
	cursor:pointer;
	transition:all 0.2s ease;
	position:relative;
	top:0;
}
.keys span.operator {
	background-color:#FFF0F5;
}
.keys span:hover {
	background-color:#9c89f6;
	color:white;
	box-shadow:0 4px #6b54d3;
}
.keys span.eval {
	background-color:#f1ff92;
	box-shadow:0 4px #9da853;
	color:#888e5f;
}
.keys span.eval:hover {
	background-color:#abb850;
	box-shadow:0 4px #717a33;
	color:#ffffff;
}
.top span.clear {
	background-color:#ff9fa8;
	box-shadow:0 4px #ff7c87;
	color:#ffffff;
}
.top span.clear:hover {
	background-color:#f68991;
	box-shadow:0 4px #d3545d;
	color:#ffffff;
}
.keys span:active {
	box-shadow:0 0 #6b54d3;
	top:4px;
}
.top span.clear:active {
	box-shadow:0 0 #d3545d;
	top:4px;
}
.keys span.eval:active {
	box-shadow:0 0 #717a33;
	top:4px;
}
.radix {
	color:#258481;
	margin-top:10px;
	float:left;
}
.radix input,.radix label {
	cursor:pointer;
}