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