#debug_width {
  position:fixed;
  bottom: 50px;
  left: 10px;
  z-index: 500;
}


/* BODY */ 

body.um {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  height: 98%;
  background: #fcfcfc;
  line-height: 1.5em; 
  margin:0px;
  /*
  background: #fcfcfc url("/img/sea03.jpg") no-repeat fixed center;
  background-size: cover;
  background-image: url("../assets/background/26.jpg");
  */

  background: #fcfcfc url(/imgs/26.5ef5d7f74204e78159ee.jpg) no-repeat fixed center;
}


/* CHAPTER */

#um-chapter {
  max-width: 950px;
  margin: auto;
  margin-top: 0px;
  padding: 0;
  background: #fff;
  z-index: 300;
  box-shadow: 0 1px 4px rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.09);
  border-top: 0px;
  overflow: auto;
}


/* CONTENT */

#z-content {
  padding: 50px 50px 120px 50px;
  max-width: 750px;
}

#z-content ul {
  list-style-type: none;
  padding-left: 10px;
  padding-top: 0px;
  padding-bottom: 4px;
}


/* LOGO */ 
img#logo {
  padding: 30px 70px 30px 30px;
  width:110px;
  float:right;
  background: #fff;
}

/* TABLE */

table {
  border-collapse: collapse;
  padding-right: 50px;
}

table tbody tr.odd {
  background-color: #f7f7f7;
}

table tbody tr.even {
  background-color: none;
}

table tbody tr td {
  padding: 5px 10px;
  white-space: nowrap;
}

table thead tr th {
  padding: 5px 10px;
}

#um-strik{
  display:none;
}

/* MENU */

.um-menu {
  /*font-family: 'Atkinson Hyperlegible Next', sans-serif;*/
  text-transform: uppercase;
  font-size: .8em;
  letter-spacing: 3px;
  padding: 10px 0px 10px 50px;
  border-bottom: 1px solid rgba(0,0,0,.09);
}
.um-menu a {
  padding-right: 30px;
}
.um-menu a:last-child {
  padding-right: 0px;
}

/* CONTENT MENU */

#z-content > .um-menu a {
  display: block;
  margin-bottom: 10px;
}
#z-content > .um-menu {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  border-bottom: inherit;
  padding: 0;
}


/* A */

a:link, a:visited {
	color: #000;
  text-decoration: underline; 
}
a:hover {
	color: #000;
  text-decoration: underline; 
}

a:active {
	color:inherit;
	text-decoration: none;
}

.um-menu a {
	text-decoration: none;
}

/* TEXT */

.small {
  font-size: .875em;
}

.um h1 {
  /*font-family: medium-content-title-font,Georgia,Cambria,"Times New Roman",Times,serif;*/
  font-size: 1.7em;
  margin: 100px 0 60px 0;
  letter-spacing: 2px;
  line-height: 1.7em;
}

.um h2 {
  font-size: 1.5em;
  margin: 60px 0 20px 0;
  letter-spacing: 1px;
}

.um h3 {
  font-size: 1.1em;
  margin: 40px 0 15px 0;
  letter-spacing: 1px;
}

.um h4 {
  margin: 30px 0 15px 0;
  letter-spacing: 1px;
}

/* OTHER */

hr {
  border: 1px solid rgba(0,0,0,.09);
  margin: 30px 0px;
}

/* RENDER NEWS */
.render-news{
  margin-top: 50px;
  margin-bottom: 50px;
}
.render-news-box{
  min-height: 100px;
  border-top: 0px solid #eee;
  margin-bottom: 30px;
  margin-top: 30px;
  padding: 5px 10px 9px 0px;
}
.render-news-box .title{
  margin-top: 5px;
  margin-bottom: 10px;
  letter-spacing: 1.5px;
}
.render-news-box .date{
  color: #999;
  font-size: 0.875em;
  float: right;
  margin-left:5px;
}

/* RENDER COUNTDOWN */

