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