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