body {
	/* ensure that we don't get the default callout following a long touch on
	an element, which is a default behavior in Mobile Safari */
	-webkit-touch-callout: none;
	/* disable the Mobile Safari default behavior to adjust font size automatically
	to improve readability */
	-webkit-text-size-adjust: none;
	width: 320px;
}

/*
when the orientation changes to landscape mode, the body is assigned the .landscape
class so that we can easily change metrics and other properties via simple CSS matching
*/
body.landscape {
	width: 480px;
}

body > div {
	-webkit-transform: translate(0px,0px);
}

.header {
	height: 40px;
}

	.header h1 {
		font-size: 16pt;
	}

	.header .headerButton {
		background: none;
		border: none;
		-webkit-border-image: url(../img/iphone/btn.png) 0 4 0 4;
		border-width : 0 4px;
		font-size: 12px;
		margin: 6px 0 0 10px;
		padding: 8px 4px 0 4px;
		height: 23px;
		/* base metrics used to ensure a minumum size and specify a max size that can be used to trim the contents */
		min-width: 40px;
		max-width: 60px;
		/* enfore trimming if the label is too long */
	}

	.header .headerButton:active {
		-webkit-border-image: url(../img/iphone/btnAct.png) 0 4 0 4;
	}

	.header .backButton {
		-webkit-border-image: url(../img/iphone/btnBack.png) 0 4 0 13;
		border-width : 0 4px 0 13px;
		padding: 8px 4px 0 0;
	}

	.header .backButton:active {
		-webkit-border-image: url(../img/iphone/btnBackAct.png) 0 4 0 13;
	}