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: hidden;
 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 .episode a,
1305 #fiber-content ul.list a {
1306         text-decoration: none;
1307 }
1308
1309 #fiber-content a:hover {
1310         text-decoration: none;
1311 }
1312
1313 .intro,
1314 .userContent,
1315 #fiber-content,
1316 .content,
1317 .content h5 {
1318         line-height: 120%;
1319 }
1320
1321 .userContent strong,
1322 #fiber-content strong {
1323         text-transform: none;
1324         font-family: "RegloBold";
1325         font-style: normal;
1326 }
1327
1328 .userContent em,
1329 #fiber-content em {
1330         font-family: inherit;
1331         font-style: italic;
1332 }
1333
1334 /**** SCREEN SIZE ADAPTATIONS ****/
1335     html #main{ font-size: 70%; }
1336 body { font-size: 18px;}
1337 @media (max-width: 300px){
1338     body #All{ font-size: 80%; }
1339 }
1340
1341 @media (min-width: 300px) and (max-width:800px){
1342     body #All{ font-size: 85%; }
1343 }
1344
1345 @media (min-width: 700px) and (max-width:1000px){
1346     body #All{ font-size: 90%; }
1347 }
1348
1349 @media (min-width: 1000px) {
1350     body #All{ font-size: 100%; }
1351 }
1352
1353 #subscribe-form {
1354   position: relative;
1355   margin-bottom: 2em;
1356   padding-bottom: 2em;
1357 }
1358
1359 #Home #subscribe-form {
1360   margin-bottom: 0;
1361 }
1362
1363 #subscribe-form ul.errorlist {
1364   position: absolute;
1365   bottom: -2em;
1366   text-align: center;
1367   display: block;
1368   width: 100%;
1369   padding: 0;
1370   list-style: none;
1371   color: #800;
1372 }
1373
1374 #subscribe-form input {
1375         width: 15em;
1376         max-width: none;
1377 }
1378
1379 #Nav div.search form {
1380   padding: 1em 0;
1381 }
1382
1383 div.episode.resume div.title {
1384         white-space: normal;
1385 }
1386
1387 #Home div.program.tabs {
1388         margin: 1em 0;
1389 }
1390
1391 nav#program li {
1392         display: block;
1393         margin: 0;
1394 }
1395
1396 #recent-emissions,
1397 #recent-news,
1398 #recent-sounds {
1399         margin-top: 2em;
1400 }
1401
1402 #recent-emissions h3,
1403 #recent-news h3,
1404 #recent-sounds h3 {
1405         font-size: 140%;
1406 }
1407
1408 #recent-emissions h3.sectionLabel {
1409         margin-bottom: 0;
1410 }
1411
1412 .episode.soundfile {
1413         padding: 0;
1414 }
1415
1416 .soundfile .smooth {
1417         color: #666;
1418         opacity: 1.0;
1419         font-size: 80%;
1420 }
1421
1422
1423 .soundfile p.date {
1424         margin: 0;
1425 }
1426
1427 .frontpage.soundfile .audio {
1428         font-size: 80%;
1429         padding-top: 0.5ex;
1430         padding-bottom: 1ex;
1431 }
1432
1433 #panikdb {
1434         position: absolute;
1435         top: -20px;
1436         right: 0px;
1437         background: white;
1438         color: #888;
1439         padding: 5px 10px;
1440         border: 1px solid #888;
1441         border-width: 1px 1px 0 1px;
1442         -webkit-transform-origin: bottom right;
1443         -webkit-transform: rotate(270deg);
1444         -moz-transform-origin: bottom right;
1445         -moz-transform: rotate(270deg);
1446         transform-origin: bottom right;
1447         transform: rotate(270deg);
1448 }
1449
1450 img.logo.right {
1451         margin-bottom: 1em;
1452 }
1453
1454 .soundfile .special,
1455 .newsitem .special {
1456         margin-bottom: 2em;
1457 }
1458
1459 .newsitem .special .smooth {
1460         padding-top: 5px;
1461 }
1462
1463 /* USER CONTENT */
1464
1465 div.userContent ul {
1466         margin: 1em 0;
1467 }
1468
1469 div.userContent h1,
1470 div.userContent h2,
1471 div.userContent h3,
1472 div.userContent h4 {
1473         text-transform: none;
1474         font-family: "Reglo";
1475         font-weight: normal;
1476 }
1477
1478 div.userContent h1 { font-size: 2em; }
1479 div.userContent h2 { font-size: 1.8em; }
1480 div.userContent h3 { font-size: 1.5em; }
1481 div.userContent h4 { font-size: 1.5em; }
1482 div.userContent a { text-decoration: underline; }
1483
1484 div.userContent a.tag { text-decoration: none; }
1485
1486 @media screen and (max-width: 760px) {
1487         #streamSymbol{
1488                 top: 0;
1489         }
1490         #MainHeader {
1491                 margin: 0 auto;
1492         }
1493         #All #backgroundBox h1.top {
1494                 width: 94%;
1495         }
1496
1497         #Player.withoutPlaylist #player-container #audioPlayer{
1498             margin:auto;
1499             width:100%;
1500         }
1501         #Player.withoutPlaylist #player-container #audioPlayer #Live{
1502             font-size:150%;
1503         }
1504
1505
1506         #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1507         #player-container{
1508                 background: $primary;
1509         }
1510         #player-container * {color: white !important; }
1511         #player-container{
1512                 z-index:500;
1513                 position:fixed;
1514                 width:100% !important;
1515                 /*top:2em;*/
1516                 font-size:80%;
1517                 bottom:0em;
1518                 border-bottom:none;
1519         }
1520         #Player.withPlaylist #player-container #audioPlayer{
1521                 float:left;
1522                 width:50%;
1523                 border-right:2px solid black;
1524         }
1525         #Player.withPlaylist #player-container #Playlist{
1526                 float:right;
1527                 width:49%;
1528                 text-align:left;
1529         }
1530         #player-container #myPlaylist {
1531                 padding: 0;
1532         }
1533
1534         #player-container #myPlaylist a {
1535                 white-space: nowrap;
1536         }
1537
1538         #player-container #Playlist ol{
1539                 margin-left: 30px;
1540         }
1541 }
1542
1543 div.emission-logo {
1544         margin-left: 1em;
1545 }
1546
1547 div.extra-soundfiles {
1548         clear: both;
1549 }
1550
1551 h3.episode-subtitle {
1552         font-size: 2.5em;
1553 }
1554
1555 .waveform {
1556         display: none;
1557         position: relative;
1558 }
1559
1560 .waveform span {
1561         background: #3A3A3A;
1562         background: rgba(10, 10, 10, 0.8);
1563         display: inline-block;
1564         width: 0.50%;
1565 }
1566
1567 .waveform span.done {
1568         background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
1569 }
1570
1571 .waveform span.done.current + span {
1572         background: $primary;
1573 }
1574
1575 .waveform i.duration {
1576         position: absolute;
1577         right: 4px;
1578         bottom: 4px;
1579         color: $primary;
1580         text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1581         font-style: normal;
1582         font-weight: bold;
1583 }
1584
1585 div.fragment-sound {
1586         position: relative;
1587 }
1588
1589 div.soundcell div.logo {
1590         vertical-align: top;
1591 }
1592
1593 div.fragment-sound {
1594 }
1595
1596 div.extra-soundfiles div.fragment-sound {
1597         margin-top: 5px;
1598 }
1599
1600 div.extra-soundfiles div.fragment-name {
1601         font-style: italic;
1602         position: relative;
1603         top: 1ex;
1604         max-width: 70%;
1605 }
1606
1607 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1608 }
1609 div.extra-soundfiles ul li div.fragment-sound div.audio {
1610         bottom: 0;
1611 }
1612
1613 #fiber-content div.extra-soundfiles strong {
1614         text-transform: uppercase;
1615
1616 }
1617
1618 .nonstop-track-title, .nonstop-track-artist {
1619         font-size: 80%;
1620 }
1621
1622 .soundfile-info {
1623         padding-right: 75px;
1624 }
1625
1626 #fiber-content div.extra-soundfiles .soundfile-info strong {
1627         padding-right: 0;
1628 }
1629
1630 #fiber-content div.extra-soundfiles .soundfile-info a {
1631         text-decoration: none;
1632 }
1633
1634 #fiber-content div.extra-soundfiles {
1635         margin: 1em 0;
1636 }
1637
1638 div.extra-soundfiles div.logo {
1639         display: inline-block;
1640 }
1641
1642 div#fiber-content div.extra-soundfiles ul.list {
1643         display: inline-block;
1644         width: 88%;
1645         width: calc(100% - 72px);
1646 }
1647
1648 div.download-links {
1649         position: absolute;
1650         z-index: 1000;
1651         text-align: right;
1652 }
1653
1654 div.hidden-download-links {
1655         display: none !important;
1656 }
1657
1658 div.episode-detail div.sound div.download-links {
1659         display: inline-block;
1660         padding-top: 1ex;
1661         padding-left: 1ex;
1662 }
1663
1664 div.extra-soundfiles div.download-links {
1665         background: white;
1666 }
1667
1668 h1.top a.dimmed {
1669         opacity: 0.7;
1670 }
1671
1672 div#agenda div.content-inline {
1673         margin-bottom: 1em;
1674 }
1675
1676 div.previous-and-next-months {
1677         margin-top: 1em;
1678 }
1679
1680 div.publication-date.date.smooth {
1681         font-size: 80%;
1682 }
1683
1684 #All h1.top.fullwidth {
1685         width: 150%;
1686 }
1687
1688 div.gallery img {
1689         padding: 2px;
1690         background: white;
1691         border: 1px solid #333;
1692 }
1693
1694 div#dialog-background,
1695 div.gallery div.first {
1696         position: fixed;
1697         top: 0;
1698         left: 0;
1699         width: 100%;
1700         height: 100%;
1701         background: rgba(0, 0, 0, 0.9);
1702         z-index: 1000;
1703         text-align: center;
1704 }
1705
1706 div.gallery div.first img {
1707         padding: 5px;
1708         padding-bottom: 25px;
1709         margin-top: -240px;
1710         margin-left: -320px;
1711         position: absolute;
1712         top: 50%;
1713         left: 50%;
1714         transition: all 0.5s ease;
1715         transform-origin: bottom left;
1716 }
1717
1718 div.portrait div.gallery div.first img {
1719         margin-top: -320px;
1720         margin-left: -240px;
1721 }
1722
1723 div.gallery {
1724         border-bottom: 1px solid #ccc;
1725 }
1726
1727 div.gallery span.gallery-legend {
1728         display: inline-block;
1729         position: absolute;
1730         top: 50%;
1731         margin-top: 250px;
1732         left: 0%;
1733         width: 100%;
1734         color: #000;
1735         z-index: 1000;
1736 }
1737
1738 div.portrait div.gallery span.gallery-legend {
1739         margin-top: 330px;
1740 }
1741
1742 @media screen and (max-width: 640px) {
1743         div.portrait div.gallery div.first img,
1744         div.gallery div.first img {
1745                 max-width: 80vw;
1746                 margin: 0;
1747                 max-height: 80vh;
1748                 left: 10vw;
1749                 top: 10vh;
1750                 display: inline-block;
1751         }
1752 }
1753
1754 ul.tags {
1755         padding-top: 1em;
1756         clear: both;
1757 }
1758
1759 div.topik.inline {
1760         clear: both;
1761         margin-top: 1em;
1762 }
1763
1764 #fiber-content div.topikcell a {
1765         text-decoration: none;
1766         height: 500px;
1767 }
1768
1769 #fiber-content div.topikcell .topik-large a {
1770         height: auto;
1771 }
1772
1773 div.topikcellcontent h5 {
1774         padding-top: 1ex;
1775 }
1776
1777 div.topikcellcontent.topik-large a {
1778         width: 100%;
1779         float: none;
1780         display: inline-block;
1781         text-align: left;
1782 }
1783
1784 div.topikcellcontent.topik-large img {
1785         width: 100%;
1786         display: block;
1787 }
1788
1789 div.topikcellcontent.topik-large a div {
1790         @media screen and (min-width: 760px) {
1791                 display: flex;
1792         }
1793         margin-top: 1ex;
1794         h2 {
1795                 margin-top: 0;
1796                 white-space: nowrap;
1797                 margin-right: 1ex;
1798                 @media screen and (max-width: 760px) {
1799                         padding-bottom: 0;
1800                 }
1801         }
1802 }
1803
1804 div.topikcellcontent a {
1805         margin-bottom: 2em;
1806         display: inline-block;
1807         text-align: left;
1808         width: 50%;
1809         box-sizing: border-box;
1810         padding-right: 2em;
1811         float: left;
1812 }
1813
1814 div.topikcellcontent img {
1815 }
1816
1817 div.topikcellcontent h2 {
1818         font-size: 3.5em;
1819 }
1820
1821 @media only screen and (min-width: 1250px) {
1822         div.topikcellcontent a {
1823                 display: inline-block;
1824                 text-align: left;
1825                 width: 50%;
1826                 float: left;
1827         }
1828 }
1829
1830 .program-week img.smooth {
1831         padding-bottom: 0;
1832 }
1833
1834 div#dialog-background {
1835         display: flex;
1836 }
1837 div#dialog-embed {
1838         position: relative;
1839         background: white;
1840         width: 50%;
1841         margin: auto;
1842         text-align: left;
1843         padding: 1ex;
1844 }
1845
1846 div#dialog-embed textarea {
1847         width: 100%;
1848         max-width: none;
1849 }
1850
1851 div#dialog-embed #close-button {
1852         position: absolute;
1853         right: 1ex;
1854 }
1855
1856 body#embed {
1857         min-height: auto !important;
1858         margin: 0;
1859         background: white;
1860 }
1861
1862 body#embed #Main {
1863         background: transparent;
1864 }
1865
1866 body#embed #Commons,
1867 body#embed #metaNav,
1868 body#embed #Footer,
1869 body#embed #userLog,
1870 body#embed #panikdb,
1871 body#embed #Player {
1872         display: none;
1873 }
1874
1875 body#embed #Changing {
1876         float: none;
1877         width: auto;
1878 }
1879
1880 body#embed #Main > .wrapper {
1881         padding: 0;
1882 }
1883
1884 body#embed .logo {
1885         padding-top: 4px;
1886 }
1887
1888 body#embed ul.custom {
1889         display: inline-block;
1890         width: calc(100% - 72px);
1891 }
1892
1893 body#embed ul.custom .soundfile-info {
1894         padding: 1ex;
1895 }
1896
1897 body#embed span.fragment-title {
1898         font-weight: normal;
1899 }
1900
1901 table.playlist {
1902         width: 90%;
1903 }
1904
1905 table.playlist td {
1906         padding: 0.5ex;
1907         text-align: left;
1908 }
1909
1910 table.playlist td.tracktime {
1911         width: 6ex;
1912         text-align: center;
1913 }
1914
1915 p.playlist-disclaimer {
1916         margin-top: 2em;
1917         max-width: 60ex;
1918         font-style: italic;
1919 }
1920
1921
1922 #main-topiks #fiber-nav li ul {
1923     padding-top: 0;
1924     padding-left: 2em;
1925 }
1926 #main-topiks #fiber-nav li ul li {
1927     padding-left: 0;
1928     font-size: 80%;
1929 }
1930
1931 #main-topiks #fiber-nav li ul li a {
1932     padding-left: 0;
1933 }
1934
1935 div.commands {
1936         display: flex;
1937         width: 90vw;
1938 }
1939
1940 @media screen and (min-width:760px){
1941         div.commands {
1942                 width: calc(90vw - 240px);
1943         }
1944 }
1945
1946 input#msg {
1947         flex-grow: 1;
1948 }
1949
1950 div.chat-area {
1951         max-width: 60em;
1952 }
1953
1954 #chat {
1955        margin-top: 1ex;
1956 }
1957
1958 #chat div.msg {
1959         position: relative;
1960         margin-bottom: 1ex;
1961         transition: opacity 1s ease;
1962 }
1963
1964 #chat div.msg.new {
1965         opacity: 0;
1966 }
1967
1968 #chat div.msg.msg-out span.content {
1969         font-size: 90%;
1970         color: #444;
1971 }
1972
1973 #chat span.from {
1974    display: inline-block;
1975    width: 10rem;
1976    overflow: hidden;
1977    text-overflow: ellipsis;
1978    color: #888;
1979    position: absolute;
1980 }
1981 #chat span.content {
1982   display: inline-block;
1983   padding-left: 11rem;
1984 }
1985
1986 #chat div.msg.info span.content {
1987         padding-left: 1rem;
1988         font-style: italic;
1989         color: #666;
1990 }
1991
1992 @media screen and (max-width: 760px) {
1993     #chat span.from {
1994         display: block;
1995         position: static;
1996         width: auto;
1997     }
1998     #chat span.content {
1999         display: block;
2000         padding-left: 2rem;
2001     }
2002 }
2003
2004 h1.top > span.chat.with-logo {
2005         position: relative;
2006         left: 140px;
2007         display: inline-block;
2008         max-width: calc(100% - 140px);
2009 }
2010
2011 div.top-logo {
2012         position: absolute;
2013         top: 30px;
2014 }
2015
2016 div.top-logo img {
2017         border: 2px solid black;
2018 }
2019
2020 @media screen and (max-width:760px){
2021         div.top-logo {
2022                 display: none;
2023         }
2024         h1.top > span.chat.with-logo {
2025                 position: static;
2026                 max-width: none;
2027         }
2028         div.topikcellcontent a {
2029                 width: auto;
2030         }
2031         #fiber-content div.topikcell a {
2032                 height: auto;
2033         }
2034 }
2035
2036 div#CurrentlyChatting {
2037         cursor: pointer;
2038         margin-top: 1em;
2039 }
2040
2041 div.description-emission-chat {
2042         margin-bottom: 2em;
2043 }
2044
2045 div.chatPart h3 {
2046         padding-top: 0;
2047 }
2048
2049 div#chat.moderation .msg-in span.from {
2050         cursor: pointer;
2051 }
2052
2053 div#chat.moderation .msg-in span.from:hover::after {
2054         padding-left: 1ex;
2055         font-family: FontAwesome;
2056         content: "\f056";
2057         font-size: 80%;
2058 }
2059
2060 div.programCell a.playlist {
2061         font-size: 80%;
2062 }
2063
2064 #bg-title {
2065         display: none;
2066         color: lighten($primary, 20);
2067         font-family: 'Reglo';
2068         text-transform: uppercase;
2069         line-height: 100%;
2070         font-size: 250px;
2071         font-size: 25vh;
2072         position: absolute;
2073         left: -260px;
2074         top: 48vh;
2075         z-index: 0;
2076         -webkit-user-select: none;
2077         -moz-user-select: none;
2078         -ms-user-select: none;
2079         user-select: none;
2080         cursor: default;
2081 }