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