/* ==========================================================================
   Webfonts
   ========================================================================== */
@font-face {font-family: 'LydianMT';src: url('webfonts/2B3F32_0_0.eot');src: url('webfonts/2B3F32_0_0d41d.eot?#iefix') format('embedded-opentype'),url('webfonts/2B3F32_0_0.woff') format('woff'),url('webfonts/2B3F32_0_0.ttf') format('truetype');}


/*! HTML5 Boilerplate v4.3.0 | MIT License | http://h5bp.com/ */

html,
button,
input,
select,
textarea {
  color: #222;
}

html {
  overflow-y: scroll;
}

html {
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
img,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #000;
}

a {
  color: #000;
  text-decoration: underline;
}

a:not([href]),
.chapter a,
.comment a {
  text-decoration: none;
}

a:hover,
a:active,
a:focus {
  outline: none;
}

ul,
h1,
h2,
h3,
p {
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
.nav,
.chapter span,
.time {
  font-family: LydianMT, "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: normal;
  text-transform: uppercase;
}

img.bg {
  /* Set rules to fill background */
  min-height: 100%;
  min-width: 1024px;

  /* Set up proportionate scaling */
  width: 100%;
  height: auto;

  /* Set up positioning */
  position: fixed;
  top: 0;
  left: 0;
}

#page {
  position: absolute;
  width: 984px;
}

#logo {
  width: 379px;
  height: 85px;
  border-width: 0 14px 12px 0;
  overflow: hidden;
}

/*
 * navigation
 */

.nav {
  position: absolute;
  left: 438px;
  background: #000;
  border-width: 0 9px 8px 0;
}

.nav li {
  display: inline;
}

.nav a {
  color: #fff;
  text-decoration: none;
}

.nav a:hover,
.nav a:active,
.nav .active a,
.nav .current a,
#text-container .time {
  color: #10b4f2;
}

#nav-meta {
  top: 0;
}

#nav-meta li {
  font-size: 0.7em;
  line-height: 2.6em;
  padding: 0 5px 0 0;
}

#nav-meta li:first-child {
  padding-left: 7px;
}

#nav-meta li:last-child {
  padding-right: 7px;
}

#nav-main {
  top: 49px;
  height: 1.25em;
}

#nav-main li {
  font-size: 1.55em;
  line-height: 0.9em;
  padding: 0 15px 0 0;
}

#nav-main li:first-child {
  padding-left: 0;
}

#nav-main li:last-child {
  padding-right: 0;
}

/*
 * content
 */

.border {
  -moz-background-clip: border;     /* Firefox 3.6 */
  -webkit-background-clip: border;  /* Safari 4? Chrome 6? */
  background-clip: border-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

  -moz-background-clip: padding;     /* Firefox 3.6 */
  -webkit-background-clip: padding;  /* Safari 4? Chrome 6? */
  background-clip: padding-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */

  -moz-background-clip: content;     /* Firefox 3.6 */
  -webkit-background-clip: content;  /* Safari 4? Chrome 6? */
  background-clip: content-box;      /* Firefox 4, Safari 5, Opera 10, IE 9 */
}

.black {
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.7);
}

.white {
  border-style: solid;
  border-color: rgba(255, 255, 255, 0.6);
}

#content {
  position: absolute;
  top: 152px;
  left: 40px;
  width: 944px;
  /*padding: 9px 29px 0;*/
  background-color: rgba(255, 255, 255, 0.6);
}

#content.start {
  top: 132px;
  padding: 0;
  background: none;
}

.textblock {
  left: 0;
  width: 868px;
  column-gap: 0;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  border-width: 0 12px 14px 0;
  margin-bottom: 36px;
}

.textblock .container {
  background: #fff;
}

.textblock h1, h2, h3, p {
  background: #fff;
  font-size: 0.9em;
  line-height: 1.125em;
}

.textblock h1,
.textblock h2,
.textblock h3 {
  padding: 0em 30px 0 0;
  font-size: 1.05em;
  line-height: 1.1em;
}

.textblock h1 {
  font-size: 1.15em;
  padding-top: 0.2em;
}

