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