/* Reset */
* {
  margin: 0;
  padding: 0;
}
a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
a img {
  border: none;
}

/* Diagonal */
#diagonal {
  position: absolute;
}

/* Layout */
html {
  min-height: 850px;
  min-width: 600px;
  height: 100%;
}
body {
  height: 100%;
  min-height: 850px;
  min-width: 600px;
  margin: 0;
  padding: 0;
  position: relative;
}
.container {
  min-height: 850px;
  margin: 0 auto;
  position: relative;
  height: 100%;
  display: table;
}

/* Positioning */
nav
{ position: absolute; top: 0px; margin-top: 25px; }

.content {
  height: 850px;
  width: 600px;
  margin: auto;
  display: table-cell;
  vertical-align: middle;
}

.site-title {
  margin: 10px 0 10px 0;
  height: 25px;
  float: left;
}

.description { height: 50px; margin-top: 10px; }

.gallery { margin-top: 0; position: relative; }
.gallery, .series, .series-menu { margin-bottom: 10px; }
.gallery, .series, .series-menu { margin-top: -10px; height: 25px; }
.gallery a, .series a, .extra-links a, .series-menu a { width: 25px; height: 25px; line-height: 25px; }
.gallery a { width: auto; padding: 0 3px 0 5px; }

.credit {
  margin-top: 50px;
}

.extra-links
{ *margin-top: 10px; top:500px; }

.socialmedia
{ width: 100%; text-align: center; position: absolute; bottom: 0; left: 0; }

.icon
{ margin:5px; height:50px; width:50px; }

/* Picture size */
.container {
  width: 600px;
}

.image { height: 600px; }

.static {
  margin: 10px 0 60px 0;
  padding: 30px;
  width: 540px;
  height: 540px;
  overflow: hidden;
  position: relative;
}
.page-biography .static { overflow-y: scroll; }

/* Colours */

body
{ background: #262626; }

body, h1, h2, address
{ color: #aaa; }

.gallery a, .series a, .series-menu a, .extra-links a,
.description
{ color: #555; }

a
{ color: #0f0f0f; }

.site-title a:hover, .gallery a:hover, .series a:hover, .series-menu a:hover, .extra-links a:hover
{ background: #052570; color: #ffffff; }

a.current,
.site-title a,
.static *
{ color: #aaa; }

.static {
  background-color: #2a2a2a;
}

/* Intro */
.page-intro .static {
  background-color: #052570;
  background-image: url('images/background.png');
  background-position: bottom center;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -300px 0 0 -300px;
}
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
  .page-intro .static {
    background-image: url('images/background@2x.png');
    background-size: 600px 600px;
  }
}
a.intro {
  display: block;
  width: 600px;
  height: 600px;
  margin: -30px 0 0 -30px;
  padding: 30px;
}
.intro, .intro * { text-decoration: none !important; }
.intro p, .intro h2 {
  font-size: 24px;
  font-weight: 300;
  margin-top: 0 !important;
  line-height: 150%;
  width: 370px;
}
.intro h2 { font-style: italic; text-align: right; }

.image
{ background-color: #2a2a2a; }

.static em
{ color: #555; }

.icon { background-color: #262626; }
.icon:hover { background-color:#052570; }

/* Typography */
body, h1, h2, address { font: 400 14px/25px 'Avenir Next', 'Avenir LT', 'Avenir CE', 'Corbel', Verdana, sans-serif;  }
.site-title, .extra-links, .static h1 { text-transform: lowercase;}
.site-title b { font-weight: 300; }
a { text-decoration: none; }
.series { text-transform: lowercase; }
.static a { text-decoration: underline; }
em { font-style: normal; }
.static h1 { margin-bottom: 25px; margin-top: 5px; }
.static h2 { margin-top: 25px; }
.page-biography .static p { margin-bottom: 25px; width: 480px; }

/* Header */
.site-title a { display: block; float: left; }
.site-title a, .extra-links a { padding: 0 3px 0 5px; }

.gallery, .series { list-style: none; padding: 0; }
.gallery li, .series li, .series-menu li { display: inline-block; *display: inline; *zoom: 1; }
.gallery a, .series a, .series-menu a, .extra-links a { display: block; text-align: center; }

.extra-links { padding-bottom: 0; float: left; margin-top: 10px; }
.extra-links a { width: auto; float: left; }
.extra-links .separator { float: left; color: #555; margin: 0 5px 0 8px; cursor: default; }

/* Image display */
.content > a
{ cursor: pointer; }

.image { position: relative; }
.image .picture { position: absolute; margin: 0; }
.image.l .picture { top: 0; left: 0; }
.image.r .picture { top: 0; right: 0; }
.image.t .picture { top: 0; left: 0; }
.image.b .picture { bottom: 0; left: 0; }
.image.c {
  display: table;
  height: 600px;
  width: 600px;
  text-align: center;
}
.image.c .picture { display: table-cell; vertical-align: middle; position: static; }
.image.c .picture img { }

/* Touch specific */
/*
.touch .site-title { height: 50px; }
.touch .site-title a { line-height: 50px; padding: 0 20px; }
.touch .gallery, .touch .series { height: 50px; }
.touch .gallery {
  white-space: nowrap;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}
.touch .gallery a, .touch .series a, .touch .extra-links a {
  width: 50px;
  height: 50px;
  line-height: 50px;
}
.touch .extra-links a { padding: 0 20px; }
*/

/* Series overflow */
.series {
  white-space: nowrap;
  overflow: hidden;
  width: 575px;
}
.series.transition li {
  transition: margin-left .2s;
}
.series-menu {
  position: absolute;
}
.series-menu .next {
  position: absolute;
  left: 575px;
  cursor: pointer;
}
.series-menu .prev {
  position: absolute;
  cursor: pointer;
}

/* Manual for Johan */
.instructions { margin: 25px 0; background: #fff; padding: 25px; }
.instructions h2 { text-transform: lowercase; padding-bottom: 10px; color: gray; }
.instructions p { margin: 1em 0; }
.instructions b, .instructions th { color: #02aaea; font-weight: 400; text-align: left; }
.instructions ol { padding: 0; }
.instructions table { border-collapse: collapse; }