/********************************************
 *
 *   Other browsers: Table
 */

.scorePanel {
	position: relative;
}
.scorePanel .left,
.scorePanel .right {
	float: left;
}

.scorePanel h3 {
	font-size: 1.6em;
	text-transform: lowercase;
	color: #888;
}

#scoreToggle {
	position: absolute;
	top: 0;
	right: 0;
}
.scoreTable {
	margin: 0 0 50px;
}
.scoreTable tr.secondary {
	display: none;
}
.scoreTable.showAll tr.secondary {
	display: table-row;
}
.scoreTable th,
.scoreTable td {
	font-weight: normal;
	text-align: left;

	border-top: 1px solid #ddd;
	padding: 4px 0;
	vertical-align: top;
	font-size: 1em;
	padding-left: 10px;
	padding-right: 10px;
}
.scoreTable thead th {
	text-align: left;
	padding-left: 10px;
	padding-bottom: 10px;
	border-top: none;
	font-weight: bold;
	position: relative;
}
.scoreTable thead th::after {
	display: block;
	position: absolute;
	content: '';
	width: 0px;
	height: 10px;
	border-right: 1px solid #ddd;
	left: 0;
	bottom: 0;
}
.scoreTable thead th:last-child::before {
	display: block;
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	border-right: 1px solid #ddd;
	right: 0;
	bottom: 0;
}
.scoreTable a {
	color: inherit;
	text-decoration: none;
	display: block;
}
.scoreTable a span {
	opacity: 0.4;
	font-size: 120%;
}
.scoreTable em {
	color: #888;
}
.scoreTable .nickname {
	width: 30%;
	padding-right: 10px;
	white-space: nowrap;
	cursor: pointer;
}
.scoreTable .details {
	width: 26%;
	padding-right: 10px;
	font-size: 0.8em;
}
.scoreTable .description {
	width: 28%;
	padding-right: 10px;
	font-size: 0.9em;
}
.scoreTable .description em {
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	width: 190px;
}
.scoreTable th.points {
	text-align: right;
}
.scoreTable td.points {
	width: 5%;
	text-align: right;
	padding-right: 10px;
	padding-left: 10px;
	font-size: 1.1em;
	font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
	font-weight: bold;
}
.scoreTable .count,
.scoreTable .percentage {
	width: 20%;
	text-align: right;
}

@media (max-width: 680px) {
	.scoreTable .description {
		display: none;
	}
}

.latestTable {
	table-layout: fixed;
}
.latestTable th {
}
.latestTable a {
	overflow-x: hidden;
	text-overflow: ellipsis;
}
.latestTable .nickname {
	width: 60%;
}


/********************************************
 *
 *   Other browsers: Graph
 */

#fsCanvas {
	position: relative;
}
#fsButton {
	position: absolute;
	top: 30px;
	right: 8px;
	z-index: 10000;

	border: none;
	background: none;
	color: #888;
	font-size: 26px;
	font-weight: bold;

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

	cursor: pointer;
}
#fsButton::before {
	display: inline;
	content: '↔';
}


div:fullscreen {
	background: #fff;
	width: 100% !important;
	height: 100% !important;
}
div:fullscreen h2 {
	display: none;
}
div:fullscreen #fsButton {
	top: 10px;
	right: 40px;
}
div:fullscreen #fsButton::before {
	content: '+';
}
div:fullscreen #timelineGraph {
	position: absolute;
	top: 50px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	height: auto !important;
}

div:-webkit-full-screen {
	background: #fff;
	width: 100% !important;
	height: 100% !important;
}
div:-webkit-full-screen h2 {
	display: none;
}
div:-webkit-full-screen #fsButton {
	top: 10px;
	right: 40px;
}
div:-webkit-full-screen #fsButton::before {
	content: '+';
}
div:-webkit-full-screen #timelineGraph {
	position: absolute;
	top: 50px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	height: auto !important;
}

div:-moz-full-screen {
	background: #fff;
	width: 100% !important;
	height: 100% !important;
}
div:-moz-full-screen h2 {
	display: none;
}
div:-moz-full-screen #fsButton {
	top: 10px;
	right: 34px;
}
div:-moz-full-screen #fsButton::before {
	content: '+';
}
div:-moz-full-screen #timelineGraph {
	position: absolute;
	top: 50px;
	left: 30px;
	bottom: 30px;
	right: 30px;
	height: auto !important;
}




/*******************************************************************************
 *
 *   Compare
 */

.comparisonTable {
	position: relative;
}
.comparisonTable .filters {
	height: 40px;
}
.comparisonTable .filters + hr {
	border-top-width: 3px;
}
.comparisonTable #scoreToggle {
	position: static;
	float: left;
}
.comparisonTable #searchField {
	position: static;
	float: right;
}
.comparisonTable hr {
	clear: both;
}

