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