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         /*
 396         -moz-box-shadow: 0px 5px 5px #000;
 397         -webkit-box-shadow:  0px 5px 5px #000;
 398         box-shadow: 0px 5px 10px #000;
 399         */
 400         font-size:1em;
 401         background-color:#ff6633; border-color:#fff;
 402         }
 403 #player-container button,#player-container a,#player-container .label{
 404         border-color:#fff;
 405         color:#fff;
 406 }
 407 #player-container .metas, #player-container img{border-color:#fff;}
 408 #player-container .padded{padding:0.5em;}
 409
 410 #player-container button,#player-container a{
 411 }
 412 #player-container .metas{
 413         text-align:center;
 414 }
 415 #DirectStreamPanikControler {
 416         display:inline !important;
 417 }
 418 #streamSymbol{
 419         font-size:6em;
 420         float:left;
 421         margin-right:5px;
 422 }
 423 #CurrentlyPlaying{
 424         padding:0 0 0 0;
 425 }
 426 #DirectStreamPanikControler .label{
 427 }
 428 #player-container.fixed{
 429         z-index:500;
 430         position:fixed;
 431         width:100%;
 432         /*top:2em;*/
 433         font-size:80%;
 434         bottom:0em;
 435         border-bottom:none;
 436 }
 437 #Player.withPlaylist #player-container #audioPlayer{
 438         float:left;
 439         width:50%;
 440         border-right:2px solid black;
 441 }
 442 #Player.withPlaylist #player-container #Playlist{
 443         float:right;
 444         width:49%;
 445         text-align:left;
 446 }
 447 #player-container.normal #player{
 448         padding:3em;
 449 }
 450 #player-container.minimized{
 451         width:auto;
 452         border-width:0px 2px 2px 0 !important;
 453         border-bottom-right-radius:1em;
 454         -moz-border-bottom-right-radius:1em;
 455         -webkit-border-bottom-right-radius:1em;
 456 }
 457 #player-container.minimized #player{
 458         padding:0;
 459 }
 460
 461 /*Playlist*/
 462 #Playlist{
 463 }
 464
 465 #Playlist button{
 466 }
 467 #Playlist #playlistLabel{
 468         float:right;
 469
 470 }
 471 #Playlist .playListControls{
 472 }
 473 #Playlist .playListControls button{
 474         margin-right:0.5em;
 475         display:inline-block;
 476 }
 477 #Playlist .playListControls .playPause{
 478         font-size:6em;
 479         margin-right:5px;
 480         float:left;
 481 }
 482
 483 #Playlist .playing .icon-pause{
 484    -webkit-animation: loading 1s infinite linear;
 485    -moz-animation: loading 1s infinite linear;
 486    -o-animation: loading 1s infinite linear;
 487    animation: loading 1s infinite linear;
 488 }
 489 #Playlist .playlistControls button,#Playlist .playlistControls .button{
 490         margin:0 0.1em 0 0.1em;
 491 }
 492 #Playlist li{
 493         clear:right;
 494 }
 495 #Playlist .soundControls button{}
 496
 497 #player-container #Playlist ol{
 498         clear:right;
 499         padding:0 0 0 1.5em;
 500         height:1.3em;
 501         overflow:hidden;
 502 }
 503 #player-container #Playlist ol li{
 504         line-height:1.3em;
 505         padding:0;
 506         margin:0;
 507 }
 508 #Playlist ol li .soundControls{
 509         line-height:1.5em;
 510         height:1.5em;
 511         clear:right;
 512         float:right;
 513 }
 514 #Playlist ol li .title{
 515         margin-right:70px;
 516         display:block;
 517         white-space: nowrap;
 518         text-overflow: ellipsis;
 519         overflow: hidden;
 520 }
 521 #player .active{
 522         text-transform:uppercase;
 523         font-weight:bold;
 524 }
 525 /*limit height of playlist*/
 526 #PlayerHelp,#player-container #Playlist ol.deploy{
 527         height:auto;
 528         max-height:12em;
 529         overflow:auto;
 530 }
 531 #player #CurrentlyPlaying,
 532  #player-container #Playlist ol{
 533         opacity:0.9;
 534         padding-top:0.2em;
 535 }
 536
 537 @media screen and (max-width: 500px) {
 538
 539         #Player.withPlaylist #player-container #audioPlayer,
 540           #Player.withPlaylist #player-container #audioPlayer,
 541            #Player.withPlaylist #player-container #Playlist{
 542                 float:none !important;
 543                 width:auto !important;
 544                 border:none;
 545                 max-width:auto !important;
 546         }
 547         #Player.withPlaylist #player-container #Playlist{
 548                 border-top:2px solid black;
 549         }
 550 }
 551 @media screen and (min-width: 500px) {
 552         #Player #player-container #audioPlayer{
 553                 max-width:50%;
 554                 margin:auto;
 555         }
 556 }
 557
 558
 559
 560 /****************************************************/
 561 .inline .link{display:block;padding:1em;}
 562 /**** Liste   ****/
 563 /**** EMISSIONS ****/
 564 #Emission .emission-detail .title{}
 565 /*
 566 */
 567 #Emission-tabs-menu .sub{
 568         margin-bottom:1em;
 569 }
 570 /**** Detail    ****/
 571 .emission-detail .metas{
 572         line-height:1.5em;
 573 }
 574 .emission-detail .description{
 575         font-family: "RegloBold";
 576         font-size: 1.3em;
 577         margin:0em 0 1em 0;
 578         line-height:1.5em;
 579 }
 580 .emission-detail .logo{
 581         float:right;
 582         max-width:50%;
 583 }
 584 @media screen and (max-width: 300px) {
 585         .emission-detail .metas {
 586                 float: none;
 587                 width: auto;
 588                 margin: 0;
 589         }
 590         .emission-detail .logo{max-width:100%;}
 591 }
 592 .emission .mainHeader {
 593     overflow: hidden;
 594     margin-bottom:1.5em;
 595 }
 596 /**** Inline    ****/
 597 .emission.inline, .emission.resume {
 598         padding:1em 0 1em 0;
 599 }
 600
 601 .emission.inline div.date {
 602         min-height: 3em;
 603         text-align: center;
 604         display:inline-block;
 605         float:left;
 606         margin-right:1em;
 607 }
 608 .emission .archived {
 609         opacity:0.6;
 610 }
 611
 612 .emission. .link .description {
 613         margin: 0px 0 5px 0;
 614         font-family: "RegloMedium";
 615 }
 616
 617
 618 /**** EPISODE ****/
 619 /**** Detail  ****/
 620
 621 .episode .tag{
 622 }
 623 .episode.resume, .episode.inline{
 624         padding:1em 0.5em 1em;
 625 }
 626 .episode.inline .dateBloc, .episode.resume .dateBloc{
 627         float:left;
 628 }
 629 .episode.resume img {
 630         border: 2px solid black;
 631 }
 632
 633 .episode.resume .title{
 634         margin-bottom:0.5em;
 635 }
 636 .episode.resume .logo{
 637         float: right;
 638 }
 639 .episode.inline .logo{
 640         min-height: 50px;
 641         float: left;
 642         margin-right:0.5em;
 643 }
 644 .episode.resume .sound{
 645         float:right;
 646         margin:0 0 1em 1em;
 647 }
 648 .episode.inline .sound.right{
 649         width:2em;
 650         text-align:center;
 651         font-size:70%;
 652 }
 653 .episode.inline .sound.right button{
 654         padding-bottom:0.1em;
 655 }
 656 .episode.resume .sound.right .icon-download{
 657         text-align:center;
 658 }
 659 .episode.resume .sound.right .icon-download{
 660         display:block;
 661 }
 662 .episode.detail .logo.right{
 663         max-width:50%;
 664 }
 665
 666 .episode.resume .date .day, .emission-detail .date .day {
 667 }
 668
 669 .episode.resume .content {
 670         padding-left: 5em;
 671 }
 672 .episode.resume .content .title {
 673 }
 674
 675 .episode.resume .logo {
 676         margin:0 0 1em;
 677         max-width:20%;
 678 }
 679 .episode.inline .date{
 680         font-size:80%;
 681 }
 682
 683 @media screen and (max-width: 400px) {
 684         .episode .dateBloc{
 685                 width:4em;
 686                 font-size:80%
 687         }
 688
 689         .episode.resume .content {
 690                 padding-left: 4em;
 691         }
 692         .resume .logo img,.inline .logo img{width:30px !important;}
 693 }
 694
 695 /****************************************************/
 696 /**** News ****/
 697 /****************************************************/
 698
 699 .newsRoll {
 700         padding-top: 5px;
 701         padding-bottom: 5px;
 702 }
 703
 704 #Nav .newsRoll li {
 705         background:black;
 706         color:white;
 707         border: none;
 708 }
 709
 710 .newsRoll li.first {
 711         width: 30%;
 712 }
 713
 714 .newsRoll li {
 715         width: 15%;
 716         display: table-cell;
 717         vertical-align: top;
 718 }
 719
 720 .newsRoll .first .title{
 721         font-size: 130%;
 722 }
 723
 724 .newsRoll a {
 725         position: relative;
 726 }
 727
 728 .newsRoll a:hover img {
 729         opacity: 0.8;
 730 }
 731
 732
 733 .newsRoll .title{
 734 }
 735 @media (max-width: 600px){
 736         .newsRoll .title {
 737                 display:none;
 738         }
 739 }
 740 .newsRoll img.logo{
 741         display:inline-block;
 742         width:100% !important;
 743         border:none;
 744         margin:none;
 745         padding:none;
 746 }
 747 .newsRoll .title{
 748         background:black;
 749         color:white;
 750         bottom:0px;
 751         width:100%;
 752         opacity:0.8;
 753         padding: 1em 0px 2px 0px;
 754         text-align: left;
 755         font-family: "RegloBold";
 756         position: absolute;
 757         left: 0;
 758 }
 759
 760 .newsRoll .title span {
 761         padding: 0 0.5ex;
 762         display: inline-block;
 763 }
 764
 765 .newsRoll .labels{
 766         top: -2px;
 767         left: -1px;
 768 }
 769 .newsRoll .labels .item{
 770         display:block;
 771         background:#3333FF;
 772         color:white;
 773         margin:0.1em;
 774         font-size:0.9em;
 775         padding:0.3em;
 776 }
 777
 778 .newsRoll li .labels .title{
 779         display: none;
 780 }
 781 .newsRoll li:hover .labels .title{
 782         display:block;
 783         background: black;
 784         opacity: 0.9;
 785         color:white;
 786         margin:0.1em;
 787         font-size:0.9em;
 788         padding:0.3em;
 789         opacity:0.9;
 790         text-align: left;
 791 }
 792
 793
 794 .newsRoll h5{
 795         font-size:1em;
 796         color:white;
 797         padding:0.5em;
 798 }
 799 .newsRoll li a {
 800         margin:0 0 0 0 !important;
 801         padding:0 0 0 0 !important;
 802 }
 803 .list.news li {
 804 }
 805 .news li.item a { -webkit-backface-visibility: hidden; }
 806 .news li.item a{padding:1em;}
 807
 808 .news .logo img{
 809         display:block;
 810         border-style:solid;
 811         border-width:2px;
 812 }
 813 ul.newsSpecial{
 814         border-bottom:2px solid #ccc;
 815 }
 816 @media only screen and (max-width: 600px) {
 817         .news .columns.by3{column-count: 1;     -webkit-column-count: 1;        -moz-column-count: 1;}
 818         .news .columns.by3 .logo {
 819                 float:right;
 820                 max-width:50%;
 821         }
 822 }
 823 @media (min-width: 800px) {
 824 }
 825
 826 /****************************************************/
 827 /**** Home & ****/
 828 /****************************************************/
 829
 830 #Home #Nav .wrapper{
 831         max-width:auto !important;
 832         width:auto !important;
 833 }
 834
 835 /*
 836 @media screen and (max-width:800px){
 837         #Home .newsRoll .logo{
 838                 max-width:100px;
 839         }
 840 }
 841 @media screen and (max-width:600px){
 842         #Home .newsRoll .logo{
 843                 max-width:50px;
 844         }
 845 }
 846 */
 847
 848 /****************************************************/
 849 /**** PROGRAM ****/
 850 /****************************************************/
 851
 852 .program.tabs nav ul li{
 853         display:table-cell;
 854         width:14%;
 855         text-align:center;
 856 }
 857
 858 .program.tabs nav ul li.week-arrow {
 859         width: 1%;
 860         padding-bottom: 5px;
 861 }
 862
 863 .program ul .dateBloc {
 864         float:left;
 865         padding-top:1em;
 866 }
 867 .program ul .schedule {
 868         margin-left:5em;
 869 }
 870 .program .nonstop {
 871         text-align:left;
 872 }
 873 .program-week .programDate{
 874         float:left;
 875         width:3em;
 876 }
 877 .program-week .programCell{
 878         margin-left:3.5em;
 879 }
 880 .program-week .nonStop .programDate{
 881         visibility:hidden;
 882 }
 883 .program-week .nonStop .programCell{
 884         font-size:0.9em;
 885         padding-left:50%;
 886         text-align:right;
 887 }
 888 .program-week a.nonstop{
 889         font-size:0.9em;
 890         margin:0.1em;
 891         color: #888;
 892 }
 893 .program-week .inline,.program-week .resume{padding:0;}
 894 .program-week .description{color:#aaa;}
 895 .program-week .metas{display:inline-block;}
 896
 897 /****************************************************/
 898 /**** SEARCH ****/
 899 /****************************************************/
 900
 901 .search li.previous-page {
 902   margin-bottom: 2ex;
 903   text-align: left;
 904   margin-left: 0ex;
 905   font-style: italic;
 906 }
 907
 908 .search li.next-page {
 909   margin-top: 2ex;
 910   text-align: right;
 911   margin-right: 0;
 912   font-style: italic;
 913 }
 914
 915 .search a.icon-check-empty.count-0{
 916         display:none !important;
 917 }
 918 /****************************************************/
 919 /**** GRILLE ****/
 920 /****************************************************/
 921
 922 #grid #Main {}
 923 #grid th{
 924         color:#4682B4;
 925 }
 926 #grid .heure {
 927         height:50px !important;
 928 }
 929 #grid .heure.vertical {
 930         padding:1.5em 0;
 931 }
 932 #grid .day {
 933         padding:1em 0 1em 0;
 934 }
 935 #grid .nonstop {
 936 }
 937 #grid .item{
 938         padding:0.5em 0.2em 0.5em 0.2em;
 939 }
 940 #grid .cell hr {
 941         border:1px dotted #ddd;
 942         margin:0.3em;
 943 }
 944 #grid .time-label{
 945         margin-top:0.5em;
 946 }
 947
 948 #grid .highlighted,#grid .highlighted  *{
 949         background:#333 !important;
 950         color:white !important;
 951 }
 952
 953 #grid .highlighted,#grid .highlighted  *{
 954         background:#333 !important;
 955         color:white !important;
 956 }
 957 #Emissions li.item.normal{
 958         display:none;
 959 }
 960 #Emissions li.item.hightlighted{
 961         display:block !important;
 962 }
 963
 964
 965 /**** COLOR VARIANTS ****/
 966
 967 /*
 968 #News #Nav,
 969  #News #Nav *,
 970   .news,
 971    .news *
 972 {color:white;background-color:#4682B4; border-color:#fff !important;color:#fff !important;}
 973 #News, #news,.news, .news *,.mainLegend.news {
 974         background-color:#fff;
 975         border-color:#1663d5 !important;
 976         color:#1663d5 !important;
 977 }*/
 978
 979 #player-container{}
 980 #Nav{}
 981
 982
 983
 984 /**** SCREEN SIZE ADAPTATIONS ****/
 985     html #main{ font-size: 70%; }
 986 body { font-size: 16px;}
 987 @media (max-width: 300px){
 988     body #All{ font-size: 80%; }
 989 }
 990
 991 @media (min-width: 300px) and (max-width:800px){
 992     body #All{ font-size: 85%; }
 993 }
 994
 995 @media (min-width: 700px) and (max-width:1000px){
 996     body #All{ font-size: 90%; }
 997 }
 998
 999 @media (min-width: 1000px) {
1000     body #All{ font-size: 100%; }
1001 }
1002
1003 #subscribe-form {
1004   position: relative;
1005   margin-bottom: 2em;
1006 }
1007
1008 #Home #subscribe-form {
1009   margin-bottom: 0;
1010 }
1011
1012 #subscribe-form ul.errorlist {
1013   position: absolute;
1014   bottom: -2em;
1015   text-align: center;
1016   display: block;
1017   width: 100%;
1018   padding: 0;
1019   list-style: none;
1020   color: #800;
1021 }
1022
1023 #Nav div.search form {
1024   padding: 1em 0;
1025 }
1026
1027 div.episode.resume div.title {
1028         white-space: normal;
1029 }
1030
1031 #Home div.program.tabs {
1032         margin: 1em 0;
1033 }