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