panikweb_templates/static/css/_specifics.scss

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