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