/*	Intention: provide a smooth, jump-free transition "from Cinemascope down to a cash-register receipt".
**
**	We base everything around having at least 18em to be able to present a text in a reasonable way.
**  This applies to our shorthands (.half and .third), to aside and the layout of tables
*/
/*	'aside': float to the right and take up to a third of the screen down to a screen width of 54em;
**	after that, because we want to have a minimum with of 18em, one third of the screen is not
**	enough, so we don't float and clear the fixed width
*/
aside {
  float: right;
  margin: 0 0 1em 1.5em;
  max-width: 33.33%;
}

@media (max-width: 60em) {
  aside {
    max-width: 18em;
  }
}
@media (max-width: 40em) {
  aside {
    float: none;
    max-width: unset;
    margin-left: 0;
  }
}
/*  Disappearing columns
*/
@media (max-width: 90em) {
  tr .screen-90em {
    display: none;
  }
}
@media (max-width: 85em) {
  tr .screen-85em {
    display: none;
  }
}
@media (max-width: 80em) {
  tr .screen-80em {
    display: none;
  }
}
@media (max-width: 75em) {
  tr .screen-75em {
    display: none;
  }
}
@media (max-width: 70em) {
  tr .screen-70em {
    display: none;
  }
}
@media (max-width: 65em) {
  tr .screen-65em {
    display: none;
  }
}
@media (max-width: 60em) {
  tr .screen-60em {
    display: none;
  }
}
@media (max-width: 55em) {
  tr .screen-45em {
    display: none;
  }
}
@media (max-width: 50em) {
  tr .screen-50em {
    display: none;
  }
}
@media (max-width: 45em) {
  tr .screen-45em {
    display: none;
  }
}
@media (max-width: 40em) {
  tr .screen-40em {
    display: none;
  }
}
@media (max-width: 35em) {
  tr .screen-35em {
    display: none;
  }
}
@media (max-width: 30em) {
  tr .screen-30em {
    display: none;
  }
}
@media (max-width: 25em) {
  tr .screen-25em {
    display: none;
  }
}
@media (max-width: 20em) {
  tr .screen-20em {
    display: none;
  }
}
@media (max-width: 15em) {
  tr .screen-15em {
    display: none;
  }
}
/*  Collapsing tables (switching back on any 'disappeared' columns--see above)
*/
table.screen-90em label, table.screen-85em label, table.screen-80em label, table.screen-75em label,
table.screen-70em label, table.screen-65em label, table.screen-60em label, table.screen-55em label,
table.screen-50em label, table.screen-45em label, table.screen-40em label, table.screen-35em label,
table.screen-30em label, table.screen-25em label, table.screen-20em label, table.screen-15em label,
td .caption {
  display: none;
}

@media (max-width: 90em) {
  table.screen-90em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-90em thead {
    display: none;
  }
  table.screen-90em tr, table.screen-90em th, table.screen-90em td, table.screen-90em td .caption {
    display: block;
  }
  table.screen-90em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-90em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 85em) {
  table.screen-85em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-85em thead {
    display: none;
  }
  table.screen-85em tr, table.screen-85em th, table.screen-85em td, table.screen-85em td .caption {
    display: block;
  }
  table.screen-85em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-85em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 80em) {
  table.screen-80em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-80em thead {
    display: none;
  }
  table.screen-80em tr, table.screen-80em th, table.screen-80em td, table.screen-80em td .caption {
    display: block;
  }
  table.screen-80em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-80em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 75em) {
  table.screen-75em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-75em thead {
    display: none;
  }
  table.screen-75em tr, table.screen-75em th, table.screen-75em td, table.screen-75em td .caption {
    display: block;
  }
  table.screen-75em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-75em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 70em) {
  table.screen-70em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-70em thead {
    display: none;
  }
  table.screen-70em tr, table.screen-70em th, table.screen-70em td, table.screen-70em td .caption {
    display: block;
  }
  table.screen-70em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-70em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 65em) {
  table.screen-65em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-65em thead {
    display: none;
  }
  table.screen-65em tr, table.screen-65em th, table.screen-65em td, table.screen-65em td .caption {
    display: block;
  }
  table.screen-65em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-65em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 60em) {
  table.screen-60em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-60em thead {
    display: none;
  }
  table.screen-60em tr, table.screen-60em th, table.screen-60em td, table.screen-60em td .caption {
    display: block;
  }
  table.screen-60em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-60em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 55em) {
  table.screen-55em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-55em thead {
    display: none;
  }
  table.screen-55em tr, table.screen-55em th, table.screen-55em td, table.screen-55em td .caption {
    display: block;
  }
  table.screen-55em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-55em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 50em) {
  table.screen-50em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-50em thead {
    display: none;
  }
  table.screen-50em tr, table.screen-50em th, table.screen-50em td, table.screen-50em td .caption {
    display: block;
  }
  table.screen-50em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-50em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 45em) {
  table.screen-45em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-45em thead {
    display: none;
  }
  table.screen-45em tr, table.screen-45em th, table.screen-45em td, table.screen-45em td .caption {
    display: block;
  }
  table.screen-45em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-45em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 40em) {
  table.screen-40em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-40em thead {
    display: none;
  }
  table.screen-40em tr, table.screen-40em th, table.screen-40em td, table.screen-40em td .caption {
    display: block;
  }
  table.screen-40em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-40em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 35em) {
  table.screen-35em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-35em thead {
    display: none;
  }
  table.screen-35em tr, table.screen-35em th, table.screen-35em td, table.screen-35em td .caption {
    display: block;
  }
  table.screen-35em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-35em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 30em) {
  table.screen-30em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-30em thead {
    display: none;
  }
  table.screen-30em tr, table.screen-30em th, table.screen-30em td, table.screen-30em td .caption {
    display: block;
  }
  table.screen-30em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-30em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 25em) {
  table.screen-25em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-25em thead {
    display: none;
  }
  table.screen-25em tr, table.screen-25em th, table.screen-25em td, table.screen-25em td .caption {
    display: block;
  }
  table.screen-25em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-25em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 20em) {
  table.screen-20em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-20em thead {
    display: none;
  }
  table.screen-20em tr, table.screen-20em th, table.screen-20em td, table.screen-20em td .caption {
    display: block;
  }
  table.screen-20em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-20em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 15em) {
  table.screen-15em {
    border-collapse: separate;
    caption-display: block;
    caption-border-bottom-width: 1px;
    caption-border-radius: 4px;
  }
  table.screen-15em thead {
    display: none;
  }
  table.screen-15em tr, table.screen-15em th, table.screen-15em td, table.screen-15em td .caption {
    display: block;
  }
  table.screen-15em tr {
    border-radius: 4px;
    margin-top: 1em;
    border: dotted 1px black;
  }
  table.screen-15em td {
    text-align: left;
    border-color: transparent;
  }
}

@media (max-width: 90em) {
  table.screen-90em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 85em) {
  table.screen-85em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 80em) {
  table.screen-80em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 75em) {
  table.screen-75em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 70em) {
  table.screen-70em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 65em) {
  table.screen-65em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 60em) {
  table.screen-60em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 55em) {
  table.screen-55em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 50em) {
  table.screen-50em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 45em) {
  table.screen-45em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 40em) {
  table.screen-40em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 35em) {
  table.screen-35em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 30em) {
  table.screen-30em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 25em) {
  table.screen-25em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 20em) {
  table.screen-20em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}

@media (max-width: 15em) {
  table.screen-15em.collapse-rows td {
    display: inline-block;
    border: dotted 1px gray;
    margin: 1px;
    border-radius: 3px;
  }
}