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