panikweb_templates/static/css/_specifics.scss

   1 /* COLORS */
   2
   3 $black: #000000;
   4 $white: #FFFFFF;
   5 $primary: #FF7E83;
   6 $secondary: #0062CB;
   7
   8 /****************************************************/
   9 /* FONTS */
  10
  11 .resymbol:hover,.control:hover{    opacity:0.5;    }
  12 .date, .dateBloc {
  13         font-family: "Reglo";
  14         text-transform: uppercase;
  15 }
  16 .inline .date, .resume .date{
  17         text-align: center;
  18 }
  19 .dateBloc{width:4em;
  20         text-align: center;}
  21 .dateBloc{display:inline-block;}
  22 .dateBloc *{line-height: 100%;}
  23 .dateBloc  .day {font-size: 1.8em;}
  24 .dateBloc .number {font-size: 1.8em;}
  25 .dateBloc  .month {font-size: 0.8em;}
  26 .dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
  27
  28 .dateBloc.small{
  29         font-size: 80%;
  30 }
  31
  32 .date.smooth {
  33         text-transform: none;
  34         font-size: 100%;
  35         font-family: RegloNormal;
  36 }
  37
  38 .tabs .ui-tabs-nav {
  39     font-family: "Reglo";
  40     text-transform: uppercase;
  41 }
  42 .legend{
  43         font-family: "Reglo";
  44         font-size:1.2em;
  45         border-bottom:3px solid black;
  46         padding: 0.2em 0 0.2em 0;
  47         margin: 0.2em 0 0.2em 0;
  48 }
  49 #Main .sectionLabel{
  50         margin-bottom:1em;
  51 }
  52
  53 .sectionLabel, .label {
  54     text-transform: uppercase;
  55     font-family: "Reglo";
  56     font-size:1.3em;
  57 }
  58
  59 .rightPart .right.sectionLabel {
  60         text-transform: none;
  61         border-bottom: 1px solid black;
  62         padding-bottom: 3px;
  63 }
  64
  65 h5.focus-title {
  66         color: $secondary;
  67 }
  68
  69 .rightPart #search-form {
  70         text-align: right;
  71         margin-bottom: 2em;
  72 }
  73
  74 .label.relative{
  75     background-color:black;
  76     position: absolute;
  77     left:10px;
  78     top:-5px;
  79     color:white;
  80     padding:5px 7px 0px 7px;
  81 }
  82
  83 #RefreshWhatsOnAir {
  84         opacity: 0.2;
  85 }
  86
  87 #RefreshWhatsOnAir.spinning {
  88         opacity: 0.8;
  89 }
  90
  91 /****************************************************/
  92 /* WRAPPER */
  93 /****************************************************/
  94 .wrapper {max-width: 1560px; padding:0 1%;}
  95 .wrapper.text {max-width: 780px; margin:auto;}
  96 .wrapper .rightPart{margin-top:1em;}
  97
  98 @media screen and (min-width: 760px) {
  99         #player-container.fixed {
 100                 position: fixed;
 101                 top: 50px;
 102                 width: calc(0% + 235px);
 103         }
 104         .wrapper .rightPart{
 105         margin-top:0;
 106         }
 107         .wrapper.sided .leftPart,
 108         .wrapper.sided .rightPart{
 109                 width:45%;
 110         }
 111         .wrapper.navigation .leftPart{
 112                 width:60%;
 113         }
 114         .wrapper.navigation .rightPart{
 115                 width:35%;
 116         }
 117         .wrapper .leftPart{
 118                 float:left;
 119         }
 120         .wrapper .rightPart{
 121                 float:right;
 122         }
 123         #specialHome {
 124                 padding-left: 0;
 125         }
 126     /*
 127         #specialHome .leftPart,
 128         #specialHome .rightPart {
 129                 width: 100%;
 130         }
 131     */
 132         p.intro {
 133                 padding-top: 0px;
 134                 padding-bottom: 40px;
 135         }
 136 }
 137
 138
 139 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
 140 nav.menu{
 141         width:100%;
 142         text-align: justify;
 143         text-justify: distribute-all-lines;
 144 }
 145 nav.menu li{
 146         display: inline-block;
 147         margin-right:2em;
 148 }
 149
 150 button.tag, a.tag{
 151         font-size:0.9em;
 152         background:white;
 153         font-family: "RegloBold";
 154         text-transform: uppercase;
 155         display:inline-block;
 156         border: 1px solid #CCC !important;
 157         color:#342E2E;
 158         margin: 0.2em;
 159         padding: 0.3em;
 160         border-radius: 0.7em;
 161         -moz-border-radius: 0.7em;
 162         -webkit-border-radius: 0.7em;
 163 }
 164 button.check, a.check {
 165         font-size:0.9em;
 166         text-transform: none;
 167         display:inline-block;
 168         margin: 0.2em;
 169         padding: 0.3em;
 170 }
 171
 172 .category{
 173         font-family: "RegloBold";
 174         text-transform: uppercase;
 175 }
 176 button.check:before, a.check:before {
 177         display:inline-block;
 178         width:1.5em;
 179 }
 180 .box{
 181         padding:0.2em 0.5em 0.2em 0.5em;
 182         border-radius: 0.2em;
 183         -moz-border-radius: 0.2em;
 184         -webkit-border-radius: 0.2em;
 185         background:#222;
 186         color:#fff;
 187 }
 188 .ui-tooltip {
 189         border:1px solid white;
 190         position:absolute;
 191         margin:0;
 192         padding: 0.5em;
 193         background:#222;
 194         color: white;
 195         z-index: 9999;
 196         max-width: 50%;
 197         background: white;
 198         color: #222;
 199         border-color: #222;
 200 }
 201 /****************************************************/
 202 /**** BODY ****/
 203 /****************************************************/
 204 body{
 205         background: white;
 206         color: #333;
 207 }
 208 /****************************************************/
 209 /**** metaNAV ****/
 210 /****************************************************/
 211
 212 #metaNav {
 213         color: #e8e8e8;
 214         background-color: #3a3a3a;
 215         position:fixed;
 216         z-index:1000;
 217         top:0px;
 218         width:100%;
 219         font-size: 90%;
 220 }
 221 #metaNav ul{
 222 }
 223 #metaNav ul li{
 224         float: left;
 225         padding: 0 1em;
 226         white-space: nowrap;
 227         text-overflow: ellipsis;
 228         overflow:hidden;
 229 }
 230
 231 #metaNav ul li#nav-search {
 232         float: right;
 233 }
 234
 235 #metaNav ul li a{
 236         height: 2em;
 237         display:block;
 238 }
 239
 240 #metaNav ul li#nav-language span {
 241         cursor: pointer;
 242         padding:0.4em 0 0.5em 0;
 243         display: inline-block;
 244 }
 245
 246 #metaNav ul li#nav-language span.lang-on {
 247         color: white;
 248 }
 249
 250 #metaNav ul li a span{
 251     padding:0.4em 0 0.5em 0;
 252         display:inline-block;
 253 }
 254
 255 #metaNav ul li a span.nav-icon {
 256 }
 257
 258 #metaNav a:focus, #metaNav a:hover{
 259     opacity:0.8;
 260 }
 261 #metaNav ul li.active, #metaNav ul li.active a{
 262         color: white;
 263 }
 264
 265 #metaNav ul li.active span.iconLabel {
 266 }
 267
 268 #metaNav li#nav-search a {
 269         display: inline;
 270 }
 271
 272 #metaNav form {
 273         display: inline-block;
 274         padding-top: 0.2em;
 275 }
 276
 277 #metaNav input {
 278         border: 1px solid #ececec;
 279         width: 10em;
 280 }
 281
 282 .icon-rss {
 283         color: orange;
 284 }
 285
 286 @media screen and (max-width:760px){
 287         #bg-title { display: none; }
 288         #metaNav .iconLabel {display:none;}
 289         #metaNav ul li a span.nav-icon { display: inline-block; }
 290         #metaNav ul li {
 291                 padding: 0;
 292         }
 293         #metaNav ul li a {
 294                 padding: 0 1em;
 295         }
 296         #metaNav form {
 297                 display: none;
 298         }
 299         #metaNav ul li#nav-language {
 300                 padding: 0.2em 0 0 1em;
 301         }
 302         div#Changing {
 303                 margin: 0 5px;
 304         }
 305 }
 306 @media screen and (max-width:400px){
 307         #metaNav ul li#nav-language {
 308                 padding: 0.2em 0 0 1ex;
 309         }
 310         #metaNav ul li a {
 311                 padding: 0 1ex;
 312         }
 313 }
 314
 315 /****************************************************/
 316 /**** Commons ****/
 317 /****************************************************/
 318
 319 .audio button {color:$primary !important;}
 320 /****************************************************/
 321 /**** HEADER ****/
 322 /****************************************************/
 323
 324 /* PANIK LOGO */
 325 #Commons{
 326         position: relative;
 327         z-index: 5;
 328 }
 329 #Commons .wrapper{
 330 }
 331 #mainHeader {
 332         padding-bottom:1em;
 333 }
 334 #mainHeader {
 335     font-size:70%;
 336 }
 337 #mainHeader *{color:black !important;line-height:1em;}
 338 #mainHeader #radioPanik{}
 339
 340 #Panik img{display:block;margin:auto;max-height:200px;}
 341 #mainHeader h1{
 342         padding-left:75px;
 343 }
 344 #player-container #player{
 345     padding:0 0 0 0;
 346     min-width: 240px;
 347 }
 348
 349 #Changing h1.top a:hover {
 350         opacity: 1.0;
 351 }
 352
 353 @media screen and (max-width: 760px) {
 354         #All h1.top {
 355                 font-size: 60px;
 356                 padding: 0;
 357                 padding-top: 10px;
 358                 text-align: center;
 359         }
 360         #specialHome .leftPart h1.top {
 361                 display: none;
 362         }
 363         #specialHome .leftPart h2 {
 364                 padding-top: 10px;
 365                 text-align: center;
 366         }
 367 }
 368
 369 @media screen and (min-width: 760px) {
 370         #Commons {
 371                 float: left;
 372                 width: 20%;
 373                 width: -webkit-calc(0% + 240px);
 374                 width: -moz-calc(0% + 240px);
 375                 width: calc(0% + 240px);
 376         }
 377         #Changing {
 378                 position: relative;
 379                 float: right;
 380                 width: 78%;
 381                 width: -webkit-calc(100% - 280px);
 382                 width: -moz-calc(100% - 280px);
 383                 width: calc(100% - 280px);
 384         }
 385         #All h1.top {
 386                 font-size: 120px;
 387                 font-family: RegloScale;
 388                 text-transform: uppercase;
 389                 padding-left: 0;
 390                 padding-top: 40px;
 391                 padding-bottom: 0;
 392         }
 393
 394         #metaNav {
 395                 padding-top: 2px;
 396         }
 397         #metaNav .nav-icon {
 398                 display: none !important;
 399         }
 400
 401         ul#ticker {
 402                 margin-bottom: 10px;
 403         }
 404
 405         #News div.mainSub,
 406         #About div.mainSub,
 407         #Emissions div.mainSub {
 408                 position: absolute;
 409                 top: 50px;
 410                 left: 320px;
 411                 width: 60%;
 412                 width: calc(98% - 320px);
 413         }
 414
 415         #News div.mainSub ul,
 416         #About div.mainSub ul,
 417         #Emissions div.mainSub ul {
 418                 padding: 0;
 419                 font-family: Reglo;
 420                 font-weight: normal;
 421         }
 422
 423         #News div.mainSub ul li,
 424         #About div.mainSub ul li,
 425         #Emissions div.mainSub ul li {
 426         }
 427
 428         #News .news.wrapper {
 429                 padding: 0;
 430         }
 431
 432         #News .news.wrapper li a {
 433                 margin-left: 0;
 434                 padding-left: 0;
 435         }
 436
 437         #Nav header.marged,
 438         #Main > .marged {
 439                 margin: 0;
 440         }
 441
 442         #Related .wrapper,
 443         #Main > .wrapper,
 444         #Main > .soundfiles > .wrapper,
 445         #Main > .news > .wrapper,
 446         #Nav > .wrapper {
 447                 padding-left: 0;
 448         }
 449
 450         #All #Nav nav ul {
 451                 margin-top: 0;
 452         }
 453
 454         #Related .padded,
 455         div.program.padded {
 456                 padding-top: 0;
 457                 padding-left: 0;
 458         }
 459
 460         div.program.padded {
 461                 padding-top: 1.5em;
 462         }
 463
 464         #fiber-content h2.title {
 465                 margin-top: 0;
 466                 padding-top: 0;
 467         }
 468
 469 }
 470
 471 #backgroundBox {
 472         background: transparent center 40px no-repeat url(../img/Radio_Panik_Logo_2016-01.png);
 473 }
 474
 475 #All #backgroundBox h1.top {
 476         font-size: 50px;
 477         padding-left: 10px;
 478         width: 200%;
 479 }
 480
 481 #backgroundBox h1 {
 482         color: $primary !important;
 483 }
 484
 485 #All h1.top#radiopanik {
 486         padding-top: 0;
 487         color: black !important;
 488         padding-bottom: 30px;
 489         height: 130px;
 490 }
 491
 492 #All #backgroundBox h1 {
 493         visibility: hidden;
 494 }
 495
 496
 497 #specialHome div.rightPart h1,
 498 div.focus {
 499         color: $secondary;
 500 }
 501
 502 h1.top#frequence {
 503         color: $primary;
 504 }
 505
 506 /****************************************************/
 507 /****  SCREEN NAV ****/
 508 #Nav nav{padding:0.1em;}
 509
 510 #Nav input{color:#333;}
 511 #Nav ul li button,
 512 #Nav ul li a {
 513         border-width:0 0 2px 0;
 514         border-style: solid;
 515         border-color: transparent;
 516 }
 517
 518 #Nav .current,
 519 #Nav .active,#Nav .icon-check,#Nav .active *{
 520         font-weight: normal;
 521 }
 522
 523 #Nav .selected a,
 524 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
 525         border-color: #333;
 526 }
 527
 528 #Nav nav{
 529         margin:0;
 530 }
 531
 532 #specialHome h2,
 533 #Nav h2{
 534         margin:0;
 535         padding:0;
 536 }
 537 #Nav nav ul{
 538         margin:1em 0 1em 0;
 539 }
 540
 541 #Nav li {
 542         padding-right: 1em;
 543 }
 544
 545 #Nav li a{
 546         display: inline-block;
 547 }
 548 #Nav nav ul.distributed li {padding: 0;}
 549
 550 #fiber-nav{
 551     font-size:150%;
 552         border-width:0 0 2px 0;border-style:solid;
 553 }
 554 #fiber-nav li, #fiber-nav li a{
 555         display:block;
 556 }
 557 #fiber-nav ul{
 558         padding:0.5em;
 559 }
 560 #fiber-nav li a{
 561         padding:0.5em;
 562 }
 563 #fiber-nav .selected > a,
 564 #fiber-nav .current {
 565     font-weight:bold;
 566 }
 567
 568 /****************************************************/
 569 /**** PLAYER ****/
 570 /****************************************************/
 571 /*#Home #player{   float: left; } */
 572
 573 #player-container,
 574    #player-container *{border-color:$primary !important;color:$primary !important;}
 575
 576 #player-container .metas, #player-container img{border-color:#fff;}
 577 #player-container .padded{padding:0.3em;}
 578
 579 #player-container button,#player-container a{
 580 }
 581 #player-container .metas{
 582     float:right;
 583 }
 584 #DirectStreamPanikControler {
 585         display:inline !important;
 586 }
 587 #chatSymbol,
 588 #streamSymbol{
 589         font-size:3em;
 590         float:left;
 591         margin-right:5px;
 592         position: relative;
 593         z-index: 10;
 594         top: -6px;
 595 }
 596 #CurrentlyPlaying{
 597         padding:0 0 0 0;
 598 }
 599
 600 #Player.withPlaylist #player-container #Playlist{
 601         border-top:2px solid black;
 602 }
 603 #Player.withPlaylist #player-container #Playlist{
 604         margin-top: 1em;
 605         padding-top: 1em;
 606 }
 607
 608 #player-container #myPlaylist {
 609         clear: both;
 610         padding: 1em 0 0 0;
 611         height: auto;
 612 }
 613
 614 #player-container #myPlaylist a {
 615         margin-right: 30px;
 616         white-space: normal;
 617         padding-bottom: 1ex;
 618 }
 619
 620 #player-container.minimized{
 621         width:auto;
 622         border-width:0px 2px 2px 0 !important;
 623         border-bottom-right-radius:1em;
 624         -moz-border-bottom-right-radius:1em;
 625         -webkit-border-bottom-right-radius:1em;
 626 }
 627 #player-container.minimized #player{
 628         padding:0;
 629 }
 630
 631 /*Playlist*/
 632
 633 #Playlist #playlistLabel{
 634         float:right;
 635
 636 }
 637 #Playlist .playListControls{
 638 }
 639 #Playlist .playListControls button{
 640         margin-right:0.5em;
 641         display:inline-block;
 642 }
 643 #Playlist .playListControls .playPause{
 644         font-size:3em;
 645         margin-right:5px;
 646         float:left;
 647         position: relative;
 648         top: -8px;
 649 }
 650
 651 #Playlist .playing .icon-pause{
 652    -webkit-animation: loading 1s infinite linear;
 653    -moz-animation: loading 1s infinite linear;
 654    -o-animation: loading 1s infinite linear;
 655    animation: loading 1s infinite linear;
 656 }
 657 #Playlist .playlistControls button,#Playlist .playlistControls .button{
 658         margin:0 0.1em 0 0.1em;
 659 }
 660 #Playlist li{
 661         clear:right;
 662 }
 663 #Playlist .soundControls button{}
 664
 665 #player-container #Playlist ol{
 666         clear:right;
 667         padding:0;
 668         margin-left: 50px;
 669 }
 670 #player-container #Playlist ol li{
 671         line-height:1.3em;
 672         padding:0;
 673         margin:0;
 674 }
 675 #Playlist ol li .soundControls{
 676         line-height:1.5em;
 677         height:1.5em;
 678         clear:right;
 679         float:right;
 680 }
 681 #Playlist ol li .title{
 682         margin-right:70px;
 683         display:block;
 684         white-space: nowrap;
 685         text-overflow: ellipsis;
 686         overflow: hidden;
 687 }
 688 #player .active{
 689         text-transform:uppercase;
 690         font-weight:bold;
 691 }
 692 /*limit height of playlist*/
 693 #player #CurrentlyPlaying,
 694  #player-container #Playlist ol{
 695         opacity:0.9;
 696         padding-top:0.2em;
 697         height:auto;
 698         overflow:auto;
 699 }
 700
 701 @media screen and (max-width: 760px) {
 702         #backgroundBox {
 703                 background-position: center 30px;
 704                 background-size: 130px;
 705         }
 706         #All h1.top#radiopanik {
 707                 height: 80px;
 708         }
 709         #Player{
 710         margin-top:1em;
 711     }
 712         #Player.withPlaylist #player-container #audioPlayer,
 713           #Player.withPlaylist #player-container #audioPlayer,
 714            #Player.withPlaylist #player-container #Playlist{
 715                 float:none !important;
 716                 width:auto !important;
 717         border-right:none !important;
 718                 max-width:auto !important;
 719         }
 720
 721         #player.on-chat-page {
 722                 display: none;
 723         }
 724
 725 }
 726
 727 /****************************************************/
 728 /**** #Changing #Footer ... ****/
 729 /****************************************************/
 730 #Changing{
 731         display: flex;
 732         flex-direction: column;
 733         min-height: 97vh;
 734 }
 735
 736 #Main{
 737         flex-grow: 1;
 738         color:#333;
 739         position: relative;
 740         z-index: 1;
 741 }
 742 #Main >.wrapper{
 743         padding-bottom:2em;
 744 }
 745 #Home #Main{
 746         min-height:0;
 747 }
 748 #Changing a:hover,#Changing button:hover {
 749         opacity:0.6;
 750         text-decoration:none;
 751 }
 752 /* GLOBAL SITE NAV */
 753 #userLog{
 754         z-index:2000;
 755         position: fixed;
 756         bottom: 0px;
 757         right: 0px;
 758 }
 759 #userLog .log{
 760         margin:0.3em;
 761         -moz-box-shadow: 0px 0px 3px #000;
 762         -webkit-box-shadow: 0px 0px 3px #000;
 763         box-shadow: 0px 0px 3px #000;
 764         border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
 765         text-align:center;
 766         padding: 0.3em;
 767         font-size:0.9em;
 768         color:black;
 769         background-color:$primary;
 770         border: 2px solid black;
 771         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);
 772 }
 773 #userLog .log.info{
 774         background-color:grey;
 775         color:white;
 776 }
 777 #userLog .log.ok{
 778         background-color:green;
 779         border-color:black;
 780         color:white;
 781 }
 782 #userLog .log.error{
 783         background-color:$primary;
 784         border-color:yellow;
 785 }
 786 #main {}
 787 #mainLegend{
 788         width:30%;
 789         text-align:right;
 790         float:right;
 791         padding:1em;
 792 }
 793
 794 #Footer{
 795         border-top:2px solid #333;
 796         padding-top: 2em;
 797         padding-bottom: 80px;
 798         position: relative;
 799         z-index: 3;
 800 }
 801
 802 #Footer ul {
 803 }
 804
 805 #Footer ul li {
 806         padding-right: 2em;
 807 }
 808
 809 #Footer a:hover {
 810         opacity:0.6;
 811 }
 812
 813
 814 /****************************************************/
 815 .inline .link{display:block;padding:1em;}
 816 /**** Liste   ****/
 817 /**** EMISSIONS ****/
 818 #Emission .emission-detail .title{}
 819 /*
 820 */
 821 #Emission-tabs-menu .sub{
 822         margin-bottom:1em;
 823 }
 824 /**** Detail    ****/
 825 .emission-detail .metas{
 826         line-height:1.5em;
 827         float: left;
 828         width: 49%;
 829         margin-top: 0;
 830 }
 831
 832 .emission-detail h4.subtitle {
 833         margin-top: 1em;
 834         font-weight: normal;
 835         font-family: 'Reglo';
 836         text-transform: none;
 837         float: left;
 838 }
 839
 840 .emission-detail ul.schedule {
 841         margin-top: 0;
 842         margin-bottom: 1em;
 843  }
 844
 845 .emission-detail ul.schedule .weekdiff {
 846         font-size: 80%;
 847 }
 848
 849 .emission-detail article {
 850         clear: both;
 851 }
 852
 853 .emission-detail .logo{
 854         float:right;
 855         width: 50%;
 856         margin-bottom: 1ex;
 857 }
 858 @media screen and (max-width: 300px) {
 859         .emission-detail .metas {
 860                 float: none;
 861                 width: auto;
 862                 margin: 0;
 863         }
 864         .emission-detail .logo{max-width:100%;}
 865 }
 866 .emission .mainHeader {
 867     overflow: hidden;
 868     margin-bottom:1.5em;
 869 }
 870
 871 .emission .contacts {
 872         clear: both;
 873 }
 874
 875 /**** Inline    ****/
 876 .emission.inline, .emission.resume {
 877         padding:1em 0 1em 0;
 878 }
 879
 880 .emission.inline div.date {
 881         min-height: 3em;
 882         text-align: center;
 883         display:inline-block;
 884         float:left;
 885         margin-right:1em;
 886 }
 887 .emission .archived {
 888         opacity:0.6;
 889 }
 890
 891 .emission .link .description {
 892         margin: 0px 0 5px 0;
 893         font-family: "RegloMedium";
 894 }
 895
 896
 897 /**** EPISODE ****/
 898 /**** Detail  ****/
 899
 900 .episode .tag{
 901 }
 902 .episode.resume, .episode.inline{
 903         padding:1em 0.5em 1em;
 904 }
 905 .episode.inline .dateBloc, .episode.resume .dateBloc{
 906         float:left;
 907 }
 908 .episode.resume img {
 909         border: 2px solid black;
 910 }
 911
 912 .episode.resume .title{
 913         margin-bottom:0.5em;
 914 }
 915 .episode.resume .logo{
 916         float: right;
 917 }
 918 .topik.inline .logo,
 919 .episode.inline .logo {
 920         min-height: 50px;
 921         float: left;
 922         margin-right: 1em;
 923 }
 924 .episode.resume .sound{
 925         float:right;
 926         margin:0 0 0.5em 0.5em;
 927 }
 928 .episode.inline .sound.right{
 929         text-align:center;
 930         font-size:70%;
 931         position: relative;
 932         z-index: 10;
 933 }
 934 .episode.inline .sound.right button{
 935     font-size:1.5em;
 936         display:inline;
 937         text-align:center;
 938         padding-bottom:0.05em;
 939 }
 940 .episode.resume .sound.right .icon-download{
 941         text-align:center;
 942 }
 943 .episode.resume .sound.right .icon-download{
 944         display:block;
 945 }
 946
 947 .big.icon-pause,
 948 .big.icon-stop,
 949 .big.icon-share {
 950         display: inline-block;
 951         vertical-align: middle;
 952 }
 953
 954 .episode.detail .logo.right{
 955         max-width:50%;
 956 }
 957
 958 .episode.resume .date .day, .emission-detail .date .day {
 959 }
 960
 961 .episode.resume .content {
 962         padding-left: 5em;
 963 }
 964 .episode.resume .content .title {
 965 }
 966
 967 .episode.resume .logo {
 968         margin:0 0 1em;
 969         max-width:20%;
 970 }
 971 .episode.inline .date{
 972         font-size:80%;
 973 }
 974
 975 #Emission-tabs-menu .emissions-newsitems {
 976         margin-bottom: 2em;
 977 }
 978
 979 #Emission-tabs-menu .emissions-newsitems ul.list li {
 980         border: 0;
 981 }
 982
 983 #Emission-tabs-menu .futur-episodes h5,
 984 #Emission-tabs-menu .recent-episodes h5 {
 985         font-size: 1.2em;
 986 }
 987
 988 #Emission-tabs-menu #search-form {
 989         margin-bottom: 1em;
 990 }
 991
 992 div.extra-soundfiles h3 {
 993         margin-top: 1em;
 994         font-size: 2.5em;
 995 }
 996
 997 div.extra-soundfiles ul li {
 998         position: relative;
 999 }
