/* vim: set expandtab ts=2 sw=2 tw=80: */

/*
 * Figures
 */
body {
  counter-reset: figure;
  margin: 0 auto !important;
}
div.figure {
  margin: 2.5em 0;
  text-align: center;
  page-break-inside: avoid;
}
div.figure img {
  display: block;
  margin: auto;
  max-width: 100%;
}
img {
  border-style: none;
}
div.figure {
  text-align: center;
}
p.caption:before {
  content: "Figure " counter(figure, decimal) ". ";
}
p.caption {
  counter-increment: figure;
  font-style: italic;
  text-align: center;
}

/*
 * Boxy things
 */
.note,
.annotation,
.issue,
.informative-bg,
.todo,
.feedbackWanted {
  margin: 1.5em 0 1em;
  padding: 1em;
}
.informative-bg {
  margin-top: 1em;
}
.note *:last-child,
.annotation *:last-child,
.issue *:last-child,
.informative-bg *:last-child,
.todo *:last-child,
.feedbackWanted *:last-child {
  margin-bottom: 0;
}
div.annotation:before, p.annotation:before,
div.todo:before, p.todo:before,
div.feedbackWanted:before, p.feedbackWanted:before
{
  display: block;
  margin: -1.5em 0 0.5em;
  font-weight: bold;
  padding: 3px 1em;
  background: white;
}
.informative-bg p:first-child {
  margin-top: 0;  
}

/*
 * Feedback wanted
 */
div.feedbackWanted:before, p.feedbackWanted:before {
  content: "Feedback wanted";
  border: 1px solid #F88;
  width: 150px;
}
div.feedbackWanted, p.feedbackWanted {
  display: block;
  background: #FEE;
  padding: 1em;
}

/*
 * Todo
 */
div.todo:before, p.todo:before {
  content: "TODO";
  border: 1px solid #F90;
  width: 80px;
}
div.todo, p.todo, li.todo {
  background: #FFD;
}
span.todo {
  background: #FFB;
  padding: 0;
}

/*
 * Annotation
 */
div.annotation:before, p.annotation:before {
  content: "Annotation";
  border: 1px solid #A8C;
  width: 150px;
}
div.annotation, p.annotation {
  background: #EDF;
}

/*
 * Informative sections
 */
div.informative-bg {
  background: #efe;
  border: green 1px dotted;
}
div.informative-bg h2,
div.informative-bg h3,
div.informative-bg h4 {
  background: none;
}

/*
 * Algorithm display
 */
li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
li.tocline {
  margin-top: 0.2em;
  margin-bottom: 0.2em;
}
dl.switch > dt:before {
  content: "\0021aa";
  padding-right: 0.3em;
  margin-left: -1.3em;
}
dl.switch > dt {
  margin-left: 1.3em;
}
dl.switch ol {
  padding-left: 1.3em;
}

/*
 * Fix the formatting of extended definition lists
 */
dl p {
  margin-top: 0;
}

/*
 * On Windows, the bold Arial glyph for right and left arrow is missing the
 * stem at some font-sizes so use a different font. This affects Firefox,
 * Chrome, and IE.
 */
span.arrow {
  font-family: Calibri, sans-serif;
}

/*
 * Mark javascript examples as such
 */
pre.example.sh_javascript:before {
  content: "ECMAScript";
}

/*
 * Parameter tables
 */
.parameters td p:first-child {
  margin-top: 0;
}
.parameters td p:last-child {
  margin-bottom: 0;
}

/*
 * Comments
 */
.idlSectionComment {
  color: grey;
}

/*
 * Time marks
 */
.timeMark sub {
  font-style: normal;
  font-size: 80%;
}
span.position,
span.property
{
  font-style: italic;
}

/*
 * Example IDL
 *
 * (XXX Remove once we stop needing this)
 */
pre.webidl {
    border-top: 1px solid #90b8de;
    border-bottom: 1px solid #90b8de;
    padding:    1em;
    line-height:    120%;
    background-color: white;
}
pre.webidl::before {
    content:    "WebIDL";
    display:    block;
    width:      150px;
    background: #90b8de;
    color:  #fff;
    font-family:    initial;
    padding:    3px;
    font-weight:    bold;
    margin: -1em 0 1em -1em;
}

/*
 * Hide HTML-equivalent math for ATs.
 */
div[role="math"] > :first-child ~ * {
  position: absolute;
  width: 400px;
  left: -10000px;
  overflow: hidden;
}

/*
 * Productions
 */
.production {
  display: block;
  text-indent: -2em;
  margin-left: 2em;
  margin-bottom: 0.5em;
}
.production .atom {
  white-space: nowrap;
}

/*
 * Elements and attributes
 */
.attr, .elem {
  color: rgb(42, 42, 165);
}
.elem {
  font-weight: bold;
}
.elem:before, .attr:before {
  content: "\2018";
}
.elem:after, .attr:after {
  content: "\2019";
}
.attr:before, .attr:after {
  color: black;
}

/*
 * Property/attribute tables
 */
table.propdef {
  width: 100%;
  page-break-inside: avoid;
  border-spacing: 0;
}
table.propdef th {
  font-style: italic;
  text-align: left;
}
table.propdef th:first-child {
  width: 12em;
}
table.propdef th:first-child + th {
  width: auto;
}
table.propdef th:first-child + th + th {
  width: 8em;
}
table.propdef th:first-child + th + th  + th {
  width: 8em;
}
table.propdef th, table.propdef td {
  padding: 0.4em 0.5em;
  border-bottom: lightgrey 1px solid;
}
dt table.propdef {
  font-weight: normal;
}