.render-countdown {
  display: inline-block;
  border: 1px solid #eee;
  width: 150px;
  margin: 5px;
  padding: 10px;
  text-align: center;
  border-radius: 5px;
  border: 0px solid #eee;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}
.render-countdown .date{
  font-size: 0.875em;
}
.render-countdown .togo {
  font-weight: bold;
  font-size: 1.2em;
  padding: 30px 10px;
}



/* SPONSORS */
.facebook-link {
  margin: 50px 0;
}
.sponsors{
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  text-transform: uppercase;
  text-align: center;
  font-size: .8em;
  letter-spacing: 3px;
  padding: 10px 0px 10px 0px;
}
.sponsors a {
  display: inline-block;
	text-decoration: none;
  margin: 5px 20px;
}

/* FOOTER */
#footer {
  font-family: 'Atkinson Hyperlegible Next', sans-serif;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 3px;
  padding: 0px 0 40px 0;
  font-size: 0.8em;
}
#footer a {
	text-decoration: none;
}

@media (max-width: 700px) {
  /* LOGO */
  img#logo {
    display: none;
  }
}

@media (max-width: 570px) {
  /* LOGO */
  img.front-in-text {
    display: block;
    float: none;
    margin: 20px 0;
  }
}

@media (max-width: 470px) {
  /* MENU */

  .um-menu {
    font-size: 0.875em;
    padding: 10px 0px 10px 20px;
  }
  .um-menu a {
    padding-right: 20px;
  }

  /* The header's row stays one row at every phone width. Its links share out
     the width between the page's own 20px gutters, and the letter-spacing
     gives way before the row does: 3px from 390px up, easing to 1px at 330px.
     As inline links 20px apart the row needed 378px, and wrapped on a 375px
     phone.

     Only the header's menu: a `.um-menu` inside the content is a list of
     links, one to a line. */
  #um-chapter > .um-menu {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 20px;
    white-space: nowrap;
    letter-spacing: clamp(1px, calc((100vw - 300px) / 30), 3px);
  }
  #um-chapter > .um-menu a {
    padding-right: 0;
  }

  /* CONTENT */

  #z-content {
    padding: 50px 20px 120px 20px;
  }

  #z-content > .um-menu {
    font-size: inherit;
  }

  /* TEXT */

  /* On a phone the room around a page's heading is two fifths of what it is
     on a wide page: 10px above and 24px below, against 100px and 60px. That
     room lets a wide page breathe; on a 390px screen it put the first line of
     the content a third of the way down, and half way under a long heading.

     Its lines sit closer too, 1.35em against 1.7em. A heading that is one
     line on a wide page is three or four here, and at 1.7em a mót's name
     alone stood 185px tall.

     `tcm/style.css` says the same for `.tcm h1`, and the two must agree. */
  .um h1 {
    margin: 10px 0 24px 0;
    line-height: 1.35em;
  }

  /* IMG 

  
  img.front {
    float: unset;
  }
  
in imgs.css
  */

  /* TODO move to imgs.css */
  img.long {
    display: none;
  }
}

@media print {
  .um-menu,
  #um-submenu {
    display: none;
  }

  #um-strik {
    display: none;
  }

  #z-content {
    padding: 5px;
  }
  #um-chapter {
    padding: 5px;
    left: unset;
    width: unset;
    min-width: unset;
    border: unset;
    box-shadow: unset;
  }

  table {
    margin: unset;
    width: 100%;
  }

  body.um {
    background: unset;
    font-size: 0.9em;
  }

  .sponsors {
    display: none;
  }
}

/* Pictures the site itself draws.
 *
 * Only the news thumbnails are here. Everything inside a body TCM rendered —
 * the figures, the floats, the four names in `image_classes:` — is styled by
 * tcm/style.css, which TCM serves at /tcm/style.css so that the page and the
 * editor's preview read one file. A rule for those written here would apply on
 * the page and not in the preview, which is the one way the preview can lie.
 */

