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