@font-face {
  font-family: "Helvetica Neue";
  src: url("../lib/fonts/helveticaneue-light-webfont?v=1.5.2");
  src: url("../lib/fonts/helveticaneue-light-webfont.eot?v=1.5.2#iefix") format("embedded-opentype"), url("../lib/fonts/helveticaneue-light-webfont.ttf?v=1.5.2") format("truetype"), url("../lib/fonts/helveticaneue-light-webfont.woff?v=1.5.2") format("woff"), url("../lib/fonts/helveticaneue-light-webfont.svg?v=1.5.2#Ionicons") format("svg");
  font-weight: normal;
  font-style: normal;
}

/** Body background is black when not watching tv, but transparent when TV is showing through (non-tv pixels are black on the STB) */
body {
    background: rgba(0,0,0,1.0) url("../img/background.jpg") top left no-repeat;
    font-size: 36px;
}
body.tv {
    background: rgba(0,0,0,0) !important;
}

/** The entire app background is see-through by default so that the TV can show through */
html,
ion-nav-view,
ion-pane,
ion-content,
view,
.pane[nav-view] {
    background: rgba(0,0,0,0);
}

ion-content, ion-content.scroll-content {
    background: rgba(0, 0, 0, 0.1);
    padding: 20px;
}
ion-content > .scroll {
    height: 100%;
}
ion-content.full-screen {
    padding: 0;
}

*:focus,
.button:focus,
*[ls-list-items]:focus {
    color: #fff;
    background: rgba(28, 90, 130, 1);

    /*
        RDS: This animation doesn't seem to get to use hardware acceleration so it causes
             some sluggishness at times. Instead, we'll just make it a solid border so
             it's still visually noticeable but w/o the CPU overhead.
     */
    box-shadow: 0 0 0 1px rgba(0,0,0,0.5), 0 0 0 10px rgba(255, 255, 255, 0.65);
    /*
        -webkit-animation: pulse-focus 2s infinite;
                animation: pulse-focus 2s infinite;
     */
    z-index: 10;
}

.selected-deletion-item {
    background: rgba(150, 0, 0, 0.5) !important;
}

.no-animate,
.no-animate * {
    -webkit-animation: none !important;
            animation: none !important;
}

/** Default to larger, high contrast font sizes to better suit our target audience */
p  { font-size:36px; margin:0; padding:0; }
h1 { font-size:55px; margin:0; padding:0; }
h2 { font-size:50px; margin:0; padding:0; }
h3 { font-size:45px; margin:0; padding:0; }
h4 { font-size:40px; margin:0; padding:0; }
h5 { font-size:36px; margin:0; padding:0; }
h6 { font-size:30px; margin:0; padding:0; }

p,
h1,
h2,
h3,
h4,
h5,
h6,
.section,
.section-header,
.section-item,
.section-footer {
    line-height: 1.2;
    color: #fff;
    text-shadow: none;
}

.community-section-item {
    font-size: 34px !important;
}

.sidenote {
    font-size: 0.8em;
    margin-left: 25px;
    opacity: 0.75;
}

.loading {
    display: block;
    text-align: center;
}
.loading .loading-content {
    display: inline-block;
    background: rgba(0,0,0,0.5);
    border-radius: 20px;
    margin: 0 auto;
    padding: 50px 100px;
    font-size: 45px;
    line-height: 1.2;
    color: #fff;
}
.loading .loading-content .icon {
    display: block;
    font-size: 150px;
    line-height: 1;

    -webkit-animation: blink .6s infinite;
            animation: blink .6s infinite;
}

.loading.x-small .loading-content { font-size: 32px; padding: 25px; }
.loading.x-small .icon { font-size: 75px;  }
.loading.small .loading-content { font-size: 36px; padding: 25px 50px; }
.loading.small .icon { font-size: 100px;  }
.loading.large .loading-content { font-size: 55px; }
.loading.large .icon { font-size: 250px; }

