body {
	background: url(images/bg.jpg) top left;
	margin: 0;
	padding: 0;
	font: 14px Arial, serif;
	color: #3f2101;
}

#wrap {
	width: 960px;
	margin: 30px auto 0 auto;
}

#header {
	width: 960px; height: 105px;
	float: left;
}
#header h1.logo {
	width: 248px; height: 81px;
	margin: 0;
	padding: 0;
	float: left;
}
#header h1.logo a {
	width: 248px; height: 81px;
	background: url(images/logo.png) no-repeat;
	display: block;
	text-indent: -3000px;
}
#header a.download {
	width: 275px; height: 81px;
	background: url(images/download-app.png) no-repeat;
	display: block;
	text-indent: -3000px;
	float: right;
}

#iphone {
	width: 283px; height: 534px;
	background: url(images/iphone.png) no-repeat;
	float: left;
}

#main {
	width: 655px;
	float: right;
}
#main h2.explanation {
	width: 585px; height: 155px;
	background: url(images/explain.png) no-repeat;
	float: left;
	margin: 0 0 20px 3px;
}
#main .screen {
	width: 188px;
	float: left;
	margin-right: 35px;
}
#main .last {
	margin: 0;
}
#main .screen p {
	padding: 0 3px;
}


#footer {
	width: 100%; height: 80px;
	background: url(images/footerbg.png) repeat-x top left;
}
#footer {position: relative;
	margin-top: -80px; /* negative value of footer height */
	clear:both;} 
#footer .inside {
	width: 960px; height: 80px;
	margin: 0 auto;
}
#footer .inside p.copy {
	float: left;
	margin-top: 20px;
}
#footer .inside p.email {
	float: right;
	margin-top: 15px;
}
#footer .inside p.email a {
	font: 18px Arial, serif;
	color: #000;
}

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 80px;}  /* must be same height as the footer */

/* CLEAR FIX*/
.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */


/* PNG FIX */
*, img { behavior: url("pngfix/iepngfix.htc") }