/* http://meyerweb.com/eric/tools/css/reset/ */
/* v1.0 | 20080212 */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent; }
body { line-height:1; }
ol, ul { list-style:none; }
blockquote,q { quotes:none; }
blockquote:before,blockquote:after,q:before,q:after { content:'';content:none; }
ins { text-decoration:none; }
del { text-decoration:line-through; }
table { border-collapse:collapse;border-spacing:0; }

body {
	background: White;
	-webkit-text-size-adjust: none;
	font-family: 'Karla', sans-serif;
}
a {
	color: #00a;
	-moz-transition: 0.2s color linear;
	-webkit-transition: 0.2s color linear;
	transition: 0.2s color linear;
}
a:hover {
	color: #a03; text-decoration: underline;
}

p, li { line-height: 150%; }
p.quote { font-style: italic; margin: 10px 10px 20px 10px; padding: 20px 0 0 20px; background: url(quote.png) no-repeat; }
p.quoteBy { font-size: 90%; }

li { display: block; margin: 20px 5px 20px 5px; }

p.big { font-size: 119%; }

ol { counter-reset: li; margin: 1em 0; }
ol > li {
	position:relative;
	margin:0 0 6px 2em;
	padding:4px 8px;
}
ol > li:before {
	content:counter(li);
	counter-increment:li;
	position:absolute;
	top:-2px;
	left:-2em;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	box-sizing:border-box;
	width:2em;
	margin-right:8px;
	padding:4px;
	
	color:#999;
	font-weight:bold;
	font-style: italic;
	font-family:"Helvetica Neue", Arial, sans-serif;
	text-align:center;
}
li ol,
li ul { margin-top: 6px; }
ol ol li:last-child { margin-bottom: 0; }
img.screenshot { border: solid 1px #666; margin: 5px; }


div#page, div#top { text-align: center; clear: both; }

div#page { background-color: White; margin-top: 50px; }
div.block { display: block; width: 960px; text-align: left; margin: 0 auto; clear: both; }
div.block .left, div.block .right { display: block; margin: 30px; }
div.block .left { float: left; }
div.block .right { float: right; }
div.block br.clear { clear: both; }

span.corner-tl {
	display: block;
	position: absolute;
	width: 81px; height: 81px;
	background-repeat: no-repeat;
	background-image: url(corner-tl.png);
}


div#top {
	position: fixed; width:100%; top: 0; left: 0; z-index: 100;
	padding: 6px;
	background-color:rgba(255,255,255,0.9);
}
div#top div.block { margin: 0 auto; padding: 0; }
div#top h1, div#top div.buy { float: left; }
div#top div.social { float: right; margin-right: 9px; }
div#top div { margin: 9px 0px 0px 36px; }
div#top div a { margin: 0 3px 0 9px; }
h1#title { font-size: 28px; background: url(icon-57.png) no-repeat 0 0; padding: 14px 10px 14px 70px; }


div#banner { height: 449px; background: url(withroller1.jpg) no-repeat; clear: both; }
div#banner p { display: block; margin: 20px 0 0 0; padding: 0; color: black; width: 280px; }
div#banner p.big { width: 300px; }
div#banner div { position: relative; top: 100px }


div#video {
	text-align: center;
	background: #333 url(corner-br.png) no-repeat bottom right;
}
iframe#video-embed { margin: 0 auto 10px auto; }
p#video-text { width: 600px; color: white; margin: 0 auto; }
p#video-text a { color: white; text-decoration: underline; }

div#app div.left { width: 330px; }

div.buyroller { text-align: center; padding: 1em; background-color: #fafaf1; width: 500px; margin: 0.1em auto; }

div#say { background: #66bc46 url(corner-br.png) no-repeat bottom right; }
div#say div.left, div#say div.right { width: 390px; }
div#say div.left { margin-left: 60px; margin-right: 0; }
div#say div.right { margin-right: 60px; margin-left: 0; }
div#say p.quote { color: white; margin-bottom: 10px; background: none }
div#say p.quoteBy { margin: 0 0 18px 30px; }

div#golf { background: #3392B2 url(corner-br.png) no-repeat bottom right; }
div#golf p { color: white; }
div#golf img { margin: 0; }
div#golf div.left { width: 400px; }

div#app p.big { margin-top: 1em; }

div#ryan div { width: 460px; }
div#ryan p.quote { background: url(quotedark.png) no-repeat; }

div#footer { clear: both; margin: 40px 0 100px 0; padding: 40px 0 0 0; border-top: solid 1px white; }
div#footer img { margin: 20px; }