[panikweb.git] / panikweb_templates / static / css / _specifics.scss

/* COLORS */

$black: #000000;
$white: #FFFFFF;
$primary: #FF7E83;
$secondary: #0062CB;

/****************************************************/
/* FONTS */

.resymbol:hover,.control:hover{    opacity:0.5;    }
.date, .dateBloc {
        font-family: "Reglo";
        text-transform: uppercase;
}
.inline .date, .resume .date{
        text-align: center;
}
.dateBloc{width:4em;
        text-align: center;}
.dateBloc{display:inline-block;}
.dateBloc *{line-height: 100%;}
.dateBloc  .day {font-size: 1.8em;}
.dateBloc .number {font-size: 1.8em;}
.dateBloc  .month {font-size: 0.8em;}
.dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}

.dateBloc.small{
        font-size: 80%;
}

.date.smooth {
        text-transform: none;
        font-size: 100%;
        font-family: RegloNormal;
}

.tabs .ui-tabs-nav {
    font-family: "Reglo";
    text-transform: uppercase;
}
.legend{
        font-family: "Reglo";
        font-size:1.2em;
        border-bottom:3px solid black;
        padding: 0.2em 0 0.2em 0;
        margin: 0.2em 0 0.2em 0;
}
#Main .sectionLabel{
        margin-bottom:1em;
}

.sectionLabel, .label {
    text-transform: uppercase;
    font-family: "Reglo";
    font-size:1.3em;
}

.rightPart .right.sectionLabel {
        text-transform: none;
        border-bottom: 1px solid black;
        padding-bottom: 3px;
}

h5.focus-title {
        color: $secondary;
}

.rightPart #search-form {
        text-align: right;
        margin-bottom: 2em;
}

.label.relative{
    background-color:black;
    position: absolute;
    left:10px;
    top:-5px;
    color:white;
    padding:5px 7px 0px 7px;
}

/****************************************************/
/* WRAPPER */
/****************************************************/
.wrapper {max-width: 1560px; padding:0 1%;}
.wrapper.text {max-width: 780px; margin:auto;}
.wrapper .rightPart{margin-top:1em;}

@media screen and (min-width: 760px) {
        #player-container.fixed {
                position: fixed;
                top: 60px;
                width: calc(0% + 235px);
        }
        .wrapper .rightPart{
        margin-top:0;
        }
        .wrapper.sided .leftPart,
        .wrapper.sided .rightPart{
                width:45%;
        }
        .wrapper.navigation .leftPart{
                width:60%;
        }
        .wrapper.navigation .rightPart{
                width:35%;
        }
        .wrapper .leftPart{
                float:left;
        }
        .wrapper .rightPart{
                float:right;
        }
        #specialHome {
                padding-left: 0;
        }
    /*
        #specialHome .leftPart,
        #specialHome .rightPart {
                width: 100%;
        }
    */
        p.intro {
                padding-top: 0px;
                padding-bottom: 40px;
        }
}


button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
nav.menu{
        width:100%;
        text-align: justify;
        text-justify: distribute-all-lines;
}
nav.menu li{
        display: inline-block;
        margin-right:2em;
}

button.tag, a.tag{
        font-size:0.9em;
        background:white;
        font-family: "RegloBold";
        text-transform: uppercase;
        display:inline-block;
        border: 1px solid #CCC !important;
        color:#342E2E;
        margin: 0.2em;
        padding: 0.3em;
        border-radius: 0.7em;
        -moz-border-radius: 0.7em;
        -webkit-border-radius: 0.7em;
}
button.check, a.check {
        font-size:0.9em;
        text-transform: none;
        display:inline-block;
        margin: 0.2em;
        padding: 0.3em;
}

.category{
        font-family: "RegloBold";
        text-transform: uppercase;
}
button.check:before, a.check:before {
        display:inline-block;
        width:1.5em;
}
.box{
        padding:0.2em 0.5em 0.2em 0.5em;
        border-radius: 0.2em;
        -moz-border-radius: 0.2em;
        -webkit-border-radius: 0.2em;
        background:#222;
        color:#fff;
}
.ui-tooltip {
        border:1px solid white;
        position:absolute;
        margin:0;       
        padding: 0.5em;
        background:#222;
        color: white;
        z-index: 9999;
        max-width: 50%;
        background: white;
        color: #222;
        border-color: #222;
}
/****************************************************/
/**** BODY ****/
/****************************************************/
body{
        background: white url(../img/sars-cov-2.jpeg);
        background-size: cover;
        color: #333;
}
/****************************************************/
/**** metaNAV ****/
/****************************************************/

#metaNav {
        color: #e8e8e8;
        background-color: #3a3a3a;
        position:fixed;
        z-index:1000;
        top:0px;
        width:100%;
        font-size: 90%;
}
#metaNav ul{
}
#metaNav ul li{
        float: left;
        padding: 0 1em;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow:hidden;
}

#metaNav ul li#nav-search {
        float: right;
}

#metaNav ul li a{
        height: 3em;
        line-height: 3em;
        display:block;
}

