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