/*-

rot= #e2001a

-*/
#page-1{
    display: none;
}

a {
    text-decoration: none;
}
ol, ul {
    list-style: none outside none;
}
* {
    padding: 0;
    margin: 0;
}
div {
    background-repeat: no-repeat;
    background-color: transparent;
}
#loading {
    background: url(../img/loading.gif) no-repeat transparent center center;
    position:absolute;
    display:none;
    z-index: 99;
}

#application, #main, #page {
    position: absolute;
    overflow:  hidden;
}
body, #application, #main {
    width: 1280px;
    height: 720px;
    font-family: Tiresias, 'Tiresias PCfont', 'Philips Screen Font 4',  Arial, Verdana, sans-serif;
    font-size: 18px;
    line-height: 25px;
    color: #464646;
    background-color: #fff;
}
/*---Video & PlayerControl---*/

#videocontainer, #video {
    width: 1280px;
    height: 720px;
    top:0;
    left:0;
    display:none;
}
#videocontainer {
    background-color: #000;
}
#player-control {
    display: none;
    z-index: 10;
    position: absolute;
    height: 210px;
    width: 1280px;
    left: 0;
    bottom: 0;
    background: url(../img/player_control_bg.png) repeat 0 0 transparent;
}
.player-control-text{
    width: 810px;
    font-size: 18px;
    position: absolute;
    top: 15px;
    left: 70px;
}

.player-control-text .value-title{
    color: #e2001a;
    font-weight: bold;
}
.player-control-info{
    width: 330px;
    font-size: 16px;
    font-weight: bold;
    position: absolute;
    top: 15px;
    right: 70px;
    color: #666;
    text-align: right;
}


.player-control-navigation {
/*    background: url("../img/player_control_navigation_bg.png") repeat-x scroll 0 0 transparent;*/
    height: 72px;
    position: absolute;
    bottom: 55px;
    width: 1280px;
}
.player-button {
    height: 72px;
    width: 182px;
    float: left;
    position: relative;
    margin-right: 1px;
    background: url("../img/sprite_player_control_navigation_bg.png") repeat-x scroll 0 0 transparent;
}
.player-button.focus{
    background-position: 0 -72px;
}
.player-button.selected{
    background-position: 0 -144px;
}
.player-button.focus.selected{
    background-position: 0 -216px;
}
.player-button.last {
    margin-right: 0;
}

.player-button span{
    width: 40px;
    height: 20px;
    position: absolute;
    top: 24px;
    left:71px;
    background: url(../img/sprite_controls.png) no-repeat 0 0 transparent;
}
#button-skip-forward span.skip-forward {
    background-position: 0 0;
}
#button-skip-forward.focus span.skip-forward {
    background-position: 0 -20px;
}
#button-skip-backward span.skip-backward {
    background-position: -40px 0;
}
#button-skip-backward.selected.focus span.skip-backward,
#button-skip-backward.selected span.skip-backward,
#button-skip-backward.focus span.skip-backward {
    background-position: -40px -20px;
}
#button-fullscreen-stop span.fullscreen-stop {
    background-position: -80px 0;
}
#button-fullscreen-stop.selected.focus span.fullscreen-stop,
#button-fullscreen-stop.selected span.fullscreen-stop,
#button-fullscreen-stop.focus span.fullscreen-stop {
    background-position: -80px -20px;
}
#button-play-pause span.play-pause {
    background-position: -120px 0;
}
#button-play-pause.selected.focus span.play-pause,
#button-play-pause.selected span.play-pause,
#button-play-pause.focus span.play-pause {
    background-position: -120px -20px;
}
.paused #button-play-pause.focus span.play-pause {
    background-position: -280px -20px;
}
.paused #button-play-pause span.play-pause {
    background-position: -280px 0px;
}

