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