inc/shaarli.css

   1 /* Cascading Stylesheet for Shaarli - https://github.com/shaarli/Shaarli */
   2
   3 body {
   4     font-family: "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
   5     font-size: 10pt;
   6     background-color: #ffffff;
   7     word-wrap: break-word;
   8 }
   9
  10 input, textarea {
  11     background-color: #dedede;
  12     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
  13     background: -webkit-linear-gradient(#dedede, #ffffff);
  14     background: -moz-linear-gradient(#dedede, #ffffff);
  15     background: -ms-linear-gradient(#dedede, #ffffff);
  16     background: -o-linear-gradient(#dedede, #ffffff);
  17     background: linear-gradient(#dedede, #ffffff);
  18     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  19     padding: 5px;
  20     border-radius: 5px 5px 5px 5px;
  21     border: none;
  22     color: #000;
  23 }
  24
  25 a {
  26     text-decoration: none;
  27 }
  28
  29 h1 {
  30     font-size: 20pt;
  31     font-weight: bold;
  32     font-style: italic;
  33     margin-bottom: 20px;
  34 }
  35
  36 /* Buttons */
  37 .bigbutton {
  38     background-color: #c0c0c0;
  39     background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent;
  40     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff));
  41     background: -webkit-linear-gradient(#c0c0c0, #ffffff);
  42     background: -ms-linear-gradient(#c0c0c0, #ffffff);
  43     background: -o-linear-gradient(#c0c0c0, #ffffff);
  44     background: linear-gradient(#c0c0c0, #ffffff);
  45     border-radius: 3px 3px 3px 3px;
  46     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  47     cursor: pointer;
  48     height: 24px;
  49     margin-left: 5px;
  50     padding: 0 5px;
  51     color: #606060;
  52     border-style: outset;
  53     border-width: 1px;
  54 }
  55
  56 .smallbutton {
  57     background-color: #c0c0c0;
  58     background: -moz-linear-gradient(#c0c0c0, #ffffff) repeat scroll 0 0 transparent;
  59     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#c0c0c0), to(#ffffff));
  60     background: -webkit-linear-gradient(#c0c0c0, #ffffff);
  61     background: -ms-linear-gradient(#c0c0c0, #ffffff);
  62     background: -o-linear-gradient(#c0c0c0, #ffffff);
  63     background: linear-gradient(#c0c0c0, #ffffff);
  64     border-radius: 3px 3px 3px 3px;
  65     box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
  66     cursor: pointer;
  67     height: 20px;
  68     margin-left: 5px;
  69     padding: 0 5px;
  70     color: #606060;
  71     border-style: outset;
  72     border-width: 1px;
  73 }
  74
  75 /* Small tab on the left of each link with edit/delete buttons. */
  76 .button_edit, .button_delete {
  77     border-radius: 0;
  78     box-shadow: none;
  79     border-style: none;
  80     border-width: 0;
  81     padding: 0;
  82     background: none;
  83 }
  84
  85 .linkeditbuttons {
  86     position: absolute;
  87     left: -1px;
  88     padding: 4px 2px 2px 2px;
  89     background-color: #f0f0f0;
  90
  91     -webkit-border-radius: 0px 6px 6px 0px;
  92     -moz-border-radius: 0px 6px 6px 0px;
  93     -o-border-radius: 0px 6px 6px 0px;
  94     -ms-border-radius: 0px 6px 6px 0px;
  95     border-radius: 0px 6px 6px 0px;
  96
  97     -webkit-box-shadow: 0px 0px 3px 0px #333333;
  98     -moz-box-shadow: 0px 0px 3px 0px #333333;
  99     -o-box-shadow: 0px 0px 3px 0px #333333;
 100     -ms-box-shadow: 0px 0px 3px 0px #333333;
 101     box-shadow: 0px 0px 3px 0px #333333;
 102 }
 103
 104 #pageheader #logo {
 105     background-image: url('../images/logo.png');
 106     background-repeat: no-repeat;
 107     float: left;
 108     margin: 0 10px 0 10px;
 109     width: 105px;
 110     height: 55px;
 111     cursor: pointer;
 112 }
 113
 114 #pageheader #linkcount {
 115     float: right;
 116     font-style: italic;
 117     color: #bbb;
 118     text-align: right;
 119     padding-right: 5px;
 120 }
 121
 122 #pageheader {
 123     background-color: #333333;
 124     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#111111));
 125     background: -webkit-linear-gradient(#333333, #111111);
 126     background: -moz-linear-gradient(#333333, #111111);
 127     background: -ms-linear-gradient(#333333, #111111);
 128     background: -o-linear-gradient(#333333, #111111);
 129     background: linear-gradient(#333333, #111111);
 130     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 131     width: auto;
 132     padding: 0 10px 5px 10px;
 133     margin: auto;
 134 }
 135
 136 #pageheader a {
 137     background-color: #333333;
 138     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#333333), to(#000000));
 139     background: -webkit-linear-gradient(#333333, #000000);
 140     background: -moz-linear-gradient(#333333, #000000);
 141     background: -ms-linear-gradient(#333333, #000000);
 142     background: -o-linear-gradient(#333333, #000000);
 143     background: linear-gradient(#333333, #000000);
 144     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 145     padding: 5px;
 146     border-radius: 5px 5px 5px 5px;
 147     margin: 10px 3px 3px 3px;
 148     color: #A2DD42;
 149     float: left;
 150     text-decoration: none;
 151 }
 152
 153 #pageheader .search {
 154     width: 100%;
 155     white-space: nowrap;
 156 }
 157
 158 #toolsdiv a {
 159     clear: both;
 160 }
 161
 162 #toolsdiv #bookmark {
 163     clear: none;
 164 }
 165
 166 #toolsdiv a span {
 167     color: #ffffff;
 168 }
 169
 170 .linksperpage, .tagfilter, .searchform, .addform {
 171     background-color: #dedede;
 172     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
 173     background: -webkit-linear-gradient(#dedede, #ffffff);
 174     background: -moz-linear-gradient(#dedede, #ffffff);
 175     background: -ms-linear-gradient(#dedede, #ffffff);
 176     background: -o-linear-gradient(#dedede, #ffffff);
 177     background: linear-gradient(#dedede, #ffffff);
 178     display: inline;
 179     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 180     padding: 5px;
 181     border: none;
 182     border-radius: 5px 5px 5px 5px;
 183     margin: 10px 3px 3px 3px;
 184     color: #cecece;
 185 }
 186
 187 .linksperpage {
 188     box-shadow: 0 0 0 rgba(0, 0, 0, 0.5);
 189     padding: 3px;
 190 }
 191
 192 .linksperpage input, .tagfilter input, .searchform input, .addform input {
 193     border: none;
 194     color: #606060;
 195     background: none;
 196     box-shadow: none;
 197     padding: 5px;
 198 }
 199
 200 .linksperpage input {
 201     padding: 0;
 202 }
 203
 204 .searchform #searchform_value {
 205     width: 30%;
 206 }
 207
 208 .tagfilter {
 209     margin-left:24px;
 210 }
 211
 212 .tagfilter #tagfilter_value {
 213     width: 10%;
 214 }
 215
 216 .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
 217     background-color: #dedede;
 218     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#dedede), to(#ffffff));
 219     background: -webkit-linear-gradient(#dedede, #ffffff);
 220     background: -moz-linear-gradient(#dedede, #ffffff);
 221     background: -ms-linear-gradient(#dedede, #ffffff);
 222     background: -o-linear-gradient(#dedede, #ffffff);
 223     background: linear-gradient(#dedede, #ffffff);
 224     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
 225     padding: 0 5px 0 5px;
 226     margin: 5px 0 5px 0;
 227     height: 20px;
 228     border-radius: 5px 5px 5px 5px;
 229     cursor: pointer;
 230 }
 231
 232 #shaarli_title {
 233     font-weight: bold;
 234     font-style: italic;
 235     margin-top: 0;
 236 }
 237
 238 #shaarli_title a {
 239     color: #fff !important;
 240 }
 241
 242 #pageheader a:visited {
 243     color: #98C943;
 244     text-decoration: none;
 245 }
 246
 247 #pageheader a:hover {
 248     color: #FFFFC9;
 249     text-decoration: none;
 250 }
 251
 252 #pageheader a:active {
 253     color: #bbb;
 254     text-decoration: none;
 255 }
 256
 257 #searchcriteria {
 258     padding: 4px 0px 5px 5px;
 259     font-weight: bold;
 260 }
 261
 262 .paging {
 263     padding: 5px;
 264     background-color: #777;
 265     color: #ccc;
 266     text-align: center;
 267     clear: both;
 268 }
 269
 270 .paging a:link {
 271     color: #ccc;
 272     text-decoration: none;
 273 }
 274
 275 .paging a:visited {
 276     color: #ccc;
 277 }
 278
 279 .paging a:hover {
 280     color: #FFFFC9;
 281 }
 282
 283 .paging a:active {
 284     color: #fff;
 285 }
 286
 287 .paging_privatelinks {
 288     float: left;
 289 }
 290
 291 .paging_linksperpage {
 292     float: right;
 293     padding-right: 5px;
 294 }
 295
 296 .paging_linksperpage form.linksperpage {
 297     display: inline;
 298 }
 299
 300 .paging_linksperpage form.linksperpage input {
 301     height: 15px;
 302 }
 303
 304 .paging_current {
 305     display: inline;
 306     color: #fff;
 307     padding: 0 20 0 20;
 308 }
 309
 310 .paging_older {
 311     margin-right: 15px;
 312 }
 313
 314 .paging_newer {
 315     margin-left: 15px;
 316 }
 317
 318 #headerform {
 319     color: #ffffff;
 320     padding: 5px 5px 5px 5px;
 321     clear: both;
 322 }
 323
 324 #headerform input.linkurl {
 325     width: 50%;
 326 }
 327
 328 #toolsdiv {
 329     color: #ffffff;
 330     padding: 5px 5px 5px 5px;
 331     clear: left;
 332 }
 333
 334 #uploaddiv {
 335     color: #ffffff;
 336     padding: 5px 5px 5px 5px;
 337     clear: left;
 338 }
 339
 340 #editlinkform {
 341     height: 100%;
 342     padding: 5px 5px 5px 15px;
 343     width: 80%;
 344     clear: left;
 345 }
 346
 347 #editlinkform label {
 348     color: #ffffff;
 349 }
 350
 351 #editlinkform textarea, #editlinkform .lf_input {
 352     width: 100%;
 353 }
 354
 355 #linklist li {
 356     padding: 4px 10px 15px 20px;
 357     border-top: 1px solid #bbb;
 358     clear: both;
 359     background-color: #F2F2F2;
 360     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff));
 361     background: -webkit-linear-gradient(#F2F2F2, #ffffff);
 362     background: -moz-linear-gradient(#F2F2F2, #ffffff);
 363     background: -ms-linear-gradient(#F2F2F2, #ffffff);
 364     background: -o-linear-gradient(#F2F2F2, #ffffff);
 365     background: linear-gradient(#F2F2F2, #ffffff);
 366 }
 367
 368 /*
 369 #linklist li.publicLinkHightLight:hover, #linklist li:hover {
 370     background: #E9FFCE;
 371 }
 372 */
 373
 374 .linkdate, .linkarchive {
 375     font-size:8pt;
 376     color:#888;
 377 }
 378
 379 .linkdate a, .linkarchive a {
 380     color:#E28E3F;
 381 }
 382
 383 .linkqrcode {
 384     display: inline;
 385     position: relative;
 386 }
 387
 388 a.qrcode img {
 389     width: 13px;
 390     height: 13px;
 391 }
 392
 393 #linklist li.private {
 394     background: url('../images/private.png') no-repeat 10px center;
 395     padding-left: 60px;
 396 }
 397
 398 #linklist li {
 399     padding-left: 26px;
 400 }
 401
 402 .private .linktitle a {
 403     color: #969696;
 404 }
 405
 406 .linktitle {
 407     font-size: 14pt;
 408     font-weight: bold;
 409 }
 410
 411 .linktitle a {
 412     text-decoration: none;
 413     color: #80AD48;
 414 }
 415
 416 .linktitle a:hover {
 417     color: #F57900;
 418 }
 419
 420 .linkdate, .linkarchive {
 421     font-size: 8pt;
 422     color: #888;
 423 }
 424
 425 .linkdate a, .linkarchive a {
 426     background-image: url('../images/calendar.png');
 427     padding: 2px 0 3px 20px;
 428     background-repeat: no-repeat;
 429     text-decoration: none;
 430     color: #E28E3F;
 431 }
 432
 433 .linkdate a:hover {
 434     color: #F57900 }
 435
 436 .linkurl {
 437     font-size: 8pt;
 438     color: #4BAA74;
 439 }
 440
 441 .linkdescription {
 442     color: #000;
 443     margin-top: 0;
 444     margin-bottom: 12px;
 445     font-weight: normal;
 446     max-height: 400px;
 447     overflow: auto;
 448 }
 449
 450 .linkdescription a {
 451     text-decoration: none;
 452     color: #3465A4;
 453 }
 454
 455 .linkdescription a:hover {
 456     color: #F57900;
 457 }
 458
 459 .linktaglist {
 460     padding-top: 10px;
 461     line-height: 200%;
 462 }
 463
 464 .linktag {
 465     font-size: 9pt;
 466     background-color: #F2F2F2;
 467     background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F2F2F2), to(#ffffff));
 468     background: -webkit-linear-gradient(#F2F2F2, #ffffff);
 469     background: -moz-linear-gradient(#F2F2F2, #ffffff);
 470     background: -ms-linear-gradient(#F2F2F2, #ffffff);
 471     background: -o-linear-gradient(#F2F2F2, #ffffff);
 472     background: linear-gradient(#F2F2F2, #ffffff);
 473     box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
 474     padding: 3px 3px 3px 20px;
 475     height: 20px;
 476     border-radius: 3px 3px 3px 3px;
 477     cursor: pointer;
 478     background-image: url('../images/tag_blue.png');
 479     background-repeat: no-repeat;
 480     background-position: 3px center;
 481     background-color: #ffffff;
 482 }
 483
 484 .linktag:hover {
 485     border-color: #555573;
 486     color: #000;
 487 }
 488
 489 .linktag a {
 490     color: #777;
 491     text-decoration: none;
 492 }
 493
 494 .linktag .remove {
 495     border-left: 1px solid #aaa;
 496     padding-left: 5px;
 497     color:#6767A7;
 498 }
 499
 500 .linkshort {
 501     font-size: 8pt;
 502     color: #888;
 503 }
 504
 505 .linkshort a {
 506     text-decoration: none;
 507     color: #393964;
 508 }
 509
 510 .linkshort a:hover {
 511     text-decoration: underline;
 512 }
 513
 514 .buttoneditform {
 515     display: inline;
 516 }
 517
 518 #footer {
 519     font-size: 8pt;
 520     text-align: center;
 521     border-top: 1px solid #ddd;
 522     color: #888;
 523     clear: both;
 524 }
 525
 526 #footer a {
 527     color: #486D08;
 528 }
 529
 530 #footer a:hover {
 531     color: #000000;
 532 }
 533
 534 #newversion {
 535     background-color: #FFFFA0;
 536     color: #000;
 537     position: absolute;
 538     top: 0;
 539     right: 0;
 540     padding: 2 7 2 7;
 541     font-size: 9pt;
 542 }
 543
 544 #newversion #version_id {
 545     text-decoration: blink;
 546 }
 547
 548 #cloudtag {
 549     padding-left: 10%;
 550     padding-right: 10%;
 551 }
 552
 553 #cloudtag .count {
 554     color: #99f;
 555     font-size: 9pt;
 556     padding-left: 5px;
 557     padding-right: 2px;
 558 }
 559
 560 #cloudtag a {
 561     color: black;
 562     text-decoration: none;
 563 }
 564
 565 #install {
 566     margin: 0 20px;
 567 }
 568
 569 #installform {
 570     border: 1px solid black;
 571     padding: 10px;
 572 }
 573
 574 #installform table {
 575     border: none;
 576 }
 577
 578 #installform td {
 579     font-size: 10pt;
 580     color: black;
 581     padding: 10px 5px 10px 5px;
 582     clear: left;
 583 }
 584
 585 #installform input.bigbutton {
 586     float: right;
 587 }
 588
 589 #changepasswordform {
 590     color: #ccc;
 591     padding: 10px 5px 10px 5px;
 592     clear: left;
 593 }
 594
 595 #changetag {
 596     color: #ccc;
 597     padding: 10px 5px 10px 5px;
 598     clear: left;
 599 }
 600
 601 #changetag #totag {
 602     margin-left: 40px;
 603 }
 604
 605 #changetag div {
 606     float:left;
 607 }
 608
 609 #changetag label {
 610     padding: 5px;
 611 }
 612
 613 #changetag li {
 614     color: #000;
 615 }
 616 #configform td {
 617     color: #ccc;
 618     font-size: 10pt;
 619     padding: 10px 5px 10px 5px;
 620 }
 621
 622 #configform {
 623     color: #ccc;
 624     padding: 10px 5px 10px 5px;
 625     clear: left;
 626 }
 627
 628 .thumbnail {
 629     float: right;
 630     margin-left: 10px;
 631 }
 632
 633 /* If you want thumbnails on the left:
 634 .thumbnail {
 635     float: left;
 636     margin-right: 10px;
 637 }
 638 .linkcontainer {
 639     position: static;
 640     margin-left: 130px;
 641 }
 642 */
 643
 644 /* --- Picture wall CSS --- */
 645 #picwall_container {
 646     color: #fff;
 647     background-color: #000;
 648     clear: both;
 649 }
 650
 651 .picwall_pictureframe {
 652     background-color: #000;
 653     z-index: 5;
 654     position: relative;
 655     display: table-cell;
 656     vertical-align: middle;
 657     width: 90px;
 658     height: 90px;
 659     overflow: hidden;
 660     text-align: center;
 661     float: left;
 662 }
 663
 664 .b-lazy {
 665     -webkit-transition: opacity 500ms ease-in-out;
 666     -moz-transition: opacity 500ms ease-in-out;
 667     -o-transition: opacity 500ms ease-in-out;
 668     transition: opacity 500ms ease-in-out;
 669     opacity: 0;
 670 }
 671 .b-lazy.b-loaded {
 672     opacity: 1;
 673 }
 674
 675 .picwall_pictureframe img {
 676     max-width: 100%;
 677     height: auto;
 678     color: transparent;
 679 } /* Adapt the width of the image */
 680
 681 .picwall_pictureframe a {
 682     text-decoration: none;
 683 }
 684
 685 /* CSS to show title when hovering an image - no javascript required. */
 686 .picwall_pictureframe span.info {
 687     display: none;
 688 }
 689
 690 .picwall_pictureframe:hover span.info {
 691     display: block;
 692     position: absolute;
 693     top: 0;
 694     left: 0;
 695     width: 90px;
 696     font-weight: bold;
 697     font-size: 8pt;
 698     color: #fff;
 699     text-align: left;
 700     background-color: transparent;
 701     background-color: rgba(0, 0, 0, 0.4);
 702     /* FF3+, Saf3+, Opera 10.10+, Chrome, IE9 */
 703     filter: progid: DXImageTransform.Microsoft.gradient(startColorstr=#66000000, endColorstr=#66000000);
 704     /* IE6\96IE9 */
 705     text-shadow: 2px 2px 1px #000000;
 706 }
 707
 708 #linklist li.publicLinkHightLight {
 709     background: #ffffff;
 710 }
 711
 712 div#permalinkQrcode {
 713     padding: 20px;
 714     width: 220px;
 715     height: 220px;
 716     background-color: #ffffff;
 717     border: 1px solid black;
 718     position: absolute;
 719     top: -100px;
 720     left: -100px;
 721     text-align: center;
 722     font-size: 8pt;
 723     z-index: 50;
 724     -webkit-box-shadow: 2px 2px 20px 2px #333333;
 725     -moz-box-shadow: 2px 2px 20px 2px #333333;
 726     -o-box-shadow: 2px 2px 20px 2px #333333;
 727     -ms-box-shadow: 2px 2px 20px 2px #333333;
 728     box-shadow: 2px 2px 20px 2px #333333;
 729 }
 730
 731 div.daily {
 732     font-family: Georgia, 'DejaVu Serif', Norasi, serif;
 733     background-color: #E6D6BE;
 734     /* Background paper texture by BashCorpo:
 735        http://www.bashcorpo.dk/textures.php
 736        http://bashcorpo.deviantart.com/art/Grungy-paper-texture-v-5-22966998  */
 737     background-image: url("../images/Paper_texture_v5_by_bashcorpo_w1000.jpg");
 738     -webkit-background-size: cover;
 739     -moz-background-size: cover;
 740     -o-background-size: cover;
 741     background-size: cover;
 742     position: relative;
 743     border-bottom: 2px solid black;
 744 }
 745
 746 #daily_col1 {
 747     float: left;
 748     position: relative;
 749     width: 33%;
 750     padding-left: 1%;
 751 }
 752
 753 #daily_col2 {
 754     float: left;
 755     position: relative;
 756     width: 33%;
 757 }
 758
 759 #daily_col3 {
 760     float: left;
 761     position: relative;
 762     width: 33%;
 763 }
 764
 765 div.dailyAbout {
 766     float: left;
 767     border: 1px solid black;
 768     font-size: 8pt;
 769     position: absolute;
 770     left: 10px;
 771     top: 15px;
 772     padding: 5px 5px 5px 5px;
 773     text-align: center;
 774 }
 775
 776 div.dailyAbout a {
 777     color: #890500;
 778 }
 779
 780 div.dailyAbout img {
 781     position: relative;
 782     top: 3px;
 783     margin-right: 4px;
 784     width: 14px;
 785     height: 14px;
 786 }
 787
 788 div.dailyTitle {
 789     font-weight: bold;
 790     font-size: 44pt;
 791     text-align: center;
 792     padding: 10px 20px 0px 20px;
 793 }
 794
 795 div.dailyDate {
 796     font-size: 12pt;
 797     font-weight: bold;
 798     text-align: center;
 799     padding: 0px 20px 30px 20px;
 800 }
 801
 802 /* Individual entries in "Daily": */
 803 div.dailyEntry {
 804     margin: 5px 10px 2px 5px;
 805     font-size: 11pt;
 806     border-top: 1px solid #555;
 807 }
 808
 809 div.dailyEntry a {
 810     text-decoration: none;
 811     color: #890500;
 812 }
 813
 814 div.dailyEntryTags {
 815     font-size: 7.75pt;
 816 }
 817
 818 div.dailyEntryTitle {
 819     font-size: 18pt;
 820     font-weight: bold;
 821 }
 822
 823 div.dailyEntryLinkdate {
 824     font-size: 8pt;
 825 }
 826
 827 div.dailyEntryThumbnail {
 828     width: 100%;
 829     text-align: center;
 830     background-color: rgb(128, 128, 128);
 831     background: url(../images/50pc_transparent.png);
 832     padding: 4px 0px 2px 0px;
 833 }
 834
 835 div.dailyEntryDescription {
 836     margin-top: 10px;
 837     margin-bottom: 30px;
 838     text-align: justify;
 839     overflow: auto;
 840 }
 841
 842 div.dailyNoEntry {
 843     text-align: center;
 844     padding: 40px 0px 90px 0px;
 845 }
 846
 847 .daily #closing {
 848     clear: both;
 849     text-align: center;
 850     padding-bottom: 20px;
 851 }
 852
 853 /* Common CSS screwdriver */
 854 .clear {
 855     clear: both;
 856 }
 857
 858 .right {
 859     text-align: right;
 860 }
 861
 862 .white {
 863     color: white;
 864 }
 865
 866 /* For lazy images loading in picture wall.
 867    Using http://www.appelsiini.net/projects/lazyload
 868 */
 869 .lazyimage {
 870     display: none;
 871 }
 872
 873 #configuration_table td {
 874     border: none;
 875     padding: 10px;
 876     vertical-align: top;
 877 }
 878
 879 @media print {
 880     html {
 881         border: none;
 882         background: #fff !important;
 883         color: #000 !important;
 884     }
 885
 886     body {
 887         font-size: 12pt;
 888         width: auto !important;
 889         margin: auto !important;
 890     }
 891
 892     /* Minimum numer of lines to display when splitting a paragraph
 893        over two pages */
 894     p {
 895         orphans: 3;
 896         widows: 3;
 897     }
 898
 899     a {
 900         color: #000 !important;
 901         text-decoration: none !important;
 902     }
 903
 904     #pageheader, .paging, #linklist li form, #footer {
 905         display: none;
 906     }
 907
 908     #linklist li {
 909         padding: 2 0 10 0;
 910         border-top: 2px solid #000;
 911         clear: both;
 912     }
 913
 914     #linklist li.private {
 915         background-color: none;
 916         border-left: 0;
 917     }
 918
 919     .linkdate {
 920         line-height: 2;
 921     }
 922
 923     .linkurl {
 924         color: #000;
 925     }
 926
 927     .linkdescription {
 928         font-size: 10pt;
 929     }
 930
 931     .linktag {
 932         border: 1px solid black;
 933         font-style: italic;
 934         font-size: 8pt;
 935     }
 936 }
 937
 938 @media handheld, only screen and (max-width: 480px), only screen and (max-device-width: 854px) {
 939     /* A few fixes for mobile devices (far from perfect). */
 940     .nomobile {
 941         display: none;
 942     }
 943
 944     #logo {
 945         display: none;
 946     }
 947
 948     #pageheader a {
 949         padding: 5px;
 950         border-radius: 5px 5px 5px 5px;
 951         margin: 3px;
 952     }
 953
 954     .searchform, .tagfilter {
 955         display: block !important;
 956         margin: 0px !important;
 957         padding: 0px !important;
 958         width: 100% !important;
 959     }
 960
 961     .searchform input, .tagfilter input {
 962         margin: 0px !important;
 963         padding: 0px !important;
 964         display: inline !important;
 965     }
 966
 967     .tagfilter input.bigbutton, .searchform input.bigbutton, .addform input.bigbutton {
 968         width: 30%;
 969         font-size: smaller;
 970     }
 971
 972     #searchform_value {
 973         width: 70% !important;
 974     }
 975
 976     #tagfilter_value {
 977         width: 70% !important;
 978     }
 979
 980     div.qrcode {
 981         position: relative;
 982         float: left;
 983         top: -10px;
 984         left: 0px;
 985     }
 986
 987     .paging_privatelinks {
 988         float: none;
 989     }
 990
 991     .paging_linksperpage {
 992         float: none;
 993         margin-bottom: 10px;
 994         font-size: smaller;
 995     }
 996
 997     #paging_older, #paging_newer, .paging_linksperpage a {
 998         border: 1px solid black;
 999         padding: 3px 5px 3px 5px;
