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