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 @import url(http://fonts.googleapis.com/css?family=Montserrat);
  11
  12 .resymbol:hover,.control:hover{    opacity:0.5;    }
  13 .date, .dateBloc {
  14         font-family: "Reglo";
  15         text-transform: uppercase;
  16 }
  17 .userContent{font-family: 'Montserrat', sans-serif;}
  18 .inline .date, .resume .date{
  19         text-align: center;
  20 }
  21 .dateBloc{width:4em;
  22         text-align: center;}
  23 .dateBloc{display:inline-block;}
  24 .dateBloc *{line-height: 100%;}
  25 .dateBloc  .day {font-size: 1.8em;}
  26 .dateBloc .number {font-size: 1.8em;}
  27 .dateBloc  .month {font-size: 0.8em;}
  28 .dateBloc .time {font-size: 1.2em;margin: 0.2em 0;}
  29
  30 .dateBloc.small{
  31         font-size: 80%;
  32 }
  33
  34 .tabs .ui-tabs-nav {
  35     font-family: "Reglo";
  36     text-transform: uppercase;
  37 }
  38 .legend{
  39         font-size:1.2em;
  40         font-weight:bold;
  41         border-bottom:3px solid black;
  42         padding: 0.2em 0 0.2em 0;
  43         margin: 0.2em 0 0.2em 0;
  44 }
  45 #Main .sectionLabel{
  46         margin-bottom:1em;
  47 }
  48
  49 .sectionLabel, .label {
  50     text-transform: uppercase;
  51     font-family: "Reglo";
  52     font-size:1.3em;
  53 }
  54 .label.relative{
  55     background-color:black;
  56     position: absolute;
  57     left:10px;
  58     top:-5px;
  59     color:white;
  60     padding:5px 7px 0px 7px;
  61 }
  62
  63 /****************************************************/
  64 /* WRAPPER */
  65 /****************************************************/
  66 .wrapper {max-width: 1260px; margin:auto;padding:0 1%;}
  67 .wrapper.text {max-width: 780px; margin:auto;}
  68 .wrapper.half {max-width: 510px; margin:auto;}
  69 .wrapper.sided{         max-width:1260px;       }
  70 .wrapper .rightPart{margin-top:1em;}
  71 @media screen and (max-width: 400px) {
  72     .wrapper {padding:0 3%;}
  73 }
  74 @media screen and (min-width: 400px) and (max-width: 1024px){
  75     .wrapper {padding:0 5%;}
  76 }
  77 @media screen and (min-width: 1024px) and (max-width: 1260px){
  78     .wrapper {padding:0 7%;}
  79 }
  80
  81 @media screen and (min-width: 760px) {
  82         .wrapper .rightPart{
  83         margin-top:0;
  84         }
  85         .wrapper.sided .leftPart,
  86         .wrapper.sided .rightPart{
  87                 width:45%;
  88         }
  89         .wrapper.navigation .leftPart{
  90                 width:60%;
  91         }
  92         .wrapper.navigation .rightPart{
  93                 width:35%;
  94         }
  95         .wrapper .leftPart{
  96                 float:left;
  97         }
  98         .wrapper .rightPart{
  99                 float:right;
 100         }
 101         #specialHome {
 102                 padding-left: 0;
 103         }
 104     /*
 105         #specialHome .leftPart,
 106         #specialHome .rightPart {
 107                 width: 100%;
 108         }
 109     */
 110 }
 111
 112
 113 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
 114 nav.menu{
 115         width:100%;
 116         text-align: justify;
 117         text-justify: distribute-all-lines;
 118 }
 119 nav.menu li{
 120         display: inline-block;
 121         margin-right:2em;
 122 }
 123
 124 button.tag, a.tag{
 125         font-size:0.9em;
 126         background:white;
 127         font-family: "RegloBold";
 128         text-transform: uppercase;
 129         display:inline-block;
 130         border: 1px solid #CCC !important;
 131         color:#342E2E;
 132         margin: 0.2em;
 133         padding: 0.3em;
 134         border-radius: 0.7em;
 135         -moz-border-radius: 0.7em;
 136         -webkit-border-radius: 0.7em;
 137 }
 138 button.check, a.check {
 139         font-size:0.9em;
 140         text-transform: none;
 141         display:inline-block;
 142         margin: 0.2em;
 143         padding: 0.3em;
 144 }
 145 .category{
 146         font-family: "RegloBold";
 147         text-transform: uppercase;
 148 }
 149 button.check:before, a.check:before {
 150         display:inline-block;
 151         width:1.5em;
 152 }
 153 .box{
 154         padding:0.2em 0.5em 0.2em 0.5em;
 155         border-radius: 0.2em;
 156         -moz-border-radius: 0.2em;
 157         -webkit-border-radius: 0.2em;
 158         background:#222;
 159         color:#fff;
 160 }
 161 .ui-tooltip {
 162         border:1px solid white;
 163         position:absolute;
 164         margin:0;
 165         padding: 0.5em;
 166         background:#222;
 167         color: white;
 168         z-index: 9999;
 169         max-width: 50%;
 170         background: white;
 171         color: #222;
 172         border-color: #222;
 173 }
 174 /****************************************************/
 175 /**** BODY ****/
 176 /****************************************************/
 177 body{
 178         background: white;
 179         color: #333;
 180 }
 181 /****************************************************/
 182 /**** metaNAV ****/
 183 /****************************************************/
 184
 185 #metaNav {
 186         color: #e8e8e8;
 187         background-color: #3a3a3a;
 188         position:fixed;
 189         z-index:1000;
 190         top:0px;
 191         width:100%;
 192 }
 193 #metaNav ul{
 194 }
 195 #metaNav ul li{
 196         float: left;
 197         padding: 0 1em;
 198         white-space: nowrap;
 199         text-overflow: ellipsis;
 200         overflow:hidden;
 201 }
 202
 203 #metaNav ul li#nav-search {
 204         float: right;
 205 }
 206
 207 #metaNav ul li a{
 208         height: 2em;
 209         display:block;
 210 }
 211
 212 #metaNav ul li a span{
 213     padding:0.4em 0 0.5em 0;
 214         display:inline-block;
 215 }
 216
 217 #metaNav ul li a span.nav-icon {
 218 }
 219
 220 #metaNav a:focus, #metaNav a:hover{
 221     opacity:0.8;
 222 }
 223 #metaNav ul li.active, #metaNav ul li.active a{
 224         color: white;
 225 }
 226
 227 #metaNav ul li.active span.iconLabel {
 228 }
 229
 230 #metaNav li#nav-search a {
 231         display: inline;
 232 }
 233
 234 #metaNav form {
 235         display: inline;
 236 }
 237
 238 #metaNav input {
 239         border: 1px solid #ececec;
 240 }
 241
 242 @media screen and (max-width:760px){
 243         #metaNav .iconLabel {display:none;}
 244         #metaNav ul li a span.nav-icon { display: inline-block; }
 245         #metaNav form {
 246                 display: none;
 247         }
 248 }
 249
 250 /****************************************************/
 251 /**** Commons ****/
 252 /****************************************************/
 253
 254 .audio button {color:#ff6600 !important;}
 255 /****************************************************/
 256 /**** HEADER ****/
 257 /****************************************************/
 258
 259 /* PANIK LOGO */
 260 #Commons{
 261         background: #fff;
 262 }
 263 #Commons .wrapper{
 264 }
 265 #mainHeader {
 266         padding-bottom:1em;
 267 }
 268 #mainHeader {
 269     font-size:70%;
 270 }
 271 #mainHeader *{color:black !important;line-height:1em;}
 272 #mainHeader #radioPanik{}
 273
 274 #Panik img{display:block;margin:auto;max-height:200px;}
 275 #mainHeader h1{
 276         padding-left:75px;
 277 }
 278 #player-container.fixed { width:100%;left:0;border-width: 2px 0 0 0;border-style:solid;}
 279 #player-container #player{
 280     padding:0 0 0 0;
 281 }
 282
 283
 284 @media screen and (max-width: 760px) {
 285         #All h1.top {
 286                 font-size: 60px;
 287                 padding: 0 3%;
 288         }
 289         #specialHome .leftPart h1.top {
 290                 display: none;
 291         }
 292 }
 293
 294 @media screen and (min-width: 760px) {
 295         #Commons {
 296                 float: left;
 297                 width: 20%;
 298                 width: -webkit-calc(0% + 240px);
 299                 width: -moz-calc(0% + 240px);
 300                 width: calc(0% + 240px);
 301         }
 302         #Changing {
 303                 position: relative;
 304                 float: right;
 305                 width: 78%;
 306                 width: -webkit-calc(100% - 280px);
 307                 width: -moz-calc(100% - 280px);
 308                 width: calc(100% - 280px);
 309         }
 310         #All h1.top {
 311                 font-size: 120px;
 312                 font-family: Reglo;
 313                 text-transform: uppercase;
 314                 -webkit-transform: scale(0.5, 1);
 315                 -webkit-transform-origin: 0;
 316                 -moz-transform: scale(0.5, 1);
 317                 -moz-transform-origin: 0;
 318                 transform: scale(0.5, 1);
 319                 transform-origin: 0;
 320                 padding-left: 0;
 321                 padding-top: 40px;
 322         }
 323
 324         #metaNav {
 325                 padding-top: 2px;
 326         }
 327         #metaNav .nav-icon {
 328                 display: none !important;
 329         }
 330
 331         #Player #CurrentlyPlaying {
 332                 margin-top: 50px;
 333         }
 334
 335         #Player .fixed #CurrentlyPlaying {
 336                 margin-top: 0;
 337         }
 338
 339         ul#ticker {
 340                 margin-bottom: 10px;
 341         }
 342
 343         #About div.mainSub,
 344         #Emissions div.mainSub {
 345                 position: absolute;
 346                 top: 50px;
 347                 left: 320px;
 348         }
 349
 350         #About div.mainSub ul,
 351         #Emissions div.mainSub ul {
 352                 padding: 0;
 353                 font-family: Reglo;
 354                 font-weight: normal;
 355         }
 356
 357         #About div.mainSub ul li,
 358         #Emissions div.mainSub ul li {
 359         }
 360
 361         #News .news.wrapper {
 362                 padding: 0;
 363         }
 364
 365         #News .news.wrapper li a {
 366                 margin-left: 0;
 367                 padding-left: 0;
 368         }
 369
 370         #Nav header.marged,
 371         #Main > .marged {
 372                 margin: 0;
 373         }
 374
 375         #Related .wrapper,
 376         #Main > .wrapper,
 377         #Main > .news > .wrapper,
 378         #Nav > .wrapper {
 379                 padding-left: 0;
 380         }
 381
 382         #All #Nav nav ul {
 383                 margin-top: 0;
 384         }
 385
 386         #Related .padded,
 387         div.program.padded {
 388                 padding-top: 0;
 389                 padding-left: 0;
 390         }
 391
 392         #fiber-content h2.title {
 393                 margin-top: 0;
 394                 padding-top: 0;
 395         }
 396
 397 }
 398
 399 #backgroundBox {
 400         background: white 0 10px no-repeat url(../img/logoPanikBW.png);
 401 }
 402
 403 #All #backgroundBox h1.top {
 404         font-size: 50px;
 405         padding-left: 10px;
 406         width: 200%;
 407 }
 408 #All h1.top#frequence {
 409         margin-top: 0;
 410         padding-top: 0;
 411         display: block;
 412         padding-bottom: 50px;
 413 }
 414
 415 #backgroundBox h1 {
 416         color: #ff6600 !important;
 417 }
 418
 419 #All h1.top#frequence {
 420         margin-top: 40px;
 421         padding-bottom: 0;
 422 }
 423
 424 #All h1.top#radiopanik {
 425         padding-top: 0;
 426         color: black !important;
 427         padding-bottom: 40px;
 428 }
 429
 430
 431 #specialHome div.rightPart h1,
 432 div.focus {
 433         color: #0000ff;
 434 }
 435
 436 h1.top#frequence {
 437         color: #ff6600;
 438 }
 439
 440 /****************************************************/
 441 /****  SCREEN NAV ****/
 442 #Nav nav{padding:0.1em;}
 443
 444 #Nav input{color:#333;}
 445 #Nav ul li button,
 446 #Nav ul li a {
 447         border-width:0 0 2px 0;
 448         border-style: solid;
 449         border-color: transparent;
 450 }
 451
 452 #Nav .current,
 453 #Nav .active,#Nav .icon-check,#Nav .active *{
 454         font-weight:bold;
 455 }
 456
 457 #Nav ul li.current a, #Nav ul a.active, #Nav button.active {
 458         border-color: #333;
 459 }
 460
 461 #Nav nav{
 462         margin:0;
 463 }
 464
 465 #specialHome h2,
 466 #Nav h2{
 467         margin:0;
 468         padding:0;
 469 }
 470 #Nav nav ul{
 471         margin:1em 0 1em 0;
 472 }
 473
 474 #Nav li {
 475         padding-right: 1em;
 476 }
 477
 478 #Nav li a{
 479         display: inline-block;
 480 }
 481 #Nav nav ul.distributed li {padding: 0;}
 482
 483 #fiber-nav{
 484     font-size:150%;
 485         border-width:0 0 2px 0;border-style:solid;
 486 }
 487 #fiber-nav li, #fiber-nav li a{
 488         display:block;
 489 }
 490 #fiber-nav ul{
 491         padding:0.5em;
 492 }
 493 #fiber-nav li a{
 494         padding:0.5em;
 495 }
 496 #fiber-nav .current{
 497     font-weight:bold;
 498 }
 499
 500 /****************************************************/
 501 /**** PLAYER ****/
 502 /****************************************************/
 503 /*#Home #player{   float: left; } */
 504
 505 #player-container,
 506    #player-container *{border-color:#ff6600 !important;color:#ff6600 !important;}
 507 #player-container.fixed{
 508         background:white 0% 50% no-repeat url('../img/logoPanikBW.png');
 509 }
 510
 511 #player-container .metas, #player-container img{border-color:#fff;}
 512 #player-container .padded{padding:0.3em;}
 513
 514 #player-container button,#player-container a{
 515 }
 516 #player-container .metas{
 517     float:right;
 518 }
 519 #DirectStreamPanikControler {
 520         display:inline !important;
 521 }
 522 #streamSymbol{
 523         font-size:3em;
 524         float:left;
 525         margin-right:5px;
 526 }
 527 #CurrentlyPlaying{
 528         padding:0 0 0 0;
 529 }
 530 #DirectStreamPanikControler .label{
 531 }
 532 #player-container.fixed{
 533         z-index:500;
 534         position:fixed;
 535         width:100% !important;
 536         /*top:2em;*/
 537         font-size:80%;
 538         bottom:0em;
 539         border-bottom:none;
 540 }
 541
 542 #Player.withoutPlaylist #player-container #audioPlayer{
 543     margin:auto;
 544     width:100%;
 545 }
 546 #Player.withoutPlaylist #player-container #audioPlayer #Live{
 547     font-size:150%;
 548 }
 549 #Player.withPlaylist #player-container.fixed #audioPlayer{
 550         float:left;
 551         width:50%;
 552         border-right:2px solid black;
 553 }
 554 #Player.withPlaylist #player-container.fixed #Playlist{
 555         float:right;
 556         width:49%;
 557         text-align:left;
 558 }
 559 #Player.withoutPlaylist #player-container.fixed #Playlist{
 560 }
 561 #Player.withPlaylist #player-container #Playlist{
 562         border-top:2px solid black;
 563 }
 564 #Player.withPlaylist #player-container.normal #Playlist{
 565         margin-top: 1em;
 566         padding-top: 1em;
 567 }
 568
 569 #player-container.normal #myPlaylist {
 570         clear: both;
 571         padding: 1em 0 0 0;
 572         height: auto;
 573 }
 574
 575 #player-container.normal #myPlaylist a {
 576         margin-right: 30px;
 577         white-space: normal;
 578         padding-bottom: 1ex;
 579 }
 580
 581 #player-container.normal #myPlaylist li {
 582 }
 583
 584 #player-container.minimized{
 585         width:auto;
 586         border-width:0px 2px 2px 0 !important;
 587         border-bottom-right-radius:1em;
 588         -moz-border-bottom-right-radius:1em;
 589         -webkit-border-bottom-right-radius:1em;
 590 }
 591 #player-container.minimized #player{
 592         padding:0;
 593 }
 594
 595 /*Playlist*/
 596 #Playlist{
 597 }
 598
 599 #Playlist button{
 600 }
 601 #Playlist #playlistLabel{
 602         float:right;
 603
 604 }
 605 #Playlist .playListControls{
 606 }
 607 #Playlist .playListControls button{
 608         margin-right:0.5em;
 609         display:inline-block;
 610 }
 611 #Playlist .playListControls .playPause{
 612         font-size:3em;
 613         margin-right:5px;
 614         float:left;
 615 }
 616
 617 #Playlist .playing .icon-pause{
 618    -webkit-animation: loading 1s infinite linear;
 619    -moz-animation: loading 1s infinite linear;
 620    -o-animation: loading 1s infinite linear;
 621    animation: loading 1s infinite linear;
 622 }
 623 #Playlist .playlistControls button,#Playlist .playlistControls .button{
 624         margin:0 0.1em 0 0.1em;
 625 }
 626 #Playlist li{
 627         clear:right;
 628 }
 629 #Playlist .soundControls button{}
 630
 631 #player-container #Playlist ol{
 632         clear:right;
 633         padding:0 0 0 1.5em;
 634         height:1.3em;
 635         overflow:hidden;
 636 }
 637 #player-container #Playlist ol li{
 638         line-height:1.3em;
 639         padding:0;
 640         margin:0;
 641 }
 642 #Playlist ol li .soundControls{
 643         line-height:1.5em;
 644         height:1.5em;
 645         clear:right;
 646         float:right;
 647 }
 648 #Playlist ol li .title{
 649         margin-right:70px;
 650         display:block;
 651         white-space: nowrap;
 652         text-overflow: ellipsis;
 653         overflow: hidden;
 654 }
 655 #player .active{
 656         text-transform:uppercase;
 657         font-weight:bold;
 658 }
 659 /*limit height of playlist*/
 660 #PlayerHelp,#player-container #Playlist ol.deploy{
 661         height:auto;
 662         max-height:12em;
 663         overflow:auto;
 664 }
 665 #player #CurrentlyPlaying,
 666  #player-container #Playlist ol{
 667         opacity:0.9;
 668         padding-top:0.2em;
 669 }
 670
 671 @media screen and (max-width: 760px) {
 672
 673         #Player{
 674         margin-top:1em;
 675     }
 676         #Player.withPlaylist #player-container #audioPlayer,
 677           #Player.withPlaylist #player-container #audioPlayer,
 678            #Player.withPlaylist #player-container #Playlist{
 679                 float:none !important;
 680                 width:auto !important;
 681         border-right:none !important;
 682                 max-width:auto !important;
 683         }
 684
 685 }
 686 @media screen and (min-width: 760px) {
 687
 688         #Player{
 689     }
 690         #Player #player-container.fixed #audioPlayer{
 691                 max-width:50%;
 692         }
 693     #Player.withPlaylist #player-container.fixed #Playlist{
 694             border-top:none;
 695     }
 696 }
 697
 698 /****************************************************/
 699 /**** #Changing #Footer ... ****/
 700 /****************************************************/
 701 #Changing{
 702 }
 703 #Main{
 704         color:#333;
 705         background-color: white;
 706 }
 707 #Main >.wrapper{
 708         padding-bottom:2em;
 709 }
 710 #Home #Main{
 711         min-height:0;
 712 }
 713 #Changing a:hover,#Changing button:hover {
 714         opacity:0.6;
 715         text-decoration:none;
 716 }
 717 /* GLOBAL SITE NAV */
 718 #userLog{
 719         z-index:2000;
 720         position: fixed;
 721         bottom: 0px;
 722         right: 0px;
 723 }
 724 #userLog .log{
 725         margin:0.3em;
 726         -moz-box-shadow: 0px 0px 3px #000;
 727         -webkit-box-shadow: 0px 0px 3px #000;
 728         box-shadow: 0px 0px 3px #000;
 729         border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
 730         text-align:center;
 731         padding: 0.3em;
 732         font-size:0.9em;
 733         color:black;
 734         background-color:orange;
 735         border: 2px solid black;
 736         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);
 737 }
 738 #userLog .log.info{
 739         background-color:grey;
 740         color:white;
 741 }
 742 #userLog .log.ok{
 743         background-color:green;
 744         border-color:black;
 745         color:white;
 746 }
 747 #userLog .log.error{
 748         background-color:orange;
 749         border-color:yellow;
 750 }
 751 #main {}
 752 #mainLegend{
 753         width:30%;
 754         text-align:right;
 755         float:right;
 756         padding:1em;
 757 }
 758
 759 #Footer{
 760         border-top:2px solid #333;
 761         padding-top: 2em;
 762         padding-bottom: 80px;
 763 }
 764
 765 #Footer ul {
 766 }
 767
 768 #Footer ul li {
 769         padding-right: 2em;
 770 }
 771
 772 #Footer a:hover {
 773         opacity:0.6;
 774 }
 775
 776
 777 /****************************************************/
 778 .inline .link{display:block;padding:1em;}
 779 /**** Liste   ****/
 780 /**** EMISSIONS ****/
 781 #Emission .emission-detail .title{}
 782 /*
 783 */
 784 #Emission-tabs-menu .sub{
 785         margin-bottom:1em;
 786 }
 787 /**** Detail    ****/
 788 .emission-detail .metas{
 789         line-height:1.5em;
 790 }
 791 .emission-detail .description{
 792         font-family: "RegloBold";
 793         font-size: 1.3em;
 794         margin:0em 0 1em 0;
 795         line-height:1.5em;
 796 }
 797 .emission-detail .logo{
 798         float:right;
 799         max-width:50%;
 800 }
 801 @media screen and (max-width: 300px) {
 802         .emission-detail .metas {
 803                 float: none;
 804                 width: auto;
 805                 margin: 0;
 806         }
 807         .emission-detail .logo{max-width:100%;}
 808 }
 809 .emission .mainHeader {
 810     overflow: hidden;
 811     margin-bottom:1.5em;
 812 }
 813 /**** Inline    ****/
 814 .emission.inline, .emission.resume {
 815         padding:1em 0 1em 0;
 816 }
 817
 818 .emission.inline div.date {
 819         min-height: 3em;
 820         text-align: center;
 821         display:inline-block;
 822         float:left;
 823         margin-right:1em;
 824 }
 825 .emission .archived {
 826         opacity:0.6;
 827 }
 828
 829 .emission. .link .description {
 830         margin: 0px 0 5px 0;
 831         font-family: "RegloMedium";
 832 }
 833
 834
 835 /**** EPISODE ****/
 836 /**** Detail  ****/
 837
 838 .episode .tag{
 839 }
 840 .episode.resume, .episode.inline{
 841         padding:1em 0.5em 1em;
 842 }
 843 .episode.inline .dateBloc, .episode.resume .dateBloc{
 844         float:left;
 845 }
 846 .episode.resume img {
 847         border: 2px solid black;
 848 }
 849
 850 .episode.resume .title{
 851         margin-bottom:0.5em;
 852 }
 853 .episode.resume .logo{
 854         float: right;
 855 }
 856 .episode.inline .logo{
 857         min-height: 50px;
 858         float: left;
 859         margin-right:0.5em;
 860 }
 861 .episode.resume .sound{
 862         float:right;
 863         margin:0 0 0.5em 0.5em;
 864 }
 865 .episode.inline .sound.right{
 866
 867         width:4.5em;
 868         text-align:center;
 869         font-size:70%;
 870 }
 871 .episode.inline .sound.right button{
 872     font-size:1.5em;
 873         display:inline;
 874         text-align:center;
 875         padding-bottom:0.05em;
 876 }
 877 .episode.resume .sound.right .icon-download{
 878         text-align:center;
 879 }
 880 .episode.resume .sound.right .icon-download{
 881         display:block;
 882 }
 883 .episode.detail .logo.right{
 884         max-width:50%;
 885 }
 886
 887 .episode.resume .date .day, .emission-detail .date .day {
 888 }
 889
 890 .episode.resume .content {
 891         padding-left: 5em;
 892 }
 893 .episode.resume .content .title {
 894 }
 895
 896 .episode.resume .logo {
 897         margin:0 0 1em;
 898         max-width:20%;
 899 }
 900 .episode.inline .date{
 901         font-size:80%;
 902 }
 903
 904 @media screen and (max-width: 400px) {
 905         .episode .dateBloc{
 906                 width:4em;
 907                 font-size:80%
 908         }
 909
 910         .episode.resume .content {
 911                 padding-left: 4em;
 912         }
 913         .resume .logo img,.inline .logo img{width:30px !important;}
 914 }
 915
 916 /****************************************************/
 917 /**** News ****/
 918
 919 .newsRoll .title{
 920         background:black;
 921         color:white;
 922         bottom:0px;
 923         opacity:0.9;
 924     width:100%;
 925         text-align: left;
 926         font-family: "RegloBold";
 927         position: absolute;
 928         left: 0;
 929 }
 930 .newsRoll .title div{
 931         padding: 1em;
 932 }
 933 .newsRoll a, .newsRoll button img{
 934     border:2px solid #0000ff;
 935 }
 936
 937 .news .special a {
 938         position: relative;
 939 }
 940
 941 .special .labels .item,
 942 .newsRoll .labels .item{
 943         display:block;
 944         background:#0000FF;
 945         color:white;
 946         margin:0.1em;
 947         font-size:0.9em;
 948         padding:0.3em;
 949 }
 950 .newsList .current a{
 951     opacity:0.5;
 952 }
 953 .newsList .current img{
 954     border-color:#0000FF;
 955 }
 956 /****************************************************/
 957 .list.news li {
 958 }
 959 .news ul.custom li a { -webkit-backface-visibility: hidden; }
 960 .news li.item a{padding:1em;}
 961
 962 .news .logo img{
 963         display:block;
 964         border-style:solid;
 965         border-width:2px;
 966 }
 967 ul.newsSpecial{
 968         border-bottom:2px solid #ccc;
 969 }
 970 @media only screen and (max-width: 970px) {
 971         .columns {column-count: 1;      -webkit-column-count: 1;        -moz-column-count: 1;}
 972 }
 973
 974 /****************************************************/
 975 /**** Home & ****/
 976 /****************************************************/
 977
 978 #Home #Nav .wrapper{
 979         max-width:auto !important;
 980         width:auto !important;
 981 }
 982
 983 /*
 984 @media screen and (max-width:800px){
 985         #Home .newsRoll .logo{
 986                 max-width:100px;
 987         }
 988 }
 989 @media screen and (max-width:600px){
 990         #Home .newsRoll .logo{
 991                 max-width:50px;
 992         }
 993 }
 994 */
 995
 996 /****************************************************/
 997 /**** PROGRAM ****/
 998 /****************************************************/
 999
