@import url(https://fonts.googleapis.com/css?family=Tauri);
@import url(https://fonts.googleapis.com/css?family=Lato);
@import url(https://fonts.googleapis.com/css?family=Fanwood+Text:400,400italic);
@import url('https://fonts.googleapis.com/css?family=Spectral');
@import url(https://fonts.googleapis.com/css?family=Oswald);

@page {
  size: a4;
  margin: 20mm;
}

:root {
  --nav-bg: #036;
  --nav-fg: white;
  --bg: hsl(90, 40%, 80%); 
  --her: red;
}


/* intialize */

html, body, div, h1, h2, h3, p, blockquote, ul, ol, li, pre, article, dl, dt, dd { margin: 0; padding: 0 }
li { margin-left: 1.5em }

/* set background, font */

body { 
   font: 22px "Fanwood Text", serif; 
   font: 20px Spectral, serif; 
}

h1, h2, h3 { margin: 0.7em 0 0.5em; padding: 0; font-family: "Fanwood Text", serif; font-weight: normal }
article h1 { font-size: 3em; padding: 1em 0 0.5em }
h2 { font-size: 2em; }
h3 { font-size: 1.3em; font-style: italic }

a { 
  text-decoration: none;
  font-style: italic;
}

dt { font-style: italic }
p, pre, dd, dt { margin: 0.6em 0 0.6em }
dd { margin-left: 2em }

pre, code { font-size: 0.8em }

blockquote { margin: 0.4em 5% 0.4em }

hr { width: 60%; margin: 1em auto }

/* p:first-of-type { padding-top: 1em; } */

p.siste { font-family: Oswald, sans-serif }
p.siste a { font-style: inherit }

blockquote { font-style: italic }
p.byline { margin: 2em; font-style: italic }
ul.links { margin: 1em; list-style-type: none }

article {
  color: black;
  background: #dee; 
  padding: 30px 1vw 2em 1vw;
  min-height: 800px;
  width: auto;
  box-sizing: border-box; 
  margin: 100px 31vw 0px; 
  border-left: thin solid #aaa; 
  border-right: thin solid #aaa; 
}

article.bred {
  margin-left: 2vw; 
  margin-right: 2vw; 
}

article ul { margin: 1em 0 }

/* textual side notes */

aside { 
  font: 1.2em Oswald; 
  width: 30vw;
  float: right; 
  clear: right;
  margin-right: -32vw;
  margin-left: 1vw;
  border-bottom: thin solid gray;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
  padding: 0.2em 0;
/*  background: #eed; */
}

aside a { font-style: normal; color: inherit }

/* pictures */

figure { 
  width: 30vw;
  min-width: 200px;
  background: transparent;  
  margin: 0 0 1em 0; padding: 0;
  transition: 0.3s;
}

figure.bred { 
  width: 50vw;
}

figure:hover {
  width: 50vw;
}

article.bred figure:hover, figure.siste:hover {
  width: 50vw;
}

figure:nth-of-type(odd)  {
  float: left; 
  clear: left;
  margin-left: -32.1vw;  /* .1 is to ensure bleeding, combat roundoff errors */
  margin-right: 1vw;
}

figure:nth-of-type(even) {
  float: right; 
  clear: right;
  margin-right: -32vw;
  margin-left: 1vw;
}

article.bred figure {
  float: right !important; 
  clear: both !important;
  margin: 0 0 20px 1em !important;
}

img {
  max-width: 100%;
}

img.small { 
  float: right; 
  clear: right;  
  width: 12vw;
  margin: 1vw -14vw 1vw 1vw;
}


figcaption { display: block; width: 80%; font-size: 0.8em; background: #eed; f; font-style: italic; padding: 0.4em; border-bottom: thin solid #aaa }
figure:nth-of-type(odd) figcaption { float: left; border-right: thin solid #aaa; }
figure:nth-of-type(even) figcaption { float: right; border-left: thin solid #aaa; }
figure img { display: block; width: 100%; margin: 0; padding: 0; border: thin solid #aaa }

article.bred figure figcaption { float: right !important; border-left: thin solid #aaa !important; border-right: thin solid #aaa !important; }

/* some sensible settings on tables */

table { margin: 1em 0; border-collase: collapse; vertical-align: top }
td, th { padding: 0.1em 0.3em;  }
th { text-align: left }
td.sum { text-align: right }

/* some sensible classes to keep around */

sup { line-height: 0 }

span.sc { font-variant: small-caps }

.xright { float: right; margin: 0.8em 0 0.8em 1%; max-width: 40%; clear: right }

.center { text-align: center }
.right { text-align: right }

.none { display: none }

.border {
    margin-bottom: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.hide {
    margin: 0;
    width: 100%;
    display: none;
}

/* navigation element on top of the page */

nav { 
    position: fixed; 
    top: 0; left: 0; right: 0;
    height: 101px; 
    background: var(--nav-bg);
    color: var(--nav-fg);
    z-index: 2;
}


nav h1 {
    float: left;
    margin: 10px 20px 0 20px; 
    font: 60px Tauri, sans-serif;
    font: 5vw Tauri, sans-serif;
    text-transform: uppercase;
}


nav a {
    display: inline;
    margin: 5px;
    font: bold 14px/1.8 Lato, sans-serif;
    text-transform: uppercase;
}

nav a {
    border: none;
    transition: 0.2s;
}

nav li a:hover {
    color: orange;
}

@media print {

body { font: 11pt Lato; hyphens: auto }
nav { display: none }
article { 
  background: transparent; border: none;
  text-align: justify;
}

figure {
  float: right;
  max-width: 40%;
  margin: 0 0 1em 5em !important;
}
}


nav { 
  background: var(--nav-bg);
  font: bold 14px Lato, sans-serif;
  box-shadow: 0px 3px 5px gray;
}

nav a {
  transition: 0.2s;
  font-style: normal;
  display: inline-block; 
  color: white; 
  text-decoration: none; 
  font-style: normal; 
  margin: 0; 
  padding: 0.3em; }
}

nav a:visited, nav a:link {
  color: white;
}

nav a:hover {
  color: var(--her);
}

/* meny  */

#hamnav {
  background: var(--nav-bg);
  margin: 0 0 2em;
  padding: 1em 2vw;
}

/* HORIZONTAL MENU ITEMS */

#hamitems { 
  float: right;
  width: 50%;
  text-align: right;
  padding: 10px 0 0;
}

#hamitems a {
  text-decoration: none;
}
#hamitems a:hover { color: var(--her) }

/* HIDE HAMBURGER */

#hamnav label, #hamburger { display: none; }


/* små skjermer */

@media screen and (max-width: 800px) {

  body { font: 18px Spectral, serif; }

  article h1 { font-size: 2em; padding: 0.3em 0 }

  nav { height: 50px }
  nav h1 { font-size: 30px }

  article { margin: 100px 0 0 31vw; }
  article { margin: 50px 0 0 0; }

  figure  {
    float: left !important; 
    clear: left !important;
    margin: 0 10px 0 0 !important; 
  }
  figure:nth-of-type(odd) figcaption { float: left; border-right: thin solid #aaa; }

  aside {
    float: left; 
    clear: left;
    margin-left: -32vw;
    margin-right: 1vw;
    padding: 0.2em;
  }

  p { text-align: left }

  /* (A) BREAK INTO VERTICAL MENU */
  #hamitems a {
    display: block;
    border-top: 1px solid white;
    margin: 0; 
    padding: 0.3em;
  }

  /* (B) SHOW HAMBURGER ICON */
  #hamnav label {
    display: inline-block;
    text-align: right;
    color: white;
    background: #a02620;
    font-style: normal;
    font-size: 1.2em;
    padding: 10px;
    float: right;
    position: absolute;
    top: 0; 
    right: 0;

  }

  /* (C) TOGGLE SHOW/HIDE MENU */
  #hamitems { display: none; }
  #hamnav input:checked ~ #hamitems { display: block; padding: 0; margin-left: auto; margin-right: 40px; width: 10em; background: black; }

  #hamnav {
    box-shadow: none;
    float: right;
    padding: 0;
    margin: 0;
  }
}