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

/* Default */ 
html, body {   margin:0;  padding:0;  height:100%; color: #186d77; font-family: Arial,Helvetica,sans-serif; font-size: 14px;  line-height: 19px;  cursor:default;  text-align: left;  background-color:  #39b9c3; overflow: hidden;}
body#film{ background-color:  #877c69; }
body#cast{ background-color:  #dd5ea2; }
body#crew{ background-color:  #8bce77; }
body#presse{ background-color:  #d3ce66; }

#background-image{ opacity:0; filter:alpha(opacity=0); /* For IE8 and earlier */}

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

@font-face {font-family: 'Metroscript'; src: url('/css/fonts/metroscript.eot'); src: url('/css/fonts/metroscript.eot#iefix') format('embedded-opentype'), url('/css/fonts/metroscript.woff') format('woff'), url('/css/fonts/metroscript.ttf') format('truetype'), url('/css/fonts/metroscript.svg') format('svg'); font-weight: normal; font-style: normal}
@font-face { font-family: 'Lionel Classic'; src: url('/css/fonts/lionel-classic.eot'); src: url('/css/fonts/lionel-classic.eot#iefix') format('embedded-opentype'), url('/css/fonts/lionel-classic.woff') format('woff'), url('/css/fonts/lionel-classic.ttf') format('truetype'), url('/css/fonts/lionel-classic.svg') format('svg'); font-weight: normal; font style: normal;}

/* Impressum  Table*/ 
table {border-collapse: collapse; border-spacing: 0; font-size: 13px; }
table td{padding: 15px 0px 6px 0px; text-align: left; vertical-align: top;}
table tr{border-bottom: 1px solid #A8C9D3;}
table td.beschreibung{font-family: 'Lionel Classic';  letter-spacing: 0.1em;  color: #C5418B;  font-size: 14px; line-height: 1.3em; padding-top: 18px;}

/* Listen */
ul{list-style-type:none; margin-left: -20px;}
ul li{  margin: 0; padding: 0;   margin-bottom: 6px; }
#nav ul{list-style-type:none; margin: 0; padding: 0;}
#nav ul li{  margin: 0; padding: 0;   margin: 0; }

ul.crew{list-style-image:url(/images/layout/list_sterne.png); margin-left: -20px;}
.crew li{ font-family: 'Lionel Classic';  letter-spacing: 0.1em;  color: #C5418B;  font-size: 18px; margin-bottom: 12px; padding-top: 6px; padding-bottom: 2px; border-bottom: 1px solid transparent; padding-left: 8px;}
.crew li .crew_namen{ font-family: Arial,Helvetica,sans-serif;   letter-spacing: 0.1em; color: #186d77; font-size: 14px; }
.crew a li:hover{color: #C5418B;  background: url(/images/layout/list_lupe.png) #def6fb right 6px no-repeat; border-bottom: 1px solid #186d77; }

#crew ul.crew{list-style-image:url(/images/layout/list_sterne_rot.png); margin-left: -20px;}
#crew .crew li{ color: #d54543;  }



/* Titel */
h1{font-family: 'Lionel Classic';  letter-spacing: 0.1em;  color: #C5418B;  font-size: 20px; line-height: 1.3em;}
#presse h1{color: #d54543; }
h2{font-family: 'Lionel Classic';  letter-spacing: 0.1em;  color: #2DB8C8;  font-size: 18px; line-height: 1.3em;}
h3{font-family: 'Metroscript';  letter-spacing: 0.1em;  color: #2DB8C8;  font-size: 35px; line-height: 1.3em; margin-top: -15px; margin-left: 3px; margin-bottom: 18px;}

.slogan{ width:100%; text-align: center; font-family: 'Lionel Classic';  color: #FFF; letter-spacing: 0.1em;  line-height: 1.2em; text-shadow: 0px 1px 1px #666;  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=2); z-index: 30;}
.titel{position:absolute; top: 5px; left: 7px;font-family: 'Metroscript';  font-size: 90px; color: #FFF; text-shadow: 0px 1px 1px #666;  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=2);}
#ecards_vorschau .titel{position:relative;display: block;margin: 40px 0;font-family: 'Metroscript';  font-size: 70px; color: #FFF; text-shadow: 0px 1px 1px #666;  progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=2);}


/* LINKS */
a {text-decoration:none; color:#666;}
a:hover, a:active, a:focus {color: #C5418B;}

a.pfeile {text-decoration:none; color:#186d77; background: url(/images/layout/links.png) left 3px no-repeat; padding-left: 22px;}
a.pfeile:hover, a.pfeile:active, a.pfeile:focus {color: #dd5096; background-position: left -10px; }


/* 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;}


hr{ background-color: #C5418B;  color: #C5418B; /border: 0;height: 1px;}

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


/* Aufbau */
/*=========================================================================================================*/
/* Social BTNs */
#home #social {opacity:0; filter:alpha(opacity=0); /* For IE8 and earlier */}
#social {position: fixed; top: 20px; right: 1%; width: 145px; height: 70px;  z-index: 20; }

#btn_facebook{  float: left;width: 71px; height: 72px; background: url(/images/layout/btn_facebook.png) left top no-repeat;   }
#btn_facebook:hover{  background-position: left -80px;  } 
#btn_youtube{  float: right;width: 71px; height: 72px; background: url(/images/layout/btn_youtube.png) left top no-repeat;   }
#btn_youtube:hover{  background-position: left -80px;  } 

/* eCards & Weitersagen BTNs */
#home #verbreitern {opacity:0; filter:alpha(opacity=0); /* For IE8 and earlier */}
#verbreitern {position: fixed; top: 20px; left: 3%; width: 70px; height: 100px;  z-index: 20;}

/* Social */
#ecards{ float: left;  width:70px; height: 72px; background: url(/images/layout/btn_ecards.png) -10px top no-repeat; }
#ecards:hover{ background-position: -10px -80px; height: 100px;}

#weitersagen{ float: right;width: 70px; height: 72px; background: url(/images/layout/btn_weitersagen.png) -10px top no-repeat; }
#weitersagen:hover{   background-position: -10px -80px; height: 100px;}

/* Header */
#header_bg {position: fixed; top: 0;width: 100%; height: 50px;  background-color: #2DB8C8; z-index: 10; -webkit-box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.4); -moz-box-shadow:  0px 5px 5px rgba(50, 50, 50, 0.4); box-shadow: 0px 5px 5px rgba(50, 50, 50, 0.4);}
#header {position: fixed; top: 0;width: 100%; height: 70px;  z-index: 11;}
#film #header_bg {background-color: #877c69; }
#cast #header_bg {background-color: #cf5194; }
#crew #header_bg {background-color: #48d123; }
#presse #header_bg {background-color: #cfa501; }

/* Main Nav */
#nav { position: relative; width: 728px; margin: 0px auto; height: 50px; text-align: center;}
#nav div{ float: left; width: 100px; height: 52px; font-size: 20px;  margin-right: 4px; padding-top: 20px; text-align: center; font-family: 'Lionel Classic'; letter-spacing: 0.1em; }
#nav div { color: #FFF; cursor: pointer;}
#nav div:hover, #nav div.current{ color: #FFF; background: url(/images/layout/nav/bg_nav.png) no-repeat; background-size: cover;  }
#film #nav div:hover, #film #nav div.current{ color: #FFF; background: url(/images/layout/nav/bg_nav_film.png) no-repeat; background-size: cover;  }
#cast #nav div:hover, #cast #nav div.current{ color: #FFF; background: url(/images/layout/nav/bg_nav_cast.png) no-repeat; background-size: cover;  }
#crew #nav div:hover, #crew #nav div.current{ color: #FFF; background: url(/images/layout/nav/bg_nav_crew.png) no-repeat; background-size: cover;  }
#presse #nav div:hover, #presse #nav div.current{ color: #FFF; background: url(/images/layout/nav/bg_nav_presse.png) no-repeat; background-size: cover;  }

 /* Footer */
#footer { background-color:  #2DB8C8; bottom: 0px; height: 35px; position: fixed; text-align: left; width: 100%;  z-index: 10; color:#fddeef; font-family: 'Lionel Classic'; }
#film  #footer { background-color:  #877c69; }
#cast  #footer { background-color:  #cf5194; }
#crew  #footer { background-color:  #48d123; }
#presse  #footer { background-color:  #cfa501; }

.footer_content_left {position: relative; float: left;  margin-left: 10px; line-height: 35px; vertical-align:: middle; color: #fddeef; z-index: 10;}
.footer_content_right {float: right;  margin-right: 180px; line-height: 35px; vertical-align:: middle; color: #fddeef; z-index: 10;}
.footer_content_left a, .footer_content_right a{color: #FFFFFF;}
.footer_content_left a:hover, .footer_content_right a:hover{text-shadow: 0px 0px 10px #FFF;}

/* Credits Link JQ */
#footer ul { list-style:none; margin: 0; padding: 0; z-index: 10; width: 95px; float: left;}
#footer ul li { background:#28abba;  padding: 0px 10px;  line-height: 35px; vertical-align: middle;}
#film #footer ul li { background:#685f51; }
#cast #footer ul li { background:#a93074; }
#crew #footer ul li { background:#30a44f; }
#presse #footer ul li { background:#b78c24; }

#footer ul li a {  color:#fff;   padding: 10px 23px 10px 5px; background: url(/images/layout/bg_credits.png) right -19px no-repeat; }
#footer ul li a:hover {   text-shadow: 0px 0px 10px #FFF; }
#footer ul li a.credits_open{  color:#fff;  padding: 10px 23px 10px 5px; background: url(/images/layout/bg_credits_open.png) right -18px no-repeat; }
#footer ul li a.credits_open:hover { text-shadow: 0px 0px 10px #FFF; }

/* Credits */
#credits {width: 100%; height: 15%;position:absolute; left:0; bottom:0; display:none;  z-index: 9; background:#28abba; }
#film #credits { background:#685f51; }
#cast #credits { background:#a93074; }
#crew #credits { background:#30a44f; }
#presse #credits { background:#b78c24; }
#credits div.credits_content{  width: 100%; margin: 20px 20px 20px 0px;  color: #FFF;}
#credits h1{  color:#FFF;  }
#credits div.credits_content img{ float: left; width: 12.5%; max-width: 101px;}



/* Content */
#container_content{position: relative;  z-index:8; width: 85%; height: 80%;max-width: 1700px;  max-height: 780px;margin: 1% auto;}
#content_left{position: relative; float: left; margin-left: 3%;width: 38%; opacity:0; filter:alpha(opacity=0); /* For IE8 and earlier */}
#content{position: relative; float: right; width: 55%; height: 70%; }

/* Home */
#home_rl_logo{width: 90%; margin: 20px 6%;}
#perso_home{ z-index:9; position: fixed;  bottom: 0; right: 11%; height: 35%; opacity:0; filter:alpha(opacity=0); /* For IE8 and earlier */}
.dvd{ z-index:9;   width: 80%; margin: 0px auto;}

#content_container_home{position: relative;  width:83%; margin-top: 9%;  height:80%;  z-index: 8; }

/* FolgeSeiten */
#container_content_inhalt{position: relative;  z-index:8; width: 85%; max-width: 1700px; height: 90%; max-height: 780px; margin: 1% auto;}
#perso{ z-index:9; position: fixed;  bottom: 34px; left: 16%; height: 42%; opacity:0; filter:alpha(opacity=0); /* For IE8 and earlier */}
#perso_social{ z-index:9; position: fixed;  bottom: 34px; left: 10%; height: 34%; opacity:0; filter:alpha(opacity=0); /* For IE8 and earlier */}
#content_container{position: relative;  width:83%; margin-top: 5%;  height:80%;  z-index: 8; background-color: #FFF; border: 1px solid transparent; padding-bottom: 3%;
-moz-border-radius:20px; /* Firefox */
border-radius: 20px; /* Firefox */
-webkit-border-radius:20px; /* Safari, Chrome */
-khtml-border-radius: 20px; /* Konqueror */
}
#content_container_text{position: relative; margin-top: 5%;  margin-left: 5%; width:75%;  height:90%; z-index: 200;  }
#content_bild{position: absolute; right: 5%; top:-2%; z-index: 12; width: 27%; opacity:0; filter:alpha(opacity=0); /* For IE8 and earlier */}
#content_ente{position: absolute; right: 5%; bottom: -15px; z-index: 12; width: 16%;}

/* Cast Popup */
.popup {width:95%; max-width: 960px; display: none;  margin: 0 auto;}
#content_container_popup{position: relative;  width:100%;  height:100%;  z-index: 8; background-color: #FFF;  border: 1px solid transparent; -moz-border-radius:20px; /* Firefox */border-radius: 20px; /* Firefox */-webkit-border-radius:20px; /* Safari, Chrome */-khtml-border-radius: 20px; /*Konqueror */}
#content_container_text_popup{position: relative; margin-top: 5%;  margin-left: 5%; width:90%;  height:90%;  padding-bottom: 5%; z-index: 8;  }
#content_container_popup_kinos{position: relative;  width:50%;   z-index: 8; background-color: #FFF;  border: 1px solid transparent; -moz-border-radius:20px; /* Firefox */border-radius: 20px; /* Firefox */-webkit-border-radius:20px; /* Safari, Chrome */-khtml-border-radius: 20px; /*Konqueror */ padding: 20px; margin: 20% auto;}

.popup img{float: left; margin-right: 15px; margin-bottom: 15px;width: 35%;}

.popup  h2{font-family: 'Lionel Classic';  letter-spacing: 0.1em;  color: #C5418B;  font-size: 18px; margin-bottom: 16px;}
.popup  h2 span{font-family: Arial,Helvetica,sans-serif;   letter-spacing: 0.1em; color: #186d77; font-size: 18px; white-space:nowrap;}

.fancybox-thumbs img{opacity:0.7; filter:alpha(opacity=90);}
.fancybox-thumbs img:hover{opacity:1; filter:alpha(opacity=100);}

/* Trailer */
#videoplayer{ width: 60%; z-index: 6000;}
video { max-width: 100%; height: auto; }

/* Formulare */
/* ECards */

fieldset{border: 1px solid #2db8c8; 
-moz-border-radius:8px; /* Firefox */
border-radius: 8px; /* Firefox */
-webkit-border-radius:8px; /* Safari, Chrome */
-khtml-border-radius: 8px; /* Konqueror */}
legend{font-weight: bold;}
#container_content_inhalt_ecards{ position: relative;width: 900px; height: 600px; z-index: 9; margin: 10px auto;}
#content_ecards_border{border: 4px solid #30B6C1;}
#content_left_ecards{float: left; width: 307px; background-color: #FFF;}
#content_ecards{position: relative; float: right; z-index: 9;  width: 593px; height: 421px; background: url(/images/layout/ecards/recycling_lily_ecard_bg.jpg) no-repeat;}

#ecardsFormular, #weitersagenFormular  {  margin-bottom: 40px;}
#ecardsFormular input,#ecardsFormular textarea,#ecardsFormular label, #weitersagenFormular input, #weitersagenFormular textarea,#weitersagenFormular label{display: block; width: 95%; padding: 4px; }
#ecardsFormular .error, #weitersagenFormular .error { padding:5px; margin:5px 0; border:1px solid #f00; background-color: #fdcae7; }
#ecardsFormular label.error, #weitersagenFormular label.error {  margin:0; border:none; color: #f00; font-size: 12px; background-color: transparent;}
#ecardsFormular label, #weitersagenFormular label { font-weight: bold;}


.ecards_thumb{width: 40%; text-align: center; float: left; margin: 8px 10px 8px 18px; }
.ecards_thumb img{margin-bottom: 4px; }
.ecards_thumb .blau{ border: 3px solid #0f92a1;}

.ecards_thumb .braun{ border: 3px solid #C5418B;}
#ecards_vorschau .slogan, #ecards_vorschau #frau{ display: none;}

#fuer{position: absolute; top: 253px; left: 374px; width: 207px; text-align: center; font-weight:bold;}
#von{position: absolute; top: 331px ; left: 374px ;  width: 207px; text-align: center; font-weight:bold;}
#nachricht{position: absolute; top: 123px; left: 0px; width: 330px; height: 257px; border-bottom: 1px dashed #999; }
#content_container_text_ecards{width:100%;  height:100%; z-index: 8;  }
#ecardsFormularSenden {margin-top: 8px;}
#ecardsFormularSenden input{width: 48%;}
#ecardsFormularSenden input.gauche{float: left;}
#ecardsFormularSenden input.droite{float: right;}

.angaben {padding: 4px; background-color: #c6f3ff; color: #186d77;  font-size: 14px; 
behavior: url(http://recyclinglily.ch/css/border-radius.htc);
border: 1px solid #2db8c8;
-moz-border-radius:8px; /* Firefox */
border-radius: 8px; /* Firefox */
-webkit-border-radius:8px; /* Safari, Chrome */
-khtml-border-radius: 8px; /* Konqueror */
}
.angaben:focus { background-color: #ecf9fd; }
.btn{padding: 4px; ; color: #FFF;  font-size: 16px; cursor: pointer; font-weight: bold;
behavior: url(http://recyclinglily.ch/css/border-radius.htc);
border: 1px solid #0f92a1;
-moz-border-radius:8px; /* Firefox */
border-radius: 8px; /* Firefox */
-webkit-border-radius:8px; /* Safari, Chrome */
-khtml-border-radius: 8px; /* Konqueror */
background: #b6f1f8; /* Old browsers */
background: -moz-linear-gradient(top,  #b6f1f8 0%, #05b3c6 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6f1f8), color-stop(100%,#05b3c6)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #b6f1f8 0%,#05b3c6 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #b6f1f8 0%,#05b3c6 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #b6f1f8 0%,#05b3c6 100%); /* IE10+ */
background: linear-gradient(to bottom,  #b6f1f8 0%,#05b3c6 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b6f1f8', endColorstr='#05b3c6',GradientType=0 ); /* IE6-9 */



}

.btn:hover{
background: #05b3c6; /* Old browsers */
background: -moz-linear-gradient(top,  #05b3c6 0%, #b6f1f8 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#05b3c6), color-stop(100%,#b6f1f8)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  #05b3c6 0%,#b6f1f8 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  #05b3c6 0%,#b6f1f8 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  #05b3c6 0%,#b6f1f8 100%); /* IE10+ */
background: linear-gradient(to bottom,  #05b3c6 0%,#b6f1f8 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05b3c6', endColorstr='#b6f1f8',GradientType=0 ); /* IE6-9 */


}


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