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