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