/* One per box in the news listing, beside its title and summary. */
img.list {
  height: 90px;
  float: left;
  margin: 0 25px 0 0;
  border-radius: 5px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

/* Too narrow to put text beside a thumbnail: it goes above the title instead. */
@media (max-width: 470px) {
  img.list {
    float: unset;
  }
}

.catalog {
  display: flex;
  justify-content: center; /* centers the whole row */
  gap: 20px; /* space between links */
  margin: 20px 0;
  font-size: .9em;
}

.catalog a {
  text-decoration: none;
  padding: 6px 10px;
}

.catalog a.year {
  color: #555;
}
.catalog a.year:first-of-type {
  padding-left:0;
}
frett-page .date {
    color: #999;
    font-size: 0.875em;
    /*float: right;
    margin-left: 5px;*/
    
}
/*
 * The mót tables.
 *
 * Everything is scoped under `.mot`, and that is not tidiness — `top20.css` in
 * this directory sets a border on a bare `td`, and a global rule from here
 * would restyle the TCM content pages the same way. These tables live inside
 * `<div class="mot">` and nothing outside it is touched.
 *
 * They are wide: the season championship is one column pair per mót, fourteen
 * of them in a full summer. So the table scrolls inside its own box rather than
 * making the page scroll sideways, and shrinks its type below 700px instead of
 * trying to reflow columns that mean nothing on their own.
 */

.mot {
  overflow-x: auto;
  margin-bottom: 2em;
}

.mot h2 {
  font-size: 1.1em;
  margin: 1.4em 0 0.4em;
}

.mot-table {
  border-collapse: collapse;
  font-size: 0.9em;
  white-space: nowrap;
  /* Every digit the same width, so a column of weights lines up by place. */
  font-variant-numeric: tabular-nums;
}

.mot-table th {
  text-align: left;
  font-weight: normal;
  color: #666;
  border-bottom: 1px solid #bbb;
  padding: 4px 10px 4px 0;
  vertical-align: bottom;
}

.mot-table td {
  padding: 3px 10px 3px 0;
  vertical-align: top;
}

.mot-table th.right,
.mot-table td.right {
  text-align: right;
}

.mot-table td.bold {
  font-weight: bold;
}

/* A group boundary — a new sveit, a new boat, a new prize. */
.mot-table tr.separator td {
  border-top: 1px solid #ddd;
  padding-top: 8px;
}

.mot-table tbody tr:hover td {
  background: #f6f6f6;
}

/* The tab bar, which is the old site's furniture and the quickest way for
   somebody who knows that site to recognise this one. */
.mot-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0.8em 0 1em;
  font-size: 0.9em;
}

.mot-tabs a {
  text-decoration: none;
  color: #555;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.mot-tabs a.active {
  color: #000;
  border-bottom-color: #888;
}

/* The season picker under Íslandsmeistari, and the seasons on the index. */
.mot-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 1em 0;
  font-size: 0.9em;
}

.mot-note {
  font-size: 0.9em;
  color: #666;
  margin: 0.6em 0 1.4em;
}

.mot-season-heading {
  font-weight: bold;
  padding-top: 10px;
}

@media screen and (max-width: 700px) {
  .mot-table {
    font-size: 0.875em;
  }
  .mot-table th,
  .mot-table td {
    padding-right: 6px;
  }
}

/* The results' own three-way nav, standing in for the old system's menu.
   Heavier than the tab bar below it, because it moves between three different
   pages rather than between views of one.

   It is drawn in `#um-submenu`, directly under the header's row, so it takes
   that row's side padding and its rule and reads as the second line of it. */
