.state {position: relative; width: 100%;}
.state.prev {border-top: 8px solid #00914D;}
.state.next {border-top: 8px solid #393939;}
.state p.msg {font-style:italic; font-size:13px; color: #494949; padding:.6em 0;}
.current-program p.msg {color:#FFFFFF; text-align:center !important;}
.live p.msg {color:#FFF; font-weight:bold; font-style:normal; text-transform:uppercase;}
.state p.msg.c {text-align: center;}
.state p.msg.l, .state p.msg.r {background: url(/img/bg/bg-opacity-20x20_1.png) repeat left top;}
.state p.msg.l {text-align: left; padding-left: 4px; }
.state p.msg.r{ text-align: right; padding-right: 4px; }

.current-program {background: #00914D;}

.state .msg.r:hover, .state .msg.l:hover, .state .msg.c:hover {background: #c9c9c9;}
.state.live {border-top: 8px solid #09345b; background: url(/img/bg/bg-opacity-20x20_1.png) repeat left top;}
.state.live p {color:#393939;}
.state.live.current-program {background: #09345b;}
.state.current-program .msg:hover {background:none !important;}
.state.live.current-program p {color:#f0f0f0;}

.program { cursor:pointer; float: left; width: 185px; height: 104px; position: relative;}
.program .program-screenshot {overflow: hidden; width: 100%; height: 100%; position: absolute; top:0; left:0;}
.program .program-screenshot img {width:100%; height: auto; display: block;}
.program .program-shadow {z-index: 2; position: absolute; bottom:0; left: 0; width: 100%; height: 100%; background-size: auto 100%; background:none;}
.program:hover .program-shadow {background: url(/img/bg/bg_shade.png) repeat;}
.program .program-options {opacity: 0; position: absolute; z-index: 20; bottom: 0; left: 0; width:100%; pointer-events:none;}
.program:hover .program-options {opacity: 1;}
.program .program-options .program-option {color:#f0f0f0;}
.program .program-options .program-back {float: left; cursor: pointer; pointer-events:auto;}
.program .program-options .program-back:hover {background: rgba(0,0,0,.5);}
.program .program-options .program-back .ico {width:17px; height: 11px; font-size: 0; background: url(/img/icon/back_icon.png) no-repeat; display: block; margin:0 0 0 10px;}
.program .program-options .program-schedule {display: block; float: right; padding: 0 .5em .5em 0; font-size: 12px; font-weight:bold;}
.program .program-info {z-index: 5; position: relative; height: 100%; background: none; border-left: 1px solid #c9c9c9;}
.program .program-info .content {top: 40px; left: 0; position: absolute; width: 100%;}
.program .program-info .program-comments {color:#f0f0f0; font-size: 15px; text-align: center; position: relative; z-index: 20;}
.program .program-info .program-comments:hover {background: rgba(0,0,0,.5);}
.program .program-info .program-comments .ico {width:10px; height: 8px; background-position: 0 -192px;}
.program .program-info .program-comments img {display: inline-block;}
.program .program-info:hover .program-title {display: block;}
.program .program-info .program-title {display: none;}
.program .program-info .program-title, .ir {position: relative; font-size: .9em; color: #f0f0f0; text-align: center; margin: 0 0 .2em 0; font-weight:bold;}
.ir {text-decoration:none; cursor: pointer; font-size: 11px;  }

#programming-container {left: 0;  width: 1920px; border: none; margin: 0px; padding: 0px; position:absolute }
#programming { height: 95px; width: 100%; background:none; overflow: hidden; margin:0!important; float:left; position:relative }
#days {height: 22px; width: 100%; overflow: hidden; margin: 0px; position: relative;}
#days-container { position: absolute;  top: 0px;  left: 0;  width: 1920px;  border: none;  margin: 0px;  padding: 0px; }
.position { position: relative; width: 0; top: -9px; border-left: 5px solid rgba(0, 0, 0, 0); border-right: 5px solid rgba(0, 0, 0, 0); border-top: 10px solid #CC1F3B; left: 70px; }
#current-program { background-color: #CC1F3B; width: 140px; height: 30px; margin-bottom: 10px; left: 135px; position: relative; }
.program-msg { padding-top: 5px; color: #fff; font-size: 14px; padding-left: 12px; }
.program-icon { position: relative; top: -46px; left: 140px; background-color: #9A1729; }

.left-button:hover, .right-button:hover{background: rgba(218, 218, 218,1); }
.left-button { background: rgba(218, 218, 218, 0.3); cursor: pointer; left: 30px; padding: 0 0 0 5px; position: absolute; top: -12px;  z-index: 10; height: 80px; width: 25px;}
.right-button { background: rgba(218, 218, 218, 0.3); cursor:pointer; position: absolute; top: -12px; right: 0px; padding: 0 5px 0 0; z-index: 10; height: 80px; width: 25px;}
#programminContainer {position: absolute; height: 108px; width: 100%; background:#FFF;}
#programsWrapper { position: relative; width: 100%; margin: 0; height: 64px; top: 0;}
#programminContainer  .day { border-bottom:1px solid #FFFFFF; background: #232323; float: left; border-right-color: #c9c9c9; border-right-style: groove; border-right-width: 2px; height: 21px;}
#programminContainer  .day p {font-family: 'Ubuntu'; font-style:italic;  font-size: 9px; color: #FFF; padding: 0px; top: 4px; margin: 0px 10px; height: 18px; position: relative;}

#program-indicator { position: absolute; display:none !important; top:93px; left: 550px; width: 0; height: 0; border-left: 25px solid rgba(0, 0, 0, 0); border-right: 25px solid rgba(0, 0, 0, 0);}
#program-indicator.live { border-top: 15px solid #C21F38; }
#program-indicator.prev{ border-top: 15px solid #6ea21a;}
.timeline-tabs {text-align: center; background:#dcdcdc; border-top:1px solid #a21518;}
.timeline-tabs .TL-tab {display: inline-block; padding: 20px;  cursor: pointer;  font-size:12px; font-weight: bold; color:#666666; text-transform: uppercase;}
.timeline-tabs .TL-tab:hover, .timeline-tabs .TL-tab.curTimeline { font-size:12px; color:#a21518; font-weight: bold; text-transform: uppercase; }
.timeline-tabs .TL-tab.curTimeline {background:url('/img/auxi/arrow_tab.png') no-repeat center top;}
.timeline-tabs .TL-tab .ico.ico-time {width: 12px; height: 12px; background-position: -588px -136px;  font-size:12px;}
.timeline-tabs .TL-tab .ico.ico-program {width: 16px; height: 11px; background-position: -552px -137px;  font-size:12px;}
.timeline-tabs .TL-tab:hover .ico.ico-time, .timeline-tabs .TL-tab.curTimeline .ico.ico-time {background-position: -588px -168px;  font-size:12px;}
.timeline-tabs .TL-tab:hover .ico.ico-program, .timeline-tabs .TL-tab.curTimeline .ico.ico-program {background-position: -552px -168px;  font-size:12px;}


#programmingNoVideoFrame { position: absolute; /* left: 0px; Propiedad para posicionar la marca */ height: 100%; width: 2000px; top: 0px; background: #000000; filter: alpha(opacity=70); opacity: 0.7; z-index: 149; }