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


/*
    ANIMATIONS
*/
.off{
    visibility: hidden;
    opacity:0;
    display:none;
}
.on{
    visibility: visible;
    opacity:1;
    /*display:block;*/

}

.fadein{

    -webkit-animation-name: fadein;
    -webkit-animation-duration: .8s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;

    -moz-animation-name: fadein;
    -moz-animation-duration: .8s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running;

    animation-name: fadein;
    animation-duration: .8s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;

}

@-moz-keyframes fadein { 
    0% { 
        /*opacity:0;*/
        -webkit-filter: brightness(0%);
        filter: brightness(0%);
    } 
    100% { 
        /*opacity:1;*/
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    } 
}
@-webkit-keyframes fadein { 
    0% { 
        /*opacity:0;*/
        -webkit-filter: brightness(0%);
        filter: brightness(0%);
    } 
    100% { 
        /*opacity:1;*/
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    } 
}
@keyframes fadein { 
    0% { 
        /*opacity:0;*/
        -webkit-filter: brightness(0%);
        filter: brightness(0%);
    } 
    100% { 
        /*opacity:1;*/
        -webkit-filter: brightness(100%);
        filter: brightness(100%);
    } 
}

.fadeout{

    -webkit-animation-name: fadeout;
    -webkit-animation-duration: .5s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;

    -moz-animation-name: fadeout;
    -moz-animation-duration: .5s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running;

    animation-name: fadeout;
    animation-duration: .5s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;

}

@-moz-keyframes fadeout { 
    0% { 
        opacity:1;
    } 
    100% { 
        opacity:0;
    } 
}
@-webkit-keyframes fadeout { 
    0% { 
        opacity:1;
    } 
    100% { 
        opacity:0;
    } 
}
@keyframes fadeout { 
    0% { 
        opacity:1;
    } 
    100% { 
        opacity:0;
    } 
}
.closeout{

    -webkit-animation-name: closeout;
    -webkit-animation-duration: .5s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running;

    -moz-animation-name: closeout;
    -moz-animation-duration: .5s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running;

    animation-name: closeout;
    animation-duration: .5s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;

}

@-moz-keyframes closeout { 
    0% { 
        width:100%;
    } 
    100% { 
        width:0%;
    } 
}
@-webkit-keyframes closeout { 
    0% { 
        width:100%;
    } 
    100% { 
        width:0%;
    } 
}
@keyframes closeout { 
    0% { 
        width:100%;
    } 
    100% { 
        width:0%;
    } 
}
.blurin{
    -webkit-animation-name: blurin;
    -webkit-animation-duration: 2s; 
    -webkit-animation-timing-function: ease-out; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running; 

    -moz-animation-name: blurin;
    -moz-animation-duration: 2s; 
    -moz-animation-timing-function: ease-out; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running; 

    animation-name: blurin;
    animation-duration: 2s; 
    animation-timing-function: ease-out; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;


}

@-moz-keyframes blurin { 
    0% { 
        -webkit-filter:blur(10px);
        filter:blur(10px);
        transform:scaleX(300%);
    } 
    70% { 
        -webkit-filter:blur(8px);
        filter:blur(8px);
    } 
    100% { 
        -webkit-filter:blur(0px);
        filter:blur(0px);
        transform:scaleX(100%);

    } 
}
@-webkit-keyframes blurin { 
    0% { 
        -webkit-filter:blur(10px);
        filter:blur(10px);
        transform:scaleX(300%);
    } 
    70% { 
        -webkit-filter:blur(8px);
        filter:blur(8px);
    } 
    100% { 
        -webkit-filter:blur(0px);
        filter:blur(0px);
        transform:scaleX(100%);
    } 
}
@keyframes blurin { 
    0% { 
        -webkit-filter:blur(10px);
        filter:blur(10px);
        transform:scaleX(300%);
    } 
    70% { 
        -webkit-filter:blur(8px);
        filter:blur(8px);
    } 
    100% { 
        -webkit-filter:blur(0px);
        filter:blur(0px);
        transform:scaleX(100%);
    } 
}
.flashin{
    -webkit-animation-name: flashin;
    -webkit-animation-duration: .7s; 
    -webkit-animation-timing-function: ease; 
    -webkit-animation-direction: normal;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-play-state: running; 

    -moz-animation-name: flashin;
    -moz-animation-duration: .7s; 
    -moz-animation-timing-function: ease; 
    -moz-animation-direction: normal;
    -moz-animation-iteration-count: 1;
    -moz-animation-fill-mode: forwards;
    -moz-animation-play-state: running; 

    animation-name: flashin;
    animation-duration: .7s; 
    animation-timing-function: ease; 
    animation-direction: normal;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    animation-play-state: running;


}

@-moz-keyframes flashin { 
    0% { 
        -webkit-filter:brightness(800%);
        filter:brightness(800%);
    } 
    100% { 
        -webkit-filter:brightness(100%);
        filter:brightness(100%);
    } 

}
@-webkit-keyframes flashin { 
    0% { 
        -webkit-filter:brightness(800%);
        filter:brightness(800%);
    } 
    100% { 
        -webkit-filter:brightness(100%);
        filter:brightness(100%);
    } 
}
@keyframes flashin { 
    0% { 
        -webkit-filter:brightness(800%);
        filter:brightness(800%);
    } 
    100% { 
        -webkit-filter:brightness(100%);
        filter:brightness(100%);
    } 
}