.mot-nav {
  padding: 10px 50px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

/* One row at every width. The three never wrap; what gives way on a narrow
   phone is the space between them, 22px from 368px up and 8px at its least. */
.mot-nav .mot-tabs {
  margin: 0;
  font-size: 1em;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(8px, calc((100vw - 280px) / 4), 22px);
}

@media (max-width: 470px) {
  .mot-nav {
    padding: 10px 20px;
  }
}

/* Skráning — the catch entry form.
   Inputs are narrow and right-aligned because they hold numbers read off a
   scale, and the eye checks a column of them against the paper beside it. */
.mot-picker {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 1em 0;
}

.mot-picker input {
  width: 5em;
  font-size: 1.2em;
  padding: 4px 6px;
}

.mot-entry input {
  width: 6em;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding: 2px 4px;
}

.mot-actions {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 1em;
}

.mot-actions button {
  padding: 6px 18px;
  font-size: 1em;
}

.mot-actions .mot-note {
  margin: 0;
  color: #a8461f;
}

/* Umsjón — setting a mót up. */
.mot-status { margin: 1.2em 0; }
.mot-switch { display: flex; align-items: baseline; gap: 12px; margin: 6px 0; }
.mot-switch button { padding: 4px 14px; }

.mot-results { display: flex; flex-direction: column; gap: 2px; margin: 6px 0 1em; }
.mot-results a { font-size: 0.9em; text-decoration: none; }

.mot-boatform { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 1em 0; }
.mot-boatform label { display: flex; flex-direction: column; font-size: 0.875em; color: #666; gap: 2px; }
.mot-boatform input { width: 8em; padding: 3px 5px; font-size: 1rem; }
.mot-boatform button { padding: 6px 16px; }

/*
 * The mót tables, version 2.
 *
 * These are the report rules from `mot.css` under their own names, and they
 * start out saying the same thing. The redesign rewrites them one report at a
 * time, and nothing here can reach a version 1 page: those tables live inside
 * `<div class="mot">` and these inside `<div class="mot2">`.
 *
 * The rules for Skráning and Umsjón are not copied. Those are forms behind the
 * sign-in rather than reports, and they stay with `mot.css`.
 */

.mot2 {
  overflow-x: auto;
  margin-bottom: 2em;
}

/* A group's heading: a team, a boat, a prize. The air above it is what
   separates one group from the last — the heading has grown lines under it,
   so a table reads as one block with its heading, and the gap between the
   blocks has to be plainly larger than anything inside one. The first on a
   tab needs less, as the tab row is above it. */
.mot2 h2 {
  font-size: 1.1em;
  margin: 2.2em 0 0.4em;
}

.mot2 h2:first-child {
  margin-top: 1em;
}

.mot2-table {
  border-collapse: collapse;
  font-size: 0.9em;
  white-space: nowrap;
  /* Every digit the same width, so a column of weights lines up by place. */
  font-variant-numeric: tabular-nums;
}

.mot2-table th {
  text-align: left;
  font-weight: normal;
  color: #666;
  border-bottom: 1px solid #bbb;
  padding: 4px 10px 4px 0;
  vertical-align: bottom;
}

.mot2-table td {
  padding: 3px 10px 3px 0;
  vertical-align: top;
}

.mot2-table th.right,
.mot2-table td.right {
  text-align: right;
}

.mot2-table td.bold {
  font-weight: bold;
}

/* The small grey lines under a row: a félag and a boat under a name. A row
   of their own, spanning to the table's edge, so a long line folds there
   rather than widening a column or running off a phone. Drawn tight under
   the row they belong to. */
.mot2-table tr.has-sub td {
  padding-bottom: 0;
}

.mot2-table tr.sub td {
  padding-top: 0;
  white-space: normal;
  font-size: 0.875em;
  color: #666;
}

/* Beside a group's heading, a little apart: a boat's registration. */
.mot2 h2 .mot2-beside {
  margin-left: 0.6em;
}

/* The rank in front of a group's heading, "1." before "Sveit 4": black, but
   in the ordinary weight, so the team or the boat carries the heading and
   the eye can run down the column of numbers. */
.mot2 h2 .mot2-rank {
  font-weight: normal;
  color: #000;
  margin-right: 0.5em;
}

/* A line within a group, under a table: the day a boat's crew fished, with
   that day's figures. Close under its table, and the air after it is what
   parts it from the next day's crew. */
.mot2 h3 {
  font-size: 0.95em;
  font-weight: normal;
  letter-spacing: normal;
  color: #666;
  margin: 0.4em 0 1.3em;
}

/* A line under a group's heading: a team's figures, a boat's captain. */
.mot2 h2 small {
  display: block;
  font-size: 0.875rem;
  font-weight: normal;
  letter-spacing: normal;
  color: #666;
}

/* The line that is main information rather than detail: a boat's captain,
   a winner's figures. */
.mot2 h2 small.mot2-main {
  color: #000;
}

/* A grey note after a cell's text: the félag after a name. */
.mot2-table td .note {
  color: #666;
}

/* A rounded figure with the exact one behind a tap. The dotted line is the
   one sign the site gives that there is more. */
.mot2-table td.exact {
  cursor: pointer;
  text-decoration: underline dotted #aaa;
  text-underline-offset: 3px;
}

/* A prize's title with "Sjá alla" after it, small and in the ordinary
   weight: a way on, not part of the title. After it rather than at the
   row's far end, which on a wide page is 400px from a table 370px wide. */
.mot2 h2.mot2-awards-head {
  display: flex;
  align-items: baseline;
  gap: 1.5em;
}

.mot2-awards-head a {
  font-size: 0.8rem;
  font-weight: normal;
  letter-spacing: normal;
  color: #555;
  white-space: nowrap;
}

/* On the prize sheet and the entry list a long name folds rather than
   pushing the figures or the boats off a phone: those are what the row is
   for. */
.mot2-figures td:nth-child(2),
.mot2-entries td:first-child {
  white-space: normal;
}

/* The prize sheet is one table a prize, fourteen of them one under another,
   so they are given the same width as the entry list's tables, 28em or the
   screen, and each figure column 3.5em, so the figures of one prize stand
   under the figures of the one above. The name takes what is left; wider
   figure columns made the names fold on a phone. */
.mot2-figures {
  width: min(100%, 28em);
}

.mot2-figures th.right,
.mot2-figures td.right {
  width: 3.5em;
}

/* The place in front, "10.", is right-aligned too, but as narrow as its
   widest number: the 3.5em is for the figures. So are the points columns
   on Stig, four or five of them of three digits at most, which at 3.5em
   left a name 104px on a phone. */
.mot2-figures th.right:first-child,
.mot2-figures td.right:first-child,
.mot2-stig th.right,
.mot2-stig td.right {
  width: 1%;
}

/* The entry list is one table a sveit, and they stand one under another,
   so they are given the same width and the same columns: 28em, or the
   screen when that is less, with 10em to the boat and the rest to the name.
   10em holds "Guðmundur Þór NS-121", a boat with its registration; the two
   boats of a crew that changed fold at the slash. */
.mot2-entries {
  width: min(100%, 28em);
}

.mot2-entries td:last-child {
  width: 10em;
  white-space: normal;
}

/* On a phone the boat column takes only what its text needs, and the name
   the rest: a fixed 10em left 50px blank at the right edge while the names
   folded on a 360px screen. The boat columns of the sveitir's tables then
   stand a little apart from each other, which is the lesser loss. */
@media (max-width: 470px) {
  .mot2-entries td:last-child {
    width: 1%;
    white-space: nowrap;
  }
}

/* A group boundary — a new sveit, a new boat, a new prize. */
.mot2-table tr.separator td {
  border-top: 1px solid #ddd;
  padding-top: 8px;
}

/* The tab bar above a table. */
.mot2-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin: 0.8em 0 1em;
  font-size: 0.9em;
}

.mot2-tabs a {
  text-decoration: none;
  color: #555;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.mot2-tabs a.active {
  color: #000;
  border-bottom-color: #888;
}

/* The rule between two groups in one row of tabs: the sexes, then the days. */
.mot2-tabs .divider {
  align-self: stretch;
  border-left: 1px solid rgba(0, 0, 0, 0.2);
}

/* The season picker under Íslandsmeistari. */
.mot2-seasons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin: 1em 0;
  font-size: 0.9em;
}