/*#player-control.sd #button-play-pause.focus span.play-pause {
    background-position: -320px -20px;
}*/
#button-hd span.hd {
    background-position: -160px 0;
}
#button-hd.focus span.hd {
    background-position: -160px -20px;
}
.sd #button-hd span.hd {
    background-position: -320px 0;
}
.sd #button-hd.focus span.hd {
    background-position: -320px -20px;
}
#button-rewind span.rewind {
    background-position: -200px 0;
}
#button-rewind.selected.focus span.rewind,
#button-rewind.selected span.rewind,
#button-rewind.focus span.rewind {
    background-position: -200px -20px;
}
#button-forward span.forward {
    background-position: -240px 0;
}
#button-forward.selected.focus span.forward,
#button-forward.selected span.forward,
#button-forward.focus span.forward {
    background-position: -240px -20px;
}

#progressbar-container {
    position: absolute;
    height: 5px;
    border: none;
    top: 5px;
    left: 5px;
    width: 1270px;
    overflow:visible;
    background: url(../img/progressbar_container_bg.png) repeat-x scroll 0 0 transparent;
}
#progressbar{
    position:absolute;
    left:3px;
    top:1px;
    height: 3px;
    width: 0;
    background-image: url(../img/processbar_bg.png);
    background-repeat: repeat-x;
}
/*#progressbar-knob {
    position: absolute;
    width: 23px;
    height: 23px;
    z-index: 10;
    left:-12px;
    top:-4px;
}*/
body.video #videocontainer, body.video #video {
    display:block;
}
body.video #application {
    display:none;
}


/*---Buttons & Buttons Hover---*/
.btn-typ5, .btn-typ4, .btn-typ3, .btn-typ2, .btn-typ1 {
    position: relative;
}

.btn-typ5-hover,
.btn-typ4-hover,
.btn-typ3-hover,
.btn-typ2-hover,
.btn-typ1-hover {
    position: absolute;
    top: -12px;
    left: -12px;
    z-index:12;
}
.btn-typ1-hover {
    height: 314px;
    width: 524px;
}
.btn-typ1.focus .btn-typ1-hover {
    background: url(../img/btn_typ1_hover.png) no-repeat scroll 0 0 transparent;
    /*background: url("../img/btn_main_teaser_play.png") no-repeat scroll 208px 97px transparent;*/
}
.btn-typ2-hover {
    width: 163px;
    height: 110px;
    background: url(../img/btn_typ2_hover.png) no-repeat scroll 0 0 transparent;
}
.btn-typ2.focus .btn-typ2-hover {
    background-position: 0 -110px; /*0 -87px*/
}
#advice-teaser-content .advice-teaser-item.selected .btn-typ2-hover {
    background: none;
}
#advice-teaser-content .advice-teaser-item.selected.focus .btn-typ2-hover {
    background: url(../img/btn_typ2_hover.png) no-repeat scroll 0 -110px transparent;    /*0 -87px*/
}
.btn-typ3-hover {
    width: 233px;
    height: 130px;
    left: -14px;
    background: url(../img/btn_typ3_hover.png) no-repeat scroll 0 0 transparent;
}
.btn-typ3.focus .btn-typ3-hover {
    background-position: 0 -130px;
}
.btn-typ4-hover {
    width: 462px;
    height: 140px;
    top: -2px;
    left:0;
}
/*.btn-typ4.focus .btn-typ4-hover {
    background: url(../img/btn_typ4_hover.png) no-repeat scroll 0 0 transparent;
}*/



