/* Style for Jeff's presentation to the Steering Committee, based on
   the slides for TPAC 2018, to be used together with the Shower
   script. For usage instructions, see
   https://www.w3.org/2018/10/TPAC/Templates/TPAC-2018-slides.html

   TODO: Styles for tables? blockquotes? class=shout?

   A = 16/9  = aspect ratio
   N = 23    = height in rem (i.e., 21 lines + 2 x 1 rem padding)
   L = 5.5   = logo width in rem
   C = 2     = font size (and logo size) multiplier for cover pages
   w = N*A   = width of slide in rem

   +-------+---------------------------------------+
   |       |                   1em                 |
   |       |   +-------------------------------+   |
   | LOGO  |   |                ^              |   |
   |       |   |                |              |   |
   | 5.5em |1em|              21em             |1em|
   |       |   |                |              |   |
   |       |   |                v              |   |
   |       |   +-------------------------------+   |
   |   #   |                   1em                 |
   +-------+---------------------------------------+

   Created: 11 October 2018
   Author: Bert Bos <bert@w3.org>
*/

@font-face {
  font-family: 'LeagueGothicRegular';
  src: url(../../Talks/TPAC-2018/aux-files/League_Gothic-webfont.woff) format('woff');
  font-weight: normal;
  font-style: normal}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: normal;
  src: url(../../Talks/TPAC-2018/aux-files/GILLSAN3.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: normal;
  src: url(../../Talks/TPAC-2018/aux-files/GILLSAN2.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 700;
  src: url(../../Talks/TPAC-2018/aux-files/GILLSAN1.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 700;
  src: url(../../Talks/TPAC-2018/aux-files/GILLSAN0.woff) format("woff")}

/* Common layout independent of slide mode */
html {font: 1.156em/1.3 Gill Sans MT, Gill Sans, My Gill Sans, Liberation Sans,
  sans-serif; font-size-adjust: 0.45;
  font-variant-numeric: oldstyle-nums tabular-nums}
body {background: url(linen.png) #595b60; counter-reset: slide; margin: 2em;
  color: white}
address {font-family: Garamond Premier Pro, Garamond, serif}
h1 {font: 2em/1.1 League Gothic, LeagueGothicRegular, sans-serif;
  letter-spacing: 0.03em; margin: 0 0 0.3em 0; text-transform: uppercase;
  color: #015ca4}
.full, .slide {width: 40.889rem; /*= w */ height: 23rem; /*= N */}
.slide {color: black; box-shadow: 0 0.4rem 0.6rem #000; line-height: 1.6;
  padding: 1rem 1rem 1rem 6.5rem /*= L + 1 */; position: relative;
  box-sizing: border-box; z-index: 0; display: inline-block;
  margin: 4rem 2rem 0 0; vertical-align: bottom; counter-increment: slide;
  border-radius: 0.5rem;
  background: url(w3c_home_wai.png) 1rem 50% / 3.5rem /*= L-2 */ auto no-repeat,
    url(banner.png) top left / 5.5rem /*= L */ 100% no-repeat, url(swirl.png)
    bottom right / 20% auto no-repeat, white}
@supports (background: url(w3c_home_wai.svg)) {
  .slide {/* Version with SVG: */
  background: url(w3c_home_wai.svg) 1rem 50% / 3.5rem /*= L-2 */ auto no-repeat,
    url(banner.svg) top left / 5.5rem /*= L */ 100% no-repeat, url(swirl.svg)
    bottom right / 20% auto no-repeat, white}
}
.slide h2::after {content: ""; display: block;
  margin-left: -3.5rem /* = -1 - L/2 */; height: 0.2rem;
  background: linear-gradient(to right,#CB6628,#FFF,#CB6628,#CB6628,#CB6628)}
.slide.cover h2::after {content: none}
.slide:target {outline: lime solid 0.5rem; outline-offset: 1rem}
.slide.side {padding-left: 17.217rem /*= L + 2 + (w - L - 3) * 30% */}
.slide.side.right, .slide.side.r {padding-left: 6.5rem /*= L + 1 */;
  padding-right: 11.717rem; /*= (w - L - 3) * 30% + 2 */}
.side .side {position: absolute; top: 4.3478% /*= 1/N */;
  left: 6.5rem; /*= L + 1 */
  width: 23.764%; /*= (w - L - 3) * 30% / w */}
.side.right .side, .side.r .side {left: 73.791% /*= (L + 2 + (w - L - 3) * 70%) / w */}
@supports (transform: translate(-50%,-50%)) {
  .side .side {top: 50%; transform: translate(-50%,-50%);
    left: 27.779%; /*= (L + 1 + (w - L - 3) * 30% / 2) / w */}
  .side.right .side, .side.r .side {
    left: 85.673% /*= (L + 2 + (w - L - 3) * 85%) / w */}
}
.note {font-size: 80%}
.slide em {font-style: normal;
  background: 0 0 / 100% 100% url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKgAAAAfCAYAAABzhIZ5AAAABGdBTUEAANbY1E9YMgAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAL4SURBVHja7Vw7rpwwFJ0dsASWMEtAygZcp6KKUkVWujRPVprXsgSyA5ZAkTYSUqT8XpRQRa8cKUqR7gYkT+Q4Bq7B/IZj6UwF2IyPr8/9mNNpwfaOnsQNEg3ZQDUoGpQ9KPR1V0jjGckJDc2TfDbxqga0EC66z0yPIdVjOmOGjkfGVBOhXJCAoQhcmATGjN4GKc+akPWOCOmD2iAuSBuWO5Epy5iIuA8XN0zKMagGNLMLuaWjfSFGTLAvJGMcff5CHdBQKDZBJ66Y60uB4MCQ7FKz+AqGc6S0pSh1p/jzAbKsrL0jRKEtYmqZekzAcSVO3iFBzj0yQnRIh8whGdQYK5mO1FA5tnmAaW1bLRyHDrr3ETeDtQW0gera7mfRnvLgxJvTax+CXMCrH8Se4lxXXVrBUrC9Vm5qd0rY6TzjnLtknxmGqhj/Q67vj0M4RrnROYh2+1uxuVAiBzltTnCRuRab78pA7HIe7XXxtKbmffUIMjjxkZ7n3+h1+Z3uix/0RrUgomRBKCbEqfmJux70i76IdvDtyzzQq/ozvaT39HRwUtrrWnyiFxWs7vr4QM/+zgkHX+mOmnnvxYXe0k+q/sNveiSj1Q1KBwoHGU3u8eKj7YXcVdGS2YfEwKE9+KJDU0dzpTUVskeARw1D4SBnPJc3ZxYZDGUQkAZdvpilcBR5hAh1iTWiB6HL8/ZYM3r0mG7RQ8R4ayTrquNLe0qx4P1PL9/jBvrzkZ58HWjcWbDUJNPiIeC+nQC+HS9Md7mVBiBmYmkUX68MZN5nOtYXUzVrassEq/JJhCKzucVDW8Lqu7Rr6jq6YUR8KkYpnxxybhQs5CFjlC5rmYRwlBy7tavPf6WLZrXUN2LCbqsIxalhV4ro2PqZf8TD2razFXUKJycNMq5vZeuJulhuLmQVcDUKvYggPfbhpOXX+tWjnrk2D+yBtOt+CENuMqC/o8/wIIngt5VnHRmlCCxbRrgLjw8UbEn/Vp7V+HLXRzbQgh4gPOa5n5naH6O0itHwx3iJAAAAAElFTkSuQmCC)}
/* .slide em {font-style: normal; font-size: 120%; line-height: 0.6} */
.columns > * {box-sizing: border-box;
  width: 47.005% /*= (w - L - 4)/2/(w - L - 2) */; float: right}
.columns > *:nth-child(odd) {clear: both; float: left}
.columns {overflow: hidden}
@supports (display: grid) {
  .columns {overflow: visible; display: grid; grid: "a  b" / 1fr 1fr;
     grid-gap: 0 2rem}
  .columns > * {width: auto}
}
.comment {background: hsl(50,80%,90%); color: black; padding: 1rem 1rem;
  columns: 37em; font-family: serif; border-radius: 0.5rem; margin: 4rem 0 0;
  widows: 2; orphans: 2}
.comment :first-child {margin-top: 0}
img {max-width: 100%}
.num {font-variant-numeric: oldstyle-nums tabular-nums diagonal-fractions}
code, pre {font-family: Andale Mono, Courier, monospace}
code {background: #eee; padding: 0.1em 0.3em; border-radius: 0.3em}
sub, sup {line-height: 0.5}
.slide pre {padding: 0 0.2em; background: black; color: hsl(120,100%,70%)}
ol {padding-left: 2.5em}
ul {padding-left: 1em}
ol, ul {margin: 1em 0}
li ul, li ol {margin: 0}
ul > li {list-style: none}
ul > li::before {content: "\25A0"; display: inline-block; width: 1em;
  margin-left: -1em; color: #015ca4}

/* Explicit placement on a 3x3 grid */
.place {position: absolute; box-sizing: border-box;
  max-width: 25.589%; /*= (w - L - 4) / 3 / w */
  top: 50%; left: 56.726%; /*= (L + 1 + (w - L - 2) / 2) / w */
  transform: translate(-50%, -50%); text-align: center}
.place.t, .place.top {top: 4.3478%; /*= 1/N */ transform: translate(-50%,0)}
.place.b, .place.bottom {top: auto; bottom: 4.3478% /*= 1/N */;
  transform: translate(-50%,0)}
.place.l, .place.left {left: 15.897%; /*= (L + 1) / w */
  transform: translate(0,-50%); text-align: left}
.place.r, .place.right {left: auto; right: 2.4457%; /*= 1 / w */
  transform: translate(0,-50%); text-align: right}
.place.t.l, .place.top.left, .place.t.r, .place.top.right, .place.b.l,
.place.bottom.left, .place.b.r, .place.bottom.right {transform: none}

/* Numbered lines in a PRE */
pre.numbered {padding-left: 2em; overflow-y: hidden; position: relative}
pre.numbered::before {color: #aaa; text-align: right; white-space: pre-line;
  content: "1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20";
  position: absolute; top: 0; left: 0; width: 1.2em; font-family: serif;
  border-right: thin solid; padding-right: 0.2em; /*background: white*/}

/* Cover pages */
.slide.cover {font-size: 200% /*= C */; text-align: center}
.slide.cover address {position: absolute; bottom: 4.3478% /*= 1/N */;
  left: 15.897% /*= (L + 1)/w */; right: 2.4457% /*= 1 / w */;
  line-height: 1.3}

/* Full-size image overlays */
img.cover, img.fit {position: absolute; z-index: -1; top: 0; left: 0;
  width: 86.549%; /*= (w - L) / w */ height: 100%; object-fit: cover; padding: 0}
img.fit {object-fit: contain}
.cover img.cover, .cover img.fit {width: 73.098%; /*= (w - 11) / w */}

/* Slide numbers in lower left corner */
.slide::after {content: "-" counter(slide) "-"; position: absolute;
  line-height: 1; font-weight: bold; width: 5.5rem /*= L */;
  text-align: center; color: #DDD; bottom: 1rem; left: 0;
  font-size: 1rem; font-weight: normal}
.slide.clear::after {content: none}

/* Layout in slide mode (when body has class=full) */
.full, .full .slide {position: absolute; overflow: hidden}
.full {top: 50%; left: 50%; background: black;
  margin: -11.5rem /*= -N/2 */ 0 0 -20.444rem /*= -w/2 */}
.full .slide {visibility: hidden; top: 0; left: 0; margin: 0}
.full .slide.active {visibility: visible}
.full .comment {display: none}
.full .slide:target {outline: none}

.full .progress {position: absolute; top: 0; left: 0; height: 1px;
  background: linear-gradient(to right, hsla(0,100%,50%,0),hsla(0,100%,50%,1));
  z-index: 1; transition: 0.5s}

/* Reveal elements one by one */
.full .next {visibility: hidden}
.full .active .next.active {visibility: visible}

.full abbr {text-decoration: none}

/* Not sure why Shower makes a section with class=region... */
section.live-region, section.region {display: none}


@page {
  margin: 1cm;
}
@media print {
  html {font-size: 10pt}
  body {background: none; margin: 0; columns: 41em}
  .slide {border: 0.5pt solid black; margin: 1rem 1rem 1rem 0; display: block;
    overflow: hidden}
  ul {margin: 0.9em 0} /* Compensate slight differences in fonts & margins */
}