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:#0000ff;
  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 2%;}
  67 .wrapper.text {max-width: 780px; margin:auto;}
  68 .wrapper.half {max-width: 510px; margin:auto;}
  69 .wrapper.sided{         max-width:1260px;       }
  70
  71 @media screen and (min-width: 600px) {
  72         .wrapper.sided .leftPart,
  73         .wrapper.sided .rightPart{
  74                 width:45%;
  75         }
  76         .wrapper.navigation .leftPart{
  77                 width:60%;
  78         }
  79         .wrapper.navigation .rightPart{
  80                 width:35%;
  81         }
  82         .wrapper .leftPart{
  83                 float:left;
  84         }
  85         .wrapper .rightPart{
  86                 float:right;
  87         }
  88
  89         #Home .leftPart,
  90         #Home .rightPart {
  91                 width: 100%;
  92         }
  93 }
  94
  95
  96 @media screen and (min-width: 1280px) {
  97         #Home .leftPart {
  98                 width: 60%;
  99         }
 100         #Home .rightPart {
 101                 width: 30%;
 102         }
 103         #recent-emissions ul.columns,
 104         #recent-sounds ul.columns {
 105                 column-count: 1;
 106                 -webkit-column-count: 1;
 107                 -moz-column-count: 1;
 108         }
 109 }
 110
 111
 112 button.control, button.symbol{background:transparent;border:none;margin:0;padding:0;}
 113 nav.menu{
 114         width:100%;
 115         text-align: justify;
 116         text-justify: distribute-all-lines;
 117 }
 118 nav.menu li{
 119         display: inline-block;
 120         margin-right:2em;
 121 }
 122
 123 button.tag, a.tag{
 124         font-size:0.9em;
 125         background:white;
 126         font-family: "RegloBold";
 127         text-transform: uppercase;
 128         display:inline-block;
 129         border: 1px solid #CCC !important;
 130         color:#342E2E;
 131         margin: 0.2em;
 132         padding: 0.3em;
 133         border-radius: 0.7em;
 134         -moz-border-radius: 0.7em;
 135         -webkit-border-radius: 0.7em;
 136 }
 137 button.check, a.check {
 138         font-size:0.9em;
 139         text-transform: none;
 140         display:inline-block;
 141         margin: 0.2em;
 142         padding: 0.3em;
 143 }
 144 .category{
 145         font-family: "RegloBold";
 146         text-transform: uppercase;
 147 }
 148 #Nav .icon-check{background:#222;}
 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 /**** TABS ****/
 175
 176 /****************************************************/
 177 body{
 178         background: #333;
 179         color: white;
 180 }
 181 #All{
 182         padding-bottom:100px;
 183 }
 184 #Main{
 185         color:#333;
 186         background-color: white;
 187 }
 188 #Main >.wrapper{
 189         padding-bottom:2em;
 190 }
 191 #Home #Main{
 192         min-height:0;
 193 }
 194 #Changing a:hover,#Changing button:hover {
 195         opacity:0.6;
 196         text-decoration:none;
 197 }
 198 #Nav a:hover,#Nav button:hover {
 199         opacity:1;
 200         color:white !important;
 201 }
 202 /* GLOBAL SITE NAV */
 203 #userLog{
 204         z-index:2000;
 205         position: fixed;
 206         bottom: 0px;
 207         right: 0px;
 208 }
 209 #userLog .log{
 210         margin:0.3em;
 211         -moz-box-shadow: 0px 0px 3px #000;
 212         -webkit-box-shadow: 0px 0px 3px #000;
 213         box-shadow: 0px 0px 3px #000;
 214         border-radius:0.5em;-moz-border-radius:0.5em;-webkit-border-radius:0.5em;
 215         text-align:center;
 216         padding: 0.3em;
 217         font-size:0.9em;
 218         color:black;
 219         background-color:orange;
 220         border: 2px solid black;
 221         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);
 222 }
 223 #userLog .log.info{
 224         background-color:grey;
 225         color:white;
 226 }
 227 #userLog .log.ok{
 228         background-color:green;
 229         border-color:black;
 230         color:white;
 231 }
 232 #userLog .log.error{
 233         background-color:orange;
 234         border-color:yellow;
 235 }
 236 #main {}
 237 #mainLegend{
 238         width:30%;
 239         text-align:right;
 240         float:right;
 241         padding:1em;
 242 }
 243 #metaNav {
 244         height: 2em;
 245         color:white;
 246         background-color: black;
 247         position:fixed;
 248         z-index:1000;
 249         top:0px;
 250         width:100%;
 251 }
 252 #metaNav ul li{
 253         white-space: nowrap;
 254         text-overflow: ellipsis;
 255         overflow:hidden;
 256         width: 16%;
 257 }
 258 #metaNav ul li a{
 259         height: 2em;
 260         display:block !important;
 261         color:white;
 262 }
 263
 264 #metaNav ul li a span{
 265         padding:0.5em 0;
 266         display:inline-block;
 267 }
 268
 269 #metaNav ul li a span.nav-icon {
 270         display: none;
 271 }
 272
 273 #metaNav .active, #metaNav a:focus, #metaNav a:hover{
 274         background:#0000ff !important;
 275         font-weight:normal;
 276 }
 277 @media screen and (max-width:600px){
 278         #metaNav .iconLabel {display:none;}
 279         #metaNav ul li a span.nav-icon { display: inline-block; }
 280 }
 281
 282 #Footer{
 283         border-top:2px solid #333;
 284         background:#333;
 285         color:white;
 286         padding-top: 2em;
 287 }
 288
 289 #Footer ul {
 290 }
 291
 292 #Footer ul li {
 293         padding-right: 2em;
 294 }
 295
 296 #Footer a:hover {
 297         opacity:0.6;
 298 }
 299
 300 /* PANIK LOGO */
 301 #mainHeader {
 302         padding-top:1em;
 303         background:white 50% 50% no-repeat url('../img/logoPanik.png');
 304 }
 305 #mainHeader *{color:black !important;line-height:1em;}
 306 #mainHeader #radioPanik{}
 307 #mainHeader #frequence{display:block;
 308         font-size:60%;}
 309
 310 #Panik img{display:block;margin:auto;max-height:200px;}
 311
 312 #Related{
 313         background-color:#eee;
 314         color:#000;
 315 }
 316 /****************************************************/
 317 /****  SCREEN NAV ****/
 318 #Nav{
 319         text-align:center;
 320         background:#0000ff;
 321 }
 322 #Nav nav{padding:0.1em;}
 323 #Nav *{ color:white; border-color:#white;}
 324 /*#Nav form{background:#800000;}*/
 325 #Nav input{color:#333;}
 326 #Nav .active,#Nav .active *{
 327         color:white !important;
 328         font-weight:bold;
 329 }
 330 #Nav ul li button,
 331 #Nav ul li a {
 332         border-width:0 0 2px 0;
 333         border-style: solid;
 334         border-color: transparent;
 335 }
 336
 337 #Nav ul li button.active,
 338 #Nav ul li a.active{
 339         border-width:0 0 2px 0;
 340         border-style:solid;
 341         border-color: white;
 342 }
 343 #Nav nav ul.columns {column-rule:2px solid #342E2E;-moz-column-rule:2px solid #342E2E;-webkit-column-rule:2px solid #342E2E;}
 344
 345 #Nav nav{
 346         margin:0;
 347 }
 348 #Nav h2{
 349         margin:0;
 350         padding:0;
 351 }
 352 #Nav nav ul{
 353         margin:1em 0 1em 0;
 354 }
 355
 356 #Nav li a{
 357         display: inline-block;
 358         padding: 0 0.5em 0 0.5em;
 359 }
 360 #Nav nav ul.distributed li {padding: 0;}
 361
 362 #Nav nav.right{
 363         color:#EED1B1 !important;
 364         background:#342E2E;
 365         border-color:#342E2E;
 366         border-width:2px;border-style:solid;
 367 }
 368 #Nav nav.right li, #Nav nav.right li a{
 369         display:block;
 370         color:#EED1B1 !important;
 371 }
 372 @media screen and (max-width: 400px) {
 373         #Nav nav.right{float:none !important;margin:none;border-top:2px solid white;}
 374 }
 375 #Nav nav.sub{
 376 }
 377
 378 #Nav nav.sub li a{
 379         min-width:7em;
 380         padding:0.5em;
 381 }
 382
 383
 384
 385 /****************************************************/
 386 /**** PLAYER ****/
 387 /*#Home #player{   float: left; } */
 388 #player-container{
 389         color:#fff;
 390         /*
 391         -moz-box-shadow: 0px 5px 5px #000;
 392         -webkit-box-shadow:  0px 5px 5px #000;
 393         box-shadow: 0px 5px 10px #000;
 394         */
 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:#0000ff;
 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 }