style: import css grid system

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

/* COLORS */

$black: #000000;
$white: #FFFFFF;
$primary: #312B81;
$secondary: #E41C6A;
$yellow: #FFEC00;

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


.resymbol:hover,.control:hover{    opacity:0.5;    }
.date, .dateBloc {
        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%;
}

.tabs .ui-tabs-nav {
    text-transform: uppercase;
}
.legend{
        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-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;
}

#RefreshWhatsOnAir {
        opacity: 0.2;
}

#RefreshWhatsOnAir.spinning {
        opacity: 0.8;
}

/****************************************************/
/* 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: $size_m) {
        #player-container.fixed {
                position: fixed;
                top: 50px;
                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;
        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{
        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: $primary;
        color: white;
}
/****************************************************/
/**** 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: 2em;
        display:block;
}

#metaNav ul li#nav-language span {
        cursor: pointer;
        padding:0.4em 0 0.5em 0;
        display: inline-block;
}

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

#metaNav ul li a span{
    padding:0.4em 0 0.5em 0;
        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:$size_m){
        #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;
        }
}

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

.audio button, .audio a {color:$primary;}
/****************************************************/
/**** HEADER ****/
/****************************************************/

/* PANIK LOGO */
#Commons{
        position: relative;
        z-index: 5;
        height: 125px;
}
#Commons .wrapper{
}
#mainHeader {
        padding-bottom:1em;
        display: inline-block;
        height: 100px;
}
#Player {
        display: inline-block;
        min-width: 350px
}

#mainHeader *{color:black !important;line-height:1em;}

#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: $size_m) {
        #mainHeader {
                display: block;
        }
        #All h1.top {
                font-size: 60px;
                text-align: center;
        }
}

#Changing {
        background: $secondary;
        margin-bottom: 22px;
}

@media screen and (min-width: $size_m) {
        #Commons {
                box-sizing: border-box;
                padding: 0 20px;
        }
        #Changing {
                box-sizing: border-box;
                padding: 0;
        }
        #All h1.top {
                text-transform: uppercase;
                padding-left: 0;
                padding-top: 20px;
                padding-bottom: 20px;
                text-align: center;
        }

        #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-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 url(../img/logo-esperanzah.png) 7px 35px no-repeat;
}

#All #backgroundBox h1.top {
        font-size: 20px;
        padding-left: 10px;
        width: 350px;
}

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

#All h1.top#radiopanik {
        padding-top: 36px;
        background: pink;
}

#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 .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 {
}
#DirectStreamPanikControler div.label {
        margin-top: -10px;
        @media screen and (max-width: $size_m) {
                margin-top: 0;
        }
}

#chatSymbol,
#streamSymbol{
        font-size:3em;
        float:left;
        margin-right:15px;
        position: relative;
        z-index: 10;
        top: -6px;
}
#CurrentlyPlaying{
        padding:0 0 0 0;
        @media screen and (max-width: $size_m) {
                margin-top: -5px;
        }
}

#Player {
        padding-top: 36px;
        padding-left: 8px;
}

#Player.withPlaylist {
        #audioPlayer {
                display: none;
        }
}

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

#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 {
        padding-top: 2px;
}

#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;
        @media screen and (max-width: $size_m) {
                top: -2px;
        }
}

#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 li{
        line-height:1.3em;
        padding:0;
        margin:0;
}
#Playlist ol li .soundControls{
        margin-left: 1ex;
        position: relative;
        top: -0.5ex;
        visibility: hidden;
}
#Playlist ol li.active .soundControls {
        visibility: visible;
}
#Playlist ol li .title{
        display:inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
}

@media screen and (max-width: $size_m) {
        #backgroundBox {
                background-position: center 30px;
        }
        #All h1.top#radiopanik {
        }
        #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: 84vh;
}

#Main{
        flex-grow: 1;
        position: relative;
        z-index: 10;
        @media screen and (max-width: $size_m) {
                z-index: 1;
        }
}
#Main >.wrapper{
        padding-bottom:2em;
}
#Home #Main{
        min-height:0;
}
#Changing a:hover,#Changing button:hover {
        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 {
        background: $primary url($data_uri_delim2) 0 20px repeat-x;
        padding-top: 120px;;
        padding-bottom: 0px;
        position: relative;
        z-index: 3;

        p {
                margin: 0 1em 1em 0;
                text-align: center;
        }

        @media screen and (max-width: $size_m) {
                padding-bottom: 30px;
        }
}


