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