#application{
    background: url(../img/application_bg02.png) no-repeat transparent 0 0;
}
#page, #main-page{
    position: relative;
}
.page {

}
.vfb-logo{
    position: absolute;
    top:38px;
    right: 60px;
    width: 102px;
    height: 110px;
    background: url(../img/vfb_logo.png) no-repeat scroll 0 0 transparent;
    z-index: 10;
}
.page-header{
    position: absolute;
    top: 17px;
    width: 1280px;
    height: 80px;
    /*background: url(../img/vfb_tv_header.png) no-repeat scroll 55px 0 #e2001a;*/
    background: url(../img/vfb_tv_header.png) no-repeat scroll 55px 0 #d30029;
}
.content{
    position: absolute;
    top: 110px;
    left: 55px;
    width: 1185px;
    height: 280px;
}
.content-left{
    width: 945px;
    height: 280px;
}
.content-left .main-teaser{}
.content-left .main-teaser-image{
    width: 500px;
    height: 280px;
/*    background: url(../img/mainteaser_image_bg.png) no-repeat scroll 0 0 transparent;*/
}

.content-left .main-teaser-image img{
    width: 500px;
    height: 280px;
    position: absolute;
    top:0;
    left: 0;
}
/*.main-teaser-image .btn-main-teaser-play{
    width: 84px;
    height: 86px;
    position: absolute;
    top: 97px;
    left:208px;
    background: url(../img/btn_main_teaser_play.png) no-repeat scroll 0 0 transparent;
    z-index: 10;
}*/

#main-page.start .content-left #advice-teaser-content{
    visibility: visible;
}
#main-page #advice-teaser-content{
    visibility: hidden;
}
.content-left #advice-teaser-content{
    position: absolute;
    top:  0;
    left: 500px;
    width: 152px;
    height: 280px;
}
.advice-teaser-item{
    width: 137px;
    height: 77px;
    position: absolute;
    top: 0;
    right: 0;
}
.advice-teaser-item img {
    width:137px;
    height:77px;
}
.advice-teaser-item.second{
    top: 101px;
}
.advice-teaser-item.third{
    top: 202px;
}
#main-page.start .content-left .main-teaser-text,
#main-page .content-left .main-teaser-text{
    height: 280px;
    position: absolute;
    top: 0;
    font-size: 20px;
    font-weight: bold;
    background: url(../img/divide_vertical.gif) repeat-y scroll 13px 0 transparent;
}
#main-page.start .content-left .main-teaser-text{
    width: 283px !important;
    left: 652px !important;
}

#main-page .content-left .main-teaser-text{
    width: 450px !important;
    left: 500px !important;
}


.main-teaser-text .value-title,
.main-teaser-text .value-match{
    position: absolute;
    font-size: 24px;
    line-height: 30px;
    left: 30px;
    overflow: hidden;
}
.main-teaser-text .value-title{
    color: #e2001a;
    top: 30px;
    height: 60px;
}
.main-teaser-text .value-match{
    top: 90px;
    height: 120px;
    font-size:18px;
    line-height:20px;
    text-overflow: ellipsis;
}
.main-teaser-text div.value-categorie,
.main-teaser-text div.value-date{
    font-size: 16px;
    position: absolute;
    bottom:10px;
}
.main-teaser-text div.value-date{
    left: 30px;
}
.main-teaser-text div.value-categorie{
    right: 0px;
}



.content-right{
    position: absolute;
    top: 0;
    right: 0;
    width: 220px;
    height: 280px;
}
.box-cont-right{
    width: 215px;
    height: 105px;
    position: absolute;
    right: 0;
}
.box-cont-right.abo{
    bottom: 110px;
}
.box-cont-right.partner{
    bottom: 0;
}
/*---Video Scrollbar---*/

.video-scroller{
    position: absolute;
    top: 400px;
    left: 0;
    width: 1280px;
    height: 156px;
    overflow: hidden;
}
.video-scroller .scroller-left {
    background: url("../img/scroller-left.png") no-repeat scroll right top transparent;
    position: absolute;
    left: 0;
    height: 156px;
    width: 15px;
}
.video-scroller .scroller-right {
    background: url("../img/scroller-right.png") no-repeat scroll left top transparent;
    position: absolute;
    right: 0;
    height: 156px;
    width: 15px;
}
.video-scroller-wrapper {
    position: absolute;
    height: 156px;
    width: 12850px;
/*    width: 1250px;
    left: 15px;*/
    top:0;
    overflow: hidden;
}
.video-scroller-container {
    position:absolute;
    height:156px;
    overflow: hidden;
    width: 9000px;
}

