body {
	font-family: 'PT Sans Narrow', sans-serif;
	font-size: 15px;
	color: #666;
	margin: 0;
	padding: 0;
	-webkit-text-size-adjust:100%;
}
a {
	color: #999;
	text-decoration: none;
}
a:hover {
	color: #0af;
}
hr {
	z-index: -1;
	display: block;
	position: relative;
	width: 100%;
	margin: 0;
	padding: 0;
	border: none;
	border-top: 1px solid #ccc;
	height: 30px;
	margin-bottom: -31px;
	text-align: left;
	background: #eeeeee;
	background: -moz-linear-gradient(top,  #eeeeee 0%, #ffffff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#ffffff));
	background: -webkit-linear-gradient(top,  #eeeeee 0%,#ffffff 100%);
	background: -o-linear-gradient(top,  #eeeeee 0%,#ffffff 100%);
	background: -ms-linear-gradient(top,  #eeeeee 0%,#ffffff 100%);
	background: linear-gradient(top,  #eeeeee 0%,#ffffff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#ffffff',GradientType=0 );
}
hr:before, hr:after {
	content: '';
	display: inline-block;
	position: relative;
	width: 25%;
	height: 100%;
	top: -1px;
	background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
	background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: -o-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: -ms-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	background: linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
}
hr:after {
	float: right;
	margin-bottom: -100%;
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
	background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	background: linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
body>div {
	position: relative;
	width: 965px;
	margin: 0 auto;
	padding: 0 10px;
}


/* --- header --- */
#header {
	display: block;
	position: fixed;
	float: left;
	width: 100%;
	height: 90px;
	margin: 0;
	padding: 0;
	background: #333;
	box-shadow: 0px -5px 15px #000;
	z-index: 10;
}
#h-content {
	display: block;
	position: relative;
	padding: 0;
	width: 965px;
	margin: 0 auto;
	height: 90px;
	color: #fff;
}
#header h1 {
	float: left;
	background: url("/graphics/button-arrow-2.png") no-repeat;
	margin: 0 0 0 10px;
	padding: 18px 0 0 50px;
	display: inline-block;
}
#header h1 a {
	position: relative;
	display: inline-block;
	text-align: center;
	font-size: 32px;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	width: 160px;
	padding: 5px 30px;
	margin: 0;
	-webkit-border-radius: 25px;
	-moz-border-radius: 25px;
	border-radius: 25px;
	background: #00ccff;
	box-shadow: 3px 3px 6px #000;
	background: -moz-linear-gradient(top,  #00ccff 0%, #0099ff 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#00ccff), color-stop(100%,#0099ff));
	background: -webkit-linear-gradient(top,  #00ccff 0%,#0099ff 100%);
	background: -o-linear-gradient(top,  #00ccff 0%,#0099ff 100%);
	background: -ms-linear-gradient(top,  #00ccff 0%,#0099ff 100%);
	background: linear-gradient(top,  #00ccff 0%,#0099ff 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ccff', endColorstr='#0099ff',GradientType=0 );
}
#header h1 a:hover {
	top: -1px;
	left: -1px;
	box-shadow: 4px 4px 8px #000;
}
#infotext {
	float: left;
	display: inline-block;
	font-size: 17px;
	line-height: 1.2;
	height: 0;
	margin: 16px 0 0 40px;
	padding: 0;
	width: 620px;
  text-transform: uppercase;
}
#infotext h4 {
	font-weight: normal;
	margin: 0;
	padding: 0;
}
#infotext p {
	font-weight: 400;
	margin: 8px 0 0 0;
	padding: 0;
	color: #666;
	font-size: 14px;
}
#ios-instructions {
	float: right;
	font-size: 14px;
	font-weight: 700;
	height: 0;
	margin: -5px 10px 0 0;
	padding: 0;
	width: 130px;
	text-align: right;
}
#ios-instructions a {
	color: #0af;
	text-decoration: underline;
}
#ios-instructions a:hover {
	color: #07d;
}