.comparisonTable table {
	margin-top: 20px;
	margin-bottom: 40px;
	font-size: 1em;
}
.comparisonTable table th,
.comparisonTable table td {
	border-bottom: 1px solid #ddd;

	padding: 5px 0;
	font-weight: normal;
	text-align: left;
}
.comparisonTable table th.hasLink {
	cursor: pointer;
}
.comparisonTable table th code {
	font-size: 12px;
}
.comparisonTable table th {
	max-width: 0;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
}
.comparisonTable table th > div {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}
.comparisonTable table td {
	width: 96px;
	min-width: 96px;
	max-width: 96px;
	text-align: center;
	border-right: 1px solid #fff;
}
.comparisonTable table td.used {
	background-color: #eee;
}
.comparisonTable table td.used.yes {
	background-color: rgba(28, 140, 29, 0.1);
}
.comparisonTable table td.used.no {
	background-color: rgba(133, 51, 51, 0.1);
}
.comparisonTable table th em {
	font-style: normal;
	font-size: 90%;
	color: #888;
}
.comparisonTable table th.details {
	padding-top: 15px;
}
.comparisonTable table th.details em {
	color: #666;
}
.comparisonTable table tr.hasChild th {
	cursor: pointer;
}
.comparisonTable table tr.hasChild th > div {
	padding-left: 20px;
}
.comparisonTable table tr.hasChild th > * {
	position: relative;
}
.comparisonTable table tr.hasChild th > ::before {
	position: absolute;
	top: -1px;
	left: 2px;

	display: block;
	font-family: html5test;
	font-size: 11px;
	content: '▼';
	color: #888;

	-webkit-transition: -webkit-transform 200ms ease;
	-moz-transition: -moz-transform 200ms ease;
	-ms-transition: -ms-transform 200ms ease;
	transition: transform 200ms ease;
}
.comparisonTable table tr.hasChild.hidden th > ::before {
	-webkit-transform: rotate(-90deg) translateX(-1px);
	-moz-transform: rotate(-90deg) translateX(-1px);
	-ms-transform: rotate(-90deg) translateX(-1px);
	transform: rotate(-90deg) translateX(-1px);
}
.comparisonTable table tr.isChild th {
	font-size: 80%;
	padding: 4px 8px 3px 20px;
}
.comparisonTable table tr.isChild td {
	font-size: 80%;
	padding: 4px 0;
}
.comparisonTable table tr.isChild td.used {
	background-color: #f6f6f6;
}
.comparisonTable table tr.isChild th code {
	font-size: 10px;
}
.comparisonTable table th a {
	color: #000;
	text-decoration: none;
}
.comparisonTable table th a:hover {
	text-decoration: underline;
}
.comparisonTable table th a span {
	color: #aaa;
	font-size: 120%;
	text-decoration: none !important;
}
.comparisonTable table thead th {
	font-weight: bold;
	font-size: 1.6em;
	text-transform: lowercase;
	color: #888;

	background: none;
	padding: 8px 0;
}
.comparisonTable table h3 {
	font-weight: bold;
	font-size: 1.6em;
	text-transform: lowercase;
	color: #888;
	margin: 0;
	padding: 16px 0 8px;
}
.comparisonTable table tr:first-child h3 {
	padding: 0 0 8px;
}
.comparisonTable table thead td {
    font-family: 'League Gothic', Impact;
    font-weight: normal;
	font-style: normal;
	font-size: 2.4em;

	color: #999;
	background: none;
	padding: 8px 0;
	position: relative;
}
.comparisonTable table thead td::after {
	display: block;
	position: absolute;
	content: '';
	width: 0px;
	height: 10px;
	border-right: 1px solid #ddd;
	left: 0;
	bottom: 0;
}
.comparisonTable table thead td:last-child::before {
	display: block;
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	border-right: 1px solid #ddd;
	right: 0;
	bottom: 0;
}
.comparisonTable h2 {
	color: #0092bf;
	clear: both;
	margin: 0 !important;
}
.comparisonTable #table-header td,
.comparisonTable #table-header th {
	border-bottom: none;
}
.comparisonTable #table-header #row-header th {
	padding: 0 40px 0 0;
	background: none;
	vertical-align: top;
	white-space: normal;
}
.comparisonTable #table-header #row-header th p {
	margin: 0;
}
.comparisonTable #table-header #row-header td {
	background: #0092bf;
	height: 80px;
	cursor: pointer;
}
.comparisonTable #table-header #row-header td.empty {
	background: #eee;
}
.comparisonTable #table-header #row-header div.name {
	display: table;
	overflow: hidden;
}
.comparisonTable #table-header #row-header span {
	display: block;
	text-align: center;
	width: 96px;
	color: #b2ddeb;
}
.comparisonTable #table-header #row-header span.nickname {
	position: absolute;
	top: 58px;
	font-weight: bold;
	line-height: 105%;
	padding: 0 10px;
	width: 76px;
	overflow: hidden;
	text-overflow: ellipsis;
}
.comparisonTable #table-header #row-header span.score {
	position: absolute;
	bottom: 46px;
	font-size: 4em;
	font-style: normal;
    font-family: 'League Gothic', Impact;
    font-weight: normal;
	color: #fff;
}
.comparisonTable #table-header #row-header span.feature {
	font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
	font-size: 80%;
	font-weight: bold;
	line-height: 140%;
	padding: 0 4px;
	width: 89px;
	display: table-cell;
	vertical-align: middle;
}
.comparisonTable #table-header #row-header span.feature code {
	font-size: 11px;
}
.comparisonTable #table-header #row-header span.feature hr {
	border: none;
	border-top: 1px solid #fff;
	margin: 4px -4px;
	padding: 0;
	opacity: 0.3;
}
.comparisonTable #table-header #row-header span.bonus {
	position: absolute;
	bottom: 5px;
	font-size: 90%;
}
.comparisonTable #table-header #row-header td {
	padding: 0;
}
.comparisonTable #table-header #row-header td > div {
	position: relative;
	width: 96px;
	height: 90px;
}
.comparisonTable #table-header #row-header td > div > div.name {
	width: 96px;
	height: 90px;
}
.comparisonTable #table-header #row-header td.empty > div > div.name::after {
	position: absolute;
	top: 0;
	left: 0;

	line-height: 90px;
	width: 96px;
	height: 90px;

	display: block;
	content: '+';
	font-size: 3em;
	color: #0092bf;

	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.comparisonTable #table-header #row-header td > div > div.name:hover::after {
	background: #0092bf;
	color: #b3deeb;
}
.comparisonTable #table-header #row-header td:not(.empty) > div > div.name::after {
	position: absolute;
	top: 0;
	left: 0;

	display: block;
	content: '×';
	font-size: 3em;

	line-height: 90px;
	width: 96px;
	height: 90px;
	z-index: 2;
	opacity: 0;

	-webkit-transition: all .2s ease-in-out;
	-moz-transition: all .2s ease-in-out;
	-ms-transition: all .2s ease-in-out;
	-o-transition: all .2s ease-in-out;
	transition: all .2s ease-in-out;
}
.comparisonTable #table-header #row-header td:not(.empty) > div > div.name:hover::after {
	opacity: 0.8;
}
.comparisonTable #table-header #row-header td .popup {
	display: none;

	position: absolute;
	top: 80px;
	left: -138px;
	z-index: 9;

	width: 200px;
}
.comparisonTable #table-header #row-header td .popup.visible {
	display: block;
}
.comparisonTable #table-header #row-header td .popup > div.scroll {
	height: 400px;
	overflow: hidden;
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
}
.comparisonTable #table-header #row-header td .popup ul {
	-webkit-transform: translate3d(0,0,0);
	width: 200px;
	margin: 0;
	padding: 10px 0;

	text-align: left;
	line-height: 170%;
	font-size: 0.9em;
	cursor: default;
}
.comparisonTable #table-header #row-header td .popup ul li {
	padding: 1px 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.comparisonTable #table-header #row-header td .popup ul li em {
	font-style: normal;
	font-size: 90%;
	color: #888;
}
.comparisonTable #table-header #row-header td .popup ul li code {
	font-size: 11px;
}
.comparisonTable #table-header #row-header td .popup ul li.indent-1 {
	padding-left: 10px;
}
.comparisonTable #table-header #row-header td .popup ul li.indent-2 {
	padding-left: 20px;
}
.comparisonTable #table-header #row-header td .popup ul li.indent-3 {
	padding-left: 30px;
}
.comparisonTable #table-header #row-header td .popup ul li:hover {
	background: #eee;
	cursor: pointer;
}
.comparisonTable #table-header #row-header td .popup ul li.indent-0.title {
	font-weight: bold;
	color: #000;
	font-size: 115%;
	padding-top: 10px;
}
.comparisonTable #table-header #row-header td .popup ul li.title:hover {
	background: #fff;
	cursor: default;
}

