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.inline .logo,
 926 .episode.inline .logo {
 927         min-height: 50px;
 928         float: left;
 929         margin-right: 1em;
 930 }
 931 .episode.resume .sound{
 932         float:right;
 933         margin:0 0 0.5em 0.5em;
 934 }
 935 .episode.inline .sound.right{
 936         text-align:center;
 937         font-size:70%;
 938         position: relative;
 939         z-index: 10;
 940 }
 941 .episode.inline .sound.right button{
 942     font-size:1.5em;
 943         display:inline;
 944         text-align:center;
 945         padding-bottom:0.05em;
 946 }
 947 .episode.resume .sound.right .icon-download{
 948         text-align:center;
 949 }
 950 .episode.resume .sound.right .icon-download{
 951         display:block;
 952 }
 953
 954 .big.icon-pause,
 955 .big.icon-stop,
 956 .big.icon-share {
 957         display: inline-block;
 958         vertical-align: middle;
 959 }
 960
 961 .episode.detail .logo.right{
 962         max-width:50%;
 963         @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 }
1409
1410 #recent-emissions h3,
1411 #recent-news h3,
1412 #recent-sounds h3 {
1413         font-size: 140%;
1414 }
1415
1416 #recent-emissions h3.sectionLabel {
1417         margin-bottom: 0;
1418 }
1419
1420 .episode.soundfile {
1421         padding: 0;
1422 }
1423
1424 .soundfile .smooth {
1425         color: #666;
1426         opacity: 1.0;
1427         font-size: 80%;
1428 }
1429
1430
1431 .soundfile p.date {
1432         margin: 0;
1433 }
1434
1435 .frontpage.soundfile .audio {
1436         font-size: 80%;
1437         padding-top: 0.5ex;
1438         padding-bottom: 1ex;
1439 }
1440
1441 #panikdb {
1442         position: absolute;
1443         top: -20px;
1444         right: 0px;
1445         background: white;
1446         color: #888;
1447         padding: 5px 10px;
1448         border: 1px solid #888;
1449         border-width: 1px 1px 0 1px;
1450         -webkit-transform-origin: bottom right;
1451         -webkit-transform: rotate(270deg);
1452         -moz-transform-origin: bottom right;
1453         -moz-transform: rotate(270deg);
1454         transform-origin: bottom right;
1455         transform: rotate(270deg);
1456 }
1457
1458 img.logo.right {
1459         margin-bottom: 1em;
1460 }
1461
1462 .soundfile .special,
1463 .newsitem .special {
1464         margin-bottom: 2em;
1465 }
1466
1467 .newsitem .special .smooth {
1468         padding-top: 5px;
1469 }
1470
1471 /* USER CONTENT */
1472
1473 div.userContent ul {
1474         margin: 1em 0;
1475 }
1476
1477 div.userContent h1,
1478 div.userContent h2,
1479 div.userContent h3,
1480 div.userContent h4 {
1481         text-transform: none;
1482         font-weight: normal;
1483 }
1484
1485 div.userContent h1 { font-size: 2em; }
1486 div.userContent h2 { font-size: 1.8em; }
1487 div.userContent h3 { font-size: 1.5em; }
1488 div.userContent h4 { font-size: 1.5em; }
1489 div.userContent a { text-decoration: underline; }
1490
1491 div.userContent a.tag { text-decoration: none; }
1492
1493 @media screen and (max-width: $player-bottom-limit) {
1494         #streamSymbol{
1495                 top: 0;
1496         }
1497         #MainHeader {
1498                 margin: 0 auto;
1499         }
1500         #All #backgroundBox h1.top {
1501                 width: 94%;
1502         }
1503
1504         #Player #player-container #audioPlayer{
1505                 margin:auto;
1506                 width:100%;
1507         }
1508         #Player #player-container #audioPlayer #Live{
1509                 font-size:150%;
1510         }
1511
1512
1513         #player-container {
1514                 width:100%;
1515                 left:0;
1516         }
1517         #player-container{
1518                 background: $primary;
1519         }
1520         #player-container * {color: white !important; }
1521         #player-container{
1522                 z-index:500;
1523                 position:fixed;
1524                 width:100% !important;
1525                 /*top:2em;*/
1526                 font-size:80%;
1527                 bottom:0em;
1528                 border-bottom:none;
1529         }
1530         #Player.withPlaylist #player-container #audioPlayer{
1531                 float:left;
1532                 width:50%;
1533         }
1534         #Player.withPlaylist #player-container #Playlist{
1535                 float:right;
1536                 width:49%;
1537                 text-align:left;
1538         }
1539         #player-container #myPlaylist {
1540                 padding: 0;
1541         }
1542
1543         #player-container #myPlaylist a {
1544                 white-space: nowrap;
1545         }
1546
1547         #player-container #Playlist ol{
1548                 margin-left: 30px;
1549         }
1550 }
1551
1552 div.emission-logo {
1553         margin-left: 1em;
1554 }
1555
1556 div.extra-soundfiles {
1557         clear: both;
1558 }
1559
1560 h3.episode-subtitle {
1561         font-size: 2.5em;
1562 }
1563
1564 .waveform {
1565         display: none;
1566         position: relative;
1567 }
1568
1569 .waveform span {
1570         background: $primary;
1571         background: linear-gradient(to top, $primary 0%, lighten($primary, 10%) 80%);
1572         display: inline-block;
1573         // 100% / n_samples
1574         width: 0.2%;
1575 }
1576
1577 .waveform span.done {
1578         background: linear-gradient(to top, #5A5A5A 0%, #A5A5A5 80%);
1579 }
1580
1581 .waveform span.done.current + span {
1582         background: $primary;
1583 }
1584
1585 .waveform i.duration {
1586         position: absolute;
1587         right: 4px;
1588         bottom: 4px;
1589         color: $primary;
1590         text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1591         font-style: normal;
1592         font-weight: bold;
1593 }
1594
1595 span.timestamp {
1596         cursor: pointer;
1597         border-bottom: 1px dotted #666;
1598 }
1599
1600 div.fragment-sound {
1601         position: relative;
1602 }
1603
1604 div.soundcell div.logo {
1605         vertical-align: top;
1606 }
1607
1608 div.fragment-sound {
1609 }
1610
1611 div.extra-soundfiles div.fragment-sound {
1612         margin-top: 5px;
1613 }
1614
1615 div.extra-soundfiles div.fragment-name {
1616         font-style: italic;
1617         position: relative;
1618         top: 1ex;
1619         max-width: 70%;
1620 }
1621
1622 div.extra-soundfiles ul li div.fragment-sound div.waveform {
1623 }
1624 div.extra-soundfiles ul li div.fragment-sound div.audio {
1625         bottom: 0;
1626 }
1627
1628 #fiber-content div.extra-soundfiles strong {
1629
1630 }
1631
1632 .nonstop-track-title, .nonstop-track-artist {
1633         font-size: 80%;
1634 }
1635
1636 .soundfile-info {
1637         padding-right: 75px;
1638 }
1639
1640 #fiber-content div.extra-soundfiles .soundfile-info strong {
1641         padding-right: 0;
1642 }
1643
1644 #fiber-content div.extra-soundfiles .soundfile-info a {
1645         text-decoration: none;
1646 }
1647
1648 #fiber-content div.extra-soundfiles {
1649         margin: 1em 0;
1650 }
1651
1652 div.extra-soundfiles div.logo {
1653         display: inline-block;
1654 }
1655
1656 div#fiber-content div.extra-soundfiles ul.list {
1657         display: inline-block;
1658         width: 88%;
1659         width: calc(100% - 74px);
1660 }
1661
1662 div.download-links {
1663         position: absolute;
1664         z-index: 1000;
1665         text-align: right;
1666 }
1667
1668 div.hidden-download-links {
1669         display: none !important;
1670 }
1671
1672 div.episode-detail div.sound div.download-links {
1673         display: inline-block;
1674         padding-top: 1ex;
1675         padding-left: 1ex;
1676 }
1677
1678 div.extra-soundfiles div.download-links {
1679         background: white;
1680 }
1681
1682 h1.top a.dimmed {
1683         opacity: 0.7;
1684 }
1685
1686 div#agenda div.content-inline {
1687         margin-bottom: 1em;
1688 }
1689
1690 div.previous-and-next-months {
1691         margin-top: 1em;
1692 }
1693
1694 div.publication-date.date.smooth {
1695         font-size: 80%;
1696 }
1697
1698 #All h1.top.fullwidth {
1699         width: 150%;
1700 }
1701
1702 div.gallery img {
1703         padding: 2px;
1704         background: white;
1705         border: 1px solid #333;
1706 }
1707
1708 div#dialog-background,
1709 div.gallery div.first {
1710         position: fixed;
1711         top: 0;
1712         left: 0;
1713         width: 100%;
1714         height: 100%;
1715         background: rgba(0, 0, 0, 0.9);
1716         z-index: 1000;
1717         text-align: center;
1718 }
1719
1720 div.gallery div.first img {
1721         padding: 5px;
1722         padding-bottom: 25px;
1723         margin-top: -240px;
1724         margin-left: -320px;
1725         position: absolute;
1726         top: 50%;
1727         left: 50%;
1728         transition: all 0.5s ease;
1729         transform-origin: bottom left;
1730 }
1731
1732 div.portrait div.gallery div.first img {
1733         margin-top: -320px;
1734         margin-left: -240px;
1735 }
1736
1737 div.gallery {
1738         border-bottom: 1px solid #ccc;
1739 }
1740
1741 div.gallery span.gallery-legend {
1742         display: inline-block;
1743         position: absolute;
1744         top: 50%;
1745         margin-top: 250px;
1746         left: 0%;
1747         width: 100%;
1748         color: #000;
1749         z-index: 1000;
1750 }
1751
1752 div.portrait div.gallery span.gallery-legend {
1753         margin-top: 330px;
1754 }
1755
1756 @media screen and (max-width: 640px) {
1757         div.portrait div.gallery div.first img,
1758         div.gallery div.first img {
1759                 max-width: 80vw;
1760                 margin: 0;
1761                 max-height: 80vh;
1762                 left: 10vw;
1763                 top: 10vh;
1764                 display: inline-block;
1765         }
1766 }
1767
1768 ul.tags {
1769         padding-top: 1em;
1770         clear: both;
1771 }
1772
1773 div.topik.inline {
1774         clear: both;
1775         margin-top: 1em;
1776 }
1777
1778 #fiber-content div.topikcell a {
1779         text-decoration: none;
1780         height: 500px;
1781 }
1782
1783 #fiber-content div.topikcell .topik-large a {
1784         height: auto;
1785 }
1786
1787 div.topikcellcontent h5 {
1788         padding-top: 1ex;
1789 }
1790
1791 div.topikcellcontent.topik-large a {
1792         width: 100%;
1793         float: none;
1794         display: inline-block;
1795         text-align: left;
1796 }
1797
1798 div.topikcellcontent.topik-large img {
1799         width: 100%;
1800         display: block;
1801 }
1802
1803 div.topikcellcontent.topik-large a div {
1804         @media screen and (min-width: $mobile-limit) {
1805                 display: flex;
1806         }
1807         margin-top: 1ex;
1808         h2 {
1809                 margin-top: 0;
1810                 white-space: nowrap;
1811                 margin-right: 1ex;
1812                 @media screen and (max-width: $mobile-limit) {
1813                         padding-bottom: 0;
1814                 }
1815         }
1816 }
1817
1818 div.topikcellcontent a {
1819         margin-bottom: 2em;
1820         display: inline-block;
1821         text-align: left;
1822         width: 50%;
1823         box-sizing: border-box;
1824         padding-right: 2em;
1825         float: left;
1826 }
1827
1828 div.topikcellcontent img {
1829 }
1830
1831 div.topikcellcontent h2 {
1832         font-size: 3.5em;
1833 }
1834
1835 @media only screen and (min-width: 1250px) {
1836         div.topikcellcontent a {
1837                 display: inline-block;
1838                 text-align: left;
1839                 width: 50%;
1840                 float: left;
1841         }
1842 }
1843
1844 .program-week img.smooth {
1845         padding-bottom: 0;
1846 }
1847
1848 div#dialog-background {
1849         display: flex;
1850 }
1851 div#dialog-embed {
1852         position: relative;
1853         background: white;
1854         width: 50%;
1855         margin: auto;
1856         text-align: left;
1857         padding: 1ex;
1858 }
1859
1860 div#dialog-embed textarea {
1861         width: 100%;
1862         max-width: none;
1863 }
1864
1865 div#dialog-embed #close-button {
1866         position: absolute;
1867         right: 1ex;
1868 }
1869
1870 body#embed {
1871         min-height: auto !important;
1872         margin: 0;
1873         background: white;
1874 }
1875
1876 body#embed #Main {
1877         background: transparent;
1878 }
1879
1880 body#embed #Commons,
1881 body#embed #metaNav,
1882 body#embed #Footer,
1883 body#embed #userLog,
1884 body#embed #panikdb,
1885 body#embed #Player {
1886         display: none;
1887 }
1888
1889 body#embed #Changing {
1890         float: none;
1891         width: auto;
1892 }
1893
1894 body#embed #Main > .wrapper {
1895         padding: 0;
1896 }
1897
1898 body#embed .logo {
1899         padding-top: 4px;
1900 }
1901
1902 body#embed ul.custom {
1903         display: inline-block;
1904         width: calc(100% - 72px);
1905 }
1906
1907 body#embed ul.custom .soundfile-info {
1908         padding: 1ex;
1909 }
1910
1911 body#embed span.fragment-title {
1912         font-weight: normal;
1913 }
1914
1915 table.playlist {
1916         width: 90%;
1917 }
1918
1919 table.playlist td {
1920         padding: 0.5ex;
1921         text-align: left;
1922 }
1923
1924 table.playlist td.tracktime {
1925         width: 6ex;
1926         text-align: center;
1927 }
1928
1929 p.playlist-disclaimer {
1930         margin-top: 2em;
1931         max-width: 60ex;
1932         font-style: italic;
1933 }
1934
1935
1936 #main-topiks #fiber-nav li ul {
1937     padding-top: 0;
1938     padding-left: 2em;
1939 }
1940 #main-topiks #fiber-nav li ul li {
1941     padding-left: 0;
1942     font-size: 80%;
1943 }
1944
1945 #main-topiks #fiber-nav li ul li a {
1946     padding-left: 0;
1947 }
1948
1949 div.commands {
1950         display: flex;
1951         width: 90vw;
1952 }
1953
1954 @media screen and (min-width: $mobile-limit){
1955         div.commands {
1956                 width: calc(90vw - 240px);
1957         }
1958 }
1959
1960 input#msg {
1961         flex-grow: 1;
1962 }
1963
1964 div.chat-area {
1965         max-width: 60em;
1966 }
1967
1968 #chat {
1969        margin-top: 1ex;
1970 }
1971
1972 #chat div.msg {
1973         position: relative;
1974         margin-bottom: 1ex;
1975         transition: opacity 1s ease;
1976 }
1977
1978 #chat div.msg.new {
1979         opacity: 0;
1980 }
1981
1982 #chat div.msg.msg-out span.content {
1983         font-size: 90%;
1984         color: #444;
1985 }
1986
1987 #chat span.from {
1988    display: inline-block;
1989    width: 10rem;
1990    overflow: hidden;
1991    text-overflow: ellipsis;
1992    color: #888;
1993    position: absolute;
1994 }
1995 #chat span.content {
1996   display: inline-block;
1997   padding-left: 11rem;
1998 }
1999
2000 #chat div.msg.info span.content {
2001         padding-left: 1rem;
2002         font-style: italic;
2003         color: #666;
2004 }
2005
2006 @media screen and (max-width: $mobile-limit) {
2007     #chat span.from {
2008         display: block;
2009         position: static;
2010         width: auto;
2011     }
2012     #chat span.content {
2013         display: block;
2014         padding-left: 2rem;
2015     }
2016 }
2017
2018 h1.top > span.chat.with-logo {
2019         position: relative;
2020         left: 140px;
2021         display: inline-block;
2022         max-width: calc(100% - 140px);
2023 }
2024
2025 div.top-logo {
2026         position: absolute;
2027         top: 30px;
2028 }
2029
2030 div.top-logo img {
2031         border: 2px solid black;
2032 }
2033
2034 @media screen and (max-width: $mobile-limit){
2035         div.top-logo {
2036                 display: none;
2037         }
2038         h1.top > span.chat.with-logo {
2039                 position: static;
2040                 max-width: none;
2041         }
2042         div.topikcellcontent a {
2043                 width: auto;
2044         }
2045         #fiber-content div.topikcell a {
2046                 height: auto;
2047         }
2048 }
2049
2050 div#CurrentlyChatting {
2051         cursor: pointer;
2052         margin-top: 1em;
2053 }
2054
2055 div.description-emission-chat {
2056         margin-bottom: 2em;
2057 }
2058
2059 div.chatPart h3 {
2060         padding-top: 0;
2061 }
2062
2063 div#chat.moderation .msg-in span.from {
2064         cursor: pointer;
2065 }
2066
2067 div#chat.moderation .msg-in span.from:hover::after {
2068         padding-left: 1ex;
2069         font-family: FontAwesome;
2070         content: "\f056";
2071         font-size: 80%;
2072 }
2073
2074 div.programCell a.playlist {
2075         font-size: 80%;
2076 }
2077
2078 #bg-title {
2079         display: none;
2080         color: lighten($primary, 20);
2081         line-height: 100%;
2082         font-size: 250px;
2083         font-size: 25vh;
2084         position: absolute;
2085         left: -260px;
2086         top: 48vh;
2087         z-index: 0;
2088         -webkit-user-select: none;
2089         -moz-user-select: none;
2090         -ms-user-select: none;
2091         user-select: none;
2092         cursor: default;
2093 }
2094
2095 .rightPart .menucell {
2096         ul {
2097                 list-style: none;
2098                 padding: 0;
2099                 li {
2100                         padding-bottom: 1rem;
2101                 }
2102         }
2103 }
2104
2105 div#loading-page {
2106         position: fixed;
2107         top: 0;
2108         left: 0;
2109         right: 0;
2110         height: 5px;
2111         background: $secondary;
2112         z-index: 1100;
2113         animation-name: load_animation;
2114         animation-duration: 6000ms;
2115         animation-timing-function: ease-out;
2116         transition: opacity 200ms linear;
2117         &.fade {
2118                 opacity: 0;
2119         }
2120 }
2121
2122 @keyframes load_animation {
2123         0% { right: 100%; }
2124         100% { right: 0%; }
2125 }
2126
2127 div.around-nav {
2128         max-width: 100%;
2129         position: relative;
2130         display: flex;
2131         height: 350px;
2132         div.around-nav-previous, div.around-nav-next {
2133                 flex: 1;
2134                 min-width: 20px;
2135                 text-align: center;
2136                 background: $primary;
2137                 height: 50px;
2138                 border: 1px solid $primary;
2139                 button {
2140                         line-height: 45px;
2141                         color: white;
2142                 }
2143         }
2144         div.around-nav-inner {
2145                 background: white;
2146                 overflow: hidden;
2147                 max-width: 100%;
2148                 margin-bottom: 250px;
2149                 border-top: 1px solid $primary;
2150         }
2151         div.around-nav-inner-2 {
2152                 position: relative;
2153                 width: 4000px;
2154                 transition: transform linear 0.2s;
2155                 div.around-block {
2156                         cursor: pointer;
2157                         border-right: 1px solid $primary;
2158                         box-sizing: border-box;
2159                         padding: 0 1rem;
2160                         background: white;
2161                         display: block;
2162                         width: 244px;
2163                         float: left;
2164                         &.highlight {
2165                                 background: $primary;
2166                                 color: white;
2167                         }
2168                 }
2169         }
2170         div.around-slot-details {
2171                 div.around-details {
2172                         box-sizing: border-box;
2173                         display: none;
2174                         position: absolute;
2175                         left: 0;
2176                         top: 50px;
2177                         border: 1px solid $primary;
2178                         border-width: 1px 2px;
2179                         background: white;
2180                         width: 100%;
2181                         p {
2182                                 margin: 1rem;
2183                         }
2184                         img {
2185                                 float: right;
2186                                 margin-left: 1rem;
2187                                 border: none;
2188                         }
2189                 }
2190         }
2191 }
2192
2193 #recent-sounds,
2194 #recent-news {
2195         max-width: 100%;
2196         overflow: hidden;
2197         & > div {
2198                 display: flex;
2199         }
2200 }
2201
2202 #recent-news div.newsitem-home,
2203 #recent-sounds div.episode.soundfile {
2204         background: white;
2205         width: 180px;
2206         min-width: 180px;
2207         margin-right: 10px;
2208         display: inline-block;
2209         height: 220px;
2210 }
2211
2212 #newsletter {
2213         background: white;
2214         border: 1px solid $primary;
2215         padding: 1ex;
2216         h4 {
2217                 margin-bottom: 20px;
2218         }
2219         h4::after {
2220                 display: block;
2221                 content: "";
2222                 height: 4px;
2223                 width: 75px;
2224                 background: $primary;
2225         }
2226         a {
2227                 line-height: 150%;
2228         }
2229 }
2230
2231 #Emission-container {
2232         h2 {
2233         }
2234 }
2235
2236 div.program,
2237 #recent-emissions,
2238 #recent-news,
2239 #recent-sounds,
2240 .emissions,
2241 .emission-archives,
2242 #Emission-tabs-menu,
2243 #Emission-tabs-detail {
2244         background: white;
2245         padding: 1rem;
2246         clip-path: polygon(0 0, 95% 0, 100% 30%, 100% 100%, 10% 100%, 0% 100%, 0 0);
2247 }
2248
2249 div.program.tabs {
2250         clip-path: none;
2251 }
2252
2253 header h3 {
2254         color: $text-color;
2255         position: relative;
2256         font-weight: 500;
2257         &::after {
2258                 display: block;
2259                 content: "";
2260                 height: 4px;
2261                 width: 75px;
2262                 background: $text-color;
2263                 position: absolute;
2264                 bottom: -1px;
2265         }
2266         margin-bottom: 20px;
2267
2268 }
2269
2270 span.program-period,
2271 span.date {
2272         text-transform: lowercase;
2273 }
2274
2275 div.episode.soundfile {
2276         position: relative;
2277         div.sound {
2278                 position: absolute;
2279                 right: 5px;
2280                 top: 130px;
2281                 button.icon-plus-sign, button.icon-download {
2282                         display: none;
2283                 }
2284         }
2285 }
2286
2287 a.listen-home {
2288         background: url(../img/listen.png) top left no-repeat;
2289         margin-top: 20px;
2290         display: block;
2291         width: 286px;
2292         height: 97px;
2293         text-indent: -10000px;
2294         overflow: hidden;
2295         cursor: pointer;
2296         &:hover {
2297                 background-position: -286px 0px;
2298         }
2299         @media screen and (max-width: $mobile-limit) {
2300                 display: none;
2301         }
2302 }
2303
2304
2305 ul.list > li{
2306         border-bottom: 1px solid $primary;
2307 }