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 #specialHome h2,
 510 #Nav h2{
 511         margin:0;
 512         padding:0;
 513 }
 514 #Nav nav ul{
 515         margin:1em 0 1em 0;
 516 }
 517
 518 #Nav li {
 519         padding-right: 1em;
 520 }
 521
 522 #Nav li a{
 523         display: inline-block;
 524 }
 525 #Nav nav ul.distributed li {padding: 0;}
 526
 527 #fiber-nav{
 528     font-size:150%;
 529         border-width:0 0 2px 0;border-style:solid;
 530 }
 531 #fiber-nav li, #fiber-nav li a{
 532         display:block;
 533 }
 534 #fiber-nav ul{
 535         padding:0.5em;
 536 }
 537 #fiber-nav li a{
 538         padding:0.5em;
 539 }
 540 #fiber-nav .selected > a,
 541 #fiber-nav .current {
 542     font-weight:bold;
 543 }
 544
 545 /****************************************************/
 546 /**** PLAYER ****/
 547 /****************************************************/
 548 /*#Home #player{   float: left; } */
 549
 550 #player-container,
 551    #player-container *{border-color:$primary !important;color:$primary !important;}
 552
 553 #player-container .metas, #player-container img{border-color:#fff;}
 554 #player-container .padded{padding:0.3em;}
 555
 556 #player-container button,#player-container a{
 557 }
 558 #player-container .metas{
 559     float:right;
 560 }
 561 #DirectStreamPanikControler {
 562         display:inline !important;
 563 }
 564 #chatSymbol,
 565 #streamSymbol{
 566         font-size:3em;
 567         float:left;
 568         margin-right:5px;
 569         position: relative;
 570         z-index: 10;
 571         top: -6px;
 572 }
 573 #CurrentlyPlaying{
 574         padding:0 0 0 0;
 575 }
 576
 577 #Player.withPlaylist #player-container #Playlist{
 578         border-top:2px solid black;
 579 }
 580 #Player.withPlaylist #player-container #Playlist{
 581         margin-top: 1em;
 582         padding-top: 1em;
 583 }
 584
 585 #player-container #myPlaylist {
 586         clear: both;
 587         padding: 1em 0 0 0;
 588         height: auto;
 589 }
 590
 591 #player-container #myPlaylist a {
 592         margin-right: 30px;
 593         white-space: normal;
 594         padding-bottom: 1ex;
 595 }
 596
 597 #player-container.minimized{
 598         width:auto;
 599         border-width:0px 2px 2px 0 !important;
 600         border-bottom-right-radius:1em;
 601         -moz-border-bottom-right-radius:1em;
 602         -webkit-border-bottom-right-radius:1em;
 603 }
 604 #player-container.minimized #player{
 605         padding:0;
 606 }
 607
 608 /*Playlist*/
 609
 610 #Playlist #playlistLabel{
 611         float:right;
 612
 613 }
 614 #Playlist .playListControls{
 615 }
 616 #Playlist .playListControls button{
 617         margin-right:0.5em;
 618         display:inline-block;
 619 }
 620 #Playlist .playListControls .playPause{
 621         font-size:3em;
 622         margin-right:5px;
 623         float:left;
 624         position: relative;
 625         top: -8px;
 626 }
 627
 628 #Playlist .playing .icon-pause{
 629    -webkit-animation: loading 1s infinite linear;
 630    -moz-animation: loading 1s infinite linear;
 631    -o-animation: loading 1s infinite linear;
 632    animation: loading 1s infinite linear;
 633 }
 634 #Playlist .playlistControls button,#Playlist .playlistControls .button{
 635         margin:0 0.1em 0 0.1em;
 636 }
 637 #Playlist li{
 638         clear:right;
 639 }
 640 #Playlist .soundControls button{}
 641
 642 #player-container #Playlist ol{
 643         clear:right;
 644         padding:0;
 645         margin-left: 50px;
 646 }
 647 #player-container #Playlist ol li{
 648         line-height:1.3em;
 649         padding:0;
 650         margin:0;
 651 }
 652 #Playlist ol li .soundControls{
 653         line-height:1.5em;
 654         height:1.5em;
 655         clear:right;
 656         float:right;
 657 }
 658 #Playlist ol li .title{
 659         margin-right:70px;
 660         display:block;
 661         white-space: nowrap;
 662         text-overflow: ellipsis;
 663         overflow: hidden;
 664 }
 665 #player .active{
 666         font-weight:bold;
 667 }
 668 /*limit height of playlist*/
 669 #player #CurrentlyPlaying,
 670  #player-container #Playlist ol{
 671         opacity:0.9;
 672         padding-top:0.2em;
 673         height:auto;
 674         overflow: hidden;
 675 }
 676
 677 @media screen and (max-width: $mobile-limit) {
 678         #backgroundBox {
 679                 background-position: center 30px;
 680                 background-size: 130px;
 681         }
 682         #All h1.top#radio {
 683                 height: 80px;
 684         }
 685         #Player{
 686         margin-top:1em;
 687     }
 688         #Player.withPlaylist #player-container #audioPlayer,
 689           #Player.withPlaylist #player-container #audioPlayer,
 690            #Player.withPlaylist #player-container #Playlist{
 691                 float:none !important;
 692                 width:auto !important;
 693         border-right:none !important;
 694                 max-width:auto !important;
 695         }
 696
 697         #player.on-chat-page {
 698                 display: none;
 699         }
 700
 701         div.chat-page .rightPart {
 702                 font-size: 95%;
 703                 margin-top: 4em;
 704                 padding-top: 1em;
 705                 border-top: 1px solid #777;
 706         }
 707
 708 }
 709
 710 /****************************************************/
 711 /**** #Changing #Footer ... ****/
 712 /****************************************************/
 713 #Changing{
 714         display: flex;
 715         flex-direction: column;
 716         min-height: 97vh;
 717 }
 718
 719 #Main{
 720         flex-grow: 1;
 721         color: $text-color;
 722         position: relative;
 723         z-index: 1;
 724 }
 725 #specialHome {
 726 }
 727 #Main >.wrapper{
 728         padding-bottom:2em;
 729 }
 730 #Home #Main{
 731         min-height:0;
 732 }
 733 #Changing a:hover,#Changing button:hover {
 734         opacity:0.6;
 735         text-decoration:none;
 736 }
 737 /* GLOBAL SITE NAV */
 738 #userLog{
 739         z-index:2000;
 740         position: fixed;
 741         bottom: 0px;
 742         right: 0px;
 743 }
 744 #userLog .log{
 745         margin:0.3em;
 746         -moz-box-shadow: 0px 0px 3px #000;
 747         -webkit-box-shadow: 0px 0px 3px #000;
 748         box-shadow: 0px 0px 3px #000;
 749         border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
 750         text-align:center;
 751         padding: 0.3em;
 752         font-size:0.9em;
 753         color:black;
 754         background-color:$primary;
 755         border: 2px solid black;
 756         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);
 757 }
 758 #userLog .log.info{
 759         background-color:grey;
 760         color:white;
 761 }
 762 #userLog .log.ok{
 763         background-color:green;
 764         border-color:black;
 765         color:white;
 766 }
 767 #userLog .log.error{
 768         background-color:$primary;
 769         border-color:yellow;
 770 }
 771 #main {}
 772 #mainLegend{
 773         width:30%;
 774         text-align:right;
 775         float:right;
 776         padding:1em;
 777 }
 778
 779 #Footer{
 780         border-top:2px solid #333;
 781         padding-top: 2em;
 782         padding-bottom: 80px;
 783         position: relative;
 784         z-index: 3;
 785 }
 786
 787 #Footer ul {
 788 }
 789
 790 #Footer ul li {
 791         padding-right: 2em;
 792 }
 793
 794 #Footer a:hover {
 795         opacity:0.6;
 796 }
 797
 798
 799 /****************************************************/
 800 .inline .link{display:block;padding:1em;}
 801 /**** Liste   ****/
 802 /**** EMISSIONS ****/
 803 #Emission .emission-detail .title{}
 804 /*
 805 */
 806 #Emission-tabs-menu .sub{
 807         margin-bottom:1em;
 808 }
 809 /**** Detail    ****/
 810 .emission-detail .metas{
 811         line-height:1.5em;
 812         float: left;
 813         width: 49%;
 814         margin-top: 0;
 815 }
 816
 817 .emission-detail h4.subtitle {
 818         margin-top: 1em;
 819         font-weight: normal;
 820         text-transform: none;
 821         float: left;
 822 }
 823
 824 .emission-detail ul.schedule {
 825         margin-top: 0;
 826         margin-bottom: 1em;
 827  }
 828
 829 .emission-detail ul.schedule .weekdiff {
 830         font-size: 80%;
 831 }
 832
 833 .emission-detail article {
 834         clear: both;
 835 }
 836
 837 .emission-detail .logo{
 838         float:right;
 839         width: 50%;
 840         margin-bottom: 1ex;
 841 }
 842 @media screen and (max-width: 300px) {
 843         .emission-detail .metas {
 844                 float: none;
 845                 width: auto;
 846                 margin: 0;
 847         }
 848         .emission-detail .logo{max-width:100%;}
 849 }
 850
 851 .mainHeader {
 852         overflow: hidden;
 853         margin-top: 0;
 854         margin-bottom:1.5em;
 855         margin-left: 280px;
 856 }
 857
 858 .emission .contacts {
 859         clear: both;
 860 }
 861
 862 /**** Inline    ****/
 863 .emission.inline, .emission.resume {
 864         padding:1em 0 1em 0;
 865 }
 866
 867 .emission.inline div.date {
 868         min-height: 3em;
 869         text-align: center;
 870         display:inline-block;
 871         float:left;
 872         margin-right:1em;
 873 }
 874 .emission .archived {
 875         opacity:0.6;
 876 }
 877
 878 .emission .link .description {
 879         margin: 0px 0 5px 0;
 880 }
 881
 882
 883 /**** EPISODE ****/
 884 /**** Detail  ****/
 885
 886 .episode .tag{
 887 }
 888 .episode.resume, .episode.inline{
 889         padding:1em 0.5em 1em;
 890 }
 891 .episode.inline .dateBloc, .episode.resume .dateBloc{
 892         float:left;
 893 }
 894 .episode.resume img {
 895         border: 2px solid black;
 896 }
 897
 898 .episode.resume .title{
 899         margin-bottom:0.5em;
 900 }
 901 .episode.resume .logo{
 902         float: right;
 903 }
 904 .topik.inline .logo,
 905 .episode.inline .logo {
 906         min-height: 50px;
 907         float: left;
 908         margin-right: 1em;
 909 }
 910 .episode.resume .sound{
 911         float:right;
 912         margin:0 0 0.5em 0.5em;
 913 }
 914 .episode.inline .sound.right{
 915         text-align:center;
 916         font-size:70%;
 917         position: relative;
 918         z-index: 10;
 919 }
 920 .episode.inline .sound.right button{
 921     font-size:1.5em;
 922         display:inline;
 923         text-align:center;
 924         padding-bottom:0.05em;
 925 }
 926 .episode.resume .sound.right .icon-download{
 927         text-align:center;
 928 }
 929 .episode.resume .sound.right .icon-download{
 930         display:block;
 931 }
 932
 933 .big.icon-pause,
 934 .big.icon-stop,
 935 .big.icon-share {
 936         display: inline-block;
 937         vertical-align: middle;
 938 }
 939
 940 .episode.detail .logo.right{
 941         max-width:50%;
 942 }
 943
 944 .episode.resume .date .day, .emission-detail .date .day {
 945 }
 946
 947 .episode.resume .content {
 948         padding-left: 5em;
 949 }
 950 .episode.resume .content .title {
 951 }
 952
 953 .episode.resume .logo {
 954         margin:0 0 1em;
 955         max-width:20%;
 956 }
 957 .episode.inline .date{
 958         font-size:80%;
 959 }
 960
 961 #Emission-tabs-menu .emissions-newsitems {
 962         margin-bottom: 2em;
 963 }
 964
 965 #Emission-tabs-menu .emissions-newsitems ul.list li {
 966         border: 0;
 967 }
 968
 969 #Emission-tabs-menu .futur-episodes h5,
 970 #Emission-tabs-menu .recent-episodes h5 {
 971         font-size: 1.2em;
 972 }
 973
 974 #Emission-tabs-menu #search-form {
 975         margin-bottom: 1em;
 976 }
 977
 978 div.extra-soundfiles h3 {
 979         margin-top: 1em;
 980         font-size: 2.5em;
 981 }
 982
 983 div.extra-soundfiles ul li {
 984         position: relative;
 985 }
 986
 987 div.extra-soundfiles ul li div.audio {
 988         display: inline;
 989         top: 5px;
 990         right: 0;
 991         position: absolute;
 992         font-size: 60%;
 993 }
 994
 995 div.extra-soundfiles ul strong {
 996         padding-right: 3em;
 997 }
 998
 999 @media screen and (max-width: 400px) {
1000         .episode .dateBloc{
1001                 width:4em;
1002                 font-size:80%
1003         }
1004
1005         .episode.resume .content {
1006                 padding-left: 4em;
1007         }
1008 }
1009
1010 /****************************************************/
1011 /**** News ****/
1012
1013 #newsRoll {
1014         max-width: 500px;
1015 }
1016
1017 #newsRoll li {
1018         background: white;
1019 }
1020
1021 .newsRoll .title{
1022         background:black;
1023         color:white;
1024         bottom:0px;
1025         opacity:0.9;
1026     width:100%;
1027         text-align: left;
1028         position: absolute;
1029         left: 0;
1030 }
1031 .newsRoll .title div{
1032         padding: 1em;
1033 }
1034 .newsRoll a, .newsRoll button img{
1035     border: 1px solid $secondary;
1036 }
1037
1038 .newsRoll .by3 button {
1039         width: 100%;
1040 }
1041
1042 .soundfiles .special a,
1043 .news .special a {
1044         position: relative;
1045 }
1046
1047 .special .labels .item,
1048 .newsRoll .labels .item{
1049         display:block;
1050         background: $secondary;
1051         color:white;
1052         margin:0.1em;
1053         font-size:0.9em;
1054         padding:0.3em;
1055 }
1056 .newsList .current a{
1057     opacity:0.5;
1058 }
1059 /****************************************************/
1060 .list.news li {
1061 }
1062
1063 .soundfiles ul.custom li a,
1064 .news ul.custom li a { max-width: 98%; }
1065 .news li.item a {padding:1em;}
1066
1067 .logo img{
1068         display:block;
1069         border-style:solid;
1070         border-width: 1px;
1071 }
1072 ul.newsSpecial{
1073         border-bottom:3px solid #ccc;
1074 }
1075 @media only screen and (max-width: 970px) {
1076         .columns {column-count: 1;      -webkit-column-count: 1;        -moz-column-count: 1;}
1077 }
1078
1079
1080 /****************************************************/
1081 /**** Home & ****/
1082 /****************************************************/
1083
1084 #Home #Nav .wrapper{
1085         max-width:auto !important;
1086         width:auto !important;
1087 }
1088
1089 /*
1090 @media screen and (max-width:800px){
1091         #Home .newsRoll .logo{
1092                 max-width:100px;
1093         }
1094 }
1095 @media screen and (max-width:600px){
1096         #Home .newsRoll .logo{
1097                 max-width:50px;
1098         }
1099 }
1100 */
1101
1102 /****************************************************/
1103 /**** PROGRAM ****/
1104 /****************************************************/
1105
1106 .program.tabs nav ul li{
1107         display:table-cell;
1108         width:14%;
1109         text-align:center;
1110 }
1111
1112 .program.tabs nav ul li.week-arrow {
1113         width: 1%;
1114         padding-bottom: 5px;
1115 }
1116
1117 .program ul .dateBloc {
1118         float:left;
1119         padding-top:1em;
1120 }
1121 .program ul .schedule {
1122         margin-left:5em;
1123 }
1124 .program .nonstop {
1125         text-align:left;
1126 }
1127 .program-week .programDate{
1128         float:left;
1129         width:3em;
1130 }
1131 .program-week .programCell{
1132         margin-left:3.5em;
1133 }
1134 .program-week .nonStop .programDate{
1135         visibility:hidden;
1136 }
1137 .program-week .nonStop .programCell{
1138         font-size:0.9em;
1139         padding-left:50%;
1140         text-align:right;
1141 }
1142 .program-week a.nonstop{
1143         font-size:0.9em;
1144         margin:0.1em;
1145 }
1146 .program-week .inline,.program-week .resume{padding:0;}
1147 .program-week .description{}
1148
1149 .program-week .title {
1150         color: black;
1151         display: inline;
1152 }
1153
1154 .program-week .smooth {
1155         color: #666;
1156         opacity: 1.0;
1157         font-size: 80%;
1158         padding-bottom: 8px;
1159 }
1160
1161 .program-week .emission h5,
1162 .program-week .smooth .title {
1163         color: $text-color;
1164 }
1165
1166 .program-week .description {
1167         color: black;
1168         font-size: 90%;
1169 }
1170
1171 .program-week .programCell:hover {
1172         opacity: 0.5;
1173 }
1174
1175 #Changing .program-week .programCell a {
1176         opacity: 1.0;
1177 }
1178
1179 #Changing .program-week .programCell .smooth a {
1180         opacity: 0.5;
1181 }
1182
1183 #Changing .program-week .programCell .smooth h5 a {
1184         opacity: 1.0;
1185 }
1186
1187
1188 /****************************************************/
1189 /**** SEARCH ****/
1190 /****************************************************/
1191
1192 .search li.previous-page {
1193   margin-bottom: 2ex;
1194   text-align: left;
1195   margin-left: 0ex;
1196   font-style: italic;
1197 }
1198
1199 .search li.next-page {
1200   margin-top: 2ex;
1201   text-align: right;
1202   margin-right: 0;
1203   font-style: italic;
1204 }
1205
1206 .search-filters {
1207   text-align: justify;
1208 }
1209
1210
1211 /****************************************************/
1212 /**** GRILLE ****/
1213 /****************************************************/
1214
1215 #grid #Main {}
1216 #grid th{
1217         color:#000;
1218 }
1219 #grid .heure {
1220         height:50px !important;
1221 }
1222 #grid .heure.vertical {
1223         padding:1.5em 0;
1224 }
1225 #grid .day {
1226         padding:1em 0 1em 0;
1227 }
1228 #grid .nonstop {
1229 }
1230 #grid .item{
1231         padding:0.5em 0.2em 0.5em 0.2em;
1232 }
1233 #grid .cell hr {
1234         border:1px dotted #ddd;
1235         margin:0.3em;
1236 }
1237 #grid .time-label{
1238         margin-top:0.5em;
1239 }
1240
1241 #grid .highlighted,#grid .highlighted  *{
1242         background:#333 !important;
1243         color:white !important;
1244 }
1245
1246 #grid .highlighted,#grid .highlighted  *{
1247         background:#333 !important;
1248         color:white !important;
1249 }
1250 #Emissions li.item.normal{
1251         display:none;
1252 }
1253 #Emissions li.item.hightlighted{
1254         display:block !important;
1255 }
1256
1257 #gridNav {
1258         margin-top: 1rem;
1259 }
1260 #gridNav span.category {
1261         text-transform: none;
1262 }
1263
1264
1265 /**** Navigation for static pages ****/
1266
1267 #fiber-nav {
1268         font-size: 150%;
1269 }
1270 #fiber-nav li, #fiber-nav li a {
1271         display: block;
1272 }
1273 #fiber-nav ul{
1274         padding: 0.5em;
1275 }
1276 #fiber-nav li a{
1277         padding:0.5em;
1278 }
1279
1280 #fiber-content a {
1281         text-decoration: underline;
1282 }
1283
1284 #fiber-content .episode a,
1285 #fiber-content ul.list a {
1286         text-decoration: none;
1287 }
1288
1289 #fiber-content a:hover {
1290         text-decoration: none;
1291 }
1292
1293 .intro,
1294 .userContent,
1295 #fiber-content,
1296 .content,
1297 .content h5 {
1298         line-height: 120%;
1299 }
1300
1301 .userContent strong,
1302 #fiber-content strong {
1303         text-transform: none;
1304         font-style: normal;
1305 }
1306
1307 .userContent em,
1308 #fiber-content em {
1309         font-family: inherit;
1310         font-style: italic;
1311 }
1312
1313 /**** SCREEN SIZE ADAPTATIONS ****/
1314     html #main{ font-size: 70%; }
1315 body { font-size: 18px;}
1316 @media (max-width: 300px){
1317     body #All{ font-size: 80%; }
1318 }
1319
1320 @media (min-width: 300px) and (max-width:800px){
1321     body #All{ font-size: 85%; }
1322 }
1323
1324 @media (min-width: 700px) and (max-width:1000px){
1325     body #All{ font-size: 90%; }
1326 }
1327
1328 @media (min-width: 1000px) {
1329     body #All{ font-size: 100%; }
1330 }
1331
1332 #subscribe-form {
1333   position: relative;
1334   margin-bottom: 2em;
1335   padding-bottom: 2em;
1336 }
1337
1338 #Home #subscribe-form {
1339   margin-bottom: 0;
1340 }
1341
1342 #subscribe-form ul.errorlist {
1343   position: absolute;
1344   bottom: -2em;
1345   text-align: center;
1346   display: block;
1347   width: 100%;
1348   padding: 0;
1349   list-style: none;
1350   color: #800;
1351 }
1352
1353 #subscribe-form input {
1354         width: 15em;
1355         max-width: none;
1356 }
1357
1358 #Nav div.search form {
1359   padding: 1em 0;
1360 }
1361
1362 div.episode.resume div.title {
1363         white-space: normal;
1364 }
1365
1366 #Home div.program.tabs {
1367         margin: 1em 0;
1368 }
1369
1370 nav#program li {
1371         display: block;
1372         margin: 0;
1373 }
1374
1375 #recent-emissions,
1376 #recent-news,
1377 #recent-sounds {
1378         margin-top: 2em;
1379         .icon-rss {
1380                 position: absolute;
1381                 right: 2rem;
1382         }
1383 }
1384
1385 #recent-emissions h3,
1386 #recent-news h3,
1387 #recent-sounds h3 {
1388         font-size: 140%;
1389 }
1390
1391 #recent-emissions h3.sectionLabel {
1392         margin-bottom: 0;
1393 }
1394
1395 .episode.soundfile {
1396         padding: 0;
1397 }
1398
1399 .soundfile .smooth {
1400         color: #666;
1401         opacity: 1.0;
1402         font-size: 80%;
1403 }
1404
1405
1406 .soundfile p.date {
1407         margin: 0;
1408 }
1409
1410 .frontpage.soundfile .audio {
1411         font-size: 80%;
1412         padding-top: 0.5ex;
1413         padding-bottom: 1ex;
1414 }
1415
1416 #panikdb {
1417         position: absolute;
1418         top: -20px;
1419         right: 0px;
1420         background: white;
1421         color: #888;
1422         padding: 5px 10px;
1423         border: 1px solid #888;
1424         border-width: 1px 1px 0 1px;
1425         -webkit-transform-origin: bottom right;
1426         -webkit-transform: rotate(270deg);
1427         -moz-transform-origin: bottom right;
1428         -moz-transform: rotate(270deg);
1429         transform-origin: bottom right;
1430         transform: rotate(270deg);
1431 }
1432
1433 img.logo.right {
1434         margin-bottom: 1em;
1435 }
1436
1437 .soundfile .special,
1438 .newsitem .special {
1439         margin-bottom: 2em;
1440 }
1441
1442 .newsitem .special .smooth {
1443         padding-top: 5px;
1444 }
1445
1446 /* USER CONTENT */
1447
1448 div.userContent ul {
1449         margin: 1em 0;
1450 }
1451
1452 div.userContent h1,
1453 div.userContent h2,
1454 div.userContent h3,
1455 div.userContent h4 {
1456         text-transform: none;
1457         font-weight: normal;
1458 }
1459
1460 div.userContent h1 { font-size: 2em; }
1461 div.userContent h2 { font-size: 1.8em; }
1462 div.userContent h3 { font-size: 1.5em; }
1463 div.userContent h4 { font-size: 1.5em; }
1464 div.userContent a { text-decoration: underline; }
1465
1466 div.userContent a.tag { text-decoration: none; }
1467
1468 @media screen and (max-width: $player-bottom-limit) {
1469         #streamSymbol{
1470                 top: 0;
1471         }
1472         #MainHeader {
1473                 margin: 0 auto;
1474         }
1475         #All #backgroundBox h1.top {
1476                 width: 94%;
1477         }
1478
1479         #Player.withoutPlaylist #player-container #audioPlayer{
1480             margin:auto;
1481             width:100%;
1482         }
1483         #Player.withoutPlaylist #player-container #audioPlayer #Live{
1484             font-size:150%;
1485         }
1486
1487
1488         #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1489         #player-container{
1490                 background: $primary;
1491         }
1492         #player-container * {color: white !important; }
1493         #player-container{
1494                 z-index:500;
1495                 position:fixed;
1496                 width:100% !important;
1497                 /*top:2em;*/
1498                 font-size:80%;
1499                 bottom:0em;
1500                 border-bottom:none;
1501         }
1502         #Player.withPlaylist #player-container #audioPlayer{
1503                 float:left;
1504                 width:50%;
1505                 border-right:2px solid black;
1506         }
1507         #Player.withPlaylist #player-container #Playlist{
1508                 float:right;
1509                 width:49%;
1510                 text-align:left;
1511         }
1512         #player-container #myPlaylist {
1513                 padding: 0;
1514         }
1515
1516         #player-container #myPlaylist a {
1517                 white-space: nowrap;
1518         }
1519
1520         #player-container #Playlist ol{
1521                 margin-left: 30px;
1522         }
1523 }
1524
1525 div.emission-logo {
1526         margin-left: 1em;
1527 }
1528
1529 div.extra-soundfiles {
1530         clear: both;
1531 }
1532
1533 h3.episode-subtitle {
1534         font-size: 2.5em;
1535 }
1536
1537 .waveform {
1538         display: none;
1539         position: relative;
1540 }
1541
1542 .waveform span {
1543         background: $primary;
1544         background: linear-gradient(to top, $primary 0%, lighten($primary, 10%) 80%);
1545         display: inline-block;
1546         // 100% / n_samples
1547         width: 0.2%;
1548 }
1549
1550 .waveform span.done {
1551         background: linear-gradient(to top, #5A5A5A 0%, #A5A5A5 80%);
1552 }
1553
1554 .waveform span.done.current + span {
1555         background: $primary;
1556 }
1557
1558 .waveform i.duration {
1559         position: absolute;
1560         right: 4px;
1561         bottom: 4px;
1562         color: $primary;
1563         text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1564         font-style: normal;
1565         font-weight: bold;
1566 }
1567
1568 span.timestamp {
1569         cursor: pointer;
1570         border-bottom: 1px dotted #666;
1571 }
1572
1573 div.fragment-sound {
1574         position: relative;
1575 }
1576
1577 div.soundcell div.logo {
1578         vertical-align: top;
1579 }
1580
1581 div.fragment-sound {
1582 }
1583
1584 div.extra-soundfiles div.fragment-sound {
1585         margin-top: 5px;
1586 }
1587
1588 div.extra-soundfiles div.fragment-name {
1589         font-style: italic;
1590         position: relative;
1591         top: 1ex;
1592         max-width: 70%;
1593 }
1594
1595 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1596 }
1597 div.extra-soundfiles ul li div.fragment-sound div.audio {
1598         bottom: 0;
1599 }
1600
1601 #fiber-content div.extra-soundfiles strong {
1602
1603 }
1604
1605 .nonstop-track-title, .nonstop-track-artist {
1606         font-size: 80%;
1607 }
1608
1609 .soundfile-info {
1610         padding-right: 75px;
1611 }
1612
1613 #fiber-content div.extra-soundfiles .soundfile-info strong {
1614         padding-right: 0;
1615 }
1616
1617 #fiber-content div.extra-soundfiles .soundfile-info a {
1618         text-decoration: none;
1619 }
1620
1621 #fiber-content div.extra-soundfiles {
1622         margin: 1em 0;
1623 }
1624
1625 div.extra-soundfiles div.logo {
1626         display: inline-block;
1627 }
1628
1629 div#fiber-content div.extra-soundfiles ul.list {
1630         display: inline-block;
1631         width: 88%;
1632         width: calc(100% - 74px);
1633 }
1634
1635 div.download-links {
1636         position: absolute;
1637         z-index: 1000;
1638         text-align: right;
1639 }
1640
1641 div.hidden-download-links {
1642         display: none !important;
1643 }
1644
1645 div.episode-detail div.sound div.download-links {
1646         display: inline-block;
1647         padding-top: 1ex;
1648         padding-left: 1ex;
1649 }
1650
1651 div.extra-soundfiles div.download-links {
1652         background: white;
1653 }
1654
1655 h1.top a.dimmed {
1656         opacity: 0.7;
1657 }
1658
1659 div#agenda div.content-inline {
1660         margin-bottom: 1em;
1661 }
1662
1663 div.previous-and-next-months {
1664         margin-top: 1em;
1665 }
1666
1667 div.publication-date.date.smooth {
1668         font-size: 80%;
1669 }
1670
1671 #All h1.top.fullwidth {
1672         width: 150%;
1673 }
1674
1675 div.gallery img {
1676         padding: 2px;
1677         background: white;
1678         border: 1px solid #333;
1679 }
1680
1681 div#dialog-background,
1682 div.gallery div.first {
1683         position: fixed;
1684         top: 0;
1685         left: 0;
1686         width: 100%;
1687         height: 100%;
1688         background: rgba(0, 0, 0, 0.9);
1689         z-index: 1000;
1690         text-align: center;
1691 }
1692
1693 div.gallery div.first img {
1694         padding: 5px;
1695         padding-bottom: 25px;
1696         margin-top: -240px;
1697         margin-left: -320px;
1698         position: absolute;
1699         top: 50%;
1700         left: 50%;
1701         transition: all 0.5s ease;
1702         transform-origin: bottom left;
1703 }
1704
1705 div.portrait div.gallery div.first img {
1706         margin-top: -320px;
1707         margin-left: -240px;
1708 }
1709
1710 div.gallery {
1711         border-bottom: 1px solid #ccc;
1712 }
1713
1714 div.gallery span.gallery-legend {
1715         display: inline-block;
1716         position: absolute;
1717         top: 50%;
1718         margin-top: 250px;
1719         left: 0%;
1720         width: 100%;
1721         color: #000;
1722         z-index: 1000;
1723 }
1724
1725 div.portrait div.gallery span.gallery-legend {
1726         margin-top: 330px;
1727 }
1728
1729 @media screen and (max-width: 640px) {
1730         div.portrait div.gallery div.first img,
1731         div.gallery div.first img {
1732                 max-width: 80vw;
1733                 margin: 0;
1734                 max-height: 80vh;
1735                 left: 10vw;
1736                 top: 10vh;
1737                 display: inline-block;
1738         }
1739 }
1740
1741 ul.tags {
1742         padding-top: 1em;
1743         clear: both;
1744 }
1745
1746 div.topik.inline {
1747         clear: both;
1748         margin-top: 1em;
1749 }
1750
1751 #fiber-content div.topikcell a {
1752         text-decoration: none;
1753         height: 500px;
1754 }
1755
1756 #fiber-content div.topikcell .topik-large a {
1757         height: auto;
1758 }
1759
1760 div.topikcellcontent h5 {
1761         padding-top: 1ex;
1762 }
1763
1764 div.topikcellcontent.topik-large a {
1765         width: 100%;
1766         float: none;
1767         display: inline-block;
1768         text-align: left;
1769 }
1770
1771 div.topikcellcontent.topik-large img {
1772         width: 100%;
1773         display: block;
1774 }
1775
1776 div.topikcellcontent.topik-large a div {
1777         @media screen and (min-width: $mobile-limit) {
1778                 display: flex;
1779         }
1780         margin-top: 1ex;
1781         h2 {
1782                 margin-top: 0;
1783                 white-space: nowrap;
1784                 margin-right: 1ex;
1785                 @media screen and (max-width: $mobile-limit) {
1786                         padding-bottom: 0;
1787                 }
1788         }
1789 }
1790
1791 div.topikcellcontent a {
1792         margin-bottom: 2em;
1793         display: inline-block;
1794         text-align: left;
1795         width: 50%;
1796         box-sizing: border-box;
1797         padding-right: 2em;
1798         float: left;
1799 }
1800
1801 div.topikcellcontent img {
1802 }
1803
1804 div.topikcellcontent h2 {
1805         font-size: 3.5em;
1806 }
1807
1808 @media only screen and (min-width: 1250px) {
1809         div.topikcellcontent a {
1810                 display: inline-block;
1811                 text-align: left;
1812                 width: 50%;
1813                 float: left;
1814         }
1815 }
1816
1817 .program-week img.smooth {
1818         padding-bottom: 0;
1819 }
1820
1821 div#dialog-background {
1822         display: flex;
1823 }
1824 div#dialog-embed {
1825         position: relative;
1826         background: white;
1827         width: 50%;
1828         margin: auto;
1829         text-align: left;
1830         padding: 1ex;
1831 }
1832
1833 div#dialog-embed textarea {
1834         width: 100%;
1835         max-width: none;
1836 }
1837
1838 div#dialog-embed #close-button {
1839         position: absolute;
1840         right: 1ex;
1841 }
1842
1843 body#embed {
1844         min-height: auto !important;
1845         margin: 0;
1846         background: white;
1847 }
1848
1849 body#embed #Main {
1850         background: transparent;
1851 }
1852
1853 body#embed #Commons,
1854 body#embed #metaNav,
1855 body#embed #Footer,
1856 body#embed #userLog,
1857 body#embed #panikdb,
1858 body#embed #Player {
1859         display: none;
1860 }
1861
1862 body#embed #Changing {
1863         float: none;
1864         width: auto;
1865 }
1866
1867 body#embed #Main > .wrapper {
1868         padding: 0;
1869 }
1870
1871 body#embed .logo {
1872         padding-top: 4px;
1873 }
1874
1875 body#embed ul.custom {
1876         display: inline-block;
1877         width: calc(100% - 72px);
1878 }
1879
1880 body#embed ul.custom .soundfile-info {
1881         padding: 1ex;
1882 }
1883
1884 body#embed span.fragment-title {
1885         font-weight: normal;
1886 }
1887
1888 table.playlist {
1889         width: 90%;
1890 }
1891
1892 table.playlist td {
1893         padding: 0.5ex;
1894         text-align: left;
1895 }
1896
1897 table.playlist td.tracktime {
1898         width: 6ex;
1899         text-align: center;
1900 }
1901
1902 p.playlist-disclaimer {
1903         margin-top: 2em;
1904         max-width: 60ex;
1905         font-style: italic;
1906 }
1907
1908
1909 #main-topiks #fiber-nav li ul {
1910     padding-top: 0;
1911     padding-left: 2em;
1912 }
1913 #main-topiks #fiber-nav li ul li {
1914     padding-left: 0;
1915     font-size: 80%;
1916 }
1917
1918 #main-topiks #fiber-nav li ul li a {
1919     padding-left: 0;
1920 }
1921
1922 div.commands {
1923         display: flex;
1924         width: 90vw;
1925 }
1926
1927 @media screen and (min-width: $mobile-limit){
1928         div.commands {
1929                 width: calc(90vw - 240px);
1930         }
1931 }
1932
1933 input#msg {
1934         flex-grow: 1;
1935 }
1936
1937 div.chat-area {
1938         max-width: 60em;
1939 }
1940
1941 #chat {
1942        margin-top: 1ex;
1943 }
1944
1945 #chat div.msg {
1946         position: relative;
1947         margin-bottom: 1ex;
1948         transition: opacity 1s ease;
1949 }
1950
1951 #chat div.msg.new {
1952         opacity: 0;
1953 }
1954
1955 #chat div.msg.msg-out span.content {
1956         font-size: 90%;
1957         color: #444;
1958 }
1959
1960 #chat span.from {
1961    display: inline-block;
1962    width: 10rem;
1963    overflow: hidden;
1964    text-overflow: ellipsis;
1965    color: #888;
1966    position: absolute;
1967 }
1968 #chat span.content {
1969   display: inline-block;
1970   padding-left: 11rem;
1971 }
1972
1973 #chat div.msg.info span.content {
1974         padding-left: 1rem;
1975         font-style: italic;
1976         color: #666;
1977 }
1978
1979 @media screen and (max-width: $mobile-limit) {
1980     #chat span.from {
1981         display: block;
1982         position: static;
1983         width: auto;
1984     }
1985     #chat span.content {
1986         display: block;
1987         padding-left: 2rem;
1988     }
1989 }
1990
1991 h1.top > span.chat.with-logo {
1992         position: relative;
1993         left: 140px;
1994         display: inline-block;
1995         max-width: calc(100% - 140px);
1996 }
1997
1998 div.top-logo {
1999         position: absolute;
2000         top: 30px;
2001 }
2002
2003 div.top-logo img {
2004         border: 2px solid black;
2005 }
2006
2007 @media screen and (max-width: $mobile-limit){
2008         div.top-logo {
2009                 display: none;
2010         }
2011         h1.top > span.chat.with-logo {
2012                 position: static;
2013                 max-width: none;
2014         }
2015         div.topikcellcontent a {
2016                 width: auto;
2017         }
2018         #fiber-content div.topikcell a {
2019                 height: auto;
2020         }
2021 }
2022
2023 div#CurrentlyChatting {
2024         cursor: pointer;
2025         margin-top: 1em;
2026 }
2027
2028 div.description-emission-chat {
2029         margin-bottom: 2em;
2030 }
2031
2032 div.chatPart h3 {
2033         padding-top: 0;
2034 }
2035
2036 div#chat.moderation .msg-in span.from {
2037         cursor: pointer;
2038 }
2039
2040 div#chat.moderation .msg-in span.from:hover::after {
2041         padding-left: 1ex;
2042         font-family: FontAwesome;
2043         content: "\f056";
2044         font-size: 80%;
2045 }
2046
2047 div.programCell a.playlist {
2048         font-size: 80%;
2049 }
2050
2051 #bg-title {
2052         display: none;
2053         color: lighten($primary, 20);
2054         line-height: 100%;
2055         font-size: 250px;
2056         font-size: 25vh;
2057         position: absolute;
2058         left: -260px;
2059         top: 48vh;
2060         z-index: 0;
2061         -webkit-user-select: none;
2062         -moz-user-select: none;
2063         -ms-user-select: none;
2064         user-select: none;
2065         cursor: default;
2066 }
2067
2068 .rightPart .menucell {
2069         ul {
2070                 list-style: none;
2071                 padding: 0;
2072                 li {
2073                         padding-bottom: 1rem;
2074                 }
2075         }
2076 }
2077
2078 div#loading-page {
2079         position: fixed;
2080         top: 0;
2081         left: 0;
2082         right: 0;
2083         height: 5px;
2084         background: $secondary;
2085         z-index: 1100;
2086         animation-name: load_animation;
2087         animation-duration: 6000ms;
2088         animation-timing-function: ease-out;
2089         transition: opacity 200ms linear;
2090         &.fade {
2091                 opacity: 0;
2092         }
2093 }
2094
2095 @keyframes load_animation {
2096         0% { right: 100%; }
2097         100% { right: 0%; }
2098 }
2099
2100 div.around-nav {
2101         max-width: 100%;
2102         position: relative;
2103         display: flex;
2104         height: 350px;
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                 border: 1px solid $primary;
2112                 button {
2113                         line-height: 45px;
2114                         color: white;
2115                 }
2116         }
2117         div.around-nav-inner {
2118                 background: white;
2119                 overflow: hidden;
2120                 max-width: 100%;
2121                 margin-bottom: 250px;
2122                 border-top: 1px solid $primary;
2123         }
2124         div.around-nav-inner-2 {
2125                 position: relative;
2126                 width: 4000px;
2127                 transition: transform linear 0.2s;
2128                 div.around-block {
2129                         cursor: pointer;
2130                         border-right: 1px solid $primary;
2131                         box-sizing: border-box;
2132                         padding: 0 1rem;
2133                         background: white;
2134                         display: block;
2135                         width: 244px;
2136                         float: left;
2137                         &.highlight {
2138                                 background: $primary;
2139                                 color: white;
2140                         }
2141                 }
2142         }
2143         div.around-slot-details {
2144                 div.around-details {
2145                         box-sizing: border-box;
2146                         display: none;
2147                         position: absolute;
2148                         left: 0;
2149                         top: 50px;
2150                         border: 1px solid $primary;
2151                         border-width: 1px 2px;
2152                         background: white;
2153                         width: 100%;
2154                         p {
2155                                 margin: 1rem;
2156                         }
2157                         img {
2158                                 float: right;
2159                                 margin-left: 1rem;
2160                                 border: none;
2161                         }
2162                 }
2163         }
2164 }
2165
2166 #recent-news div.newsitem-home,
2167 #recent-sounds div.episode.soundfile {
2168         border: 1px solid #666;
2169         background: white;
2170         width: 10em;
2171         margin-right: 10px;
2172         display: inline-block;
2173         height: 180px;
2174 }
2175
2176 #newsletter {
2177         background: white;
2178         border: 1px solid $primary;
2179         padding: 1ex;
2180         h4 {
2181                 margin-bottom: 20px;
2182         }
2183         h4::after {
2184                 display: block;
2185                 content: "";
2186                 height: 4px;
2187                 width: 75px;
2188                 background: $primary;
2189         }
2190         a {
2191                 line-height: 150%;
2192         }
2193 }
2194
2195 #Emission-container {
2196         h2 {
2197         }
2198 }
2199
2200 div.program,
2201 #recent-emissions,
2202 #recent-news,
2203 #recent-sounds,
2204 .emissions,
2205 .emission-archives,
2206 #Emission-tabs-menu,
2207 #Emission-tabs-detail {
2208         background: white;
2209         padding: 1rem;
2210         clip-path: polygon(0 0, 95% 0, 100% 30%, 100% 100%, 10% 100%, 0% 100%, 0 0);
2211 }
2212
2213 div.program.tabs {
2214         clip-path: none;
2215 }
2216
2217 header h3 {
2218         color: $text-color;
2219         position: relative;
2220         font-weight: 500;
2221         &::after {
2222                 display: block;
2223                 content: "";
2224                 height: 4px;
2225                 width: 75px;
2226                 background: $text-color;
2227                 position: absolute;
2228                 bottom: -1px;
2229         }
2230         margin-bottom: 20px;
2231
2232 }
2233
2234 span.program-period,
2235 span.date {
2236         text-transform: lowercase;
2237 }
2238
2239 div.episode.soundfile {
2240         position: relative;
2241         div.sound {
2242                 position: absolute;
2243                 right: 5px;
2244                 top: 130px;
2245                 button.icon-plus-sign, button.icon-download {
2246                         display: none;
2247                 }
2248         }
2249 }
2250
2251 a.listen-home {
2252         background: url(../img/listen.png) top left no-repeat;
2253         margin-top: 20px;
2254         display: block;
2255         width: 286px;
2256         height: 97px;
2257         text-indent: -10000px;
2258         overflow: hidden;
2259         cursor: pointer;
2260         &:hover {
2261                 background-position: -286px 0px;
2262         }
2263 }