@media (max-width: 880px) {
	.comparisonTable table tr :nth-child(6) {
		display: none;
	}
}
@media (max-width: 780px) {
	.comparisonTable table tr :nth-child(5) {
		display: none;
	}
}
@media (max-width: 680px) {
	.comparisonTable table tr :nth-child(4) {
		display: none;
	}
	.comparisonTable table {
		font-size: 0.95em;
	}
	.comparisonTable table th code {
		font-size: 10px;
	}
}
@media (max-width: 432px) {
	.comparisonTable table tr :nth-child(3) {
		display: none;
	}
}









.overviewTable {

}
.overviewTable th,
.overviewTable td {
	font-weight: normal;
	text-align: center;

	border-bottom: 1px solid #ddd;
	padding: 6px 0;
	vertical-align: top;
	font-size: 1em;
	white-space: nowrap;
}
.overviewTable thead th {
	font-weight: bold;
	padding-bottom: 10px;
	white-space: inherit;
	position: relative;
}
.overviewTable thead th a {
	color: inherit;
	text-decoration: none;
}
.overviewTable thead th::after {
	display: block;
	position: absolute;
	content: '';
	width: 0px;
	height: 10px;
	border-right: 1px solid #ddd;
	left: 0;
	bottom: 0;
}
.overviewTable thead th:last-child::before {
	display: block;
	position: absolute;
	content: '';
	width: 10px;
	height: 10px;
	border-right: 1px solid #ddd;
	right: 0;
	bottom: 0;
}
.overviewTable tbody th {
	text-align: right;
	font-size: 0.8em;
	font-weight: bold;
	color: #888;
	width: 60px;
	padding-left: 10px;
	padding-right: 10px;
}
.overviewTable .development {
	background: #eee;
}
.overviewTable .current {
	background: #f6f6f6;
}
.overviewTable span.version {
	display: inline-block;
	width: 40px;
	text-align: right;
	font-size: 0.8em;
}
.overviewTable span.heading {
    position: relative;
    top: 2px;
	font-weight: bold;
    font-size: 0.85em;
    color: #444;
}
.overviewTable span.version span {
}
.overviewTable span.version span span {
	font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
	color: #fff;
	background: #aaa;
	padding: 2px 4px;
}
.overviewTable span.version > span::after {
	content: '';
	display: inline-block;
	border-left: 4px solid #aaa;
	border-top: 4px solid rgba(0,0,0,0);
	border-bottom: 4px solid rgba(0,0,0,0);
	width: 0;
	height: 0;
}
.overviewTable span.points {
	display: inline-block;
	width: 40px;
	font-family: "Helvetica Neue", "Helvetica", "Arial", "Lucida Grande", sans-serif;
	font-weight: bold;
	text-align: left;
}
.overviewTable .current span.points {
	font-size: 1.2em;
}
.overviewTable .current span.version span span {
	background: #0092bf;
}
.overviewTable .current span.version > span::after {
	border-left: 4px solid #0092bf;
}


