/* 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;
}

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: 4px;
  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.svg);
}
.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.svg);
}
.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: 4px; 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.svg); }
.status > .support > .opera::before { background-image: url(https://resources.whatwg.org/browser-logos/opera.svg); }
.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.svg); }
.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;
}