#metaNav ul li#nav-language span {
        cursor: pointer;
        height: 3em;
        line-height: 3em;
        display: inline-block;
}

#metaNav ul li#nav-language span.lang-on {
        color: white;
}

#metaNav ul li a span{
        display:inline-block;
}

#metaNav ul li a span.nav-icon {
}

#metaNav a:focus, #metaNav a:hover{
    opacity:0.8;
}
#metaNav ul li.active, #metaNav ul li.active a{
        color: white;
}

#metaNav ul li.active span.iconLabel {
}

#metaNav li#nav-search a {
        display: inline;
}

#metaNav form {
        display: inline-block;
        padding-top: 0.2em;
}

#metaNav input {
        border: 1px solid #ececec;
        width: 10em;
}

.icon-rss {
        color: orange;
}

@media screen and (max-width:760px){
        #bg-title { display: none; }
        #metaNav .iconLabel {display:none;}
        #metaNav ul li a span.nav-icon { display: inline-block; }
        #metaNav ul li {
                padding: 0;
        }
        #metaNav ul li a {
                padding: 0 1em;
        }
        #metaNav form {
                display: none;
        }
        #metaNav ul li#nav-language {
                padding: 0.2em 0 0 1em;
        }
        div#Changing {
                margin: 0 5px;
        }
}
@media screen and (max-width:400px){
        #metaNav ul li#nav-language {
                padding: 0.2em 0 0 1ex;
        }
        #metaNav ul li a {
                padding: 0 0.8em;
        }
}

/****************************************************/
/**** Commons ****/
/****************************************************/

.audio button {color:$primary !important;}
/****************************************************/
/**** HEADER ****/
/****************************************************/

/* PANIK LOGO */
#Commons{
        position: relative;
        z-index: 5;
}
#Commons .wrapper{
}
#mainHeader {
        padding-bottom:1em;
}
#mainHeader {
    font-size:70%;
}
#mainHeader *{color:black !important;line-height:1em;}
#mainHeader #radioPanik{}

#Panik img{display:block;margin:auto;max-height:200px;}
#mainHeader h1{
        padding-left:75px;
}
#player-container #player{
    padding:0 0 0 0;
    min-width: 240px;
}

#Changing h1.top a:hover {
        opacity: 1.0;
}

@media screen and (max-width: 760px) {
        #All h1.top {
                font-size: 60px;
                padding: 0;
                padding-top: 10px;
                text-align: center;
        }
        #specialHome .leftPart h1.top {
                display: none;
        }
        #specialHome .leftPart h2 {
                padding-top: 10px;
                text-align: center;
        }
}

@media screen and (min-width: 760px) {
        #Commons {
                float: left;
                width: 20%;
                width: -webkit-calc(0% + 240px);
                width: -moz-calc(0% + 240px);
                width: calc(0% + 240px);
        }
        #Changing {
                position: relative;
                float: right;
                width: 78%;
                width: -webkit-calc(100% - 280px);
                width: -moz-calc(100% - 280px);
                width: calc(100% - 280px);
        }
        #All h1.top {
                font-size: 120px;
                font-family: RegloScale;
                text-transform: uppercase;
                padding-left: 0;
                padding-top: 2rem;
                padding-bottom: 0;
        }

        #metaNav {
                padding-top: 2px;
        }
        #metaNav .nav-icon {
                display: none !important;
        }

        ul#ticker {
                margin-bottom: 10px;
        }

        #News div.mainSub,
        #About div.mainSub,
        #Emissions div.mainSub {
                position: absolute;
                top: 50px;
                left: 320px;
                width: 60%;
                width: calc(98% - 320px);
        }

        #News div.mainSub ul,
        #About div.mainSub ul,
        #Emissions div.mainSub ul {
                padding: 0;
                font-family: Reglo;
                font-weight: normal;
        }

        #News div.mainSub ul li,
        #About div.mainSub ul li,
        #Emissions div.mainSub ul li {
        }

        #News .news.wrapper {
                padding: 0;
        }

        #News .news.wrapper li a {
                margin-left: 0;
                padding-left: 0;
        }

        #Nav header.marged,
        #Main > .marged {
                margin: 0;
        }

        #Related .wrapper,
        #Main > .wrapper,
        #Main > .soundfiles > .wrapper,
        #Main > .news > .wrapper,
        #Nav > .wrapper {
                padding-left: 0;
        }

        #All #Nav nav ul {
                margin-top: 0;
        }

        #Related .padded,
        div.program.padded {
                padding-top: 0;
                padding-left: 0;
        }

        div.program.padded {
                padding-top: 1.5em;
        }

        #fiber-content h2.title {
                margin-top: 0;
                padding-top: 0;
        }

}

#backgroundBox {
        background: transparent center 40px no-repeat url(../img/Radio_Panik_Logo_2016-01.png);
}

#All #backgroundBox h1.top {
        font-size: 50px;
        padding-left: 10px;
        width: 200%;
}

#backgroundBox h1 {
        color: $primary !important;
}

#All h1.top#radiopanik {
        padding-top: 0;
        color: black !important;
        padding-bottom: 30px;
        height: 130px;
}

#All #backgroundBox h1 {
        visibility: hidden;
}


