html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body {
    font-family: 'Open Sans', sans-serif; margin: 0; font-weight: 300; display: inline-block;
    width: 100%;
}
:target {
    background: #ffc
}
table {
    margin-bottom: 2em; width: 100%;
}
th {
    font-weight: normal; text-align: center; padding: 1em 0.45em; position: relative; min-width: 40px; font-size: 13px; background: #eee; vertical-align: middle;
}
th abbr {
    font-weight: bold;
}
th:nth-child(3) {
    min-width: 10px;
}
td {
    background: #eee; position:relative; padding-left: 10px; margin-left: -10px; font-size: 14px;
}
td:hover .anchor,
td .anchor:focus {
    color: #00c;
}
td .anchor {
    display: block; position: absolute; top: -5px; left: -22px; text-decoration: none; padding: 5px; color: #fff;
}
td:first-child {
    min-width: 320px;
}
a[href^='#'] {
    text-decoration: none;
}

code {
    font-family: "Courier New", Courier, monospace;
}

tr:hover, tr.hover td {
    background: #ddd;
}

tr.category td {
    font-weight: bold;
    padding-top: 2px;
    padding-bottom: 2px;
    padding-left: 5px;
}

/* platforms colour legend */
.legend {
    margin-bottom: 1em;
}
.legend > * {
    background-color: ghostwhite;
    display: inline-block;
    overflow:hidden;
    margin: 0 2.5px;
    padding: 0 5px;
}
.swatch {
    display:inline-block;
    width:1em;
    height:1em;
    margin-right: 0.25em;
}

/* selected cell opacity */
table.one-selected td {
    opacity: 0.3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
}
table.one-selected td:first-child {
    opacity: 1;
}
table.one-selected tr.selected td {
    padding-top: 30px; padding-bottom: 30px; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}
table.one-selected td.selected {
    padding-left: 30px; padding-right: 30px; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
}

/* subtests */
.supertest td:first-child {
    cursor: pointer;
}
.supertest td:first-child:hover {
    left: -1px;
    top: -1px;
}
.supertest td:first-child:active {
    left: 1px;
    top: 1px;
}
.subtest td:first-child {
  padding-left: 1.2em;
  font-style: italic;
}
.subtest {
  font-size: 0.8em;
  display:none;
}
.subtest td.yes, .subtest td.no {
  border-left: solid 5px #eee;
  border-right: solid 5px #eee;
}

/* yes/no grid text colors */
.yes a,
.tally a,
.no a {
    color: #fff;
}
.yes,
.tally,
.no,
.not-applicable {
    text-align: center; font-size: 0.8em; padding: 0.25em 0.5em; color: #fff;
}

/* yes/no/tally grid cell colors */
[data-tally] {
    background: #acc20a;
}
tr:hover td[data-tally],
td.hover[data-tally] {
    background: #8da000;
}
[data-tally].obsolete {
    background: #cedd5c;
}
tr:hover td[data-tally].obsolete,
td.hover[data-tally].obsolete {
    background: #b0c037;
}

/* yes */
.yes,
[data-tally="1"] {
    background: #44ab44;
}
tr:hover td.yes,
td.hover.yes,
tr:hover td[data-tally="1"],
td.hover[data-tally="1"] {
    background: #269326;
}
.yes.obsolete,
[data-tally="1"].obsolete {
    background: #9fe09f;
}
tr:hover td.yes.obsolete,
td.hover.yes.obsolete,
tr:hover td[data-tally="1"].obsolete,
td.hover[data-tally="1"].obsolete {
    background: #73cc73;
}

/* yes, but flagged */
.flagged::after,
[data-flagged-tally]::after {
	content: "";
	position: absolute;
	right: 0;
	top: 0;
	border-top: 1.2em solid #44ab44;
	border-left: 1.2em solid transparent;
	width: 0em;
	height: 0em;
}
[data-flagged-tally]:not([data-flagged-tally="1"])::after {
	border-top-color: #acc20a;
}
tr:hover [data-flagged-tally]::after,
td.hover[data-flagged-tally]::after {
	border-top-color: #8da000;
}
[data-flagged-tally].obsolete::after {
	border-top-color: #cedd5c;
}
tr:hover [data-flagged-tally].obsolete::after,
td.hover[data-flagged-tally].obsolete::after {
	border-top-color: #b0c037;
}
tr:hover .flagged::after,
td.hover.flagged::after,
tr:hover [data-flagged-tally="1"]::after,
td.hover[data-flagged-tally="1"]::after {
	border-top-color: #269326;
}
.flagged.obsolete::after,
[data-flagged-tally="1"].obsolete::after {
	border-top-color: #9fe09f;
}
tr:hover .flagged.obsolete::after,
td.hover.flagged.obsolete::after,
tr:hover [data-flagged-tally="1"].obsolete::after,
td.hover[data-flagged-tally="1"].obsolete::after {
	border-top-color: #73cc73;
}

