/* Homepage */
main {
  font-size: 12pt;
  line-height: 1.8;
  margin: 0 3em 3em;
  max-width: 820px;
}
main h2 {
  font-weight: bold;
}
main p {
  margin-bottom: 1em;
}
main a {
  color: #08719c;
  font-weight: bold;
}
main em, main kbd {
  font-style: italic;
}
main strong {
  font-weight: bold;
}

/* Self-assessment */
.slide.evaluation p {
  margin-left: 0;
}

.slide.evaluation > ol > li {
  cursor: pointer;
}
.slide.evaluation > ol > li:hover {
  color: #CC4320;
}
.slide.evaluation > ol > li > ul {
  margin-left: 0;
  max-height: 0;
  overflow: hidden;
}
.slide.evaluation > ol > li > ul {
  margin-left: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s;
}
.slide.evaluation > ol > li.selected > ul {
  max-height: 7em;
  transition: max-height 1s;
}
.slide.evaluation > ol > li.selected,
.slide.evaluation > ol > li > ul * {
  color: #C40909;
}
.slide.evaluation > ol > li.correct.selected,
.slide.evaluation > ol > li.correct > ul * {
  color: #5A9310;
}
.slide.evaluation > ol > li.half.correct.selected,
.slide.evaluation > ol > li.half.correct > ul * {
  color: #CC4320;
}

/* Do and dont's */
.do, .dont {
  width: 48%;
  float: left;
}
.dont {
  margin-right: 4%;
}
.do h3 {
  color: #08719C;
  margin-bottom: 0;
}
.dont h3 {
  color: #CC4320;
  margin-bottom: 0;
}
.do *, .dont * {
  margin-left:  0 !important;
  padding-left: 0 !important;
}
.do code {
  width: auto !important;
  text-align: left;
}
.do .example, .dont .example {
  min-height: 210px;
}
.do ul li, .dont ul li {
  margin: 0;
  font-weight: normal;
  font-style: italic;
  color: #979A9E;
}

/* Browser window */
.browser {
  background: url(../images/browser.jpg) top center / 100% no-repeat;
  height: 500px;
  border-radius: 12px;
  box-shadow:  5px  5px 10px rgba(0, 0, 0, .4),
              -2px  5px 10px rgba(0, 0, 0, .4);
}
.browser .address-bar {
  position: relative;
  top: 59px;
  left: 116px;
  font-size: 26px;
}
.browser .body {
  position: relative;
  top: 83px;
  height: 400px;
  text-align: center;
}
.browser .body * {
  margin-left: 0;
}

/* Full-screen navigation for touch */
.handle::before {
  display: block;
  content: " ";
  position: absolute;
  background: rgba(255, 255, 255, 0);
  width: 100%;
  height: 25%;
  left: 0;
  bottom: 10%;
}

/* Twitter */
.list #twitter {
  display: none;
}
.full #twitter {
  display: block;
  position: absolute;
  z-index: 1000;
  right:  10px;
  top:    10px;
  width:  30px;
  height: 30px;
  font-size: 0pt;
  color: rgba(255,255,255,0);
  background: url(../images/twitter.svg) top left / contain no-repeat;
  transition: width .3s, height .3s;
}
.full #twitter:hover {
  width:  40px;
  height: 40px;
}

/* Other */
q, cite, blockquote { font-style: italic; }
q:before, cite:before { content: "“"; }
q:after,  cite:after  { content: "”"; }
blockquote cite:after { content: "";  }

.slide > p:first-of-type {
  margin-top: 1em;
}

pre.scroll {
  max-height: 17em;
  overflow: scroll;
}

.slide li dl {
  color: black;
}

.slide dl.tight {
  font-size: .7em;
}
.slide dl.tight > dt,
.slide dl.tight > dd {
  margin-top: 0;
}