#specialHome div.rightPart h1,
div.focus {
        color: $secondary;
}

h1.top#frequence {
        color: $primary;
}

/****************************************************/
/****  SCREEN NAV ****/
#Nav nav{padding:0.1em;}

#Nav input{color:#333;}
#Nav ul li button,
#Nav ul li a {
        border-width:0 0 2px 0;
        border-style: solid;
        border-color: transparent;
}

#Nav .current,
#Nav .active,#Nav .icon-check,#Nav .active *{
        font-weight: normal;
}

#Nav .selected a,
#Nav ul li.current a, #Nav ul a.active, #Nav button.active {
        border-color: #333;
}

#Nav nav{
        margin:0;
}

#specialHome h2,
#Nav h2{
        margin:0;
        padding:0;
}
#Nav nav ul{
        margin:1em 0 1em 0;
}

#Nav li {
        padding-right: 1em;
}

#Nav li a{
        display: inline-block;
}
#Nav nav ul.distributed li {padding: 0;}

#fiber-nav{
    font-size:150%;
        border-width:0 0 2px 0;border-style:solid;
}
#fiber-nav li, #fiber-nav li a{
        display:block;
}
#fiber-nav ul{
        padding:0.5em;
}
#fiber-nav li a{
        padding:0.5em;
}
#fiber-nav .selected > a,
#fiber-nav .current {
    font-weight:bold;
}

/****************************************************/
/**** PLAYER ****/
/****************************************************/
/*#Home #player{   float: left; } */

#player-container,
   #player-container *{border-color:$primary !important;color:$primary !important;}

#player-container .metas, #player-container img{border-color:#fff;}
#player-container .padded{padding:0.3em;}

#player-container button,#player-container a{
}
#player-container .metas{
    float:right;
}
#DirectStreamPanikControler {
        display:inline !important;
}
#chatSymbol,
#streamSymbol{
        font-size:3em;
        float:left;
        margin-right:5px;
        position: relative;
        z-index: 10;
        top: -6px;
}
#CurrentlyPlaying{
        padding:0 0 0 0;
}

#Player.withPlaylist #player-container #Playlist{
        border-top:2px solid black;
}
#Player.withPlaylist #player-container #Playlist{
        margin-top: 1em;
        padding-top: 1em;
}

#player-container #myPlaylist {
        clear: both;
        padding: 1em 0 0 0;
        height: auto;
}

#player-container #myPlaylist a {
        margin-right: 30px;
        white-space: normal;
        padding-bottom: 1ex;
}

#player-container.minimized{
        width:auto;
        border-width:0px 2px 2px 0 !important;
        border-bottom-right-radius:1em;
        -moz-border-bottom-right-radius:1em;
        -webkit-border-bottom-right-radius:1em;
}
#player-container.minimized #player{
        padding:0;
}

/*Playlist*/

#Playlist #playlistLabel{
        float:right;

}
#Playlist .playListControls{    
}
#Playlist .playListControls button{     
        margin-right:0.5em;
        display:inline-block;
}
#Playlist .playListControls .playPause{
        font-size:3em;
        margin-right:5px;
        float:left;
        position: relative;
        top: -8px;
}

#Playlist .playing .icon-pause{
   -webkit-animation: loading 1s infinite linear;
   -moz-animation: loading 1s infinite linear;
   -o-animation: loading 1s infinite linear;
   animation: loading 1s infinite linear;
}
#Playlist .playlistControls button,#Playlist .playlistControls .button{
        margin:0 0.1em 0 0.1em;
}
#Playlist li{
        clear:right;
}
#Playlist .soundControls button{}

#player-container #Playlist ol{
        clear:right;
        padding:0;
        margin-left: 50px;
}
#player-container #Playlist ol li{
        line-height:1.3em;
        padding:0;
        margin:0;
}
#Playlist ol li .soundControls{
        line-height:1.5em;
        height:1.5em;
        clear:right;
        float:right;
}
#Playlist ol li .title{
        margin-right:70px;
        display:block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
}
#player .active{
        text-transform:uppercase;
        font-weight:bold;
}
/*limit height of playlist*/
#player #CurrentlyPlaying,
 #player-container #Playlist ol{
        opacity:0.9;
        padding-top:0.2em;
        height:auto;
        overflow: hidden;
}

@media screen and (max-width: 760px) {
        #backgroundBox {
                background-position: center 30px;
                background-size: 130px;
        }
        #All h1.top#radiopanik {
                height: 80px;
        }
        #Player{
        margin-top:1em;
    }
        #Player.withPlaylist #player-container #audioPlayer,
          #Player.withPlaylist #player-container #audioPlayer,
           #Player.withPlaylist #player-container #Playlist{
                float:none !important;
                width:auto !important;
        border-right:none !important;
                max-width:auto !important;
        }

        #player.on-chat-page {
                display: none;
        }

        div.chat-page .rightPart {
                font-size: 95%;
                margin-top: 4em;
                padding-top: 1em;
                border-top: 1px solid #777;
        }

}

