/*
 * Calculator
 * Copyright 2009 Palm Inc.
 */

#calculator-main {
		max-height: 452px;
		min-height: 424px;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		width: 320px;
		border-width: 30px 0 30px 0;
		-webkit-border-image: url(../images/backdrop.png) 30 0 30 0 repeat repeat;
		-webkit-box-sizing: border-box;
}

/* LCD Readout */

.results {
		width: 230px;
		height: 76px;
		vertical-align: middle;
		background: url(../images/lcd-readout.png) top left no-repeat;
		margin: -19px 10px 0px 10px;
		padding: 0px 50px 7px 20px; 
}


.results input {
		border: none;
		padding: 0;
		margin-top: 8px;
		outline: none;
		background: none;
		color: #91d1d3;
		line-height: 68px;
		font-size: 34px;
		width: 230px;
		text-align: right;
		-webkit-user-select: none;
}

.backspace {
		position: fixed;
		top: 33px;
		right: 18px;
		background: url(../images/backspace.png) top center no-repeat;
		width: 36px;
		height: 40px;
}

.backspace:active {
		background-position: bottom center;
}

.memory {
		border: none;
		padding: 0;
		margin: 0;
		outline: none;
		background: none;
		position: fixed;
		top: 46px;
		left: 26px;
		width: 24px;
		height: 17px;
		color: #91d1d3;
		text-shadow: #71b1b3 0px 0px 4px;
		font-size: 14px;
		font-weight: bold;
		-webkit-user-select: none;
}

/* Keypad area */

.keypad {
		padding: 0px 8px;
}

div.keypad-row {
		width: auto;
		clear: both;
		margin-top: 7px;
		height: 59px;
}

.keypad-row.row-one {
		position: absolute;
		top: 18.5%;
}

.keypad-row.row-two {
		position: absolute;
		top: 35.5%;
}

.keypad-row.row-three {
		position: absolute;
		top: 53.3%;
}

.keypad-row.row-four {
		position: absolute;
		top: 71.2%;
}

.keypad-row.row-five {
		position: absolute;
		top: 89.2%;
}

.keypad-row .key {
		width: 76px;
		height: 57px;
		display: table-cell;
		background: #339;
		vertical-align: middle;
		text-align: center;
}

div.key.whitebutton {
		background: url(../images/button-white.png) top no-repeat;
}

div.key.whitebutton:active {
		background: url(../images/button-white.png) bottom no-repeat;
}

div.key.bluebutton {
		background: url(../images/button-blue-operator.png) top no-repeat;
		background: url(../images/button-blue.png) top no-repeat;
}

div.key.bluebutton:active {
		background: url(../images/button-blue.png) bottom no-repeat;
}

div.key.bluebutton.operator {
		background: url(../images/button-blue-operator.png) top no-repeat;
}

div.key.bluebutton.operator:active {
		background: url(../images/button-blue-operator.png) bottom no-repeat;
}

div.key.redbutton {
		background: url(../images/button-red.png) top no-repeat;
}

div.key.redbutton:active {
		background: url(../images/button-red.png) bottom no-repeat;
}

.whitebutton div,
.redbutton div,
.bluebutton div {
		width: auto;
		height: 44px;
		margin: 0px 6px 9px 6px;
}

/* Key Glyphs */

.mplus 				{ background: url(../images/key-mplus.png) top left no-repeat; }
.mr 				{ background: url(../images/key-mr.png) top left no-repeat; }
.mc 				{ background: url(../images/key-mc.png) top left no-repeat; }
.divide 			{ background: url(../images/key-divide.png) top left no-repeat; }
.add 				{ background: url(../images/key-add.png) top left no-repeat; }
.subtract 			{ background: url(../images/key-subtract.png) top left no-repeat; }
.multiply 			{ background: url(../images/key-multiply.png) top left no-repeat; }
.equals 			{ background: url(../images/key-equals.png) top left no-repeat; }
.clear 				{ background: url(../images/key-clear.png) top left no-repeat; }
.divide.option 		{ background: url(../images/key-mminus.png) top left no-repeat; }
.multiply.option 	{ background: url(../images/key-percent.png) top left no-repeat; }
.subtract.option 	{ background: url(../images/key-sqrt.png) top left no-repeat; }
.add.option 		{ background: url(../images/key-plusminus.png) top left no-repeat; }
.one 				{ background: url(../images/key-1.png) top left no-repeat; }
.two 				{ background: url(../images/key-2.png) top left no-repeat; }
.three 				{ background: url(../images/key-3.png) top left no-repeat; }
.four 				{ background: url(../images/key-4.png) top left no-repeat; }
.five 				{ background: url(../images/key-5.png) top left no-repeat; }
.six 				{ background: url(../images/key-6.png) top left no-repeat; }
.seven 				{ background: url(../images/key-7.png) top left no-repeat; }
.eight 				{ background: url(../images/key-8.png) top left no-repeat; }
.nine 				{ background: url(../images/key-9.png) top left no-repeat; }
.zero 				{ background: url(../images/key-0.png) top left no-repeat; }
.decimal 			{ background: url(../images/key-decimal.png) top left no-repeat; }     
.decimal.comma 		{ background: url(../images/key-comma.png) top left no-repeat; }     