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