/*
	Phone
	Dial Pad
	Copyright (c) 2007-2009, Palm Inc.
	All rights reserved.

*/

.palm-scene {
    width: 100%;
    height: 100%;
}

.scene-wrapper {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
}

.scene-wrapper,
.dialpad-scene {
    min-height: 344px;
}

.dialpad-scene > .phone-menu-short {
    background: none;
}

/* input field */

.input-field input[type=text],
.input-field .text-input {
		border: none;
		height: 53px;
		vertical-align: middle;
		text-align: center;
		margin: 0;
		width: 220px;
		padding: 0 50px 0 50px;
		line-height: 49px;
		font-size: 30px;
		outline: none;
		background: none;
		color: #fff;
		-webkit-user-drag: none;
}

.contact-name {
		font: 11px/17px;
		width: 100%;
		text-align: center;
		color: #fff;
}

.text-input.small1 {
		font-size: 28px;
}

.text-input.small2 {
		font-size: 24px;
}

.text-input.small3 {
		font-size: 22px;
}

.text-input.small4 {
		font-size: 20px;
}

.text-input.small5 {
		font-size: 16px;
}

.text-input.hinttext {
		color: #bcceb3;
		font-size: 16px;
		padding: 0 60px 0 40px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
}

.backspace {
		position: absolute;
		top: 0px;
		right: 5px;
		background: url(../images/dialpad-backspace.png) top center no-repeat;
		width: 58px;
		height: 50px;
		z-index: 6;
}

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

.lookup {
		position: absolute;
		padding: 0 12px 0 4px;
		right: 0px;
		width: 32px;
		height: 53px;
		background: url(../images/address-contact.png) 4px 50% no-repeat;
}

/* key pad sizing */

.keypad-digit {
        position: absolute;
        top: 50%;
        margin-top: -20px;
        -webkit-box-sizing: border-box;
        height: 30px;
        font-size: 30px;
        color: #FFF;
}

.keypad-letters {
        text-align: right;
        right: 20px;
        height: 16px;
        position: absolute;
        top: 50%;
        margin: -10px 0px 0px;
        padding: 0px;
        font-weight: bold;
        font-size: 14px;
        color: #9A9A9A;
}

.selected > .keypad-letters {
        color: #fff;
}

.keypad-flex {
		width: 320px;
		position: absolute;
		top: 48px;
		bottom: 47px;
		max-height: 379px;
		min-height: 226px;
		z-index: 5;
}

.keypad-buttons {
        position: absolute;
        top: 3px;
        bottom: 54px;
}

.menu-wrapper {
		width: 320px;
		position: absolute;
		top: 52px;
		bottom: 0px;
		z-index: 1;
}

.glassbutton {
        position: relative;
        padding: 0px 20px;

		text-align: center;
		-webkit-box-sizing: border-box;
		height: 25%;
		float: left;
}

.one > .keypad-digit,
.two > .keypad-digit,
.three > .keypad-digit {
        margin-top: -32px;
}

.one > .keypad-letters,
.two > .keypad-letters,
.three > .keypad-letters {
        margin-top: -22px;
}

.star > .keypad-digit {
        line-height: 55px;
        font-size: 55px;
}

.one > .keypad-letters {
        width: 24px;
        height: 11px;
        margin-top: -18px;
        background: url(../images/voicemail-key.png) 0px 0px no-repeat;
}

.keypad-flex .one {
		-webkit-border-image: url(../images/one-down.png) 26 0 2 0;
		-webkit-border-image: url(../images/one.png) 26 0 2 0;
		border-width: 26px 0px 2px 0px;
		width: 106px;
}

.keypad-flex .one.selected {
    -webkit-border-image: url(../images/one-down.png) 26 0 2 0;
}

.keypad-flex .two {
		-webkit-border-image: url(../images/two-down.png) 26 0 2 0;
		-webkit-border-image: url(../images/two.png) 26 0 2 0;
		border-width: 26px 0px 2px 0px;
		width: 108px;
}

.keypad-flex .two.selected {
		-webkit-border-image: url(../images/two-down.png) 26 0 2 0;
}

.keypad-flex .three {
		-webkit-border-image: url(../images/three-down.png) 26 0 2 0;
		-webkit-border-image: url(../images/three.png) 26 0 2 0;
		border-width: 26px 0px 2px 0px;
		width: 106px;
}

.keypad-flex .three.selected {
		-webkit-border-image: url(../images/three-down.png) 26 0 2 0;
}

