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 img {
  10     border: none;
  11 }
  12
  13 a {
  14     color: #295158;
  15     text-decoration: none;
  16 }
  17
  18 a:hover, a:active {
  19     text-decoration: underline;
  20 }
  21
  22 input {
  23     font: 1em Verdana, Arial, Helvetica, sans-serif;
  24 }
  25
  26 h1 {
  27     font: normal normal bold 1.75em Arial, sans-serif;
  28     color: #2F4110;
  29     margin: 0.55em 0 0 0;
  30 }
  31
  32 h2 {
  33     font-size: 1.2em;
  34     font-weight: bold;
  35     color: #2F4110;
  36     margin: 0;
  37 }
  38
  39 h3 {
  40     font-size: 1em;
  41     font-weight: bold;
  42     margin: 0.2em 0 -1em 0;
  43     color: #333;
  44 }
  45
  46 em {
  47     font-style: normal;
  48     background-color: #F5DC7D;
  49 }
  50
  51 .clearboth {
  52     clear: both;
  53 }
  54
  55 .blur {
  56     color: #777;
  57 }
  58
  59 /* ================================== */
  60 /* = Header with logo and user-info = */
  61 /* ================================== */
  62 #header {
  63     position: relative;
  64     margin-top: 1.5em;
  65 }
  66
  67 #header #logo {
  68     float: left;
  69 }
  70
  71 #header #user-info {
  72     margin: 0 0 0 auto;
  73     width: 40em;
  74     text-align: right;
  75 }
  76
  77 #site-description {
  78     margin-top: -1.5em;
  79     height:4.5em;
  80     overflow: hidden;
  81     float: right;
  82     width: 42em;
  83     text-align: right;
  84     color: #777;
  85 }
  86
  87 /* ======================== */
  88 /* = Footer with sponsors = */
  89 /* ======================== */
  90 #footer {
  91     border-top: 0.1em solid #999;
  92     color: #777;
  93     font-size: 0.8em;
  94     padding-top: 0.5em;
  95     margin: 2em 0 0 0;
  96 }
  97
  98 #footer p {
  99     margin: 0;
 100 }
 101
 102 #footer a {
 103     color: #999;
 104     text-decoration: underline;
 105 }
 106
 107
 108 /* =============== */
 109 /* = Search form = */
 110 /* =============== */
 111 #search-form {
 112     margin: 0.5em 0;
 113     padding: 0.5em;
 114     background-color: rgb(132, 191, 42);
 115     -moz-border-radius: 4px;
 116     -webkit-border-radius: 4px;
 117     border-radius: 4px;
 118     border-bottom: 0.15em solid #7B9C2D;
 119     border-right: 0.15em solid #7B9C2D;
 120 }
 121
 122 #search-form p {
 123     margin: 0em 0 0 0;
 124 }
 125
 126 #search-form ol {
 127     margin: 0;
 128     padding: 0;
 129 }
 130
 131 #search-form li {
 132     margin: 0;
 133     padding: 0;
 134     list-style: none;
 135     display: block;
 136     float: left;
 137 }
 138
 139 #search-form li.category, #search-form li.book-title {
 140     padding: 0.2em 0.5em 0.2em 0.5em;
 141     background-color: rgb(242, 163, 15);
 142     border: 1px solid #BA8722;
 143     border-right: 1px solid #555;
 144     border-bottom: 1px solid #555;
 145     -moz-border-radius: 3px;
 146     -webkit-border-radius: 3px;
 147     border-radius: 3px;
 148     margin-right: 0.25em;
 149 }
 150
 151 #search-form li.book-title {
 152     background-color: #DDD;
 153     border: 1px solid #999;
 154     border-right: 1px solid #555;
 155     border-bottom: 1px solid #555;
 156 }
 157
 158 #search-form input[type=submit] {
 159     color: #444;
 160 }
 161
 162 .ac_input {
 163     width: 18em;
 164 }
 165
 166 p .ac_input {
 167     width: 28em;
 168 }
 169
 170
 171 /* ============= */
 172 /* = Tags list = */
 173 /* ============= */
 174 #intro {
 175     margin: 0 0 2.5em 0;
 176 }
 177
 178 #tags-description {
 179     color: #777;
 180     margin: 0 0.5em -0.75em 0.5em;
 181 }
 182
 183 #main-page #tags-list {
 184     margin-right: 33%;
 185 }
 186
 187 #categories-list ul, #themes-list ul {
 188     -moz-column-width: 12em;
 189     -webkit-column-width: 12em;
 190     column-width: 12em;
 191 }
 192
 193 #tags-list {
 194     margin-top: 1em;
 195     padding: 1em;
 196     background-color: #FBF9E7;
 197     -moz-border-radius: 4px;
 198     -webkit-border-radius: 4px;
 199     border-radius: 4px;
 200     border-bottom: 0.15em solid #E3D888;
 201     border-right: 0.15em solid #E3D888;
 202 }
 203
 204 #tagged-object-list #tags-list, #book-detail #tags-list {
 205     margin-left: 39em;
 206 }
 207
 208 #book-info, #categories-list {
 209     float: left;
 210     width: 47.5%;
 211 }
 212
 213 #themes-list {
 214     margin-left: 52.5%;
 215 }
 216
 217 #tagged-object-list #categories-list, #book-detail #book-info {
 218     width: 12em;
 219 }
 220
 221 #book-detail #formats .change-sets {
 222     margin-right: 0.5em;
 223 }
 224
 225 #formats .wrap a {
 226     display: block;
 227     width: 100%;
 228     height: 1.5em;
 229     background-color: #EEE;
 230     margin-top: 0.5em;
 231     padding: 0.5em 0;
 232     -moz-border-radius: 4px;
 233     -webkit-border-radius: 4px;
 234     border-radius: 4px;
 235     text-align: center;
 236 }
 237
 238 #czytamysluchajac {
 239     margin-top: 2.5em;
 240 }
 241
 242 #czytamy-sluchajac-info {
 243     width: 400px;
 244     height: 80px;
 245 }
 246
 247 #czytamy-sluchajac-info p {
 248     margin-left: 170px;
 249     padding-top: 1em;
 250     padding-bottom: 0em;
 251 }
 252
 253 #formats #czytamysluchajac-logo {
 254     background: white;
 255     text-align: left;
 256     float: left;
 257     width: 140px;
 258     height: 62px;
 259     -moz-border-radius: 0px;
 260     -webkit-border-radius: 0px;
 261     border-radius: 0px;
 262 }
 263
 264 #tagged-object-list #themes-list, #book-detail #themes-list {
 265     margin-left: 14em;
 266 }
 267
 268 #tags-list ol, #tags-list ul {
 269     padding: 0;
 270     margin: 0.3em 0 1.2em 0;
 271 }
 272
 273 #tags-list li {
 274     list-style: none;
 275     padding: 0;
 276     margin: 0;
 277 }
 278
 279 #books-list {
 280     width: 38em;
 281     float: left;
 282 }
 283
 284 .all-tags {
 285     display: none;
 286 }
 287
 288 div.shown-tags p, div.all-tags p {
 289     margin: -1em 0 1em 0;
 290     text-align: right;
 291 }
 292
 293 .show-all-tags, .hide-all-tags {
 294     text-decoration: underline;
 295     padding-right: 1em;
 296 }
 297
 298 .subcategories {
 299     display: block;
 300     padding-left: 2em;
 301     padding-bottom: 0.5em;
 302 }
 303
 304
 305 /* ============== */
 306 /* = Propaganda = */
 307 /* ============== */
 308 #propaganda {
 309     float: right;
 310     width: 30%;
 311     margin: 0;
 312     padding: 2em 0.5em 0.5em;
 313 }
 314
 315
 316 /* ===================== */
 317 /* = Other info        = */
 318 /* ===================== */
 319 #latest-blog-posts {
 320     padding: 0.5em;
 321     float: left;
 322     width: 30%;
 323 }
 324
 325 #latest-blog-posts ol {
 326     padding: 0 0 0 1.5em;
 327     margin: 1em 0 0 0;
 328     list-style-type: square;
 329     color: #D13628;
 330 }
 331
 332 #you-can-help {
 333     float: right;
 334     padding: 0.5em;
 335     width: 30%;
 336 }
 337
 338 #about-us {
 339     padding: 0.5em;
 340     margin-left: 35%;
 341     margin-right: 35%;
 342 }
 343
 344 /* =============== */
 345 /* = Description = */
 346 /* =============== */
 347 #description {
 348     margin-top: 0.5em;
 349     text-align: justify;
 350 }
 351
 352 #description .meta {
 353     margin: 0.5em;
 354     width: 18em;
 355     list-style: none;
 356     float: right;
 357 }
 358
 359 #description dt {
 360     font-weight: bold;
 361     display: inline;
 362 }
 363
 364 #description dd {
 365     margin: 0;
 366     display: inline;
 367 }
 368
 369 #toggle-description, #tagged-object-list .pagination, #book-detail .pagination {
 370     width: 100%;
 371     height: 1.5em;
 372     background-color: #EEE;
 373     margin-top: 0.5em;
 374     -moz-border-radius: 4px;
 375     -webkit-border-radius: 4px;
 376     border-radius: 4px;
 377     text-align: center;
 378 }
 379
 380 #toggle-description p {
 381     margin: 0;
 382     padding: 0;
 383     color: #999;
 384 }
 385
 386 #download-shelf {
 387     display: block;
 388     width: 100%;
 389     height: 1.5em;
 390     background-color: #EEE;
 391     margin-top: 0.5em;
 392     padding: 0.5em 0;
 393     -moz-border-radius: 4px;
 394     -webkit-border-radius: 4px;
 395     border-radius: 4px;
 396     text-align: center;
 397 }
 398
 399 /* ============================ */
 400 /* = Books and fragments list = */
 401 /* ============================ */
 402 #books-list {
 403     margin: 0;
 404 }
 405
 406 #books-list ol {
 407     list-style: none;
 408     padding: 0;
 409     margin: 1.5em 0;
 410 }
 411
 412 .book {
 413     padding: 0.5em;
 414     background-color: #FFF;
 415     -moz-border-radius: 3px;
 416     -webkit-border-radius: 3px;
 417     border-radius: 3px;
 418 }
 419
 420 .fragment {
 421     border-bottom: 0.1em solid #EEE;
 422     margin-top: 0.5em;
 423 }
 424
 425 .fragment-text, .fragment-short-text {
 426     padding: 0.5em;
 427     background-color: #FFF;
 428     -moz-border-radius: 3px;
 429     -webkit-border-radius: 3px;
 430     border-radius: 3px;
 431 }
 432
 433 .fragment-metadata {
 434     padding: 0.5em 0.5em 1.5em 0.5em;
 435     float: right;
 436 }
 437
 438 .change-sets {
 439     float: right;
 440 }
 441
 442 .change-sets a {
 443     padding: 0.2em;
 444     margin: 0.3em;
 445     border: 0.1em solid #EEE;
 446     background-color: #F9F9F9;
 447 }
 448
 449 .book-description {
 450     margin-left: 3.5em;
 451 }
 452
 453 .book-thumbnail, .book-parent-thumbnail {
 454     background: transparent url(/static/img/book.png) no-repeat 0 0;
 455     width: 3em;
 456     height: 3em;
 457     float: left;
 458 }
 459
 460 .book-parent-thumbnail {
 461     background: transparent url(/static/img/book-parent.png) no-repeat 0 0;
 462 }
 463
 464
 465 /* =============== */
 466 /* = Simple form = */
 467 /* =============== */
 468 .cuteform ol, .cuteform ul {
 469     padding: 0;
 470     margin: 0;
 471     list-style: none;
 472 }
 473
 474 .cuteform ol li, .cuteform ul li {
 475     margin-top: 0.7em;
 476 }
 477
 478 .cuteform label {
 479     display: block;
 480 }
 481
 482 .cuteform span.help-text {
 483     display: block;
 484     font-size: 0.8em;
 485     color: #999;
 486 }
 487
 488 .cuteform .error {
 489     color: #BF3024;
 490 }
 491
 492 /* ================ */
 493 /* = Modal Window = */
 494 /* ================ */
 495 .jqmOverlay { background-color: #000; }
 496
 497 #set-window {
 498     position: absolute;
 499     display: none;
 500     width: 32em;
 501     background-color: transparent;
 502     margin-top: -0.5em;
 503     margin-left: -1em;
 504 }
 505
 506 #set-window div.header {
 507     background-color: #FFF;
 508     border-right: 0.25em solid #DDD;
 509     width: 4em;
 510     padding: 0.5em 1em 0.5em 1em;
 511 }
 512
 513 #set-window div.target {
 514     background-color: #FFF;
 515     border-right: 0.3em solid #DDD;
 516     border-bottom: 0.3em solid #DDD;
 517     padding: 1em;
 518 }
 519
 520 #login-register-window {
 521     position: absolute;
 522     display: none;
 523     width: 24em;
 524     background-color: transparent;
 525     margin-top: -0.5em;
 526     margin-left: 1em;
 527 }
 528
 529 #login-register-window div.header {
 530     background-color: #FFF;
 531     border-right: 0.3em solid #DDD;
 532     width: 4em;
 533     right: 0;
 534     left: auto;
 535     padding: 0.5em 1em 0.5em 1em;
 536     float: right;
 537     text-align: center;
 538 }
 539
 540 #login-register-window div.target {
 541     clear: both;
 542     background-color: #FFF;
 543     border-right: 0.3em solid #DDD;
 544     border-bottom: 0.3em solid #DDD;
 545     padding: 1em;
 546 }
 547
 548 #user-shelves-window {
 549     position: absolute;
 550     display: none;
 551     width: 28em;
 552     background-color: transparent;
 553     margin-top: -0.5em;
 554     margin-left: 1em;
 555 }
 556
 557 #user-shelves-window div.header {
 558     background-color: #FFF;
 559     border-right: 0.3em solid #DDD;
 560     width: 4em;
 561     right: 0;
 562     left: auto;
 563     padding: 0.5em 1em 0.5em 1em;
 564     float: right;
 565     text-align: center;
 566 }
 567
 568 #user-shelves-window div.target {
 569     clear: both;
 570     background-color: #FFF;
 571     border-right: 0.3em solid #DDD;
 572     border-bottom: 0.3em solid #DDD;
 573     padding: 1em;
 574 }
 575
 576 .shelf-list {
 577     list-style: none;
 578     padding: 0;
 579 }
 580
 581 .shelf-list li {
 582     padding: 0.25em;
 583     margin: 0 -0.25em;
 584 }
 585
 586 .shelf-list a.delete-shelf {
 587     color: #900;
 588     float: right;
 589     padding: 0.25em 0.25em 0.25em 1em;
 590     margin: -0.25em;
 591 }
 592
 593 .shelf-list a.delete-shelf:active, .shelf-list a.delete-shelf:hover {
 594     color: #FFF;
 595     background-color: #900;
 596     text-decoration: none;
 597 }
 598
 599 /* ======================== */
 600 /* = Alphabetic book list = */
 601 /* ======================== */
 602 #book-a-list #book-list {
 603     -moz-column-width: 24em;
 604     -webkit-column-width: 24em;
 605     column-width: 24em;
 606 }
 607
 608 #book-a-list #book-list ol {
 609     padding: 0;
 610     margin: 0.3em 0 1.2em 0;
 611     list-style: none;
 612 }
 613
 614 #top-message {
 615     background-color: #2F4110;
 616     color: #FFF;
 617     margin: 0 -2em;
 618     padding: 0 2.5em;
 619     line-height: 2em;
 620 }
 621
 622 #top-message a {
 623     color: #AAA;
 624 }
 625
 626
 627 /* =========== */
 628 /* = Columns = */
 629 /* =========== */
 630 .column-left {
 631     width: 37em;
 632     float: left;
 633     text-align: justify;
 634     margin-top: 1em;
 635 }
 636
 637 .column-right {
 638     margin-left: 40em;
 639     text-align: justify;
 640     margin-top: 1em;
 641 }
 642
 643 .see-more {
 644     text-align: right;
 645 }
 646
 647 .remove-from-shelf {
 648     float: right;
 649     padding: 0.2em;
 650     margin: 0.3em;
 651     color: #900;
 652 }
 653
 654 .remove-from-shelf:active, .remove-from-shelf:hover {
 655     color: #FFF;
 656     background-color: #900;
 657     text-decoration: none;
 658 }