.mot2-note {
  font-size: 0.9em;
  color: #666;
  margin: 0.6em 0 1.4em;
}

/* Mótin — one summer's mót. */

/* The first group's heading sits straight under the bars, where there is no
   page heading above it to keep a distance from. */
.mot2-index > h2:first-child {
  margin-top: 0;
}

/* A group's heading keeps 14px to its list, twice what a heading in a mót's
   tables keeps to its table: there the heading is one of several on a page
   of figures; here it names the list that is the page. */
.mot2-index h2,
.mot2-group h2 {
  margin-bottom: 0.8em;
}

/* A list whose every row is one link. Laid out as a table so the dates and
   the places line up down the list, without being one: a table row cannot be
   a link, and a link in one cell is a small thing to hit with a thumb.

   Drawn by `mot2/list.ts`, for the index here and for the `mot-table` command
   on the written Mótin page, which wraps it in the same `mot2 mot2-index`. A
   change to these rules changes that page too, and it is a page in use. */
.mot2-list {
  display: table;
  border-collapse: collapse;
  /* 8px wider than the text on each side, which is the room the stripes
     below need: a tint that stops where the words start looks cut off. The
     words themselves stay on the page's own left edge, under the heading. */
  width: calc(100% + 16px);
  max-width: calc(30em + 16px);
  margin: 0 -8px;
}

