CF Calculator

styles.css

#calculator {
	font-family: monospace;
	width: 320px;
	height: 400px;
	margin: 10px auto;
	border: 5px solid #555;
	padding: 5px;
	border-radius: 10px;
	background-color: #ddd;
}

#calculator > div {
	height: 21px;
	border-radius: 5px;
	margin: 5px;
	padding: 20px 5px 25px;
	text-align: center;
	font-size: 2em;
	font-weight: 600;
}

#screen{
	width: 216px;
	border: 2px solid #888;
	background-color: #f8f8f8;
}

#display{
	width: 202px;
	margin: 0 8px;
	overflow: hidden;
	text-align: right;
	direction: rtl;
}

.row {
	border: 1px solid red;
	float: left;
}

.rowstart {
	clear: left;
	float: left;
}

.number,
.operator,
#reset {
	width: 56px;
	background-color: #f5f5f5;
}

.number:hover,
.operator:hover,
#reset:hover{
	cursor:pointer;
}

.number {border: 2px solid red;}
.number:hover {background-color: #f88;}
.number:active {background-color: red;}

.operator {border: 2px solid green;}
.operator:hover {background-color: #8f8;}
.operator:active {background-color: green;}

#reset {border: 2px solid grey;}
#reset:hover {background-color: #ccc;}
#reset:active {background-color: darkgrey;}