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