/*
  responsive.css - Radioator.dk (MINIMAL udgave)

  Formål: gøre sitet responsivt uden at ændre den oprindelige
  HTML/tabel-struktur. Bruger kendte CSS-only teknikker (billeder der
  skalerer, og tabel-celler der "stables" i stedet for at stå ved
  siden af hinanden) i stedet for at bygge om til flexbox/grid.

  Den eneste HTML-ændring nogen steder er ét ekstra class-navn
  ("ra-split-table") på tabellen der deler siden i sidebar + indhold,
  udelukkende for at kunne målrette den her - ingen anden markup er rørt.
*/

@import url(http://fonts.googleapis.com/css?family=Arimo:400,700,400italic,700italic|Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic);

img {
    max-width: 100%;
    height: auto;
}

embed,
iframe {
    max-width: 100%;
}

body {
    padding: 0 8px;
    box-sizing: border-box;
    font-family: 'Arimo', sans-serif;
}

.content-head,
.banner {
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

.content,
.content-bund,
.content-dato,
.sidemenu,
.sidemenu2,
.navigation,
.navigation a,
.Banner2,
.bund,
.dagsdato {
    font-family: 'Arimo', sans-serif;
}

.site,
.Main-Table {
    max-width: 1200px;
    width: 100% !important;
}

.site {
    margin: 0 auto 20px auto;
}

.Main-Table {
    margin: 0 auto;
}

@media (max-width: 800px) {
    .Main-Table {
        width: 100% !important;
    }
}

.ra-rounded {
    border-radius: 12px;
    overflow: hidden;
    padding-bottom: 20px;
    background-color: #FFFFFF;
}

.ra-copyright,
.bund {
    background-color: #dedebb;
}

.ra-content-frame {
    border: 2px solid #dedebb;
    background-color: #FFFFFF;
    padding: 0;
    margin-right: 15px;
    margin-bottom: 10px;
}

/*
  Overskrifts-baren (.content-head) skal fylde HELE boksens bredde OG
  toppen som en ren top-bar. Da .ra-content-frame's padding er fjernet
  helt (for at lade overskriften nå alle kanter), skal alt ANDET
  indhold i boksen selv have sin indrykning tilbage - undtagen selve
  overskriften. Bemærk: "margin" virker ikke på tabelceller (<td>) i
  nogen browser, derfor bruges padding i stedet for et
  negativt-margin-trick, som ikke ville have haft nogen effekt.
*/
.ra-content-frame > table td:not(.content-head) {
    padding-left: 10px;
    padding-right: 10px;
}

.ra-content-frame > table:first-of-type {
    margin-bottom: 10px;
}

.ra-content-frame .content-head {
    padding: 8px 10px;
    box-sizing: border-box;
}

@media (max-width: 700px) {
    .ra-content-frame {
        margin-right: 0;
    }
}

/* -------- Forsiden: fire kasser med automatisk lige højde -------- */

.ra-forsiden-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: 16px;
    margin: 16px 0;
    padding: 0 10px;
    box-sizing: border-box;
}

.ra-forsiden-item {
    min-width: 0;
}

.ra-forsiden-item .forsiden-tabel {
    height: 100%;
}

.ra-lyd-tabel {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.ra-lyd-tabel > * {
    padding: 3px;
}

.ra-lyd-tabel-content {
    flex: 1 1 auto;
}

@media (max-width: 600px) {
    .ra-forsiden-grid {
        grid-template-columns: 1fr;
    }
}

.navigation,
.navigation a {
    font-size: 12pt;
}

.content-head {
    font-size: 13pt;
}

.content {
    font-size: 12pt;
}

.content-bund {
    font-size: 11pt;
}

.content-dato {
    font-size: 10pt;
}

.sidemenu {
    font-size: 11pt;
}

.sidemenu2 {
    font-size: 11pt;
}

.banner {
    font-size: 12pt;
}

.Banner2 {
    font-size: 11pt;
}

.grinerbox {
    font-size: 12pt;
}

select {
    font-size: 12pt;
    font-family: 'Arimo', sans-serif;
}

/* -------- Navigation: burger-menu på mobil, vandret linje på desktop -------- */

.ra-nav-toggle-input {
    display: none;
}

.ra-nav-toggle-label {
    display: none;
    cursor: pointer;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    padding: 8px;
    margin: 4px 0;
    background-color: #dedebb;
    border: 1px solid #C0C0C0;
}

.ra-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline;
}

.ra-nav-list li {
    display: inline;
}

.ra-nav-list li::after {
    content: " \00b7 ";
}

.ra-nav-list li:last-child::after {
    content: "";
}

.ra-nav-list a {
    padding: 0 4px;
}

@media (max-width: 700px) {
    .ra-nav-toggle-label {
        display: block;
    }

    .ra-nav-list {
        display: none;
        flex-direction: column;
    }

    .ra-nav-list li {
        display: block;
        padding: 4px 0;
    }

    .ra-nav-list li::after {
        content: "";
    }

    .ra-nav-toggle-input:checked ~ .ra-nav-list {
        display: flex;
    }
}
@media (max-width: 700px) {
    .ra-split-table,
    .ra-split-table > tbody {
        display: block !important;
        width: 100% !important;
    }

    .ra-split-table tr {
        display: flex !important;
        flex-direction: column;
        width: 100% !important;
    }

    .ra-split-table td {
        display: block !important;
        width: 100% !important;
    }

    .ra-split-table td.sidemenu {
        text-align: left;
        order: 2;
    }

    .ra-split-table td.ra-content-col {
        order: 1;
    }
}