@charset "UTF-8";


@charset "UTF-8";



/* Liquid CSS */
/* zdf.de */
/* stefanie.hein@inostudio.de */

/*reset regular styles, for example only show some additonal elements in liquid version and hide from regular version*/

.liquidOnly { display: none; }

#header { min-width: 0; }

@media only screen and (max-width: 1200px){

 .mini-epg .tv_programm .close-medium { right: -4px; top: -24px; }

}

/********** 1024px ***************************/
@media only screen and (max-width: 1024px), only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape){

/* H E A D E R */

#header .nav { padding-left: 8px; padding-right:8px; }

.titleheader {

 min-width:100%;

 max-width:100%; 
 width: 100%;

}

.mainzel { margin-right: 10px; }

/* C O N T E N T */

 #content { width: auto;/* 1008px; */ padding-left: 8px; padding-right: 8px; }

 /* except homepage */
 .zdf.sec_home #content { padding:0; }

 .pagebar { display: none; } 

 .hasPagebar .content { padding-left: 8px; padding-right: 8px; }

/* SB class only */

.sb #content { width: 1134px; padding-left: 50px; padding-right: 0px;  }

 #theme-nav-cont { width: auto; }

/* B E I T R A G */

 #article-container:after,
 #search-container:after {
     clear: both;

     content: ".";
     display: block;
     font-size: 0;
     height: 0;
     line-height: 0;
     visibility: hidden;
 }
 #article-marginal { width: 300px; }
 #article-container,
 #search-container { width: auto; /* 970px; */ padding: 16px 10px 32px; float: none; clear:both; }
 #article-footer { width: auto; clear:both; float:none; }
 .col_r { width: 307px; }
 .wildcard { width: 100% !important; }
 .col_r .urls,
 .col_r .newsletter { width: auto; float: none;  }

 .col_r .newsletter form,
 #article-marginal .newsletter form { width: 250px; }
 .newsletter form a { position: relative; right:0; display: inline-block; margin-top: 5px; }
 .broadcast-switch { width: 100%; }
 .broadcast-switch a { padding-left: 0; }
 .broadcast-switch a.previous { margin-right: 10px; }

#article-marginal .broadcast { width: 100% !important;}
.col_r .box .broadcast { width: 100% !important;}
#article-marginal .tagcloud { width: 100% !important;height: 100% !important;}
.col_r .box .tagcloud { width: 100% !important;height: 100% !important;}
#article-marginal .shorttext { width: 100% !important; height: 100% !important;}
.col_r .box .shorttext { width: 100% !important; height: 100% !important;}

 #article-container .urls.semi { background: none #ffffff ; }
/* M E D I A   B Ü H N E*/
 .article-multimedia ul.tablist { width: 100%; }
 .article-multimedia ul.tablist li.tab { width: 22.4%; margin: 0 0.8% 0 0; padding: 1%; }
  .article-multimedia .tabContent img,
 .article-multimedia .tabContent object { width: 100%; /* don't use will crash safariMobile: height: 100%; */ }
 .article-multimedia .tabContent { width: auto; }
.article-multimedia .galleryInterface { height: 100% !important; }
 
 .article-multimedia .imgGallery { line-height: 0; }
 .article-multimedia .zdfsportGalDesc { padding-right: 0; }

/* E P G   F I L T E R */

 .main .stripe .wrap { min-width: 0; margin: 0 10px;}
 .epg_filter .grabbox { width: 80%; }
 .sec_epg-horiz #content { width: auto; padding:0; margin: 0; }
 .sec_epg-horiz .content .tv { width: 75px; }
 .sec_epg-horiz .content .tv li { width: 65px; }
 .sec_epg-horiz .content .tv li img { margin:0; }
 .sec_epg-horiz .content .slider { width: 900px; }
 .sec_epg-horiz .content .tv li a.close { right: -5px; }
/*  .sec_epg-horiz .main .content .wrap { width: auto; } */
 .sec_epg-horiz ul.time li {  padding: 7px 0 7px 5px; }

/* E P G   T A B L E S */

 .sec_epg-horiz .main .content .wrap { width: auto; min-width: 1024px; max-width: 1024px;  }
 .bc-table-header .close { right: 60px; }

 .bc-table-header .paging-button-next { right: 0; }
 .bc-table-header .paging-button-prev { left: 0; }