.textblock p {
  padding: 0.05em 30px 1.05em 0;
}

.textblock p img {
  margin: -0.05em 0 -1.05em;
}

.cols2 {
  -webkit-columns: 2;
  -moz-column-count: 2;
  columns: 2;
}

.cols3 {
  -webkit-columns: 3;
  -moz-column-count: 3;
  columns: 3;
}

.cols4 {
  -webkit-columns: 4;
  -moz-column-count: 4;
  columns: 4;
}

.cols4 p {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  column-break-inside: avoid;
  display: table;
}

/*
 * items with expandable content (home, schauplatz, protagonisten)
 */

#intro-text {
  position: absolute;
  top: 71px;
  left: 81px;
}

#intro-image {
  position: absolute;
  top: 211px;
  left: 81px;
}

.box-title {
  position: relative;
  border-width: 0 10px 7px 0;
  z-index: 99;
}

.box-title h1,
.box-title h2 {
  height: 16px;
  padding: 2px 0 0;
  margin: 0;
  line-height: 16px;
  font-size: 1.4em;
  color: #fff;
  background: #000;
}

.protagonisten .box-title h2 {
  max-width: 250px;
  height: 30px;
  padding: 0;
  font-size: 1.0em;
}

.box-title + img {
  margin-top: -7px;
}

.box-content {
  position: relative;
  width: 270px;
  height: 80px;
  overflow: hidden;
  -webkit-columns: 2 350px;
  -moz-column-count: 2;
  -moz-column-width: 350px;
  columns: 2 350px;
  column-gap: 0;
  -moz-column-gap: 0;
  -webkit-column-gap: 0;
  z-index: 100;
}

#intro-image .box-content {
  margin: -5px 0 0 -3px;
  z-index: 98;
}

.box-content.border {
  border-width: 0 15px 15px 0;
}

.box-content *:not(div):not(a) {
  margin-top: -1px;
  font-size: 0.9em;
  line-height: 1.125em;
  color: #000;
}

.box-content div {
  display: block;
  background: #fff !important;
}

.box-content p {
  padding-right: 10px;
}

.box-content p:not(:first-child) {
  padding-top: 1.1em;
}

.item .box-content {
  display: none;
  position: absolute;
  width: 225px;
  height: auto;
  top: 30px;
}

.item .box-content.border {
  border-width: 0 10px 10px 0;
}

.close {
  display: none;
  position: absolute;
  top: 25px;
  right: -5px;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 18px;
  background: #fff;
  cursor: pointer;
  z-index: 101;
}

.item .close {
  top: 30px;
  left: 225px;
}

.close.image {
  margin: -2px 9px 0 0;
  background: #eed7bf;
}

.close.no-border {
  right: -20px;
}

.expandable {
  cursor: pointer;
}

/*
 * hotspots for audio on homepage
 */

.audio-spots a {
  display: block;
  position: absolute;
}

