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;
 273 }
 274
 275 #metaNav input {
 276         border: 1px solid #ececec;
 277 }
 278
 279 @media screen and (max-width:760px){
 280         #metaNav .iconLabel {display:none;}
 281         #metaNav ul li a span.nav-icon { display: inline-block; }
 282         #metaNav form {
 283                 display: none;
 284         }
 285 }
 286
 287 /****************************************************/
 288 /**** Commons ****/
 289 /****************************************************/
 290
 291 .audio button {color:#ff6600 !important;}
 292 /****************************************************/
 293 /**** HEADER ****/
 294 /****************************************************/
 295
 296 /* PANIK LOGO */
 297 #Commons{
 298         background: #fff;
 299 }
 300 #Commons .wrapper{
 301 }
 302 #mainHeader {
 303         padding-bottom:1em;
 304 }
 305 #mainHeader {
 306     font-size:70%;
 307 }
 308 #mainHeader *{color:black !important;line-height:1em;}
 309 #mainHeader #radioPanik{}
 310
 311 #Panik img{display:block;margin:auto;max-height:200px;}
 312 #mainHeader h1{
 313         padding-left:75px;
 314 }
 315 #player-container #player{
 316     padding:0 0 0 0;
 317     min-width: 240px;
 318 }
 319
 320 #Changing h1.top a:hover {
 321         opacity: 1.0;
 322 }
 323
 324 @media screen and (max-width: 760px) {
 325         #All h1.top {
 326                 font-size: 60px;
 327                 padding: 0 3%;
 328                 padding-bottom: 0;
 329         }
 330         #specialHome .leftPart h1.top {
 331                 display: none;
 332         }
 333 }
 334
 335 @media screen and (min-width: 760px) {
 336         #Commons {
 337                 float: left;
 338                 width: 20%;
 339                 width: -webkit-calc(0% + 240px);
 340                 width: -moz-calc(0% + 240px);
 341                 width: calc(0% + 240px);
 342         }
 343         #Changing {
 344                 position: relative;
 345                 float: right;
 346                 width: 78%;
 347                 width: -webkit-calc(100% - 280px);
 348                 width: -moz-calc(100% - 280px);
 349                 width: calc(100% - 280px);
 350         }
 351         #All h1.top {
 352                 font-size: 120px;
 353                 font-family: Reglo;
 354                 text-transform: uppercase;
 355                 -webkit-transform: scale(0.5, 1);
 356                 -webkit-transform-origin: 0;
 357                 -moz-transform: scale(0.5, 1);
 358                 -moz-transform-origin: 0;
 359                 transform: scale(0.5, 1);
 360                 transform-origin: 0;
 361                 padding-left: 0;
 362                 padding-top: 40px;
 363                 padding-bottom: 0;
 364         }
 365
 366         #metaNav {
 367                 padding-top: 2px;
 368         }
 369         #metaNav .nav-icon {
 370                 display: none !important;
 371         }
 372
 373         ul#ticker {
 374                 margin-bottom: 10px;
 375         }
 376
 377         #News div.mainSub,
 378         #About div.mainSub,
 379         #Emissions div.mainSub {
 380                 position: absolute;
 381                 top: 50px;
 382                 left: 320px;
 383                 width: 60%;
 384                 width: calc(98% - 320px);
 385         }
 386
 387         #News div.mainSub ul,
 388         #About div.mainSub ul,
 389         #Emissions div.mainSub ul {
 390                 padding: 0;
 391                 font-family: Reglo;
 392                 font-weight: normal;
 393         }
 394
 395         #News div.mainSub ul li,
 396         #About div.mainSub ul li,
 397         #Emissions div.mainSub ul li {
 398         }
 399
 400         #News .news.wrapper {
 401                 padding: 0;
 402         }
 403
 404         #News .news.wrapper li a {
 405                 margin-left: 0;
 406                 padding-left: 0;
 407         }
 408
 409         #Nav header.marged,
 410         #Main > .marged {
 411                 margin: 0;
 412         }
 413
 414         #Related .wrapper,
 415         #Main > .wrapper,
 416         #Main > .soundfiles > .wrapper,
 417         #Main > .news > .wrapper,
 418         #Nav > .wrapper {
 419                 padding-left: 0;
 420         }
 421
 422         #All #Nav nav ul {
 423                 margin-top: 0;
 424         }
 425
 426         #Related .padded,
 427         div.program.padded {
 428                 padding-top: 0;
 429                 padding-left: 0;
 430         }
 431
 432         div.program.padded {
 433                 padding-top: 1.5em;
 434         }
 435
 436         #fiber-content h2.title {
 437                 margin-top: 0;
 438                 padding-top: 0;
 439         }
 440
 441 }
 442
 443 #backgroundBox {
 444         background: white 0 10px no-repeat url(../img/logoPanikBW.png);
 445 }
 446
 447 #All #backgroundBox h1.top {
 448         font-size: 50px;
 449         padding-left: 10px;
 450         width: 200%;
 451 }
 452 #All h1.top#frequence {
 453         margin-top: 0;
 454         padding-top: 0;
 455         display: block;
 456         padding-bottom: 50px;
 457 }
 458
 459 #backgroundBox h1 {
 460         color: #ff6600 !important;
 461 }
 462
 463 #All h1.top#frequence {
 464         margin-top: 40px;
 465         padding-bottom: 0;
 466 }
 467
 468 #All h1.top#radiopanik {
 469         padding-top: 0;
 470         color: black !important;
 471         padding-bottom: 40px;
 472 }
 473
 474
 475 #specialHome div.rightPart h1,
 476 div.focus {
 477         color: #0000ff;
 478 }
 479
 480 h1.top#frequence {
 481         color: #ff6600;
 482 }
 483
 484 /****************************************************/
 485 /****  SCREEN NAV ****/
 486 #Nav nav{padding:0.1em;}
 487
 488 #Nav input{color:#333;}
 489 #Nav ul li button,
 490 #Nav ul li a {
 491         border-width:0 0 2px 0;
 492         border-style: solid;
 493         border-color: transparent;
 494 }
 495
 496 #Nav .current,
 497 #Nav .active,#Nav .icon-check,#Nav .active *{
 498         font-weight: normal;
 499 }
 500
 501 #Nav .selected a,
 502 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
 503         border-color: #333;
 504 }
 505
 506 #Nav nav{
 507         margin:0;
 508 }
 509
 510 #specialHome h2,
 511 #Nav h2{
 512         margin:0;
 513         padding:0;
 514 }
 515 #Nav nav ul{
 516         margin:1em 0 1em 0;
 517 }
 518
 519 #Nav li {
 520         padding-right: 1em;
 521 }
 522
 523 #Nav li a{
 524         display: inline-block;
 525 }
 526 #Nav nav ul.distributed li {padding: 0;}
 527
 528 #fiber-nav{
 529     font-size:150%;
 530         border-width:0 0 2px 0;border-style:solid;
 531 }
 532 #fiber-nav li, #fiber-nav li a{
 533         display:block;
 534 }
 535 #fiber-nav ul{
 536         padding:0.5em;
 537 }
 538 #fiber-nav li a{
 539         padding:0.5em;
 540 }
 541 #fiber-nav .selected,
 542 #fiber-nav .current{
 543     font-weight:bold;
 544 }
 545
 546 /****************************************************/
 547 /**** PLAYER ****/
 548 /****************************************************/
 549 /*#Home #player{   float: left; } */
 550
 551 #player-container,
 552    #player-container *{border-color:#ff6600 !important;color:#ff6600 !important;}
 553
 554 #player-container .metas, #player-container img{border-color:#fff;}
 555 #player-container .padded{padding:0.3em;}
 556
 557 #player-container button,#player-container a{
 558 }
 559 #player-container .metas{
 560     float:right;
 561 }
 562 #DirectStreamPanikControler {
 563         display:inline !important;
 564 }
 565 #streamSymbol{
 566         font-size:3em;
 567         float:left;
 568         margin-right:5px;
 569         position: relative;
 570         z-index: 10;
 571         top: -6px;
 572 }
 573 #CurrentlyPlaying{
 574         padding:0 0 0 0;
 575 }
 576
 577 #Player.withPlaylist #player-container #Playlist{
 578         border-top:2px solid black;
 579 }
 580 #Player.withPlaylist #player-container #Playlist{
 581         margin-top: 1em;
 582         padding-top: 1em;
 583 }
 584
 585 #player-container #myPlaylist {
 586         clear: both;
 587         padding: 1em 0 0 0;
 588         height: auto;
 589 }
 590
 591 #player-container #myPlaylist a {
 592         margin-right: 30px;
 593         white-space: normal;
 594         padding-bottom: 1ex;
 595 }
 596
 597 #player-container.minimized{
 598         width:auto;
 599         border-width:0px 2px 2px 0 !important;
 600         border-bottom-right-radius:1em;
 601         -moz-border-bottom-right-radius:1em;
 602         -webkit-border-bottom-right-radius:1em;
 603 }
 604 #player-container.minimized #player{
 605         padding:0;
 606 }
 607
 608 /*Playlist*/
 609
 610 #Playlist #playlistLabel{
 611         float:right;
 612
 613 }
 614 #Playlist .playListControls{
 615 }
 616 #Playlist .playListControls button{
 617         margin-right:0.5em;
 618         display:inline-block;
 619 }
 620 #Playlist .playListControls .playPause{
 621         font-size:3em;
 622         margin-right:5px;
 623         float:left;
 624         position: relative;
 625         top: -8px;
 626 }
 627
 628 #Playlist .playing .icon-pause{
 629    -webkit-animation: loading 1s infinite linear;
 630    -moz-animation: loading 1s infinite linear;
 631    -o-animation: loading 1s infinite linear;
 632    animation: loading 1s infinite linear;
 633 }
 634 #Playlist .playlistControls button,#Playlist .playlistControls .button{
 635         margin:0 0.1em 0 0.1em;
 636 }
 637 #Playlist li{
 638         clear:right;
 639 }
 640 #Playlist .soundControls button{}
 641
 642 #player-container #Playlist ol{
 643         clear:right;
 644         padding:0;
 645         margin-left: 50px;
 646 }
 647 #player-container #Playlist ol li{
 648         line-height:1.3em;
 649         padding:0;
 650         margin:0;
 651 }
 652 #Playlist ol li .soundControls{
 653         line-height:1.5em;
 654         height:1.5em;
 655         clear:right;
 656         float:right;
 657 }
 658 #Playlist ol li .title{
 659         margin-right:70px;
 660         display:block;
 661         white-space: nowrap;
 662         text-overflow: ellipsis;
 663         overflow: hidden;
 664 }
 665 #player .active{
 666         text-transform:uppercase;
 667         font-weight:bold;
 668 }
 669 /*limit height of playlist*/
 670 #player #CurrentlyPlaying,
 671  #player-container #Playlist ol{
 672         opacity:0.9;
 673         padding-top:0.2em;
 674         height:auto;
 675         overflow:auto;
 676 }
 677
 678 @media screen and (max-width: 760px) {
 679
 680         #Player{
 681         margin-top:1em;
 682     }
 683         #Player.withPlaylist #player-container #audioPlayer,
 684           #Player.withPlaylist #player-container #audioPlayer,
 685            #Player.withPlaylist #player-container #Playlist{
 686                 float:none !important;
 687                 width:auto !important;
 688         border-right:none !important;
 689                 max-width:auto !important;
 690         }
 691
 692 }
 693
 694 /****************************************************/
 695 /**** #Changing #Footer ... ****/
 696 /****************************************************/
 697 #Changing{
 698 }
 699 #Main{
 700         color:#333;
 701         background-color: white;
 702 }
 703 #Main >.wrapper{
 704         padding-bottom:2em;
 705 }
 706 #Home #Main{
 707         min-height:0;
 708 }
 709 #Changing a:hover,#Changing button:hover {
 710         opacity:0.6;
 711         text-decoration:none;
 712 }
 713 /* GLOBAL SITE NAV */
 714 #userLog{
 715         z-index:2000;
 716         position: fixed;
 717         bottom: 0px;
 718         right: 0px;
 719 }
 720 #userLog .log{
 721         margin:0.3em;
 722         -moz-box-shadow: 0px 0px 3px #000;
 723         -webkit-box-shadow: 0px 0px 3px #000;
 724         box-shadow: 0px 0px 3px #000;
 725         border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
 726         text-align:center;
 727         padding: 0.3em;
 728         font-size:0.9em;
 729         color:black;
 730         background-color:orange;
 731         border: 2px solid black;
 732         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);
 733 }
 734 #userLog .log.info{
 735         background-color:grey;
 736         color:white;
 737 }
 738 #userLog .log.ok{
 739         background-color:green;
 740         border-color:black;
 741         color:white;
 742 }
 743 #userLog .log.error{
 744         background-color:orange;
 745         border-color:yellow;
 746 }
 747 #main {}
 748 #mainLegend{
 749         width:30%;
 750         text-align:right;
 751         float:right;
 752         padding:1em;
 753 }
 754
 755 #Footer{
 756         border-top:2px solid #333;
 757         padding-top: 2em;
 758         padding-bottom: 80px;
 759 }
 760
 761 #Footer ul {
 762 }
 763
 764 #Footer ul li {
 765         padding-right: 2em;
 766 }
 767
 768 #Footer a:hover {
 769         opacity:0.6;
 770 }
 771
 772
 773 /****************************************************/
 774 .inline .link{display:block;padding:1em;}
 775 /**** Liste   ****/
 776 /**** EMISSIONS ****/
 777 #Emission .emission-detail .title{}
 778 /*
 779 */
 780 #Emission-tabs-menu .sub{
 781         margin-bottom:1em;
 782 }
 783 /**** Detail    ****/
 784 .emission-detail .metas{
 785         line-height:1.5em;
 786         float: left;
 787         width: 49%;
 788         margin-top: 0;
 789 }
 790
 791 .emission-detail h4.subtitle {
 792         margin-top: 1em;
 793         font-weight: normal;
 794         font-family: 'Reglo';
 795         text-transform: none;
 796         float: left;
 797 }
 798
 799 .emission-detail ul.schedule {
 800         margin-top: 0;
 801         margin-bottom: 1em;
 802  }
 803
 804 .emission-detail ul.schedule .weekdiff {
 805         font-size: 80%;
 806 }
 807
 808 .emission-detail article {
 809         clear: both;
 810 }
 811
 812 .emission-detail .logo{
 813         float:right;
 814         width: 50%;
 815         margin-bottom: 1ex;
 816 }
 817 @media screen and (max-width: 300px) {
 818         .emission-detail .metas {
 819                 float: none;
 820                 width: auto;
 821                 margin: 0;
 822         }
 823         .emission-detail .logo{max-width:100%;}
 824 }
 825 .emission .mainHeader {
 826     overflow: hidden;
 827     margin-bottom:1.5em;
 828 }
 829
 830 .emission .contacts {
 831         clear: both;
 832 }
 833
 834 /**** Inline    ****/
 835 .emission.inline, .emission.resume {
 836         padding:1em 0 1em 0;
 837 }
 838
 839 .emission.inline div.date {
 840         min-height: 3em;
 841         text-align: center;
 842         display:inline-block;
 843         float:left;
 844         margin-right:1em;
 845 }
 846 .emission .archived {
 847         opacity:0.6;
 848 }
 849
 850 .emission. .link .description {
 851         margin: 0px 0 5px 0;
 852         font-family: "RegloMedium";
 853 }
 854
 855
 856 /**** EPISODE ****/
 857 /**** Detail  ****/
 858
 859 .episode .tag{
 860 }
 861 .episode.resume, .episode.inline{
 862         padding:1em 0.5em 1em;
 863 }
 864 .episode.inline .dateBloc, .episode.resume .dateBloc{
 865         float:left;
 866 }
 867 .episode.resume img {
 868         border: 2px solid black;
 869 }
 870
 871 .episode.resume .title{
 872         margin-bottom:0.5em;
 873 }
 874 .episode.resume .logo{
 875         float: right;
 876 }
 877 .episode.inline .logo {
 878         min-height: 50px;
 879         float: left;
 880         margin-right: 1em;
 881 }
 882 .episode.resume .sound{
 883         float:right;
 884         margin:0 0 0.5em 0.5em;
 885 }
 886 .episode.inline .sound.right{
 887         text-align:center;
 888         font-size:70%;
 889         position: relative;
 890         z-index: 10;
 891 }
 892 .episode.inline .sound.right button{
 893     font-size:1.5em;
 894         display:inline;
 895         text-align:center;
 896         padding-bottom:0.05em;
 897 }
 898 .episode.resume .sound.right .icon-download{
 899         text-align:center;
 900 }
 901 .episode.resume .sound.right .icon-download{
 902         display:block;
 903 }
 904 .episode.detail .logo.right{
 905         max-width:50%;
 906 }
 907
 908 .episode.resume .date .day, .emission-detail .date .day {
 909 }
 910
 911 .episode.resume .content {
 912         padding-left: 5em;
 913 }
 914 .episode.resume .content .title {
 915 }
 916
 917 .episode.resume .logo {
 918         margin:0 0 1em;
 919         max-width:20%;
 920 }
 921 .episode.inline .date{
 922         font-size:80%;
 923 }
 924
 925 #Emission-tabs-menu .emissions-newsitems {
 926         margin-bottom: 2em;
 927 }
 928
 929 #Emission-tabs-menu .emissions-newsitems ul.list li {
 930         border: 0;
 931 }
 932
 933 #Emission-tabs-menu .futur-episodes h5,
 934 #Emission-tabs-menu .recent-episodes h5 {
 935         font-size: 1.2em;
 936 }
 937
 938 #Emission-tabs-menu #search-form {
 939         margin-bottom: 1em;
 940 }
 941
 942 div.extra-soundfiles h3 {
 943         margin-top: 1em;
 944         font-size: 2.5em;
 945 }
 946
 947 div.extra-soundfiles ul li {
 948         position: relative;
 949 }
 950
 951 div.extra-soundfiles ul li div.audio {
 952         display: inline;
 953         top: 5px;
 954         right: 0;
 955         position: absolute;
 956         font-size: 60%;
 957 }
 958
 959 div.extra-soundfiles ul strong {
 960         padding-right: 3em;
 961 }
 962
 963 @media screen and (max-width: 400px) {
 964         .episode .dateBloc{
 965                 width:4em;
 966                 font-size:80%
 967         }
 968
 969         .episode.resume .content {
 970                 padding-left: 4em;
 971         }
 972 }
 973
 974 /****************************************************/
 975 /**** News ****/
 976
 977 #newsRoll {
 978         max-width: 500px;
 979 }
 980
 981 .newsRoll .title{
 982         background:black;
 983         color:white;
 984         bottom:0px;
 985         opacity:0.9;
 986     width:100%;
 987         text-align: left;
 988         font-family: "RegloBold";
 989         position: absolute;
 990         left: 0;
 991 }
 992 .newsRoll .title div{
 993         padding: 1em;
 994 }
 995 .newsRoll a, .newsRoll button img{
 996     border:2px solid #0000ff;
 997 }
 998
 999 .newsRoll .by3 button {
1000         width: 100%;
1001 }
1002
1003 .soundfiles .special a,
1004 .news .special a {
1005         position: relative;
1006 }
1007
1008 .special .labels .item,
1009 .newsRoll .labels .item{
1010         display:block;
1011         background:#0000FF;
1012         color:white;
1013         margin:0.1em;
1014         font-size:0.9em;
1015         padding:0.3em;
1016 }
1017 .newsList .current a{
1018     opacity:0.5;
1019 }
1020 /****************************************************/
1021 .list.news li {
1022 }
1023
1024 .soundfiles ul.custom li a,
1025 .news ul.custom li a { max-width: 98%; }
1026 .news li.item a {padding:1em;}
1027
1028 .soundfiles .logo img,
1029 .news .logo img{
1030         display:block;
1031         border-style:solid;
1032         border-width:2px;
1033 }
1034 ul.newsSpecial{
1035         border-bottom:2px solid #ccc;
1036 }
1037 @media only screen and (max-width: 970px) {
1038         .columns {column-count: 1;      -webkit-column-count: 1;        -moz-column-count: 1;}
1039 }
1040
1041
1042 /****************************************************/
1043 /**** Home & ****/
1044 /****************************************************/
1045
1046 #Home #Nav .wrapper{
1047         max-width:auto !important;
1048         width:auto !important;
1049 }
1050
1051 /*
1052 @media screen and (max-width:800px){
1053         #Home .newsRoll .logo{
1054                 max-width:100px;
1055         }
1056 }
1057 @media screen and (max-width:600px){
1058         #Home .newsRoll .logo{
1059                 max-width:50px;
1060         }
1061 }
1062 */
1063
1064 /****************************************************/
1065 /**** PROGRAM ****/
1066 /****************************************************/
1067
1068 .program.tabs nav ul li{
1069         display:table-cell;
1070         width:14%;
1071         text-align:center;
1072 }
1073
1074 .program.tabs nav ul li.week-arrow {
1075         width: 1%;
1076         padding-bottom: 5px;
1077 }
1078
1079 .program ul .dateBloc {
1080         float:left;
1081         padding-top:1em;
1082 }
1083 .program ul .schedule {
1084         margin-left:5em;
1085 }
1086 .program .nonstop {
1087         text-align:left;
1088 }
1089 .program-week .programDate{
1090         float:left;
1091         width:3em;
1092 }
1093 .program-week .programCell{
1094         margin-left:3.5em;
1095 }
1096 .program-week .nonStop .programDate{
1097         visibility:hidden;
1098 }
1099 .program-week .nonStop .programCell{
1100         font-size:0.9em;
1101         padding-left:50%;
1102         text-align:right;
1103 }
1104 .program-week a.nonstop{
1105         font-size:0.9em;
1106         margin:0.1em;
1107 }
1108 .program-week .inline,.program-week .resume{padding:0;}
1109 .program-week .description{}
1110
1111 .program-week .title {
1112         color: black;
1113         display: inline;
1114 }
1115
1116 .program-week .smooth {
1117         color: #666;
1118         opacity: 1.0;
1119         font-size: 80%;
1120         padding-bottom: 8px;
1121 }
1122
1123 .program-week .emission h5,
1124 .program-week .smooth .title {
1125         color: #333;
1126         text-transform: uppercase;
1127 }
1128
1129 .program-week .description {
1130         color: black;
1131         font-size: 90%;
1132 }
1133
1134 .program-week .programCell:hover {
1135         opacity: 0.5;
1136 }
1137
1138 #Changing .program-week .programCell a {
1139         opacity: 1.0;
1140 }
1141
1142 #Changing .program-week .programCell .smooth a {
1143         opacity: 0.5;
1144 }
1145
1146 #Changing .program-week .programCell .smooth h5 a {
1147         opacity: 1.0;
1148 }
1149
1150
1151 /****************************************************/
1152 /**** SEARCH ****/
1153 /****************************************************/
1154
1155 .search li.previous-page {
1156   margin-bottom: 2ex;
1157   text-align: left;
1158   margin-left: 0ex;
1159   font-style: italic;
1160 }
1161
1162 .search li.next-page {
1163   margin-top: 2ex;
1164   text-align: right;
1165   margin-right: 0;
1166   font-style: italic;
1167 }
1168
1169 .search-filters {
1170   text-align: justify;
1171 }
1172
1173
1174 /****************************************************/
1175 /**** GRILLE ****/
1176 /****************************************************/
1177
1178 #grid #Main {}
1179 #grid th{
1180         color:#000;
1181 }
1182 #grid .heure {
1183         height:50px !important;
1184 }
1185 #grid .heure.vertical {
1186         padding:1.5em 0;
1187 }
1188 #grid .day {
1189         padding:1em 0 1em 0;
1190 }
1191 #grid .nonstop {
1192 }
1193 #grid .item{
1194         padding:0.5em 0.2em 0.5em 0.2em;
1195 }
1196 #grid .cell hr {
1197         border:1px dotted #ddd;
1198         margin:0.3em;
1199 }
1200 #grid .time-label{
1201         margin-top:0.5em;
1202 }
1203
1204 #grid .highlighted,#grid .highlighted  *{
1205         background:#333 !important;
1206         color:white !important;
1207 }
1208
1209 #grid .highlighted,#grid .highlighted  *{
1210         background:#333 !important;
1211         color:white !important;
1212 }
1213 #Emissions li.item.normal{
1214         display:none;
1215 }
1216 #Emissions li.item.hightlighted{
1217         display:block !important;
1218 }
1219
1220 #gridNav span.category {
1221         text-transform: none;
1222 }
1223
1224
1225 /**** Navigation for static pages ****/
1226
1227 #fiber-nav {
1228         font-size: 150%;
1229 }
1230 #fiber-nav li, #fiber-nav li a {
1231         display: block;
1232 }
1233 #fiber-nav ul{
1234         padding: 0.5em;
1235 }
1236 #fiber-nav li a{
1237         padding:0.5em;
1238 }
1239
1240 #fiber-content a {
1241         text-decoration: underline;
1242 }
1243
1244 #fiber-content a:hover {
1245         text-decoration: none;
1246 }
1247
1248 .intro,
1249 .userContent,
1250 #fiber-content,
1251 .content,
1252 .content h5 {
1253         line-height: 120%;
1254 }
1255
1256 .userContent strong,
1257 #fiber-content strong {
1258         text-transform: none;
1259         font-family: "RegloBold";
1260         font-style: normal;
1261 }
1262
1263 .userContent em,
1264 #fiber-content em {
1265         font-family: inherit;
1266         font-style: italic;
1267 }
1268
1269 /**** SCREEN SIZE ADAPTATIONS ****/
1270     html #main{ font-size: 70%; }
1271 body { font-size: 16px;}
1272 @media (max-width: 300px){
1273     body #All{ font-size: 80%; }
1274 }
1275
1276 @media (min-width: 300px) and (max-width:800px){
1277     body #All{ font-size: 85%; }
1278 }
1279
1280 @media (min-width: 700px) and (max-width:1000px){
1281     body #All{ font-size: 90%; }
1282 }
1283
1284 @media (min-width: 1000px) {
1285     body #All{ font-size: 100%; }
1286 }
1287
1288 #subscribe-form {
1289   position: relative;
1290   margin-bottom: 2em;
1291   padding-bottom: 2em;
1292 }
1293
1294 #Home #subscribe-form {
1295   margin-bottom: 0;
1296 }
1297
1298 #subscribe-form ul.errorlist {
1299   position: absolute;
1300   bottom: -2em;
1301   text-align: center;
1302   display: block;
1303   width: 100%;
1304   padding: 0;
1305   list-style: none;
1306   color: #800;
1307 }
1308
1309 #subscribe-form input {
1310         width: 15em;
1311         max-width: none;
1312 }
1313
1314 #Nav div.search form {
1315   padding: 1em 0;
1316 }
1317
1318 div.episode.resume div.title {
1319         white-space: normal;
1320 }
1321
1322 #Home div.program.tabs {
1323         margin: 1em 0;
1324 }
1325
1326 nav#program li {
1327         display: block;
1328         margin: 0;
1329 }
1330
1331 #recent-emissions,
1332 #recent-news,
1333 #recent-sounds {
1334         margin-top: 2em;
1335 }
1336
1337 #recent-emissions h3,
1338 #recent-news h3,
1339 #recent-sounds h3 {
1340         font-size: 140%;
1341 }
1342
1343 #recent-emissions h3.sectionLabel {
1344         margin-bottom: 0;
1345 }
1346
1347 .episode.soundfile {
1348         padding: 0;
1349 }
1350
1351 .soundfile .smooth {
1352         color: #666;
1353         opacity: 1.0;
1354         font-size: 80%;
1355 }
1356
1357
1358 .soundfile p.date {
1359         margin: 0;
1360 }
1361
1362 .frontpage.soundfile .audio {
1363         font-size: 80%;
1364         padding-top: 0.5ex;
1365         padding-bottom: 1ex;
1366 }
1367
1368 #panikdb {
1369         position: absolute;
1370         top: -20px;
1371         right: 0px;
1372         background: white;
1373         color: #888;
1374         padding: 5px 10px;
1375         border: 1px solid #888;
1376         border-width: 1px 1px 0 1px;
1377         -webkit-transform-origin: bottom right;
1378         -webkit-transform: rotate(270deg);
1379         -moz-transform-origin: bottom right;
1380         -moz-transform: rotate(270deg);
1381         transform-origin: bottom right;
1382         transform: rotate(270deg);
1383 }
1384
1385 img.logo.right {
1386         margin-bottom: 1em;
1387 }
1388
1389 .soundfile .special,
1390 .newsitem .special {
1391         margin-bottom: 2em;
1392 }
1393
1394 .newsitem .special .smooth {
1395         padding-top: 5px;
1396 }
1397
1398 /* USER CONTENT */
1399
1400 div.userContent ul {
1401         margin: 1em 0;
1402 }
1403
1404 div.userContent h1,
1405 div.userContent h2,
1406 div.userContent h3,
1407 div.userContent h4 {
1408         text-transform: none;
1409         font-family: "Reglo";
1410         font-weight: normal;
1411 }
1412
1413 div.userContent h1 { font-size: 2em; }
1414 div.userContent h2 { font-size: 1.8em; }
1415 div.userContent h3 { font-size: 1.5em; }
1416 div.userContent h4 { font-size: 1.5em; }
1417 div.userContent a { text-decoration: underline; }
1418
1419 div.userContent a.tag { text-decoration: none; }
1420
1421 @media screen and (max-width: 760px) {
1422         #streamSymbol{
1423                 top: 0;
1424         }
1425         #MainHeader {
1426                 margin: 0 auto;
1427         }
1428         #All #backgroundBox h1.top {
1429                 width: 94%;
1430         }
1431
1432         #Player.withoutPlaylist #player-container #audioPlayer{
1433             margin:auto;
1434             width:100%;
1435         }
1436         #Player.withoutPlaylist #player-container #audioPlayer #Live{
1437             font-size:150%;
1438         }
1439
1440
1441         #player-container { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
1442         #player-container{
1443                 background:white 0% 50% no-repeat url('../img/logoPanikBW.png');
1444         }
1445         #player-container{
1446                 z-index:500;
1447                 position:fixed;
1448                 width:100% !important;
1449                 /*top:2em;*/
1450                 font-size:80%;
1451                 bottom:0em;
1452                 border-bottom:none;
1453         }
1454         #Player.withPlaylist #player-container #audioPlayer{
1455                 float:left;
1456                 width:50%;
1457                 border-right:2px solid black;
1458         }
1459         #Player.withPlaylist #player-container #Playlist{
1460                 float:right;
1461                 width:49%;
1462                 text-align:left;
1463         }
1464         #player-container #myPlaylist {
1465                 padding: 0;
1466         }
1467
1468         #player-container #myPlaylist a {
1469                 white-space: nowrap;
1470         }
1471
1472         #player-container #Playlist ol{
1473                 margin-left: 30px;
1474         }
1475 }
1476
1477 div.emission-logo {
1478         margin-left: 1em;
1479 }
1480
1481 div.extra-soundfiles {
1482         clear: both;
1483 }
1484
1485 h3.episode-subtitle {
1486         font-size: 2.5em;
1487 }
1488
1489 .waveform {
1490         display: none;
1491         position: relative;
1492 }
1493
1494 .waveform span {
1495         background: #3A3A3A;
1496         display: inline-block;
1497         width: 0.50%;
1498 }
1499
1500 .waveform span.done {
1501         background: linear-gradient(to top, #3A3A3A 0%, #858585 80%);
1502 }
1503
1504 .waveform span.done.current + span {
1505         background: #FF771C;
1506 }
1507
1508 .waveform i.duration {
1509         position: absolute;
1510         right: 4px;
1511         bottom: 4px;
1512         color: #FF771C;;
1513         text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
1514         font-style: normal;
1515         font-weight: bold;
1516 }
1517
1518 #fiber-content div.extra-soundfiles strong {
1519         text-transform: uppercase;
1520
1521 }
1522
1523 .nonstop-track-title, .nonstop-track-artist {
1524         font-size: 80%;
1525 }
1526
1527 .soundfile-info {
1528         padding-right: 75px;
1529 }
1530
1531 #fiber-content div.extra-soundfiles .soundfile-info strong {
1532         padding-right: 0;
1533 }
1534
1535 #fiber-content div.extra-soundfiles .soundfile-info a {
1536         text-decoration: none;
1537 }
1538
1539 #fiber-content div.extra-soundfiles {
1540         margin: 1em 0;
1541 }
1542
1543 div.extra-soundfiles div.logo {
1544         display: inline-block;
1545 }
1546
1547 div#fiber-content div.extra-soundfiles ul.list {
1548         display: inline-block;
1549         width: 88%;
1550         width: calc(100% - 70px);
1551 }
1552
1553 div.download-links {
1554         position: absolute;
1555         z-index: 1000;
1556         text-align: right;
1557 }
1558
1559 div.hidden-download-links {
1560         display: none !important;
1561 }
1562
1563 div.episode-detail div.sound div.download-links {
1564         display: inline-block;
1565         padding-top: 1ex;
1566         padding-left: 1ex;
1567 }
1568
1569 div.extra-soundfiles div.download-links {
1570         background: white;
1571 }
1572
1573 h1.top a.dimmed {
1574         opacity: 0.7;
1575 }
1576
1577 div#agenda div.content-inline {
1578         margin-bottom: 1em;
1579 }
1580
1581 div.previous-and-next-months {
1582         margin-top: 1em;
1583 }
1584
1585 div.publication-date.date.smooth {
1586         font-size: 80%;
1587 }
1588
1589 #All h1.top.fullwidth {
1590         width: 150%;
1591 }