/** Make buttons easy to read on a television */
.button,
.button.button-default,
.button.button-assertive,
.button.button-balanced,
.button.button-positive {
    display: block;
    box-sizing: border-box;
    padding: 15px 16px;

    font-size:38px;
    line-height:50px;
    text-shadow: none;
    text-align: left;

    background: rgba(255,255,255,1);
    border-radius: 0;
    border-right: none;
    border-top: none;
    border-bottom: none;
    border-left: 20px solid rgba(200, 200, 200, 1.0);
}
.button:after {         /* Override ionic style that causes weird scroll issues when going up/down in buttons */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
}

.button:focus,
.button.button-default:focus,
.button.button-assertive:focus,
.button.button-balanced:focus,
.button.button-positive:focus {
    color: #fff;
    background: rgba(37, 116, 169, 1);
    border-left-color: rgba(71, 158, 215, 1);
}

.button.button-inline {
    display: inline-block;
}

.button.icon,
.button .icon {
    position:relative;
    top:2px;
    float: right;
}
.button.icon:before,
.button .icon:before {
    font-size:50px;
    line-height:50px;
    color: #000;
    opacity: 0.25;
}
.button .icon.icon-center {
    float: none;
    display: block;
    text-align: center;
}

.button.button-default,
.button.button-assertive,
.button.button-balanced,
.button.button-positive {
    color: #333;
    text-shadow: none;
}
.button.button-positive {
    border-left-color: rgba(41, 130, 180, 1);
}
.button.button-assertive {
    border-left-color: rgba(231, 76, 91, 1.0);
}
.button.button-balanced {
    border-left-color: rgba(38, 166, 91, 1.0);
}

.button.button-block + .button.button-block {
    margin-top: 15px;
}
.button-bar > .button.button-block + .button.button-block {
    margin-top: 0;
}

.button-bar .button {
    margin: 0 15px 0 0;
    display: inline-block;
}
.button-bar .button:last-child {
    margin-right:0;
}
.button-bar > .button,                    /* override the collapsing of button radius for adjacent buttons */
.button-bar > .button:first-child,
.button-bar > .button:last-child {
    border-radius: 0;
}




/* ----- AUTO-PAGING LISTS -------- */

/* Animation control for incoming items in an infinite ListDelegate */
.ls-list-enter.up *[ls-list-items] {
    -webkit-animation: fadeInUp 0.5s;
            animation: fadeInUp 0.5s;
}
.ls-list-enter.down *[ls-list-items] {
    -webkit-animation: fadeInDown 0.5s;
            animation: fadeInDown 0.5s;
}

.more-items-up {
    margin-top: 50px;
}
.more-items-down {
    margin-bottom: 50px;
}
.more-items-up:before {
    content: "\25B2";
    position:absolute;
    left:50%;
    top:-55px;
    margin-left:-50px;
    color:#fff;
    font-size:50px;
    width:100px;
    text-align:center;
    -webkit-transform:scale(10,1);
            transform:scale(10,1);

}
.more-items-down:after {
    content: "\25BC";
    position:absolute;
    left:50%;
    bottom:-50px;
    margin-left:-50px;
    color:#fff;
    font-size:50px;
    width:100px;
    text-align:center;
    -webkit-transform:scale(10,1);
            transform:scale(10,1);
}

.navigation-buttons.more-items-up:before {
    top:-20px;
    -webkit-transform:scale(5,1);
            transform:scale(5,1);
}
.navigation-buttons.more-items-down:after {
    bottom:-15px;
    -webkit-transform:scale(5,1);
            transform:scale(5,1);
}



/** General purpose helper classes */
.large    { font-size:75px; }
.x-large  { font-size:100px; }
.xx-large { font-size:125px; }
.xxx-large { font-size:150px; }

