/* 
	The following CSS rule is for deliberately changing the layout of number fields in Webkit. 
	This makes sure that if the field has a spin button, it will change the size of wrapping
	elements, which will be detected by the test suite.
*/	
input[type=number]::-webkit-outer-spin-button {
				display: inline;
				padding: 60px;
}

* {
	padding: 0;				
	margin: 0;
	
	-webkit-text-size-adjust: none;
}

html {
}

img {
	border: none;
}

body {
	font-family: 'Droid Sans', Arial, Helvetica, sans-serif;

	padding: 0 0 20px;

	background: #454545;
	background: #454545 -webkit-gradient(radial, center 400, 50, center 400, 300, from(#707070), to(#454545));	
	background: #454545 -moz-radial-gradient(center 400px, circle, #707070 50px, #454545 300px);	
	background: #454545 -ms-radial-gradient(center 400px, circle, #707070 50px, #454545 300px);	
	background: #454545 -o-radial-gradient(center 400px, circle, #707070 50px, #454545 300px);	
	background-repeat: no-repeat;
}


.header {
	background: #222;
	background: #222 -webkit-gradient(linear, left 64, left 80, from(#222), to(#111));
	background: #222 -moz-linear-gradient(top, #111, #222);
	background: #222 -ms-linear-gradient(top, #111, #222);
	background: #222 -o-linear-gradient(top, #111, #222);
}
.header h1 {
	font-weight: bold;
	font-size: 0.9em;
	text-align: left;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #bbb;
	padding: 8px 0;
	margin: 0 auto;
	width: 630px;
}
.header h1 em {
	font-style: normal;
	color: #666;
}
.header ul {
	margin: 10px auto 0;
	width: 630px;
	overflow:hidden;

	list-style-type: none;
}
.header ul li {
	display: block;
	float: left;
	
	margin: 0 3px 0 0;
	padding: 0 10px;
	line-height: 32px;
	color: #fff;
	font-size: 0.9em;
	text-shadow: 0px -1px 1px #000;

	background: #2a2a2a;
	
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;	

	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;	
}
.header ul li.selected {
	background: #454545;
}
.header ul li a {
	color: #fff;
	text-decoration: none;
}


.page {
	margin: 2.5em auto 0;
	width: 630px;
}
.page .column {
	zoom: 1;
	display: inline-block;       
	*display: inline;

	width: 400px;
	vertical-align: top;

	position: relative;
}

.page h2 {
	color: #fff;
	margin: 0 0 20px 0;
	font-weight: normal;
	text-transform: lowercase;
}

#explaination {
	width: 200px;
	margin-left: 20px;
	margin-top: 60px;
}
#explaination p {
	margin: 1em 0;
	color: #ddd;
	font-size: 0.75em;
	line-height: 150%;
}
#explaination p a {
	color: #ddd;
}
#explaination h3 { 
	color: #fff;
	font-size: 0.9em;
	font-weight: normal;
	text-shadow: 0px -1px 1px #222;
	letter-spacing:0.2em;
}
#explaination p + h3 {
	margin-top: 40px;
}

#results p {
	color: #bbb;
	text-transform: lowercase;
	text-align: center;
	margin: 0 0 2em;
}
#results p.useragent {
	position: relative;
	text-align: left;
	text-transform: none;
	font-size: 0.8em;
	color: #222;
	padding: 10px 100px 10px 10px;

	background: #f0f0f0;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
	-webkit-box-shadow: 0px 0px 5px #222;
	-moz-box-shadow: 0px 0px 5px #222;
	-ms-box-shadow: 0px 0px 5px #222;
	-o-box-shadow: 0px 0px 5px #222;
	box-shadow: 0px 0px 5px #222;
}
#results p.useragent span {
	position: absolute;
	right: 10px;
	top: 8px;
	font-size: 0.85em;
	color: #aaa;
	line-height: 20px;
}
#results p.useragent span a {
	font-size: 1.6em;
	padding: 0 0 0 6px;
	cursor: pointer;
}
#results p.useragent span a.correct:hover {
	color: #1c8c1d;
}
#results p.useragent span a.wrong:hover {
	color: #853333;
}

