.tvProgramSectionHeader { margin: 0; } .tvProgram { display: block; text-decoration: none; font-weight: normal!important; white-space: nowrap; position: relative; } .detailSectionHeader + .tvProgram { border-top: 1px solid #444; margin-top: 1px; } .tvProgramTimeSlot { width: 80px; vertical-align: middle; font-weight: bold; color: #fff; position: absolute; top: 0; left: 0; bottom: 0; border-bottom: 1px solid #444; } .tvProgramTimeSlotInner { padding: .5em; } .tvProgramInfo { vertical-align: middle; padding: .5em .5em; border-bottom: 1px solid #444; } .tvProgramTimeSlot + .tvProgramInfo { margin-left: 80px; border-left: 1px solid #444; } .tvProgramCurrentTimeSlot { background-color: green; } .tvProgramName { color: #fff; font-weight: bold; margin-bottom: .5em; } .tvProgramTime { color: #fff; } .newTvProgram { color: #E88606; } .liveTvProgram { color: #64A239; } .premiereTvProgram { color: yellow; } .sportsProgramInfo { background-color: #0F2624; border-bottom: 2px solid #0A7C33; } .newsProgramInfo { background-color: #211A32; border-bottom: 2px solid #523378; } .movieProgramInfo { background-color: #271A21; border-bottom: 2px solid #A43913; } .childProgramInfo { background-color: #092345; border-bottom: 2px solid #0B487D; } .tvProgram:hover, .tvProgram:hover .tvProgramInfo { background-color: #4d90fe; } .timerCircle { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: #cc0000; vertical-align: top; border: 1px solid #cc3333; margin-left: 1em; } .seriesTimerCircle { position: relative; margin-left: 0; left: 21px; opacity: .3; } .itemMiscInfo .seriesTimerCircle:first-child { margin-left: 1em; } .seriesTimerCircle + .seriesTimerCircle { opacity: .65; left: 0; } .seriesTimerCircle + .seriesTimerCircle + .seriesTimerCircle { opacity: 1; left: -21px; } .channelImageContainer .itemDetailImage { max-width: 200px; max-height: 110px; margin-top: 1em; margin-bottom: 1em; } .channelTimeslotHeader { position: absolute; left: 0; } .timeslotHeaders { position: absolute; right: 13px; overflow-y: hidden; overflow-x: hidden; white-space: nowrap; } .channelPrograms { white-space: nowrap; height: 47px; } .timeslotHeader { display: inline-block; } .timeslotHeaderInner { padding: .5em .35em; } .timeslotCell { display: inline-block; border-bottom: 1px solid #444; border-left: 1px solid #444; border-collapse: collapse; position: relative; } .channelHeaderCell, .channelTimeslotHeader { overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid #444; border-left: 1px solid #444; border-right: 1px solid #444; width: 189px; } .channelTimeslotHeader { border-right: 1px solid #4971A7; } .channelTimeslotHeader, .timeslotHeader { background: #4971A7; border-bottom: 1px solid #4971A7; border-left: 1px solid #4971A7; } .timeslotHeader, .channelTimeslotHeader { height: 28px; } .channelHeaderCellInner { padding: .5em .5em; display: block; text-decoration: none; font-weight: normal!important; color: #fff!important; position: relative; } .channelHeaderCellInner:hover { background-color: #38c; } .channelList { overflow-y: hidden; overflow-x: hidden; position: absolute; left: 0; bottom: 16px; } .programGrid { position: absolute; bottom: 0; right: 0; overflow-y: scroll; overflow-x: scroll; } .timeslotCell, .timeslotHeader { width: 190px; } .timeslotCellInner { position: absolute; bottom: 0; overflow: hidden; width: 100%; top: 0; display: block; text-decoration: none; font-weight: normal!important; color: #fff!important; } .timeslotCellInnerWithProgram { z-index: 99; } .timeslotCellInnerWithProgram:hover { background-color: #38c; } .timeslotHeaders, .programGrid { left: 191px; } .channelTimeslotHeader, .timeslotHeaders { top: 135px; } .channelList, .programGrid { top: 165px; } .channelHeaderCell, .timeslotCell { height: 46px; } .guideProgramName { padding: .35em .5em; } .guideProgramTime { padding: 0 .5em .35em; } .plainProgramInfo { background-color: #252525; } .guideChannelInfo { display: inline-block; max-width: 110px; overflow: hidden; white-space: nowrap; } .guideChannelImage { max-width: 60px; max-height: 35px; position: absolute; right: 7px; top: 7px; } @media (max-width: 600px) { .channelHeaderCell, .channelTimeslotHeader { width: 90px; } .timeslotHeaders, .programGrid { left: 91px; } .guideChannelImage { display: none; } } /* Account for hidden navigation */ @media (max-width: 750px) { .channelTimeslotHeader, .timeslotHeaders { top: 100px; } .channelList, .programGrid { top: 130px; } }