@charset "utf-8";

@import url('https://fonts.googleapis.com/css?family=Crimson+Text');
@import url('https://fonts.googleapis.com/css?family=EB+Garamond');
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans'); 
@import url('https://fonts.googleapis.com/css?family=Oswald');
/* @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro'); */

:root {

  --nav-bg: hsl(64, 40%, 60%); /* ørkensand */
  --nav-bg: hsl(22, 40%, 60%); /* hudfarget */
  --nav-bg: hsl(8, 75%, 50%); /* julerød  */
  --nav-bg: hsl(183, 40%, 60%); /* blålig */
  --nav-bg: hsl(360, 40%, 60%); /* gammelrosa */
  --nav-bg: hsl(90, 40%, 60%); /* grønn-oliven */

  --nav-fg: white;
  --nav-over: #edec9d;
  --nav-her: #edec9d;
  --border-her: #aaa;
  --common-serif: "EB Garamond";
  --common-sans: "Josefin Sans";
}


* { box-sizing: border-box; }

html { overflow-y: scroll; margin: 0; padding: 0 }
body { 
  font: 22px/1.4 Arial, serif;  
  font-family: var(--common-serif), serif;
  margin: 0; padding: 0 
}


h1, h2, h3 { 
  font-family: Josefin Sans, sans-serif; 
  font-family: var(--common-sans), sans-serif;
  font-weight: normal; padding: 0; margin: 0 
}

h1 { font-size: 2em; text-align: center }
h2 { font-size: 1.5em; text-align: center; margin: 0 0 0.4em }
h3 { font-size: 1.5em; margin: 1em 0 0.4em }

header {
  background: white;
  margin: 0;
  padding: 2vw 0 0vw;
}

header h1 { 
  text-align: center; 
  font: 80pt/1 Crimson Text;   /* fallback */
  font: 10vw/1 Crimson Text;   /* Text, not Pro */
  margin: 0; padding: 0 0 1vw;
}

header h1 span.r { margin-right: -0.7vw }
header h1 span.g { margin-left: -0.4vw }

header h2 { 
  text-align: center; text-transform: uppercase;
  margin: 0; padding: 0 0 2vw;
  font: 2.5vw/0.6 Josefin Sans, sans-serif; 
  font-family: var(--common-sans);
  letter-spacing: 0.4em; 
}

header img {
  height: 0.9em; 
  padding: 0 0 0 0.1em;
}

header a { 
  text-decoration: none;
}


a { 
    color: inherit;
    text-decoration: underline #ccc;
    text-decoration-thickness: 0.1em;
    text-underline-offset: 0.08em;
}

figure { padding: 0; margin: 0 }

nav {
  font: bold 1.5vw/1.4 Josefin Sans, sans-serif;
  font-family: var(--common-sans), sans-serif;
  text-align: center;
  color: white; 
  color: var(--nav-fg);
  background: #500;
  background: var(--nav-bg);
  padding: 0.4vw 1em 0;
  text-transform: uppercase;
  position: sticky; top: 0; z-index: 2;
}

nav a { padding: 0 1vw 0.5vw; color: inherit; text-transform: uppercase; transition: 0.3s; text-decoration: none }
/*
nav a:first-child { float: right }
nav a:first-child img { height: 20px }
*/

nav img { float: right; height: 20px; margin-right: 4px; }

nav a:hover { color: var(--nav-over) }

nav span { 
  font: 3vw/0.6 Josefin Sans; letter-spacing: 0.2em; 
  font-family: var(--common-sans), sans-serif;
  color: black; background: white; 
  margin: 0 20px;   border: thin solid black; padding: 1vw 1vw 0.5vw; 
  position: relative; top: 0.4vw;
}

p { margin: 0.3em 0 0.7em; padding: 0 }

pre { font-size: 0.9em; white-space: pre-line }

img { margin: 0 0 0.5em }

img.bord { border: thin solid black }

strong { font-weight: 600 }

blockquote { 
  margin: 0.5em 0;
  font-style: italic;
}

h1 img { margin: 0 }

.innhold {
  background: white;
  margin: 2em 0 0 1em;
}

/* clear fix */
address:after, .innhold:after {
  content: '';
  display: block;
  clear: both;
}


table { font-size: inherit; border-collapse: collapse }
td, th { border: thin solid black }

table.noborder td, table.noborder th { border: none }

/* ---- disposisjon ----- */

