.pageLeft, .pageRight
{
    border:1px #444444 solid;
    background-color: rgba(26, 26, 26, 0.5);
    color: rgba(255, 255, 255, 0.5);
    width: 30px;
    height: 40px;
    position: fixed;
    font-size: 2.2em;
    font-weight: bold;
    z-index: 15;
    top: 50%;
}

.pageLeft
{
/*    left: 0px;*/
    border-left: 0px;
    margin-left:-13px;
    border-radius: 0px 10px 10px 0px;
}

.pageRight
{
    border-right: 0px;
    right: 0px;
    border-radius: 10px 0px 0px 10px;
}

.pageLeft:hover, .pageRight:hover
{
    background-color: #003147;
    border-color: #0B93D5;
    color: rgba(255, 255, 255, 1.0);
}

.pageLeft:active, .pageRight:active
{
    background-color: #0B93D5;
    border-color: #0B93D5;
    color: rgba(255, 255, 255, 1.0);
}

#guide-container
{
    overflow: hidden;
    clear: both;
    width: 100%;
}

/* Guide Grid */
.guideGrid
{
    clear: both;
    overflow:hidden;
    width: calc(100% - 15px); /* Need to subtract padding of parent */
    position: absolute;
    padding: 0px;
    padding-bottom: 10px;
}

.guideGrid div
{
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}

.guideGrid .timeBar
{
    clear:both;
    margin: 5px 0px 2px;  /* Top Horizontal Bottom */
    height: 30px;
    font-size: 1.1em;
    font-weight: bold;
    vertical-align: middle;
    position: relative;
    /* We use this margin to align the timebar with the channel list when
       the scrollbar is displayed but the scrollbar isn't displayed for mobile
       browsers which causes it to be mis-aligned. Stuck on simple (non javascript)
       solution for this problem. */
/*    margin-right: 15px;*/
}

.guideGrid .timeBarDate
{
    float: left;
    background: #2A2A2A;
    background-image: linear-gradient(to bottom, #555555 4%, transparent 25%),
                linear-gradient(to right, #555555 1%, transparent 10%);
    border-top-left-radius: 10px;
    font-size: 1em;
    width: 10%;
    width: calc(91px - 1px);
    height: 100%;
    text-align: center;
    padding: 8px 4px; /* Vertical Horizontal */

}

.guideGrid .timeBarTimes
{
    float: left;
    width: 90%;
    width: calc(100% - 91px);
    height: 100%;
}

.guideGrid .timeBarTime
{
    background: #2A2A2A;
    background-image: linear-gradient(to bottom, #555555 4%, transparent 25%);
    padding: 7px 3px 6px 3px; /* Vertical Horizontal */
    height: 100%;
}

.guideGrid .channels
{
    /*
       The fat finger, small screen problem.
       Purely cosmetic, can be safely commented out if necessary, this just
       prevents browsers, mobile browsers especially from trying to highlight the
       text when you really wanted to click on a programme in the guide.
    */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    /* */
}

.guideGrid .channelRow
{
    clear: both;
    width: 100%;
    height: 82px;
    padding-bottom: 2px;
    /*margin: 2px 0px;*/ /* Vertical Horizontal */
    overflow: visible;
}

.guideGrid .noChannelsRow
{
    clear: both;
    width: 100%;
    height: 50px;
    margin: 2px 0px; /* Vertical Horizontal */
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
    background-color: #555555;
    font-size: 1.0em;
    font-weight: bold;
    padding-top: 15px;
}

.guideGrid .channelBox
{
    float: left;
    width: 10%;
    width: calc(91px - 1px); /* Opera still doesn't support calc() on linux, so use that to force a fixed size on browsers that do */
    height: 100%;
    text-align: center;
    vertical-align: middle;
    background: #2A2A2A;
    background-image: linear-gradient(to right, #555555 1%, transparent 10%);
    color: #FFFFFF;
    padding-left: 6px;
}

.guideGrid .channelIcon
{
    height: 57px;
    max-width: 86px;
    margin-left: 4px;
    margin-bottom: 3px;
    overflow: hidden;
    float: right;
}

.guideGrid .channelText
{
    clear: both;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0px 3px; /* Vertical Horizontal */
}

.guideGrid .programsBox
{
    float: left;
    width: 90%;
    width: calc(100% - 91px);
    height: 100%;
    position: relative;
    overflow: visible;
    padding: 0px 0px 0px 0px; /* Top Right Bottom Left */
}

/* An indicator of the part of the guide which is now in the past, it's width
   is determined programatically and should not be altered, it should like up
   exactly with the first program box. */
.guideGrid .relentlessMarchOfTime
{
    background: linear-gradient(to right, rgba(26, 26, 26, 0.8), rgba(26, 26, 26, 0.4));
/*    border-radius: 10px;*/
    z-index: 5;
    height: 80px;
    margin-left: 2px;
}

.guideGrid .programBox
{
    float: left;
    height: 100%;
    overflow: visible;
    padding: 0px 0px 0px 2px; /* Top Right Bottom Left */
}

.guideGrid .programBoxInner
{
    height: 100%;
    background-color: #555555;
    border-radius: 10px;
    position: relative; /* Required for programSchedPopup to be centred */
    cursor: pointer;
}

.guideGrid .programStartsOffScreen
{
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.guideGrid .programEndsOffScreen
{
    border-top-right-radius: 0px;
    border-bottom-right-radius: 0px;
}

.guideGrid .programHeader
{
    padding: 5px 8px 4px 7px;
    color: #FFFFFF;
    width: 100%;
    height: 28px;
/*     background-color: #444444; */
    background: linear-gradient(to bottom, #777777 1%, #555555 20%, #222222 99%);
    border-radius: inherit;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    z-index: 4;
    position: relative;

}

.guideGrid .programHeader IMG
{
    float: left;
    margin-top: 2px;
    margin-right: 3px;
    vertical-align: middle;
}

.guideGrid .programTitle
{
    float: left;
    color: #FFFFFF;
    font-size: 1.1em;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: bold;
    vertical-align: middle;
}

.guideGrid .programAirDate
{
    color: #508ED8;
    font-size: 0.8em;
}

.guideGrid .programBody
{
    margin: 3px 5px 4px 5px;
    color: #DDDDDD;
    height: 45px;
    z-index: 5;
    font-size: 0.8em;

}

.guideGrid .programDescription
{
    position: relative;
    z-index: 1;
    line-height: 15px;
}

.guideGrid .programSubtitle
{
    color: #508ED8;
    position: relative;
    font-weight: bold;
    margin-right: 5px;
    z-index: 1;
    line-height: 15px;
}

.guideGrid .programArrow
{
    font-size: 1.1em;
    font-weight: bold;
}