//import the sass variables
@import "variables";

//
// HTML & Webkit
//
body {
    width    : 1920px;
    height   : 1080px;
    padding  : 0;
    margin   : 0;
    overflow : hidden;
    font-family : $font-light;
    background  : $color-bg-app url("../images/bg_app.jpg") no-repeat left top;
}

div {
    -webkit-box-sizing : border-box;
}

//
//Application Styles
//
.app-top-bar {
    position : absolute;
    width    : 100%;
    height   : 240px;
    z-index  : 200;
    background-color : rgba(0,0,0,0.1); 
}

.app-logo {
    position : absolute;
    bottom   : 30px;
    right    : 150px;
}

//
// Left Nav Styles
//
.leftnav-main-container {
    position : absolute;
    top    : 0;
    left   : 0;
    height : 100%;
    width  : 760px;
    margin : 0;
    z-index: 0;
}

.leftnav-menu-list {
    position : absolute;
    width    : 100%;
    height   : 100%; 
    padding  : 0px;
    overflow : hidden;
    background-color : rgba(0, 0, 0, 0.9);
}

.leftnav-menulist-expanded {
    @extend .leftnav-menu-list;
    height : 100%;
    top    : 0;
}

.leftnav-menulist-minified {
    @extend .leftnav-menu-list;
    top : 140px;
    height : 98px;
}

.leftnav-menu-scrolling-list {
    color       : $color-font-leftnav-static;
    //-webkit-transition-property : -webkit-transform, top;
    //-webkit-transition-duration : $ani-duration-leftnav-menu;
    //-webkit-transition-timing-function: linear;
}

.leftnav-list-item-static {
    word-wrap    : break-word;
    line-height  : 98px;
    max-height   : 98px;
    font-family  : $font-light;
    font-size    : $font-size-lrg;
    padding-left : $left-content-position;
    margin-bottom    : 2px;
    background-color : rgba(235,235,235,0.07);
    -webkit-transition-property : opacity;
    -webkit-transition-duration : $ani-duration-leftnav-item;
}

.leftnav-list-item-static:first-child {
    margin-top : 140px;
}

.leftnav-list-item-highlighted {
    font-size : $font-size-xlrg;
    color     : white;
    background: black url($img-leftnav-icon) no-repeat right 40px center;
}

.leftnav-list-item-selected {
    font-size : $font-size-xlrg;
    color     : black;
    background: white url($img-leftnav-icon) no-repeat right 40px center;
}

.leftnav-list-item-chosen {
    font-size : $font-size-xlrg;
    color : white;
    background: #3f484f url($img-leftnav-icon) no-repeat right 40px center;
}

//
// Full Row View
//
.one-D-details-container {
    position : absolute;
    top    : 0;
    left   : 0;
    width  : 100%;
    height : 100%;
    -webkit-transition-property : opacity;
    -webkit-transition-duration : $ani-duration-maincontent-opacity;
    -webkit-transition-timing-function: linear;
}

.one-D-details-summary-text {
    position : absolute;
    top       : 690px;
    left      : $left-content-position;
    width     : 80%;
    color     : $color-val-info;
    .one-D-summary-title {
        font-size   : $font-size-med;
        font-family : $font-bold;
        overflow  : hidden;
        display   : -webkit-box;
        -webkit-box-orient: vertical;  
        -webkit-line-clamp: 1;
    }
    .one-D-summary-pubdate {
        font-size : $font-size-tiny;
        font-family : $font-light;
    }
    .one-D-summary-description {
        margin-top : 20px;
        font-size : $font-size-small;
        font-family : $font-light;
        overflow  : hidden;
        display   : -webkit-box;
        -webkit-box-orient: vertical;  
        -webkit-line-clamp: 2;
    }
}

.detail-row-container-buttons {
    position : absolute;
    bottom   : 100px;
    left     : $left-content-position;
    height   : 75px;
}

.detail-item-button {
    position : relative;
    width   : 315px;
    height  : 73px;
    padding : 15px;
    float   : left;
    margin-right : 10px;
    text-align   : center;
    font-family  : $font-light;
    font-size    : $font-size-smlMed;
    border   : 1px solid transparent; 
}

.detail-item-button-selected {
    @extend .detail-item-button;
    color    : $color-font-button-selected;
    overflow : hidden;
    border-color :$color-font-button-selected;
    margin-top   : 0px;
    background-color : $color-bg-button-selected; 
}

.detail-item-button-static{
    @extend .detail-item-button;
    color   : $color-font-button-static;
    background   : $color-bg-button-static;
}

#one-D-shoveler-container {
    position: absolute;
    top    : 290px;
    left   : 0px;
    width  : 100%;
    height : 380px;
    -webkit-transform : translateZ(0);
    -webkit-transition-property : -webkit-transform opacity;
    -webkit-transition-timing-function: linear;
}

