panikweb_templates/static/css/specifics.css

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