.video-scroller-item {
    position: relative;
    float: left;
    margin-top: 20px;
    height: 136px;
    padding: 0 4px;
    width: 200px;
    background: url(../img/video_scroller_item_bg.png) no-repeat scroll 2px 2px transparent;
}
.video-scroller-item img {
    width: 200px;
    height: 113px;
    margin-left: 0;
    margin-top: 3px;
}
#list-selection .video-teaser-container-text {
    display: none;
}
#list-selection.video-scroller-item.focus {
    float: left;
    margin-top: 10px;
    height: 146px;
    padding: 0 4px;
    width: 456px;
    background: url(../img/video_scroller_item_focus_bg.png) no-repeat scroll 2px 2px transparent;
    display: inline-block;
}
/*#list-selection.focus {
    border: 5px solid red;
}*/

#list-selection.focus .video-teaser-container{
    display: block;
    height: 130px;
    margin-top: 3px;
    position: relative;
    width: 452px;
}
#list-selection.focus .video-teaser-container-text {
    display:block;
}
.video-teaser-flag,
.video-teaser-flag.free{
    width: 135px;
    height: 16px;
    background: url(../img/sprite_video_teaser_flag.png) no-repeat scroll 0 0 transparent;
    z-index: 10;
    margin-bottom: 15px;
    position: absolute;
}
.advice-teaser-item .video-teaser-flag{
    bottom: 5px;
    left: 0;
    margin: 0;
}
.video-scroller-item .video-teaser-flag,
.video-teaser-container-image .video-teaser-flag{
    top: 10px;
    left:10px;
}

.main-teaser-text .video-teaser-flag{
    position: relative;
}


.video-teaser-flag.exclusive{
    background-position: left -16px;
}
.video-teaser-container-text .video-teaser-flag {
    position:absolute;
    top:0;
    left:10px;
    background-position: left -32px;
}
#list-selection.focus #list-selection-flag {
    display: none;
}
.video-teaser-container-text .video-teaser-flag.exclusive {
    background-position: left -48px;
}
.main-teaser-text .video-teaser-flag{
    background-position: left -32px;
    left:30px;
}
.main-teaser-text .video-teaser-flag.exclusive{
    background-position: left -48px;
    left: 30px;
}
#list-selection.focus .video-teaser-container-image{
    height: 117px;
    left: 12px;
    position: absolute;
    top: 5px;
    width: 200px;
    z-index: 1;
}

.video-teaser-container-text{
    background: url(../img/divide_vertical.gif) repeat-y scroll 0 0 transparent;
    font-size: 16px;
    font-weight: bold;
    height: 113px;
    left: 222px;
    line-height: 22px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    top: 9px;
    width: 215px;
    z-index: 2;
}

