panikweb_templates/static/css/_specifics.scss

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