1000         background-color: #666;
1001         color: #fff;
1002         border-radius: 5px 5px 5px 5px;
1003     }
1004
1005     .thumbnail {
1006         float: none;
1007         height: auto;
1008         margin: 0px;
1009         text-align: center;
1010     }
1011
1012     #cloudtag {
1013         padding: 0px;
1014     }
1015
1016     div.dailyAbout {
1017         float: none;
1018         position: relative;
1019         width: 100%;
1020         clear: both;
1021         padding: 0px;
1022         top: 0px;
1023         left: 0px;
1024     }
1025
1026     #daily_col1, #daily_col2, #daily_col3 {
1027         float: none;
1028         width: 100%;
1029         padding: 0px;
1030     }
1031
1032     div.dailyTitle {
1033         font-size: 18pt;
1034         margin-top: 5px;
1035         padding: 0px;
1036     }
1037
1038     div.dailyDate {
1039         font-size: 11pt;
1040         padding: 0px;
1041         display: block;
1042     }
1043
1044     div.dailyEntryTitle {
1045         font-size: 16pt;
1046         font-weight: bold;
1047     }
1048
1049     div.dailyEntryDescription {
1050         font-size: 10pt;
1051     }
1052 }
1053
1054 #toolsdiv a.button-description {
1055         clear: none;
1056 }
1057
1058 /* Highlight search results */
1059 .highlight {
1060     background-color: #FFFF33;
1061 }
1062
1063 .center {
1064     text-align: center;
1065 }