1000 .program.tabs nav ul li{
1001         display:table-cell;
1002         width:14%;
1003         text-align:center;
1004 }
1005
1006 .program.tabs nav ul li.week-arrow {
1007         width: 1%;
1008         padding-bottom: 5px;
1009 }
1010
1011 .program ul .dateBloc {
1012         float:left;
1013         padding-top:1em;
1014 }
1015 .program ul .schedule {
1016         margin-left:5em;
1017 }
1018 .program .nonstop {
1019         text-align:left;
1020 }
1021 .program-week .programDate{
1022         float:left;
1023         width:3em;
1024 }
1025 .program-week .programCell{
1026         margin-left:3.5em;
1027 }
1028 .program-week .nonStop .programDate{
1029         visibility:hidden;
1030 }
1031 .program-week .nonStop .programCell{
1032         font-size:0.9em;
1033         padding-left:50%;
1034         text-align:right;
1035 }
1036 .program-week a.nonstop{
1037         font-size:0.9em;
1038         margin:0.1em;
1039         color: #888;
1040 }
1041 .program-week .inline,.program-week .resume{padding:0;}
1042 .program-week .description{}
1043 .program-week .metas{display:inline-block;}
1044
1045 /****************************************************/
1046 /**** SEARCH ****/
1047 /****************************************************/
1048
1049 .search li.previous-page {
1050   margin-bottom: 2ex;
1051   text-align: left;
1052   margin-left: 0ex;
1053   font-style: italic;
1054 }
1055
1056 .search li.next-page {
1057   margin-top: 2ex;
1058   text-align: right;
1059   margin-right: 0;
1060   font-style: italic;
1061 }
1062
1063 .newsFilters .count-0{
1064         display:none !important;
1065 }
1066 /****************************************************/
1067 /**** GRILLE ****/
1068 /****************************************************/
1069
1070 #grid #Main {}
1071 #grid th{
1072         color:#000;
1073 }
1074 #grid .heure {
1075         height:50px !important;
1076 }
1077 #grid .heure.vertical {
1078         padding:1.5em 0;
1079 }
1080 #grid .day {
1081         padding:1em 0 1em 0;
1082 }
1083 #grid .nonstop {
1084 }
1085 #grid .item{
1086         padding:0.5em 0.2em 0.5em 0.2em;
1087 }
1088 #grid .cell hr {
1089         border:1px dotted #ddd;
1090         margin:0.3em;
1091 }
1092 #grid .time-label{
1093         margin-top:0.5em;
1094 }
1095
1096 #grid .highlighted,#grid .highlighted  *{
1097         background:#333 !important;
1098         color:white !important;
1099 }
1100
1101 #grid .highlighted,#grid .highlighted  *{
1102         background:#333 !important;
1103         color:white !important;
1104 }
1105 #Emissions li.item.normal{
1106         display:none;
1107 }
1108 #Emissions li.item.hightlighted{
1109         display:block !important;
1110 }
1111
1112
1113 /**** Navigation for static pages ****/
1114
1115 #fiber-nav {
1116         font-size: 150%;
1117 }
1118 #fiber-nav li, #fiber-nav li a {
1119         display: block;
1120 }
1121 #fiber-nav ul{
1122         padding: 0.5em;
1123 }
1124 #fiber-nav li a{
1125         padding:0.5em;
1126 }
1127
1128
1129 /**** SCREEN SIZE ADAPTATIONS ****/
1130     html #main{ font-size: 70%; }
1131 body { font-size: 16px;}
1132 @media (max-width: 300px){
1133     body #All{ font-size: 80%; }
1134 }
1135
1136 @media (min-width: 300px) and (max-width:800px){
1137     body #All{ font-size: 85%; }
1138 }
1139
1140 @media (min-width: 700px) and (max-width:1000px){
1141     body #All{ font-size: 90%; }
1142 }
1143
1144 @media (min-width: 1000px) {
1145     body #All{ font-size: 100%; }
1146 }
1147
1148 #subscribe-form {
1149   position: relative;
1150   margin-bottom: 2em;
1151 }
1152
1153 #Home #subscribe-form {
1154   margin-bottom: 0;
1155 }
1156
1157 #subscribe-form ul.errorlist {
1158   position: absolute;
1159   bottom: -2em;
1160   text-align: center;
1161   display: block;
1162   width: 100%;
1163   padding: 0;
1164   list-style: none;
1165   color: #800;
1166 }
1167
1168 #Nav div.search form {
1169   padding: 1em 0;
1170 }
1171
1172 div.episode.resume div.title {
1173         white-space: normal;
1174 }
1175
1176 #Home div.program.tabs {
1177         margin: 1em 0;
1178 }
1179
1180 nav#program li {
1181         display: block;
1182         margin: 0;
1183 }
1184
1185 #recent-sounds {
1186         margin-top: 2em;
1187 }
1188
1189 #recent-sounds h3 {
1190         font-size: 140%;
1191         padding-left: 10px;
1192 }
1193
1194 .soundfile h5 {
1195         font-size: 1em;
1196 }
1197
1198 #panikdb {
1199         position: absolute;
1200         top: 0px;
1201         right: 25px;
1202         background: #3a3a3a;
1203         color: white;
1204         padding: 10px 10px;
1205         -webkit-transform-origin: top right;
1206         -webkit-transform: rotate(270deg);
1207         -moz-transform-origin: top right;
1208         -moz-transform: rotate(270deg);
1209         transform-origin: top right;
1210         transform: rotate(270deg);
1211 }
1212
1213 /*******************************/
1214 /**** VARIANTES ****************/
1215 /*******************************/
1216
1217
1218 .style-000000 #Nav
1219    {background:#000000 !important;color:#ffffff !important;}
1220 .style-000000 #Nav .active,
1221 .style-000000  #Nav .active *,
1222 .style-000000   .sectionLabel a,
1223 .style-000000  #metaNav ul li.active,
1224 .style-000000   #metaNav ul li.active a
1225   {background: white !important;color:#000000 !important;}
1226
1227
1228 .style-333333 #Nav,
1229 .style-333333  #metaNav ul li.active,
1230 .style-333333   #metaNav ul li.active a
1231    {background:#333333 !important;color:#ffffff;}
1232 .style-333333 #Nav .active,
1233 .style-333333  #Nav .active *,
1234 .style-333333   .sectionLabel a
1235   {background: white;color:#333333 !important;}
1236
1237 .style-0000ff #Nav,
1238 .style-0000ff  #metaNav ul li.active,
1239 .style-0000ff   #metaNav ul li.active a
1240    {background:#0000ff !important;color:#ffffff;}
1241 .style-0000ff #Nav .active,
1242 .style-0000ff  #Nav .active *,
1243 .style-0000ff   .sectionLabel a
1244   {background: white;color:#0000ff !important;}
1245
1246 .style-ff6633 #Nav,
1247 .style-ff6633  #metaNav ul li.active,
1248 .style-ff6633   #metaNav ul li.active a
1249    {background:#ff6633 !important;color:#ffffff;}
1250 .style-ff6633 #Nav .active,
1251 .style-ff6633  #Nav .active *,
1252 .style-ff6633   .sectionLabel a
1253   {background: white;color:#ff6633 !important;}
1254
1255 /*
1256 .style-ffffff   #player-container,
1257 .style-ffffff    #player-container *{background-color:#ff6633 !important; border-color:#ffffff !important;color:#ffffff !important;}
1258 */
1259
1260 /*
1261
1262 #Commons,
1263  #Commons *,
1264   #player-container,
1265    #player-container *{background-color:#3333ff !important; border-color:#fff !important;color:#fff !important;}
1266
1267 */