/* ==== VARIABLER ====================================================================== */
/* Opprette vars til alle farver og evt. andre ting */
:root {
  --darkblue: #023f72;
  --darkerblue: #02276b;
}
/* ------------------------------------------------------------------------------------- */

/* ==== TEXT RESIZER/FONT SELECTOR ===================================================== */
/* Text Resizer knapper */
.textresizer {
  float: right;
  margin-top: 10px;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  filter: invert(90%);
} .textresizer a {
  border-bottom: unset;
} .textresizer:hover {
  filter: none;
}
/* ------------------------------------------------------------------------------------- */




/* ==== FORSIDE ======================================================================== */
/* FORSIDE: Categories/Pills under hver artikel */
aside.cats {
cursor: auto; }
  aside.cats ul {
  padding-left: unset;
  margin: unset; }
    aside.cats li {
    font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    color: #000000;
    display: inline-block;
    background-color: rgba(0, 0, 0, .06);
    border: rgba(0, 0, 0, .06) solid 1px;
    border-radius: 15px;
    margin-top: .6em;
    padding-left: 10px;
    padding-right: 10px;
    list-style-type: none;
    font-size: 0.7em;
    font-weight: 400; }
      aside.cats li:hover {
        background-color: #ffffff;
        border: #4e4e4e solid 1px;}
          aside.cats a.link, a:visited, a:hover {
          color: #000000; }

          #nav_cat_archive > li > ul > li > a:hover {
            color: #000000 !important;
            border-bottom: #000000 solid 1px; 
          }
/* ------------------------------------------------------------------------------------- */



/* ==== LINKS, STYLES ================================================================== */
p a:link, p a:visited {
  /* color: #000000; */
  color: var(--darkerblue);
  /* font-weight: 400; */
} p a:hover {
  /* font-weight: 400; */
  border-bottom: var(--darkerblue) solid 1px;
} p a:active {
  background-color: #d1d1d4;
}

/* Links i ULs i intro-sektionen af artikler. Pænere med en border men normal font-weight! */
#intro > ul > li > a {
  color: var(--darkerblue);
  /* border-bottom: #023f72 solid 1px; */
} #intro > ul > li > a:hover {
  border-bottom: var(--darkerblue) solid 1px;
}

/* Links i ULs i artikler.  */
article > #body > ul > li > a {
  /* font-weight: 400; */
  color: var(--darkerblue);
} article > #body > ul > li > a:hover {
  border-bottom: var(--darkerblue) solid 1px;
}

/* Links i OLs i artikler.  */
article > #body > ol > li > a {
  font-weight: 400;
  color: var(--darkerblue);
} article > #body > ol > li > a:hover {
  border-bottom: var(--darkerblue) solid 1px;
}


/* 
#main > .inner > article > #body > ul > li > a:link, #main > .inner > article > #body > ul > li > a:visited {
  border-bottom: none;
} #main > .inner > article > #body > ul > li > a:hover {
  border-bottom: #000000 solid 1px;
} #main > .inner > article > #body > ul > li > a:active {
  background-color: #d1d1d4;
} */

/* ------------------------------------------------------------------------------------- */



/* Forside: Fuld bredde af siden, modsat herunder hvor den er smallere = lettere at læse brødteksten */
#main > .inner > section.forside {
  margin-left: unset;
  margin-right: unset;
  padding-top: 1em;
}

/* Styles til font chooser */
.sans-font {
  font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
}

.serif-font {
  font-family: 'Noto Serif', serif !important;
}


/* Brødtekst <article> section */
#main > div > article {
  font-family: 'Noto Serif', serif;
  font-weight: 400;
  font-size: 1.1em;
  text-align: left;
  color: #000000;
  padding-top: 1em !important;

  /* Text Rendering af brødtekst */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased !important;

  /* Afstand mellem linjer */
  line-height: 165%;
}