/* no */
.no,
[data-tally="0"] {
    background: #e11;
}
tr:hover td.no,
td.hover.no,
tr:hover td[data-tally="0"],
td.hover[data-tally="0"] {
    background: #bb0606;
}
.no.obsolete,
[data-tally="0"].obsolete {
    background: #ff6e6e;
}
tr:hover td.no.obsolete,
td.hover.no.obsolete,
tr:hover td[data-tally="0"].obsolete,
td.hover[data-tally="0"].obsolete {
    background: #e24545;
}

/* not applicable */
.not-applicable {
    background: hsl(120,  14%,  67%); background: #9fb79f; cursor: help;
}
tr:hover td.not-applicable,
td.hover.not-applicable {
    background: hsl(120,  14%,  47%); background: #678967;
}

/* non-standard no */
.non-standard .no {
    background: #4444ac;
}
.non-standard tr:hover td.no,
.non-standard td.hover.no {
    background: #111178;
}

.non-standard .no.obsolete {
    background: #8080b8;
}
.non-standard tr:hover td.no.obsolete,
.non-standard td.hover.no.obsolete {
    background: #474775;
}

/* tooltip button/box */
.info, .folddown {
    float: right; margin-right: 5px; display: inline-block; width: 15px; height: 15px; line-height: 15px; text-align: center;
    font-family: "Courier New", Courier, monospace;
}
.info {
    color: #eee;
    background: #999;
    border-radius: 20px;
    font-size: 12px;
    cursor: help;
}
.info:hover {
    background: #555
}
.info-tooltip {
    position: absolute; padding: 15px; background: #fff; border: 2px solid #555; box-shadow: rgba(0,0,0,0.6) 1px 1px 10px; z-index: 10000
}

/* 'show obsolete' toggle */
.obsolete {
    display: none;
}
#show-obsolete:checked + #table-wrapper .obsolete {
    display: table-cell;
}
/* for IE compatibility, this must be a separate rule. */
#show-obsolete[value='on'] + #table-wrapper .obsolete {
    display: table-cell;
}

/* page header */
#body {
    padding-left: 1em; position: relative; min-width: 1250px;
    width: 100%;
}
#header {
    background: #454545; margin-bottom: 0.5em; color: #eee; text-decoration: none; width: 100%;
    padding: 0.5em; font-size: 1.25em; overflow: hidden
}
#header a {
    color: inherit;
}

#header .versions {
    margin: 0 10px;
}
#header .versions a {
    padding: 5px 10px;
    margin-right: 1px;
    background: #888;
    text-decoration: none;
}
#header .versions a:hover {
    background: #999;
}
#header .versions .current {
    background: #eee;
    color: #333;
    font-weight: bold;
}
#header .versions .current:hover {
    background: #eee;
}
.warning {
    background: #ffc; display: inline-block; margin: 0 0 1em 0; padding: 0.25em;
}
label[for="show-obsolete"] {
    background: #eef; padding: 5px; margin-left: 10px; margin-right: -30px; padding-right: 30px;
}
label[for="sort"] {
    background: #fee; margin-left: 20px; padding: 5px; margin-right: -30px; padding-right: 30px;
}
.also-see {
    font-size: 14px; display: inline-block; background:#ddf; padding: 12px; position:absolute;top:0;left:50%;margin:0em 0em 0.5em -174px; color: #333; font-family: 'Open Sans', sans-serif;
}
.also-see a {
    font-weight: bold; color: blue !important; text-decoration: underline !important;
}
.platformtype {
	font-weight: bold;
}

/* page-specific header colors */
/*.es6 #header {
    background: #3c568a; color: #fff;
}*/
.es6 .warning {
    background: #c2e2ff;
}
.es6 label[for="show-obsolete"] {
    background: #daf2ff;
}
.es6 label[for="sort"] {
    background: #c0e8ff;
}
.es6 .also-see {
    background: #eaeef6;
}
/*.non-standard #header {
    background: #0094c0; color: #fff;
}
.es7 #header {
    background: DarkSlateBlue;
}*/

#footnotes {
    margin-left: 1.75em; margin-bottom: 1em; font-size: 0.9em;
}

.test-name {
    width: 260px;
}
.num-features {
    position: absolute; top: -15px; right: 0px; font-size: 11px;
}
.num-features b {
    font-weight: bold;
}
.separator {
    padding: 0; height: 0.5em; background: none;
}
.this-browser {
    background-color: #eef; color: #55f; text-transform: uppercase; padding: 4px 5px; width: 110px; font-size: 13px; vertical-align: top;
}
.by {
    position: relative;
    top: -6px;
    font-size: 12px;
    margin-left: 10px;
}
.by a:hover {
    text-decoration: none;
}
.by iframe {
    position: relative;
    top: 7px;
}