local.css

   1 /* vim: set ts=4 sts=4 sw=4 isk+=-,. fen fcl=all fdm=marker fmr={{{,}}} fml=2 : */
   2
   3 @font-face {
   4   font-family: 'Open Sans';
   5   font-style: normal;
   6   font-weight: 400;
   7   src: local('Open Sans'), local('OpenSans'), url(assets/OpenSans/OpenSans.ttf) format('truetype');
   8 }
   9 @font-face {
  10   font-family: 'Open Sans';
  11   font-style: normal;
  12   font-weight: 700;
  13   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(assets/OpenSans/OpenSans-Bold.ttf) format('truetype');
  14 }
  15 @font-face {
  16   font-family: 'Open Sans';
  17   font-style: italic;
  18   font-weight: 400;
  19   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(assets/OpenSans/OpenSans-Italic.ttf) format('truetype');
  20 }
  21 @font-face {
  22   font-family: 'Open Sans';
  23   font-style: italic;
  24   font-weight: 700;
  25   src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(assets/OpenSans/OpenSans-BoldItalic.ttf) format('truetype');
  26 }
  27 @font-face {
  28   font-family: 'Inconsolata';
  29   font-style: normal;
  30   font-weight: 400;
  31   src: local('Inconsolata'), local('Inconsolata-Regular'), url(assets/Inconsolata/Inconsolata.otf) format('opentype');
  32 }
  33
  34 /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
  35 /* apply a natural box layout model to all elements, but allowing components to change */
  36 html {
  37   box-sizing: border-box;
  38 }
  39 *, *:before, *:after {
  40   box-sizing: inherit;
  41 }
  42
  43 img,
  44 table {
  45   max-width: 100%;
  46   height: auto;
  47 }
  48
  49
  50 html {
  51         /*overflow: auto;*/
  52 }
  53
  54 body {
  55         margin: 0;
  56         padding: 0;
  57         font-family: "Open Sans", sans-serif;
  58         color: #111;
  59         background: #fff url(assets/tile.png) fixed;
  60 }
  61
  62 code,
  63 pre {
  64         font-family: "Inconsolata", monospace;
  65         font-size-adjust: 0.535;
  66 }
  67
  68 dt {
  69         font-weight: bold;
  70 }
  71
  72 thead td {
  73         text-decoration: underline;
  74 }
  75
  76
  77 .body-wrapper {
  78         max-width: 70em;
  79         margin: 0 auto 0 auto;
  80         box-shadow: 0 0 0.2em 0 #333366;
  81   background: white;
  82 }
  83 @media screen and (min-width: 45em) {
  84   .menu,
  85   .main {
  86     display: table-cell;
  87     vertical-align: top;
  88   }
  89   .menu {
  90     width: 20%;
  91     max-width: 15em;
  92     min-width: 11em;
  93   }
  94   .main {
  95   }
  96 }
  97
  98
  99 .body-wrapper > header {
 100     padding: 1em 0;
 101     border-bottom: solid 1px #ccc;
 102 }
 103 @media screen and (min-width: 390px) {
 104   .body-wrapper > header {
 105     background: url("assets/filet.png") no-repeat scroll 99% 105px #FFF;
 106   }
 107 }
 108
 109
 110 #logo {
 111     display: block;
 112         width: 394px; /* same as .pageheader .header:margin-left */
 113         height: 104px;
 114   max-width: 100%;
 115         background: url(assets/logo-nos-oignons-blanc.png) no-repeat top left;
 116   background-size: 100%;
 117 }
 118 @media screen and (max-width: 390px) {
 119   #logo {
 120     background-image: url(assets/logo-nos-oignons-blanc-small.png);
 121     background-position: left center;
 122     height: 100px;
 123   }
 124 }
 125
 126 #logo span {
 127         display: none;
 128 }
 129
 130 /* {{{ .actions */
 131 .actions {
 132         font-size: 0.8em;
 133         text-align: right;
 134 }
 135 .actions ul {
 136   margin: 0;
 137   padding: 0.5em;
 138   height: auto;
 139   list-style-type: none;
 140 }
 141
 142 .breadcrumb,
 143 .breadcrumb  a {
 144   text-decoration: none;
 145   color: #b3b3b3;
 146 }
 147 .breadcrumb  a:first-child {display: none;}
 148 .breadcrumb a:hover {
 149   text-decoration: none;
 150   color: #57075f;
 151 }
 152 .breadcrumb  a + a:before {
 153   content:"▸";
 154   display: inline-block;
 155   vertical-align: top;
 156   margin: -1px 0.5em 0;
 157   color: #b3b3b3;
 158 }
 159 .breadcrumb  a + a:hover:before {}
 160
 161 /* .actions }}} */
 162 /* {{{ #otherlanguages */
 163 #otherlanguages {
 164   float: right;
 165   font-size: 0.9em;
 166 }
 167 .translationstatus,
 168 .langstatus {display: none;}
 169 @media screen and (max-width: 400px) {
 170 #otherlanguages {float: none;}
 171 }
 172 #otherlanguages,
 173 #otherlanguages a {
 174         color: #b3b3b3;
 175         /*background: white;*/
 176 }
 177 #otherlanguages a:hover {
 178   color: #57075f;
 179 }
 180
 181 #otherlanguages ul {
 182   padding: 0;
 183   margin: 0;
 184   list-style: none;
 185 }
 186 #otherlanguages ul li {
 187         /*margin-left: 1em;*/
 188 }
 189 #otherlanguages .langstatus {
 190         /*display: none;*/
 191 }
 192
 193
 194 main {
 195         background: white url(assets/background.png) no-repeat bottom center;
 196       background-size: 50%;
 197         color: #111;
 198 }
 199
 200
 201 .menu {
 202         padding: 1em 0;
 203         border: none;
 204         background: #f5f5f5;
 205 }
 206 @media screen and (max-width: 45em) {
 207   .menu {
 208         border-bottom: solid 1px #ccc;
 209   }
 210 }
 211
 212 .menu ul {
 213         margin: 0;
 214 }
 215
 216 .menu ul {
 217         padding: 0;
 218         list-style: none;
 219         background: transparent;
 220 }
 221
 222 .menu li {
 223         text-align: left;
 224 }
 225
 226 .menu ul li .selflink {
 227         color: #57075f;
 228         font-weight: bold;
 229 }
 230
 231 .menu ul li > span,
 232 .menu ul li > a {
 233         display: block;
 234         padding: 0.3em 0.5em;
 235         text-decoration: none;
 236         border: 1px solid #f5f5f5;
 237   color: #a756af;
 238   background: transparent;
 239   font-weight: normal;
 240   font-size: 1em;
 241 }
 242
 243
 244 .menu a:hover {
 245   color: #57075f;
 246   background: #eeeeee;
 247   text-decoration: none;
 248 }
 249
 250 .menu select {
 251   margin: 0.5em 2%;
 252   width: 94%;
 253   max-width: 94%;
 254   background: #fff;
 255   border: 1px solid #ccc;
 256         color: #57075F;
 257   font-size: 1.2em;
 258   display: none;
 259 }
 260
 261 @media screen and (max-width: 45em) {
 262   .js .menu ul {display: none;}
 263   .js .menu select {display: block;}
 264 }
 265
 266
 267 main {
 268         padding: 1em;
 269 }
 270
 271 main a {
 272         color: #57075f;
 273         text-decoration: underline;
 274 }
 275
 276 main a:hover {
 277         text-decoration: underline;
 278 }
 279
 280 main p {
 281         margin: 1em 0 1em 0;
 282 }
 283 main li p {
 284   margin-top: 0;
 285 }
 286
 287 main hr {
 288         border: none;
 289         border-bottom: dotted 2px #bbbbbb;
 290         margin: 2em auto;
 291 }
 292
 293 main h1 {
 294         font-size: 1.8em;
 295         font-weight: bold;
 296   /*text-shadow: 2px 2px 1px #444;*/
 297   color: #57075F;
 298 }
 299 main h1.title {
 300   margin-top: 0em;
 301   font-size: 2em;
 302         color: #ffa430;
 303 }
 304
 305 main h2 {
 306   /*color: #ffa430*/
 307   color: #57075F;
 308 }
 309 main h3 {
 310   color: #57075F;
 311 }
 312
 313 main h2,
 314 main .header {
 315         font-size: 1.4em;
 316         font-weight: bold;
 317 }
 318
 319 main h2 + p {
 320         margin-top: 0.75em;
 321 }
 322
 323 main h3 {
 324         font-size: 1.2em;
 325         font-weight: bold;
 326         margin-bottom: 0;
 327         padding-bottom: 0;
 328 }
 329
 330 main h3 + p {
 331         margin-top: 0.5em;
 332 }
 333 h2 sup,
 334 h3 sup {
 335   font-weight: normal;
 336 }
 337
 338 main blockquote {
 339   border-left: 2px solid #A756AF;
 340   margin: 0.5em 0;
 341   padding: 0.5em 0 0.5em 1em;
 342 }
 343 main blockquote p {margin: 0;}
 344 main blockquote p + p {margin-top: 1em;}
 345
 346
 347 main table {
 348         border-top: solid 1px #aaa;
 349         border-bottom: solid 1px #aaa;
 350         border-collapse: collapse;
 351 }
 352
 353 main table th {
 354         background: #fafafa;
 355         padding: 0.1em 0.5em;
 356         border-bottom: solid 1px #aaaaaa;
 357         color: #555555;
 358 }
 359
 360 main table td {
 361         padding: 0.1em 0.5em;
 362         border-top: solid 1px #ccc;
 363 }
 364
 365 main .header a {
 366         text-decoration: none;
 367 }
 368
 369 main .feedlink a {
 370   text-decoration: none;
 371   /*color: #ffa430;*/
 372 }
 373
 374 main .feedlink {
 375   float: right;
 376         text-align: left;
 377   margin-top: -3.5em;
 378 }
 379 @media screen and (max-width: 400px) {
 380   main .feedlink {
 381     float: none;
 382     margin-top: -2em;
 383     margin-bottom: 2em;
 384   }
 385 }
 386 main .feedlink .feedbutton {
 387         font-size: 0.8em;
 388         background: transparent;
 389         border: none;
 390 }
 391 main .feedlink .feedbutton:hover {
 392         background: transparent;
 393         text-decoration: underline;
 394 }
 395
 396 main .footnotes {
 397         font-size: 0.8em;
 398 }
 399
 400 .half-section {
 401   display: inline-block;
 402   vertical-align: top;
 403   width: 49.5%;
 404 }
 405
 406 /* main }}} */
 407
 408
 409 .graph {
 410   display: inline-block;
 411   vertical-align: top;
 412   width: 45%;
 413   margin: 1em 1%;
 414   min-width: 20em;
 415   text-align: center;
 416 }
 417
 418 #bandwidth, #weights {text-align: center;}
 419 #bandwidth svg, #weights svg {text-align: left;}
 420
 421 /* Tor nodes table */
 422 .tor-nodes {}
 423 .tor-nodes th {
 424   text-align: left;
 425 }
 426
 427
 428
 429 .donation-cb {
 430   display: inline-block;
 431   vertical-align: top;
 432   width:45%;
 433   padding-right: 4%;
 434   min-width: 20em;
 435 }
 436
 437 /* Paypal donation forms */
 438 // .paypal-donation {
 439 //      display: inline-block;
 440 //      vertical-align: top;
 441 //      width:45%;
 442 //      padding-right: 4%;
 443 //       min-width: 20em;
 444 // }
 445 .paypal-donation h5 {
 446         margin: 0 0 0.5em 0;
 447 }
 448 .paypal-donation select {
 449         display: inline-block;
 450         vertical-align: top;
 451         margin-right: 1em;
 452   min-height:26px;
 453         height:26px;
 454   background-color: #fff;
 455   border: 1px solid #57075F;
 456 }
 457 .paypal-donation .cancel {
 458         font-size: small;
 459 }
 460
 461 .donation-other {
 462   display: inline-block;
 463   vertical-align: top;
 464   width:45%;
 465   padding-right: 4%;
 466   min-width: 20em;
 467 }
 468
 469
 470 /* Progress bar */
 471 .progress-bar-wrapper {
 472   margin: 2em auto;
 473   height: 85px;
 474   width: 600px;
 475   background: url(assets/progress_bar.png) top left repeat-x;
 476   border: 1px solid #ccc;
 477   border-bottom: 0;
 478   position: relative;
 479 }
 480   .progress-bar-wrapper .progress-bar {
 481     position: absolute;
 482     height: 85px;
 483     background: url(assets/progress_bar.png) left -85px repeat-x;
 484     z-index: 2;
 485     /* animate progress bar */
 486     -webkit-animation: progress-bar 1.5s;
 487     -moz-animation: progress-bar 1.5s;
 488     animation: progress-bar 1.5s;
 489   }
 490   .progress-bar-wrapper .progress-bar-promises {
 491     background-position: left bottom;
 492     z-index: 1;
 493   }
 494
 495   /* progress bar animation*/
 496   @-webkit-keyframes progress-bar { 0% { width: 0; } }
 497   @-moz-keyframes progress-bar { 0% { width: 0; } }
 498   keyframes progress-bar { 0% { width: 0; } }
 499
 500   /* Current amount */
 501   .progress-bar-wrapper .progress-bar:after {
 502     content: attr(data-current);
 503     display: block;
 504     position: absolute;
 505     top: -22px;
 506     right: 0;
 507     background: #fff;
 508     color: #ccc;
 509     font-size: 0.9em;
 510   }
 511   /* Promises amount */
 512   .progress-bar-wrapper .progress-bar-promises:after {
 513   }
 514
 515   /* Temperature bar */
 516   .progress-bar-wrapper:before {
 517     content: " ";
 518     display: block;
 519     position: absolute;
 520     z-index: 3;
 521     bottom: -5px;
 522     left: -1px;
 523     height: 5px;
 524     width: 100%;
 525     border: 1px solid #ccc;
 526     border-top: 0;
 527     background: -moz-linear-gradient(left, #ff0000 0%, #66ff00 100%); /* FF3.6+ */
 528     background: -webkit-gradient(linear, left top, right top, color-stop(0%,#ff0000), color-stop(100%,#66ff00)); /* Chrome,Safari4+ */
 529     background: -webkit-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Chrome10+,Safari5.1+ */
 530     background: -o-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* Opera 11.10+ */
 531     background: -ms-linear-gradient(left, #ff0000 0%,#66ff00 100%); /* IE10+ */
 532     background: linear-gradient(to right, #ff0000 0%,#66ff00 100%); /* W3C */
 533     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#66ff00',GradientType=1 ); /* IE6-9 */
 534   }
 535
 536   /* Annual budget */
 537   .progress-bar-wrapper:after {
 538     content: attr(data-total);
 539     display: block;
 540     position: absolute;
 541     top: -22px;
 542     right: 0;
 543     background: #fff;
 544     color: #ccc;
 545     font-size: 0.9em;
 546   }
 547
 548
 549
 550 /* FDN Form */
 551 .fdn-form {}
 552   .fdn-form select,
 553   .fdn-form input {
 554     display: inline-block;
 555     vertical-align: top;
 556     margin-right: 1em;
 557     height: 26px;
 558   }
 559   .fdn-form #custom-amount {
 560     display:none;
 561     height: 22px;
 562   }
 563
 564
 565 /* Paymium Bitcoin */
 566 .paymium-btns {padding-left: 0;}
 567 .paymium-btns li {
 568   list-style: none;
 569   display: inline-block;
 570   margin: 0 0.5em 0.5em 0;
 571 }
 572
 573 .paymium-btn {
 574   display: inline-block;
 575   min-width: 10em;
 576   padding: 4px 44px 4px 10px;
 577   padding-right: 44px;
 578   background: #4d7b99 url(assets/paymium_btc.png) right center no-repeat;
 579   border-radius: 4px;
 580   text-align: center;
 581   color: #fff;
 582   text-decoration: none;
 583   font-weight: bold;
 584 }
 585 .paymium-btn:hover{
 586   background-color:#5081a0;
 587   text-decoration: none;
 588 }
 589 /* override over weighted selector*/
 590 #content .paymium-btn {color: #fff;text-decoration: none;}
 591 #content .paymium-btn:hover {color: #fff;text-decoration: none;}
 592
 593
 594 /* {{{ .inlinepage */
 595
 596 .inlinepage {
 597         padding: 0;
 598         border: none;
 599         margin-bottom: 1em;
 600 }
 601
 602 .inlinepage .header {
 603         border-bottom: solid #ccc 1px;
 604 }
 605
 606 .inlinepage .inlineheader .pagedate {
 607         margin-top: 0;
 608         font-size: 0.8em;
 609         font-style: normal;
 610         color: #666;
 611 }
 612
 613 /* .inlinepage }}} */
 614
 615 /* {{{ #footer */
 616 #footer {
 617   margin: 0;
 618   padding: 0.5em 0;
 619   text-align: center;
 620   color: white;
 621   background: #57075f;
 622   font-size: 0.85em;
 623 }
 624 @media screen and (max-width: 45em) {
 625   #footer {
 626     text-align: left;
 627     padding: 0.5em 1em;
 628     font-size: 0.8em;
 629   }
 630 }
 631 @media screen and (max-width: 480px) {
 632   #footer .pagecopyright span {
 633     display: block;
 634   }
 635 }
 636
 637 #footer > div {
 638     margin-top: 1em;
 639 }
 640
 641
 642 #footer a {
 643         color: white;
 644   text-decoration: none;
 645 }
 646
 647 #footer a:hover {
 648         text-decoration: underline;
 649 }
 650
 651 #backlinks {
 652         font-size: 0.8em;
 653         margin-top: 0;
 654 }
 655
 656 #footer #pageinfo div {
 657         font-size: 0.8em;
 658         margin-top: 0;
 659         margin-bottom: 0;
 660 }
 661 /* #footer }}} */
 662
 663 /* {{{ @media print */
 664 @media print {
 665         .menu,
 666         .actions,
 667         .feedlink,
 668         #backlinks,
 669         #otherlanguages {
 670                 display: none;
 671         }
 672
 673         #footer,
 674         #footer #pageinfo,
 675         .page,
 676         .pageheader,
 677         #pagebody {
 678             margin: 0;
 679             padding: 0;
 680             border: none;
 681             box-shadow: none;
 682         }
 683
 684         .page,
 685         .pageheader {
 686                 border-radius: 0;
 687         }
 688
 689         .pageheader {
 690                 position: static;
 691                 height: auto;
 692         }
 693
 694         .pageheader .header {
 695                 margin-left: 0;
 696                 padding-top: 2em;
 697                 padding-bottom: 1em;
 698         }
 699
 700         .pageheader .header > span,
 701         .parentlinks .parentlinksep {
 702                 display: inline;
 703                 height: auto;
 704         }
 705
 706         .pageheader a,
 707         .pageheader .parentlinks a {
 708                 color: #111;
 709         }
 710
 711         .pageheader,
 712         .parentlinks a,
 713         .parentlinks .parentlinksep + a + .parentlinksep + a {
 714                 background: none;
 715         }
 716
 717         .pageheader .parentlinks {
 718                 display: inline;
 719         }
 720
 721         .pageheader .title,
 722         .parentlinks > a {
 723                 position: static;
 724         }
 725
 726         .parentlinks > a span {
 727                 display: inline;
 728         }
 729
 730   main h1 {
 731     color: #111;
 732     text-shadow: none;
 733     border-bottom: solid #ccc 1px;
 734   }
 735
 736         main a:link:after,
 737         main a:visited:after {
 738                 content:" [" attr(href) "] ";
 739         }
 740
 741         #footer {
 742                 margin-top: 2em;
 743                 text-align: left;
 744         }
 745 }
 746 /* @media print }}} */