.spinner svg line      { stroke: #fff; }
.spinner.large svg     { width: 75px; font-size: 75px; height: 75px; line-height: 75px; }
.spinner.x-large svg   { width: 100px; font-size: 100px; height: 100px; line-height: 100px; }
.spinner.xx-large svg  { width: 125px; font-size: 125px; height: 125px; line-height: 125px; }
.spinner.xxx-large svg { width: 150px; font-size: 150px; height: 150px; line-height: 150px; }

.tight > .list,
.tight { margin:0; padding:0; }
.padding { padding: 15px; }
.x-padding { padding:15px; }
.xx-padding { padding:20px; }

.padding-top-right { padding:15px 15px 0 0; }
.padding-top { padding:15px 0 0 0; }

.height-short{ height:200px; max-height:200px; overflow: hidden; }
.height-medium { height:325px; max-height:325px; overflow: hidden; }
.height-full { height: 100%; max-height: 100%; overflow: visible; }

.pull-left { float:left; }
.pull-right { float:right; }
.pull-center { display:block; margin:0 auto; }

.pre { white-space: pre-line !important; }

.content-center {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    text-align: center;
}


/** ----- WIFI Network selection UI hints ----- */

.connection-bar {
    font-weight:bold;
    display:inline-block;
}
.connection-bar:after {
    content:"|";
}


/** ----- Left Hand Navigation ---------- */

.navigation {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    width:300px;
    min-height:720px;
    background:rgba(255,255,255,0.3);
    overflow:hidden;
}

.navigation-buttons {
    margin:25px;
    padding:2px 0;
    position:relative;
    -webkit-animation-duration: 400ms;
            animation-duration: 400ms;
}

.navigation-button {
    display:block;
    background: rgba(0,0,0,0.6);
    text-align:center;
    font-size:40px;
    line-height:1.1em;
    padding:20px;
    margin:10px 0;
    box-sizing:border-box;
    border-radius:10px;
    color:#fff;
}

/*
 * Avoids the 2 second delay when changing ng-if/show/hide criteria
 * http://stackoverflow.com/questions/26938021/angular-ng-if-or-ng-show-responds-slow-2second-delay#
 */
.navigation-button.ng-hide.ng-hide-animate {
    display: none !important;
}

.navigation-button .icon {
    font-size:65px;
    display:block;
}
.navigation-button.active {
    background: rgba(0,0,0, 1.0);
}
.navigation-button:focus {
    background: rgba(28, 90, 130, 1);
}

.navigation + .scroll-content {
    left:300px;
    width:980px;
}
.navigation.ng-hide + .scroll-content {
    left:0;
    width:1280px;
}


/* ----- Generic progress bar ----- */

.progress-bar {
    height:75px;
    width:100%;
    position:relative;
    background:rgba(75,75,75,0.85);
    border:1px solid rgba(0,0,0,0.45);
}
.progress-bar-progress {
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    width:auto;
    background: rgba(41, 128, 185, 1);
    background: -webkit-linear-gradient(45deg, rgba(255,255,255,0.1) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgba(41, 128, 185, 1);
    background:         linear-gradient(45deg, rgba(255,255,255,0.1) 25%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 50%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.1) 75%, rgba(0,0,0,0) 75%, rgba(0,0,0,0) 0), rgba(41, 128, 185, 1);
    background-repeat: repeat;
    -webkit-background-origin: padding-box;
            background-origin: padding-box;
    -webkit-background-clip: border-box;
            background-clip: border-box;
    -webkit-background-size: 50px 50px;
            background-size: 50px 50px;

    -webkit-transition: width 1s linear;
            transition: width 1s linear;
}
.progress-bar-progress-text {
    position:absolute;
    top:0;
    right:15px;
    bottom:0;
    line-height:75px;
    font-size:44px;
    color:#fff;
}


/* ----- News styles ----- */

.news-article-image {
    max-height:300px;
    max-width:50%;
    display:block;
    float:right;
    margin-left: 20px;
}

/* ----- Weather Tile in Home Slideshow ----- */

.weather-conditions .weather-conditions-temperature {
    font-size: 120px;
    line-height: 160px;
    letter-spacing: -10px;
}
.weather-conditions .weather-conditions-icon {
    position: absolute;
    top: 30px;
    right:0;
    opacity:0.75;
    height: 256px;
    width: 256px;
}

.weather-extended .weather-day {
    margin: 5px 0;
    height: 80px;
    line-height: 80px;
}
.weather-extended .weather-day img {
    height: 80px;
    top: -4px;
    position: relative;
}
.weather-extended .weather-day .weather-high {
    font-weight: bold;
}

/* ----- Live On-Screen Notifications -------  */

.instant-notifications {
    width: 100%;
    height: 720px;
    position: relative;
    line-height: 1.2;
}
.instant-notification {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    border-top: 1px solid rgba(255, 255, 255, 1);
    padding: 30px;
    z-index: 1000;
}
.instant-notification-title {
    color: rgba(255, 255, 255, 1.0);
    font-size: 50px;
}
.instant-notification-details {
    color: rgba(255, 255, 255, 1.0);
    font-size: 40px;
}
.instant-notification-controls.button-bar {
    padding: 15px 0 0 0;
}


/* ----- Fading between channels on the main screen ----- */

.main-content [ui-view] {
    position: absolute;
    width: 100%;
    height: 100%;
}
.main-content [ui-view].ng-enter {
    -webkit-animation: fadeIn 0.35s;
            animation: fadeIn 0.35s;
}


/* ----- Standard section/item look and feel ----- */

.section {
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: visible;
    position: relative;
}
.section + .section {
    margin-top: 15px;
}

.section,
.section h1,
.section h2,
.section h3,
.section h4,
.section h5,
.section h6,
.section p {
    line-height: 1.2;
    color: rgba(255, 255, 255, 1.0);
}

.section-header,
.section-footer {
    display: block;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    position: relative;
}
.section-header {
    padding: 30px 20px;
}
.section-header.button {
    border-left: 10px solid rgba(230, 230, 230, 1.0);
    border-radius: 0;
}

.section-item {
    display: block;
    flex: auto;
    background: rgba(0, 0, 0, 0.55);
    padding: 10px 20px;
    overflow: hidden;
    position: relative;
}
.section-item:first-child {
    padding-top: 20px;
}
.section-item:last-child {
    padding-bottom: 20px;
}
.section-item[tabindex] {
    flex: none;
    border-left: 20px solid rgba(230, 230, 230, 1.0);
    padding: 20px;
    font-size: 40px;
    margin-top: 15px;
}
.section-item[tabindex]:first-child {
    margin-top: 0;
}
.section-item[tabindex]:focus {
    color: #fff;
    background: rgba(28, 90, 130, 1);
    border-left-color: rgba(255, 255, 255, 0.1);
}
.section-item[tabindex] + .section-footer,
.section-item[tabindex] + .section-item:not(*[tabindex]) {
    margin-top:15px;
}

.section-item > .icon:first-child:before {
    position:absolute;
    top:50%;
    right: 15px;
    margin-top:-27px;
    font-size:55px;
    line-height:55px;
    color: rgba(255, 255, 255, 0.75);
}

.section.compact .section-item {
    padding: 5px 20px;
}
.section.compact .section-item:first-child {
    padding-top: 10px;
}
.section.compact .section-item:last-child {
    padding-bottom: 10px;
}

.section.assertive .section-header,
.section.assertive .section-item,
.section.assertive .section-footer,
.section-header.assertive,
.section-item.assertive,
.section-footer.assertive,
.page-footer.assertive {
    background: rgba(125, 20, 20, 0.75);
    color: #fff;
}

.section-item[tabindex].assertive {
    border-left-color: rgba(150, 20, 20, 1);
}
.section-item[tabindex].positive {
    background: rgba(0, 0, 0, 0.55);
    border-left-color: rgba(71, 158, 215, 1);
}
.section-item[tabindex].positive {
    background: rgba(0, 0, 0, 0.55);
    border-left-color: rgba(71, 158, 215, 1);
}

.section-item.avatar img {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    max-height: 100%;
}


.section-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
}