/* --- application --- */
#application {
	margin: 0 0 -30px 0;
	padding: 90px 0 30px 0;
	width: 100%;
	background: #0fbeff url("/graphics/hp-bg-blue.png") 50% -30px no-repeat;
}
#application h2 {
	font-size: 65px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-shadow: 1px 1px 1px #333;
	position: relative;
	display: block;
	width: 465px;
	height: 410px;
	margin: 20px auto -280px auto;
	padding: 10px 480px 30px 20px;
	background: url("/graphics/hp-screenshot.png") 100% 0 no-repeat;
	/*border: 1px solid red;*/
}
#application.video h2 {
	font-size: 55px;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	text-shadow: 1px 1px 1px #333;
	position: relative;
	display: block;
	width: 365px;
	height: 400px;
	margin: 20px auto -60px auto;
	padding: 80px 580px 30px 20px;
	background-image: none;
	/*border: 1px solid red;*/
}
#application #video {
	display: block;
	position: relative;
	/*z-index: 5;*/
	margin: -500px auto 30px auto;
	padding: 0 20px 0 415px;
	width: 550px;
	height: 412px;
	/*border: 1px solid green;*/
}
#application p {
	font-size: 26px;
	color: #fff;
	text-shadow: 1px 1px 1px #333;
	position: relative;
	display: block;
	width: 515px;
	height: 250px;
	margin: 0 auto -30px auto;
	padding: 0 430px 0 20px;
	/*border: 1px solid green;*/
}
#application p b {
	background: #f30;
	border-color: #f30;
	border-width: 0 5px;
	border-style: solid;
	font-weight: 400;
}
#application #anchors {
	position: relative;
	margin: 10px auto;
	width: 965px;
	height: auto;
	padding: 0 10px;
	text-align: center;
	font-size: 18px;
	color: #fff;
	text-shadow: none;
}
#application #anchors a {
	color: #333;
}
#application #anchors a:hover {
	color: #fff;
}
#application #social {
	position: relative;
	display: block;
	width: 300px;
	height: 30px;
	margin: -80px auto 0 auto;
	padding: 0 645px 50px 20px;
	pointer-events: none;
	/*border: 1px solid red;*/
}
#application #social>*{
	pointer-events: auto;
}
#application #social .addthis_toolbox.addthis_default_style {
	margin: -25px 0 0 0;
	padding: 0 0 0 90px;
	display: block;
	width: 150px;
}     


/* --- award --- */
#award {
	position: relative;
	display: block;
	margin: 0 auto;
	text-align: center;
}
#award h3 {
	position: relative;
	display: inline-block;
	margin: 0 auto 10px auto;
	padding: 4px 20px;
	font-size: 18px;
	font-weight: 400;
	color: #333;
	background: rgba(255,255,255,0.4);
}
#award h3 a {
	color: #000;
}
#award h3 a:hover {
	color: #fff;
}
#award p {
	margin: 0 0 -20px 0;
	padding: 0;
}
#award ul {
	margin: 0;
	padding: 0;
	text-align: center;
}
#award ul li {
	list-style: none;
	margin: 0 30px;
	padding: 0;
	display: inline-block;
	height: 58px;
}
#award ul li a {
	display: inline-block;
	width: 0;
	max-width: 0;
	font-size: 0;
	overflow: hidden;
	background: url("/graphics/logo-1-theeuropas.png") no-repeat left 50%;
	margin: 0;
	padding-left: 201px;
	height: 58px;
}
#award ul li.nyt a {
	background-image: url("/graphics/minilogo-ny-times.png");
	padding-left: 203px;
}
#award ul li.tc a {
	background-image: url("/graphics/logo-2-techcrunch.png");
	padding-left: 182px;
}
#award ul li.nw a {
	background-image: url("/graphics/logo-3-thenextweb.png");
	padding-left: 92px;
}
#award ul li.ws a {
	background-image: url("/graphics/logo-4-thewallstreetjournal.png");
	padding-left: 221px;
}
#award ul li.lh a {
	background-image: url("/graphics/logo-lifehacker.png");
	padding-left: 116px;
}
#award ul li.muo a {
	background-image: url("/graphics/logo-makeuseof.png");
	padding-left: 189px;
}