#spot01 { top:80px; left:362px; width: 67px; height: 56px; background: transparent url(../img/spot01.png) 0 0 no-repeat; }
#spot01:hover, #spot01:active, #spot01.active { background-position: -67px 0; }
#spot02 { top:82px; left:499px; width: 65px; height: 55px; background: transparent url(../img/spot02.png) 0 0 no-repeat; }
#spot02:hover, #spot02:active, #spot02.active { background-position: -65px 0; }
#spot03 { top:137px; left:395px; width: 58px; height: 48px; background: transparent url(../img/spot03.png) 0 0 no-repeat; }
#spot03:hover, #spot03:active, #spot03.active { background-position: -58px 0; }
#spot04 { top:135px; left:460px; width: 60px; height: 49px; background: transparent url(../img/spot04.png) 0 0 no-repeat; }
#spot04:hover, #spot04:active, #spot04.active { background-position: -60px 0; }
#spot05 { top:124px; left:539px; width: 63px; height: 51px; background: transparent url(../img/spot05.png) 0 0 no-repeat; }
#spot05:hover, #spot05:active, #spot05.active { background-position: -63px 0; }
#spot06 { top:183px; left:359px; width: 58px; height: 46px; background: transparent url(../img/spot06.png) 0 0 no-repeat; }
#spot06:hover, #spot06:active, #spot06.active { background-position: -58px 0; }
#spot07 { top:185px; left:423px; width: 56px; height: 43px; background: transparent url(../img/spot07.png) 0 0 no-repeat; }
#spot07:hover, #spot07:active, #spot07.active { background-position: -56px 0; }
#spot08 { top:182px; left:486px; width: 56px; height: 43px; background: transparent url(../img/spot08.png) 0 0 no-repeat; }
#spot08:hover, #spot08:active, #spot08.active { background-position: -56px 0; }
#spot09 { top:179px; left:548px; width: 57px; height: 46px; background: transparent url(../img/spot09.png) 0 0 no-repeat; }
#spot09:hover, #spot09:active, #spot09.active { background-position: -57px 0; }
#spot10 { top:229px; left:389px; width: 55px; height: 41px; background: transparent url(../img/spot10.png) 0 0 no-repeat; }
#spot10:hover, #spot10:active, #spot10.active { background-position: -55px 0; }
#spot11 { top:228px; left:449px; width: 56px; height: 38px; background: transparent url(../img/spot11.png) 0 0 no-repeat; }
#spot11:hover, #spot11:active, #spot11.active { background-position: -56px 0; }
#spot12 { top:230px; left:522px; width: 57px; height: 42px; background: transparent url(../img/spot12.png) 0 0 no-repeat; }
#spot12:hover, #spot12:active, #spot12.active { background-position: -57px 0; }
#spot13 { top:270px; left:354px; width: 57px; height: 39px; background: transparent url(../img/spot13.png) 0 0 no-repeat; }
#spot13:hover, #spot13:active, #spot13.active { background-position: -57px 0; }
#spot14 { top:266px; left:473px; width: 55px; height: 39px; background: transparent url(../img/spot14.png) 0 0 no-repeat; }
#spot14:hover, #spot14:active, #spot14.active { background-position: -55px 0; }

.mejs-audio {
  display: none;
}

/*
 * item position list
 */
.item { float: left; position: relative; }
.schauplatz .pos1 { margin-top: 8px; margin-left: 158px; clear:both; }
.schauplatz .pos2 { margin-top: 55px; margin-left: 17px; }
.schauplatz .pos3 { margin-top: 26px; margin-left: 14px; }
.schauplatz .pos4 { margin-top: 0; margin-left: 78px; clear:both; }
.schauplatz .pos5 { margin-top: 28px; margin-left: 16px; }
.schauplatz .pos6 { margin-top: 27px; margin-left: 14px; }
.schauplatz .pos7 { margin-top: 4px; margin-left: 79px; clear:both; }
.schauplatz .pos8 { margin-top: 29px; margin-left: 96px; }
.schauplatz .pos9 { margin-top: 50px; margin-left: 14px; }

.protagonisten .pos1 { margin-top: 8px; margin-left: 158px; clear:both; }
.protagonisten .pos2 { margin-top: 54px; margin-left: 15px; }
.protagonisten .pos3 { margin-top: 22px; margin-left: 10px; }
.protagonisten .pos4 { margin-top: -24px; margin-left: 80px; clear:both; }
.protagonisten .pos5 { margin-top: 60px; margin-left: 14px; }
.protagonisten .pos6 { margin-top: 42px; margin-left: 15px; }
.protagonisten .pos7 { margin-top: -36px; margin-left: 80px; clear:both; }
.protagonisten .pos8 { margin-top: 37px; margin-left: 95px; }
.protagonisten .pos9 { margin-top: 9px; margin-left: 10px; }

/*
 * text container on dialoge page
 */

#text-container {
  position: relative;
  width: 721px;
  margin: 63px 0 0 29px;
  border-width: 0 17px 0 0;
}

#text-container.textblock h1 {
  padding-top: 0;
}

#text-container.textblock h2 {
  font-size: 0.95em;
  padding: 1.1em 0;
}