.section-item.focus-prompt + .focus-prompt-content {
    display: none;
}
.section-item.focus-prompt:focus {
    padding-bottom: 170px !important;
}
.section-item.focus-prompt:focus + .focus-prompt-content {
    display: block;
    background: rgba(0,0,0,0.9);
    position: absolute;
    z-index:5000;
    bottom:0;
    padding: 25px;
    left:0;
    right:0;
    height:150px;
    line-height:50px;
    font-size: 34px;
}


.section.error {
    margin: 100px auto 15px auto;
    width: 85%;
}


.page-header {
    display: block;
    margin: -20px -20px 20px -20px;
    padding: 20px;
    background: rgba(0, 0, 0, 0.55);
    font-size: 55px;
}
.page-footer {
    display: block;
    position: absolute;
    padding: 30px 20px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
}
.page-header,
.page-header *,
.page-footer,
.page-footer * {
    color: #fff;    
}

.page-footer[tabindex] {
    border-left: 10px solid rgba(230, 230, 230, 1);
}

.grid {
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    overflow: visible;
}
.grid > .cell {
    display: block;
    flex: auto;
    padding: 0;
    margin: 0;
    height: 100%;
}
.grid > .cell.cell-10 { width: 10%; }
.grid > .cell.cell-20 { width: 20%; }
.grid > .cell.cell-25 { width: 25%; }
.grid > .cell.cell-30 { width: 30%; }
.grid > .cell.cell-33 { width: 33%; }
.grid > .cell.cell-34 { width: 34%; }
.grid > .cell.cell-40 { width: 40%; }
.grid > .cell.cell-50 { width: 50%; }
.grid > .cell.cell-60 { width: 60%; }
.grid > .cell.cell-66 { width: 66%; }
.grid > .cell.cell-67 { width: 67%; }
.grid > .cell.cell-70 { width: 70%; }
.grid > .cell.cell-75 { width: 75%; }
.grid > .cell.cell-80 { width: 80%; }
.grid > .cell.cell-90 { width: 90%; }