/* Brødtekst <article> section ved devices over 1000px bredde */
@media only screen and (min-width: 1000px) {
  #main > div > article {
    margin-left: 7rem;
    margin-right: 7rem;
  }
}



/* Fed tekst gøres helt sort ved "Note: xxx" og "Tip: xxx" sektioner */
#main > div > article strong {
  color: #000000;
}

/* Afstand mellem paragraphs */
#main > div > article p {
  margin-bottom: 1em;
}

/* Ingen margin under p's ved blockquotes (ophæver foregående margin-bottom men kun ved blockquotes) */
#body > blockquote > p {
  margin-bottom: -0.5em !important;
}

/* ------------------------------------------------------------------------------------- */



/* ==== FORSIDE ======================================================================== */
/* Forside - generelt */
  #main > div > section {
    font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 400;
    font-size: 1.1em;
    text-align: left;
    color: #000000;
    padding-top: 1em !important;

    /* Text Rendering af brødtekst */
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased !important;

    /* Afstand mellem linjer */
    line-height: 160%;
    
    /* Brødgekst smallere = lettere at læse */
    margin-left: 7rem;
    margin-right: 7rem;
  }

/* FORSIDE: Main Content - lidt mere luft mellem logo og content */
  .posts {
    margin-top: 10px;
  }

  /* FORSIDE: Overskrifter for de ni artikler */
  .forside .posts article h1 {
    font-size: 1em;
    margin-bottom: unset;
    padding-bottom: 1em;
  }

  /* FORSIDE: Slug-tekst (under de enkelte posts på forsiden) */
  #main .inner section .posts article p {
    font-size: 0.85em;
    line-height: 150%;
    margin-bottom: 1em;
  }

  /*  FORSIDE: Info-text under entries - categories, date, edit date osv. */
  #main .inner section.forside .posts article section.info p {
    font-size: 0.7em;
    font-weight: 400;
    margin-top: -0.5em;
  }

  /* FORSIDE: Side med artikler i samme kategori - ingen rød linje under h3 */
  #main > div > section > header > h3 {
    border-bottom: unset;
    padding-bottom: unset;
    margin-bottom: unset;
  }

  /* FORSIDE: Side med artikler i samme kategori - font for den valgte kategori af posts */
  #main > div > section > header > h3 > span.catname {
  font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  }

  /* FORSIDE: Side med artikler i samme kategori - simpel HR uden padding/margin */
  #main > div > section > hr.simple {
    margin-bottom: 2em;
  }

/* ------------------------------------------------------------------------------------- */



/* ==== ALLE SIDER - LOGO OSV. ========================================================= */
  #header {
    padding-top: 2em;
    padding-bottom: 0em;
    border-bottom: none;
  }

  /* LOGO: Mindre luft omkring, padding osv. */
  #header img {
    margin: auto;
    width: 100%;
    height: auto;
    max-width: 1000px;
    /* padding-top: 1em; */
    /* padding-bottom: 0em; */
  }
/* ------------------------------------------------------------------------------------- */



