@charset "utf-8";

/* Style for TPAC and AC pages

This is a fairly generic style sheet for TPAC and AC pages, such as
https://www.w3.org/2016/09/TPAC/schedule.html

It adapts to different screen widths.

It includes a print style that is especially designed to create a
hand-out from the agenda page.


1. Contents of document <HEAD>
------------------------------
The head of each page should contain the following (or equivalent):

  <meta name="viewport" content="width=device-width" />
  <link href="../../../2016/09/TPAC/tpac.css" rel="stylesheet"
   type="text/css" />
  <link href="local.css" rel="stylesheet" type="text/css"> (see 3 below)


2. Structure of document <BODY>
-------------------------------
The style assumes a top-level structure that starts like this:

  <p id="logo"><img src="....logo" alt="" /></p>
  <h1>W3C TPAC 2016</h1>
  <p>W3C Technical Plenary / Advisory Committee Meetings Week</p>
  <p id="insidenav">... a small number of <a> elements... </p>

Then zero or more small sidebar elements like this:

  <div class="rightbar">
    ... typically an <h2> followed by <p> or <ul>...
  </div>

If one of those is about microblogging, then add id="microblog", like this:

  <div class="rightbar" id="microblog">
    ...
  </div>

Then zero or more sections that each start with an <h2>. If the
contents of the <h2> is long, make it look nicer by adding <br /> in a
logical place.

  <h2>Group schedule<br /> 19-23 September</h2>
  ... content of this section...

Use <h3> for sub-sections. Use an <h3 class="sep"> for a heading that
looks slightly simpler.

Any tables that denote room assignments (as opposed to time schedules
or other things) should have class="rooms". Such tables are assumed to
have five columns, corresponding to group name, room number,
confidentiality, estimated attendance, and estimated # of
observers. The last two of those will be omitted from the print
version. E.g.:

  <table class="rooms">
   <thead>
    <tr>
     <th>Group Name</th>
     <th>Room Location</th>
     <th>Confidentiality, Observer policy</th>
     <th><abbr title="Estimated attendance">Est. Att.</abbr> / Actual</th>
     <th><abbr title="Observers">Obs.</abbr></th>
    </tr>
   </thead>
   <tbody>
    ...
   </tbody>
  </table>

If one of the sections (the last one, usually) contains floor plans or
similar, give the <h2> an id="map". E.g.:

  <h2 id="map">Floor plans</h2>
  <p>
   <img alt="First floor: ....." src="......" />
   <img alt="Ground floor: ....." src="......" />
  </p>

Optionally (but recommended for other reasons than the style), add an
author and date at the end:

  <address>Created by Alexandra Lacourba<br />
   Updated $Date: 2019/03/15 15:27:11 $ by $Author: bbos $</address>

Any elements that should *not* be printed can be marked with
class="noprint". E.g.:

  <p class="noprint">Please, register before booking travel. On-site
  registration cannot be guaranteed.</p>

Any elements that should *only* be printed, but not shown on screen,
can be marked with class="print", e.g.:

  <iframe class="print" src="inclusion.html></iframe>


3. The "at-a-glance" table
--------------------------
If there is a table with an ID of "at-a-glance", it is assumed to be
an overview of the week, with each column (except the first)
representing a day. The first column has times, such as 08:30–09:00.

This table will be set as wide as possible, between the left and right
black margins.

For that reason, it will move below any floating boxes, such as those
with class="rightbar". It may thus be necessary to put some of those
floating boxes *after* the table instead of before it.


4. Using local overrides to adapt logo & banner for each AC/TPAC
----------------------------------------------------------------
Each TPAC and AC has a different logo and corresponding banner along
the top of the page. The placement of the logo (center, right, left)
is often different. The images as delivered by the designers are also
not the same size. That means the rule for '#logo' and '#logo img'
very likely need to change from one year to the next.

The '#insidenav' may need to change color and position to match the
logo.


5. Instructions for making a hand-out
-------------------------------------
The print style is designed to allow making a hand-out of the agenda
as a little booklet. To make a booklet of folded A4 sheets:

  - Select A5 as the page size (e.g., use ,pdfui or ,pdf?size=A5).

  - Use an external tool (e.g., pdfbook) to put the pages 2-up on a
    double-sided A4 page, rearranged into a signature.

The print style omits some elements: navigation menu, author & date,
all sidebars except for the one with id="microblog", some columns from
tables.


6. Tricks for narrow screens
----------------------------
The style contains rules to adapt the layout to the width of the
viewport, but the author can help a bit, too, by adding special
mark-up:

  - Mobile browsers typically do not hyphenate words automatically, so
    it is a good idea to add soft hyphens (&shy;) in long words inside
    tables.

  - Use the abbr attribute on table cells (TH and TD) to provide a
    shorter version of that cell, e.g.:

        <th abbr="Mon 6">Monday - 6 November</th>
        <th abbr="Room">Room Location</th>



Created: 23 June 2016
Author: Bert Bos <bert@w3.org>

 */