.disposisjon, .hovedverk, .svellverk, .pedal, .manual, .positiv, .oververk, .fasade, .brystverk, .verk
{
  white-space: pre-line;
  padding: 8px;
}

.omfang, .roller {
  padding: 8px;
}

.omfang p, .roller p {
  margin: 0 0 0 1em !important;
  text-indent: -1em;
}

/* ---- .float ---- */

.sizer, .float
{
  width: 25%;
}

.sizer, .float {
  float: left;
  border: 10px solid white;
  background: #eed;
  background: beige;
}

article.float, .opus.float {
  background: white;
}

.disp div {
  xbackground: white;
}

.disp span.merk {
  display: block;
  font-style: italic;
  color: #444;
  margin-left: 1em;
  font-size: 0.8em;
  
}

.opus h2 {
  font-weight: normal;
  font: 40px/1 Crimson Pro, serif;
  font-family: var(--common-serif), serif;
  text-align: left;
}

.opus span {
  display: block;
  font: italic 0.4em Josefin Sans;
  font-family: var(--common-sans), sans-serif;
}

.opus a {
  color: inherit;
}

.opus h2 a {
  text-decoration: none;
}

.opus p.stemmer {
  font: 1em Josefin Sans, sans-serif;
  font-family: var(--common-sans), sans-serif;
  margin: 0.8em 0 1.2em;
}

.sizer img, .float img {
  display: block;
  width: 100%;
  font-size: 0;
  border: thin solid var(--border-her);
}

figure.float h2 {
  padding-top: 0.2em;
  border: thin solid var(--border-her);
  margin: 0;
}

figure.float p {
  font-family: Josefin Sans, sans-serif;
  font-family: var(--common-sans), sans-serif;
  padding: 8px 8px 8px; 
  border: thin solid var(--border-her);
  border-top: none;
  margin: 0;
}

figure.float .foto {
  font-size: 0.8em;
  line-height: 1;
}

figure a { 
  text-decoration: none;
}

/* boxes where all content is a link should not have colored links */

.float a {
  color: black;
}

article.wide {
  font-size: 1.1em;
}

article, .sizer.wide, .float.wide {
  width: 50%;
}

.sizer.xwide,
.float-xitem.wide {
  width: 75%;
}

.float.xwide {
  width: 100%;
  padding-bottom: 50px;
}

.float.xwide h1, .float.xwide h2 {
  font-family: Oswald;
/*  text-align: center  */
}

.float.xwide {
/*   text-align: center */
}
.float.xwide p {
   text-align: left 
}

.button { 
  background: gray;
  color: white;
  font-size: 2em;
  text-align: center;
  padding: 0.3em;
}

address {
  clear: both;
  font: 1.4vw/1.4 Spartan, Josefin Sans, sans-serif;
  font-family: var(--common-sans), sans-serif;
  background: #500;
  background: var(--nav-bg);
  color: white;
  color: var(--nav-fg);
  padding: 0 0.5em 0 1em;
  font-style: normal;
}

address div {
  width: 25%; 
  float: left;
  padding: 1em 0 1em 1em;
}

address a {
  color: inherit;
  text-decoration: none;
}

tr { vertical-align: top }
table th { text-align: left }
td, th { padding: 0.2em 0.3em }

span.red { color: red }
span.blue { color: #1338a8 }
span.black { color: black }


table.opus {
  margin-top: 2rem; 
}
table.opus a {
  text-decoration: underline #ccc;
  text-decoration-thickness: 0.1em;
  text-underline-offset: 0.08em;
}



/* for index */

h1#indextitle { text-align: left; margin: 2rem 2rem 2rem; font-size: 1.8rem }
table#indexlist { margin: 0 2rem }
table#indexlist td, table#indexlist th { border: none; padding: 0 1rem 0 0; }
table#indexlist td:first-of-type { padding: 0 }
table#indexlist a { text-decoration: none }
p.index { margin: 0 2rem }

@media (max-width: 1000px) {

article, .sizer, .float {
  width: 50% !important;
}

}

@media (max-width: 600px) {

article, .sizer, .float {
  width: 100% !important;
}

}

/*
<span style="background: #8aa971">x</span>
<span style="background: #d96">x</span>
<span style="background: #8a9971">x</span>
<span style="background: #ab2c2c">x</span>
<span style="background: #136359">x</span>
<span style="background: #58782b">x</span>
<span style="background: #934506">x</span>
<span style="background: #687d8e">x</span>
<span style="background: #f40000">x</span>
*/