/* ==== SIDEBAR ======================================================================== */
  /* SIDEBAR: Font ved sidebar mini-posts/guides  */
  .mini-posts article p {
    font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }

    #sidebar > div > section > div.mini-posts > article .image img {
    border: solid 1px #0d0d0d;
  }

  /* SIDEBAR: Slug under sidebar-guides ikke vises som links, selv om de er det */
  .mini-posts article p a {
    border-bottom: none;
    color: inherit;
  }

  /* SIDEBAR: Skrift under "Want to write..." sektion */
  p.getintouch-item {
    font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1.1em;
    line-height: 140%;
    font-weight: 400;
    color: #3d4449;
    text-align: justify;
    padding-right: 1em;
    margin-bottom: 1em;
    -webkit-font-smoothing: antialiased !important;
  }

  /* SIDEBAR: Overskrfiter */
  #sidebar > div > section > header > h2 {
    margin: 0 0 0em 0;
    border-bottom: none;
    color: #3d4449;
  }

  /* SIDEBAR: Kuvert-ikon ved e-mail adresse laves grayscale */
  #sidebar > div > section > ul.contact li:before {
    color: #3d4449;
  }

  #sidebar > div > section > ul.contact a {
    font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 1.2em;
    line-height: 140%;
    font-weight: 400;
    color: #3d4449;
  }

  /* SIDEBAR: Ændre farver for sidebar toggle-control + hover */
  #sidebar a.toggle {
    color: #7f888f;
  } #sidebar a.toggle:hover {
    color: #3d4449 !important;
  }

  /* SIDEBAR: Alle overskrifter laves bold */
  #menu > ul > li.sidebar-headlines {
    font-weight: 700;
  }

  /* SIDEBAR: Ændre farve på alle links under en ul - gøres samme farve som hoved menu-punktet */
  #menu ul a {
    color: #3d4449;
  } #menu > ul > li.sidebar-headlines > :hover {
    color: #0D0D0D;
  } #menu ul a:hover, #menu ul span:hover {
    color: #0D0D0D;
  }

  /* "CATEGORIES" overskrift over kategorierne: Mindre padding under */
  #menu ul span {
    padding-bottom: 0em;
  }

  /* "CATEGORIES" overskrift over kategorierne - fjerne hover-effekt */
  #menu > ul > li.sidebar-headlines.cats > span:hover {
    color: unset;
  }

  /* De enkelte kategorier under "CATEGORIES" overskriften */
  #menu > ul > li.sidebar-headlines.cats > a {
    font-size: 0.9em;
    line-height: 100%;
    margin-left: 1em;
    font-weight: normal;
    text-transform: none;
    -webkit-font-smoothing: antialiased !important;
  }

  /* SIDEBAR: Get in touch sektion */
  .getintouch-list {
    margin-left: 0em;
    list-style: none;
  }

/* ------------------------------------------------------------------------------------- */



/* ==== KODE-EKSEMPLER & SYNTAX HIGHLIGHTING =========================================== */

/* Overordnede kode-container */
pre {
  border-radius: 1em;
  font-size: 0.9em !important;
  background: none !important;
  display: grid;
}

/* Inden i pre kode-container */

/*    OBS OBS OBS: NEDENSTÅENDE ER RETTET I /assets/css/lang.ee.css I STEDET FOR HER!  */
/*    Det passer bedre at rette det i kilden i stedet for at bruge !important her!     */

/* pre code {
    font-family: 'IBM Plex Mono', monospace;
    white-space: pre-line !important;
    font-size: 0.9em !important;
} */

/* Kode inline i tekst (ikke code-blocks) */
code {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 0.75em;
  white-space: pre-line;
}

  /* Kode-eksempler: Lave "Copy" knappen ved kode-eksempler lidt pænere */
  div.code-toolbar > .toolbar .toolbar-item button {
    color: #0d0d0d !important;
    background: #f1f1f1ff;
    font-weight: 600;
    font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  }
/* ------------------------------------------------------------------------------------- */



/* ==== FOOTER ========================================================================= */
/* FOOTER: Pænere skrift */
#footer p {
  font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: 1.1em;
  font-weight: 400;
  -webkit-font-smoothing: antialiased !important;
  padding-right: 6em;
}

/* FOOTER: Mørkere tekst-farve */
#footer .copyright {
  color: #3d4449;
}
/* ------------------------------------------------------------------------------------- */



/* ==== ARTIKLER/GUIDES SIDER ======================================================== */

/* Overskrifter helt sorte */
h1, h2, h3, h4, h5, h6 {
  color: #000000;
}

article h1 {
  font-size: 1.50em;
}

article h2 {
  font-size: 1.3em;
  margin-bottom: 0.5em;
}

article h3 {
  font-size: 1.1em;
}

article h4 {
  font-size: 1em;
}