#results p.intro {
	color: #999;
	font-size: 1.9em;
	letter-spacing: 0.1em;
	line-height: 100%;			
	margin: 0 0 10px;
}
#results h2 {
	font-family: 'Alfa Slab One', Arial;
	font-size: 10em;
	color: #eee;
	text-align: center;
	text-shadow: 0px 0px 10px #333;
	line-height: 100%;
	margin: 0;
}
#results h3 {
	font-family: 'Alfa Slab One', Arial;
	font-size: 2.3em;
	color: #aaa;
	text-align: center;
	text-shadow: 0px 0px 5px #333;
	text-transform: uppercase;
	text-indent: 0.4em;
	line-height: 90%;
	
	margin: 0 0 0.4em;
}

#results h4 {
	font-size: 1.2em;
	color: #aaa;
	margin: 2em 0 0.5em;
}

#results ul li {
	position: relative;
	
	font-size: 1.1em;
	padding: 4px 11px 6px;
	margin: 0 0 1em;
	background: #f0f0f0;
	list-style-type: none;
	line-height: 220%;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
	-webkit-box-shadow: 0px 0px 5px #222;
	-moz-box-shadow: 0px 0px 5px #222;
	-ms-box-shadow: 0px 0px 5px #222;
	-o-box-shadow: 0px 0px 5px #222;
	box-shadow: 0px 0px 5px #222;
	
	background: #f0f0f0 -webkit-gradient(linear, left top, left 86, from(#e6e6e6), to(#f0f0f0), color-stop(0.5, #f6f6f6), color-stop(0.5, #d6d6d6));
	background: #f0f0f0 -moz-linear-gradient(top, #e6e6e6, #f6f6f6 43px, #d6d6d6 43px, #f0f0f0);
	background: #f0f0f0 -ms-linear-gradient(top, #e6e6e6, #f6f6f6 43px, #d6d6d6 43px, #f0f0f0);
	background: #f0f0f0 -o-linear-gradient(top, #e6e6e6, #f6f6f6 43px, #d6d6d6 43px, #f0f0f0);
}
#results ul li strong {
	color: #000;
	display: block;
	width: 76%;
	overflow: hidden;
	white-space: nowrap;
	font-weight: bold;
	text-overflow: ellipsis;
	text-overflow: ellipsis-word;
}
#results ul li em {
	position: absolute;
	top: 4px;
	right: 8px;

	font-size: 1.6em;
	font-weight: bold;
	font-style: normal;
	font-family: 'Alfa Slab One', Arial;
	color: #aaa;
}
#results ul li form input {
	width:70%
}
#results ul li form label {
	font-size: 0.75em
}
#results ul li em.none {
	color: #853333;
}
#results ul li em.badly {
	color: #d68533;
}
#results ul li em.reasonable {
	color: #e7c333;
}
#results ul li em.good {
	color: #88b038;
}
#results ul li em.great {
	color: #33af33;
}
#results ul li em span {
	position: relative;
	top: -6px;
	
	font-family: 'Ubuntu', Arial;
	font-size: 0.6em;
	text-transform: lowercase;
	
	color: #fff;
	padding: 3px 7px;
	margin: 0 14px 0 0;

	background: #aaa;
	background: #aaa -webkit-gradient(linear, left top, left bottom, from(#888), to(#aaa), color-stop(0.4, #999));
	background: #aaa -moz-linear-gradient(top, #888, #999 40%, #aaa);
	background: #aaa -ms-linear-gradient(top, #888, #999 40%, #aaa);
	background: #aaa -o-linear-gradient(top, #888, #999 40%, #aaa);

	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
	-webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-ms-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-o-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	
	text-shadow: rgba(0,0,0,0.3) 0 1px 2px;
}

