/**
 * iPhone keyboard with CSS3
 * @author Lea Verou (http://leaverou.me)
 * @version 1.0
 * Licensed under the MIT license (http://www.opensource.org/licenses/mit-license.php)
 */
 
@font-face {
	font-family: 'iPhone keyboard';
	src: url(iphone-keyboard.ttf);
}

#iphone-keyboard {
	max-width:100%;
	margin-top:0;
	padding:0;
	overflow:hidden;
	border-top:1px solid #3A3D42;
	
	background:#757D8A;
	background-image:-moz-linear-gradient(#9098A3, #454f5d);
	background-image:-webkit-gradient(linear, left top, left bottom, from(#9098A3), to(#454f5d));
	
	box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
	-moz-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
	-webkit-box-shadow:0 1px 0 rgba(255,255,255,.3) inset;
}

	#iphone-keyboard li {
		text-align:center;
		margin:.5em .1em .25em;
		list-style:none;
	}
	
	#iphone-keyboard li:first-child {
		margin-top:.3em;
	}
	
	#iphone-keyboard button,
	#iphone-keyboard button.specialkey:active {
		color:#3A3D42;
		
		text-decoration:none;
		text-align:center;
		text-shadow:0 1px 1px white;
		font-weight:bold;
		
		border:0;
		border-top:1px solid rgba(255,255,255,.45);		
		
		background:#ECEDEF;
		background-image:-moz-linear-gradient(#f8f8f9, #dddfe1);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#f8f8f9), to(#dddfe1));
		
		border-radius:4px;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		
		box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
		-moz-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
	}
	
	#iphone-keyboard button {
		display:inline-block;
		width:8.6%;
		margin:0 .25%;
		padding:.02em 0 .03em;
		
		color:black;
		
		font-size:1.35em;
		font-family:Helvetica, Arial, sans-serif;
	}
	
	#iphone-keyboard button:active,
	#iphone-keyboard button.space:active {
		background-image:-moz-linear-gradient(#E2E3E4, #AAADB4);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#E2E3E4), to(#AAADB4));
	}
	
	#iphone-keyboard button.specialkey {
		background:#757D8A;
		background-image:-moz-linear-gradient(#7f8792, #535b68);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#7f8792), to(#535b68));
		
		color:white;
		text-shadow:0 -1px 1px rgba(0,0,0,.5);
	}
	
	#iphone-keyboard button.space,
	#iphone-keyboard button.return,
	#iphone-keyboard button.numbers,
	#iphone-keyboard button.international {
		font-size:1.04em;
		padding:.25em 0;
	}
	
	#iphone-keyboard button.shift,
	#iphone-keyboard button.international,
	#iphone-keyboard button.backspace {
		font-family:'iPhone keyboard', Helvetica, sans-serif;
	}
	
	#iphone-keyboard button.shift,
	#iphone-keyboard button.backspace {
		background-image:-moz-linear-gradient(#939ba6, #687180);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#939ba6), to(#687180));
	}
		
	#iphone-keyboard button.shift {
		width:12%;
		float:left;
	}
	
	#iphone-keyboard button.backspace {
		width:12%;
		float:right;
	}
	
	#iphone-keyboard button.numbers {
		width:8.4%;
		margin-right:1.4%;
		float:left;
	}
	
	#iphone-keyboard button.international {
		width:8.2%;
		float:left;
	}
	
	#iphone-keyboard button.space {
		width:59%;
		color:#525c69;
		
		background-image:-moz-linear-gradient(#dddfe2, #b4b8bf);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#dddfe2), to(#b4b8bf));
	}
	
	#iphone-keyboard button.return {
		float:right;
		width:18.9%;
	}
	
	#iphone-keyboard button.numbers a { color:#fff; text-decoration:none; }

/*
 * Styles for the narrow keyboard
 */
 
@media screen and (max-width: 479px) {
	#iphone-keyboard {
		max-width:100%;	
	}
	
	#iphone-keyboard li {
		margin-top:1em;
	}
	
	#iphone-keyboard li:first-child {
		margin-top:.7em;
	}
	
		#iphone-keyboard button {
			width:8.25%;
			padding:.16em 0;
		}
		
		#iphone-keyboard button.space,
		#iphone-keyboard button.return,
		#iphone-keyboard button.numbers,
		#iphone-keyboard button.international {
			padding:.4em 0;
		}
		
		#iphone-keyboard button.backspace {
			width:12%;
			padding-left:0;
		}
		
		#iphone-keyboard button.numbers {
			width:11%;	
		}
		
		#iphone-keyboard button.international {
			width:11%;
			padding:.38em 0;
		}
		
		#iphone-keyboard button.space {
			width:48%;
		}
		
		#iphone-keyboard button.return {
			width:24%;
		}
		
		
	button,
	button.specialkey:active {
		color:#3A3D42;
		
		text-decoration:none;
		text-align:center;
		text-shadow:0 1px 1px white;
		font-weight:bold;
		
		border:0;
		border-top:1px solid rgba(255,255,255,.45);		
		
		background:#ECEDEF;
		background-image:-moz-linear-gradient(#f8f8f9, #dddfe1);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#f8f8f9), to(#dddfe1));
		
		border-radius:4px;
		-moz-border-radius:4px;
		-webkit-border-radius:4px;
		
		box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
		-moz-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
		-webkit-box-shadow:0 1px 3px rgba(0,0,0,.7), 0 1px 0 rgba(0,0,0,.3);
	}
	
	button {
		display:inline-block;
		width:8.6%;
		margin:0 .25%;
		padding:.02em 0 .03em;
		
		color:black;
		
		font-size:1.35em;
		font-family:Helvetica, Arial, sans-serif;
	}
	
	button:active,
	button.space:active {
		background-image:-moz-linear-gradient(#E2E3E4, #AAADB4);
		background-image:-webkit-gradient(linear, left top, left bottom, from(#E2E3E4), to(#AAADB4));
	}
	
	
}