//
// Shoveler View
//
.shoveler-dynamic-row-container {
    position : absolute;
    width : 1000%;
    height : 100%;
    left : 200px;
    overflow : hidden;
    -webkit-transition-property: -webkit-transform;
    -webkit-transition-duration: 1s; 
    -webkit-transform: translateX(0);
    -webkit-transition-timing-function: linear;
}

.shoveler-row-container {
    width : 100%;
    height : 100%;
    -webkit-transform-style : preserve-3d;
}

.shoveler-rowitem-static {
    position : absolute;
    left   : $left-content-position;
    height : 100%;
    background-color:gray;
    -webkit-transition-property : -webkit-transform, opacity;
    -webkit-transition-duration : 0.25s;
    -webkit-transition-timing-function: linear;
    -webkit-transform-origin: left center;
    img {
        height     : 100% !important;
        display    : inline-block;
    }
}

//selected elements in the shoveler view
.shoveler-rowitem-selected {
    img {
        background-blend-mode: overlay;
        display:inline-block;
    }
}

//
// Player View
//
.player-main-container {
  position : absolute;
  top    : 0;
  left   : 0;
  width  : 100%;
  height : 100%;
}

.player-content-video {
    position : absolute;
    width  : 100%;
    height : 100%;
}

.player-controls-container {
    position: absolute;
    width: 100%;
    height: 30%;
    padding : 0 8%;
    bottom: 0;
    opacity: 0;
    -webkit-transition: 0.5s;
    background-color : rgba(0,0,0,.8); 
}

.player-controls-timeline-container {
    position : relative;
    margin-top :20px;
    height : 10px;
}

.player-controls-timeline {
    position : absolute;
    top      : 0;
    left     : 0;
    width    : 100%;
    height   : 100%;
    border   : 1px solid #5a5a5a;
    border-radius: 6px;
    background-color : #c5c5c5;
}

.player-controls-timeline-playhead {
    position : absolute;
    width  : 0%;
    height : 10px;
    border : 1px solid #25435a;
    margin-top : -1px;
    border-radius: 6px;
    background-color : #707070;
}

.player-controls-timestamp {
    margin-top : 10px;
    font-size  : $font-size-small;
    font-family : $font-light;
}

.player-controls-timestamp-curtime {
    @extend .player-controls-timestamp;
    color : white;
    display : inline-block;
    float   : left;
}

.player-controls-timestamp-totaltime {
    @extend .player-controls-timestamp;
    color   : #9b9b9b;
    display : inline-block;
    float   : right;
}

.player-controls-content-title {
    position : absolute;
    bottom   : 160px;
    color : white;
    font-size : $font-size-lrg;
    font-family : $font-medium;
    margin-top  : 20px;
    overflow  : hidden;
    display   : -webkit-box;
    -webkit-box-orient: vertical;  
    -webkit-line-clamp: 1;
}

.player-controls-content-subtitle {
    position : absolute; 
    top      : 170px;
    width    : 60%;
    color    : #9b9b9b;
    font-size   : $font-size-xsmall;
    font-family : $font-light;
    font-style  : italic;
}

.player-pause-button {
    position   : absolute;
    top        : 250px;
    left       : 870px;
    height     : 200px;
    width      : 200px;
    opacity    : 0;
}

//
// Overlay and Spinner
//
 .app-overlay-container {
    position : absolute;
    top   : 0;
    left  : 0;
    width : 100%;
    height: 100%;
    background-color: #000;
    z-index: 100;
}

.app-main-spinner {
    position: absolute;
    top   : 0;
    left  : 0;
    bottom: 0;
    right : 0;
    width : 120px;
    height: 120px;
    display : inline-block;
    margin  : auto;
    border  : 1px solid #000;
    background-color : $color-val-light-static; 
    border-radius: 50%;
    -webkit-animation: loading-spinner 1.2s infinite ease-out;
}

.content-load-spinner {
    position: absolute;
    top   : 0;
    left  : 0;
    bottom: 0;
    right : 0;
    width : 120px;
    height: 160px;
    margin: 25% auto;
    text-align: center;
    font-size: 10px;
    z-index: 200;
}

.content-load-spinner > div {
    background-color: #333;
    height: 100%;
    width: 10px;
    display: inline-block;
    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
}

.content-load-spinner .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
}

.content-load-spinner .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
}

.content-load-spinner .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
}

.content-load-spinner .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }  
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% { 
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% { 
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}

//
// Animations
//
//the shine animaton keyframes for row elements
@-webkit-keyframes left-nav-hilight-animate {
    0%   {background-position:-140px}
    100% {background-position:-550%}
}

//the shine animaton keyframes for row elements
@keyframes global-shiner-animate {
    from { background-position: 0px -1400px; }
    to { background-position: 0px 1000px; }
}

//the shine animaton keyframes for row elements
@-webkit-keyframes global-shiner-animate {
    from { background-position: 0px -1400px; }
    to { background-position: 0px 1000px; }
}

// throbber for initial data load
@-webkit-keyframes loading-spinner {
    0% { -webkit-transform: scale(0.1)}
    100% { -webkit-transform: scale(1); opacity: 0}
}