/* The lists reach 8px into the gutter, and `.mot2` clips whatever leaves it
   so that a wide table scrolls. Nothing here is wider than the screen.
   `.mot2-index` is the Mótin page's own box; `.mot2-group` is one group drawn
   by a `mot-table` command inside an editor's body, where the words around
   it keep their own distances. */
.mot2-index,
.mot2-group {
  overflow-x: visible;
}

/* 32px under a group, before whatever the editor wrote next: a change of
   voice, from the site's list to the editor's words. */
.mot2-group {
  margin-bottom: 2em;
}

.mot2-row {
  display: table-row;
}

/* `a.` because the site's own `a:link` underlines, and outranks a bare class. */
.mot2 a.mot2-row {
  text-decoration: none;
}

/* 10px above and below a 24px line: a row 44px tall, which a thumb can hit. */
.mot2-row > span {
  display: table-cell;
  padding: 10px 14px 10px 0;
  border-top: 1px solid #eee;
  vertical-align: top;
}

.mot2-row > span:first-child {
  padding-left: 8px;
}

/* A rule under the last row as well, so the list is closed and not left
   open above whatever follows it. */
.mot2-row:last-child > span {
  border-bottom: 1px solid #eee;
}

/* Every second row very faintly tinted, to carry the eye from a date across
   to its félag. The grey the site's own striped tables use. */
.mot2-row:nth-child(even) > span {
  background: #f7f7f7;
}

/* 6em is "24.-25. apríl". The two groups are two lists, and without a floor
   under the date the places in a list of one-day mót start further left than
   the places in the list above it. */
.mot2-row-date {
  white-space: nowrap;
  min-width: 6em;
  font-variant-numeric: tabular-nums;
}

/* The place takes whatever width is left, and is the one cell that may fold,
   so a row is never wider than the screen. A place of several words folds
   between them; one long word is broken only when nothing else will do. */
.mot2-row > .mot2-row-place {
  width: 100%;
  overflow-wrap: anywhere;
}

/* Underlined, as a link is everywhere else on the site, so the row says it
   can be opened without the whole of it being underlined. */
.mot2 a.mot2-row .mot2-row-place {
  text-decoration: underline;
}

.mot2-row > .mot2-row-club {
  white-space: nowrap;
  text-align: right;
  color: #666;
  padding-right: 8px;
}

/* A mót with no results out: listed, and not a link. */
.mot2-row-off,
.mot2-row-off > .mot2-row-club {
  color: #999;
}

/* Darker than the stripe, or hovering a striped row would show nothing. */
.mot2 a.mot2-row:hover > span {
  background: #ececec;
}

/* Under 360px a row of full size no longer fits on one line: "24.-25. apríl",
   "Vestmannaeyjar" and "Sjóskip" need 294px and a 320px screen has 278px. A
   little off the type and the gaps keeps it to one line there. */
