/* clears everything (not sure if it works) */
html, body, ul, ol, li, p,
h1, h2, h3, h4, h5, h6,
form, fieldset, a {
margin: 0;
padding: 0;
border: 0;
}

/* prevents blue borders around linked images*/
img {
  border-style: none;
}

html, body {
	height: 100%;
	background:#4169E1;
}

body {
	text-align:center; /* horizontal centering for IE Win quirks */
}

#distance { 
	width:1px;
	height:50%;
	background-color:#FFFFFF;
	margin-bottom:-370px; /* half of container's height */
	float:left;
}

#container {
	background:#FFFFFF;
	margin:0 auto;
	position:relative; /* puts container in front of distance */
	text-align:left;
	height:740px;
	width:1000px; /* ad right + iphone + ad left 300 + 400 + 300 */
	clear:left;
}

/* 
 * Left Column
 * left inside container
 *  20px margin - introduction
 * 325px height - introduction  
 *   0px margin - leftblock
 * 250px height - leftblock
 * 395px margin - leftfooter (changed to 45px)
 * 100px height - leftfooter
 * 
 */
#leftcolumn {
	background:#B0E0E6;
	float:left;
	margin:0px; /* (740 - 250)/2 = 245 */
	height:740px;
	width:300px;
}

#introduction {
	margin-top:20px; 
	/*float:left;*/
	height:325px; /* (740 - 250) - 20 = 470 - 145 - 100 = */
	width:300px;
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#introduction h2 {
	font-size:28px;
	line-height:40px;
}

#introduction h3 {
	text-align:center;
	font-size:14px;
	padding:10px 0px 0px 10px;
}

#introduction p { padding:10px; }

#introduction img { padding:10px; }

/* left block inside left column */
#leftblock {
	margin-top:0px; /* (740 - 250)/2 = 245 */
	height:250px;
	width:300px;
}

#leftfooter {
	/*margin-top:395px;*/ /* 45px 740 - (250 + 245) = 245 - 45 = 200 */
	margin-top:45px;
	height:100px;
	width:300px;
}

#leftfooter p {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	text-align:center;
	
	font-size:9px;
	line-height:12px;
}

/* 
 * iPhone Column
 * center inside container
 */
#iphone {
	text-align:left;
	height:740px;
	width:400px;
	float:left;
	background-image:url(iphoneportrait.jpg);
}

#screen {
	margin-top:140px;
	margin-left:42px;
	height:480px;
	width:320px;
	border:none;
}

#homebutton {
	margin-top:10px;
	margin-left:165px;
	height:70px;
	width:70px;
	cursor:pointer;
}

/* 
 * Right Column
 * right inside container
 */
#rightcolumn {
	margin:0px;
	float:left;
	height:740px;
	width:300px;
}

#instructions {
	margin-top:20px; 
	float:left;
	height:470px; /* (740 - 250) - 20 = 470*/
	width:300px;
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
}

#instructions h3 {
	font-size:14px;
	padding:10px 10px 0px 10px;
}

#instructions p { padding:10px; }

#instructions img { padding:10px; }

/* right block inside right column */
#rightblock {
	margin-top:0px; /* (740 - 250) = 490 */
	height:250px;
	width:300px;
}

.floatright { float:right; }

h2 {
	font-size:24px;
	line-height:40px;
	text-align:center;
}

p {
	font-size:12px;
	line-height:16px;
}