#results ul li table {
	width: 100%;
	margin: 3px 0 0;
	line-height: 100%;
	font-size: 0.70em;
	border-spacing: 0;
}
#results ul li table th,
#results ul li table td {
	padding: 6px 0;
	vertical-align: bottom;
}
#results ul li table td.container {
	padding: 0;
}
#results ul li table tr.explaination th {
	padding: 16px 0 6px;
	font-size: 0.9em;
	font-style: italic;
	color: #666;
	line-height: 140%;
}
#results ul li table tr.title th {
	font-weight: bold;
	padding-top: 1.3em;
}
#results ul li table th {
	font-weight: normal;
	text-align: left;
}
#results ul li table td {
	text-align: right;
	white-space: nowrap;
}
#results ul li table th code {
	font-size: 12px;
}
#results ul li table th a {
	color: #000;
	text-decoration: none;
}
#results ul li table th a:hover {
	text-decoration: underline;
}
#results ul li table table {
	font-size: 1em;
	margin: 0;
}
#results ul li table table.visible {
	margin: 0 0 12px;
}
#results ul li table table thead th {
	cursor: pointer;
	padding-left: 20px;
	background: url(../images/triangle.png) left 7px no-repeat;
}
#results ul li table table.visible thead th {
	padding-left: 20px;
	background: url(../images/triangle.png) left -18px no-repeat;
}
#results ul li table table.visible thead th,
#results ul li table table.visible thead td {
	border-bottom: 1px solid #ddd;
}

#results ul li table table tbody {
	display: none;
	font-size: 0.9em;
}
#results ul li table table.visible tbody {
	display: table-row-group;
}
#results ul li table table tbody th {
	padding-left: 20px;
}
#results ul li table table tbody th code {
	font-size: 11px;
}
#results .check,
#results .ballot,
#results .partial,
#results .unknown {
	display: inline-block;
	
	color: #888;
	font-size: 1.2em;
	margin: 0 0 0 6px;
	width: 1em;
	text-align: center;
}
#results .check {
	color: #1c8c1d;
}
#results .ballot {
	color: #853333;
}
#results .partially {
	color: #888;
}

#results th.browser {
	width: 50%;
}
#results th.version {
	width: 20%;
}
#results td.points {
	width: 15%;
}
#results td.bonus {
	width: 15%;
}

#legend {
	overflow: hidden;
	width: 60%;
	margin: 0 0 30px;
}			
#legend li {
	list-style-type: none;
	float: left;
	white-space: no-break;
	
	color: #fff;
	margin: 0 20px 10px 0;
	font-size: 0.8em;
}
#legend li span {
	display: block;
	float: left;
	
	background-color: #fff;
	width: 16px;
	height: 16px;
	margin: 0 6px 0 0;

	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;

	-webkit-box-shadow: 0px 0px 5px #222;
	-moz-box-shadow: 0px 0px 5px #222;
	-ms-box-shadow: 0px 0px 5px #222;
	-o-box-shadow: 0px 0px 5px #222;
	box-shadow: 0px 0px 5px #222;
}
#legend li.none span {
	background-color: #853333;
}
#legend li.badly span {
	background-color: #d68533;
}
#legend li.reasonable span {
	background-color: #e7c333;
}
#legend li.good span {
	background-color: #88b038;
}
#legend li.great span {
	background-color: #33af33;
}			





.paper {
	position:relative;
	top: 32px;
	
	background: #fff;

	-webkit-border-radius: 6px;
	-webkit-border-top-left-radius: 0;
	-moz-border-radius: 6px;
	-moz-border-radius-topleft: 0;
	border-radius: 6px;
	border-top-left-radius: 0;
	
	-webkit-box-shadow: 0px 0px 5px #222;
	-moz-box-shadow: 0px 0px 5px #222;
	-ms-box-shadow: 0px 0px 5px #222;
	-o-box-shadow: 0px 0px 5px #222;
	box-shadow: 0px 0px 5px #222;
	
	margin-bottom: 2em;
}


.paper ul {
	position:absolute;
	top: -32px;

	margin: 0;
	overflow:hidden;
	list-style-type: none;
}
.paper ul li {
	display: block;
	float: left;
	
	margin: 0 3px 0 0;
	padding: 0 10px;
	line-height: 32px;
	color: #fff;
	font-size: 0.9em;
	text-transform: lowercase;
	text-shadow: 0px -1px 1px #000;

	background: #5f5f5f;
	
	-webkit-border-top-left-radius: 6px;
	-moz-border-radius-topleft: 6px;
	border-top-left-radius: 6px;	

	-webkit-border-top-right-radius: 6px;
	-moz-border-radius-topright: 6px;
	border-top-right-radius: 6px;	
}
.paper ul li.selected {
	background: #fff;
}
.paper ul li a {
	color: #fff;
	text-decoration: none;
}
.paper ul li.selected a {
	color: #000;
	text-shadow: none;
}

