/* 
    Author     : mederake.com
*/
/* Basis */
html, body {
  margin: 0px;
  padding: 0px;
  border: 0px; }

body {
  text-align: left;
  font: normal normal 100 16px/150% 'Open Sans', sans-serif;
  color: #333333; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  padding: 0;
  font-weight: normal; }

p, th, td, li, dd, dt, ul, ol, blockquote, q, acronym, abbr, a, input, select, textarea {
  margin: 0;
  padding: 0; }

acronym, abbr {
  border-bottom: 1px dashed; }

small {
  font-size: .85em; }

big {
  font-size: 1.2em; }

a, a:link, a:visited, a:active, a:hover {
  text-decoration: underline; }

b {
  font-weight: bold; }

img {
  border: none; }

table {
  margin: 0;
  padding: 0;
  border: none; }

label {
  cursor: pointer; }

/* Hilfsklassen */
.clear {
  clear: both; }

.floatLeft {
  float: left; }

.floatRight {
  float: right; }

.centerElement {
  display: block;
  margin-left: auto;
  margin-right: auto; }

.nodecoration {
  text-decoration: none; }
  .nodecoration:link, .nodecoration:visited, .nodecoration:active, .nodecoration:hover {
    text-decoration: none; }

html, body {
  width: 100%;
  height: 100%;
  background-color: #eeeeee; }

#headerContainer {
  height: 65px; }

#filterContainer {
  position: relative;
  text-align: center;
  height: 65px; }
  #filterContainer .filterTrigger {
    text-decoration: none;
    cursor: pointer; }
    #filterContainer .filterTrigger:hover {
      color: #006b66; }
    #filterContainer .filterTrigger.active {
      text-decoration: underline;
      font-weight: bold; }
  #filterContainer .filterResetTrigger {
    margin: 0 5px 0 1px;
    width: 21px;
    display: inline-block;
    cursor: pointer;
    color: red;
    border: 1px solid red;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%; }
    #filterContainer .filterResetTrigger:hover {
      background-color: red;
      color: white; }
  #filterContainer .filterSelectorBox {
    position: absolute;
    width: 99%;
    display: none;
    z-index: 100;
    background-color: #eeeeee;
    border: 1px solid #333333;
    padding: 3px; }
    #filterContainer .filterSelectorBox label {
      margin-right: 10px; }

#contentContainer {
  height: 80%;
  position: relative; }

#listContainer {
  border: 1px solid #000;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
  margin: 0 10px;
  height: 100%;
  max-width: 33%;
  padding: 5px;
  overflow: auto;
  float: left; }
  #listContainer a {
    cursor: pointer;
    text-decoration: none; }

#detailContainer {
  height: 100%;
  overflow: auto;
  background-color: #eeeeee;
  display: none; }
  #detailContainer #detailLeftBox {
    float: left; }
  #detailContainer #detailRightBox {
    float: right; }
  #detailContainer #detail_title {
    font-size: 22px;
    font-weight: bold; }
  #detailContainer #media_img_container,
  #detailContainer #media_img_div {
    float: right; }
    #detailContainer #media_img_container img,
    #detailContainer #media_img_div img {
      margin-left: 10px; }
    #detailContainer #media_img_container span,
    #detailContainer #media_img_div span {
      margin-left: 10px;
      font-size: 25px;
      font-weight: 700;
      color: darkgray; }
  #detailContainer #detail_region {
    border: 1px solid #333333;
    border-radius: 50%;
    float: right;
    margin: 0 5px;
    padding: 5px;
    min-width: 20px;
    text-align: center; }
  #detailContainer #movie_img_div {
    margin: 0 5px 0 0; }
  #detailContainer #detail_credit {
    margin-top: 10px; }
  #detailContainer #detail_rating {
    border: 1px solid #333333;
    margin: 5px 0;
    float: left; }
  #detailContainer #detail_review {
    clear: both; }
  #detailContainer #detail_genre {
    float: left;
    margin-left: 30px; }
  #detailContainer #detail_sound {
    float: right; }
  #detailContainer #detail_cast {
    float: left; }
  #detailContainer #detail_overview {
    clear: both;
    display: block; }

.filter {
  display: inline; }

/* generel styles */
a, a:link, a:visited, a:active, a:hover {
  color: #333333; }

a:hover {
  color: #006b66; }

p {
  margin-bottom: 20px; }

h1 {
  color: #006b66;
  font-size: 145%;
  margin: 0 0 20px 0;
  font-weight: normal;
  text-transform: uppercase; }

h2 {
  color: #7b0059;
  font-size: 110%;
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 20px 0; }

h3 {
  color: #333333;
  font-size: 100%;
  font-weight: bold; }

ul {
  list-style-type: disc;
  list-style-position: outside;
  margin-bottom: 20px; }
  ul li {
    margin-left: 15px; }

@media (max-width: 400px) {
  #contentContainer {
    border-top: 1px solid #333333; }

  #headerContainer {
    height: 63px; }

  #listContainer {
    max-width: 97%;
    width: 97%;
    height: 100%;
    float: left;
    margin: 0;
    border: none;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    -moz-overflow-scrolling: touch; }

  #detailContainer {
    max-width: 100%;
    width: 100%;
    height: 100%;
    float: left;
    display: none;
    position: absolute; }
    #detailContainer #detailLeftBox {
      max-width: 55%; }
    #detailContainer #detail_credit table {
      width: auto; }
    #detailContainer #detail_genre {
      clear: both; }
    #detailContainer #detail_sound {
      float: none;
      clear: both; }
    #detailContainer #detail_cast {
      float: none;
      clear: both; }
    #detailContainer #detail_overview {
      margin: 10px; }

  table {
    width: 100%;
    margin: 10px 0; } }

/*# sourceMappingURL=style.css.map */