* { margin: 0; padding: 0; outline: 0 }
body, html { width: 100%; padding: 0; margin: 0 }
html { background: #eceff2 }
body { width: 900px; margin: 0 auto; font: 14px/1.5 Arial, Helvetica, sans-serif; color: #333; background: #eceff2 }
input,textarea,select { font: 0.9em/1.5 Arial, Helvetica, sans-serif; color: #333 }

ul { list-style: none }
ol { list-style-position: outside; padding: 0 0 0 26px; margin: 0 0 15px 0 }
ol li { padding: 0; margin: 0 }

a { text-decoration: none; cursor: pointer }
a:hover { text-decoration: underline }
a img { border: 0 }
.end { clear: both; width: 100%; height: 0px; overflow: hidden }

.container { width: 900px; margin: 0 auto; background-color: #fff; background-position: center top; background-repeat: no-repeat; -webkit-box-shadow: 0 0 8px rgba(0,0,0,0.25); -moz-box-shadow: 0 0 8px rgba(0,0,0,0.25); box-shadow: 0 0 8px rgba(0,0,0,0.25); padding-bottom: 40px; position: relative }

#header { float: left; display: inline; width: 900px; position: relative; margin: 0; padding: 0 }
#logo a { display: block; margin: 25px 0 0 50px }
#header h2 { font-size: 2.2em; font-weight: bold; line-height: 1.2; color: #000; margin: 30px 420px 0 50px }
#header h3 { font-size: 1.6em; font-weight: bold; line-height: 1.2; color: #000; margin: 15px 420px 20px 50px }
#header h3 strong { font-size: 1.75em; color: #000 }

#content { float: left; display: inline; margin: 0 30px 0 50px; width: 505px }
#content h3, #content .h3 { font-size: 1.5em; font-weight: bold; line-height: 1.2; color: #000; margin: 15px 0 }
#content h3.offer { color: #000; margin-top: 20px }
#content h3 strong { color: #000; font-size: 1.75em } 
#content p { margin-bottom: 15px }
#content ul { margin-bottom: 25px }
#content ul li { padding: 5px 0 0 28px; background: url(../images/check.png) 6px 5px no-repeat; position: relative }
#content ul li strong { color: #000 }
#content ul li ul { padding: 0; border: none; margin-bottom: 3px; margin-top: -3px }
#content ul li ul li { padding: 5px 0 0 32px; background: url(../images/bullet.png) 14px 10px no-repeat }
#content ul li em { font-size: 0.9em }
#content ul li a.info { font-size: 0.9em; line-height: 1; position: absolute; right: 0; display: block; top: 8px; border: 1px #7fadd5 solid; width: 60px; font-weight: bold; text-align: center; text-decoration: none }
#content ul li a.info:hover { border-color: #005bab; background-color: #005bab; color: #fff }
#content .desktop { width: 480px; height: 382px; background: url(../images/display.png) no-repeat; position: relative; margin-bottom: 20px }
#content .desktop img { position: absolute; left: 21px; top: 19px }
#content .ipadl { width: 475px; height: 335px; background: url(../images/ipadl.png) no-repeat; position: relative; margin-bottom: 20px }
#content .ipadl img { position: absolute; left: 43px; top: 22px }
#content .ipadp { width: 300px; height: 425px; background: url(../images/ipadp.png) no-repeat; position: relative; margin-bottom: 20px }
#content .ipadp img { position: absolute; left: 19px; top: 38px }
#content .iphone { width: 183px; height: 274px; float: left; margin: 0 20px 20px 0; background: url(../images/iphone.png) no-repeat; position: relative }
#content .iphone img { position: absolute; left: 18px; top: 76px }

#content .extra { margin: 20px 0 }
#content .extra h3 { margin: 5px 0 9px; font-size: 1.25em }
#content .extra p { margin-bottom: 9px; color: #333 }
#content .extra p strong { color: #000 }

#sidebar { float: left; display: inline; width: 282px }
#form { background: #fff; border-radius: 5px; padding: 14px 18px 24px; -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.5); -moz-box-shadow: 0 0 5px rgba(0,0,0,0.5); box-shadow: 0 0 5px rgba(0,0,0,0.5); margin-bottom: 24px }
#form h3 { font-size: 1.25em; font-weight: bold; line-height: 1.2; color: #000; margin-right: -8px; margin-bottom: 10px }
#form p { margin-bottom: 10px; font-size: 0.9em; line-height: 1.4; margin-bottom: 14px }
#form p.step { text-align: center; background: url(../images/strike.png) center center repeat-x; position: relative; margin-bottom: 10px }
#form p span { padding: 0 8px; background: url(../images/nostrike.png) center center repeat-x }
#form label { display: block; font-size: 0.9em; line-height: 1.4; padding-bottom: 2px }
#form .half { float: left; display: inline }
#form .select, #form .text { background: #fff; padding: 2px 4px 2px 2px; border-radius: 3px; border: 1px #b3b3b3 solid; -webkit-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2); -moz-box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2); box-shadow: inset 1px 1px 3px rgba(0,0,0,0.2); margin-bottom: 8px }
#form select { width: 100%; border: none; background: none }
#form .text { padding: 3px 0; width: 244px; color: #000; text-indent: 4px; margin-bottom: 8px }
#form .textarea { padding: 3px 0; width: 244px; color: #000; text-indent: 4px; margin-bottom: 8px }
#form .button { background-color: #889900; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255,255,255,0.1)), to(rgba(0,0,0,0.1))); background-image: -moz-linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,0.1)); background-image: linear-gradient(top, rgba(255,255,255,0.1), rgba(0,0,0,0.1)); color: #fff; border-radius: 5px; padding: 5px 15px; font-size: 1.25em; font-weight: bold; border: none; cursor: pointer; border: 1px rgba(0,0,0,0.2) solid; border-bottom: 1px rgba(0,0,0,0.5) solid; -webkit-box-shadow: inset 1px 1px 1px rgba(255,255,255,0.5); -moz-box-shadow: inset 1px 1px 1px rgba(255,255,255,0.5); box-shadow: inset 1px 1px 1px rgba(255,255,255,0.5); text-shadow: 0 -1px rgba(0,0,0,0.75); margin-top: 10px; line-height: 1.4; width: 100% }
#form .button:hover { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.2))); background-image: -moz-linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2)); background-image: linear-gradient(top, rgba(0,0,0,0), rgba(0,0,0,0.2)) }
form br { clear: both; width: 100% }
#form input.checkbox { float: left; display: inline; margin: 1px 8px 0 2px }
#form label.checkbox { float: left; display: inline; width: 220px }
#form label.checkbox em { font-size: 0.9em; color: #666 }
#form .check { padding-top: 8px }

.terms { padding-left: 18px }
.terms p { font-size: 0.8em; line-height: 1.2; color: #999 } 

.meerinfo p, .meerinfo ul { margin-bottom: 15px }
.meerinfo p + ul { margin-top: -15px }
.meerinfo li { padding: 0 0 0 22px; background: url(../images/bullet.png) 4px 5px no-repeat }
.meerinfo h3 { font-size: 1.5em; font-weight: bold; line-height: 1.2; color: #000; margin-bottom: 12px }

#footer { width: 100%; height: 54px }
#footer ul { width: 800px; margin: 0 auto; padding: 20px 0 }
#footer ul li { float: left; display: inline; font-size: 0.8em; line-height: 1.2; color: #999; padding-right: 10px }
#footer ul li a { display: block; padding-left: 10px; border-left: 1px #ccc solid; color: #999; text-decoration: none }
#footer ul li a:hover { color: #333 }

#step-2, #step-3, #step-3b { display: none }

body.iframe { background-color: #fff !important; width: auto !important }
body.iframe #footer { display: none }
body.iframe .container { margin: 0 !important }
body.iframe #header h2, body.iframe #header h3 { margin-right: 0 !important; margin-left: 0 !important }
body.iframe #content { margin-left: 0 !important }

@media screen and (min-width: 768px) and (max-width: 920px) {
	img { max-width: 100%; height: auto }
	body, .container, #header { width: 768px }
	.container { background-position: 50% top !important }
	#header h2, #header h3 { margin-left: 25px; margin-right: 340px }
	#content { margin-left: 25px; width: 405px }
	#content .desktop { width: 405px; height: 324px; background-size: 100% }
	#content .desktop img { position: absolute; left: 18px; top: 16px; width: 368px }
	#content .ipadl { width: 405px; height: 286px; background-size: 100% }
	#content .ipadl img { position: absolute; left: 36px; top: 18px; width: 333px }
	
}
@media screen and (max-width: 768px) {
	img { max-width: 100%; height: auto }
	body, .container, #header { width: auto }
	#header { min-height: auto !important }
	#header h2, #header h3 { margin-left: 25px; margin-right: 25px }
	.container { background: #fff !important }
	#header, #content, #sidebar { float: none; display: block; padding-top: 1px }
	#content { margin-left: 25px; width: auto }
	#logo a { float: none !important; margin-left: 25px !important; margin-right: 0 !important }
	#header h2 { margin-top: 15px }
	#sidebar { margin-left: 25px; margin-top: 15px }
	body.iframe #sidebar { margin-left: 5px }
	#footer ul { width: auto; margin: 0 25px }
}
@media screen and (max-width: 680px) {
	#footer ul li { float: none; padding-right: 0 }
	#footer ul li a { padding-left: 0; border: none }
}
@media screen and (max-width: 539px) {
	#content .desktop, #content .ipadl { width: auto; height: auto; background: none }
	#content .desktop img, #content .ipadl img { position: relative; left: 0; top: 0; width: auto }
}
@media screen and (max-width: 359px) {
	#content .ipadp, #content .iphone { width: auto; height: auto; background: none }
	#content .ipadp img, #content .iphone img { position: relative; left: 0; top: 0; width: auto }
}