src/Wallabag/CoreBundle/Resources/public/themes/baggy/css/main.css

   1 /* ==========================================================================
   2    Sommaire
   3
   4    1 = Style Guide
   5    2 = Layout
   6    3 = Pictos
   7    4 = Messages
   8    5 = Article
   9    6 = Media queries
  10
  11    ========================================================================== */
  12
  13 html {
  14   min-height: 100%;
  15 }
  16
  17 body {
  18   background-color: #EEE;
  19 }
  20
  21 .login {
  22   background-color: #333;
  23 }
  24
  25 .login #main {
  26   padding: 0;
  27   margin: 0;
  28 }
  29
  30 .login form {
  31   background-color: #FFF;
  32   padding: 1.5em;
  33   box-shadow: 0 1px 8px rgba(0,0,0,0.9);
  34   width: 20em;
  35   position: absolute;
  36   top: 8em;
  37   left: 50%;
  38   margin-left: -10em;
  39 }
  40
  41 .login .logo {
  42   position: absolute;
  43   top: 2em;
  44   left: 50%;
  45   margin-left: -55px;
  46 }
  47
  48 /* ==========================================================================
  49    1 = Style Guide
  50    ========================================================================== */
  51
  52 ::selection {
  53   color: #FFF;
  54   background-color: #000;
  55 }
  56
  57 .desktopHide {
  58   display: none;
  59 }
  60
  61 .logo {
  62   position: fixed;
  63   z-index: 20;
  64   top: 0.4em;
  65   left: 0.6em;
  66 }
  67
  68 h2, h3, h4 {
  69   font-family: 'PT Sans', sans-serif;
  70   text-transform: uppercase;
  71 }
  72
  73 p, li, label {
  74   color: #666;
  75 }
  76
  77 a {
  78   color: #000;
  79   font-weight: bold;
  80 }
  81
  82 a:hover, a:focus {
  83   text-decoration: none;
  84 }
  85
  86 form fieldset {
  87   border:0;
  88   padding: 0;
  89   margin: 0;
  90 }
  91
  92 form input[type="text"], form input[type="number"], select, form input[type="password"], form input[type="url"], form input[type="email"] {
  93   border: 1px solid #999;
  94   padding: 0.5em 1em;
  95   min-width: 12em;
  96   color: #666;
  97 }
  98
  99 @media screen and (-webkit-min-device-pixel-ratio:0){
 100   select{
 101     -webkit-appearance: none;
 102     border-radius: 0;
 103     background: #FFF url(../img/bg-select.png) no-repeat right center;
 104   }
 105 }
 106
 107 .inline .row {
 108   display: inline-block;
 109   margin-right: 0.5em;
 110 }
 111
 112 .inline label {
 113   min-width: 6em;
 114 }
 115
 116 fieldset label {
 117   display: inline-block;
 118   min-width: 12.5em;
 119   color: #666;
 120 }
 121
 122 label {
 123   margin-right: 0.5em;
 124 }
 125
 126 form .row {
 127   margin-bottom: 0.5em;
 128 }
 129
 130 form button, input[type="submit"] {
 131   cursor:pointer;
 132   background-color: #000;
 133   color: #FFF;
 134   border:0;
 135   padding: 0.5em 1em;
 136   display: inline-block;
 137   border:1px solid #000;
 138 }
 139
 140   form button:hover, form button:focus, input[type="submit"]:hover, input[type="submit"]:focus {
 141     background-color: #FFF;
 142     color: #000;
 143     -webkit-transition: all 0.5s ease;
 144      -moz-transition: all 0.5s ease;
 145       -ms-transition: all 0.5s ease;
 146        -o-transition: all 0.5s ease;
 147           transition: all 0.5s ease;
 148   }
 149
 150 #bookmarklet {
 151   cursor: move;
 152 }
 153
 154 h2:after {
 155   content: "";
 156   height: 4px;
 157   width: 70px;
 158   background-color: #000;
 159   display: block;
 160 }
 161
 162 .links {
 163   padding: 0;
 164   margin: 0;
 165 }
 166   .links li {
 167     list-style: none;
 168     margin: 0;
 169     padding: 0;
 170   }
 171
 172
 173 #links {
 174   position: fixed;
 175   top: 0;
 176   width: 10em;
 177   left: 0;
 178   text-align: right;
 179   background-color: #333;
 180   padding-top: 9.5em;
 181   height: 100%;
 182   box-shadow:inset -4px 0 20px rgba(0,0,0,0.6);
 183   z-index: 15;
 184 }
 185
 186 #main {
 187   margin-left: 13em;
 188   position: relative;
 189   z-index: 10;
 190   padding-right: 5%;
 191   padding-bottom: 1em;
 192 }
 193
 194   #links > li > a {
 195     display: block;
 196     padding: 0.5em 2em 0.5em 1em;
 197     color: #FFF;
 198     position: relative;
 199     text-transform: uppercase;
 200     text-decoration: none;
 201     font-weight: normal;
 202     font-family: 'PT Sans', sans-serif;
 203     -webkit-transition: all 0.5s ease;
 204      -moz-transition: all 0.5s ease;
 205       -ms-transition: all 0.5s ease;
 206        -o-transition: all 0.5s ease;
 207           transition: all 0.5s ease;
 208   }
 209
 210   #links > li > a:hover, #links > li > a:focus {
 211     background-color: #999;
 212     color: #000;
 213   }
 214
 215   #links .current:after {
 216     content: "";
 217     width: 0;
 218     height: 0;
 219     position: absolute;
 220     border-style: solid;
 221     border-width: 10px;
 222     border-color:  transparent #EEE transparent transparent;
 223     right: 0;
 224     top: 50%;
 225     margin-top: -10px;
 226   }
 227
 228   #links li:last-child {
 229     position: fixed;
 230     bottom: 1em;
 231     width: 10em;
 232   }
 233
 234   #links li:last-child a:before {
 235     font-size: 1.2em;
 236     position: relative;
 237     top: 2px;
 238   }
 239
 240
 241 #sort {
 242     padding: 0;
 243     list-style-type: none;
 244     opacity: 0.5;
 245     display: inline-block;
 246 }
 247
 248 #sort li {
 249     display: inline;
 250     font-size: 0.9em;
 251 }
 252
 253 #sort li + li {
 254     margin-left: 10px;
 255 }
 256
 257 #sort a {
 258     padding: 2px 2px 0;
 259     vertical-align: middle;
 260 }
 261
 262 #sort img {
 263     vertical-align: baseline;
 264 }
 265 #sort img:hover {
 266     cursor: pointer;
 267 }
 268
 269 #display-mode {
 270   float: right;
 271   vertical-align: middle;
 272   margin-top: 10px;
 273   margin-bottom: 10px;
 274   opacity: 0.5;
 275 }
 276 #listmode {
 277   width: 16px;
 278   display: inline-block;
 279   text-decoration: none;
 280 }
 281 #listmode a:hover {
 282   opacity: 1;
 283 }
 284 #listmode.tablemode {
 285   background-image: url("../img/baggy/table.png");
 286   background-repeat: no-repeat;
 287   background-position: bottom;
 288 }
 289 #listmode.listmode {
 290   background-image: url("../img/baggy/list.png");
 291   background-repeat: no-repeat;
 292   background-position: bottom;
 293 }
 294
 295
 296 /* ==========================================================================
 297    2 = Layout
 298    ========================================================================== */
 299
 300 #content {
 301   margin-top: 2em;
 302   min-height: 30em;
 303 }
 304
 305 footer {
 306   text-align: right;
 307   position: relative;
 308   bottom: 0;
 309   right: 5em;
 310   color: #999;
 311   font-size: 0.8em;
 312   font-style: italic;
 313   z-index: 20;
 314 }
 315
 316 footer a {
 317   color: #999;
 318   font-weight: normal;
 319 }
 320
 321 .list-entries {
 322   letter-spacing:-5px;
 323 }
 324
 325 .listmode .entry {
 326   width: 100%!important;
 327   margin-left: 0!important;
 328 }
 329
 330 .list-entries + .results {
 331   margin-bottom: 2em;
 332 }
 333
 334 .estimatedTime .reading-time {
 335   color: #999;
 336   font-style: italic;
 337   font-weight: normal;
 338   font-size: 0.9em;
 339 }
 340
 341 .estimatedTime small {
 342   position: relative;
 343   top: -1px;
 344 }
 345
 346 .entry {
 347   background-color: #FFF;
 348   letter-spacing:normal;
 349   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
 350   display: inline-block;
 351   width: 32%;
 352   margin-bottom: 1.5em;
 353   vertical-align: top;
 354   margin-left: 1.5%;
 355   position: relative;
 356   overflow: hidden;
 357   padding: 1.5em 1.5em 3em 1.5em;
 358
 359  /* Removing CSS transitions because they make the switch from list view to
 360   * table view jerky
 361   */
 362   /* -webkit-transition: all 0.5s ease; */
 363   /*    -moz-transition: all 0.5s ease; */
 364   /*     -ms-transition: all 0.5s ease; */
 365   /*      -o-transition: all 0.5s ease; */
 366   /*         transition: all 0.5s ease; */
 367 }
 368
 369 .entry:before {
 370   content: "";
 371   width: 0;
 372   height: 0;
 373   border-style:solid;
 374   border-color: transparent transparent #000 transparent;
 375   border-width: 10px;
 376   position: absolute;
 377   bottom: 0.3em;
 378   z-index: 10;
 379   right: 1.5em;
 380   -webkit-transition: all 0.5s ease;
 381      -moz-transition: all 0.5s ease;
 382       -ms-transition: all 0.5s ease;
 383        -o-transition: all 0.5s ease;
 384           transition: all 0.5s ease;
 385 }
 386
 387 .entry:after {
 388   content: "";
 389   position: absolute;
 390   height: 7px;
 391   width: 100%;
 392   bottom: 0;
 393   left: 0;
 394   background-color: #000;
 395   -webkit-transition: all 0.5s ease;
 396      -moz-transition: all 0.5s ease;
 397       -ms-transition: all 0.5s ease;
 398        -o-transition: all 0.5s ease;
 399           transition: all 0.5s ease;
 400 }
 401
 402 .entry:hover {
 403   box-shadow: 0 3px 10px rgba(0,0,0,1);
 404 }
 405
 406 .entry:hover:after {
 407   height: 40px;
 408 }
 409
 410 .entry:hover:before {
 411   bottom: 2.4em;
 412 }
 413
 414 .entry:hover h2 a {
 415   color: #666;
 416 }
 417
 418 .entry h2 {
 419   text-transform: none;
 420   margin-bottom: 0;
 421   line-height: 1.2;
 422 }
 423
 424   .entry h2:after {
 425     content: none;
 426   }
 427
 428
 429 .entry h2 a {
 430   display: block;
 431   text-decoration: none;
 432   color: #000;
 433   word-wrap: break-word;
 434   -webkit-transition: all 0.5s ease;
 435      -moz-transition: all 0.5s ease;
 436       -ms-transition: all 0.5s ease;
 437        -o-transition: all 0.5s ease;
 438           transition: all 0.5s ease;
 439 }
 440 /*
 441 .entry h2 a:after {
 442   content: "";
 443   position: absolute;
 444   top: 0;
 445   width: 100%;
 446   height: 100%;
 447   left: 0;
 448 }
 449 */
 450
 451 img.preview {
 452     max-width: 100%;
 453 }
 454
 455 .entry p {
 456   color: #666;
 457   font-size: 0.9em;
 458   line-height: 1.7;
 459 }
 460
 461   .entry h2 a:first-letter {
 462     text-transform: uppercase;
 463   }
 464
 465 .entry:hover .tools {
 466   bottom: 0;
 467 }
 468
 469 .entry .tools {
 470   position: absolute;
 471   bottom: -50px;
 472   left: 0;
 473   width: 100%;
 474   z-index: 10;
 475   padding-right: 0.5em;
 476   text-align: right;
 477   -webkit-transition: all 0.5s ease;
 478      -moz-transition: all 0.5s ease;
 479       -ms-transition: all 0.5s ease;
 480        -o-transition: all 0.5s ease;
 481           transition: all 0.5s ease;
 482 }
 483
 484   .entry .tools a {
 485     color: #666;
 486     text-decoration: none;
 487     display: block;
 488     padding: 0.4em;
 489   }
 490
 491   .entry .tools a:hover {
 492     color: #FFF;
 493   }
 494
 495   .entry .tools li {
 496     display: inline-block;
 497   }
 498
 499 .entry:nth-child(3n+1) {
 500   margin-left: 0;
 501 }
 502
 503 .results {
 504   letter-spacing: -5px;
 505   padding: 0 0 0.5em;
 506 }
 507
 508 .results > * {
 509   display: inline-block;
 510   vertical-align: top;
 511   letter-spacing: normal;
 512   width: 50%;
 513 }
 514
 515 div.pagination ul {
 516   text-align: right;
 517   margin-bottom:50px;
 518 }
 519
 520 .nb-results {
 521   text-align: left;
 522   font-style: italic;
 523   color: #999;
 524 }
 525
 526 div.pagination ul > * {
 527   display: inline-block;
 528   margin-left: 0.5em;
 529 }
 530
 531 div.pagination ul a {
 532   color: #999;
 533   text-decoration: none;
 534 }
 535
 536 div.pagination ul a:hover, div.pagination ul a:focus {
 537     text-decoration: underline;
 538 }
 539
 540 div.pagination ul .disabled {
 541   display: none;
 542 }
 543
 544 div.pagination ul .current {
 545   height: 25px;
 546   padding: 4px 8px;
 547   border: 1px solid #d5d5d5;
 548   text-decoration: none;
 549   font-weight: bold;
 550   color: #000;
 551   background-color: #ccc;
 552 }
 553
 554 /* ==========================================================================
 555   2.1 = "save a link" related styles
 556   ========================================================================== */
 557
 558 .popup-form {
 559   background: rgba(0,0,0,0.5);
 560   position: absolute;
 561   top: 0;
 562   left: 10em;
 563   z-index: 20;
 564   height: 100%;
 565   width: 100%;
 566   margin: 0;
 567   margin-top: -30% !important;
 568   padding: 2em;
 569   display: none;
 570   border-left: 1px #EEE solid;
 571 }
 572
 573  .popup-form form {
 574   background-color: #FFF;
 575   position: absolute;
 576   top: 0;
 577   left: 0;
 578   z-index: 20;
 579   border: 10px solid #000;
 580   width: 400px;
 581   height: 200px;
 582   padding: 2em;
 583  }
 584
 585 #bagit-form-form .addurl {
 586  margin-left: 0;
 587 }
 588
 589 .closeMessage,
 590 .close-button {
 591   background-color: #000;
 592   color: #FFF;
 593  font-size: 1.2em;
 594  line-height: 1.6;
 595  width: 1.6em;
 596  height: 1.6em;
 597  text-align: center;
 598   text-decoration: none;
 599 }
 600  .closeMessage:hover,
 601  .closeMessage:focus,
 602  .close-button:hover,
 603  .close-button:focus {
 604   background-color: #999;
 605   color: #000;
 606  }
 607
 608 .close-button--popup {
 609  display: inline-block;
 610  position: absolute;
 611  top: 0;
 612  right: 0;
 613  font-size: 1.4em;
 614 }
 615
 616 .active-current {
 617   background-color: #999;
 618 }
 619
 620 .active-current:after {
 621   content: "";
 622   width: 0;
 623   height: 0;
 624   position: absolute;
 625   border-style: solid;
 626   border-width: 10px;
 627   border-color:  transparent #EEE transparent transparent;
 628   right: 0;
 629   top: 50%;
 630   margin-top: -10px;
 631 }
 632
 633 .opacity03 {
 634   opacity: 0.3;
 635 }
 636
 637 .add-to-wallabag-link-after {
 638   background-color: #000;
 639   color: #fff;
 640   padding: 0 3px 2px 3px;
 641 }
 642
 643 a.add-to-wallabag-link-after {
 644     visibility: hidden;
 645     position: absolute;
 646     opacity: 0;
 647     transition-duration: 2s;
 648     transition-timing-function: ease-out;
 649 }
 650
 651 #article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover {
 652     opacity: 1;
 653     visibility: visible;
 654     transition-duration: .3s;
 655     transition-timing-function: ease-in;
 656 }
 657
 658 a.add-to-wallabag-link-after:after {
 659      content: "w";
 660 }
 661
 662 #add-link-result {
 663   font-weight: bold;
 664   font-size: 0.9em;
 665 }
 666
 667 /* ==========================================================================
 668    3 = Pictos
 669    ========================================================================== */
 670
 671 @font-face {
 672   font-family: 'icomoon';
 673   src:url('../fonts/icomoon.eot?-s0mcsx');
 674   src:url('../fonts/icomoon.eot?#iefix-s0mcsx')   format('embedded-opentype'),
 675       url('../fonts/icomoon.woff?-s0mcsx')        format('woff'),
 676       url('../fonts/icomoon.ttf?-s0mcsx')         format('truetype'),
 677       url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
 678   font-weight: normal;
 679   font-style: normal;
 680 }
 681
 682 .icon span,
 683 .icon-image span {
 684   position: absolute;
 685   top: -9999px;
 686 }
 687
 688 [class^="icon-"]:before, [class*=" icon-"]:before {
 689   font-family: 'icomoon';
 690   speak: none;
 691   font-style: normal;
 692   font-weight: normal;
 693   font-variant: normal;
 694   text-transform: none;
 695   line-height: 1;
 696
 697   /* Better Font Rendering =========== */
 698   -webkit-font-smoothing: antialiased;
 699   -moz-osx-font-smoothing: grayscale;
 700 }
 701
 702 .icon-flattr:before {
 703   content: "\e800";
 704 }
 705 .icon-mail:before {
 706   content: "\e80a";
 707 }
 708 .icon-up-open:before {
 709   content: "\e80b";
 710 }
 711 .icon-star:before {
 712   content: "\e805";
 713 }
 714 .icon-check:before {
 715   content: "\e804";
 716 }
 717 .icon-link:before {
 718   content: "\e801";
 719 }
 720 .icon-reply:before {
 721   content: "\e806";
 722 }
 723 .icon-menu:before {
 724   content: "\e802";
 725 }
 726 .icon-clock:before {
 727   content: "\e803";
 728 }
 729 .icon-twitter:before {
 730   content: "\e807";
 731 }
 732 .icon-down-open:before {
 733   content: "\e809";
 734 }
 735 .icon-trash:before {
 736   content: "\e80c";
 737 }
 738 .icon-delete:before {
 739   content: "\e600";
 740 }
 741 .icon-power:before {
 742   content: "\e601";
 743 }
 744 .icon-arrow-up-thick:before {
 745   content: "\e602";
 746 }
 747 .icon-rss:before {
 748   content: "\e808";
 749 }
 750 .icon-print:before {
 751   content: "\e80d";
 752 }
 753 .icon-reload:before {
 754   content: "\ea2e";
 755 }
 756
 757
 758 /* .icon-image class, for image-based icons
 759   ========================================================================== */
 760
 761 .icon-image {
 762  background-size: 16px 16px;
 763  background-repeat: no-repeat;
 764  background-position: center;
 765  padding-right: 1em !important;
 766  padding-left: 1em !important;
 767 }
 768
 769 /* Carrot (http://carrot.org) */
 770 .icon-image--carrot {
 771  background-image: url('../../_global/img/icons/carrot-icon--white.png');
 772 }
 773
 774 /* Diaspora */
 775 .icon-image--diaspora {
 776  background-image: url('../../_global/img/icons/diaspora-icon--black.png');
 777 }
 778
 779 /* ==========================================================================
 780    Icon selected
 781    ========================================================================== */
 782
 783 .icon-star.fav:before {
 784   color: #FFF;
 785 }
 786
 787 .icon-check.archive:before {
 788   color: #FFF;
 789 }
 790
 791 /* ==========================================================================
 792    4 = Messages
 793    ========================================================================== */
 794
 795 .messages {
 796   text-align: left;
 797   margin-top: 1em;
 798 }
 799
 800 .messages > * { display: inline-block;}
 801
 802 .warning {
 803   /* font-size: 3em;
 804   color: #999;
 805   font-style: italic;
 806   position: absolute;
 807   top: 50%;
 808   left: 0;
 809   width: 100%;
 810   text-align: center;
 811   padding-right: 5%;
 812   margin-top: -2em;*/
 813   font-weight: bold;
 814   display: block;
 815   width: 100%;
 816 }
 817
 818 .more-info {
 819  font-size: 0.85em;
 820   line-height: 1.5;
 821  color: #aaa;
 822 }
 823
 824  .more-info a {
 825   color: #aaa;
 826  }
 827
 828 /* ==========================================================================
 829    5 = Article
 830    ========================================================================== */
 831
 832 #article {
 833   width: 70%;
 834   margin-bottom: 3em;
 835   text-align: justify;
 836 }
 837
 838 #article .tags {
 839   margin-bottom: 1em;
 840 }
 841
 842 #article i {
 843   font-style: normal;
 844 }
 845
 846 blockquote {
 847   border:1px solid #999;
 848   background-color: #FFF;
 849   padding: 1em;
 850   margin: 0;
 851 }
 852
 853 #article h1 {
 854   text-align: left;
 855 }
 856
 857 #article h2, #article h3, #article h4 {
 858   text-transform: none;
 859 }
 860
 861 #article h2:after {
 862   content: none;
 863 }
 864
 865 .topPosF {
 866   position: fixed;
 867   right: 20%;
 868   bottom: 2em;
 869   font-size: 1.5em;
 870 }
 871
 872 #article_toolbar {
 873   margin-bottom: 1em;
 874 }
 875
 876 #article_toolbar li {
 877   display: inline-block;
 878 }
 879
 880 #article_toolbar a {
 881   background-color: #000;
 882   padding: 0.3em 0.5em 0.2em;
 883   color: #FFF;
 884   text-decoration: none;
 885 }
 886
 887 #article_toolbar a:hover, #article_toolbar a:focus {
 888   background-color: #999;
 889 }
 890
 891 #nav-btn-add-tag {
 892     cursor: pointer;
 893 }
 894
 895 .shaarli:before {
 896   content: "*";
 897 }
 898
 899 .return {
 900   text-decoration: none;
 901   margin-top: 1em;
 902   display: block;
 903 }
 904
 905 .return:before {
 906   margin-right: 0.5em;
 907 }
 908
 909 .notags {
 910   font-style: italic;
 911   color: #999;
 912 }
 913
 914 .icon-rss {
 915   background-color: #000;
 916   color: #FFF;
 917   padding: 0.2em 0.5em;
 918 }
 919
 920 .icon-rss:before {
 921   position: relative;
 922   top: 2px;
 923 }
 924
 925 .list-tags li {
 926   margin-bottom: 0.5em;
 927 }
 928
 929 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
 930   background-color: #FFF;
 931   color: #000;
 932   text-decoration: none;
 933 }
 934
 935 .list-tags a {
 936   text-decoration: none;
 937 }
 938
 939 .list-tags a:hover, .list-tags a:focus {
 940   text-decoration: underline;
 941 }
 942
 943 pre code {
 944   font-family: "Courier New", Courier, monospace;
 945   border: 1px solid #ccc;
 946   font-size: 0.96em;
 947 }
 948
 949 #filter-form {
 950   position: fixed;
 951   width: 20%;
 952   height: 100%;
 953   top: 0;
 954   right: 0;
 955   background-color: #FFF;
 956   padding: 15px;
 957   padding-right: 30px;
 958   padding-top: 30px;
 959   border-left: 1px #333 solid;
 960   z-index: 12;
 961
 962   /*transition-property: transform;
 963   transition-duration: 0.3s;
 964   transition-delay: 0.3s;
 965
 966   transform: translate3d(100%, 0, 0);*/
 967 }
 968
 969 #filter-form form {
 970
 971 }
 972
 973 #filter-form form .filter-group {
 974   margin: 5px;
 975 }
 976
 977
 978 /* ==========================================================================
 979    6 = Media Queries
 980    ========================================================================== */
 981
 982 @media screen and (max-width: 1050px) {
 983   .entry {
 984     width: 49%;
 985   }
 986   .entry:nth-child(3n+1) {
 987     margin-left: 1.5%;
 988   }
 989   .entry:nth-child(2n+1) {
 990     margin-left: 0;
 991   }
 992 }
 993
 994 @media screen and (max-width: 900px) {
 995   #article {
 996     width: 80%;
 997   }
 998   .topPosF {
 999     right: 2.5em;
1000   }
1001 }
1002
1003 @media screen and (max-width: 700px) {
1004   .entry {
1005     width: 100%;
1006     margin-left: 0;
1007   }
1008   #display-mode {
1009     display: none;
1010   }
1011 }
1012
1013 @media screen and (max-width: 500px) {
1014   .entry {
1015     width: 100%;
1016     margin-left: 0;
1017   }
1018   body > header {
1019     background-color: #333;
1020     position: fixed;
1021     top: 0;
1022     width: 100%;
1023     height: 3em;
1024     z-index: 11;
1025   }
1026   #links li:last-child {
1027     position: static;
1028     width: auto;
1029   }
1030   #links li:last-child a:before {
1031     content: none;
1032   }
1033   .logo {
1034     width: 1.25em;
1035     height: 1.25em;
1036     left: 0;
1037     top: 0;
1038   }
1039   .login > header {
1040     position: static;
1041   }
1042   .login form {
1043     width: 100%;
1044     position: static;
1045     margin-left: 0;
1046   }
1047   .login .logo {
1048     width: auto;
1049     height: auto;
1050     top: 0.5em;
1051     width: 75px;
1052     height: 75px;
1053     margin-left: -37.5px;
1054   }
1055   .desktopHide {
1056     display: block;
1057     position: fixed;
1058     z-index: 20;
1059     top: 0;
1060     right: 0;
1061     border:0;
1062     width: 2.5em;
1063     height: 2.5em;
1064     cursor: pointer;
1065     background-color: #999;
1066     font-size: 1.2em;
1067   }
1068     .desktopHide:hover, .desktopHide:focus {
1069       background-color: #FFF;
1070     }
1071   #links {
1072     display: none;
1073     width: 100%;
1074     height: auto;
1075     padding-top: 3em;
1076   }
1077   #links.menu--open {
1078     display: block;
1079   }
1080   footer  {
1081     position: static;
1082     margin-right: 3em;
1083   }
1084   #main {
1085     margin-left: 1.5em;
1086     padding-right: 1.5em;
1087     position: static;
1088     margin-top: 3em;
1089   }
1090   #article_toolbar .topPosF {
1091     display: none;
1092   }
1093
1094   #article {
1095     width: 100%;
1096   }
1097
1098   #article h1 {
1099     font-size: 1.5em;
1100   }
1101   #article_toolbar a {
1102     padding: 0.3em 0.4em 0.2em;
1103   }
1104
1105   #display-mode {
1106     display: none;
1107   }
1108
1109   .popup-form, #bagit-form, #search-form {
1110     left: 0;
1111     width: 100%;
1112     border-left: none;
1113   }
1114
1115   .popup-form form,
1116   #bagit-form form,
1117   #search-form form {
1118     width: 100%;
1119   }
1120 }