@font-face {
  font-family: 'LeagueGothicRegular';
  src: url('../../../2013/11/TPAC/css/type/League_Gothic-webfont.eot');
  src: url('../../../2013/11/TPAC/css/type/League_Gothic-webfont.eot?#iefix')
    format('embedded-opentype'),
    url('../../../2013/11/TPAC/css/type/League_Gothic-webfont.woff')
    format('woff'),
    url('../../../2013/11/TPAC/css/type/League_Gothic-webfont.ttf')
    format('truetype'),
    url('../../../2013/11/TPAC/css/type/League_Gothic-webfont.svg#LeagueGothicRegular')
    format('svg');
  font-weight: normal;
  font-style: normal}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: normal;
  src: url(../../../Style/CSS/GILLSAN3.eot) format("embedded-opentype"),
    url(../../../Style/CSS/GILLSAN3.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: normal;
  src: url(../../../Style/CSS/GILLSAN2.eot) format("embedded-opentype"),
    url(../../../Style/CSS/GILLSAN2.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: normal;
  font-weight: 700;
  src: url(../../../Style/CSS/GILLSAN1.eot) format("embedded-opentype"),
    url(../../../Style/CSS/GILLSAN1.woff) format("woff")}

@font-face {
  font-family: My Gill Sans;
  font-style: oblique;
  font-weight: 700;
  src: url(../../../Style/CSS/GILLSAN0.eot) format("embedded-opentype"),
    url(../../../Style/CSS/GILLSAN0.woff) format("woff")}

html {background: black; overflow: auto;
  font: 1.156em/1.3 Gill Sans MT, Gill Sans, My Gill Sans, Liberation Sans,
  sans-serif; font-size-adjust: 0.45}
/* Gradient background, if supported. Uses a color from the banner. */
html {background: fixed linear-gradient(to bottom, #000, #135049)}
body {background: white; color: #333; margin: 0 auto; max-width: 85em;
  overflow: hidden; padding: 0 2em 2em 4em; box-shadow: 0 1px 3px black}
@media all and (min-width: 91em) {body {margin: calc((100% - 91em) / 20) auto}}
/* The logo is floated to the right and put on top of its background
image. Its very large left border and equally large negative left
margin make that background extend far to the left of the logo, so
that the next text (the H1) is visually on top of the same
background. The 'overflow: hidden' on body crops that overly large
background at the body edge.*/
#logo {margin: 0}
#logo img {float: right; margin: 0 -2em 0 -100em; border: solid transparent;
  border-width: 0 5.5em 0 100em; width: 7em; height: auto;
  background: top right no-repeat url(img/web_banner.png) #C2001D;
  background: top right no-repeat url(img/web_banner.png),
    top right repeat-x url(img/web_banner_bg.png) #C2001D;
  background-size: auto 100%, auto 100%; background-origin: border-box}
h1, h1 + p {color: white; margin: 0}
h1 + p {margin-top: 0.2em}
h1 + p::after {content: " "; display: block; clear: right; height: 0}
h1 {font: 3.75em/1.1 League Gothic, LeagueGothicRegular, sans-serif;
  letter-spacing: 0.03em;
  padding-top: 0.5em}
h1 + p {font: italic 1.25em/1.1 Garamond Premier Pro, Garamond, serif;
  font-size-adjust: 0.39}
#insidenav {line-height: 1.6; margin: 0 0 1em -2em; margin: 0 0 1em -2rem}
#insidenav a {padding: 0.1em 0.5em; white-space: nowrap;
  margin: -0.5px 0 0 -0.5px; font-size: 90%; border: thin solid;
  color: #135049; line-height: 1.8; border-radius: 1em; text-decoration: none}
.rightbar {margin: 0.3em 0 1.2em 2em; border-bottom: 2px solid #e2e2e2; float: right;
  clear: right; text-align: center; width: 15em; max-width: 40%; padding: 0 1em 1.5em}
img {max-width: 100%; height: auto}
img.icon {height: 0.7em; width: auto; vertical-align: baseline; line-height: 0.6}
address {border-top: thin solid; padding-top: 0.6em; clear: both; margin-top: 2.4em}
address img {float: right; margin: 0 0 1em 1em}
h2 {margin-left: -2rem}
h2, h3, caption {font: 1.5em League Gothic, LeagueGothicRegular, sans-serif;
  letter-spacing: 0.03em;
  text-transform: uppercase; color: #004480}
h2:first-line {font-size: 1.2em}
.rightbar h2, .rightbar p {margin: 0}
h3 {font-size: 1.2em}
h3::before {content: "\25FC\A0"; font-family: DejaVu Sans, sans-serif}
h3.sep::before {content: ""; content: none} /* Subtitle above another H3 */
h2 + h3 {margin-top: 1.2em}
table {border-collapse: collapse; background: #EEE; margin: 1em 0; hyphens: auto}
th {text-align: left}
td:first-child {width: 5em}
td, th {vertical-align: baseline}
td, th, caption {border: 2px solid white; border-style: solid none; padding: 0.4em}
td > *:first-child {margin-top: 0}
td > *:last-child {margin-bottom: 0}
caption {background: #F1F7FB; border-bottom: none}
/*
table.compact {background: none; border: none}
table.compact td, table.compact th {border: none; border-bottom: thin dotted;
  text-align: left; white-space: nowrap; padding: 0 0.3em; font-weight: normal}
*/
table:not(.rooms) th:nth-child(1) {width: 6.5em} /* Typically a timeslot*/
table:not(.rooms) th:nth-child(3) {width: 9em} /* Optional room # */
/* Keep the last two columns (room size and # observers) narrow: */
.rooms th, .rooms td {box-sizing: border-box}
.rooms tr > :nth-child(1) {width: 35%}
.rooms tr > :nth-child(2) {width: 25%}
.rooms tr > :nth-child(3) {width: 25%}
.rooms tr > :nth-child(4) {width: 10%}
.rooms tr > :nth-child(5) {width: 5%}
sup {line-height: 0}
sup a {color: inherit; text-decoration: none}
/* Make list bullet exactly left aligned: */
ul {padding: 0; margin: 0 0 0.6em 0; list-style: none}
ul > li {padding-left: 1em}
ul > li::before {content: "▪"; display: inline-block; width: 1em;
  margin-left: -1em}
ul.compact {columns: 14em; margin-top: 0.6em}
h1 abbr {text-decoration: none}
.break {display: block; font-weight: normal; margin: 1em 0}
a:link:hover, a:visited:hover {background: #DDD}

/* The week-at-a-glance table is as wide as possible and with equal columns */
#at-a-glance {font-size: 90%; table-layout: fixed; width: 100%}
@supports (width: calc(100% + 6rem)) {
  #at-a-glance {width: calc(100% + 6rem); margin-left: -4rem}
}
#at-a-glance td, #at-a-glance th {border-style: solid; width: auto}
#at-a-glance th:first-child {text-align: right}

@media screen {
  .print {display: none} /* Elements only meant for the paper version */
}


/* When the root's background appears at the sides, round the corners */
@media all and (min-width: 107em) {
  body {border-radius: 0.5em}
}

@media all and (min-width: 88em) {
  /* Enough space to fit the at-a-glance table next to the rightbars */
  #at-a-glance {width: calc(100% + 4rem - 15rem - 2rem - 2rem - 2px);
    float: left}
  #at-a-glance ~ h2 {clear: left}
}

@media all and (max-width: 67em) {
  h1 {font-size: 2em; padding-top: 1.3em}
}
@media all and (max-width: 47em) {
  h1 {padding-top: 0.5em}
}
@media screen and (max-width: 40em) {
  #logo img {width: 3.7em; border-width: 0 3em 0 35em}
  h1, h1 + p {clear: both; color: inherit; text-align: center}
  body {padding: 0 0.5em 2em 0.5em}
  #insidenav {margin: 1em -0.0em}
  h2 {margin-left: 0}
  h2, h3, caption {font-size: 1.2em}
  @supports (width: calc(100% + 1rem)) {
    #at-a-glance {width: calc(100% + 1rem); margin-left: -0.5rem}
  }
  th[abbr], td[abbr] {color: transparent; line-height: 0}
  th[abbr]::before, td[abbr]::before {content: attr(abbr) " ";
    color: #333; line-height: 1.3}
  td, th, caption {border-width: 1px; padding: 0.2em}
}
@media all and (max-width: 25em) {
  #at-a-glance thead, .rooms thead {font-size: smaller}
  /* Omit Estimated attendance & Observers on narrow screens */
  .rooms tr > :nth-child(4), .rooms tr > :nth-child(5) {display: none}
}
@media all and (max-width: 20em) {
  .rightbar {float: none; width: auto; max-width: none; margin-left: 0;
    padding: 0 0 1.5em 0}
  /* On such a narrow screen, the UA's default font is probably best... */
  html {font-size-adjust: none; font: medium sans-serif}
}

@page {
  /* size: a5; */
  margin: 1.15cm 0.8cm 1.15cm 0.8cm;
  counter-increment: page;
  font: normal 9pt/1.3 Gill Sans MT, Gill Sans, My Gill Sans, sans-serif;
  font-size-adjust: 0.45;
}
/* Put the current section title (i.e., the date) in the running header */
@page :left {
  @top-left {content: string(h2); font-style: italic}
  @bottom-left {content: counter(page)}
}
@page :right {
  @top-right {content: string(h2); font-style: italic}
  @bottom-right {content: counter(page)}
}
/* Omit running header from the first page */
@page :first {
  @top-right {content: none}
  @top-left {content: none}
}
@media print {
  html:root {background: none}	/* Increased specificity */
  html {overflow: visible; margin: 0; hyphens: auto}
  body {font-size: 9.5pt; line-height: 1.2; color: black; margin: 0;
    max-width: none; padding: 0; text-align: justify}
  h1, h1 + p, h2, h3, table {text-align: left}
  h1, h1 + p {position: relative; z-index: 1} /* for PDFReactor */
  h1 + p {font-family: inherit; font-style: italic; font-size-adjust: inherit}
  #insidenav {display: none}
  :link, :visited {color: inherit; text-decoration: none}
  #logo img {margin-right: 0; width: 4.5em; border-width: 0 3.5em 0 100em}
  h1, h1 + p {clear: none; padding-left: 10px; color: white}
  h1 {font-size: 2em}
  h2 {font-size: 1.2em; margin: 0.5em 0}
  body > h2 ~ h2 {border-top: 0.5em solid #004480; padding-top: 0.5em}
  .rightbar {background: white}
  h2 + h3 {margin-top: 0.6em}
  h3 {font-size: 1em; margin: 0.6em 0}
  p {margin: 0.6em 0}
  td p {margin: 0}
  th, td, .rightbar {page-break-inside: avoid}

  /* Two kinds of table: schedules (2 cols) and room assignments (5 cols) */
  table {width: 100%}
  table.rooms {table-layout: fixed; background: none; border: 1pt solid #004480}
  td, th, caption {border: solid 0.1pt black; border-style: solid none;
    padding: 0.15em 0.3em}
  caption {border-bottom: none}
  thead {font: 1em/1.1 League Gothic, LeagueGothicRegular, sans-serif;
    letter-spacing: 0.03em}
  .rooms tr > :nth-child(4), /* Estimated attendance */
  .rooms tr > :nth-child(5) { /* Observers */
    display: none}
  /* If the text in column 2 is narrow, do this: */
  .rooms th:nth-child(1) {width: 17em; /* WG name */
    width: calc(100% - 5.5em - 10.5em - 1.8em)}
  .rooms th:nth-child(2) {width: 5.4em}  /* Room location */
  .rooms th:nth-child(3) {width: 10.1em} /* Confidentiality */
  /* If the text in column 2 is wide, do this: */
  .rooms th:nth-child(1) {width: 15em; /* WG name */
    width: calc(100% - 9.5em - 9em - 1.8em)}
  .rooms th:nth-child(2) {width: 9.5em}  /* Room location */
  .rooms th:nth-child(3) {width: 9em} /* Confidentiality */

  x table:not(.rooms) {page-break-inside: avoid}
  table:not(.rooms) {background: #d8e6f2}
  table:not(.rooms) thead {background: white}
  table:not(.rooms) thead th {padding-top: 0}
  table:not(.rooms) td, table:not(.rooms) th, table:not(.rooms) caption {
    border-color: white; border-width: 1pt}
  x table.rooms thead {background: black; color: white}

  /* For running headers */
  h2 {string-set: h2 content()}

  /* Make sure two floor maps fit on a page */
  #map ~ p {text-align: center}
  #map ~ p img {max-height: 8.4cm}
  
  /* Suppress sponsor boxes but show the Twitter box */
  .rightbar {display: none}
  #microblog {display: block; margin: 0.6em 0 0.6em 1em; padding: 0 0 0.6em}
  #microblog h2 {display: none}

  /* Don't show who made this text or when */
  address {display: none}

  /* Save space */
  h2 br {display: none}

  /* Other elements not useful in print */
  .noprint {display: none !important}

  /* body {font-family: Times New Roman, Times, serif} /**/
  /* body {font-family: Helvetica, sans-serif} /**/
  /* body {x-font-size: 9pt; line-height: 1.1} /**/
}