/* Ramme om top-billedet på artikel-siderne */
#main > div > article > span.image.left > img {
  border: solid 1px #0d0d0d;
}

/* Pænere ordered-lists i artikler */
#main > div > article > ol {
  font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: inherit;
  color: #000000;
  font-weight: 400;
  padding-left: 3em;
  margin-top: 0em;
}

/* Pænere un-ordered lists i artikler */
#main > div > article > ul {
  font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-size: inherit;
  color: #000000;
  font-weight: 400;
  padding-left: 3em;
}

/* Overskifter: Flytte lidt ned så den ikke konflikter med text-resizer knapperne */
#main > div > article > header {
  padding-top: 1em;
}

/* Overskrifter skalerer med sidebredde = responsiveness: vw = relaterer til bredden af viewport'en */
#main > div > article > header > h1 {
  font-size: 2vw;
}

/* Samme som foregående men for mobile devices op til 1000px bredde */
@media only screen and (max-width: 1000px) {
  #main > div > article > header > h1 {
    font-size: 4vw;
  }
}

/* Overskrifter: Mindre padding under overskrifter på artikel-sider */
#main > div > article > h1, h2, h3, h4, h5, h6 {
  margin-bottom: 0em;
}

/* ### Fjerne visning ved hover, af bund af rammer omkring billeder på forsiden */
/* #main > div > article > div > article > a {
  border-bottom: none;
} */

/* Ramme om billeder på forside */
.posts article .image img {
  border: solid 1px #0d0d0d;
  width: 100% !important;
  height: 100% !important;
}

/* Vise billeder på forside i grayscale ved hover */
a.image:hover img {
  filter: grayscale(100%);
}

/* Gøre blockquotes lidt pænere/mere fremtrædende */
#main blockquote {
  display: block;
  border-left: solid 3px #b1aeae6b;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
  border-top-right-radius: 1em;
  border-bottom-right-radius: 1em;
  background: #dddddd3d;
  padding-right: 2em;
  padding-bottom: 1em;
}

/* Ramme om billeder med class="ramme" på artikel-siderne */
img.ramme {
  border: solid 1px #0d0d0d;
}

/* Author, Posted + Updated sektion nederst i hver artikel */
#main > div > article div.metainfo p {
  font-size: 0.8em;
  margin-bottom: 0em;
  font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* HR's / Adskiller-linjer */
hr.major {
  margin: 1em 0;
}

/* Blå Infoboxes */
.tboinfobox {
  border-left: 6px solid #2196F3;
  background-color: #f0f7fb;
  font-size: 1em;
  line-height: 1.4em;
  overflow: hidden;
  padding: 12px;
  margin-bottom: 2em;
}

.tboinfobox-note {
  border-left: 6px solid #2196F3;
  background-color: #f0f7fb;
  font-size: 1em;
  line-height: 1.4em;
  overflow: hidden;
  padding: 12px;
  margin-bottom: 12px;
}

.tboinfobox-note::before {
  content: "Note: ";
  font-weight: 400;
}
  

/* ------------------------------------------------------------------------------------- */



/* ==== NEWS -> ALL SIDEN ============================================================== */
/* NEWS -> ALL siden: H1 Oveerskrift */
#main > .inner > section.articles h1 {
  font-size: 2em;
  color: #000000;
  margin-bottom: 1rem;
  margin-top: 2rem;
}

/* NEWS -> ALL siden: Ingen margin på denne side */
#main > .inner > section.articles {
  margin-right: unset;
  margin-left: unset;
}

/* NEWS -> ALL siden: H4 "Category Description" tekster styles mindre */
#nav_cat_archive h4 {
  font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: 400;
  font-size: 0.9em;
  color: #4e4e4e;
  margin-bottom: 1em;
}

ul.nav_cat_archive {
  padding-left: 3em;
}

/* NEWS -> ALL siden: Fjerne disc list-style fra arkiv-sider */
ul.nav_cat_archive li {
  list-style: none !important;
}

