@import url('//fonts.googleapis.com/css?family=Crimson+Text');
@import url('//fonts.googleapis.com/css?family=Josefin+Sans');

* { box-sizing: border-box; }

html { overflow-y: scroll; margin: 0; padding: 0 }
body { font: 20px/1.4 Crimson Text, sans-serif;  max-size: 30em; margin: 0; padding: 0 }

a { text-decoration: none; } 

h1, h2, h3 { font-family: Josefin Sans; font-weight: normal }

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

header h1 { 
  text-align: center; font: 10vw/1 Crimson Text; 
  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; letter-spacing: 0.4em; 
}

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

header a { 
  color: inherit;
}

figure { padding: 0; margin: 0 }

nav {
  font: bold 1.5vw/1.4 Josefin Sans, sans-serif;
  text-align: center;
  color: white; 
  background: #8aa971; 
/*  background: #d96; */
  background: #79a;
  padding: 0.4vw 1em 0;
  text-transform: uppercase;
}

nav a { padding: 0 1vw 0.5vw; color: inherit; text-transform: uppercase; transition: 0.2s }
/*
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: #500 }

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

h2 { margin: 0; padding: 0 }

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

img { margin: 0 0 0.5em }

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 }

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

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

div.omfang {
  padding: 8px;
}

div.omfang 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;
}

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

.disp div {
  xbackground: white;
}

.opus h2 {
  font-weight: normal;
  font: 40px/1 Crimson Text;
}

.opus span {
  display: block;
  font: italic 0.4em Josefin Sans;
}

.opus a {
  color: inherit;
}

.opus p.stemmer {
  font: 1em Josefin Sans;
}

.sizer img, .float img {
  display: block;
  width: 100%;
  font-size: 0;
}

figure.float p {
  font-family: Josefin Sans;
  padding: 8px 8px 8px; 
  margin: 0;
}

.float.link a {
  color: black;
}


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

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

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

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

address {
  clear: both;
  font: 1.4vw/1.4 Josefin Sans, sans-serif;
  background: #8a9971; 
  background: #79a;
  color: black;
  padding: 0 0.5em 0 1em;
  font-style: normal;
}

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

address a {
  color: inherit;
}

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


@media (max-width: 1000px) {

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

}

@media (max-width: 600px) {

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

}