@media (max-width: 359px) {
  .mot2-list {
    font-size: 0.9375em;
  }
  .mot2-row > span {
    padding-right: 8px;
  }
}

@media screen and (max-width: 700px) {
  .mot2-table {
    font-size: 0.875em;
  }
  .mot2-table th,
  .mot2-table td {
    padding-right: 6px;
  }
}

/* The results' own three-way nav. Heavier than the tab bar below it, because
   it moves between three different pages rather than between views of one.

   It is drawn in `#um-submenu`, directly under the header's row, so it takes
   that row's side padding and its rule and reads as the second line of it. */
.mot2-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.09);
}

/* One row at every width. The three never wrap; what gives way on a narrow
   phone is the space between them, 22px from 368px up and 8px at its least. */
.mot2-nav > .mot2-tabs {
  margin: 0;
  padding: 10px 50px;
  font-size: 1em;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(8px, calc((100vw - 280px) / 4), 22px);
}

/* "Sumarið" and the box of years: a third bar under the menu, at every
   width, with the same rule above it as the menu has below. It was at the
   right end of the menu's row on a wide page for a day, and moved to be in
   one place whatever the screen. */
.mot2-season {
  flex-basis: 100%;
  padding: 0 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
  white-space: nowrap;
}

.mot2-season label {
  cursor: pointer;
}

/* The native box without its border or background, so that it reads as a
   word in the bar, with its own chevron: a borderless select has none on an
   iPhone, and a year with nothing after it does not look like a choice. 1em
   and not smaller: under 16px a phone zooms the page in when it is touched. */
.mot2-season select {
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  font-size: 1em;
  color: #000;
  border: 0;
  border-radius: 0;
  padding: 10px 18px 10px 6px;
  background: transparent
    url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2710%27 height=%276%27 viewBox=%270 0 10 6%27%3E%3Cpath d=%27M1 1l4 4 4-4%27 fill=%27none%27 stroke=%27%23555%27 stroke-width=%271.5%27/%3E%3C/svg%3E")
    no-repeat right center;
  cursor: pointer;
}

/* A page's own tabs as a third row, where Mótin has its summer: the same
   padding and rule. One row at every width: a mót's five — Keppendur,
   Verðlaun, Sveitir, Bátar, Stig — are 287px of type at 16px, and on a
   phone they share out the width between the gutters, the type easing down
   to 13.5px on a 320px screen, where 16px would not fit even with no space
   between them. */
.mot2-tabrow {
  flex-basis: 100%;
  padding: 10px 50px;
  border-top: 1px solid rgba(0, 0, 0, 0.09);
}

.mot2-tabrow .mot2-tabs {
  margin: 0;
  font-size: 1em;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 22px;
}

/* The line under a mót's heading: the kind of mót, the dates, the félag.
   Pulled up against the heading, whose own margin is for what comes after a
   heading, not for a line that belongs to it. */
.mot2-sub {
  color: #666;
  /* 10px under the heading: the heading's margin is 60px on a wide page and
     24px on a phone, in for-all.css and for-470.css. */
  margin: -50px 0 2em;
}

@media (max-width: 470px) {
  .mot2-sub {
    margin: -14px 0 1.5em;
  }
}

@media (max-width: 470px) {
  .mot2-nav > .mot2-tabs {
    padding: 10px 20px;
  }
  .mot2-season,
  .mot2-tabrow {
    padding-left: 20px;
    padding-right: 20px;
  }
  .mot2-tabrow .mot2-tabs {
    gap: 22px;
    font-size: clamp(13.5px, 4.1vw, 16px);
  }
  /* Only a row of four or more shares out the width; Karlar and Konur stay
     together on the left, as two words rather than two corners. */
  .mot2-tabrow .mot2-tabs:has(> a:nth-child(4)) {
    justify-content: space-between;
    gap: 8px;
  }
}

i18n-el div {
  margin: 1rem 0;
}



i18n-el .language-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Center the whole block but keep items left-aligned */
  width: max-content;
  /*margin-left: auto;
  margin-right: auto;*/
  align-items: flex-start;
}