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