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