@charset "UTF-8";
/* CSS Document */

/* Default */ 
html, body {   margin:0;  padding:0;  height:100%; color: #ccc; font-family: Arial,Helvetica,sans-serif; font-size: 14px;  line-height: 19px;  cursor:default;  text-align: left;  background-color:  #000; }


/* Necessary */
sup, sub { line-height: 1em; }
input [type="submit"], select, button  { cursor: pointer; }
.clr{clear: both;}
.clearfix:after {  content: ".";   visibility: hidden;  display: block;  height: 0;   clear: both;}
img{border:none;}
.trenner{white-space:nowrap;}


/* HTML5 display-role reset for older browsers */ 
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

em{color: #B5D0A8; font-weight: bold;}

/* Listen */
ul{list-style-type:none; }
li {padding: 4px 9px ; }

ul.team{margin: 0px; padding: 0px 20px; list-style-image:url(../_images/layout/listen.png) ; }

ul.team ul{ display: inline-block; float: right;  list-style-image:url(../_images/layout/listen_hidden.png); text-align: right;}
ul.team ul li {padding: 0px ;}
.teamBtn  li{ background: url(../_images/layout/listen_link.png) left 6px no-repeat;  }
.teamBtn  li ul li { background:none}


/* Titeln */
h1{ letter-spacing: 0.1em;  color: #B5D0A8;  font-size: 20px; line-height: 1.3em;}
h2{letter-spacing: 0.1em;  color: #B5D0A8;  font-size: 18px; line-height: 1.3em; text-align: center;}
h3{letter-spacing: 0.1em;  color: #B5D0A8;  font-size: 16px; line-height: 1.3em; margin-bottom: 3px;}

/* LINKS */
a {text-decoration:none; color: #B5D0A8; cursor: pointer;}
a:hover, a:active, a:focus {color: #FF0000;}
#footer a {text-decoration:none; color: #666;}



/* Rules */
hr{ background-color: #B5D0A8;  color: #B5D0A8;  border: 0;height: 1px;}

/* Problem Float */
.cf:before, .cf:after{content:""; display: table;}
.cf:after{clear: both;}
.cf{*zoom: 1;}

.clr{ clear: both;}
.spacerSmall{height: 2%;}
.spacerMedium{height: 4%;}
.spacerBig{height: 6%;}

/* Zitaten */
blockquote{ display:block; padding: 10px 20px 10px 25px; margin: 0 0 10px; position: relative; line-height: 1.2; text-align: justify;background-color: #32312C; }
blockquote::before{ content: "\201C"; font-weight: bold; color: #b5d0a8;position: absolute;left: 8px; top:5px; font-size: 1.7em;}
blockquote::after{content: "";}
blockquote em{font-style: italic; color: #b5d0a8;line-height: 2em;}

/*=========================================================================================================*/
/* Aufbau */
/*=========================================================================================================*/

/* Header */
#headerContainer {z-index: 11; position: fixed; top: 0;width: 100%; height: 50px;  background-color: #000;}
#header { position: relative; width: 1010px; margin: 0px auto; height: 30px; text-align: center;}
#kino{float: left; margin-top: 12px; margin-right: 15px;}

/* Main Nav */
#header ul{ list-style-type:none; margin:0px; padding: 15px 0; color: #B5D0A8;}
#header li{display: inline; font-size: 15px; text-transform:uppercase; padding: 0px 10px; cursor: pointer;}
#header li a.aktiv, #headerContainer li a:hover {color: #FF0000;}


/* Content */
#darsteller{ z-index: 10;position: fixed; width: 100%; height: 98%; margin: 0px; opacity: 0;
background-image: url(../_images/layout/darsteller.png);
background-repeat:no-repeat;
background-position:right top;
-o-background-size: auto 100%, auto;
-moz-background-size: auto 100%, auto;
-webkit-background-size:  auto 100%, auto;
background-size: auto 100% , auto;}

#container{ z-index: 10;position: absolute; width: 100%; height: 94%; margin: 0px;}

#content{opacity: 0; z-index: 10;position: relative; display: block; width: 40%;min-width: 520px;  margin: 0px 19%; padding-top: 40px; padding-bottom: 80px; height: 90%; text-align: center;}
#logo{z-index: 10; position: relative;  display: block; height: 30%; width: auto; max-width: 469px; max-height: 280px;  margin: 3% auto; }

#inhalt_trailer{z-index: 10;position: relative; display: block; width: 100%;  margin: 0px auto 5px auto; background-color: #000;
-webkit-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    0px 3px 12px 0px rgba(0, 0, 0, 0.75);
box-shadow:         0px 3px 12px 0px rgba(0, 0, 0, 0.75);}

#inhalt_trailer img {width: 100%;}

#inhalt{ z-index: 10; position: relative;  width: 100%;  height: 50%;  margin: 5px auto; background: url(../_images/layout/der_kreis_bg_inhalt.png) left top repeat; 
-webkit-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    0px 3px 12px 0px rgba(0, 0, 0, 0.75);
box-shadow:         0px 3px 12px 0px rgba(0, 0, 0, 0.75);}

.inhaltTeam{ z-index: 300; position: absolute;  width: 40%;  min-width: 500px; height: 40%; min-height: 270px; background: url(../_images/layout/der_kreis_bg_inhalt_panel.png) left top repeat; 
-webkit-box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow:    0px 3px 12px 0px rgba(0, 0, 0, 0.75);
box-shadow:         0px 3px 12px 0px rgba(0, 0, 0, 0.75);}

#inhaltRegie{ bottom: 25%; left: 10%; }
#inhaltOstertag{ top: 25%; right: 10%; }
#inhaltRapp{ top: 25%; right: 10%; }
#inhaltFelix{ top: 25%; right: 10%; }
#inhaltRappF{ top: 25%; left: 10%; }
.thumbs{float: right; margin-left: 20px; margin-right: 10px;}

.scroll{position: relative; display: block; padding-top: 15px;  padding-left: 8px; width:99.7%;  height:90%; z-index: 200; text-align: left; }
.text{width: 96%; padding-left: 8px;}
.textList{width: 90%; margin: 8px auto;}

#zitat{ z-index: 10; position: relative; display: block;  height: 5%; width: auto;  margin: 20px auto 5px auto;}

/*  BTNs */
#facebook{display: block; top: 10px;  position: fixed; right: 10px; height: 30px; width: 30px;  z-index: 20; background: url(../_images/layout/der_kreis_btn_facebook.png) left top no-repeat; }
#sprachen{display: block; top: 10px;  position: fixed; right: 50px; height: 30px; width: 30px;  z-index: 20; background: url(../_images/layout/der_kreis_btn_gb.png) left top no-repeat; }
#facebook:hover, #sprachen:hover{ background-position:  left -30px ; }

#berlinale{ position: fixed; bottom: 8px; right: 1%;   z-index: 20; }

/*=========================================================================================================*/
/* Content */
/*=========================================================================================================*/
/* Trailer */
.videoContainer {  position: relative; padding-bottom: 56.25%;  height: 0; overflow: hidden;}
.videoContainer iframe,.videoContainer object,.videoContainer embed {  position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

 /* Footer */
#footerContainer { background-color:  #000; bottom: 0px; height: 90px; position: fixed; text-align: left; width: 100%;  z-index: 10; color: #666;}
#footer{ position: relative; width: 1050px; margin: 10px auto; height: 50px; text-align: left; padding-top: 10px;}

#footer a {text-decoration:none; color: #666;}
#footer a:hover {text-decoration:none; color: #FF0000;}


/* Partner Link JQ */
#footer a.partner{padding: 3px 10px 3px 15px; background: url(../_images/layout/der_kreis_partnerLink.png) left -15px no-repeat; color: #B5D0A8;}
#footer a.partner:hover {   text-shadow: 0px 0px 10px #FFF; color: #FF0000; }
#footer a.open{ background: url(../_images/layout/der_kreis_partnerLink.png) left 7px no-repeat; color: #B5D0A8;}
#footer a.open:hover { text-shadow: 0px 0px 10px #FFF; color: #FF0000;}


/* Partner */
#partnerContainer {width: 100%; height: 310px; position:absolute; left:0; bottom:90px; display:none;  z-index: 9; background:#000; padding: 0px;}
#partner { position: relative; width: 60%; margin: 0px auto; height: 50px; text-align: center; padding-top: 10px;}
#partner h1{  color:#FFF;  }
#partner img{ margin-right: 20px; opacity:0.7;filter:alpha(opacity=70); /* For IE8 and earlier */ }
#partner img:hover{ margin-right: 20px; opacity:1;filter:alpha(opacity=100); /* For IE8 and earlier */}

.details{ font-size: 14px; }
.details td{ vertical-align:top; }
.details td.datum{ color: #B5D0A8; padding-right: 10px; }



/*=========================================================================================================*/
/* Camera Slideshow */
/*=========================================================================================================*/
.cameraContainer, .bgContainer {bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; z-index: 0;}
.camera_bar { z-index: 2; }
.camera_overlayer { opacity: .1; }

#galerie, #regie, #ostertag, #rapp, #felix, #rappF {position: absolute; top:0; top:-2000px; width:100%; height:100%; background: rgba(0,0,0,0.7); z-index: 100; opacity: 0; }
#cameraGalerie, #cameraRegie, #cameraOstertag, #cameraRapp, #cameraFelix, #cameraRappF, #cameraBg {bottom: 0; height: 100%; left: 0; position: absolute; right: 0; top: 0; z-index: 0;}
#galerieClose, #regieClose, #ostertagClose, #rappClose, #felixClose, #rappFClose{z-index: 22; width: 41px;  height: 41px;   text-align: center; position: absolute; top: 20px; right: 20px;  	display: block; cursor: pointer; background: transparent url(../_images/layout/der_kreis_close.png)  left top no-repeat;}



.video-js {padding-top: 48%;  width: 100%; margin: 0px auto;}
.vjs-fullscreen {padding-top: 0px}
#medien{position: absolute; right: 10px; bottom: 75px; z-index: 90000;}