/* Default style, feel free to remove if not needed. */
body, body * {
    vertical-align: baseline;
    border: 0;
    outline: 0;
    padding: 0;
    margin: 0;
}

#video_footer, #mobile_cta{
    position:absolute;
    width: 600px;
    height: 62px;
    bottom: 0px;
    left: 0px;
    background:transparent url('video_titletune_sept14.jpg') no-repeat top center;
}

.tonight #video_footer, .tonight #mobile_cta{

    background:transparent url('video_titletune_tonight.jpg') no-repeat top center;
}

#mobile_intro {
    position: absolute;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

#anim {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 600px;
    height: 400px;
    -webkit-transition: all 1s ease-out;
    -moz-transition: all 1s ease-out;
    -o-transition: all 1s ease-out;
    -ms-transition: all 1s ease-out;
    transition: all 1s ease-out;
}
#anim img{
    max-width: 600px;
}
#base {
    position: absolute;
    width: 100%;
    height: 100%;
    background: no-repeat center;
    background-size: contain;
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out;
    -ms-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
}


#resolve_bg {
    position: absolute;
    width: 100%;
    height: 100%;
    background:transparent url('resolve_bg.jpg') no-repeat center;
    background-size: cover;
}


#resolve_tune_in{
    position:absolute;
    width: 70px;
    height: 83px;
    bottom: 17px;
    right: 17px;
    background: transparent url('resolve_titletune_sept14.png') no-repeat top left;

}
.tonight #resolve_tune_in {
    width: 80px;
    height: 67px;
    bottom: 17px;
    right: 17px;
    background: transparent url('resolve_titletune_tonight.png') no-repeat top left;

}

/*  IE9 FX OVERRIDES    */
.ie9 #resolve_bg,
.ie9 #resolve_title,
.ie9 #resolve_tune_in,
.ie9 #resolve_cta{
    filter: progid:DXImageTransform.Microsoft.blur(enabled = false) !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
    -o-filter: none !important;
    -ms-filter: none !important;
    filter: none !important;

}


/* Div layer for the entire banner. */
#container_dc {
    position: absolute;
    width: 600px;
    height: 400px;
    background-color: #000000;
    top: 0px;
    left: 0px;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}

#content_dc {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: #000000;
    border:1px solid #000;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    overflow: hidden;
}

/* Invisible button for background clickthrough. */
#background_exit_dc {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
}

#video_exit_dc {
    position: absolute;
    width: 100%;
    height: 100%;
    bottom: 0px;
    left: 0px;
    cursor: pointer;
    opacity: 0;
}


/* Div layer containing the video player and video controls. */
#video_container_dc {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    background-color: #000000;
    border: 1px solid #000;
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

#video_dc, #mobile_video {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 600px;
    height: 338px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*border-bottom:1px solid #222222;*/
}

#video_controls {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 43px;
    height:20px;
    background:transparent;
    cursor: pointer;
}
#video_controls button{
    cursor: pointer;
}
/* Video button hiding an positioning */
#video_controls button:hover {
    background-position: bottom;
}

#video_control_play_dc {
    position: absolute;
    background: url('play_button.png') no-repeat top;
    width: 11px;
    height: 10px;
    left: 7px;
    top: 5px;
}

/*#video_control_play_dc:hover{
    background-position: 0px -8px;
}
*/
#video_control_pause_dc {
    position: absolute;
    background: url('pause_button.png') no-repeat top;
    width: 8px;
    height: 10px;
    left: 7px;
    top: 5px;
}

/*#video_control_pause_dc:hover{
    background-position: 0px -11px;
}
*/


.mobile #video_controls{
    background-color: transparent;
}
.mobile #video_control_unmute_dc{
    background: url('sound_button_mobile.png') no-repeat top;
    background-size: contain;
    width:40px;
    height:40px;
    right:initial;
    left:-3px;
    top:4px;
}
.mobile #video_control_pause_dc, .mobile #video_control_play_dc, .mobile #video_control_mute_dc{
    display:none !important;
} 
#video_control_replay_dc {
    background: url('replay_btn.png') no-repeat center;
    position: absolute;
    right: -4px;
    top: -4px;
    width: 52px;
    height: 52px;
    cursor: pointer;

    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -ms-transition: all .5s ease;
    -o-transition: all .5s ease;
    transition: all .5s ease;
}
.mobile #video_control_replay_dc {
    display:none;
    visibility: hidden;
}
#video_control_replay_dc:hover {

    top:-6px;
    -moz-transform: rotate(-180deg);
    -webkit-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
}


/* Video button hiding an positioning */
#video_controls button:hover {
    background-position: bottom;
}
#video_control_unmute_dc {
    position: absolute;
    background: url('sound_button_off.png') no-repeat top;
    width: 14px;
    height: 13px;
    left: 23px;
    top: 3px;
    background-size: 100% auto;
}
#video_control_mute_dc {
    position: absolute;
    background: url('sound_button_on.png') no-repeat top;
    width: 14px;
    height: 11px;
    left: 23px;
    top: 4px;
    background-size: 100% auto;
}



:focus {outline:none;}
::-moz-focus-inner {border:0;}