@charset "UTF-8";
/**
 *
 * Kinok: Stylesheet public web
 *
 * @author     Manuel Märklin
 * @copyright  2012 Manuel Märklin, Switzerland
 * @link        https://www.2mp.ch
 */
@import url("../index/color-css");
@font-face {
  font-family: 'Vollkorn';
  font-weight: 400;
  font-style: normal;
  src: url("Vollkorn-Regular.ttf") format("truetype"); }
@font-face {
  font-family: 'Vollkorn';
  font-weight: 400;
  font-style: italic;
  src: url("Vollkorn-Italic.ttf") format("truetype"); }
@font-face {
  font-family: 'Vollkorn';
  font-weight: 700;
  font-style: normal;
  src: url("Vollkorn-Bold.ttf") format("truetype"); }
@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 400;
  font-style: normal;
  src: url("SourceSansPro-Regular.ttf") format("truetype"); }
@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 600;
  font-style: normal;
  src: url("SourceSansPro-SemiBold.ttf") format("truetype"); }
@font-face {
  font-family: 'Source Sans Pro';
  font-weight: 700;
  font-style: normal;
  src: url("SourceSansPro-Bold.ttf") format("truetype"); }
@media all {
  * {
    margin: 0;
    padding: 0; }

  body {
    font-size: 18px;
    font-family: 'Vollkorn', serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.25em;
    height: 100%;
    color: #ffffff;
    background-color: #000000; }

  a {
    text-decoration: none;
    cursor: pointer; }

  h1 {
    font-size: 2.2em;
    line-height: 1.0em;
    font-weight: 400;
    padding-bottom: 0.3em; }

  h2 {
    font-size: 1.3em;
    line-height: 1.1em;
    font-weight: 400;
    font-style: normal;
    padding-bottom: 0.2em; }

  hr {
    height: 1px;
    color: #000000;
    background-color: #000000;
    margin: 0.5em 0; }

  img {
    border: 0; }

  ol, ul {
    margin: 0;
    padding-left: 1.5em;
    padding-bottom: 1.0em; }

  ul {
    list-style-type: circle; }

  table {
    width: 100%;
    border-collapse: collapse; }

  td,
  th {
    vertical-align: top; }

  iframe {
    width: 100%;
    margin-bottom: 1.0em; }

  /**
    * Content of main layout elements
    */
  html {
    height: 100% !important; }

  #page {
    position: relative !important;
    min-height: 100%;
    /* real browsers */
    height: auto !important;
    text-align: left;
    margin: 0 auto;
    max-width: 100%;
    z-index: 100; }

  #main {
    margin: 0; }

  .section {
    clear: both;
    padding: 0;
    margin: 0;
    width: 100%; }

  .col {
    display: block;
    float: left;
    margin: 0px;
    margin-top: 114px;
    padding-top: 16px; }

  .group:after {
    clear: both; }

  #col_1 {
    position: fixed;
    margin-left: 40px;
    width: 130px; }

  #col_2 {
    margin-left: 170px;
    padding-right: 20px;
    float: left;
    width: 210px; }

  #col_3 {
    position: absolute;
    margin-left: 420px;
    width: 740px;
    min-height: 100%;
    color: #000000;
    background-color: #ffffff; }
    #col_3 #col_3_a {
      float: left;
      width: 520px; }
    #col_3 #col_3_b {
      margin-left: 520px;
      width: 220px; }

  /* Form */
  form {
    font-size: 1.0em;
    line-height: 1.0em;
    padding: 0; }
    form .errormsg,
    form .formerror {
      color: #ff0000;
      font-size: 0.9em;
      padding-bottom: 0.5em; }
    form .form-group {
      margin-bottom: 0.5em; }
      form .form-group.labels-top label {
        margin-bottom: 0.1em; }
      form .form-group .elementgroup .inline {
        display: inline-block;
        margin-top: 0;
        margin-bottom: 0; }
    form label.required::after {
      content: '*';
      font-size: 1.1em;
      margin-left: 0.3rem; }
    form input,
    form select,
    form select optgroup,
    form textarea {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1.0em;
      font-style: normal;
      padding: 0.2em;
      background-color: #dddddd;
      border: 0;
      width: 190px; }
    form input[type="radio"] {
      margin-top: 0.5em;
      width: 15px;
      margin-right: 0.7em; }
    form input[type="checkbox"],
    form .checkbox {
      vertical-align: top;
      width: 15px;
      padding-right: 0; }
    form button,
    form input[type="submit"],
    form input[type="reset"] {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 0.85em;
      text-transform: uppercase;
      letter-spacing: 0.1em;
      cursor: pointer;
      background: transparent;
      padding: 0.2em 1.0em;
      margin-top: 1.5em;
      width: auto;
      border: 1px solid #000000; }
    form input[disabled],
    form input[readonly] {
      background-color: #f0f0f0; }
    form input.small {
      width: 50px; }
    form input.med {
      width: 132px; }
    form input.date {
      width: 91px; }
    form input.num {
      text-align: right; }
    form select {
      width: 196px; }
      form select.small {
        width: 79px; }
    form .label,
    form .split {
      padding-bottom: 0.2em; }
    form .postfix {
      padding-left: 0.5em; }
    form .checkbox-text .postfix {
      padding-left: 0; }
    form .radioitems {
      margin-bottom: 1.0em; }
      form .radioitems ul {
        padding-left: 0; }
      form .radioitems li {
        list-style: none;
        margin-left: 0; }
    form .whpclass,
    form .whpclass label {
      opacity: 0;
      position: absolute;
      top: 0;
      left: 0;
      height: 0;
      width: 0;
      z-index: -1; }

  div.button a {
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    cursor: pointer;
    background: transparent;
    padding: 0.1em 1.0em;
    margin-top: 2.0em;
    width: auto;
    border: 1px solid #000000; }

  /* Header */
  #header {
    position: fixed;
    width: 100%;
    height: 115px;
    background-color: #000000;
    z-index: 500; }
    #header .contact {
      position: absolute;
      bottom: 15px;
      right: 40px;
      font-size: 0.8em;
      line-height: 1.25em; }
      #header .contact a {
        color: #ffffff; }
    #header .today {
      position: absolute;
      bottom: 20px;
      left: 50px;
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 2.0em;
      font-weight: 600;
      line-height: 1.0em;
      cursor: pointer; }
      #header .today a {
        text-transform: uppercase;
        font-size: 1.8em;
        font-weight: 700;
        color: #ffffff; }
        #header .today a img {
          position: relative;
          left: 18px; }

  #spacer {
    position: fixed;
    top: 108px;
    width: 100%;
    height: 2px;
    background-color: #000000;
    border-bottom: 1px solid #ffffff;
    z-index: 600; }

  /* Col 1 & 2 (Navigation), Menu  */
  #nav li {
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.2em;
    font-size: 0.8em;
    margin: 0;
    padding: 0 0 0.3em 0;
    hyphens: auto; }
    #nav li hr {
      border: 0;
      margin-bottom: 1.5em; }
  #nav ul {
    padding-left: 0;
    list-style: none;
    cursor: pointer; }
    #nav ul li a {
      color: #ffffff;
      display: block; }
    #nav ul li hr {
      border: 0;
      margin-bottom: 1.5em; }
    #nav ul li.active a {
      text-transform: uppercase;
      font-weight: 700;
      letter-spacing: 0.13em; }
    #nav ul ul {
      padding-left: 0; }

  #subnav a {
    color: #ffffff;
    display: block; }
  #subnav div {
    padding-bottom: 0.3em; }
  #subnav h2 {
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    letter-spacing: 1.0px;
    cursor: pointer;
    line-height: 1.2em; }
  #subnav li,
  #subnav h2 {
    font-size: 0.8em;
    margin: 0;
    padding: 0; }
  #subnav ul {
    padding-left: 0;
    list-style: none;
    cursor: pointer; }
    #subnav ul.movie {
      display: none; }
      #subnav ul.movie.active {
        display: block;
        padding: 0.2em 0; }
    #subnav ul.archive {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #ffffff; }
  #subnav li.active a,
  #subnav h2.active,
  #subnav h2.active a {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em; }
  #subnav form {
    font-size: 0.8em;
    padding: 0; }
    #subnav form div {
      padding-bottom: 0; }
    #subnav form button,
    #subnav form input[type="submit"],
    #subnav form input[type="reset"] {
      color: #ffffff;
      border: 1px solid #ffffff; }
    #subnav form button,
    #subnav form input[type="submit"]:focus {
      border: 1px solid #ffffff; }
    #subnav form td div.select {
      float: left; }
    #subnav form td input {
      margin-bottom: 0.5em; }
    #subnav form td.keyword {
      padding-top: 0.5em; }
    #subnav form select.small {
      width: 95px;
      margin-right: 5px; }
  #subnav .movie li {
    line-height: 1.2em;
    padding-left: 1.0em;
    padding-bottom: 0.4em; }

  /* Col 3: Content  */
  #content {
    padding: 0 10px;
    border-right: 1px solid #000000;
    /* seat map for reservation */ }
    #content hr.top {
      border: 1px solid #000000; }
    #content img {
      width: 100%;
      height: auto;
      padding-bottom: 1.4em; }
    #content ul {
      list-style: none;
      padding-bottom: 0;
      padding-left: 2.0em;
      text-indent: -1.0em; }
      #content ul li:before {
        content: '–';
        padding-right: 0.5em; }
    #content form {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 0.85em;
      letter-spacing: 0em;
      line-height: 1.2em; }
      #content form .labels-top label {
        display: block; }
      #content form input,
      #content form select,
      #content form select optgroup,
      #content form textarea {
        width: 320px; }
      #content form input.med {
        width: 232px; }
      #content form input.small {
        width: 80px; }
      #content form button,
      #content form input[type="submit"],
      #content form input[type="reset"] {
        padding: 0.5em 1.0em;
        margin-top: 1.0em;
        width: 210px; }
      #content form .error {
        background-color: #ff8888; }
        #content form .error.seatmap {
          padding: 0.7em 0; }
    #content table {
      margin-bottom: 1.5em; }
      #content table tr td {
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 0.85em;
        letter-spacing: 0em;
        line-height: 1.2em; }
        #content table tr td hr {
          margin: 0.3em 0; }
        #content table tr td.day, #content table tr td.date, #content table tr td.monday {
          font-weight: 700; }
        #content table tr td.day {
          text-transform: uppercase;
          padding-left: 0.2em; }
        #content table tr td.movie {
          font-family: 'Vollkorn', serif; }
        #content table tr td .info {
          font-size: 0.9em;
          line-height: 1.0em;
          font-style: italic; }
      #content table tr.program {
        cursor: pointer;
        margin-top: 0.5em; }
        #content table tr.program a {
          color: #000000; }
    #content .author {
      font-size: 0.9em;
      font-style: italic; }
    #content .caption {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 0.8em;
      letter-spacing: 0em;
      line-height: 1.2em;
      text-transform: uppercase;
      vertical-align: bottom;
      float: right;
      padding-top: 0.3em; }
    #content .credits {
      font-family: 'Vollkorn', serif;
      font-size: 0.7em;
      line-height: 1.2em;
      padding-bottom: 1.4em; }
    #content .customer {
      margin: 2.0em 0 2.0em 2.0em; }
    #content .month img {
      padding-bottom: 0; }
    #content .seatmap {
      margin-bottom: 1.0em; }
      #content .seatmap .seating {
        color: #ffffff;
        background-color: #000000; }
        #content .seatmap .seating .screen {
          text-transform: uppercase;
          letter-spacing: 0.2em;
          text-align: center;
          padding: 0.3em;
          border-bottom: 1px solid #dddddd; }
        #content .seatmap .seating .front,
        #content .seatmap .seating .back {
          padding: 0.5em;
          font-size: 0.8em;
          text-transform: uppercase;
          letter-spacing: 0.2em; }
        #content .seatmap .seating .front {
          text-align: right; }
        #content .seatmap .seating .sector {
          display: table;
          width: 120px;
          padding-top: 1.0em; }
          #content .seatmap .seating .sector .row {
            display: table-row; }
            #content .seatmap .seating .sector .row .aisle,
            #content .seatmap .seating .sector .row .seat {
              display: table-cell;
              text-align: center;
              vertical-align: middle; }
            #content .seatmap .seating .sector .row .aisle {
              padding: 1.0em 0.5em 0 0.5em; }
            #content .seatmap .seating .sector .row .seat .element {
              position: relative;
              margin: 0.24em;
              width: 1.6em;
              height: 1.6em; }
              #content .seatmap .seating .sector .row .seat .element input[type=checkbox] {
                visibility: hidden; }
              #content .seatmap .seating .sector .row .seat .element input[type=checkbox]:checked + label {
                background-color: #ffdd00; }
              #content .seatmap .seating .sector .row .seat .element label {
                position: absolute;
                top: 0;
                left: 0;
                color: #000000;
                background-color: #ffffff;
                border: 1px solid #ffffff;
                width: 1.6em;
                height: 1.5em;
                padding-top: 0.2em;
                cursor: pointer; }
              #content .seatmap .seating .sector .row .seat .element.blocked label {
                background-color: #777777;
                color: #777777;
                border-color: #dddddd;
                cursor: default; }
              #content .seatmap .seating .sector .row .seat .element.reserved label {
                background-color: #000000;
                border-color: #dddddd;
                cursor: default; }
              #content .seatmap .seating .sector .row .seat .element.wheelchair label {
                color: transparent;
                background-image: url(../images/rollstuhl_icon.svg);
                background-repeat: no-repeat;
                background-position: center;
                background-size: 70%; }
      #content .seatmap .zoom {
        display: none; }
    #content .service a {
      display: block;
      margin-top: 1.0em; }
    #content .theme {
      font-family: 'Source Sans Pro', sans-serif;
      text-transform: uppercase;
      padding-bottom: 5px;
      letter-spacing: 0.05em; }
    #content .filmingo {
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 56.25%; }
      #content .filmingo iframe {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0; }

  /* Col 4: Info  */
  #info {
    position: relative;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.75em;
    line-height: 1.3em;
    padding: 0 10px;
    z-index: 300; }
    #info a,
    #info h1,
    #info td,
    #info .text strong {
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1.0em; }
    #info a {
      font-weight: 600;
      line-height: 1.5em;
      color: #000000;
      text-transform: uppercase;
      letter-spacing: 0.1em; }
      #info a.trailer {
        display: block;
        padding: 1.0em 0; }
    #info div.button {
      margin-top: 2.0em; }
    #info h1 {
      font-weight: 700; }
      #info h1.reservation {
        font-size: 1.2em; }
    #info p {
      padding-bottom: 0.5em; }
    #info table {
      margin-bottom: 1.0em;
      width: auto; }
      #info table tr.inactive {
        color: #999999; }
      #info table tr.reservation {
        cursor: pointer; }
      #info table td {
        font-size: 1.2em;
        font-weight: 700;
        line-height: 1.2em;
        padding-right: 0.7em; }
        #info table td.day {
          text-transform: uppercase; }
    #info .customer td {
      font-size: 1.0em;
      font-weight: 400;
      padding-right: 0.5em;
      color: #000000; }
    #info form .checkbox {
      margin-bottom: 0; }
    #info form .form-group {
      font-size: 0.85em;
      font-weight: 500;
      vertical-align: middle;
      color: #000000; }
      #info form .form-group.errormsg {
        color: #ff0000; }
    #info .note {
      margin-bottom: 1.0em;
      font-weight: 600; }
    #info .text {
      padding: 1.45em 0; }
      #info .text strong {
        font-size: 1.0em;
        letter-spacing: 0.03em; }
    #info .fb-like {
      margin-top: 2.0em; }

  /* Preview */
  #preview {
    position: fixed;
    top: 130px;
    left: 950px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 0.75em;
    line-height: 1.3em;
    width: 200px;
    color: #000000; }
    #preview img {
      width: 100%;
      height: auto; }
    #preview h1 {
      font-size: 1.0em;
      font-weight: 700; }
    #preview .text {
      padding: 1.45em 0; }
    #preview .theme {
      text-transform: uppercase;
      letter-spacing: 0.05em;
      font-size: 0.9em; }

  /* Footer */
  #footer {
    position: fixed;
    bottom: 2.0em;
    right: 2.0em;
    -moz-border-radius: 60px;
    -webkit-border-radius: 60px;
    border-radius: 60px;
    z-index: 200; }
    #footer img {
      height: 120px;
      width: 120px;
      -moz-border-radius: 60px;
      -webkit-border-radius: 60px;
      border-radius: 60px; }

  /* Widgets: Today, Trailer, Member */
  #schlagzeile,
  #information,
  #member,
  #today,
  #trailer {
    position: absolute;
    color: #000000;
    border: 1px solid #000000;
    padding: 10px 20px 30px 20px;
    z-index: 600; }
    #schlagzeile a,
    #information a,
    #member a,
    #today a,
    #trailer a {
      color: #000000; }
    #schlagzeile .close img,
    #information .close img,
    #member .close img,
    #today .close img,
    #trailer .close img {
      position: absolute;
      top: 0;
      right: 0;
      max-width: 20px;
      cursor: pointer; }

  #schlagzeile {
    top: 240px;
    left: 160px;
    width: 400px;
    font-size: 1.6em;
    line-height: 1.2em; }

  #information {
    top: 120px;
    left: 620px;
    width: 250px;
    font-size: 1.6em;
    line-height: 1.2em; }

  #schlagzeile p.delimiter,
  #information p.delimiter {
    border-bottom: 2px solid #000000;
    margin: 0.5em 0; }

  #schlagzeile .header,
  #information .header,
  #member .header {
    position: relative;
    height: 5px; }

  #member,
  #today,
  #trailer {
    background-color: rgba(255, 255, 255, 0.9); }

  #member {
    top: 500px;
    left: 80px;
    width: 140px;
    padding: 10px 20px; }
    #member a {
      font-size: 1.6em;
      line-height: 1.2em; }

  #today,
  #trailer {
    top: 60px;
    left: 240px;
    width: 600px; }

  #today .header {
    position: relative;
    font-family: 'Source Sans Pro', sans-serif;
    text-transform: uppercase;
    height: 80px;
    border-bottom: 3px solid #000000; }
    #today .header .day,
    #today .header .date {
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 3.5em;
      font-weight: 700;
      line-height: 1.1em; }
    #today .header .day {
      left: 4px; }
    #today .header .date {
      left: 120px; }
    #today .header .nav {
      position: absolute;
      bottom: 5px;
      right: 0;
      font-size: 1.2em;
      letter-spacing: 0.05em; }
  #today .program td {
    cursor: pointer; }
    #today .program td.inactive {
      color: #999999; }
  #today .program tr.new {
    border-top: 2px solid #000000; }
  #today .program .info {
    font-size: 1.4em;
    font-style: italic;
    line-height: 1.2em; }
  #today .program .movie {
    font-size: 2.0em;
    line-height: 1.0em;
    padding-bottom: 0.1em; }
  #today .program .time,
  #today .program .theme {
    font-family: 'Source Sans Pro', sans-serif; }
  #today .program .theme {
    font-size: 1.2em;
    line-height: 1.7em;
    text-transform: uppercase;
    letter-spacing: 0.05em; }
  #today .program .time {
    font-size: 1.3em;
    font-weight: 700;
    line-height: 1.6em;
    width: 110px; }

  #trailer {
    display: none; }
    #trailer iframe {
      width: 100%; }
    #trailer .header {
      position: relative;
      height: 30px; } }