.horizontalOverflow {
	overflow: scroll;
	overflow-y: visible;
	/* -webkit-overflow-scrolling: */
}



.diffTable {
	padding-left: 70px;
}
.diffTable table {
	width: 100%;
	margin-top: 22px;
	border-top: 1px solid #ddd;
}
.diffTable table th,
.diffTable table td {
	padding: 6px 0;
	border-bottom: 1px solid #ddd;
}
.diffTable table th {
	text-align: left;
	font-weight: normal;
	max-width: 0;
	width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.diffTable table th code {
	font-size: 1.1em;
}
.diffTable table a {
	color: inherit;
	text-decoration: none;
}
.diffTable table td {
	text-align: right;
    white-space: nowrap;
}
.diffTable table td > div div {
	display: inline-block;
	margin: 0 1em;
	width: 70px;
	text-align: center;
}
@media (max-width: 680px) {
	.diffTable {
		padding-left: 0;
	}
	.diffTable table th,
	.diffTable table td {
		font-size: 0.9em;
		padding-bottom: 30px;
	}
	.diffTable table td > div div {
		margin: 0 0.5em;
		width: 60px;
	}



	.diffTable table td {
		position: relative;
		padding-top: 2em;
		padding-bottom: 4em;
	}
	.diffTable table td > div {
		position: absolute;
		bottom: 1.3em;
		right: 0;
	}
}



.diffHeader {
	position: relative;
	height: 38px;
}

.diffHeader .points {
    font-family: 'League Gothic', Impact;
    font-weight: normal;
	font-style: normal;
	font-size: 4em;
	color: #0092bf;

	position: absolute;
	top: 10px;
	left: 0;
}
.diffHeader h3 {
	font-size: 1.3em;
	margin: 0 !important;

	position: absolute;
	top: -0.3em;
	left: 70px;
}
.diffHeader h3 a {
	color: inherit;
	text-decoration: none;
}
.diffHeader h3 a:hover {
	text-decoration: underline;
}
.diffHeader h3 span {
	color: #aaa;
}

.diffHeader p {
	position: absolute;
	top: 1.6em;
	left: 70px;
}

h2 span {
	color: #aaa;
	font-size: 80%;
}