.keypad-flex .four,
.keypad-flex .seven,
.keypad-flex .star {
		-webkit-border-image: url(../images/four-down.png) 2 0 2 0;
		-webkit-border-image: url(../images/four.png) 2 0 2 0;
		border-width: 2px 0px 2px 0px;
		width: 106px;
}

.keypad-flex .four.selected,
.keypad-flex .seven.selected,
.keypad-flex .star.selected {
		-webkit-border-image: url(../images/four-down.png) 2 0 2 0;
}

.keypad-flex .five,
.keypad-flex .eight,
.keypad-flex .zero {
		-webkit-border-image: url(../images/five-down.png) 2 0 2 0;
		-webkit-border-image: url(../images/five.png) 2 0 2 0;
		border-width: 2px 0px 2px 0px;
		width: 108px;
}

.keypad-flex .five.selected,
.keypad-flex .eight.selected,
.keypad-flex .zero.selected {
		-webkit-border-image: url(../images/five-down.png) 2 0 2 0;
}

.keypad-flex .six,
.keypad-flex .nine,
.keypad-flex .pound {
		-webkit-border-image: url(../images/six-down.png) 2 0 2 0;
		-webkit-border-image: url(../images/six.png) 2 0 2 0;
		border-width: 2px 0px 2px 0px;
		width: 106px;
}

.keypad-flex .six.selected,
.keypad-flex .nine.selected,
.keypad-flex .pound.selected {
		-webkit-border-image: url(../images/six-down.png) 2 0 2 0;
}

/* static size buttons */

.dial-button { 
		position: absolute;
		bottom: 0px;
		width: 100%;
		height: 54px;
		background: url(../images/dial-button.png) top center no-repeat;
}

.dial-button:active {
		background: url(../images/dial-button.png) bottom center no-repeat;
}

.dial-button.disabled,
.dial-button.disabled:active {
		background: url(../images/dial-button.png) center center no-repeat;
}

.disconnect-button,
.empty-button {
    	margin: 0;
		padding: 0;
		width: 320px;
		height: 54px;
		clear: both;
	  	background: url(../images/empty-button.png) top center no-repeat;
		background: url(../images/disconnect-button.png) top center no-repeat;
		border: none;
		-webkit-border-image: none;
}

.empty-button {
  text-align: center;
  color: #FFF;
  font-size: 24px;
  font-weight: normal;
  line-height: 52px;
  background: url(../images/empty-button.png) top center no-repeat;
}

.disconnect-button:active {
		background: url(../images/disconnect-button.png) bottom center no-repeat;
}

.empty-button:active {
        color: #222;  
		background: url(../images/empty-button.png) bottom center no-repeat;
}

.disconnect-button.disabled,
.disconnect-button.disabled:active {
		background: url(../images/disconnect-button.png) center center no-repeat;
}

.empty-button.disabled,
.empty-button.disabled.selected {
    background: url(../images/empty-button.png) center center no-repeat;
}

.fullscreen-pic .disconnect-button {
    height: 125px;
    background: url(../images/active-call-sprite.png) 0px -452px no-repeat;
}

.fullscreen-pic .disconnect-button.disabled {
    background: url(../images/active-call-sprite.png) 0px -577px no-repeat;
}

.fullscreen-pic .disconnect-button.selected {
    background: url(../images/active-call-sprite.png) 0px -702px no-repeat;
}

/* dial button icons */

.glassbutton > div {
        width: 100%;
        position: absolute;
        top: 50%;
        height: 46px;
        margin-top: -23px;
        background-position: center center;
        background-repeat: no-repeat;
}

.keypad-flex div.dial-button div,
.keypad-flex .disconnect-button div {
		width: 100%;
		height: 40px;
		margin-top: -10px !important;
		margin: auto;
		background: url(../images/dial-button-icon.png) top center no-repeat;
}

.keypad-flex .disconnect-button div {
		margin-top: 6px !important;
}

.keypad-flex div.dial-button:active div,
.keypad-flex div.dial-button.disabled div {
		background: url(../images/dial-button-icon.png) bottom center no-repeat;
}

.keypad-flex .disconnect-button div {
		background: url(../images/disconnect-button-icon.png) top center no-repeat;
}

.keypad-flex .disconnect-button:active div,
.keypad-flex .disconnect-button.disabled div {
		background: url(../images/disconnect-button-icon.png) bottom center no-repeat;
}

.keypad-flex .empty-button {
		text-align: center;
		color: #FFF;
		font-size: 24px;
		line-height: 40px;
		font-weight: normal;
}

/* Firstuse styles */

.firstuse .fullscreen-pic .disconnect-button { background-position-x: -320px; }