From 56509623b2d0be483f0b04786d43e72c415a5743 Mon Sep 17 00:00:00 2001
From: Domenic Denicola <d@domenic.me>
Date: Thu, 25 Oct 2018 17:16:32 +0200
Subject: [PATCH] Extract out styles that are shared with the HTML dev edition

In particular this adds the MDN margin annotation styles there. But it also deduplicates a lot of existing copy-and-pasted styles.
---
 .../standard-service-worker.js                |   3 +-
 .../standard-shared-with-dev.css              | 330 ++++++++++++++++++
 resources.whatwg.org/standard.css             | 220 +-----------
 3 files changed, 337 insertions(+), 216 deletions(-)
 create mode 100644 resources.whatwg.org/standard-shared-with-dev.css

diff --git a/resources.whatwg.org/standard-service-worker.js b/resources.whatwg.org/standard-service-worker.js
index cf78d86e6..cc5e8a6a4 100644
--- a/resources.whatwg.org/standard-service-worker.js
+++ b/resources.whatwg.org/standard-service-worker.js
@@ -8,11 +8,12 @@
 
 const standardShortname = location.host.split(".")[0];
 
-const cacheKey = "v6";
+const cacheKey = "v7";
 const toCache = [
   location.origin + "/",
   "https://resources.whatwg.org/spec.css",
   "https://resources.whatwg.org/standard.css",
+  "https://resources.whatwg.org/standard-shared-with-dev.css",
   "https://resources.whatwg.org/file-issue.js",
   "https://resources.whatwg.org/commit-snapshot-shortcut-key.js",
   standardShortname === "html" ? "https://resources.whatwg.org/logo.svg"
diff --git a/resources.whatwg.org/standard-shared-with-dev.css b/resources.whatwg.org/standard-shared-with-dev.css
new file mode 100644
index 000000000..28e071773
--- /dev/null
+++ b/resources.whatwg.org/standard-shared-with-dev.css
@@ -0,0 +1,330 @@
+/* Self-links
+   (More non-shared styles in standard.css) */
+
+a.self-link {
+  position: absolute;
+  top: 0;
+  left: -2.5em;
+  width: 2em;
+  height: 2em;
+  text-align: center;
+  transition: opacity 0.2s;
+  opacity: 0.5;
+  text-decoration: none;
+}
+a.self-link:hover {
+  opacity: 1;
+  text-decoration: none;
+}
+
+h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link {
+  font-size: 83%;
+  color: inherit;
+  border-bottom: none;
+}
+
+h2 > a.self-link {
+  left: -4em;
+}
+
+a.self-link::before {
+  content: "¶";
+}
+
+h2 > a.self-link::before, h3 > a.self-link::before, h4 > a.self-link::before,
+h5 > a.self-link::before, h6 > a.self-link::before {
+  content: "§";
+}
+
+@media (max-width: 767px) {
+  dd { margin-left: 0; }
+  /* Don't position self-link in headings off-screen */
+  h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link { left: auto; top: auto; margin-left: 0.5em; }
+}
+
+/* For output from https://github.com/tabatkins/highlighter */
+
+c-[a] { color: #990055 } /* Keyword.Declaration */
+c-[b] { color: #990055 } /* Keyword.Type */
+c-[c] { color: #708090 } /* Comment */
+c-[d] { color: #708090 } /* Comment.Multiline */
+c-[e] { color: #0077aa } /* Name.Attribute */
+c-[f] { color: #669900 } /* Name.Tag */
+c-[g] { color: #222222 } /* Name.Variable */
+c-[k] { color: #990055 } /* Keyword */
+c-[l] { color: #000000 } /* Literal */
+c-[m] { color: #000000 } /* Literal.Number */
+c-[n] { color: #0077aa } /* Name */
+c-[o] { color: #999999 } /* Operator */
+c-[p] { color: #999999 } /* Punctuation */
+c-[s] { color: #a67f59 } /* Literal.String */
+c-[t] { color: #a67f59 } /* Literal.String.Single */
+c-[u] { color: #a67f59 } /* Literal.String.Double */
+c-[cp] { color: #708090 } /* Comment.Preproc */
+c-[c1] { color: #708090 } /* Comment.Single */
+c-[cs] { color: #708090 } /* Comment.Special */
+c-[kc] { color: #990055 } /* Keyword.Constant */
+c-[kn] { color: #990055 } /* Keyword.Namespace */
+c-[kp] { color: #990055 } /* Keyword.Pseudo */
+c-[kr] { color: #990055 } /* Keyword.Reserved */
+c-[ld] { color: #000000 } /* Literal.Date */
+c-[nc] { color: #0077aa } /* Name.Class */
+c-[no] { color: #0077aa } /* Name.Constant */
+c-[nd] { color: #0077aa } /* Name.Decorator */
+c-[ni] { color: #0077aa } /* Name.Entity */
+c-[ne] { color: #0077aa } /* Name.Exception */
+c-[nf] { color: #0077aa } /* Name.Function */
+c-[nl] { color: #0077aa } /* Name.Label */
+c-[nn] { color: #0077aa } /* Name.Namespace */
+c-[py] { color: #0077aa } /* Name.Property */
+c-[ow] { color: #999999 } /* Operator.Word */
+c-[mb] { color: #000000 } /* Literal.Number.Bin */
+c-[mf] { color: #000000 } /* Literal.Number.Float */
+c-[mh] { color: #000000 } /* Literal.Number.Hex */
+c-[mi] { color: #000000 } /* Literal.Number.Integer */
+c-[mo] { color: #000000 } /* Literal.Number.Oct */
+c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
+c-[sc] { color: #a67f59 } /* Literal.String.Char */
+c-[sd] { color: #a67f59 } /* Literal.String.Doc */
+c-[se] { color: #a67f59 } /* Literal.String.Escape */
+c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
+c-[si] { color: #a67f59 } /* Literal.String.Interpol */
+c-[sx] { color: #a67f59 } /* Literal.String.Other */
+c-[sr] { color: #a67f59 } /* Literal.String.Regex */
+c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
+c-[vc] { color: #0077aa } /* Name.Variable.Class */
+c-[vg] { color: #0077aa } /* Name.Variable.Global */
+c-[vi] { color: #0077aa } /* Name.Variable.Instance */
+c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
+
+/* MDN margin annotations */
+
+.mdn {
+  display: block;
+  font: 12px sans-serif;
+  position: absolute;
+  z-index: 9;
+  right: 0.3em;
+  background-color: #eee;
+  margin: -26px 0 0 0;
+  padding: 7px 5px 5px 6px;
+  min-width: 140px;
+  box-shadow: 0 0 3px #999;
+}
+.mdn input {
+   cursor: pointer;
+   position: absolute;
+   left: 0;
+   top: -2px;
+   height: 1em;
+   border: none;
+   color: #000;
+   background: transparent;
+   margin-left: -8px;
+   font-size: 10px;
+   line-height: 1em;
+}
+.mdn b {
+  color: #fff;
+  background-color: #000;
+  font-weight: normal;
+  font-family: zillaslab,Palatino,"Palatino Linotype",serif;
+  padding: 2px 3px 0px 3px;
+  line-height: 1.3em;
+  vertical-align: top;
+}
+.mdn details {
+  display: inline;
+  margin-top: 1px;
+}
+.mdn summary a {
+  margin-left: -4px;
+}
+.nosupportdata {
+  font-style: italic;
+  margin-top: 4px;
+  margin-left: 8px;
+  padding-bottom: 8px;
+}
+.mdnsupport {
+  display: table;
+  margin-top: 4px;
+}
+.mdnsupport > span {
+  display: table-row;
+  padding: 0.2em 0;
+  padding-top: 0.2em;
+  font-size: 9.6px;
+}
+.mdnsupport > span > span {
+  display: table-cell;
+  padding: 0 0.5em;
+  vertical-align: top;
+  line-height: 1.5em;
+}
+.mdnsupport > span > span:last-child {
+  text-align: right;
+  padding: 0;
+}
+.mdnsupport > span.no {
+  color: #CCCCCC;
+  filter: grayscale(100%);
+}
+.mdnsupport > span.unknown {
+  color: #CCCCCC;
+  filter: grayscale(100%);
+}
+.mdnsupport > span.no::before {
+  opacity:  0.5;
+}
+.mdnsupport > span.unknown::before {
+  opacity:  0.5;
+}
+.mdnsupport > span::before {
+  content: "";
+  display: table-cell;
+  min-width: 1.5em;
+  height: 1.5em;
+  background: no-repeat center center;
+  background-image: none;
+  background-size: auto auto;
+  background-size: contain;
+  text-align: right;
+  font-size: 0.75em;
+  font-weight: bold;
+}
+.mdnsupport > .chrome::before, .mdnsupport > .chrome_android::before {
+  background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg);
+}
+.mdnsupport > .edge::before, .mdnsupport > .edge_mobile::before {
+  background-image: url(https://resources.whatwg.org/browser-logos/edge.svg);
+}
+.mdnsupport > .firefox::before, .mdnsupport > .firefox_android::before {
+  background-image: url(https://resources.whatwg.org/browser-logos/firefox.png);
+}
+.mdnsupport > .ie::before {
+  background-image: url(https://resources.whatwg.org/browser-logos/ie.png);
+}
+.mdnsupport > .opera::before, .mdnsupport > .opera_android::before {
+  background-image: url(https://resources.whatwg.org/browser-logos/opera.png);
+}
+.mdnsupport > .safari::before {
+  background-image: url(https://resources.whatwg.org/browser-logos/safari.png);
+}
+.mdnsupport > .safari_ios::before {
+  background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg);
+}
+.mdnsupport > .samsunginternet_android::before {
+  background-image: url(https://resources.whatwg.org/browser-logos/samsung.png);
+}
+.mdnsupport > .webview_android::before {
+  background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png);
+}
+.mdn div:nth-child(n+3) > b {
+  color: #eee;
+  background-color: #eee;
+}
+
+ p + .mdn { margin-top: -45px; }
+.mdn.before { margin-top: 2px; }
+ h2 + .mdn { margin: -48px 0 0 0; }
+ h3 + .mdn { margin: -46px 0 0 0; }
+ h4 + .mdn { margin: -42px 0 0 0; }
+ h5 + .mdn { margin: -40px 0 0 0; }
+ h6 + .mdn { margin: -40px 0 0 0; }
+
+.mdn div { margin: 0; }
+.mdn :link { color: #0000EE; }
+.mdn :visited { color: #551A8B; }
+.mdn :link:active, :visited:active { color: #FF0000; }
+.mdn :link, :visited {
+   text-decoration: underline;
+   cursor: pointer;
+}
+.mdn.wrapped { min-width: 0px; }
+.mdn.wrapped details { display: none; }
+.mdn:hover { z-index: 11; }
+.mdn:focus-within { z-index: 11; }
+
+/* Caniuse support boxes */
+.status { min-height: 0.6em; font: 1em sans-serif; width: 9em; padding: 0.3em; position: absolute; z-index: 8; right: 0.3em; background: #EEE; color: black; box-shadow: 0 0 3px #999; overflow: hidden; margin: -2em 0 0 0; border-collapse: initial; border-spacing: initial; }
+.status:hover { z-index: 9; }
+.status:focus-within { z-index: 9; }
+.status.wrapped > :not(input) { display: none; }
+.status > input { position: absolute; left: 0; top: 0; width: 1em; height: 1em; border: none; background: transparent; padding: 0; margin: 0; }
+.status > p { font-size: 0.6em; margin: 0; padding: 0; }
+.status > p + p { padding-top: 0.5em; }
+.status > p > strong { margin-left: 1.5em; }
+.status > .support { display: block; }
+.status > .support > span { padding: 0.2em 0; display: block; display: table; }
+.status > .support > span.partial { color: #666666; filter: grayscale(50%); }
+.status > .support > span.no { color: #CCCCCC; filter: grayscale(100%); }
+.status > .support > span.no::before { opacity: 0.5; }
+.status > .support > span:first-of-type { padding-top: 0.5em; }
+.status > .support > span > span { padding: 0 0.5em; display: table-cell; vertical-align: top; }
+.status > .support > span > span:first-child { width: 100%; }
+.status > .support > span > span:last-child { width: 100%; white-space: pre; padding: 0; }
+.status > .support > span::before { content: ' '; display: table-cell; min-width: 1.5em; height: 1.5em; background: no-repeat center center; background-size: contain; text-align: right; font-size: 0.75em; font-weight: bold; }
+.status > .support > .and_chr::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); }
+.status > .support > .and_ff::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); }
+.status > .support > .and_uc::before { background-image: url(https://resources.whatwg.org/browser-logos/uc.png); } /* UC Browser for Android */
+.status > .support > .android::before { background-image: url(https://resources.whatwg.org/browser-logos/android.svg); }
+.status > .support > .bb::before { background-image: url(https://resources.whatwg.org/browser-logos/bb.jpg); } /* Blackberry Browser */
+.status > .support > .chrome::before { background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg); }
+.status > .support > .edge::before { background-image: url(https://resources.whatwg.org/browser-logos/edge.svg); }
+.status > .support > .firefox::before { background-image: url(https://resources.whatwg.org/browser-logos/firefox.png); }
+.status > .support > .ie::before { background-image: url(https://resources.whatwg.org/browser-logos/ie.png); }
+.status > .support > .ie_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/ie-mobile.svg); }
+.status > .support > .ios_saf::before { background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg); }
+.status > .support > .op_mini::before { background-image: url(https://resources.whatwg.org/browser-logos/opera-mini.png); }
+.status > .support > .op_mob::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.png); }
+.status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.png); }
+.status > .support > .safari::before { background-image: url(https://resources.whatwg.org/browser-logos/safari.png); }
+.status > .support > .samsung::before { background-image: url(https://resources.whatwg.org/browser-logos/samsung.png); }
+.status > .caniuse { text-align: right; font-style: italic; width: 100%; }
+.status > .caniuse + p { margin-top: 0.5em; border-top: 1px solid silver; }
+
+@media (max-width: 767px) {
+ .status { right: -9em; }
+}
+
+/* DOM tree borders
+   (standard.css has more styles for DOM trees that are not shared) */
+
+ul.domTree, ul.domTree ul {
+  padding: 0 0 0 1em;
+  margin: 0;
+}
+
+ul.domTree li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+  position: relative;
+}
+
+ul.domTree li li {
+  list-style: none;
+}
+
+ul.domTree li:first-child::before {
+  position: absolute;
+  top: 0;
+  height: 0.6em;
+  left: -0.75em;
+  width: 0.5em;
+  border-style: none none solid solid;
+  content: '';
+  border-width: 0.1em;
+}
+
+ul.domTree li:not(:last-child)::after {
+  position: absolute;
+  top: 0;
+  bottom: -0.6em;
+  left: -0.75em;
+  width: 0.5em;
+  border-style: none none solid solid;
+  content: '';
+  border-width: 0.1em;
+}
diff --git a/resources.whatwg.org/standard.css b/resources.whatwg.org/standard.css
index bca48aec7..a7239fb0f 100644
--- a/resources.whatwg.org/standard.css
+++ b/resources.whatwg.org/standard.css
@@ -75,19 +75,13 @@ dd dl + p, dd dl + div.status + p { margin-top: 1.25em; }
 dd table + p, dd table + div.status + p { margin-top: 1.25em; }
 p + * > li, p + div.status + * > li, dd li, p + * > li > p, p + div.status + * > li > p, dd li > p { margin: 1em 0; }
 
-/* self-link */
 h2, h3, h4, h5, h6 { position: relative; }
-a.self-link { position: absolute; top: 0; left: -2.5em; width: 2em; height: 2em; text-align: center; border: none; transition: opacity .2s; opacity: .5; text-decoration: none; }
-a.self-link:hover { opacity: 1; text-decoration: none; }
-h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link { font-size: 83%; color: inherit; }
-a.self-link::before { content: "¶"; }
-h2 > a.self-link::before, h3 > a.self-link::before, h4 > a.self-link::before, h5 > a.self-link::before, h6 > a.self-link::before { content: "§"; }
 @media (max-width: 767px) {
   dd { margin-left: 0; }
-  /* Don't position self-link in headings off-screen */
-  h2 > a.self-link, h3 > a.self-link, h4 > a.self-link, h5 > a.self-link, h6 > a.self-link { left: auto; top: auto; margin-left: 0.5em; }
 }
 
+/* Self-links */
+
 li > a.self-link {
   left: -3.5em;
 }
@@ -386,11 +380,8 @@ pre:hover .dfnPanel :link:hover, pre:hover .dfnPanel :visited:hover { text-decor
   table { font-size: smaller; }
 }
 
-ul.domTree, ul.domTree ul { padding: 0 0 0 1em; margin: 0; }
-ul.domTree li { padding: 0; margin: 0; list-style: none; position: relative; }
-ul.domTree li li { list-style: none; }
-ul.domTree li:first-child::before { position: absolute; top: 0; height: 0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
-ul.domTree li:not(:last-child)::after { position: absolute; top: 0; bottom: -0.6em; left: -0.75em; width: 0.5em; border-style: none none solid solid; content: ''; border-width: 0.1em; }
+/* DOM tree */
+
 ul.domTree span { font-style: italic; font-family: serif, Droid Sans Fallback; }
 ul.domTree .t1 code { color: purple; font-weight: bold; }
 ul.domTree .t2 { font-style: normal; font-family: monospace, Droid Sans Fallback; }
@@ -453,59 +444,7 @@ pre > code.css, pre.highlight.lang-css {
   }
 }
 
-/* for output from https://github.com/tabatkins/highlighter */
-c-[a] { color: #990055 } /* Keyword.Declaration */
-c-[b] { color: #990055 } /* Keyword.Type */
-c-[c] { color: #708090 } /* Comment */
-c-[d] { color: #708090 } /* Comment.Multiline */
-c-[e] { color: #0077aa } /* Name.Attribute */
-c-[f] { color: #669900 } /* Name.Tag */
-c-[g] { color: #222222 } /* Name.Variable */
-c-[k] { color: #990055 } /* Keyword */
-c-[l] { color: #000000 } /* Literal */
-c-[m] { color: #000000 } /* Literal.Number */
-c-[n] { color: #0077aa } /* Name */
-c-[o] { color: #999999 } /* Operator */
-c-[p] { color: #999999 } /* Punctuation */
-c-[s] { color: #a67f59 } /* Literal.String */
-c-[t] { color: #a67f59 } /* Literal.String.Single */
-c-[u] { color: #a67f59 } /* Literal.String.Double */
-c-[cp] { color: #708090 } /* Comment.Preproc */
-c-[c1] { color: #708090 } /* Comment.Single */
-c-[cs] { color: #708090 } /* Comment.Special */
-c-[kc] { color: #990055 } /* Keyword.Constant */
-c-[kn] { color: #990055 } /* Keyword.Namespace */
-c-[kp] { color: #990055 } /* Keyword.Pseudo */
-c-[kr] { color: #990055 } /* Keyword.Reserved */
-c-[ld] { color: #000000 } /* Literal.Date */
-c-[nc] { color: #0077aa } /* Name.Class */
-c-[no] { color: #0077aa } /* Name.Constant */
-c-[nd] { color: #0077aa } /* Name.Decorator */
-c-[ni] { color: #0077aa } /* Name.Entity */
-c-[ne] { color: #0077aa } /* Name.Exception */
-c-[nf] { color: #0077aa } /* Name.Function */
-c-[nl] { color: #0077aa } /* Name.Label */
-c-[nn] { color: #0077aa } /* Name.Namespace */
-c-[py] { color: #0077aa } /* Name.Property */
-c-[ow] { color: #999999 } /* Operator.Word */
-c-[mb] { color: #000000 } /* Literal.Number.Bin */
-c-[mf] { color: #000000 } /* Literal.Number.Float */
-c-[mh] { color: #000000 } /* Literal.Number.Hex */
-c-[mi] { color: #000000 } /* Literal.Number.Integer */
-c-[mo] { color: #000000 } /* Literal.Number.Oct */
-c-[sb] { color: #a67f59 } /* Literal.String.Backtick */
-c-[sc] { color: #a67f59 } /* Literal.String.Char */
-c-[sd] { color: #a67f59 } /* Literal.String.Doc */
-c-[se] { color: #a67f59 } /* Literal.String.Escape */
-c-[sh] { color: #a67f59 } /* Literal.String.Heredoc */
-c-[si] { color: #a67f59 } /* Literal.String.Interpol */
-c-[sx] { color: #a67f59 } /* Literal.String.Other */
-c-[sr] { color: #a67f59 } /* Literal.String.Regex */
-c-[ss] { color: #a67f59 } /* Literal.String.Symbol */
-c-[vc] { color: #0077aa } /* Name.Variable.Class */
-c-[vg] { color: #0077aa } /* Name.Variable.Global */
-c-[vi] { color: #0077aa } /* Name.Variable.Instance */
-c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
+/* WPT test results */
 
 .wpt-tests-margin {
   background: hsl(290, 70%, 95%);
@@ -551,152 +490,3 @@ c-[il] { color: #000000 } /* Literal.Number.Integer.Long */
 .wpt-tests-margin.wrapped > :not(input) {
   display: none;
 }
-
-/* For MDN margin annotations */
-
-.mdn {
-  display: block;
-  font: 12px sans-serif;
-  position: absolute;
-  z-index: 9;
-  right: 0.3em;
-  background-color: #eee;
-  margin: -26px 0 0 0;
-  padding: 7px 5px 5px 6px;
-  min-width: 140px;
-  box-shadow: 0 0 3px #999;
-}
-.mdn input {
-   cursor: pointer;
-   position: absolute;
-   left: 0;
-   top: -2px;
-   height: 1em;
-   border: none;
-   color: #000;
-   background: transparent;
-   margin-left: -8px;
-   font-size: 10px;
-   line-height: 1em;
-}
-.mdn b {
-  color: #fff;
-  background-color: #000;
-  font-weight: normal;
-  font-family: zillaslab,Palatino,"Palatino Linotype",serif;
-  padding: 2px 3px 0px 3px;
-  line-height: 1.3em;
-  vertical-align: top;
-}
-.mdn details {
-  display: inline;
-  margin-top: 1px;
-}
-.mdn summary a {
-  margin-left: -4px;
-}
-.nosupportdata {
-  font-style: italic;
-  margin-top: 4px;
-  margin-left: 8px;
-  padding-bottom: 8px;
-}
-.mdnsupport {
-  display: table;
-  margin-top: 4px;
-}
-.mdnsupport > span {
-  display: table-row;
-  padding: 0.2em 0;
-  padding-top: 0.2em;
-  font-size: 9.6px;
-}
-.mdnsupport > span > span {
-  display: table-cell;
-  padding: 0 0.5em;
-  vertical-align: top;
-  line-height: 1.5em;
-}
-.mdnsupport > span > span:last-child {
-  text-align: right;
-  padding: 0;
-}
-.mdnsupport > span.no {
-  color: #CCCCCC;
-  filter: grayscale(100%);
-}
-.mdnsupport > span.unknown {
-  color: #CCCCCC;
-  filter: grayscale(100%);
-}
-.mdnsupport > span.no::before {
-  opacity:  0.5;
-}
-.mdnsupport > span.unknown::before {
-  opacity:  0.5;
-}
-.mdnsupport > span::before {
-  content: "";
-  display: table-cell;
-  min-width: 1.5em;
-  height: 1.5em;
-  background: no-repeat center center;
-  background-image: none;
-  background-size: auto auto;
-  background-size: contain;
-  text-align: right;
-  font-size: 0.75em;
-  font-weight: bold;
-}
-.mdnsupport > .chrome::before, .mdnsupport > .chrome_android::before {
-  background-image: url(https://resources.whatwg.org/browser-logos/chrome.svg);
-}
-.mdnsupport > .edge::before, .mdnsupport > .edge_mobile::before {
-  background-image: url(https://resources.whatwg.org/browser-logos/edge.svg);
-}
-.mdnsupport > .firefox::before, .mdnsupport > .firefox_android::before {
-  background-image: url(https://resources.whatwg.org/browser-logos/firefox.png);
-}
-.mdnsupport > .ie::before {
-  background-image: url(https://resources.whatwg.org/browser-logos/ie.png);
-}
-.mdnsupport > .opera::before, .mdnsupport > .opera_android::before {
-  background-image: url(https://resources.whatwg.org/browser-logos/opera.png);
-}
-.mdnsupport > .safari::before {
-  background-image: url(https://resources.whatwg.org/browser-logos/safari.png);
-}
-.mdnsupport > .safari_ios::before {
-  background-image: url(https://resources.whatwg.org/browser-logos/safari-ios.svg);
-}
-.mdnsupport > .samsunginternet_android::before {
-  background-image: url(https://resources.whatwg.org/browser-logos/samsung.png);
-}
-.mdnsupport > .webview_android::before {
-  background-image: url(https://resources.whatwg.org/browser-logos/android-webview.png);
-}
-.mdn div:nth-child(n+3) > b {
-  color: #eee;
-  background-color: #eee;
-}
-
- p + .mdn { margin-top: -45px; }
-.mdn.before { margin-top: 2px; }
- h2 + .mdn { margin: -48px 0 0 0; }
- h3 + .mdn { margin: -46px 0 0 0; }
- h4 + .mdn { margin: -42px 0 0 0; }
- h5 + .mdn { margin: -40px 0 0 0; }
- h6 + .mdn { margin: -40px 0 0 0; }
-
-.mdn div { margin: 0; }
-.mdn :link { color: #0000EE; }
-.mdn :visited { color: #551A8B; }
-.mdn :link:active, :visited:active { color: #FF0000; }
-.mdn :link, :visited {
-   text-decoration: underline;
-   cursor: pointer;
-}
-.mdn.wrapped { min-width: 0px; }
-.mdn.wrapped details { display: none; }
-.mdn:hover { z-index: 11; }
-.mdn:focus-within { z-index: 11; }