.paper > div {
	padding: 30px;
	font-size: 0.75em;
	line-height: 140%;
}
.paper > div h2 {
	font-family: 'Alfa Slab One', Arial;
	font-size: 2.2em;
	color: #ec6534;
	clear: both;
	padding: 1.5em 0 0.5em;
	margin: 0;
}
.paper > div h3 {
	margin: 2em 0 0.3em;
}
.paper > div dl {
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	
	float: left;
	margin-right: 20px;
	padding: 4px 8px;
	overflow: hidden;
	text-align: center;

	-webkit-box-shadow: 0px 0px 5px #999;
	-moz-box-shadow: 0px 0px 5px #999;
	-ms-box-shadow: 0px 0px 5px #999;
	-o-box-shadow: 0px 0px 5px #999;
	box-shadow: 0px 0px 5px #999;

	background: #f0f0f0 -webkit-gradient(linear, left top, left bottom, from(#e6e6e6), to(#f6f6f6), color-stop(0.5, #f6f6f6), color-stop(0.5, #e6e6e6));
	background: #f0f0f0 -moz-linear-gradient(top, #e6e6e6, #f6f6f6 50%, #e6e6e6 50%, #f6f6f6);
	background: #f0f0f0 -sm-linear-gradient(top, #e6e6e6, #f6f6f6 50%, #e6e6e6 50%, #f6f6f6);
	background: #f0f0f0 -o-linear-gradient(top, #e6e6e6, #f6f6f6 50%, #e6e6e6 50%, #f6f6f6);
}
.paper > div dl#winner {
	background: #e04f2e -webkit-gradient(linear, left top, left bottom, from(#ec6534), to(#e04f2e), color-stop(0.5, #ec6534), color-stop(0.5, #e04f2e));
	background: #e04f2e -moz-linear-gradient(top, #ec6534, #e04f2e 50%, #ec6534 50%, #e04f2e);
	background: #e04f2e -ms-linear-gradient(top, #ec6534, #e04f2e 50%, #ec6534 50%, #e04f2e);
	background: #e04f2e -o-linear-gradient(top, #ec6534, #e04f2e 50%, #ec6534 50%, #e04f2e);
	padding-left: 38px;
}
.paper > div dl#winner::before {
	display: block;
	content: '';
	background: url(../images/crown.png);
	width: 54px;
	height: 71px;
	
	position: absolute;
	margin-left: -58px;
	margin-top: -32px;
}

.paper > div dl#upcoming {
	float: right;
	margin: 0;
}
.paper > div dl dt {
	font-family: 'Alfa Slab One', Arial;
	font-size: 1.6em;
	line-height: 90%;

	color: #fff;
	text-shadow: 0px -1px 1px #aaa;
}
.paper > div dl dd {
	color: #666;
}
.paper > div dl#winner dd {
	color: #fff;
}
.paper > div dl dd.score {
	font-family: 'Alfa Slab One', Arial;
	font-size: 5em;
	line-height: 95%;
	text-shadow: 0px 0px 6px #999;
	color: #fff;
}
.paper > div dl#winner dd.score {
	text-shadow: 0px 0px 6px #963411;
}
.paper > div hr {
	clear: both;
	display: block;
	margin: 0 -30px;
	height: 30px;
	border: none;

	background: #fff -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f3f3f3));
	background: #fff -moz-linear-gradient(top, #111, #222);
	background: #fff -ms-linear-gradient(top, #111, #222);
	background: #fff -o-linear-gradient(top, #111, #222);
}
.paper > div table {
	width: 100%;
	border-collapse: collapse;
}
.paper > div table th,
.paper > div table td {
	font-weight: normal;
	text-align: left;
	
	border-top: 1px solid #ddd; 
	padding: 3px 0;
	vertical-align: top;
	font-size: 0.9em;
}
.paper > div .explaination {
	-moz-column-count: 2;
	-moz-column-gap: 16px;
	-webkit-column-count: 2;
	-webkit-column-gap: 16px;
	column-count: 2;
	column-gap: 16px;
}
.paper > div table .os {
	width: 27%;
	padding-right: 10px;
	white-space: nowrap;
}
.paper > div table .devices {
	width: 60%;
	padding-right: 10px;
}
.paper > div table .browser {
	width: 47%;
	padding-right: 10px;
	white-space: nowrap;
}
.paper > div table .version {
	width: 40%;
	padding-right: 10px;
}
.paper > div table .points {
	width: 8%;
	text-align: right;
}
.paper > div table .bonus {
	width: 5%;
	text-align: right;
}
.paper > div table em {
	color: #888;
}