/****************************************************/
.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;
        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;
}
.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;
}


/**** 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.inline .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;
}

/****************************************************/
/**** 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;
        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;
}

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

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

/****************************************************/
/**** 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-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: 800px) and (max-width:$size_m){
    body #All{ font-size: 90%; }
}

@media (min-width: $size_m) {
    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-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: $size_m) {
        #streamSymbol{
                top: 0;
        }
        #MainHeader {
                margin: 0 auto;
        }
        #All #backgroundBox h1.top {
                width: 94%;
        }

        #Player.withoutPlaylist #player-container #audioPlayer{
            margin:auto;
            width:100%;
        }
        #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;*/
                bottom:0em;
                border-bottom:none;
                height: 50px;
        }
}

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: $primary;
        background: linear-gradient(to top, darken($primary, 20%) 0%, $primary 40%);
        display: inline-block;
        width: 0.50%;
}

.waveform span.done {
        background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
        background: linear-gradient(to top, darken($primary, 5%) 0%, darken($secondary, 10%) 100%);
}

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

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

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% - 72px);
}

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 > div {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        > span {
                display: block;
                width: 25%;
                height: 25vw;
                position: relative;
                @media screen and (max-width: $size_s) {
                        width: 50%;
                        height: 50vw;
                }
                img {
                        width: 100%;
                        height: 100%;
                        cursor: pointer;
                }
                span.title {
                        position: absolute;
                        top: 0;
                        left: 10px;
                        background: $secondary;
                        color: white;
                        padding: 0.5ex 1ex;
                        border-bottom: 3px solid $yellow;
                }
        }
}

div.gallery img {
        background: white;
}

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: -300px;
        margin-left: -500px;
        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 {
}

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

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

@media screen and (max-width: $size_m) {
        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;
}

div.topik.inline {
        clear: both;
        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 {
        float: left;
        margin-right: 1em;
}

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;
}

.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;
        color: black;
}

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;
        div.soundfile-info {
                height: 36px;
        }
}

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: 0;
        img {
                border: 0;
        }
}

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

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

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:$size_m){
        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: $size_m) {
    #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:$size_m){
        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);
        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;
}

a:hover div.emission-tile img {
        display: none;
}

div.emission-tile {
        background: $primary;
        position: relative;
        box-sizing: border-box;
        width: 25%;
        height: 25vw;
        @media screen and (max-width: $size_m) {
                width: 50%;
                height: 50vw;
        }
        float: left;
        div.image {
                //filter: grayscale(100%);
                border: none;
                height: 100%;
                width: 100%;
                img {
                        width: 100%;
                        height: 100%;
                }
        }
        div.name {
                position: absolute;
                text-transform: uppercase;
                top: 50%;
                margin-top: -10px;
                font-size: 20px;
                text-align: center;
                width: 100%;
                span {
                        background: $primary;
                        padding: 5px 20px;
                }
        }
}

#www-esperanzah {
        position: absolute;
        top: 0;
        right: 100px;
        background: $yellow;
        color: black;
        padding: 2px 10px;
}

#instagram,
#twitter,
#facebook {
        display: block;
        position: absolute;
        right: 0;
        top: 5px;
        height: 35px;
        width: 35px;
        background: $yellow url($data_uri_facebook) center center no-repeat;
        z-index: 100;
}

#twitter {
        top: 45px;
        background: $yellow url($data_uri_twitter) center center no-repeat;
}

#instagram {
        top: 85px;
        background: $yellow url($data_uri_instagram) center center no-repeat;
}

#streamSymbol {
        background-repeat: no-repeat;
        width: 50px;
        height: 50px;
}
div.player-start {
        background: url($data_uri_start), url($data_uri_pause);
        background-position: 0 0, -50px 0;
}

div.player-pause {
        background: url($data_uri_pause);
        background-position: 0 0;
}

div.playListControls {
        button.action-pause {
                background-repeat: no-repeat;
                width: 50px;
                height: 50px;
                background: url($data_uri_pause);
        }

        button.action-play {
                background-repeat: no-repeat;
                width: 50px;
                height: 50px;
                background: url($data_uri_play);
        }
}

div#specialHome {
        background: transparent top center repeat-x;
        padding-top: 30px;
}

div#specialHome h1.top {
        background: transparent bottom center repeat-x;
        padding-bottom: 62px;
}

