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