/****************************************************/
/**** #Changing #Footer ... ****/
/****************************************************/
#Changing{
        display: flex;
        flex-direction: column;
        min-height: 97vh;
}

#Main{
        flex-grow: 1;
        color:#333;
        position: relative;
        z-index: 1;
}
#Main >.wrapper{
        padding-bottom:2em;
}
#Home #Main{
        min-height:0;
}
#Changing a:hover,#Changing button:hover {
        opacity:0.6;
        text-decoration:none;
}
/* GLOBAL SITE NAV */
#userLog{
        z-index:2000;
        position: fixed;
        bottom: 0px;
        right: 0px;
}
#userLog .log{
        margin:0.3em;
        -moz-box-shadow: 0px 0px 3px #000;
        -webkit-box-shadow: 0px 0px 3px #000;
        box-shadow: 0px 0px 3px #000;
        border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
        text-align:center;
        padding: 0.3em;
        font-size:0.9em;
        color:black;
        background-color:$primary;
        border: 2px solid black;
        background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.04) 50%, rgba(0, 0, 0, 0.04) 75%, transparent 75%, transparent);
}
#userLog .log.info{
        background-color:grey;
        color:white;
}
#userLog .log.ok{
        background-color:green;
        border-color:black;
        color:white;
}
#userLog .log.error{
        background-color:$primary;
        border-color:yellow;
}
#main {}
#mainLegend{
        width:30%;
        text-align:right;
        float:right;
        padding:1em;
}

#Footer{
        border-top:2px solid #333;
        padding-top: 2em;
        padding-bottom: 80px;
        position: relative;
        z-index: 3;
}

#Footer ul {
}

#Footer ul li {
        padding-right: 2em;
}

#Footer a:hover {
        opacity:0.6;
}


/****************************************************/
.inline .link{display:block;padding:1em;}
/**** Liste   ****/
/**** EMISSIONS ****/
#Emission .emission-detail .title{}
/*
*/
#Emission-tabs-menu .sub{
        margin-bottom:1em;
}
/**** Detail    ****/
.emission-detail .metas{
        line-height:1.5em;
        float: left;
        width: 49%;
        margin-top: 0;
}

.emission-detail h4.subtitle {
        margin-top: 1em;
        font-weight: normal;
        font-family: 'Reglo';
        text-transform: none;
        float: left;
}

.emission-detail ul.schedule {
        margin-top: 0;
        margin-bottom: 1em;
 }

.emission-detail ul.schedule .weekdiff {
        font-size: 80%;
}

.emission-detail article {
        clear: both;
}

.emission-detail .logo{
        float:right;
        width: 50%;
        margin-bottom: 1ex;
}
@media screen and (max-width: 300px) {
        .emission-detail .metas {
                float: none;
                width: auto;
                margin: 0;
        }
        .emission-detail .logo{max-width:100%;}
}
.emission .mainHeader {
    overflow: hidden;
    margin-bottom:1.5em;
}

.emission .contacts {
        clear: both;
}

/**** Inline    ****/
.emission.inline, .emission.resume {
        padding:1em 0 1em 0;
}

.emission.inline div.date {
        min-height: 3em;
        text-align: center;
        display:inline-block;
        float:left;
        margin-right:1em;
}
.emission .archived {
        opacity:0.6;
}

.emission .link .description {
        margin: 0px 0 5px 0;
        font-family: "RegloMedium";
}


/**** EPISODE ****/
/**** Detail  ****/

.episode .tag{
}
.episode.resume, .episode.inline{
        padding:1em 0.5em 1em;
}
.episode.inline .dateBloc, .episode.resume .dateBloc{
        float:left;
}
.episode.resume img {
        border: 2px solid black;
}

.episode.resume .title{
        margin-bottom:0.5em;
}
.episode.resume .logo{
        float: right;
}
.topik-link .logo,
.episode.inline .logo {
        min-height: 50px;
        float: left;
        margin-right: 1em;
}
.episode.resume .sound{
        float:right;
        margin:0 0 0.5em 0.5em;
}
.episode.inline .sound.right{
        text-align:center;
        font-size:70%;
        position: relative;
        z-index: 10;
}
.episode.inline .sound.right button{
    font-size:1.5em;
        display:inline;
        text-align:center;
        padding-bottom:0.05em;
}
.episode.resume .sound.right .icon-download{
        text-align:center;
}
.episode.resume .sound.right .icon-download{
        display:block;
}

.big.icon-pause,
.big.icon-stop,
.big.icon-share {
        display: inline-block;
        vertical-align: middle;
}

.episode.detail .logo.right{
        max-width:50%;
}

.episode.resume .date .day, .emission-detail .date .day {
}

.episode.resume .content {
        padding-left: 5em;
}
.episode.resume .content .title {
}

.episode.resume .logo {
        margin:0 0 1em;
        max-width:20%;
}
.episode.inline .date{
        font-size:80%;
}

#Emission-tabs-menu .emissions-newsitems {
        margin-bottom: 2em;
}

#Emission-tabs-menu .emissions-newsitems ul.list li {
        border: 0;
}

#Emission-tabs-menu .futur-episodes h5,
#Emission-tabs-menu .recent-episodes h5 {
        font-size: 1.2em;
}

