/*
 * Global Styles
 *
 * - most styles are used for browse.html
 * - other usages in: info.html, logout.html and watch.html.
 */

* { box-sizing: border-box; }

html {
    font-family: Source Sans Pro, sans-serif;
    font-weight: 300;
    font-size: 16px;
    height: 100%;
}

body {
    position: relative;
    top: 0;
    margin: 0 auto;
    padding: 0;
    min-height: 100%;
}

a {
    color: inherit;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.inline-link {
    border-bottom: 1px solid rgba(0,0,0,0.3);
}

.inline-link:hover {
    color: white;
    background-color: black;
}

#page-content-wrapper {
    display: none;
    max-width: 1500px;
    margin: 0 auto;
}

/* Title, Text and Headings
 *
 */
#int-menu-title {
    text-align: center;
    margin-bottom: 30px;
}

h1 {
    font-weight: 300;
    font-size: 30px;
    margin: 0;
}

h2 {
    font-weight: 300;
}

/* Sets the page content to the same width as the header */
.header-width {
    width: 100% !important;
    max-width: 1060px !important;
    padding: 0 50px;
}

/* Breadcrumbs
 *
 */

#breadcrumbs {
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
}

.breadcrumbs-home-icon {
    width: 16px;
    height: 16px;
    margin: 0 3px;
}

.breadcrumbs-home-icon polyline {
    stroke: #E4154B !important;
}

#breadcrumbs a {
    margin: 0 3px;
    white-space: nowrap;
}

#breadcrumbs a:hover {
    color: white;
    background-color: black;
}

#breadcrumbs a:hover polyline, #breadcrumbs a:active polyline {
    stroke: white !important;
    transition: none;
}

/* Header:
 * - Drop Down
 * - Search Field
 */

#header-bar {
    position: sticky !important;
    position: -webkit-sticky;
    z-index: 100 !important;
    top: 0;
    left: 0;
    right: 0;
    width: 96%;
    margin: 0 auto;
    display: flex;
    background-color: white;
}

#search-bar-wrapper {
    width: 100%;
    margin: 5px;
}

#filter-form {
    margin: 0 0 5px 0;
}

select, input {
    font-family: Source Sans Pro, sans-serif;
    font-size: 18px;
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 5px 10px;
    border: 1px solid #a6a6a6;
}

select {
    width: calc(50% - 2px);
    background: white url("../img/dropdown_arrow.png") no-repeat 90% 35%;
    border-radius: 0;
}

input {
    font-weight: 300;
    color: black;
    width: 100%;
}

select:focus, input:focus {
    outline: none !important;
    border:1px solid #E4154B;
}

select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #000;
}

/* Series Links:
 * - container
 * - links
 * - boxes
 */

#page-content {
    display: flex;
    width: 96%;
    margin: 0 auto;
}

#left {
    flex: 1;
    margin: 0 5px;
}

#left-placeholder {
    width: 0;
    visibility: hidden;
}

#right {
    flex: 3;
}

/* Bordered Box for elements in left column
 *
 */
.bordered-box {
    outline: none;
    border: 1px solid #a6a6a6;
    padding: 5px;
    margin-bottom: 5px;
}

.bordered-box:hover {
    color: black;
    outline: none;
    border: 1px solid black;
    transition: none;
}

.bordered-box-highlighted {
    outline: none;
    border: 1px solid #E4154B;
}

.bordered-box-title-row {
    display: flex;
}

.bordered-box-title-row-left {
    flex: 18;
}

.bordered-box-title-text {
    font-size: 18px;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bordered-box-details-text {
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
}

.toast {
    font-size: 13px;
    font-weight: bold;
    border-radius: 5px;
    padding: 5px;
}

/*
 * Colors for Toast messages in bordered-box.
 * Toast are notifications.
 */

.none {
    background-color: transparent;
}

.green {
    background-color: #6eaa46;
    color: white;
}

.red {
    background-color: #E4154B;
    color: white;
}

/*
 * Live Stream Series Toggle
 * works as bordered-box-title-row-right
 *
 */
.stream-settings {
    flex: 1;
    background: white url(../img/edit.png) no-repeat top;
    background-size: 18px;
    cursor: pointer;
    margin-top: 5px;
}

.save-settings-button, .save-settings-button-disabled  {
    font-family: Source Sans Pro, sans-serif;
    font-size: 18px;
    -moz-appearance: none;
    -webkit-appearance: none;
    margin: 5px 0 5px 0;
}

.save-settings-button:focus {
    outline: none !important;
}

/* Stream Status Indicators
 * - styles for live and offline labels
 */

.live {
    color: #E4154B;
    font-weight: bold;
}

.offline {
    color: #a6a6a6;
}

/* Episodes Links and Content Boxes
 * - styles for episode thumbnails and text/image content boxes.
 */

.page-content-box {
    position: relative;
    float: left;
    overflow: hidden;
    color: white;
    background-color: #245b78;
    margin: 0 5px 5px 0;
}

/* Episode Size and Position */
.page-content-box-episode {
    width: calc(50% - 5px);
    height: 0;
    padding-top: 25%;
}

/* Overlay for Link Text */
.content-box-episode-link,
.content-box-episode-overlay,
.page-content-box-episode-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.content-box-episode-link {
    z-index: 4;
    background-color: transparent;
}

/* Light Background Overlay */
.content-box-episode-overlay {
    z-index: 3;
    background-color: rgba(36, 91, 120, 0.8);
    transition: background-color 0.3s;
}

/* Hover Behavior
 * - light overlay -> transparent
 * - text span -> black
 */
.content-box-episode-link:hover .content-box-episode-overlay,
.content-box-episode-link:focus .content-box-episode-overlay {
    background-color: transparent;
}

.content-box-episode-link:hover .content-box-episode-text-container span,
.content-box-episode-link:focus .content-box-episode-text-container span {
    background-color: black;
}

.content-box-episode-text-container {
    margin: 15px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Text Overlays */
.content-box-episode-title {
    font-size: 20px;
    margin-bottom: 2px;
}

.content-box-episode-series-info {
    position: absolute;
    bottom: 15px;
}

/* Background Image */
.page-content-box-episode-background {
    background-size: cover;
}

#spinner {
    clear: both;
    margin-top: 5px;
}

#spinner img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#no-more-episodes, #no-series {
    clear: both;
    width: 100%;
    text-align: center;
    padding: 32px 0;
}

#error-message {
    display: none;
    width: 100%;
    text-align: center;
    padding: 32px 0;
}

/*
 * Player Frame
 */

#iframe-wrapper {
    position: relative;
    width: calc(100% - 5px);
    height: 0;
    padding-top: 55.5%;
    margin: 0 0 5px 0;
}

#empty-video-wrapper {
    position: relative;
    width: calc(100% - 5px);
    height: 0;
    padding-top: 55.5%;
    margin: 0 0 5px 0;
}

#video-frame {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#empty-video-frame {
    position: absolute;
    text-align: center;
    font-weight: 300;
    font-size: 25px;
    top: 33.3%;
    left: 0;
    width: 100%;
    height: 100%;
    color: white;
}