#nav_cat_archive > li:nth-child(1) > hr {
  visibility: hidden;
}

#nav_cat_archive > li:nth-child(2) > hr {
  visibility: visible;
}

#nav_cat_archive h2 {
  font-size: 1.5em;
}

#nav_cat_archive ul {
  margin-bottom: 1em;
}

/* NEWS -> ALL siden: HR's mellem kategorier  */
#nav_cat_archive li > hr {
  margin-top: 0em;
  margin-bottom: 1em;
}

/* NEWS -> ALL siden: HR under overskrift  */
#main > div > section > hr.simple2 {
  margin-bottom: 2em;
  margin-top: unset;
}
/* ------------------------------------------------------------------------------------- */



/* ==== SEARCH RESULTS SIDE ============================================================ */
.box {
  margin-top: 2em;
}

table tbody tr {
  font-size: 0.9em;
}

/* ------------------------------------------------------------------------------------- */



/* ==== CONTACT FORM =================================================================== */
/* Sætte tekst til monospace */
textarea {
  font-family: 'Courier New', Courier, monospace;
}

/* Mindre luft under labels */
label {
  margin-bottom: unset;
  font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

/* Fjerne rød ramme om button (bruger attribute selector til at vælge button af type "submit") */
input[type=submit]:active {
  background-color: unset;
}

input[type=submit] {
  color: #000000 !important;
  box-shadow: unset;
  border: #000000 2px solid;
}

input[type=submit]:hover {
  background-color: #4e4e4e;
  color: #ffffff !important;
}

/* ------------------------------------------------------------------------------------- */

/* Table of Links/Parts */
/* #table-of-links:before {
  content: "Links to ";
  text-decoration: underline;
  font-weight: 400;
  padding-left: 1rem;
  margin-top: 1rem;
} */

#table-of-links {
  background-color: whitesmoke;
  
  border-radius: 15px;
  
  padding-top: 1rem;
  
  padding-left: 1rem;
  padding-right: 1rem;
  
  /* margin-top: 3rem; */
  margin-bottom: 1rem;

  font-weight: 400;
  line-height: 170%;
  
}

#table-of-links ul {
  list-style: none;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

#table-of-links ul li a:before {
  content: "\2192\00a0\00a0\00a0";
}

#table-of-links ul li a:hover {
  border-bottom: #000000 solid 1px;
}

/* ------------------------------------------------------------------------------------- */

/* Comments Section */
#comments > h2 {
  margin-bottom: .5em;
  font-size: 2rem;
}

#comments p.cmnts-byline {
  font-size: .75em;
  font-weight: 400;
  margin-bottom: unset;
}

#comments .cmnts-comment {
  font-size: .9em;
}

/* Individual Comments (each separate comment) */
#comments > div.cmnts-section {
  padding: 10px;
}

#comments > div.cmnts-section > div.cmnts-individual {
  background-color: #F8F8F8;
  border: 1px solid #d1d1d4;
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 15px;
  padding-bottom: 10px;
  border-radius: 10px;
}

/* Making sure screenshots are never too big or small on mobile devices */
/* #body > p > img {
  width: 100%;
  min-width: 40% !important;
} */



/* ------------------------------------------------------------------------------------- */

/* Hide/Show new Table-of-Contents */

/* .newtoc {
	 padding: 1.5rem;
} */
 .newtoc details {
	 border: 1px solid #ddd;
	 background: #fff;
	 margin-bottom: 1.5rem;
	 border-radius: 0.35rem;
}
 .newtoc details summary {
	 cursor: pointer;
	 padding: 1rem;
	 border-bottom: 1px solid #ddd;
   font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}
.newtoc details summary:focus {
  outline: none;
}
 .newtoc details div {
	 padding: 1rem 1.5rem;
   font-family: 'Source Sans Pro', Roboto, Verdana, Helvetica, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}