#Emission-tabs-menu #search-form {
        margin-bottom: 1em;
}

div.extra-soundfiles h3 {
        margin-top: 1em;
        font-size: 2.5em;
}

div.extra-soundfiles ul li {
        position: relative;
}

div.extra-soundfiles ul li div.audio {
        display: inline;
        top: 5px;
        right: 0;
        position: absolute;
        font-size: 60%;
}

div.extra-soundfiles ul strong {
        padding-right: 3em;
}

@media screen and (max-width: 400px) {  
        .episode .dateBloc{
                width:4em;
                font-size:80%
        }

        .episode.resume .content {
                padding-left: 4em;
        }
}

/****************************************************/
/**** News ****/

#newsRoll {
        max-width: 500px;
}

#newsRoll li {
        background: white;
}

.newsRoll .title{
        background:black;
        color:white;
        bottom:0px;
        opacity:0.9;
    width:100%;
        text-align: left;
        font-family: "RegloBold";
        position: absolute;
        left: 0;
}
.newsRoll .title div{
        padding: 1em;
}
.newsRoll a, .newsRoll button img{
    border:3px solid $secondary;
}

.newsRoll .by3 button {
        width: 100%;
}

.soundfiles .special a,
.news .special a {
        position: relative;
}

.special .labels .item,
.newsRoll .labels .item{
        display:block;
        background: $secondary;
        color:white;
        margin:0.1em;
        font-size:0.9em;
        padding:0.3em;
}
.newsList .current a{
    opacity:0.5;
}
/****************************************************/
.list.news li {
}

.soundfiles ul.custom li a,
.news ul.custom li a { max-width: 98%; }
.news li.item a {padding:1em;}

.logo img{
        display:block;
        border-style:solid;
        border-width:3px;
}
ul.newsSpecial{
        border-bottom:3px solid #ccc;
}
@media only screen and (max-width: 970px) {
        .columns {column-count: 1;      -webkit-column-count: 1;        -moz-column-count: 1;}
}


/****************************************************/
/**** Home & ****/
/****************************************************/

#Home #Nav .wrapper{
        max-width:auto !important;
        width:auto !important;
}

/*
@media screen and (max-width:800px){
        #Home .newsRoll .logo{
                max-width:100px;
        }
}
@media screen and (max-width:600px){
        #Home .newsRoll .logo{
                max-width:50px;
        }
}
*/

/****************************************************/
/**** PROGRAM ****/
/****************************************************/

.program.tabs nav ul li{
        display:table-cell;
        width:14%;
        text-align:center;
}

.program.tabs nav ul li.week-arrow {
        width: 1%;
        padding-bottom: 5px;
}

.program ul .dateBloc {
        float:left;
        padding-top:1em;
}
.program ul .schedule {
        margin-left:5em;
}
.program .nonstop {
        text-align:left;
}
.program-week .programDate{
        float:left;
        width:3em;
}
.program-week .programCell{
        margin-left:3.5em;
}
.program-week .nonStop .programDate{
        visibility:hidden;
}
.program-week .nonStop .programCell{
        font-size:0.9em;
        padding-left:50%;
        text-align:right;
}
.program-week a.nonstop{
        font-size:0.9em;
        margin:0.1em;
}
.program-week .inline,.program-week .resume{padding:0;}
.program-week .description{}

.program-week .title {
        color: black;
        display: inline;
}

.program-week .smooth {
        color: #666;
        opacity: 1.0;
        font-size: 80%;
        padding-bottom: 8px;
}

.program-week .emission h5,
.program-week .smooth .title {
        color: #333;
        text-transform: uppercase;
}

.program-week .description {
        color: black;
        font-size: 90%;
}

.program-week .programCell:hover {
        opacity: 0.5;
}

#Changing .program-week .programCell a {
        opacity: 1.0;
}

#Changing .program-week .programCell .smooth a {
        opacity: 0.5;
}

#Changing .program-week .programCell .smooth h5 a {
        opacity: 1.0;
}


/****************************************************/
/**** SEARCH ****/
/****************************************************/

.search li.previous-page {
  margin-bottom: 2ex;
  text-align: left;
  margin-left: 0ex;
  font-style: italic;
}

.search li.next-page {
  margin-top: 2ex;
  text-align: right;
  margin-right: 0;
  font-style: italic;
}

.search-filters {
  text-align: justify;
}


/****************************************************/
/**** GRILLE ****/
/****************************************************/

#grid #Main {}
#grid th{
        color:#000;
}
#grid .heure {
        height:50px !important;
}
#grid .heure.vertical {
        padding:1.5em 0;
}
#grid .day {
        padding:1em 0 1em 0;
}
#grid .nonstop {
}
#grid .item{
        padding:0.5em 0.2em 0.5em 0.2em;
}
#grid .cell hr {
        border:1px dotted #ddd;
        margin:0.3em;
}
#grid .time-label{
        margin-top:0.5em;
}

#grid .highlighted,#grid .highlighted  *{
        background:#333 !important;
        color:white !important;
}

