wolnelektury/static/css/master.css

   1 body {
   2     margin: 0 2em 2em 2em;
   3     font: 70% Verdana, Arial, Helvetica, sans-serif;
   4     line-height: 1.5em;
   5     background: #FFF url(/static/img/bg.png) repeat-x;
   6     color: #2F4110;
   7 }
   8
   9 #header {
  10     margin-top: -20px;
  11 }
  12
  13 img {
  14     border: none;
  15 }
  16
  17 a {
  18     color: #295158;
  19     text-decoration: none;
  20 }
  21
  22 a:hover, a:active {
  23     text-decoration: underline;
  24 }
  25
  26 input {
  27     font: 1em Verdana, Arial, Helvetica, sans-serif;
  28 }
  29
  30 h1 {
  31     font: normal normal bold 1.75em Arial, sans-serif;
  32     color: #2F4110;
  33     margin: 0.55em 0 0 0;
  34 }
  35
  36 h2 {
  37     font-size: 1.2em;
  38     font-weight: bold;
  39     color: #2F4110;
  40     margin: 0;
  41 }
  42
  43 h3 {
  44     font-size: 1em;
  45     font-weight: bold;
  46     margin: 0.2em 0 -1em 0;
  47     color: #333;
  48 }
  49
  50 em {
  51     font-style: normal;
  52     background-color: #F5DC7D;
  53 }
  54
  55 .clearboth {
  56     clear: both;
  57 }
  58
  59 .blur {
  60     color: #777;
  61 }
  62
  63 /* ================================== */
  64 /* = Header with logo and user-info = */
  65 /* ================================== */
  66 #header {
  67     position: relative;
  68     margin-top: 1.5em;
  69 }
  70
  71 #header #logo {
  72     float: left;
  73 }
  74
  75 #header #user-info {
  76     margin: 0 0 0 auto;
  77     width: 40em;
  78     text-align: right;
  79 }
  80
  81 #site-description {
  82     margin-top: -1.5em;
  83     height:4.5em;
  84     overflow: hidden;
  85     float: right;
  86     width: 42em;
  87     text-align: right;
  88     color: #777;
  89 }
  90
  91 .lang-menu {
  92         margin-right: 0.7em;
  93         line-height: 24px;
  94 }
  95
  96 .lang-menu button {
  97         color: blue;
  98         border: none;
  99         border-right: 1px solid gray;
 100         -moz-border-radius: 2px;
 101         background: inherit;
 102         cursor: pointer;
 103         padding: 0.2em 0.5em;
 104         font-size: 10px;
 105 }
 106
 107 .lang-menu button:hover {
 108         color: blue;
 109         text-decoration: underline;
 110 }
 111
 112 .lang-menu button.active {
 113         color: black;
 114         text-decoration: none;
 115 }
 116
 117 .lang-menu button.last {
 118         border-right: none;
 119 }
 120
 121 /* ======================== */
 122 /* = Footer with sponsors = */
 123 /* ======================== */
 124 #footer {
 125     border-top: 0.1em solid #999;
 126     color: #777;
 127     font-size: 0.8em;
 128     padding-top: 0.5em;
 129     margin: 2em 0 0 0;
 130 }
 131
 132 #footer p {
 133     margin: 0;
 134 }
 135
 136 #footer a {
 137     color: #999;
 138     text-decoration: underline;
 139 }
 140
 141
 142 /* =============== */
 143 /* = Search form = */
 144 /* =============== */
 145 #search-form {
 146     margin: 0.5em 0;
 147     padding: 0.5em;
 148     background-color: rgb(132, 191, 42);
 149 }
 150
 151 #searchContainer {
 152     width: 100%;
 153     min-height: 65px;
 154     background-color: rgb(132, 191, 42);
 155     padding: 0px 5px;
 156     -moz-border-radius: 4px;
 157     -webkit-border-radius: 4px;
 158     border-radius: 4px;
 159     border-bottom: 0.15em solid #7B9C2D;
 160     border-right: 0.15em solid #7B9C2D;
 161 }
 162
 163 #searchContainer #search-form {
 164     padding: 0;
 165     margin: 0;
 166 }
 167
 168 #search-form p {
 169     margin: 0em 0 0 0;
 170 }
 171
 172 #search-form ol {
 173     margin: 0;
 174     padding: 0;
 175 }
 176
 177 #search-form li {
 178     margin: 2px 0 0 5px;
 179     padding: 0;
 180     list-style: none;
 181     display: block;
 182     float: left;
 183     /*margin-left: 5px;*/
 184 }
 185
 186 #search-form li.category, #search-form li.book-title {
 187     padding: 0.2em 0.5em 0.2em 0.5em;
 188     background-color: rgb(242, 163, 15);
 189     border: 1px solid #BA8722;
 190     border-right: 1px solid #555;
 191     border-bottom: 1px solid #555;
 192     -moz-border-radius: 3px;
 193     -webkit-border-radius: 3px;
 194     border-radius: 3px;
 195     margin-right: 0.25em;
 196 }
 197
 198 #search-form li.book-title {
 199     background-color: #DDD;
 200     border: 1px solid #999;
 201     border-right: 1px solid #555;
 202     border-bottom: 1px solid #555;
 203 }
 204
 205 #search-form input[type=submit] {
 206     color: #444;
 207 }
 208
 209 .ac_input {
 210     width: 300px;
 211     border: 0;
 212 }
 213
 214 p .ac_input {
 215     width: 28em;
 216 }
 217
 218 #searchSubmit {
 219     float: left;
 220     margin-top: 10px;
 221     height: 33px;
 222 }
 223 /* ================== */
 224 /* = Search matches = */
 225 /* ================== */
 226
 227 .matches li:first-letter {
 228     text-transform: uppercase;
 229 }
 230
 231 /* ============= */
 232 /* = Tags list = */
 233 /* ============= */
 234 #intro {
 235     margin: 0 0 2.5em 0;
 236 }
 237
 238 #tags-description {
 239     color: #777;
 240     margin: 0 0.5em -0.75em 0.5em;
 241 }
 242
 243 #main-page #tags-list {
 244     margin-right: 33%;
 245 }
 246
 247 #categories-list ul, #themes-list ul {
 248     -moz-column-width: 12em;
 249     -webkit-column-width: 12em;
 250     column-width: 12em;
 251 }
 252
 253 #tags-list {
 254     margin-top: 1em;
 255     padding: 1em;
 256     background-color: #FBF9E7;
 257     -moz-border-radius: 4px;
 258     -webkit-border-radius: 4px;
 259     border-radius: 4px;
 260     border-bottom: 0.15em solid #E3D888;
 261     border-right: 0.15em solid #E3D888;
 262 }
 263
 264 #tagged-object-list #tags-list, #book-detail #tags-list {
 265     margin-left: 39em;
 266 }
 267
 268 #book-info, #categories-list {
 269     float: left;
 270     width: 47.5%;
 271 }
 272
 273 #themes-list {
 274     margin-left: 52.5%;
 275 }
 276
 277 #tagged-object-list #categories-list, #book-detail #book-info {
 278     width: 12em;
 279 }
 280
 281 #book-detail #formats .change-sets {
 282     margin-right: 0.5em;
 283 }
 284
 285 #formats .wrap a {
 286     display: block;
 287     width: 100%;
 288     height: 1.5em;
 289     background-color: #EEE;
 290     margin-top: 0.5em;
 291     padding: 0.5em 0;
 292     -moz-border-radius: 4px;
 293     -webkit-border-radius: 4px;
 294     border-radius: 4px;
 295     text-align: center;
 296 }
 297
 298 #czytamysluchajac {
 299     margin-top: 2.5em;
 300 }
 301
 302 #czytamy-sluchajac-info {
 303     width: 400px;
 304     height: 80px;
 305 }
 306
 307 #czytamy-sluchajac-info p {
 308     margin-left: 170px;
 309     padding-top: 1em;
 310     padding-bottom: 0em;
 311 }
 312
 313 #formats #czytamysluchajac-logo {
 314     background: white;
 315     text-align: left;
 316     float: left;
 317     width: 140px;
 318     height: 62px;
 319     -moz-border-radius: 0px;
 320     -webkit-border-radius: 0px;
 321     border-radius: 0px;
 322 }
 323
 324 #tagged-object-list #themes-list, #book-detail #themes-list {
 325     margin-left: 14em;
 326 }
 327
 328 #tags-list ol, #tags-list ul {
 329     padding: 0;
 330     margin: 0.3em 0 1.2em 0;
 331 }
 332
 333 #tags-list li {
 334     list-style: none;
 335     padding: 0;
 336     margin: 0;
 337 }
 338
 339 #books-list {
 340     width: 38em;
 341     float: left;
 342 }
 343
 344 .all-tags {
 345     display: none;
 346 }
 347
 348 div.shown-tags p, div.all-tags p {
 349     margin: -1em 0 1em 0;
 350     text-align: right;
 351 }
 352
 353 .show-all-tags, .hide-all-tags {
 354     text-decoration: underline;
 355     padding-right: 1em;
 356 }
 357
 358 .subcategories {
 359     display: block;
 360     padding-left: 2em;
 361     padding-bottom: 0.5em;
 362 }
 363
 364
 365 /* ============== */
 366 /* = Propaganda = */
 367 /* ============== */
 368 #propaganda {
 369     float: right;
 370     width: 30%;
 371     margin: 0;
 372     padding: 2em 0.5em 0.5em;
 373 }
 374
 375
 376 /* ===================== */
 377 /* = Other info        = */
 378 /* ===================== */
 379 #latest-blog-posts {
 380     padding: 0.5em;
 381     float: left;
 382     width: 30%;
 383 }
 384
 385 #latest-blog-posts ol {
 386     padding: 0 0 0 1.5em;
 387     margin: 1em 0 0 0;
 388     list-style-type: square;
 389     color: #D13628;
 390 }
 391
 392 #you-can-help {
 393     float: right;
 394     padding: 0.5em;
 395     width: 30%;
 396 }
 397
 398 #about-us {
 399     padding: 0.5em;
 400     margin-left: 35%;
 401     margin-right: 35%;
 402 }
 403
 404 /* =============== */
 405 /* = Description = */
 406 /* =============== */
 407 #description {
 408     margin-top: 0.5em;
 409     text-align: justify;
 410     overflow: hidden;
 411 }
 412 #description-short {
 413         display:none;
 414 }
 415
 416 #description .meta {
 417     margin: 0.5em;
 418     width: 18em;
 419     list-style: none;
 420     float: right;
 421 }
 422
 423 #description dt {
 424     font-weight: bold;
 425     display: inline;
 426 }
 427
 428 #description dd {
 429     margin: 0;
 430     display: inline;
 431 }
 432
 433 #toggle-description, #tagged-object-list .pagination, #book-detail .pagination {
 434     width: 100%;
 435     height: 1.5em;
 436     background-color: #EEE;
 437     margin-top: 0.5em;
 438     -moz-border-radius: 4px;
 439     -webkit-border-radius: 4px;
 440     border-radius: 4px;
 441     text-align: center;
 442 }
 443
 444 #toggle-description p {
 445     margin: 0;
 446     padding: 0;
 447     color: #999;
 448 }
 449
 450 #download-shelf {
 451     display: block;
 452     width: 100%;
 453     height: 1.5em;
 454     background-color: #EEE;
 455     margin-top: 0.5em;
 456     padding: 0.5em 0;
 457     -moz-border-radius: 4px;
 458     -webkit-border-radius: 4px;
 459     border-radius: 4px;
 460     text-align: center;
 461     outline: none;
 462 }
 463
 464 #download-shelf-menu {
 465     -moz-border-radius: 4px;
 466     -webkit-border-radius: 4px;
 467     border-radius: 4px;
 468     border: 3px solid #EEE;
 469     padding: 5px;
 470     margin-top: -5px;
 471 }
 472
 473 #download-formats-form li {
 474     float: left;
 475     height: 2em;
 476 }
 477
 478 #download-formats-form input {
 479     float: left;
 480 }
 481
 482 #download-formats-form label {
 483     display: block;
 484     background-color: #EEE;
 485     float: left;
 486     width: 8em;
 487     margin-right: 0.5em;
 488     margin-top: -0.5em;
 489     padding-top: 0.5em;
 490     padding-bottom: 0.75em;
 491 }
 492
 493 #download-formats-form li {
 494     margin: 0;
 495     padding: 0;
 496     list-style: none;
 497 }
 498
 499 #download-formats-form em {
 500     color: #999;
 501     background-color: #FFF;
 502 }
 503
 504 #download-formats-form em strong {
 505     color: #000;
 506     font-weight: normal;
 507 }
 508
 509 #download-formats-form-submit {
 510     margin-left: 0.5em;
 511
 512 }
 513
 514 #download-formats-form #download-formats-form-submit-li {
 515     margin-top: 0.75em;
 516 }
 517
 518 #download-formats-form-cancel {
 519     color: #900;
 520 }
 521
 522 #toggle-share-shelf {
 523     display: block;
 524     width: 100%;
 525     height: 1.5em;
 526     background-color: #EEE;
 527     margin-top: 0.5em;
 528     padding: 0.5em 0;
 529     -moz-border-radius: 4px;
 530     -webkit-border-radius: 4px;
 531     border-radius: 4px;
 532     text-align: center;
 533     outline: none;
 534 }
 535 #toggle-share-shelf p {
 536         margin:0;
 537 }
 538
 539 #share-shelf {
 540     -moz-border-radius: 4px;
 541     -webkit-border-radius: 4px;
 542     border-radius: 4px;
 543     border: 3px solid #EEE;
 544     padding: 5px;
 545     margin-top: -5px;
 546 }
 547 #share-shelf input {
 548         width: 100%;
 549 }
 550
 551
 552 /* ============================ */
 553 /* = Books and fragments list = */
 554 /* ============================ */
 555 #books-list {
 556     margin: 0;
 557 }
 558
 559 #books-list ol {
 560     list-style: none;
 561     padding: 0;
 562     margin: 1.5em 0;
 563 }
 564
 565 .book {
 566     padding: 0.5em;
 567     background-color: #FFF;
 568     -moz-border-radius: 3px;
 569     -webkit-border-radius: 3px;
 570     border-radius: 3px;
 571 }
 572
 573 .fragment {
 574     border-bottom: 0.1em solid #EEE;
 575     margin-top: 0.5em;
 576 }
 577
 578 .fragment-text, .fragment-short-text {
 579     padding: 0.5em;
 580     background-color: #FFF;
 581     -moz-border-radius: 3px;
 582     -webkit-border-radius: 3px;
 583     border-radius: 3px;
 584 }
 585
 586 .fragment-metadata {
 587     padding: 0.5em 0.5em 1.5em 0.5em;
 588     float: right;
 589 }
 590
 591 .change-sets {
 592     float: right;
 593 }
 594
 595 .change-sets a {
 596     padding: 0.2em;
 597     margin: 0.3em;
 598     border: 0.1em solid #EEE;
 599     background-color: #F9F9F9;
 600 }
 601
 602 .book-description {
 603     margin-left: 3.5em;
 604 }
 605
 606 .book-thumbnail, .book-parent-thumbnail {
 607     background: transparent url(/static/img/book.png) no-repeat 0 0;
 608     width: 3em;
 609     height: 3em;
 610     float: left;
 611 }
 612
 613 .book-parent-thumbnail {
 614     background: transparent url(/static/img/book-parent.png) no-repeat 0 0;
 615 }
 616
 617
 618 /* =============== */
 619 /* = Simple form = */
 620 /* =============== */
 621 .cuteform ol, .cuteform ul {
 622     padding: 0;
 623     margin: 0;
 624     list-style: none;
 625 }
 626
 627 .cuteform ol li, .cuteform ul li {
 628     margin-top: 0.7em;
 629 }
 630
 631 .cuteform label {
 632     display: block;
 633 }
 634
 635 .cuteform span.help-text {
 636     display: block;
 637     font-size: 0.8em;
 638     color: #999;
 639 }
 640
 641 .cuteform .error {
 642     color: #BF3024;
 643         display: block;
 644 }
 645
 646 /* ================ */
 647 /* = Modal Window = */
 648 /* ================ */
 649 .jqmOverlay { background-color: #000; }
 650
 651 #set-window {
 652     position: absolute;
 653     display: none;
 654     width: 32em;
 655     background-color: transparent;
 656     margin-top: -0.5em;
 657     margin-left: -1em;
 658 }
 659
 660 #set-window div.header {
 661     background-color: #FFF;
 662     border-right: 0.25em solid #DDD;
 663     width: 4em;
 664     padding: 0.5em 1em 0.5em 1em;
 665 }
 666
 667 #set-window div.target {
 668     background-color: #FFF;
 669     border-right: 0.3em solid #DDD;
 670     border-bottom: 0.3em solid #DDD;
 671     padding: 1em;
 672 }
 673
 674 #login-register-window {
 675     position: absolute;
 676     display: none;
 677     width: 24em;
 678     background-color: transparent;
 679     margin-top: -0.5em;
 680     margin-left: 1em;
 681 }
 682
 683 #login-register-window div.header {
 684     background-color: #FFF;
 685     border-right: 0.3em solid #DDD;
 686     width: 4em;
 687     right: 0;
 688     left: auto;
 689     padding: 0.5em 1em 0.5em 1em;
 690     float: right;
 691     text-align: center;
 692 }
 693
 694 #login-register-window div.target {
 695     clear: both;
 696     background-color: #FFF;
 697     border-right: 0.3em solid #DDD;
 698     border-bottom: 0.3em solid #DDD;
 699     padding: 1em;
 700 }
 701
 702 #user-shelves-window {
 703     position: absolute;
 704     display: none;
 705     width: 28em;
 706     background-color: transparent;
 707     margin-top: -0.5em;
 708     margin-left: 1em;
 709 }
 710
 711 #user-shelves-window div.header {
 712     background-color: #FFF;
 713     border-right: 0.3em solid #DDD;
 714     width: 4em;
 715     right: 0;
 716     left: auto;
 717     padding: 0.5em 1em 0.5em 1em;
 718     float: right;
 719     text-align: center;
 720 }
 721
 722 #user-shelves-window div.target {
 723     clear: both;
 724     background-color: #FFF;
 725     border-right: 0.3em solid #DDD;
 726     border-bottom: 0.3em solid #DDD;
 727     padding: 1em;
 728 }
 729
 730 .shelf-list {
 731     list-style: none;
 732     padding: 0;
 733 }
 734
 735 .shelf-list li {
 736     padding: 0.25em;
 737     margin: 0 -0.25em;
 738 }
 739
 740 .shelf-list a.delete-shelf {
 741     color: #900;
 742     float: right;
 743     padding: 0.25em 0.25em 0.25em 1em;
 744     margin: -0.25em;
 745 }
 746
 747 .shelf-list a.delete-shelf:active, .shelf-list a.delete-shelf:hover {
 748     color: #FFF;
 749     background-color: #900;
 750     text-decoration: none;
 751 }
 752
 753 #suggest-window {
 754     position: absolute;
 755     display: none;
 756     width: 35em;
 757     background-color: transparent;
 758     margin-top: -0.5em;
 759     margin-left: 1em;
 760 }
 761
 762 #suggest-window div.header {
 763     background-color: #FFF;
 764     border-right: 0.3em solid #DDD;
 765     width: 4em;
 766     right: 0;
 767     left: auto;
 768     padding: 0.5em 1em 0.5em 1em;
 769     float: right;
 770     text-align: center;
 771 }
 772
 773 #suggest-window div.target {
 774     clear: both;
 775     background-color: #FFF;
 776     border-right: 0.3em solid #DDD;
 777     border-bottom: 0.3em solid #DDD;
 778     padding: 1em;
 779 }
 780 #suggest-form textarea {
 781         width: 30em;
 782 }
 783
 784 /* ======================== */
 785 /* = Alphabetic book list = */
 786 /* ======================== */
 787 #book-a-list #book-list {
 788     -moz-column-width: 24em;
 789     -webkit-column-width: 24em;
 790     column-width: 24em;
 791 }
 792
 793 #book-a-list #book-list ol {
 794     padding-left: 1em;
 795     margin: 0.3em 0 1.2em 0;
 796     list-style: none;
 797 }
 798
 799 #book-a-list #book-list h2 a {
 800     color: black;
 801 }
 802
 803 #top-message {
 804     background-color: #2F4110;
 805     color: #FFF;
 806     margin: 0 -2em;
 807     padding: 0 2.5em;
 808     line-height: 2em;
 809 }
 810
 811 #top-message a {
 812     color: #AAA;
 813 }
 814
 815
 816 /* =========== */
 817 /* = Columns = */
 818 /* =========== */
 819 .column-left {
 820     width: 37em;
 821     float: left;
 822     text-align: justify;
 823     margin-top: 1em;
 824 }
 825
 826 .column-right {
 827     margin-left: 40em;
 828     text-align: justify;
 829     margin-top: 1em;
 830 }
 831
 832 .see-more {
 833     text-align: right;
 834 }
 835
 836 .remove-from-shelf {
 837     float: right;
 838     padding: 0.2em;
 839     margin: 0.3em;
 840     color: #900;
 841 }
 842
 843 .remove-from-shelf:active, .remove-from-shelf:hover {
 844     color: #FFF;
 845     background-color: #900;
 846     text-decoration: none;
 847 }
 848
 849 /* =========== */
 850 /* = Lessons = */
 851 /* =========== */
 852 #lessons {
 853     margin-top: 2.5em;
 854 }
 855
 856 #document-list {
 857     width: 380px;
 858     float: left;
 859 }
 860
 861 #document-list ol {
 862     margin: 0;
 863     padding: 0;
 864     list-style: none;
 865 }
 866
 867 #document-list li a {
 868     padding: 0.5em;
 869     background-color: #FFF;
 870     -moz-border-radius: 3px;
 871     -webkit-border-radius: 3px;
 872     border-radius: 3px;
 873 /*    font-size: 1.2em;*/
 874     font-weight: bold;
 875     width: 370px;
 876     margin-bottom: 0.25em;
 877     display: block;
 878 }
 879
 880 #document-list li a:hover, #document-list li a.active {
 881     text-decoration: none;
 882     background-color: #EEE;
 883 }
 884
 885 #document-list-body #document-detail {
 886     margin-left: 390px;
 887 }
 888
 889 #document-detail {
 890     width: 480px;
 891 }
 892
 893 #document-detail h2 {
 894     margin: 0.75em 0 0.75em 0;
 895 }
 896
 897 #document-list-body #document-detail .download {
 898     float: right;
 899     margin: 0;
 900     padding: 0
 901 }
 902
 903 /* ====================== */
 904 /* = One percent banner = */
 905 /* ====================== */
 906 #onepercent-banner {
 907     color: #FFF;
 908     margin: 0 -1.1em;
 909     padding: 0 1.1em;
 910     vertical-align: middle;
 911     background-color: #FF6B3C;
 912     height: 60px;
 913     font-size: 1.8em;
 914     line-height: 1.5em;
 915     position: relative;
 916 }
 917
 918 #onepercent-text, #onepercent-line:visited, #onepercent-text:hover, #onepercent-text:active {
 919     display: block;
 920     line-height: 60px;
 921     color: #FFF;
 922     text-decoration: none;
 923 }
 924
 925 #onepercent-text strong {
 926     font-weight: normal;
 927     text-decoration: underline;
 928 }
 929
 930 #onepercent-see-more, #onepercent-see-more:visited, #onepercent-see-more:hover, #onepercent-see-more:active {
 931     position: absolute;
 932     right: 2em;
 933     width: 9em;
 934     text-align: right;
 935     bottom: 0;
 936     font-size: 12px;
 937     color: #FFF;
 938     text-decoration: none;
 939 }
 940 #createNewShelf {
 941 display: none;
 942 }