.nowrap {
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.reading-screen {
    padding: 0 !important;
}

.reading-screen .reading-pane {
    border-left: 0;
    padding: 25px 50px !important;
    width: 100%;
    max-height: 720px;
}

/* Make a wall of text easier to read w/ less distractions */
.reading-screen .reading-pane:focus {
    color: #fff;
    -webkit-animation: none !important;
            animation: none !important;

    box-shadow: none;
}
.reading-screen .reading-pane:focus p,
.reading-screen .reading-pane:focus h1,
.reading-screen .reading-pane:focus h2,
.reading-screen .reading-pane:focus h3,
.reading-screen .reading-pane:focus h4,
.reading-screen .reading-pane:focus h5,
.reading-screen .reading-pane:focus h6 {
    color: #fff;
    text-shadow: none;
}
.reading-screen .reading-pane p {
    font-size: 42px;
}

.reading-screen .reading-pane-media audio-player,
.reading-screen .reading-pane-media picture-player,
.reading-screen .reading-pane-media video-player {
    margin: 0;
    -webkit-animation: none;
    animation: none;
    box-shadow: none;
}

.reading-screen .reading-pane-media video-player {
    padding: 25px 0;
}
.reading-screen .reading-pane-media video-player .video-player-info {
    bottom: 30px;
}
.reading-screen video-player *:focus {
    -webkit-animation: none;
    animation: none;
    box-shadow: none;
}

.reading-screen .reading-section + .reading-section {
    margin-top: 0;
}
.reading-screen .reading-section,
.reading-screen .reading-section > .section-item {
    background: #000;
}

/* Make the "about" settings page format correctly with large amounts of text.*/
.reading-screen .reading-section.about .reading-pane {
    font-size: 35px;
}

.scrollable {
    overflow: auto;
}
.scrollable::-webkit-scrollbar {
    width: 25px;
    background: rgba(0,0,0,0.2);
}
.scrollable::-webkit-scrollbar-button {
    display: none;
}
.scrollable::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.65);

    right: 5px;
    top: 5px;
    bottom: 5px;
}


