inc/shaarli.css

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