.video-teaser-container-text .value-title,
.video-teaser-container-text .value-date,
.video-teaser-container-text .value-categorie,
.video-teaser-container-text .value-text{
    color: #1a171b;
    left: 10px;
    position: absolute;
    overflow: hidden;
}
.video-teaser-container-text .value-title{
    color: #e2001a;
    top: 20px;
    line-height: 20px;
    height:  60px;
}
.video-teaser-container-text .value-text{
    top: 47px;
    height: 22px;
}
.video-teaser-container-text .value-date,
.video-teaser-container-text .value-categorie{
    width: auto;
    font-size: 14px;
}
.video-teaser-container-text .value-date{
    bottom: 15px;
    left: 10px;
}
.video-teaser-container-text .value-categorie{
    left: 10px;
    bottom:0;
    text-align: right;
}
/*---Navigation---*/
.navigation{
    top: 556px;
    height: 72px;
    line-height: 72px;
    position: absolute;
    width: 1280px;
    background: url(../img/navigation_bg.gif) repeat-x scroll 0 2px #fff;
}
.navigation ul{
    margin-left: 55px;
    margin-right: 40px;
    list-style: none outside none;
    width: 1161px;
    height: 72px;
    background-color: #fff;
}
.navigation ul li{
    background: url("../img/navigation_bg.gif") repeat-x scroll 0 2px transparent;
    float: left;
    color: #fff;
    margin-right: 1px;
}
.navigation ul li span{
    width: 192px;
    height: 72px;
    display: block;
    text-align: center;
}
.navigation ul li.selected span{
    background: url(../img/sprite_navigation.png) no-repeat scroll 0 -144px transparent;
    color: #e2001a;
}
.navigation ul li.focus span,
.navigation ul li.selected.focus span{
    background: url(../img/sprite_navigation.png) no-repeat scroll 0 -72px transparent;
    color: #e2001a;
}
.navigation ul li.last{
    margin-right: 0;
    width: 196px;
}
.footer{
    top: 628px;
    width: 1185px;
    height: 35px;
    line-height: 35px;
    position: absolute;
    margin: 0 40px 0 55px;
    font-size: 14px;
    font-weight: bold;
}

.footer .button{
    float: left;
    margin: 0 15px;
}

.footer .button.btn-vfb{
    color: #e2001a;
    margin: 0 350px 0 0;
}
/*---Buttons---*/
.btn-footer{
    background: url(../img/sprite_btn_footer.png) no-repeat scroll 0 0 transparent;
    height: 35px;
}
.buttoncontainer.btn-footer{
    background-position: left top;
    display: inline-block;
    padding: 0 0 0 20px;
}

.buttoncontainer.btn-footer.focus{
/*    background-position: left -35px;*/
    background-position: left 0;
}
.buttoncontent.btn-footer{
    background-position: right top;
    display: inline-block;
    padding: 0 20px 0 0;
}
.buttoncontainer.btn-footer.focus .buttoncontent.btn-footer{
/*    background-position: right -35px;*/
    background-position: right 0;
}
.buttonlabel-btn-footer {
    color: #29262a;
    display: block;
    font-weight: bold;
    height: 35px;
    line-height: 35px;
    padding-left: 0;
    position: relative;
    text-align: left;
}
.buttoncontainer.btn-footer.focus .buttonlabel-btn-footer{
    color: #e2001a;
}
.content-login{
    display: inline-block;
    height: 35px;
    top: 0;
    width: 480px;
    position: absolute;
    right: 0;
    text-align: right;
}
.content-login #login-button{
    position: absolute;
    right: 0;
}
.content-login #login-text{
    display: none;
}
.content-login #login-text span{
    margin-left: 5px;
}



.btn-grey{
     background: url(../img/sprite_btn_grey.png) no-repeat scroll 0 0 transparent;
     height: 52px;
 }
.buttoncontainer.btn-grey{
    background-position: left top;
    display: inline-block;
    padding: 0 0 0 22px;
}
.buttoncontainer.btn-grey.focus{
    background-position: left -52px;
}
.buttoncontent.btn-grey{
    background-position: right top;
    display: inline-block;
    padding: 0 20px 0 0;
}
.buttoncontainer.btn-grey.focus .buttoncontent.btn-grey{
    background-position: right -52px;
}
.buttonlabel-grey52 {
    color: #29262a;
    display: block;
    font-weight: bold;
    height: 52px;
    line-height: 52px;
    padding-left: 0;
    position: relative;
    text-align: left;
}