/* E P G   W O C H E N A N S I C H T */
/*
- FIXME: on desktop the header won't scale correctly, this seems to be a problem with the fixed property of the header
- scaling works nicely on ipad, because the header there is not fixed, but positioned static !
*/
 .sec_epg-vert-woche .main .content .wrap,
 .sec_epg-vert-woche .bc-table-header-wrap,
 .sec_epg-vert-woche .bc-table-header-clip,
 .sec_epg-vert-woche .bc-table-content { width: 100%; min-width: 100%; max-width: 100%; }
 .sec_epg-vert-woche .bc-table td { width: 14.2%; }

/* EPG VERT */
/*
FIXME: works nicely on ipad, but is buggy on dektop

 */
/*
 .sec_epg-vert .main .content .wrap,
 .sec_epg-vert .bc-table-header-wrap,
 .sec_epg-vert .bc-table-header-clip,
 .sec_epg-vert .bc-table-content { width: 100%; min-width: 100%; max-width: 100%; }
*/

/* A-Z */
 .sec_a-z ul.jumper li { margin: 0 7px; }

 .sec_a-z .a-z_row {width: 100%; margin-left: 0; }

/*  .sec_a-z .main .content .wrap {min-width:100%; max-width:100%;}   */

} /* end 1024*/

/* KORREKTUR AUFGRUNG VON FEHLER STICKY MINI EPG AUF NOTEBOOK - Release D*/

/********** 1024px on the ipad only: .is-ios ***************************/
 /* EPG */

.is-ios.sec_epg-horiz .stripes_bg,

.is-ios.sec_epg-vert .stripes_bg { display: none; }

.is-ios.sec_epg-horiz .stripes,

.is-ios.sec_epg-vert .stripes { position: static; margin-top: 60px; }

.is-ios .bc-table-header { position: static; }

.is-ios .bc-table-content { margin-top: 0; }

.is-ios #header,

.is-ios.sec_a-z #header,

.is-ios.sec_epg-horiz #header,

.is-ios.sec_epg-vert #header,

.is-ios #main,

.is-ios.sec_a-z .stripes,

.is-ios.sec_a-z .titleheader_wrap { position: static; top: 0; left:0; }

.is-ios.sec_a-z #main,

.is-ios.sec_epg-horiz #main,

.is-ios.sec_epg-vert #main { top: 0 !important; }

/* Dont do liquid on EPG Pages, just use the scaling feature of the viewport*/

.is-ios.sec_epg-vert #header,
.is-ios.sec_epg-vert .titleheader,
.is-ios.sec_epg-vert #main,
.is-ios.sec_epg-vert #footer  { width: 1184px; }

.is-ios.sec_epg-vert #main .stripe .wrap { width: 1084px; max-width: 1084px; margin: 0 50px; }

.is-ios.sec_epg-vert-woche #main .stripe .wrap { width: auto; max-width: 100%; margin: 0 10px; }
/* A-Z */

.is-ios.sec_a-z .stripes_bg { display: none; }
.is-ios.sec_a-z .titleheader { height: 130px; padding-top: 0px;  margin-top: 0; }
.is-ios.sec_a-z .covered { background: none transparent; }

.is-ios .a-z_row .letter {

  padding:1px 0 5px 0;

  line-height:0.8em;

  min-height:75px;
 }

/* SB */

.is-ios .sb #header,
.is-ios .sb .titleheader,
.is-ios .sb #main,
.is-ios .sb #footer  { width: 1184px; }
/* makes the background image scale correctly within main div */
.is-ios #main { position: relative; }

.is-ios .zdf_info #header { margin-bottom: 0; }
/* F O O T E R */
.is-ios #footer.fixed { position:  relative; }

/*end is-ios */

/********** 768px portrait mode on the ipad only (.is-ios) ***************************/

@media only screen and (min-device-width: 768px) and (max-device-width: 768px) and (orientation : portrait) {

.is-ios.sec_epg-horiz #header,
.is-ios.sec_epg-horiz .titleheader,
.is-ios.sec_epg-horiz #main,
.is-ios.sec_epg-horiz #footer  { width: 1184px; }

.is-ios.sec_epg-horiz #main .stripe .wrap { width: 1084px; max-width: 1084px; margin: 0 50px; }

}/* end 1024*/

/* ENDE - KORREKTUR Release D*/