/* --- explanation, beta --- */
#explanation, #beta, #footer {
	padding-top: 20px;
	padding-bottom: 30px;
}
#explanation h2/*, #beta h2*/ {
/*
	font-size: 50px;
	font-weight: 700;
	color: #0af;
	position: relative;
	margin: 40px 0 30px 0;
	padding: 0;
	text-align: center;
*/
	display: none;
}
#explanation p, #beta p {
	font-size: 20px;
	padding: 20px 30px 0 30px;
}
#explanation p strong {
	font-size: 26px;
	font-weight: 400;
}
#explanation img {
	display: block;
	margin: 10px auto;
}
#explanation hr, #beta hr {
	margin-bottom: 30px;
}


/* --- footer --- */
#footer {
	text-align: center;
}
#footer img {
	border: none;
}
#footer h2, #beta h2 {
	font-size: 26px;
	font-weight: 700;
	color: #0af;
	position: relative;
	margin: 40px 0 10px 0;
	padding: 0;
	text-align: center;
}
#footer ul.press {
	margin: 0;
	padding: 10px 30px;
}
#footer ul.press li {
	border-bottom: 1px solid #ccc;
	list-style: none;
	margin: 0;
	padding: 10px;
}
#footer ul.press h4,
#footer ul.press p {
	text-align: left;
	cursor: pointer;
}
#footer ul.press h4 {
	color: #666;
	font-size: 20px;
	font-weight: 400;
	margin: 0;
	padding: 0;
}
#footer ul.press li h4:before {
	content: '';
	display: block;
	position: relative;
	width: 48px;
	height: 48px;
	border: 1px solid #ccc;
	margin: 0 10px 20px 0;
	top: 3px;
	padding: 1px;
	float: left;
}
#footer ul.press li.darrell {
	background: url("/graphics/minilogo-betakit.png") 100% 90% no-repeat;
}
#footer ul.press li.darrell h4:before {
	background: #fff url("/graphics/darrell-etherington.jpg") 1px 1px no-repeat;
}
#footer ul.press li.david {
	background: url("/graphics/minilogo-ny-times.png") 100% 95% no-repeat;
}
#footer ul.press li.david h4:before {
	background: #fff url("/graphics/david-pogue.jpg") 1px 1px no-repeat;
}
#footer ul.press li.steve h4:before {
	background: #fff url("/graphics/steve-rubel.jpg") 1px 1px no-repeat;
}
#footer ul.press p {
	color: #666;
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 5px 0;
	padding: 0;
}
#footer ul.press p a {
	color: #666;
}
#footer ul.press p a:hover {
	color: #0af;
}
#labels {
	display: none;
}


#my-box-glimmer {position: fixed; margin: 0; left: 0; top: 0; width: 0; height: 0px; background: #000; opacity: 0.2; filter:alpha(opacity=20);}
#my-box {font-family: Verdana, sans-serif; font-size: 13px; position: fixed; margin: 0; padding: 0; width: 700px; min-height: 500px; max-height: 80%; background: #fff; color: #000; -moz-box-shadow: 5px 5px 20px rgba(0,0,0,0.3); -webkit-box-shadow: 5px 5px 20px rgba(0,0,0,0.3); box-shadow: 5px 5px 20px rgba(0,0,0,0.3); -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; border-radius: 5px;}
#my-box>div {margin: 15px 0 15px 20px; padding: 0 20px 0 0; overflow: auto;}
#my-box h1 {font-size: 24px; font-weight: normal; color: #000; margin: 0; padding: 5px 0 15px 0;}
#my-box h2 {font-size: 20px; font-weight: normal; color: #000; margin: 0; padding: 15px 0;}
#my-box h2.header {font-size: 15px; color: #fff; margin: 0; padding: 5px 5px 5px 10px; background: #0af; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px;}
#my-box h2 a.close {float: right; color: #fff; font-family: Verdana, sans-serif; font-size: 16px; text-decoration: none; }
#my-box h2.header a.close:hover {color: #000;}
#my-box h3 {font-size: 16px; font-weight: normal; color: #0af; margin: 0; padding: 15px 0;}
#my-box div.code {color: #666; font-family: monospace;Â margin: 20px 0; padding: 15px; border: 1px solid #ccc;}
#my-box p, #my-box li {color: #666; margin: 5px 0; line-height: 1.5;}
#my-box b, #my-box strong {color: #000;}