#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;
}

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

.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;
}

/* 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;
}

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

/* 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 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 dropdown that picks the summer. 1em and not smaller: under 16px a phone
   zooms the page in when the control is touched. */
.mot2-season {
  font: inherit;
  font-size: 1em;
  color: #000;
  background: #fff;
  border: 1px solid #bbb;
  border-radius: 4px;
  padding: 6px 10px;
}

/* 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 {
  overflow-x: visible;
}

.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 {
  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. */
.mot2-nav .mot2-tabs {
  margin: 0;
  font-size: 1em;
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: clamp(8px, calc((100vw - 280px) / 4), 22px);
}

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

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;
}