/********** Screen: 900px ***************************/
/* make the Sendernav Dropdown appear already when screen width is < 900px*/

@media only screen and (max-width: 900px)
{

#header .nav > ul.logonav > li { display: none; }

/* need to override ie specific styles defines in header.css */

.ie6 #header .nav > ul.logonav > li,

.ie7 #header .nav > ul.logonav > li { display: none; }

#header .nav > ul.logonav > li.logo { display: block; }

#header .sendernav { display: block; }

#header .sendernav ul { display: none; }

.senderlogos li { margin-right: 20px; }

}/* end 900px*/

/********** 768px ***************************/
/* ipad portrait mode, and screen liquid 768 */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait), only screen and (max-width: 768px)
{

/* H I D E */

footer .searchForm { display: none; }

/* HOTFIX */
.zdf.sec_home #content { padding-bottom: 70px; }

/* S H O W */

.liquidOnly { display: block; }

/* H E A D E R */

.mainzel { margin-right: 20px; }

#header { min-width: 0; }

#header .nav { padding:8px 0px; }

#header .nav > ul.logonav > li.liquidOnly { display: inline-block; }

#header .nav > ul.logonav > li { display: none; }

#header .nav > ul.logonav > li.logo { display: block; }

#header .sendernav { display: block; }

#header .sendernav ul { display: none; }

.senderlogos li { margin-right: 15px; }

.senderlogos a { height: 34px; background-image: url(/ZDF/zdfportal/blob/25868674/8/data.png); }

.senderlogos .logo_zdf {background-position: 0 0; width: 60px; }

.senderlogos .logo_zdf:hover, .senderlogos .logo_zdf:focus, .senderlogos .active .logo_zdf { background-position: 0 -35px; } 

.senderlogos .logo_zdfneo { background-position: -60px 0; width: 72px; }

.senderlogos .logo_zdfneo:hover, .senderlogos .logo_zdfneo:focus, .senderlogos .active .logo_zdfneo { background-position: -60px -35px;} 

.senderlogos .logo_zdfkultur {background-position: -132px 0; width: 95px;}

.senderlogos .logo_zdfkultur:hover, .senderlogos .logo_zdfkultur:focus, .senderlogos .active .logo_zdfkultur { background-position: -132px -35px;} 

.senderlogos .logo_zdfinfo {background-position: -227px 0; width: 73px;}

.senderlogos .logo_zdfinfo:hover, .senderlogos .logo_zdfinfo:focus, .senderlogos .active .logo_zdfinfo {background-position: -227px -35px;}

/* C O N T E N T */

.zdf_info #content { width: auto; padding-left: 20px; padding-right: 20px; }

.zdf_info.sb #content { width: 1134px; padding-left: 50px; padding-right: 0px; }

/* B E I T R A G */

#article-marginal .box.last:after,

#search-container .col_r .box.last:after,

#article-content:after {

    clear: both;

    content: ".";

    display: block;

    font-size: 0;

    height: 0;

    line-height: 0;

    visibility: hidden;
}

#article-marginal,

#article-container,

#article-container .article-header,

#search-container .article-header,

#article-content { width: auto; float: none; clear: both; }

#article-container { padding:0;  background: transparent; }

.article-header,

#article-content,

#article-marginal { padding-left: 20px; padding-right:20px; background-color: #ffffff; }

#article-container .article-header { margin-bottom: 0; padding-top: 16px; }

#article-content { padding-top: 8px; padding-bottom: 8px; }

#article-marginal { margin-top: 20px; padding-top: 20px; }

#article-footer { width: auto; float: none; clear:both; }

#theme-nav li { margin-right: 20px; }

.article-multimedia { width: auto; left:0; }

.article-multimedia .videoPreview,

.article-multimedia .player { width: 100% !important; height: 329px !important; }

#article-marginal .picteaser-marginal { width: 364px; }

.col_r .picteaser-marginal { width: 364px; }

#article-marginal .picteaser-marginal .picteaserMarginalClass img { width: auto; }

#content .infobox.boxFull,

#article-container .shorttext.boxFull, .shorttext.boxFull,

#article-container .w630 { width: auto; }

/* SEARCH CONTAINER */

.sec_suchergebnis .main .content .wrap { min-width: 100%; max-width: 100%; }

#search-container {

  clear: both;

    float: none;

    width: auto;

    padding: 0;
}

