panikweb_templates/static/css/specifics.css

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