.volume-indicator {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: rgba(0, 0, 0, 0.9);
    padding: 42px 125px 50px 125px;
}
.volume-indicator .progress-bar-progress {
    -webkit-transition: none;
            transition: none;
}


.slide-box {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.slide-box-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
}
.slide-box-slide.current {
    opacity: 1.0;
}
.slide-box.fade .slide-box-slide {
    -webkit-transition: opacity .5s ease-in;
            transition: opacity .5s ease-in;
}

#ls-font-fit-calculator {
    position: absolute;
    left: -3000px;
    top: 0;
    visibility: hidden;
    overflow: hidden;
    white-space: pre-line;
}
#ls-font-fit-calculator.debug {
    visibility: visible;
    left: 0;
    background: red;
    color: white;
    opacity: 0.5;
    z-index: 500;
}

#no-internet-text {
    position:absolute;
    color:red;
    top: 650px;
    left: 750px;
    text-align:right;
}

/*
 * <Big 'Ol Hackaroo>
 * Right now we only have 1 activity theme and when we allow others this will need to go. This allows
 * us to properly size activity slides based on their content. In the slideshow we float the times/names so that the
 * time is to the left and the activity name is to the right. It's the only content slide that supports additional
 * markup in the "text box".
 *
 * Because we try to mirror the element off-screen to perform font-fit calculations the floating nature of those
 * elements is lost. As a result the times end up on separate lines from the names. This screws up the height calculation
 * and as a result the font size we pick is perfect for "stacked" times/names, but makes the side-by-side version
 * look really tiny. This simply forces the font-fit element to float the times/names so it calculates a reasonable
 * font size that looks good when used in the activity slides.
 */
#ls-font-fit-calculator .slideshow-activity-time {
    float:left;
    width: 25%;
    text-align:right;
}
#ls-font-fit-calculator .slideshow-activity-name {
    float:left;
    width: 75%;
    text-align:left;
    padding-left:50px;
}
#ls-font-fit-calculator .slideshow-activity-name-no-time {
    float:left;
    width: 100%;
    text-align:left;
}
/* </Big 'Ol Hackaroo> */

.bg-dark {
    background-color: rgba(0, 0, 0, 0.5);
}
.bg-darker {
    background-color: rgba(0, 0, 0, 0.8);
}
.bg-darkest {
    background-color: rgba(0, 0, 0, 1);
}

.no-padding {
    padding: 0 !important;
}
.no-margin {
    margin: 0 !important;
}
.d-flex {
    display: flex;
}
.flex-center {
    align-items: center;
}
.flex-column {
    flex-direction: column;
}
.flex-grow {
    flex-grow: 1;
}
.justify-content-start {
    justify-content: flex-start;
}
.justify-content-around {
    justify-content: space-around;
}
.justify-content-between {
    justify-content: space-between;
}
.flex-stretch {
    align-content: stretch;
}
.flex-wrap {
    flex-wrap: wrap;
}

.fill-screen {
    width: 100%;
}
.fill {
    height: 100%;
    width: 100%;
}

#scheduled-player {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

#scheduled-player.ready {
    visibility: visible;
}

#scheduled-player.not-ready {
    visibility: hidden;
}

#scheduled-player.go-big {
    height: 100%;
    width: 100%;
}

#scheduled-player > .video-player,
#scheduled-player > .video-player .video-player-container {
    height: 100%;
    width: 100%;
    border: none;
}

#scheduled-player > .video-player .video-player-info {
    display: none;
}

#scheduled-player > .video-player .video-player-container > iframe.go-big {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
}