#search-container > div > .col_l,

#search-container > .col_l,

#search-container > div > .col_r,

#search-container > .col_r  { width: auto; float: none; clear: both; margin:0 0 40px 0; padding: 0 15px; }

#search-container > div > .col_l .cbox_wrap,

#search-container > .col_l .cbox_wrap { padding-right: 0; }

/* Programmdatensuche ohne Search-Header: */

#search-container > .col_l { padding-top: 15px; }

/* A-Z */

.sec_a-z ul.jumper li {

 font-size:28px;

 margin:0 3px 0 4px;

}

}

/***********END 768*********/

/* screen liquid < 760 */
@media only screen and (max-width: 760px){

/* F O O T E R */

#footer {width: 100%; margin:0 auto; }

/* M I N I _ E P G */

/*when adjusting width of the miniepg for iPad, make sure that at least one element in the miniepg_stage ul is NOT masked */
/* otherwise miniepg slider will not work */

#footer .wrap { width: 96%; }

#footer .mini-epg .wrap { width:600px; margin-top: 15px; } 

#footer .mini-epg #miniepg_stage { width: 495px; margin:0 50px; }

#footer .mini-epg .tv { margin-right:15px; }

}

/* screen liquid < 740 */

@media only screen and (max-width: 740px){

.main .stripe .wrap { margin: 0 5px;}

.epg_filter .grabbox { width: 76%; }

.epg_filter .week > a { margin-right: 6px; width: 78px; white-space: nowrap; overflow: hidden; border-radius: 3px;}

.epg_filter .day a.day { margin-right: 14px; }

.epg_filter .programm-search .popup-opener { width: 126px; border-radius: 3px; }

}

/************ 640px **************/
/* screen liquid 640 */
@media only screen and (device-width: 640px) and (orientation : portrait), only screen and (max-width: 640px){

/* C O N T E N T */
/* need to leave more room for the footer, because footer is much higher here */

#content { margin-bottom: 100px; }

.senderlogos { margin-left: 0; }

.senderlogos li { margin-right: 5px; }

/* B E I T R A G */

#article-footer { width: 553px; }

.article-header,

#article-content,

#article-marginal { padding-left: 15px; padding-right: 15px; }

#article-container .boxSmall { margin-left: 0; margin-right: 0; float: none; width: auto; }

#search-container .cbox .col_l { width: 72%; }

/* MEDIA BÜHNE*/

.article-multimedia { width: auto; }

.article-multimedia .videoPreview,

.article-multimedia .player { width: 100% !important; height: 329px !important; }

#article-footer li { margin-right: 60px; }

/* E P G */

.main .stripe .wrap { margin: 0 5px;}

.epg_filter .grabbox { width: 76%; }

.epg_filter .views a { width: 35px; border-radius: 3px;}

.epg_filter .views a.vertikal { background-position: -63px 0; }

.epg_filter .views a.horizontal { background-position: -9px 0; }

.epg_filter .views a.horizontal.active, .epg_filter .views a.horizontal:hover, .epg_filter .views a.horizontal:focus { background-position: -9px -21px; }

.epg_filter .views a.vertikal.active, .epg_filter .views a.vertikal:hover, .epg_filter .views a.vertikal:focus { background-position: -63px -21px; }

.epg_filter .week > a { margin-right: 6px; width: 70px; white-space: nowrap; overflow: hidden; border-radius: 3px;}

.epg_filter .day a.day { margin-right: 4px; }

.epg_filter .programm-search .popup-opener { width: 126px; border-radius: 3px; }

/* A-Z */

.sec_a-z ul.jumper li {

 font-size:25px;

 margin:0 2px 0 3px;

}

.sec_a-z .main .content .wrap { min-width: 100%; max-width: 100%; }

}

@media only screen and (max-width: 590px){

.epg_filter .programm-search .popup-opener { width: 80px; margin-right: 5px; }

.epg_filter .filter input.submit { width: 80px; }

.epg_filter .week > a { width: 60px; }

.epg_filter .views a.week { width: 90px; }

.epg_filter .day a.day { width: 12px; border-radius: 3px; }

.epg_filter .grabbox { width: 70%; }

}

@media only screen and (max-width: 525px){

.epg_filter .popup { float: left; }

.epg_filter .views { float: left;  }

.epg_filter .views a { margin: 0 5px 0 0; }

}