1000
1001 div.extra-soundfiles ul li div.audio {
1002         display: inline;
1003         top: 5px;
1004         right: 0;
1005         position: absolute;
1006         font-size: 60%;
1007 }
1008
1009 div.extra-soundfiles ul strong {
1010         padding-right: 3em;
1011 }
1012
1013 @media screen and (max-width: 400px) {
1014         .episode .dateBloc{
1015                 width:4em;
1016                 font-size:80%
1017         }
1018
1019         .episode.resume .content {
1020                 padding-left: 4em;
1021         }
1022 }
1023
1024 /****************************************************/
1025 /**** News ****/
1026
1027 #newsRoll {
1028         max-width: 500px;
1029 }
1030
1031 #newsRoll li {
1032         background: white;
1033 }
1034
1035 .newsRoll .title{
1036         background:black;
1037         color:white;
1038         bottom:0px;
1039         opacity:0.9;
1040     width:100%;
1041         text-align: left;
1042         font-family: "RegloBold";
1043         position: absolute;
1044         left: 0;
1045 }
1046 .newsRoll .title div{
1047         padding: 1em;
1048 }
1049 .newsRoll a, .newsRoll button img{
1050     border:3px solid $secondary;
1051 }
1052
1053 .newsRoll .by3 button {
1054         width: 100%;
1055 }
1056
1057 .soundfiles .special a,
1058 .news .special a {
1059         position: relative;
1060 }
1061
1062 .special .labels .item,
1063 .newsRoll .labels .item{
1064         display:block;
1065         background: $secondary;
1066         color:white;
1067         margin:0.1em;
1068         font-size:0.9em;
1069         padding:0.3em;
1070 }
1071 .newsList .current a{
1072     opacity:0.5;
1073 }
1074 /****************************************************/
1075 .list.news li {
1076 }
1077
1078 .soundfiles ul.custom li a,
1079 .news ul.custom li a { max-width: 98%; }
1080 .news li.item a {padding:1em;}
1081
1082 .logo img{
1083         display:block;
1084         border-style:solid;
1085         border-width:3px;
1086 }
1087 ul.newsSpecial{
1088         border-bottom:3px solid #ccc;
1089 }
1090 @media only screen and (max-width: 970px) {
1091         .columns {column-count: 1;      -webkit-column-count: 1;        -moz-column-count: 1;}
1092 }
1093
1094
1095 /****************************************************/
1096 /**** Home & ****/
1097 /****************************************************/
1098
1099 #Home #Nav .wrapper{
1100         max-width:auto !important;
1101         width:auto !important;
1102 }
1103
1104 /*
1105 @media screen and (max-width:800px){
1106         #Home .newsRoll .logo{
1107                 max-width:100px;
1108         }
1109 }
1110 @media screen and (max-width:600px){
1111         #Home .newsRoll .logo{
1112                 max-width:50px;
1113         }
1114 }
1115 */
1116
1117 /****************************************************/
1118 /**** PROGRAM ****/
1119 /****************************************************/
1120
1121 .program.tabs nav ul li{
1122         display:table-cell;
1123         width:14%;
1124         text-align:center;
1125 }
1126
1127 .program.tabs nav ul li.week-arrow {
1128         width: 1%;
1129         padding-bottom: 5px;
1130 }
1131
1132 .program ul .dateBloc {
1133         float:left;
1134         padding-top:1em;
1135 }
1136 .program ul .schedule {
1137         margin-left:5em;
1138 }
1139 .program .nonstop {
1140         text-align:left;
1141 }
1142 .program-week .programDate{
1143         float:left;
1144         width:3em;
1145 }
1146 .program-week .programCell{
1147         margin-left:3.5em;
1148 }
1149 .program-week .nonStop .programDate{
1150         visibility:hidden;
1151 }
1152 .program-week .nonStop .programCell{
1153         font-size:0.9em;
1154         padding-left:50%;
1155         text-align:right;
1156 }
1157 .program-week a.nonstop{
1158         font-size:0.9em;
1159         margin:0.1em;
1160 }
1161 .program-week .inline,.program-week .resume{padding:0;}
1162 .program-week .description{}
1163
1164 .program-week .title {
1165         color: black;
1166         display: inline;
1167 }
1168
1169 .program-week .smooth {
1170         color: #666;
1171         opacity: 1.0;
1172         font-size: 80%;
1173         padding-bottom: 8px;
1174 }
1175
1176 .program-week .emission h5,
1177 .program-week .smooth .title {
1178         color: #333;
1179         text-transform: uppercase;
1180 }
1181
1182 .program-week .description {
1183         color: black;
1184         font-size: 90%;
1185 }
1186
1187 .program-week .programCell:hover {
1188         opacity: 0.5;
1189 }
1190
1191 #Changing .program-week .programCell a {
1192         opacity: 1.0;
1193 }
1194
1195 #Changing .program-week .programCell .smooth a {
1196         opacity: 0.5;
1197 }
1198
1199 #Changing .program-week .programCell .smooth h5 a {
1200         opacity: 1.0;
1201 }
1202
1203
1204 /****************************************************/
1205 /**** SEARCH ****/
1206 /****************************************************/
1207
1208 .search li.previous-page {
1209   margin-bottom: 2ex;
1210   text-align: left;
1211   margin-left: 0ex;
1212   font-style: italic;
1213 }
1214
1215 .search li.next-page {
1216   margin-top: 2ex;
1217   text-align: right;
1218   margin-right: 0;
1219   font-style: italic;
1220 }
1221
1222 .search-filters {
1223   text-align: justify;
1224 }
1225
1226
1227 /****************************************************/
1228 /**** GRILLE ****/
1229 /****************************************************/
1230
1231 #grid #Main {}
1232 #grid th{
1233         color:#000;
1234 }
1235 #grid .heure {
1236         height:50px !important;
1237 }
1238 #grid .heure.vertical {
1239         padding:1.5em 0;
1240 }
1241 #grid .day {
1242         padding:1em 0 1em 0;
1243 }
1244 #grid .nonstop {
1245 }
1246 #grid .item{
1247         padding:0.5em 0.2em 0.5em 0.2em;
1248 }
1249 #grid .cell hr {
1250         border:1px dotted #ddd;
1251         margin:0.3em;
1252 }
1253 #grid .time-label{
1254         margin-top:0.5em;
1255 }
1256
1257 #grid .highlighted,#grid .highlighted  *{
1258         background:#333 !important;
1259         color:white !important;
1260 }
1261
1262 #grid .highlighted,#grid .highlighted  *{
1263         background:#333 !important;
1264         color:white !important;
1265 }
1266 #Emissions li.item.normal{
1267         display:none;
1268 }
1269 #Emissions li.item.hightlighted{
1270         display:block !important;
1271 }
1272
1273 #gridNav span.category {
1274         text-transform: none;
1275 }
1276
1277
1278 /**** Navigation for static pages ****/
1279
1280 #fiber-nav {
1281         font-size: 150%;
1282 }
1283 #fiber-nav li, #fiber-nav li a {
1284         display: block;
1285 }
1286 #fiber-nav ul{
1287         padding: 0.5em;
1288 }
1289 #fiber-nav li a{
1290         padding:0.5em;
1291 }
1292
1293 #fiber-content a {
1294         text-decoration: underline;
1295 }
1296
1297 #fiber-content ul.list a {
1298         text-decoration: none;
1299 }
1300
1301 #fiber-content a:hover {
1302         text-decoration: none;
1303 }
1304
1305 .intro,
1306 .userContent,
1307 #fiber-content,
1308 .content,
1309 .content h5 {
1310         line-height: 120%;
1311 }
1312
1313 .userContent strong,
1314 #fiber-content strong {
1315         text-transform: none;
1316         font-family: "RegloBold";
1317         font-style: normal;
1318 }
1319
1320 .userContent em,
1321 #fiber-content em {
1322         font-family: inherit;
1323         font-style: italic;
1324 }
1325
1326 /**** SCREEN SIZE ADAPTATIONS ****/
1327     html #main{ font-size: 70%; }
1328 body { font-size: 18px;}
1329 @media (max-width: 300px){
1330     body #All{ font-size: 80%; }
1331 }
1332
1333 @media (min-width: 300px) and (max-width:800px){
1334     body #All{ font-size: 85%; }
1335 }
1336
1337 @media (min-width: 700px) and (max-width:1000px){
1338     body #All{ font-size: 90%; }
1339 }
1340
1341 @media (min-width: 1000px) {
1342     body #All{ font-size: 100%; }
1343 }
1344
1345 #subscribe-form {
1346   position: relative;
1347   margin-bottom: 2em;
1348   padding-bottom: 2em;
1349 }
1350
1351 #Home #subscribe-form {
1352   margin-bottom: 0;
1353 }
1354
1355 #subscribe-form ul.errorlist {
1356   position: absolute;
1357   bottom: -2em;
1358   text-align: center;
1359   display: block;
1360   width: 100%;
1361   padding: 0;
1362   list-style: none;
1363   color: #800;
1364 }
1365
1366 #subscribe-form input {
1367         width: 15em;
1368         max-width: none;
1369 }
1370
1371 #Nav div.search form {
1372   padding: 1em 0;
1373 }
1374
1375 div.episode.resume div.title {
1376         white-space: normal;
1377 }
1378
1379 #Home div.program.tabs {
1380         margin: 1em 0;
1381 }
1382
1383 nav#program li {
1384         display: block;
1385         margin: 0;
1386 }
1387
1388 #recent-emissions,
1389 #recent-news,
1390 #recent-sounds {
1391         margin-top: 2em;
1392 }
1393
1394 #recent-emissions h3,
1395 #recent-news h3,
1396 #recent-sounds h3 {
1397         font-size: 140%;
1398 }
1399
1400 #recent-emissions h3.sectionLabel {
1401         margin-bottom: 0;
1402 }
1403
1404 .episode.soundfile {
1405         padding: 0;
1406 }
1407
1408 .soundfile .smooth {
1409         color: #666;
1410         opacity: 1.0;
1411         font-size: 80%;
1412 }
1413
1414
1415 .soundfile p.date {
1416         margin: 0;
1417 }
1418
1419 .frontpage.soundfile .audio {
1420         font-size: 80%;
1421         padding-top: 0.5ex;
1422         padding-bottom: 1ex;
1423 }
1424
1425 #panikdb {
1426         position: absolute;
1427         top: -20px;
1428         right: 0px;
1429         background: white;
1430         color: #888;
1431         padding: 5px 10px;
1432         border: 1px solid #888;
1433         border-width: 1px 1px 0 1px;
1434         -webkit-transform-origin: bottom right;
1435         -webkit-transform: rotate(270deg);
1436         -moz-transform-origin: bottom right;
1437         -moz-transform: rotate(270deg);
1438         transform-origin: bottom right;
1439         transform: rotate(270deg);
1440 }
1441
1442 img.logo.right {
1443         margin-bottom: 1em;
1444 }
1445
1446 .soundfile .special,
1447 .newsitem .special {
1448         margin-bottom: 2em;
1449 }
1450
1451 .newsitem .special .smooth {
1452         padding-top: 5px;
1453 }
1454
1455 /* USER CONTENT */
1456
1457 div.userContent ul {
1458         margin: 1em 0;
1459 }
1460
1461 div.userContent h1,
1462 div.userContent h2,
1463 div.userContent h3,
1464 div.userContent h4 {
1465         text-transform: none;
1466         font-family: "Reglo";
1467         font-weight: normal;
1468 }
1469
1470 div.userContent h1 { font-size: 2em; }
1471 div.userContent h2 { font-size: 1.8em; }
1472 div.userContent h3 { font-size: 1.5em; }
1473 div.userContent h4 { font-size: 1.5em; }
1474 div.userContent a { text-decoration: underline; }
1475
1476 div.userContent a.tag { text-decoration: none; }
1477
1478 @media screen and (max-width: 760px) {
1479         #streamSymbol{
1480                 top: 0;
1481         }
1482         #MainHeader {
1483                 margin: 0 auto;
1484         }
1485         #All #backgroundBox h1.top {
1486                 width: 94%;
1487         }
1488
1489         #Player.withoutPlaylist #player-container #audioPlayer{
1490             margin:auto;
1491             width:100%;
1492         }
1493         #Player.withoutPlaylist #player-container #audioPlayer #Live{
1494             font-size:150%;
1495         }
1496
1497
1498         #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1499         #player-container{
1500                 background: $primary;
1501         }
1502         #player-container * {color: white !important; }
1503         #player-container{
1504                 z-index:500;
1505                 position:fixed;
1506                 width:100% !important;
1507                 /*top:2em;*/
1508                 font-size:80%;
1509                 bottom:0em;
1510                 border-bottom:none;
1511         }
1512         #Player.withPlaylist #player-container #audioPlayer{
1513                 float:left;
1514                 width:50%;
1515                 border-right:2px solid black;
1516         }
1517         #Player.withPlaylist #player-container #Playlist{
1518                 float:right;
1519                 width:49%;
1520                 text-align:left;
1521         }
1522         #player-container #myPlaylist {
1523                 padding: 0;
1524         }
1525
1526         #player-container #myPlaylist a {
1527                 white-space: nowrap;
1528         }
1529
1530         #player-container #Playlist ol{
1531                 margin-left: 30px;
1532         }
1533 }
1534
1535 div.emission-logo {
1536         margin-left: 1em;
1537 }
1538
1539 div.extra-soundfiles {
1540         clear: both;
1541 }
1542
1543 h3.episode-subtitle {
1544         font-size: 2.5em;
1545 }
1546
1547 .waveform {
1548         display: none;
1549         position: relative;
1550 }
1551
1552 .waveform span {
1553         background: #3A3A3A;
1554         background: rgba(10, 10, 10, 0.8);
1555         display: inline-block;
1556         width: 0.50%;
1557 }
1558
1559 .waveform span.done {
1560         background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
1561 }
1562
1563 .waveform span.done.current + span {
1564         background: $primary;
1565 }
1566
1567 .waveform i.duration {
1568         position: absolute;
1569         right: 4px;
1570         bottom: 4px;
1571         color: $primary;
1572         text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1573         font-style: normal;
1574         font-weight: bold;
1575 }
1576
1577 div.fragment-sound {
1578         position: relative;
1579 }
1580
1581 div.soundcell div.logo {
1582         vertical-align: top;
1583 }
1584
1585 div.fragment-sound {
1586 }
1587
1588 div.extra-soundfiles div.fragment-sound {
1589         margin-top: 5px;
1590 }
1591
1592 div.extra-soundfiles div.fragment-name {
1593         font-style: italic;
1594         position: relative;
1595         top: 1ex;
1596         max-width: 70%;
1597 }
1598
1599 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1600 }
1601 div.extra-soundfiles ul li div.fragment-sound div.audio {
1602         bottom: 0;
1603 }
1604
1605 #fiber-content div.extra-soundfiles strong {
1606         text-transform: uppercase;
1607
1608 }
1609
1610 .nonstop-track-title, .nonstop-track-artist {
1611         font-size: 80%;
1612 }
1613
1614 .soundfile-info {
1615         padding-right: 75px;
1616 }
1617
1618 #fiber-content div.extra-soundfiles .soundfile-info strong {
1619         padding-right: 0;
1620 }
1621
1622 #fiber-content div.extra-soundfiles .soundfile-info a {
1623         text-decoration: none;
1624 }
1625
1626 #fiber-content div.extra-soundfiles {
1627         margin: 1em 0;
1628 }
1629
1630 div.extra-soundfiles div.logo {
1631         display: inline-block;
1632 }
1633
1634 div#fiber-content div.extra-soundfiles ul.list {
1635         display: inline-block;
1636         width: 88%;
1637         width: calc(100% - 72px);
1638 }
1639
1640 div.download-links {
1641         position: absolute;
1642         z-index: 1000;
1643         text-align: right;
1644 }
1645
1646 div.hidden-download-links {
1647         display: none !important;
1648 }
1649
1650 div.episode-detail div.sound div.download-links {
1651         display: inline-block;
1652         padding-top: 1ex;
1653         padding-left: 1ex;
1654 }
1655
1656 div.extra-soundfiles div.download-links {
1657         background: white;
1658 }
1659
1660 h1.top a.dimmed {
1661         opacity: 0.7;
1662 }
1663
1664 div#agenda div.content-inline {
1665         margin-bottom: 1em;
1666 }
1667
1668 div.previous-and-next-months {
1669         margin-top: 1em;
1670 }
1671
1672 div.publication-date.date.smooth {
1673         font-size: 80%;
1674 }
1675
1676 #All h1.top.fullwidth {
1677         width: 150%;
1678 }
1679
1680 div.gallery img {
1681         padding: 2px;
1682         background: white;
1683         border: 1px solid #333;
1684 }
1685
1686 div#dialog-background,
1687 div.gallery div.first {
1688         position: fixed;
1689         top: 0;
1690         left: 0;
1691         width: 100%;
1692         height: 100%;
1693         background: rgba(0, 0, 0, 0.9);
1694         z-index: 1000;
1695         text-align: center;
1696 }
1697
1698 div.gallery div.first img {
1699         padding: 5px;
1700         padding-bottom: 25px;
1701         margin-top: -240px;
1702         margin-left: -320px;
1703         position: absolute;
1704         top: 50%;
1705         left: 50%;
1706         transition: all 0.5s ease;
1707         transform-origin: bottom left;
1708 }
1709
1710 div.portrait div.gallery div.first img {
1711         margin-top: -320px;
1712         margin-left: -240px;
1713 }
1714
1715 div.gallery {
1716         border-bottom: 1px solid #ccc;
1717 }
1718
1719 div.gallery span.gallery-legend {
1720         display: inline-block;
1721         position: absolute;
1722         top: 50%;
1723         margin-top: 250px;
1724         left: 0%;
1725         width: 100%;
1726         color: #000;
1727         z-index: 1000;
1728 }
1729
1730 div.portrait div.gallery span.gallery-legend {
1731         margin-top: 330px;
1732 }
1733
1734 @media screen and (max-width: 640px) {
1735         div.portrait div.gallery div.first img,
1736         div.gallery div.first img {
1737                 max-width: 80vw;
1738                 margin: 0;
1739                 max-height: 80vh;
1740                 left: 10vw;
1741                 top: 10vh;
1742                 display: inline-block;
1743         }
1744 }
1745
1746 ul.tags {
1747         padding-top: 1em;
1748         clear: both;
1749 }
1750
1751 div.topik.inline {
1752         clear: both;
1753         margin-top: 1em;
1754 }
1755
1756 #fiber-content div.topikcell a {
1757         text-decoration: none;
1758         height: 500px;
1759 }
1760
1761 #fiber-content div.topikcell .topik-large a {
1762         height: auto;
1763 }
1764
1765 div.topikcellcontent h5 {
1766         padding-top: 1ex;
1767 }
1768
1769 div.topikcellcontent.topik-large a {
1770         width: 100%;
1771         float: none;
1772         display: inline-block;
1773         text-align: left;
1774 }
1775
1776 div.topikcellcontent.topik-large img {
1777         float: left;
1778         margin-right: 1em;
1779 }
1780
1781 div.topikcellcontent a {
1782         margin-bottom: 2em;
1783         display: inline-block;
1784         text-align: left;
1785         width: 50%;
1786         box-sizing: border-box;
1787         padding-right: 2em;
1788         float: left;
1789 }
1790
1791 div.topikcellcontent img {
1792 }
1793
1794 div.topikcellcontent h2 {
1795         font-size: 3.5em;
1796 }
1797
1798 @media only screen and (min-width: 1250px) {
1799         div.topikcellcontent a {
1800                 display: inline-block;
1801                 text-align: left;
1802                 width: 50%;
1803                 float: left;
1804         }
1805 }
1806
1807 .program-week img.smooth {
1808         padding-bottom: 0;
1809 }
1810
1811 div#dialog-background {
1812         display: flex;
1813 }
1814 div#dialog-embed {
1815         position: relative;
1816         background: white;
1817         width: 50%;
1818         margin: auto;
1819         text-align: left;
1820         padding: 1ex;
1821 }
1822
1823 div#dialog-embed textarea {
1824         width: 100%;
1825         max-width: none;
1826 }
1827
1828 div#dialog-embed #close-button {
1829         position: absolute;
1830         right: 1ex;
1831 }
1832
1833 body#embed {
1834         min-height: auto !important;
1835         margin: 0;
1836         background: white;
1837 }
1838
1839 body#embed #Main {
1840         background: transparent;
1841 }
1842
1843 body#embed #Commons,
1844 body#embed #metaNav,
1845 body#embed #Footer,
1846 body#embed #userLog,
1847 body#embed #panikdb,
1848 body#embed #Player {
1849         display: none;
1850 }
1851
1852 body#embed #Changing {
1853         float: none;
1854         width: auto;
1855 }
1856
1857 body#embed #Main > .wrapper {
1858         padding: 0;
1859 }
1860
1861 body#embed .logo {
1862         padding-top: 4px;
1863 }
1864
1865 body#embed ul.custom {
1866         display: inline-block;
1867         width: calc(100% - 72px);
1868 }
1869
1870 body#embed ul.custom .soundfile-info {
1871         padding: 1ex;
1872 }
1873
1874 body#embed span.fragment-title {
1875         font-weight: normal;
1876 }
1877
1878 table.playlist {
1879         width: 90%;
1880 }
1881
1882 table.playlist td {
1883         padding: 0.5ex;
1884         text-align: left;
1885 }
1886
1887 table.playlist td.tracktime {
1888         width: 6ex;
1889         text-align: center;
1890 }
1891
1892 p.playlist-disclaimer {
1893         margin-top: 2em;
1894         max-width: 60ex;
1895         font-style: italic;
1896 }
1897
1898
1899 #main-topiks #fiber-nav li ul {
1900     padding-top: 0;
1901     padding-left: 2em;
1902 }
1903 #main-topiks #fiber-nav li ul li {
1904     padding-left: 0;
1905     font-size: 80%;
1906 }
1907
1908 #main-topiks #fiber-nav li ul li a {
1909     padding-left: 0;
1910 }
1911
1912 div.commands {
1913         display: flex;
1914         width: 90vw;
1915 }
1916
1917 @media screen and (min-width:760px){
1918         div.commands {
1919                 width: calc(90vw - 240px);
1920         }
1921 }
1922
1923 input#msg {
1924         flex-grow: 1;
1925 }
1926
1927 div.chat-area {
1928         max-width: 60em;
1929 }
1930
1931 #chat {
1932        margin-top: 1ex;
1933 }
1934
1935 #chat div.msg {
1936         position: relative;
1937         margin-bottom: 1ex;
1938         transition: opacity 1s ease;
1939 }
1940
1941 #chat div.msg.new {
1942         opacity: 0;
1943 }
1944
1945 #chat div.msg.msg-out span.content {
1946         font-size: 90%;
1947         color: #444;
1948 }
1949
1950 #chat span.from {
1951    display: inline-block;
1952    width: 10rem;
1953    overflow: hidden;
1954    text-overflow: ellipsis;
1955    color: #888;
1956    position: absolute;
1957 }
1958 #chat span.content {
1959   display: inline-block;
1960   padding-left: 11rem;
1961 }
1962
1963 #chat div.msg.info span.content {
1964         padding-left: 1rem;
1965         font-style: italic;
1966         color: #666;
1967 }
1968
1969 @media screen and (max-width: 760px) {
1970     #chat span.from {
1971         display: block;
1972         position: static;
1973         width: auto;
1974     }
1975     #chat span.content {
1976         display: block;
1977         padding-left: 2rem;
1978     }
1979 }
1980
1981 h1.top > span.chat.with-logo {
1982         position: relative;
1983         left: 140px;
1984         display: inline-block;
1985         max-width: calc(100% - 140px);
1986 }
1987
1988 div.top-logo {
1989         position: absolute;
1990         top: 30px;
1991 }
1992
1993 div.top-logo img {
1994         border: 2px solid black;
1995 }
1996
1997 @media screen and (max-width:760px){
1998         div.top-logo {
1999                 display: none;
2000         }
2001         h1.top > span.chat.with-logo {
2002                 position: static;
2003                 max-width: none;
2004         }
2005         div.topikcellcontent a {
2006                 width: auto;
2007         }
2008         #fiber-content div.topikcell a {
2009                 height: auto;
2010         }
2011 }
2012
2013 div#CurrentlyChatting {
2014         cursor: pointer;
2015         margin-top: 1em;
2016 }
2017
2018 div.description-emission-chat {
2019         margin-bottom: 2em;
2020 }
2021
2022 div.chatPart h3 {
2023         padding-top: 0;
2024 }
2025
2026 div#chat.moderation .msg-in span.from {
2027         cursor: pointer;
2028 }
2029
2030 div#chat.moderation .msg-in span.from:hover::after {
2031         padding-left: 1ex;
2032         font-family: FontAwesome;
2033         content: "\f056";
2034         font-size: 80%;
2035 }
2036
2037 div.programCell a.playlist {
2038         font-size: 80%;
2039 }
2040
2041 #bg-title {
2042         display: none;
2043         color: lighten($primary, 20);
2044         font-family: 'Reglo';
2045         text-transform: uppercase;
2046         line-height: 100%;
2047         font-size: 250px;
2048         font-size: 25vh;
2049         position: absolute;
2050         left: -260px;
2051         top: 48vh;
2052         z-index: 0;
2053         -webkit-user-select: none;
2054         -moz-user-select: none;
2055         -ms-user-select: none;
2056         user-select: none;
2057         cursor: default;
2058 }