#grid .highlighted,#grid .highlighted  *{
        background:#333 !important;
        color:white !important;
}
#Emissions li.item.normal{
        display:none;
}
#Emissions li.item.hightlighted{
        display:block !important;
}

#gridNav span.category {
        text-transform: none;
}


/**** Navigation for static pages ****/

#fiber-nav {
        font-size: 150%;
}
#fiber-nav li, #fiber-nav li a {
        display: block;
}
#fiber-nav ul{
        padding: 0.5em;
}
#fiber-nav li a{
        padding:0.5em;
}

#fiber-content a {
        text-decoration: underline;
}

#fiber-content .episode a,
#fiber-content ul.list a {
        text-decoration: none;
}

#fiber-content a:hover {
        text-decoration: none;
}

.intro,
.userContent,
#fiber-content,
.content,
.content h5 {
        line-height: 120%;
}

.userContent strong,
#fiber-content strong {
        text-transform: none;
        font-family: "RegloBold";
        font-style: normal;
}

.userContent em,
#fiber-content em {
        font-family: inherit;
        font-style: italic;
}

/**** SCREEN SIZE ADAPTATIONS ****/
    html #main{ font-size: 70%; }
body { font-size: 18px;}
@media (max-width: 300px){
    body #All{ font-size: 80%; }
}

@media (min-width: 300px) and (max-width:800px){
    body #All{ font-size: 85%; }
}

@media (min-width: 700px) and (max-width:1000px){
    body #All{ font-size: 90%; }
}

@media (min-width: 1000px) {
    body #All{ font-size: 100%; }
}

#subscribe-form {
  position: relative;
  margin-bottom: 2em;
  padding-bottom: 2em;
}

#Home #subscribe-form {
  margin-bottom: 0;
}

#subscribe-form ul.errorlist {
  position: absolute;
  bottom: -2em;
  text-align: center;
  display: block;
  width: 100%;
  padding: 0;
  list-style: none;
  color: #800;
}

#subscribe-form input {
        width: 15em;
        max-width: none;
}

#Nav div.search form {
  padding: 1em 0;
}

div.episode.resume div.title {
        white-space: normal;
}

#Home div.program.tabs {
        margin: 1em 0;
}

nav#program li {
        display: block;
        margin: 0;
}

#recent-emissions,
#recent-news,
#recent-sounds {
        margin-top: 2em;
}

#recent-emissions h3,
#recent-news h3,
#recent-sounds h3 {
        font-size: 140%;
}

#recent-emissions h3.sectionLabel {
        margin-bottom: 0;
}

.episode.soundfile {
        padding: 0;
}

.soundfile .smooth {
        color: #666;
        opacity: 1.0;
        font-size: 80%;
}


.soundfile p.date {
        margin: 0;
}

.frontpage.soundfile .audio {
        font-size: 80%;
        padding-top: 0.5ex;
        padding-bottom: 1ex;
}

#panikdb {
        position: absolute;
        top: -20px;
        right: 0px;
        background: white;
        color: #888;
        padding: 5px 10px;
        border: 1px solid #888;
        border-width: 1px 1px 0 1px;
        -webkit-transform-origin: bottom right;
        -webkit-transform: rotate(270deg);
        -moz-transform-origin: bottom right;
        -moz-transform: rotate(270deg);
        transform-origin: bottom right;
        transform: rotate(270deg);
}

img.logo.right {
        margin-bottom: 1em;
}

.soundfile .special,
.newsitem .special {
        margin-bottom: 2em;
}

.newsitem .special .smooth {
        padding-top: 5px;
}

/* USER CONTENT */

div.userContent ul {
        margin: 1em 0;
}

div.userContent h1,
div.userContent h2,
div.userContent h3,
div.userContent h4 {
        text-transform: none;
        font-family: "Reglo";
        font-weight: normal;
}

div.userContent h1 { font-size: 2em; }
div.userContent h2 { font-size: 1.8em; }
div.userContent h3 { font-size: 1.5em; }
div.userContent h4 { font-size: 1.5em; }
div.userContent a { text-decoration: underline; }

div.userContent a.tag { text-decoration: none; }

@media screen and (max-width: 760px) {
        #streamSymbol{
                top: 0;
        }
        #MainHeader {
                margin: 0 auto;
        }
        #All #backgroundBox h1.top {
                width: 94%;
        }

        #Player.withoutPlaylist #player-container #audioPlayer{
            margin:auto;
            width:100%;
        }
        #Player.withoutPlaylist #player-container #audioPlayer #Live{
            font-size:150%;
        }


        #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
        #player-container{
                background: $primary;
        }
        #player-container * {color: white !important; }
        #player-container{
                z-index:500;
                position:fixed;
                width:100% !important;
                /*top:2em;*/
                font-size:80%;
                bottom:0em;
                border-bottom:none;
        }
        #Player.withPlaylist #player-container #audioPlayer{
                float:left;
                width:50%;
                border-right:2px solid black;
        }
        #Player.withPlaylist #player-container #Playlist{
                float:right;
                width:49%;
                text-align:left;
        }
        #player-container #myPlaylist {
                padding: 0;
        }

        #player-container #myPlaylist a {
                white-space: nowrap;
        }

        #player-container #Playlist ol{
                margin-left: 30px;
        }
}

