/*

Theme Name: Narrowcast
Author: Cloudwise
Version: 1.0.2
Text Domain: Narrowcast
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed:700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700');

@font-face {
    font-family: 'digital-7regular';
    src: url('font/digital-7-webfont.woff') format('woff'),
         url('font/digital-7-webfont.ttf') format('truetype');
}

html, body{
    margin:0;
    padding:0;
    height:100%;
    overflow:hidden;
}

.narrow-wrapper{
    width:100vw;
    height:100vh;
    display:flex;
    flex-direction:column;
}

body.narrowcast{
    cursor:none;
}

.narrow-content > * {
    height:100%;
}

.narrow-content{
    flex:1;
    position:relative;
}

.narrow-footer{
    display:flex;
    align-items:center;
    height:65px;
    background:#e3e4e4;
    color:#707173;
    font-family:"Open Sans", sans-serif;
    padding:0 40px;
}

/* NOS logo */
.nos-logo img{
    height:65px;
    margin-right:20px;
}

/* Klok */
#tijd{
    flex:0 0 200px;
    font-family:'digital-7regular';
    line-height:72px; 
    font-size:46px;
    text-align:center;
    margin-right:20px;
}

/* Ticker container */
.ticker-mask{
    flex:1;
    overflow:hidden;
    position:relative;
    height:60px;
    display:flex;
    align-items:center; /* vertical center van LI's */
}

/* UL van ticker */
#news-ticker{
    display:flex;          /* alle LI's naast elkaar */
    position:absolute;      /* scrollt over de container */
    left:100%;             /* start buiten rechts */
    margin:0;
    padding:0;
    list-style:none;
}

/* LI items */
#news-ticker li{
    margin-right:50px;     /* afstand tussen berichten */
    white-space:nowrap;    /* niet afbreken */
    font-size:20px;
    color:#707173;
}

/* Scheidingsteken '-' tussen items */
#news-ticker li:not(:last-child)::after{
    content:" - ";
    margin-left:50px;
    color:#707173;
}

/* Extra classes (optioneel) */
.ticker-item{
    margin-right:80px;
    font-size:20px;
    color:#707173;
}

/* Keyframes voor oude ticker fallback */
@keyframes ticker{
    from { transform:translateX(100%); }
    to { transform:translateX(-100%); }
}