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         div.chat-page .rightPart {
 726                 font-size: 95%;
 727                 margin-top: 4em;
 728                 padding-top: 1em;
 729                 border-top: 1px solid #777;
 730         }
 731
 732 }
 733
 734 /****************************************************/
 735 /**** #Changing #Footer ... ****/
 736 /****************************************************/
 737 #Changing{
 738         display: flex;
 739         flex-direction: column;
 740         min-height: 97vh;
 741 }
 742
 743 #Main{
 744         flex-grow: 1;
 745         color:#333;
 746         position: relative;
 747         z-index: 1;
 748 }
 749 #Main >.wrapper{
 750         padding-bottom:2em;
 751 }
 752 #Home #Main{
 753         min-height:0;
 754 }
 755 #Changing a:hover,#Changing button:hover {
 756         opacity:0.6;
 757         text-decoration:none;
 758 }
 759 /* GLOBAL SITE NAV */
 760 #userLog{
 761         z-index:2000;
 762         position: fixed;
 763         bottom: 0px;
 764         right: 0px;
 765 }
 766 #userLog .log{
 767         margin:0.3em;
 768         -moz-box-shadow: 0px 0px 3px #000;
 769         -webkit-box-shadow: 0px 0px 3px #000;
 770         box-shadow: 0px 0px 3px #000;
 771         border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
 772         text-align:center;
 773         padding: 0.3em;
 774         font-size:0.9em;
 775         color:black;
 776         background-color:$primary;
 777         border: 2px solid black;
 778         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);
 779 }
 780 #userLog .log.info{
 781         background-color:grey;
 782         color:white;
 783 }
 784 #userLog .log.ok{
 785         background-color:green;
 786         border-color:black;
 787         color:white;
 788 }
 789 #userLog .log.error{
 790         background-color:$primary;
 791         border-color:yellow;
 792 }
 793 #main {}
 794 #mainLegend{
 795         width:30%;
 796         text-align:right;
 797         float:right;
 798         padding:1em;
 799 }
 800
 801 #Footer{
 802         border-top:2px solid #333;
 803         padding-top: 2em;
 804         padding-bottom: 80px;
 805         position: relative;
 806         z-index: 3;
 807 }
 808
 809 #Footer ul {
 810 }
 811
 812 #Footer ul li {
 813         padding-right: 2em;
 814 }
 815
 816 #Footer a:hover {
 817         opacity:0.6;
 818 }
 819
 820
 821 /****************************************************/
 822 .inline .link{display:block;padding:1em;}
 823 /**** Liste   ****/
 824 /**** EMISSIONS ****/
 825 #Emission .emission-detail .title{}
 826 /*
 827 */
 828 #Emission-tabs-menu .sub{
 829         margin-bottom:1em;
 830 }
 831 /**** Detail    ****/
 832 .emission-detail .metas{
 833         line-height:1.5em;
 834         float: left;
 835         width: 49%;
 836         margin-top: 0;
 837 }
 838
 839 .emission-detail h4.subtitle {
 840         margin-top: 1em;
 841         font-weight: normal;
 842         font-family: 'Reglo';
 843         text-transform: none;
 844         float: left;
 845 }
 846
 847 .emission-detail ul.schedule {
 848         margin-top: 0;
 849         margin-bottom: 1em;
 850  }
 851
 852 .emission-detail ul.schedule .weekdiff {
 853         font-size: 80%;
 854 }
 855
 856 .emission-detail article {
 857         clear: both;
 858 }
 859
 860 .emission-detail .logo{
 861         float:right;
 862         width: 50%;
 863         margin-bottom: 1ex;
 864 }
 865 @media screen and (max-width: 300px) {
 866         .emission-detail .metas {
 867                 float: none;
 868                 width: auto;
 869                 margin: 0;
 870         }
 871         .emission-detail .logo{max-width:100%;}
 872 }
 873 .emission .mainHeader {
 874     overflow: hidden;
 875     margin-bottom:1.5em;
 876 }
 877
 878 .emission .contacts {
 879         clear: both;
 880 }
 881
 882 /**** Inline    ****/
 883 .emission.inline, .emission.resume {
 884         padding:1em 0 1em 0;
 885 }
 886
 887 .emission.inline div.date {
 888         min-height: 3em;
 889         text-align: center;
 890         display:inline-block;
 891         float:left;
 892         margin-right:1em;
 893 }
 894 .emission .archived {
 895         opacity:0.6;
 896 }
 897
 898 .emission .link .description {
 899         margin: 0px 0 5px 0;
 900         font-family: "RegloMedium";
 901 }
 902
 903
 904 /**** EPISODE ****/
 905 /**** Detail  ****/
 906
 907 .episode .tag{
 908 }
 909 .episode.resume, .episode.inline{
 910         padding:1em 0.5em 1em;
 911 }
 912 .episode.inline .dateBloc, .episode.resume .dateBloc{
 913         float:left;
 914 }
 915 .episode.resume img {
 916         border: 2px solid black;
 917 }
 918
 919 .episode.resume .title{
 920         margin-bottom:0.5em;
 921 }
 922 .episode.resume .logo{
 923         float: right;
 924 }
 925 .topik.inline .logo,
 926 .episode.inline .logo {
 927         min-height: 50px;
 928         float: left;
 929         margin-right: 1em;
 930 }
 931 .episode.resume .sound{
 932         float:right;
 933         margin:0 0 0.5em 0.5em;
 934 }
 935 .episode.inline .sound.right{
 936         text-align:center;
 937         font-size:70%;
 938         position: relative;
 939         z-index: 10;
 940 }
 941 .episode.inline .sound.right button{
 942     font-size:1.5em;
 943         display:inline;
 944         text-align:center;
 945         padding-bottom:0.05em;
 946 }
 947 .episode.resume .sound.right .icon-download{
 948         text-align:center;
 949 }
 950 .episode.resume .sound.right .icon-download{
 951         display:block;
 952 }
 953
 954 .big.icon-pause,
 955 .big.icon-stop,
 956 .big.icon-share {
 957         display: inline-block;
 958         vertical-align: middle;
 959 }
 960
 961 .episode.detail .logo.right{
 962         max-width:50%;
 963 }
 964
 965 .episode.resume .date .day, .emission-detail .date .day {
 966 }
 967
 968 .episode.resume .content {
 969         padding-left: 5em;
 970 }
 971 .episode.resume .content .title {
 972 }
 973
 974 .episode.resume .logo {
 975         margin:0 0 1em;
 976         max-width:20%;
 977 }
 978 .episode.inline .date{
 979         font-size:80%;
 980 }
 981
 982 #Emission-tabs-menu .emissions-newsitems {
 983         margin-bottom: 2em;
 984 }
 985
 986 #Emission-tabs-menu .emissions-newsitems ul.list li {
 987         border: 0;
 988 }
 989
 990 #Emission-tabs-menu .futur-episodes h5,
 991 #Emission-tabs-menu .recent-episodes h5 {
 992         font-size: 1.2em;
 993 }
 994
 995 #Emission-tabs-menu #search-form {
 996         margin-bottom: 1em;
 997 }
 998
 999 div.extra-soundfiles h3 {
1000         margin-top: 1em;
1001         font-size: 2.5em;
1002 }
1003
1004 div.extra-soundfiles ul li {
1005         position: relative;
1006 }
1007
1008 div.extra-soundfiles ul li div.audio {
1009         display: inline;
1010         top: 5px;
1011         right: 0;
1012         position: absolute;
1013         font-size: 60%;
1014 }
1015
1016 div.extra-soundfiles ul strong {
1017         padding-right: 3em;
1018 }
1019
1020 @media screen and (max-width: 400px) {
1021         .episode .dateBloc{
1022                 width:4em;
1023                 font-size:80%
1024         }
1025
1026         .episode.resume .content {
1027                 padding-left: 4em;
1028         }
1029 }
1030
1031 /****************************************************/
1032 /**** News ****/
1033
1034 #newsRoll {
1035         max-width: 500px;
1036 }
1037
1038 #newsRoll li {
1039         background: white;
1040 }
1041
1042 .newsRoll .title{
1043         background:black;
1044         color:white;
1045         bottom:0px;
1046         opacity:0.9;
1047     width:100%;
1048         text-align: left;
1049         font-family: "RegloBold";
1050         position: absolute;
1051         left: 0;
1052 }
1053 .newsRoll .title div{
1054         padding: 1em;
1055 }
1056 .newsRoll a, .newsRoll button img{
1057     border:3px solid $secondary;
1058 }
1059
1060 .newsRoll .by3 button {
1061         width: 100%;
1062 }
1063
1064 .soundfiles .special a,
1065 .news .special a {
1066         position: relative;
1067 }
1068
1069 .special .labels .item,
1070 .newsRoll .labels .item{
1071         display:block;
1072         background: $secondary;
1073         color:white;
1074         margin:0.1em;
1075         font-size:0.9em;
1076         padding:0.3em;
1077 }
1078 .newsList .current a{
1079     opacity:0.5;
1080 }
1081 /****************************************************/
1082 .list.news li {
1083 }
1084
1085 .soundfiles ul.custom li a,
1086 .news ul.custom li a { max-width: 98%; }
1087 .news li.item a {padding:1em;}
1088
1089 .logo img{
1090         display:block;
1091         border-style:solid;
1092         border-width:3px;
1093 }
1094 ul.newsSpecial{
1095         border-bottom:3px solid #ccc;
1096 }
1097 @media only screen and (max-width: 970px) {
1098         .columns {column-count: 1;      -webkit-column-count: 1;        -moz-column-count: 1;}
1099 }
1100
1101
1102 /****************************************************/
1103 /**** Home & ****/
1104 /****************************************************/
1105
1106 #Home #Nav .wrapper{
1107         max-width:auto !important;
1108         width:auto !important;
1109 }
1110
1111 /*
1112 @media screen and (max-width:800px){
1113         #Home .newsRoll .logo{
1114                 max-width:100px;
1115         }
1116 }
1117 @media screen and (max-width:600px){
1118         #Home .newsRoll .logo{
1119                 max-width:50px;
1120         }
1121 }
1122 */
1123
1124 /****************************************************/
1125 /**** PROGRAM ****/
1126 /****************************************************/
1127
1128 .program.tabs nav ul li{
1129         display:table-cell;
1130         width:14%;
1131         text-align:center;
1132 }
1133
1134 .program.tabs nav ul li.week-arrow {
1135         width: 1%;
1136         padding-bottom: 5px;
1137 }
1138
1139 .program ul .dateBloc {
1140         float:left;
1141         padding-top:1em;
1142 }
1143 .program ul .schedule {
1144         margin-left:5em;
1145 }
1146 .program .nonstop {
1147         text-align:left;
1148 }
1149 .program-week .programDate{
1150         float:left;
1151         width:3em;
1152 }
1153 .program-week .programCell{
1154         margin-left:3.5em;
1155 }
1156 .program-week .nonStop .programDate{
1157         visibility:hidden;
1158 }
1159 .program-week .nonStop .programCell{
1160         font-size:0.9em;
1161         padding-left:50%;
1162         text-align:right;
1163 }
1164 .program-week a.nonstop{
1165         font-size:0.9em;
1166         margin:0.1em;
1167 }
1168 .program-week .inline,.program-week .resume{padding:0;}
1169 .program-week .description{}
1170
1171 .program-week .title {
1172         color: black;
1173         display: inline;
1174 }
1175
1176 .program-week .smooth {
1177         color: #666;
1178         opacity: 1.0;
1179         font-size: 80%;
1180         padding-bottom: 8px;
1181 }
1182
1183 .program-week .emission h5,
1184 .program-week .smooth .title {
1185         color: #333;
1186         text-transform: uppercase;
1187 }
1188
1189 .program-week .description {
1190         color: black;
1191         font-size: 90%;
1192 }
1193
1194 .program-week .programCell:hover {
1195         opacity: 0.5;
1196 }
1197
1198 #Changing .program-week .programCell a {
1199         opacity: 1.0;
1200 }
1201
1202 #Changing .program-week .programCell .smooth a {
1203         opacity: 0.5;
1204 }
1205
1206 #Changing .program-week .programCell .smooth h5 a {
1207         opacity: 1.0;
1208 }
1209
1210
1211 /****************************************************/
1212 /**** SEARCH ****/
1213 /****************************************************/
1214
1215 .search li.previous-page {
1216   margin-bottom: 2ex;
1217   text-align: left;
1218   margin-left: 0ex;
1219   font-style: italic;
1220 }
1221
1222 .search li.next-page {
1223   margin-top: 2ex;
1224   text-align: right;
1225   margin-right: 0;
1226   font-style: italic;
1227 }
1228
1229 .search-filters {
1230   text-align: justify;
1231 }
1232
1233
1234 /****************************************************/
1235 /**** GRILLE ****/
1236 /****************************************************/
1237
1238 #grid #Main {}
1239 #grid th{
1240         color:#000;
1241 }
1242 #grid .heure {
1243         height:50px !important;
1244 }
1245 #grid .heure.vertical {
1246         padding:1.5em 0;
1247 }
1248 #grid .day {
1249         padding:1em 0 1em 0;
1250 }
1251 #grid .nonstop {
1252 }
1253 #grid .item{
1254         padding:0.5em 0.2em 0.5em 0.2em;
1255 }
1256 #grid .cell hr {
1257         border:1px dotted #ddd;
1258         margin:0.3em;
1259 }
1260 #grid .time-label{
1261         margin-top:0.5em;
1262 }
1263
1264 #grid .highlighted,#grid .highlighted  *{
1265         background:#333 !important;
1266         color:white !important;
1267 }
1268
1269 #grid .highlighted,#grid .highlighted  *{
1270         background:#333 !important;
1271         color:white !important;
1272 }
1273 #Emissions li.item.normal{
1274         display:none;
1275 }
1276 #Emissions li.item.hightlighted{
1277         display:block !important;
1278 }
1279
1280 #gridNav span.category {
1281         text-transform: none;
1282 }
1283
1284
1285 /**** Navigation for static pages ****/
1286
1287 #fiber-nav {
1288         font-size: 150%;
1289 }
1290 #fiber-nav li, #fiber-nav li a {
1291         display: block;
1292 }
1293 #fiber-nav ul{
1294         padding: 0.5em;
1295 }
1296 #fiber-nav li a{
1297         padding:0.5em;
1298 }
1299
1300 #fiber-content a {
1301         text-decoration: underline;
1302 }
1303
1304 #fiber-content ul.list a {
1305         text-decoration: none;
1306 }
1307
1308 #fiber-content a:hover {
1309         text-decoration: none;
1310 }
1311
1312 .intro,
1313 .userContent,
1314 #fiber-content,
1315 .content,
1316 .content h5 {
1317         line-height: 120%;
1318 }
1319
1320 .userContent strong,
1321 #fiber-content strong {
1322         text-transform: none;
1323         font-family: "RegloBold";
1324         font-style: normal;
1325 }
1326
1327 .userContent em,
1328 #fiber-content em {
1329         font-family: inherit;
1330         font-style: italic;
1331 }
1332
1333 /**** SCREEN SIZE ADAPTATIONS ****/
1334     html #main{ font-size: 70%; }
1335 body { font-size: 18px;}
1336 @media (max-width: 300px){
1337     body #All{ font-size: 80%; }
1338 }
1339
1340 @media (min-width: 300px) and (max-width:800px){
1341     body #All{ font-size: 85%; }
1342 }
1343
1344 @media (min-width: 700px) and (max-width:1000px){
1345     body #All{ font-size: 90%; }
1346 }
1347
1348 @media (min-width: 1000px) {
1349     body #All{ font-size: 100%; }
1350 }
1351
1352 #subscribe-form {
1353   position: relative;
1354   margin-bottom: 2em;
1355   padding-bottom: 2em;
1356 }
1357
1358 #Home #subscribe-form {
1359   margin-bottom: 0;
1360 }
1361
1362 #subscribe-form ul.errorlist {
1363   position: absolute;
1364   bottom: -2em;
1365   text-align: center;
1366   display: block;
1367   width: 100%;
1368   padding: 0;
1369   list-style: none;
1370   color: #800;
1371 }
1372
1373 #subscribe-form input {
1374         width: 15em;
1375         max-width: none;
1376 }
1377
1378 #Nav div.search form {
1379   padding: 1em 0;
1380 }
1381
1382 div.episode.resume div.title {
1383         white-space: normal;
1384 }
1385
1386 #Home div.program.tabs {
1387         margin: 1em 0;
1388 }
1389
1390 nav#program li {
1391         display: block;
1392         margin: 0;
1393 }
1394
1395 #recent-emissions,
1396 #recent-news,
1397 #recent-sounds {
1398         margin-top: 2em;
1399 }
1400
1401 #recent-emissions h3,
1402 #recent-news h3,
1403 #recent-sounds h3 {
1404         font-size: 140%;
1405 }
1406
1407 #recent-emissions h3.sectionLabel {
1408         margin-bottom: 0;
1409 }
1410
1411 .episode.soundfile {
1412         padding: 0;
1413 }
1414
1415 .soundfile .smooth {
1416         color: #666;
1417         opacity: 1.0;
1418         font-size: 80%;
1419 }
1420
1421
1422 .soundfile p.date {
1423         margin: 0;
1424 }
1425
1426 .frontpage.soundfile .audio {
1427         font-size: 80%;
1428         padding-top: 0.5ex;
1429         padding-bottom: 1ex;
1430 }
1431
1432 #panikdb {
1433         position: absolute;
1434         top: -20px;
1435         right: 0px;
1436         background: white;
1437         color: #888;
1438         padding: 5px 10px;
1439         border: 1px solid #888;
1440         border-width: 1px 1px 0 1px;
1441         -webkit-transform-origin: bottom right;
1442         -webkit-transform: rotate(270deg);
1443         -moz-transform-origin: bottom right;
1444         -moz-transform: rotate(270deg);
1445         transform-origin: bottom right;
1446         transform: rotate(270deg);
1447 }
1448
1449 img.logo.right {
1450         margin-bottom: 1em;
1451 }
1452
1453 .soundfile .special,
1454 .newsitem .special {
1455         margin-bottom: 2em;
1456 }
1457
1458 .newsitem .special .smooth {
1459         padding-top: 5px;
1460 }
1461
1462 /* USER CONTENT */
1463
1464 div.userContent ul {
1465         margin: 1em 0;
1466 }
1467
1468 div.userContent h1,
1469 div.userContent h2,
1470 div.userContent h3,
1471 div.userContent h4 {
1472         text-transform: none;
1473         font-family: "Reglo";
1474         font-weight: normal;
1475 }
1476
1477 div.userContent h1 { font-size: 2em; }
1478 div.userContent h2 { font-size: 1.8em; }
1479 div.userContent h3 { font-size: 1.5em; }
1480 div.userContent h4 { font-size: 1.5em; }
1481 div.userContent a { text-decoration: underline; }
1482
1483 div.userContent a.tag { text-decoration: none; }
1484
1485 @media screen and (max-width: 760px) {
1486         #streamSymbol{
1487                 top: 0;
1488         }
1489         #MainHeader {
1490                 margin: 0 auto;
1491         }
1492         #All #backgroundBox h1.top {
1493                 width: 94%;
1494         }
1495
1496         #Player.withoutPlaylist #player-container #audioPlayer{
1497             margin:auto;
1498             width:100%;
1499         }
1500         #Player.withoutPlaylist #player-container #audioPlayer #Live{
1501             font-size:150%;
1502         }
1503
1504
1505         #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1506         #player-container{
1507                 background: $primary;
1508         }
1509         #player-container * {color: white !important; }
1510         #player-container{
1511                 z-index:500;
1512                 position:fixed;
1513                 width:100% !important;
1514                 /*top:2em;*/
1515                 font-size:80%;
1516                 bottom:0em;
1517                 border-bottom:none;
1518         }
1519         #Player.withPlaylist #player-container #audioPlayer{
1520                 float:left;
1521                 width:50%;
1522                 border-right:2px solid black;
1523         }
1524         #Player.withPlaylist #player-container #Playlist{
1525                 float:right;
1526                 width:49%;
1527                 text-align:left;
1528         }
1529         #player-container #myPlaylist {
1530                 padding: 0;
1531         }
1532
1533         #player-container #myPlaylist a {
1534                 white-space: nowrap;
1535         }
1536
1537         #player-container #Playlist ol{
1538                 margin-left: 30px;
1539         }
1540 }
1541
1542 div.emission-logo {
1543         margin-left: 1em;
1544 }
1545
1546 div.extra-soundfiles {
1547         clear: both;
1548 }
1549
1550 h3.episode-subtitle {
1551         font-size: 2.5em;
1552 }
1553
1554 .waveform {
1555         display: none;
1556         position: relative;
1557 }
1558
1559 .waveform span {
1560         background: #3A3A3A;
1561         background: rgba(10, 10, 10, 0.8);
1562         display: inline-block;
1563         width: 0.50%;
1564 }
1565
1566 .waveform span.done {
1567         background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
1568 }
1569
1570 .waveform span.done.current + span {
1571         background: $primary;
1572 }
1573
1574 .waveform i.duration {
1575         position: absolute;
1576         right: 4px;
1577         bottom: 4px;
1578         color: $primary;
1579         text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1580         font-style: normal;
1581         font-weight: bold;
1582 }
1583
1584 div.fragment-sound {
1585         position: relative;
1586 }
1587
1588 div.soundcell div.logo {
1589         vertical-align: top;
1590 }
1591
1592 div.fragment-sound {
1593 }
1594
1595 div.extra-soundfiles div.fragment-sound {
1596         margin-top: 5px;
1597 }
1598
1599 div.extra-soundfiles div.fragment-name {
1600         font-style: italic;
1601         position: relative;
1602         top: 1ex;
1603         max-width: 70%;
1604 }
1605
1606 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1607 }
1608 div.extra-soundfiles ul li div.fragment-sound div.audio {
1609         bottom: 0;
1610 }
1611
1612 #fiber-content div.extra-soundfiles strong {
1613         text-transform: uppercase;
1614
1615 }
1616
1617 .nonstop-track-title, .nonstop-track-artist {
1618         font-size: 80%;
1619 }
1620
1621 .soundfile-info {
1622         padding-right: 75px;
1623 }
1624
1625 #fiber-content div.extra-soundfiles .soundfile-info strong {
1626         padding-right: 0;
1627 }
1628
1629 #fiber-content div.extra-soundfiles .soundfile-info a {
1630         text-decoration: none;
1631 }
1632
1633 #fiber-content div.extra-soundfiles {
1634         margin: 1em 0;
1635 }
1636
1637 div.extra-soundfiles div.logo {
1638         display: inline-block;
1639 }
1640
1641 div#fiber-content div.extra-soundfiles ul.list {
1642         display: inline-block;
1643         width: 88%;
1644         width: calc(100% - 72px);
1645 }
1646
1647 div.download-links {
1648         position: absolute;
1649         z-index: 1000;
1650         text-align: right;
1651 }
1652
1653 div.hidden-download-links {
1654         display: none !important;
1655 }
1656
1657 div.episode-detail div.sound div.download-links {
1658         display: inline-block;
1659         padding-top: 1ex;
1660         padding-left: 1ex;
1661 }
1662
1663 div.extra-soundfiles div.download-links {
1664         background: white;
1665 }
1666
1667 h1.top a.dimmed {
1668         opacity: 0.7;
1669 }
1670
1671 div#agenda div.content-inline {
1672         margin-bottom: 1em;
1673 }
1674
1675 div.previous-and-next-months {
1676         margin-top: 1em;
1677 }
1678
1679 div.publication-date.date.smooth {
1680         font-size: 80%;
1681 }
1682
1683 #All h1.top.fullwidth {
1684         width: 150%;
1685 }
1686
1687 div.gallery img {
1688         padding: 2px;
1689         background: white;
1690         border: 1px solid #333;
1691 }
1692
1693 div#dialog-background,
1694 div.gallery div.first {
1695         position: fixed;
1696         top: 0;
1697         left: 0;
1698         width: 100%;
1699         height: 100%;
1700         background: rgba(0, 0, 0, 0.9);
1701         z-index: 1000;
1702         text-align: center;
1703 }
1704
1705 div.gallery div.first img {
1706         padding: 5px;
1707         padding-bottom: 25px;
1708         margin-top: -240px;
1709         margin-left: -320px;
1710         position: absolute;
1711         top: 50%;
1712         left: 50%;
1713         transition: all 0.5s ease;
1714         transform-origin: bottom left;
1715 }
1716
1717 div.portrait div.gallery div.first img {
1718         margin-top: -320px;
1719         margin-left: -240px;
1720 }
1721
1722 div.gallery {
1723         border-bottom: 1px solid #ccc;
1724 }
1725
1726 div.gallery span.gallery-legend {
1727         display: inline-block;
1728         position: absolute;
1729         top: 50%;
1730         margin-top: 250px;
1731         left: 0%;
1732         width: 100%;
1733         color: #000;
1734         z-index: 1000;
1735 }
1736
1737 div.portrait div.gallery span.gallery-legend {
1738         margin-top: 330px;
1739 }
1740
1741 @media screen and (max-width: 640px) {
1742         div.portrait div.gallery div.first img,
1743         div.gallery div.first img {
1744                 max-width: 80vw;
1745                 margin: 0;
1746                 max-height: 80vh;
1747                 left: 10vw;
1748                 top: 10vh;
1749                 display: inline-block;
1750         }
1751 }
1752
1753 ul.tags {
1754         padding-top: 1em;
1755         clear: both;
1756 }
1757
1758 div.topik.inline {
1759         clear: both;
1760         margin-top: 1em;
1761 }
1762
1763 #fiber-content div.topikcell a {
1764         text-decoration: none;
1765         height: 500px;
1766 }
1767
1768 #fiber-content div.topikcell .topik-large a {
1769         height: auto;
1770 }
1771
1772 div.topikcellcontent h5 {
1773         padding-top: 1ex;
1774 }
1775
1776 div.topikcellcontent.topik-large a {
1777         width: 100%;
1778         float: none;
1779         display: inline-block;
1780         text-align: left;
1781 }
1782
1783 div.topikcellcontent.topik-large img {
1784         float: left;
1785         margin-right: 1em;
1786 }
1787
1788 div.topikcellcontent a {
1789         margin-bottom: 2em;
1790         display: inline-block;
1791         text-align: left;
1792         width: 50%;
1793         box-sizing: border-box;
1794         padding-right: 2em;
1795         float: left;
1796 }
1797
1798 div.topikcellcontent img {
1799 }
1800
1801 div.topikcellcontent h2 {
1802         font-size: 3.5em;
1803 }
1804
1805 @media only screen and (min-width: 1250px) {
1806         div.topikcellcontent a {
1807                 display: inline-block;
1808                 text-align: left;
1809                 width: 50%;
1810                 float: left;
1811         }
1812 }
1813
1814 .program-week img.smooth {
1815         padding-bottom: 0;
1816 }
1817
1818 div#dialog-background {
1819         display: flex;
1820 }
1821 div#dialog-embed {
1822         position: relative;
1823         background: white;
1824         width: 50%;
1825         margin: auto;
1826         text-align: left;
1827         padding: 1ex;
1828 }
1829
1830 div#dialog-embed textarea {
1831         width: 100%;
1832         max-width: none;
1833 }
1834
1835 div#dialog-embed #close-button {
1836         position: absolute;
1837         right: 1ex;
1838 }
1839
1840 body#embed {
1841         min-height: auto !important;
1842         margin: 0;
1843         background: white;
1844 }
1845
1846 body#embed #Main {
1847         background: transparent;
1848 }
1849
1850 body#embed #Commons,
1851 body#embed #metaNav,
1852 body#embed #Footer,
1853 body#embed #userLog,
1854 body#embed #panikdb,
1855 body#embed #Player {
1856         display: none;
1857 }
1858
1859 body#embed #Changing {
1860         float: none;
1861         width: auto;
1862 }
1863
1864 body#embed #Main > .wrapper {
1865         padding: 0;
1866 }
1867
1868 body#embed .logo {
1869         padding-top: 4px;
1870 }
1871
1872 body#embed ul.custom {
1873         display: inline-block;
1874         width: calc(100% - 72px);
1875 }
1876
1877 body#embed ul.custom .soundfile-info {
1878         padding: 1ex;
1879 }
1880
1881 body#embed span.fragment-title {
1882         font-weight: normal;
1883 }
1884
1885 table.playlist {
1886         width: 90%;
1887 }
1888
1889 table.playlist td {
1890         padding: 0.5ex;
1891         text-align: left;
1892 }
1893
1894 table.playlist td.tracktime {
1895         width: 6ex;
1896         text-align: center;
1897 }
1898
1899 p.playlist-disclaimer {
1900         margin-top: 2em;
1901         max-width: 60ex;
1902         font-style: italic;
1903 }
1904
1905
1906 #main-topiks #fiber-nav li ul {
1907     padding-top: 0;
1908     padding-left: 2em;
1909 }
1910 #main-topiks #fiber-nav li ul li {
1911     padding-left: 0;
1912     font-size: 80%;
1913 }
1914
1915 #main-topiks #fiber-nav li ul li a {
1916     padding-left: 0;
1917 }
1918
1919 div.commands {
1920         display: flex;
1921         width: 90vw;
1922 }
1923
1924 @media screen and (min-width:760px){
1925         div.commands {
1926                 width: calc(90vw - 240px);
1927         }
1928 }
1929
1930 input#msg {
1931         flex-grow: 1;
1932 }
1933
1934 div.chat-area {
1935         max-width: 60em;
1936 }
1937
1938 #chat {
1939        margin-top: 1ex;
1940 }
1941
1942 #chat div.msg {
1943         position: relative;
1944         margin-bottom: 1ex;
1945         transition: opacity 1s ease;
1946 }
1947
1948 #chat div.msg.new {
1949         opacity: 0;
1950 }
1951
1952 #chat div.msg.msg-out span.content {
1953         font-size: 90%;
1954         color: #444;
1955 }
1956
1957 #chat span.from {
1958    display: inline-block;
1959    width: 10rem;
1960    overflow: hidden;
1961    text-overflow: ellipsis;
1962    color: #888;
1963    position: absolute;
1964 }
1965 #chat span.content {
1966   display: inline-block;
1967   padding-left: 11rem;
1968 }
1969
1970 #chat div.msg.info span.content {
1971         padding-left: 1rem;
1972         font-style: italic;
1973         color: #666;
1974 }
1975
1976 @media screen and (max-width: 760px) {
1977     #chat span.from {
1978         display: block;
1979         position: static;
1980         width: auto;
1981     }
1982     #chat span.content {
1983         display: block;
1984         padding-left: 2rem;
1985     }
1986 }
1987
1988 h1.top > span.chat.with-logo {
1989         position: relative;
1990         left: 140px;
1991         display: inline-block;
1992         max-width: calc(100% - 140px);
1993 }
1994
1995 div.top-logo {
1996         position: absolute;
1997         top: 30px;
1998 }
1999
2000 div.top-logo img {
2001         border: 2px solid black;
2002 }
2003
2004 @media screen and (max-width:760px){
2005         div.top-logo {
2006                 display: none;
2007         }
2008         h1.top > span.chat.with-logo {
2009                 position: static;
2010                 max-width: none;
2011         }
2012         div.topikcellcontent a {
2013                 width: auto;
2014         }
2015         #fiber-content div.topikcell a {
2016                 height: auto;
2017         }
2018 }
2019
2020 div#CurrentlyChatting {
2021         cursor: pointer;
2022         margin-top: 1em;
2023 }
2024
2025 div.description-emission-chat {
2026         margin-bottom: 2em;
2027 }
2028
2029 div.chatPart h3 {
2030         padding-top: 0;
2031 }
2032
2033 div#chat.moderation .msg-in span.from {
2034         cursor: pointer;
2035 }
2036
2037 div#chat.moderation .msg-in span.from:hover::after {
2038         padding-left: 1ex;
2039         font-family: FontAwesome;
2040         content: "\f056";
2041         font-size: 80%;
2042 }
2043
2044 div.programCell a.playlist {
2045         font-size: 80%;
2046 }
2047
2048 #bg-title {
2049         display: none;
2050         color: lighten($primary, 20);
2051         font-family: 'Reglo';
2052         text-transform: uppercase;
2053         line-height: 100%;
2054         font-size: 250px;
2055         font-size: 25vh;
2056         position: absolute;
2057         left: -260px;
2058         top: 48vh;
2059         z-index: 0;
2060         -webkit-user-select: none;
2061         -moz-user-select: none;
2062         -ms-user-select: none;
2063         user-select: none;
2064         cursor: default;
2065 }