@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=Oswald);

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

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

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: 1em; font-weight: bold }

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: 10px 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.3em;
  margin-bottom: 0.3em;
  padding: 0.5em 0 1em;
/*  background: #eed; */
}

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

/* pictures */

figure { 
  width: 30vw;
  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: #036;
    color: white;
    z-index: 2;
}

nav a { color: white; text-decoration: none; font-style: normal }

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

@media (max-width: 1000px) {  /* reduce font size on small screens */
  nav h1 { font-size: 30px }
}

nav ul {
    text-align: right;
    margin: 20px 20px 10px 0;
    font: bold 14px/1.8 Lato, sans-serif;
    text-transform: uppercase;
}

nav li {
    display: inline;
    list-style: none;
    margin: 5px;
}

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