/* Use a color from the logo for the background gradient */
html {background: fixed linear-gradient(to bottom, #000, #b84226)}

/* The banner has the logo on the left against a background with a
   white star burst on light gray */
#logo img {float: left; border: none; padding: 1em 100em 1em 4em;
  margin: 0 -97em 0 -7.5em;
  background: 1.55em 0 no-repeat url(TPAC-banner.png) #F0F0F0;
  background: 0 100% / 100% 1ex no-repeat linear-gradient(#005A9C,#005A9C),
    3.05em 0 / auto 100% no-repeat url(TPAC-banner.png), 0 0 / 100% 100%
    radial-gradient(at 6.5em 95%, #F9F9F9, #E6E6E6) #F0F0F0}
h1, h1 + p {color: #005A9C}
h1 + p::after, h2, #insidenav {clear: left}

/* Sponsor logo size limits in the rightbar boxes */
.rightbar small img {max-height: 4em; max-width: 45%}

/* The room numbers are very wide, but there is rarely an access
   restriction, and no observers columns */
.rooms tr > :nth-child(1) {width: 40%}
.rooms tr > :nth-child(2) {width: 35%}
.rooms tr > :nth-child(3) {width: 15%}
.rooms tr > :nth-child(4) {width: 10%}

/* The table with Wifi/IRC passwords on the right */
.rightbar table.compact {width: 100%}
table.compact.compact th, table.compact.compact td {width: auto;
  padding: 0.1em 0.2em; text-align: left}
    
/* Layout for the floor plans */
#map {page-break-before: left}
#map ~ table {float: left; margin: 0 2em 0.6em 0; width: auto}
#map ~ * th, #map ~ * td {width: auto; padding: 0 0.3em; /*border: none*/}
#level3 {background: #fbd6a4}
#level2 {background: #dddedd}
#level1 {background: #ffe595}
#level0 {background: #976743; color: #fff}
#level-1 {background: #cbad76}
#level-2 {background: #ec8930}
#map ~ p {text-align: right; margin: 0}
#map ~ * span {display: inline-block; font-style: italic;
  vertical-align: middle; min-width: 6em}
#map ~ * img {vertical-align: middle}
#map ~ * a {text-decoration: none}

.rooms td:nth-child(2) {hyphens: none}  /* Room location */

@media print {
  #map ~ table {margin-right: 1em}

  #floorplan h2 {display: none}
  #roseraie img {width: 13em /*16em*/}
  #saint-clair img {width: 13em /*16em*/}
  #rhone-pasteur img {width: 19.5em /*24em*/}
  #terreaux img {width: 22em /*27em*/}
  #forums img {width: 27.5em /*34em*/}
  #rhone-pasteur span, #terreaux span {display: block; margin-top: -2.4em}
  #forums span {display: block; margin-top: -1.5em}

  /* Trying different sizes for the columns */
  .rooms th:nth-child(1) {width: 14.9em; /* WG name */
    width: calc(100% - 13.5em - 5.5em - 1.8em)}
  .rooms th:nth-child(2) {width: 13.6em}  /* Room location */
  .rooms th:nth-child(3) {width: 5.5em} /* Confidentiality */

  /* The sponsor is printed as well */
  .rightbar {display: block; margin: 0.6em 0 0.6em 1em; padding: 0 0 0.6em}
  .sponsor {display: block}

  /* Align the top of the first rightbar to the top of the H2 on the left */
  #insidenav + .rightbar {margin-top: 1em}

  /* Start Monday after the side bars (.rightbar) */
  #Monday {clear: right}
}

@media screen and (max-width: 40em) {#logo img {margin-left: -4.2em}}

/* Horizontal menu, right aligned, no borders */
#insidenav {float: right; margin: 1em 0 2em 2em; line-height: inherit;
  text-align: right; max-width: 70%}
#insidenav a {margin: 0; padding: 0; border: none; color: #015CA4;
  border-radius: 0; line-height: inherit}
#insidenav a + a::before {content: "\2002\b7\2002\a0"}
/* Avoid Gill Sans for middle dots, they are not properly centered. :-( */
#insidenav a + a::before {font-family: LeagueGothicRegular, sans-serif}

/* For the photo and the address of the venue */
.photo-and-text {background: #EEE; border-radius: 0.4em; text-align: center}
.photo-and-text > * {margin: 0}
.photo-and-text img {vertical-align: bottom; border-radius: 0.4em;
  max-height: 10em /* assuming the address takes no more than this */}
.photo-and-text > * + * {padding: 0.5em}

/* Unless the window is very narrow, keep the photos of the electrical plugs
   on one line and put the venue address next to its photo: */
@media (min-width: 40em) {
  #plugs {display: table; margin: 1.3em auto;	text-align: center}
  #plugs figure {display: table-cell}
  .photo-and-text {text-align: left}
  .photo-and-text > * {display: table-cell; vertical-align: middle}
  .photo-and-text > * + * {padding-left: 2em}
}

/* Banner aligned to text in print, and blue rule same as above H2s */
@media print {
  #logo img {width: 5em; padding: 0.5em 100em 1em 0.5em; margin: 0 -97em 1em 0;
    /* Prince 11 has trouble with the radial-gradient, so omit it */
    background: 0 100% / 100% 0.5em no-repeat linear-gradient(#004480,#004480),
      0 0 / auto 100% no-repeat url(TPAC-banner.png), #F0F0F0}
  h1 {padding-top: 0}
}

/* Tweak the columns of the table of hotels. */
#hotels {table-layout: fixed; width: 100%}
#hotels th:nth-child(1) {width: 12%}
#hotels th:nth-child(2) {width: 14%}
#hotels th:nth-child(3) {width: 8%}
#hotels th:nth-child(4) {width: 14%}
#hotels th:nth-child(5) {width: 10%}
#hotels th:nth-child(6) {width: 20%}
#hotels th:nth-child(7) {width: 22%}
#hotels2 {table-layout: fixed; width: 100%}
#hotels2 col:nth-child(1) {width: 12%}
#hotels2 col:nth-child(2) {width: 12%}
#hotels2 col:nth-child(3) {width: 18%}
#hotels2 col:nth-child(4) {width: 10%}
#hotels2 col:nth-child(5) {width: 10%}
#hotels2 col:nth-child(6) {width: 10%}
#hotels2 col:nth-child(7) {width: 14%}
#hotels2 col:nth-child(8) {width: 14%}

/* Add a big curly brace on the left of cells that span multiple rows */
#hotels td[rowspan], #hotels2 td[rowspan] {vertical-align: middle;
  padding-left: 33px;
  background: /* top: */
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAANCAYAAABCZ/VdAAAAqklEQVQ4y62TXQ3AIAyEqwAFOEABwRcOUIADHOAACTjAARa6HAnJxrLf9OFCCOUrvVJqrTEUY2TvPZdSuPcuItpvANZaD6WUZOEQqjDGMBGxc45rrXLwWYFSaiTA+tcqujpADwCf+pOA7g7h/YSjgq8W3cJDCIfXowdicDR3D4e+/CJ6CrDWHuCwSgyOwVpf/7a5j3DYsMKRUASecz7BYZUIfAQtcEzwm3sb0SfhkUO4/NAAAAAASUVORK5CYII=)
    0% 0% no-repeat, /* bottom: */
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAANCAYAAABCZ/VdAAAAoElEQVQ4y63TYQ2AIBQE4JeABDQgAcVoQAIa0IAGRKABDaiAOzY2FRVk78f902/nIVRKqV/JOVciukQpVWfvITR7IIQw4FprHtx7P+DGGB4c0B2PMfLgmOAMSymX4CmeUhpaYyYW3Fq7dZBLOCbosBCifQkLfm+9eohTHBCa9sY78COOG4kb2Df+O8UrjobYGfnzV7ziaIo459qF2Z3gKQfWBuEBcScXVQAAAABJRU5ErkJggg==)
    0% 100% no-repeat, /* middle: */
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAZCAYAAADaILXQAAAAxUlEQVRIx82WYQ3EIAyFqwAFOEABwRcOUIADHOAACTjAARa4vB9cxlhyy65N9uNlWbJ90FfaQr338UvGmEFEi+78R3c+stZu8JwzD9x7v8FTSjzwUsoGx4IscEhrvcBhFRscNpx331rjgUPOuQUeQuCD11qHUuoLh1Vs8Kvkxhj54HOBGQGeeGeDT4tmDlDBV8l9DD+eIngPnSP4G360CoWFHCAK6J07F/Nc7LSInXPRChXrLaJdUayfi04i0RkqOv2f3ls+LBRvfizgHh0AAAAASUVORK5CYII=)
    0% 50% no-repeat, /* vertical: */
    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAFOCAYAAABt3IYrAAAAjUlEQVR42u3MoQEAMAzDsPx/bF7Y0FDBeoCAoZW251eS0eqDw+FwOBwOh8PhcDgcDofD4XA4HA6Hw+FwOBwOh8PhcDgcDofD4XA4HA6Hw+FwOBwOh8PhcDgcDofD4XA4HA6Hw+FwOBwOh8PhcDgcDofD4XA4HA6Hw+FwOBwOh8PhcDgcDofD4XA4HA5/XWUiaWglNRgbAAAAAElFTkSuQmCC)
    0% 0% / 23px 100% no-repeat, #EEE}
#hotels td[rowspan] + td[rowspan] {background: none; padding-left: 0.4em}

@media all and (min-width: 88em) {
  /* No hyphenation in table header cells */
  th {hyphens: none}
}
@media screen and (max-width: 67em) {
  /* Make first hotels table more readable on small screens. */
  td, th {padding: 0.1em}
  #hotels tr {border-top: 2px solid white; border-bottom: 2px solid white}
  #hotels td, #hotels th, #hotels2 td, #hotels2 th {border: none}
  #hotels td:nth-child(-n+3), #hotels th:nth-child(-n+3) {display: block;
    width: auto}
  #hotels td:nth-child(1) {font-weight: bold}
  #hotels td:nth-child(3) {font-style: italic}

  /* Make second hotels table readable. The deadline, conditions and
   cancellation are put above the hotel name, the address and access
   below it, and the rates in two columns below that. */
 @supports (grid: "a a") {
  #hotels2 {background: none}
  #hotels2 thead {display: none}
  #hotels2, #hotels2 tbody, #hotels2 tr {display: block}
  /* Remove big curly brace: */
  #hotels2 td[rowspan] {padding-left: 0; background: none}
  /* Don't replace content with abbreviation: */
  #hotels2 td[abbr] {color: inherit; line-height: inherit}
  /* Don't set width of first column: */
  #hotels2 td:first-child {width: auto}
  #hotels2 tbody tr {display: grid;
    grid: "a a"
	  "b b"
	  "c c"
	  "d d"
	  "e e"
	  "f f"
	  "g h";}
  #hotels2 td:nth-child(1) {grid-area: d; margin-top: 0.65em; font-weight: bold}
  #hotels2 td:nth-child(2) {grid-area: e}
  #hotels2 td:nth-child(3) {grid-area: f; font-style: italic}
  #hotels2 td:nth-child(4) {grid-area: g}
  #hotels2 td:nth-child(4)::before {content: "Week rate:\A"}
  #hotels2 td:nth-child(5) {grid-area: h}
  #hotels2 td:nth-child(5)::before {content: "Weekend rate:\A"}
  #hotels2 td:nth-child(6) {grid-area: a}
  #hotels2 td:nth-child(6)::before {content: "Deadline: "; font-weight: bold}
  #hotels2 td:nth-child(7) {grid-area: b}
  #hotels2 td:nth-child(7)::before {content: "Payment conditions: ";
    font-weight: bold}
  #hotels2 td:nth-child(8) {grid-area: c}
  #hotels2 td:nth-child(8)::before {content: "Cancellation policy: ";
    font-weight: bold}
  #hotels2 td::before {white-space: pre-line}
  #hotels2 td:nth-child(1), #hotels2 td:nth-child(2), #hotels2 td:nth-child(3),
  #hotels2 td:nth-child(4), #hotels2 td:nth-child(5) {background: #eee;
    padding: 0.2em}
 }
}