div.emission-logo {
        margin-left: 1em;
}

div.extra-soundfiles {
        clear: both;
}

h3.episode-subtitle {
        font-size: 2.5em;
}

.waveform {
        display: none;
        position: relative;
}

.waveform span {
        background: #3A3A3A;
        background: rgba(10, 10, 10, 0.8);
        display: inline-block;
        width: 0.50%;
}

.waveform span.done {
        background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
}

.waveform span.done.current + span {
        background: $primary;
}

.waveform i.duration {
        position: absolute;
        right: 4px;
        bottom: 4px;
        color: $primary;
        text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
        font-style: normal;
        font-weight: bold;
}

span.timestamp {
        cursor: pointer;
        border-bottom: 1px dotted #666;
}

div.fragment-sound {
        position: relative;
}

div.soundcell div.logo {
        vertical-align: top;
}

div.fragment-sound {
}

div.extra-soundfiles div.fragment-sound {
        margin-top: 5px;
}

div.extra-soundfiles div.fragment-name {
        font-style: italic;
        position: relative;
        top: 1ex;
        max-width: 70%;
}

div.extra-soundfiles ul li div.fragment-sound div.waveform {
}
div.extra-soundfiles ul li div.fragment-sound div.audio {
        bottom: 0;
}

#fiber-content div.extra-soundfiles strong {
        text-transform: uppercase;

}

.nonstop-track-title, .nonstop-track-artist {
        font-size: 80%;
}

.soundfile-info {
        padding-right: 75px;
}

#fiber-content div.extra-soundfiles .soundfile-info strong {
        padding-right: 0;
}

#fiber-content div.extra-soundfiles .soundfile-info a {
        text-decoration: none;
}

#fiber-content div.extra-soundfiles {
        margin: 1em 0;
}

div.extra-soundfiles div.logo {
        display: inline-block;
}

div#fiber-content div.extra-soundfiles ul.list {
        display: inline-block;
        width: 88%;
        width: calc(100% - 74px);
}

div.download-links {
        position: absolute;
        z-index: 1000;
        text-align: right;
}

div.hidden-download-links {
        display: none !important;
}

div.episode-detail div.sound div.download-links {
        display: inline-block;
        padding-top: 1ex;
        padding-left: 1ex;
}

div.extra-soundfiles div.download-links {
        background: white;
}

h1.top a.dimmed {
        opacity: 0.7;
}

div#agenda div.content-inline {
        margin-bottom: 1em;
}

div.previous-and-next-months {
        margin-top: 1em;
}

div.publication-date.date.smooth {
        font-size: 80%;
}

#All h1.top.fullwidth {
        width: 150%;
}

div.gallery img {
        padding: 2px;
        background: white;
        border: 1px solid #333;
}

div#dialog-background,
div.gallery div.first {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.9);
        z-index: 1000;
        text-align: center;
}

div.gallery div.first img {
        padding: 5px;
        padding-bottom: 25px;
        margin-top: -240px;
        margin-left: -320px;
        position: absolute;
        top: 50%;
        left: 50%;
        transition: all 0.5s ease;
        transform-origin: bottom left;
}

div.portrait div.gallery div.first img {
        margin-top: -320px;
        margin-left: -240px;
}

div.gallery {
        border-bottom: 1px solid #ccc;
}

div.gallery span.gallery-legend {
        display: inline-block;
        position: absolute;
        top: 50%;
        margin-top: 250px;
        left: 0%;
        width: 100%;
        color: #000;
        z-index: 1000;
}

div.portrait div.gallery span.gallery-legend {
        margin-top: 330px;
}

@media screen and (max-width: 640px) {
        div.portrait div.gallery div.first img,
        div.gallery div.first img {
                max-width: 80vw;
                margin: 0;
                max-height: 80vh;
                left: 10vw;
                top: 10vh;
                display: inline-block;
        }
}

ul.tags {
        padding-top: 1em;
        clear: both;
}

a.topik-link {
        clear: both;
        display: block;
        margin-top: 1em;
}

#fiber-content div.topikcell a {
        text-decoration: none;
        height: 500px;
}

#fiber-content div.topikcell .topik-large a {
        height: auto;
}

div.topikcellcontent h5 {
        padding-top: 1ex;
}

div.topikcellcontent.topik-large a {
        width: 100%;
        float: none;
        display: inline-block;
        text-align: left;
}

div.topikcellcontent.topik-large img {
        width: 100%;
        display: block;
}

div.topikcellcontent.topik-large a div {
        @media screen and (min-width: 760px) {
                display: flex;
        }
        margin-top: 1ex;
        h2 {
                margin-top: 0;
                white-space: nowrap;
                margin-right: 1ex;
                @media screen and (max-width: 760px) {
                        padding-bottom: 0;
                }
        }
}

div.topikcellcontent a {
        margin-bottom: 2em;
        display: inline-block;
        text-align: left;
        width: 50%;
        box-sizing: border-box;
        padding-right: 2em;
        float: left;
}