.updated {
	position: absolute;
	top: -80px;
	left: 500px;
	
	float: left;
	background-color: #db4d1a;
	padding: 5px;
	border-radius: 8px;

	-webkit-box-shadow: 0px 0px 5px #222;
	-moz-box-shadow: 0px 0px 5px #222;
	-ms-box-shadow: 0px 0px 5px #222;
	-o-box-shadow: 0px 0px 5px #222;
	box-shadow: 0px 0px 5px #222;

	-webkit-transform: rotate(-10deg);
	-moz-transform: rotate(-10deg);
	-ms-transform: rotate(-10deg);
	-o-transform: rotate(-10deg);

	text-shadow: 0px -1px 1px #852706;

	font-family: 'Alfa Slab One', Arial;
	font-size: 1.4em;
	text-transform: uppercase;
	color: #eee;
	text-align: center;
	line-height: 100%;
	margin: 0;
}
.updated span {
	display: block;
	font-family: 'Ubuntu', Helvetica, sans-serif;
	font-size: 0.4em;
	line-height: 100%;
	
	text-shadow: none;
	text-transform: none;
}


.ads {
	border: 1px solid #555;
	background: rgba(40,40,40,0.2);
	padding: 16px 16px 16px 16px;
	overflow: hidden;
	margin: 20px 0;

	-webkit-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-moz-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-ms-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	-o-box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
	box-shadow: inset 0 3px 10px rgba(0,0,0,0.3);
}
.ads > p {
	text-transform: uppercase;
	font-size: 0.6em !important;
	text-align: center;
	letter-spacing: 0.8em;
	
	text-shadow: rgba(0,0,0,0.3) 0 1px 2px;
}
.ads > div {
	margin: 0 0 0 18px;
}
.hosting {
	margin: 2em 0 0;
	color: #aaa;
	font-size: 0.8em;
}





@media (max-width: 640px) {
	body {
		padding: 0;
	}

	.header h1 {
		width: auto;
		padding-left: 30px;
	}
	.header ul {
		width: auto;
		padding-left: 30px;
	}

	.page {
		width: 100%;
		text-align: center;
	}
	.column {
		width: auto;
		max-width: 400px;
		overflow: hidden;
		text-align: left;
	}
	#explaination {
		width: auto;
		margin: 0;
	}
	
	.paper {
		text-align: left;
	
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		
		margin: 0;
		top: 16px;
	}
	
	.paper ul {
		margin-left: 30px;
	}
	.paper > div {
		xxpadding: 30px 20px;
	}
	.paper > div hr {
		xxmargin: 0 -20px;
	}	
	.paper > div .explaination {
		-moz-column-count: 1;
		-webkit-column-count: 1;
		column-count: 1;
	}
	
	.paper > div dl#runnerup {
		margin-right: 0;
	}

	.paper > div dl#upcoming {
		display: none;
	}
	
}

@media (max-width: 320px) {
	.header h1 {
		padding-left: 16px;
	}
	.header ul {
		padding-left: 16px;
	}

	#results h2 {
		font-size: 8em !important;
	}
	.column {
		width: 90% !important;
	}
	#explaination {
		width: 90%;
	}

	.paper ul {
		margin-left: 16px;
		font-size: 0.8em;	
	}
	.paper > div {
		padding: 30px 16px;
	}
	.paper > div hr {
		margin: 0 -16px;
	}	
	.paper > div dl dt {
		font-size: 1.2em;
	}
	.paper > div dl dd {
		font-size: 0.8em;
	}
	.paper > div dl dd.score {
		font-size: 4em;
		text-shadow: 0px 0px 2px #999;
	}
}