#text-container.textblock h3 {
  font-size: 0.9em;
  text-transform: none;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.mCSB_inside > .mCSB_container {
  margin-right: 0;
}

/*
 * video container and annotations on dialoge page
 */

.video-container-outer,
.video-container {
  position: relative;
}

.video-container-outer {
  top: 9px;
  left: 29px;
}

.video-container-outer div:not(.video-container) a {
  display: block;
}

.chapter,
.comment {
  position: absolute;
  z-index: 2147483647;
  font-size: 0.9em;
  line-height: 1em;
}

.chapter span {
  font-size: 1.05em;
  line-height: 1.05em;
}

.chapter div,
.comment div {
  display: none;
}

.arrow {
  display: none;
  background-image: url(../img/sprite.png);
  background-repeat: no-repeat;
}

.marker {
  display: block;
  position: absolute;
  cursor: pointer;
}

.chapter {
  bottom: 14px;
  width: auto;
}

.chapter div {
  position: relative;
  left: -12px;
  border-width: 0 12px 10px 0;
  margin-left: 10px;
}

.chapter .arrow {
  position: absolute;
  margin-top: -10px;
  margin-left: -12px;
  width: 25px;
  height: 32px;
  background-position: -379px 0;
}

.chapter .marker {
  bottom: -32px;
  width: 7px;
  height: 7px;
  margin-left: -3px;
  background: transparent url(../img/sprite.png) -397px -75px no-repeat;
}

.chapter a {
  margin-left: -10px;
  padding: 3px 5px 5px;
  color: #000;
  background: #fff;
}

.comment {
  top: 422px;
}

.comment div {
  margin-top: 21px;
  margin-left: -10px;
  border-width: 0 6px 6px 0;
}

.comment .arrow {
  position: absolute;
  top: 0;
  left: -9px;
  width: 18px;
  height: 21px;
  background-position: -379px -61px;
}

.comment .marker {
  top: -8px;
  width: 3px;
  height: 5px;
  margin-left: -1px;
  background: transparent url(../img/sprite.png) -399px -66px no-repeat;
}

.comment a {
  padding: 1px 3px;
  font-size: 0.9em;
  color: #fff;
  background: #000;
}

.video-links {
  width: 150px;
  position: absolute;
  top: 9px;
  right: 32px;
}

.video-links a {
  display: block;
  margin-bottom: 21px;
}

.video-links a:first-child {
  margin-bottom: 20px;
}

/*
 * video player
 */

.mejs-container {
  margin-bottom: 30px;
}

.item .mejs-container {
  margin-bottom: 0;
}

.mejs-container .mejs-controls {
  background: #2d2f32;
  bottom: -30px;
}

.item .mejs-container .mejs-controls {
  bottom: 0;
}

.item .mejs-overlay-button,
.item .mejs-overlay-loading {
  display: none;
}

.mejs-controls .mejs-time-rail .mejs-time-total,
.mejs-controls .mejs-time-rail .mejs-time-loaded,
.mejs-controls .mejs-time-rail .mejs-time-current,
.mejs-controls .mejs-time-rail .mejs-time-buffering {
  height: 3px;
}

.mejs-controls .mejs-time-rail .mejs-time-total {
  margin: 8px 5px;
  background: #4c4c4e;
}

.mejs-controls .mejs-time-rail .mejs-time-current {
  background: #16C1F3;
  /*background: transparent url(../img/sprite.png) -395px -52px no-repeat;*/
}

.mejs-controls .mejs-time-rail span {
  border-radius: 0;
}

.mejs-controls .mejs-time-rail .mejs-time-total .mejs-time-float {
  display: none !important;
}

/* ==========================================================================
   Media Queries
   ========================================================================== */

@media screen and (max-width: 1024px){
  img.bg {
    left: 50%;
    margin-left: -512px; }
}

@media only screen and (min-width: 35em) {

}

@media print,
(-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi) {

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
  background-color: transparent;
  border: 0;
  overflow: hidden;
  *text-indent: -9999px;
}

.ir:before {
  content: "";
  display: block;
  width: 0;
  height: 150%;
}

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  @page {
    margin: 0.5cm;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}