/**
 *	Medium screen
 */
@media screen and (min-width: 1001px) and (max-width: 1175px) {
  body {
    font-size: 16px; }

  #col_1 {
    margin-left: 35px;
    width: 100px; }

  #col_2 {
    margin-left: 145px;
    padding-right: 15px;
    width: 180px; }

  #col_3 {
    margin-left: 350px;
    width: 640px; }
    #col_3 #col_3_a {
      width: 440px; }
    #col_3 #col_3_b {
      margin-left: 440px;
      width: 210px; }

  form input,
  form textarea {
    width: 170px; }
  form input.small {
    width: 40px; }
  form input.med {
    width: 122px; }
  form input.date {
    width: 81px; }
  form select {
    width: 176px; }

  #subnav form select.small {
    width: 85px;
    margin-right: 5px; }

  #content .seatmap .seating .sector .row .seat .element {
    margin: 0.16em; }

  #preview {
    left: 800px;
    width: 180px; }

  #footer img {
    height: 100px;
    width: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px; }

  #schlagzeile {
    left: 120px; }

  #information {
    left: 530px; }

  #member {
    top: 450px; }

  #today,
  #trailer {
    top: 60px;
    left: 150px; } }
@media screen and (max-width: 1000px) {
  body {
    font-size: 15px; }

  #col_1 {
    margin-left: 30px;
    width: 90px; }

  #col_2 {
    margin-left: 130px;
    padding-right: 15px;
    width: 160px; }

  #col_3 {
    margin-left: 300px;
    width: 580px; }
    #col_3 #col_3_a {
      width: 400px; }
    #col_3 #col_3_b {
      margin-left: 400px;
      width: 180px; }

  form input,
  form textarea {
    width: 160px; }
  form input.small {
    width: 35px; }
  form input.med {
    width: 117px; }
  form input.date {
    width: 76px; }
  form select {
    width: 166px; }

  #subnav form input {
    width: 150px; }
  #subnav form select.small {
    width: 75px;
    margin-right: 5px; }

  #content .seatmap .seating .sector .row .aisle {
    padding: 0.3em; }
  #content .seatmap .seating .sector .row .seat .element {
    margin: 0.16em; }

  #preview {
    left: 710px;
    width: 160px; }

  #footer img {
    height: 100px;
    width: 100px;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px; }

  #schlagzeile {
    left: 75px; }

  #information {
    left: 420px; }

  #member {
    top: 400px;
    left: 30px; }

  #today,
  #trailer {
    top: 60px;
    left: 120px; } }