.btn-grey_small{
    background: url(../img/sprite_btn_grey_small2.png) no-repeat scroll 0 0 transparent;
    height: 35px;
}
.buttoncontainer.btn-grey_small{
    background-position: left top;
    display: inline-block;
    padding: 0 0 0 29px;
}
.buttoncontainer.btn-grey_small.focus{
    background-position: left -35px;
}
.buttoncontent.btn-grey_small{
    background-position: right top;
    display: inline-block;
    padding: 0 14px 0 0;
}
.buttoncontainer.btn-grey_small.focus .buttoncontent.btn-grey_small{
    background-position: right -35px;
}
.buttonlabel-grey35 {
    color: #000000;
    display: inline-block;
    font-weight: bold;
    height: 28px;
    line-height: 29px;
    padding-bottom: 7px;
    padding-left: 0;
    position: relative;
    text-align: left;
    vertical-align: top;
}
.buttoncontainer.btn-grey_small.focus  .buttonlabel-grey35{
    color: #fff;
}































.buttoncontainer.btn-grey.focus .buttonlabel-grey52{
    color: #e2001a;
}

/*---Video---*/
body.video #main {
    display:none;
}
#videocontainer, #video {
    width: 1280px;
    height: 720px;
    top:0;
    left:0;
    display:none;
}
#videocontainer {
    background-color: #000;
}
body.video #videocontainer, body.video #video {
    display:block;
}
body.video .page, body.video #main-page {
    display:none !important;
}

/*---LogIn-Page---*/

#impressum-page,
#agb-page,
#login-page, #shim{
    width: 1280px;
    height: 720px;
    left:0;
    top:0;
    position: absolute;
    z-index: 50;
    display:none;
}
#shim {
    background: url(../img/opacity_black_1280x720.png) no-repeat scroll 0 0 transparent;
    z-index:49;
    display:block;
}
#login-fieldset {
    width: 480px;
    height: 250px;
    background-color: #e8e8e8;
    border: 5px solid #000;
    position: absolute;
    top: 235px;
    left:400px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    padding: 30px;
}
#loewe-textinfo {
    display:none;
}
body.loewe #loewe-textinfo {
    display:block;
    height:20px;
    position: absolute;
    bottom: 3px;
    left:35px;
    width:330px;
}
body.loewe #login-fieldset {
    height: 300px;
}
#loewe-textinfo .green, #loewe-textinfo .yellow {
    display:block;
    height:20px;
    width:20px;
    float:left;
    margin-left:10px;
    border:1px solid #000;
}
#loewe-textinfo .green {
    background-color: green;
}
#loewe-textinfo .yellow {
    background-color: yellow;
}
#loewe-textinfo label {
    float:left;
    display: block;
    height:20px;
    line-height: 20px;
    white-space: nowrap;
    font-size:18px;
    margin-left: 10px;
}
#login-fieldset #text{
    margin-bottom: 20px;
}
#login-fieldset .input{
    width: 470px;
    height: 30px;
    line-height: 30px;
    background-color: #fff;
    border: 1px solid #666;
    padding: 5px;
    font-size: 18px;
    color: #000;
    margin-bottom: 10px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
    overflow: hidden;
}
#login-fieldset .focus .input {
    border:1px solid red
}
#login-fieldset .input.empty{
    color: #666;
}
#login-buttons{
    margin-bottom: 20px;
}
#login-button-ok{
    margin-right: 10px;
}
#login-fieldset .info{
    font-size: 16px;
    font-weight: bold;
    color: #e2001a;
}

/*---AGB-Page und Impressum---*/
#impressum-container,
#agb-container{
    width: 750px;
    height: 550px;
    background-color: #e8e8e8;
    border: 5px solid #000;
    position: absolute;
    top: 15px;
    left: 265px;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    padding: 35px;
    overflow: auto;
    font-size: 16px;
    line-height: 22px;
}

h1{
    font-size: 20px;
    font-weight: bold;
    color: #e2001a;
    margin-bottom: 10px;
}
span.important{
    font-weight: bold;
    color: #e2001a;
}

#error {
    width: 500px;
    height: 300px;
    position: absolute;
    background-color:#000;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
    opacity:0.5;
    color: #fff;
    z-index: 99;
}
/*
#agb-page,
 #main-page{
     display: none!important;
 }
 #shim,
 #impressum-page{
    display: block;
 }*/