panikweb_templates/static/css/_specifics.scss

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