div#specialHome,
div#specialHome h1.top {
        background-image: url($data_uri_delim1);
}

div#actu {
        background: url($data_uri_news_delim1) bottom center repeat-x;
        padding-bottom: 14px;
        display: flex;
        flex-direction: row;
        > h2, > div { width: 50%; box-sizing: border-box; padding-bottom: 30px; padding-top: 30px;}
        h2 {
                text-align: right;
                padding-right: 10px;
                background: $primary;
        }
        div {
                padding-left: 10px;
                font-size: 22px;
                max-width: 50ex;
        }
        @media screen and (max-width: $size_m) {
                display: block;
                > h2 {
                        text-align: center;
                }
                > h2, > div {
                        width: auto;
                }
        }
}

div.emission-detail {
        &::before {
                content: "";
                background: url($data_uri_news_delim1) top center repeat-x;
                height: 12px;
                display: block;
                width: 100%;
                position: absolute;
                top: 0;
        }
        padding-top: 12px;
        background: url($data_uri_news_delim1) bottom center repeat-x;
        padding-bottom: 14px;
        display: flex;
        flex-direction: row;
        @media screen and (max-width: $size_m) {
                flex-wrap: wrap;
        }
        div.emission-tile {
                @media screen and (max-width: $size_s) {
                        width: 100%;
                        height: 100vw;
                }
        }
        > a {
                width: 25%;
                @media screen and (max-width: $size_m) {
                        width: 50%;
                }
                @media screen and (max-width: $size_s) {
                        width: 100%;
                        height: 100vw;
                }
                div.emission-tile {
                        width: 100%;
                }
        }
        div.episode-info,
        div.emission-info {
                width: 25%;
                @media screen and (max-width: $size_m) {
                        width: 50%;
                }
                @media screen and (max-width: $size_s) {
                        width: 100%;
                        height: auto;
                }
                box-sizing: border-box;
                padding: 1ex;
                div.emission-text {
                        font-size: 110%;
                }
        }
        &.emission-episode div.emission-info {
                @media screen and (max-width: $size_m) {
                        width: 100%;
                }
        }
        div.episode-info {
                position: relative;
                width: 50%;
                @media screen and (max-width: $size_m) {
                        width: 100%;
                }
                div.emission-text {
                        max-width: 50ex;
                }
                @media screen and (max-width: $size_m) {
                        padding-bottom: 150px;
                }
                div.sound {
                        position: absolute;
                        bottom: 1ex;
                        width: 48vw;
                        @media screen and (max-width: $size_m) {
                                width: 95vw;
                        }
                        button.action-play {
                                font-weight: bold;
                        }
                        button.action-share {
                                text-transform: none;
                        }
                }
        }
}

div.emission-episodes {
        width: 50%;
        background: $yellow;
        @media screen and (max-width: $size_m) {
                width: 100%;
        }
        ul, li {
                margin: 0;
                padding: 0;
                list-style: none;
        }
        a {
                position: relative;
                height: 12.5vw;
                width: 25%;
                @media screen and (max-width: $size_m) {
                        height: 50vw;
                        width: 50%;
                }
                display: inline-block;
                float: left;
                div.image {
                        //filter: grayscale(100%);
                        border: none;
                        height: 100%;
                        width: 100%;
                        img {
                                width: 100%;
                                height: 100%;
                        }
                }
                div.time {
                        position: absolute;
                        top: 0;
                        left: 10px;
                        font-size: 14px;
                        display: inline-block;
                        background: $yellow;
                        color: $secondary;
                        padding: 0 0.5ex;
                }
                div.name {
                        position: absolute;
                        text-transform: uppercase;
                        top: 50%;
                        margin-top: -10px;
                        font-size: 20px;
                        text-align: center;
                        width: 100%;
                        span {
                                background: $primary;
                                padding: 5px 5px;
                        }
                }
        }
        a:hover img {
                display: none;
        }
}

div#Playlist {
        position: relative;
        div.label {
                position: absolute;
                left: 66px;
                top: -10px;
                @media screen and (max-width: $size_m) {
                        top: 0;
                }
        }
        ol {
                padding-top: 25px;
                margin-left: 32px;
                list-style: none;
                @media screen and (max-width: $size_m) {
                        margin-left: 36px;
                }
        }
}

#back-home {
        text-transform: uppercase;
        display: block;
        text-align: right;
        padding: 1ex;
}

.playing button.no-icon-remove::after {
        content: "\0025fc";
}