div.topikcellcontent img {
}

div.topikcellcontent h2 {
        font-size: 3.5em;
}

@media only screen and (min-width: 1250px) {
        div.topikcellcontent a {
                display: inline-block;
                text-align: left;
                width: 50%;
                float: left;
        }
}

.program-week img.smooth {
        padding-bottom: 0;
}

div#dialog-background {
        display: flex;
}
div#dialog-embed {
        position: relative;
        background: white;
        width: 50%;
        margin: auto;
        text-align: left;
        padding: 1ex;
}

div#dialog-embed textarea {
        width: 100%;
        max-width: none;
}

div#dialog-embed #close-button {
        position: absolute;
        right: 1ex;
}

body#embed {
        min-height: auto !important;
        margin: 0;
        background: white;
}

body#embed #Main {
        background: transparent;
}

body#embed #Commons,
body#embed #metaNav,
body#embed #Footer,
body#embed #userLog,
body#embed #panikdb,
body#embed #Player {
        display: none;
}

body#embed #Changing {
        float: none;
        width: auto;
}

body#embed #Main > .wrapper {
        padding: 0;
}

body#embed .logo {
        padding-top: 4px;
}

body#embed ul.custom {
        display: inline-block;
        width: calc(100% - 72px);
}

body#embed ul.custom .soundfile-info {
        padding: 1ex;
}

body#embed span.fragment-title {
        font-weight: normal;
}

table.playlist {
        width: 90%;
}

table.playlist td {
        padding: 0.5ex;
        text-align: left;
}

table.playlist td.tracktime {
        width: 6ex;
        text-align: center;
}

p.playlist-disclaimer {
        margin-top: 2em;
        max-width: 60ex;
        font-style: italic;
}


#main-topiks #fiber-nav li ul {
    padding-top: 0;
    padding-left: 2em;
}
#main-topiks #fiber-nav li ul li {
    padding-left: 0;
    font-size: 80%;
}

#main-topiks #fiber-nav li ul li a {
    padding-left: 0;
}

div.commands {
        display: flex;
        width: 90vw;
}

@media screen and (min-width:760px){
        div.commands {
                width: calc(90vw - 240px);
        }
}

input#msg {
        flex-grow: 1;
}

div.chat-area {
        max-width: 60em;
}

#chat {
       margin-top: 1ex;
}

#chat div.msg {
        position: relative;
        margin-bottom: 1ex;
        transition: opacity 1s ease;
}

#chat div.msg.new {
        opacity: 0;
}

#chat div.msg.msg-out span.content {
        font-size: 90%;
        color: #444;
}

#chat span.from {
   display: inline-block;
   width: 10rem;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #888;
   position: absolute;
}
#chat span.content {
  display: inline-block;
  padding-left: 11rem;
}

#chat div.msg.info span.content {
        padding-left: 1rem;
        font-style: italic;
        color: #666;
}

@media screen and (max-width: 760px) {
    #chat span.from {
        display: block;
        position: static;
        width: auto;
    }
    #chat span.content {
        display: block;
        padding-left: 2rem;
    }
}

h1.top > span.chat.with-logo {
        position: relative;
        left: 140px;
        display: inline-block;
        max-width: calc(100% - 140px);
}

div.top-logo {
        position: absolute;
        top: 30px;
}

div.top-logo img {
        border: 2px solid black;
}

@media screen and (max-width:760px){
        div.top-logo {
                display: none;
        }
        h1.top > span.chat.with-logo {
                position: static;
                max-width: none;
        }
        div.topikcellcontent a {
                width: auto;
        }
        #fiber-content div.topikcell a {
                height: auto;
        }
}

div#CurrentlyChatting {
        cursor: pointer;
        margin-top: 1em;
}

div.description-emission-chat {
        margin-bottom: 2em;
}

div.chatPart h3 {
        padding-top: 0;
}

div#chat.moderation .msg-in span.from {
        cursor: pointer;
}

div#chat.moderation .msg-in span.from:hover::after {
        padding-left: 1ex;
        font-family: FontAwesome;
        content: "\f056";
        font-size: 80%;
}

div.programCell a.playlist {
        font-size: 80%;
}

#bg-title {
        display: none;
        color: lighten($primary, 20);
        font-family: 'Reglo';
        text-transform: uppercase;
        line-height: 100%;
        font-size: 250px;
        font-size: 25vh;
        position: absolute;
        left: -260px;
        top: 48vh;
        z-index: 0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        cursor: default;
}

.rightPart .menucell {
        ul {
                list-style: none;
                padding: 0;
                li {
                        padding-bottom: 1rem;
                }
        }
}

div#loading-page {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 5px;
        background: $secondary;
        z-index: 1100;
        animation-name: load_animation;
        animation-duration: 6000ms;
        animation-timing-function: ease-out;
        transition: opacity 200ms linear;
        &.fade {
                opacity: 0;
        }
}

@keyframes load_animation {
        0% { right: 100%; }
        100% { right: 0%; }
}

.episode-auto-selection-cell.hide-emission-titles {
        .emission-title, .soundfile-info .sep {
                display: none;
        }
}