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"], 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: 5em;
 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 .entrie {
 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 .entrie {
 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 .entrie: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 .entrie: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 .entrie:hover, .eselected {
 403   box-shadow: 0 3px 10px rgba(0,0,0,1);
 404 }
 405
 406 .entrie:hover:after, .eselected:after {
 407   height: 40px;
 408 }
 409
 410 .entrie:hover:before, .eselected:before {
 411   bottom: 2.4em;
 412 }
 413
 414 .entrie:hover h2 a, .eselected h2 a {
 415   color: #666;
 416 }
 417
 418 .entrie h2 {
 419   text-transform: none;
 420   margin-bottom: 0;
 421   line-height: 1.2;
 422 }
 423
 424 .entrie h2:after {
 425   content: none;
 426 }
 427
 428
 429 .entrie 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 .entrie p {
 442   color: #666;
 443   font-size: 0.9em;
 444   line-height: 1.7;
 445 }
 446
 447 .entrie h2 a:first-letter {
 448   text-transform: uppercase;
 449 }
 450
 451 .entrie .tools {
 452   position: absolute;
 453   bottom: -50px;
 454   left: 0;
 455   width: 100%;
 456   z-index: 10;
 457   padding-right: 0.5em;
 458   text-align: right;
 459   -webkit-transition: all 0.5s ease;
 460      -moz-transition: all 0.5s ease;
 461       -ms-transition: all 0.5s ease;
 462        -o-transition: all 0.5s ease;
 463           transition: all 0.5s ease;
 464 }
 465
 466 .entrie:hover .tools, .eselected .tools {
 467   bottom: 0;
 468 }
 469
 470
 471 .entrie .tools a {
 472   color: #666;
 473   text-decoration: none;
 474   display: block;
 475   padding: 0.4em;
 476 }
 477
 478 .entrie .tools a:hover {
 479   color: #FFF;
 480 }
 481
 482 .entrie .tools li {
 483   display: inline-block;
 484 }
 485
 486 .entrie:nth-child(3n+1) {
 487   margin-left: 0;
 488 }
 489
 490 .results {
 491   letter-spacing: -5px;
 492   padding: 0 0 0.5em;
 493 }
 494
 495 .results > * {
 496   display: inline-block;
 497   vertical-align: top;
 498   letter-spacing: normal;
 499   width: 50%;
 500 }
 501
 502 .pagination {
 503   text-align: right;
 504   margin-bottom:50px;
 505 }
 506
 507 .nb-results {
 508   text-align: left;
 509   font-style: italic;
 510   color: #999;
 511 }
 512
 513 .pagination > * {
 514   display: inline-block;
 515   margin-left: 0.5em;
 516 }
 517
 518 .pagination a {
 519   color: #999;
 520   text-decoration: none;
 521 }
 522
 523   .pagination a:hover, .pagination a:focus {
 524     text-decoration: underline;
 525   }
 526
 527 .pagination .disabled {
 528   display: none;
 529 }
 530
 531 /* ==========================================================================
 532   2.1 = "save a link" related styles
 533   ========================================================================== */
 534
 535 .popup-form {
 536   background: rgba(0,0,0,0.5);
 537   position: absolute;
 538   top: 0;
 539   left: 10em;
 540   z-index: 20;
 541   height: 100%;
 542   width: 100%;
 543   margin: 0;
 544   margin-top: -30% !important; /* TODO: get rid of !important here; overridden by .messages selector */
 545   padding: 2em;
 546   display: none;
 547   border-left: 1px #EEE solid;
 548 }
 549
 550         .popup-form form {
 551                 background-color: #FFF;
 552                 position: absolute;
 553                 top: 0;
 554                 left: 0;
 555                 z-index: 20;
 556                 border: 10px solid #000;
 557                 width: 400px;
 558                 height: 200px;
 559                 padding: 2em;
 560         }
 561
 562 #bagit-form-form .addurl {
 563         margin-left: 0;
 564 }
 565
 566 .closeMessage,
 567 .close-button {
 568   background-color: #000;
 569   color: #FFF;
 570         font-size: 1.2em;
 571         line-height: 1.6;
 572         width: 1.6em;
 573         height: 1.6em;
 574         text-align: center;
 575   text-decoration: none;
 576 }
 577         .closeMessage:hover,
 578         .closeMessage:focus,
 579         .close-button:hover,
 580         .close-button:focus {
 581                 background-color: #999;
 582                 color: #000;
 583         }
 584
 585 .close-button--popup {
 586         display: inline-block;
 587         position: absolute;
 588         top: 0;
 589         right: 0;
 590         font-size: 1.4em;
 591 }
 592
 593 .active-current {
 594   background-color: #999;
 595 }
 596
 597 .active-current:after {
 598   content: "";
 599   width: 0;
 600   height: 0;
 601   position: absolute;
 602   border-style: solid;
 603   border-width: 10px;
 604   border-color:  transparent #EEE transparent transparent;
 605   right: 0;
 606   top: 50%;
 607   margin-top: -10px;
 608 }
 609
 610 .opacity03 {
 611   opacity: 0.3;
 612 }
 613
 614 .add-to-wallabag-link-after {
 615   background-color: #000;
 616   color: #fff;
 617   padding: 0 3px 2px 3px;
 618 }
 619
 620 a.add-to-wallabag-link-after {
 621     visibility: hidden;
 622     position: absolute;
 623     opacity: 0;
 624     transition-duration: 2s;
 625     transition-timing-function: ease-out;
 626 }
 627
 628 #article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover {
 629     opacity: 1;
 630     visibility: visible;
 631     transition-duration: .3s;
 632     transition-timing-function: ease-in;
 633 }
 634
 635 a.add-to-wallabag-link-after:after {
 636      content: "w";
 637 }
 638
 639 #add-link-result {
 640   font-weight: bold;
 641   font-size: 0.9em;
 642 }
 643
 644 /* ==========================================================================
 645    3 = Pictos
 646    ========================================================================== */
 647
 648 @font-face {
 649   font-family: 'icomoon';
 650   src:url('../fonts/icomoon.eot?-s0mcsx');
 651   src:url('../fonts/icomoon.eot?#iefix-s0mcsx')   format('embedded-opentype'),
 652       url('../fonts/icomoon.woff?-s0mcsx')        format('woff'),
 653       url('../fonts/icomoon.ttf?-s0mcsx')         format('truetype'),
 654       url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
 655   font-weight: normal;
 656   font-style: normal;
 657 }
 658
 659 .icon span,
 660 .icon-image span {
 661   position: absolute;
 662   top: -9999px;
 663 }
 664
 665 [class^="icon-"]:before, [class*=" icon-"]:before {
 666   font-family: 'icomoon';
 667   speak: none;
 668   font-style: normal;
 669   font-weight: normal;
 670   font-variant: normal;
 671   text-transform: none;
 672   line-height: 1;
 673
 674   /* Better Font Rendering =========== */
 675   -webkit-font-smoothing: antialiased;
 676   -moz-osx-font-smoothing: grayscale;
 677 }
 678
 679 .icon-flattr:before {
 680   content: "\e800";
 681 }
 682 .icon-mail:before {
 683   content: "\e80a";
 684 }
 685 .icon-up-open:before {
 686   content: "\e80b";
 687 }
 688 .icon-star:before {
 689   content: "\e805";
 690 }
 691 .icon-check:before {
 692   content: "\e804";
 693 }
 694 .icon-link:before {
 695   content: "\e801";
 696 }
 697 .icon-reply:before {
 698   content: "\e806";
 699 }
 700 .icon-menu:before {
 701   content: "\e802";
 702 }
 703 .icon-clock:before {
 704   content: "\e803";
 705 }
 706 .icon-twitter:before {
 707   content: "\e807";
 708 }
 709 .icon-down-open:before {
 710   content: "\e809";
 711 }
 712 .icon-trash:before {
 713   content: "\e80c";
 714 }
 715 .icon-delete:before {
 716   content: "\e600";
 717 }
 718 .icon-power:before {
 719   content: "\e601";
 720 }
 721 .icon-arrow-up-thick:before {
 722   content: "\e602";
 723 }
 724 .icon-rss:before {
 725   content: "\e808";
 726 }
 727 .icon-print:before {
 728   content: "\e80d";
 729 }
 730 .icon-random:before {
 731   content: "\e915";
 732 }
 733 .icon-reload:before {
 734   content: "\ea2e";
 735 }
 736 .icon-evernote:before {
 737   content: "\e603";
 738 }
 739 .icon-tags:before {
 740   content: "\e936";
 741 }
 742 .icon-previous:before {
 743   content: "\e606";
 744 }
 745 .icon-next:before {
 746   content: "\e605";
 747 }
 748 .icon-archiveandnext:before {
 749   content: "\e607";
 750 }
 751
 752
 753 /* .icon-image class, for image-based icons
 754          ========================================================================== */
 755
 756 .icon-image {
 757         background-size: 16px 16px;
 758         background-repeat: no-repeat;
 759         background-position: center;
 760         padding-right: 1em !important;
 761         padding-left: 1em !important;
 762 }
 763
 764 /* Carrot (http://carrot.org) */
 765 .icon-image--carrot {
 766         background-image: url('../../_global/img/icons/carrot-icon--white.png');
 767 }
 768
 769 .icon-image--shaarli {
 770   background-image: url('../../_global/img/icons/shaarli.png');
 771 }
 772
 773 /* Diaspora */
 774 .icon-image--diaspora {
 775         background-image: url('../../_global/img/icons/diaspora-icon--black.png');
 776 }
 777
 778 /* ==========================================================================
 779    Icon selected
 780    ========================================================================== */
 781
 782 .icon-star.fav:before {
 783   color: #FFF;
 784 }
 785
 786 .icon-check.archive:before {
 787   color: #FFF;
 788 }
 789
 790 /* ==========================================================================
 791    4 = Messages
 792    ========================================================================== */
 793
 794 .messages {
 795   text-align: left;
 796   margin-top: 1em;
 797 }
 798
 799 .messages > * { display: inline-block;}
 800
 801 .warning {
 802   /* font-size: 3em;
 803   color: #999;
 804   font-style: italic;
 805   position: absolute;
 806   top: 50%;
 807   left: 0;
 808   width: 100%;
 809   text-align: center;
 810   padding-right: 5%;
 811   margin-top: -2em;*/
 812   font-weight: bold;
 813   display: block;
 814   width: 100%;
 815 }
 816
 817 .more-info {
 818         font-size: 0.85em;
 819   line-height: 1.5;
 820         color: #aaa;
 821 }
 822
 823         .more-info a {
 824                 color: #aaa;
 825         }
 826
 827 /* ==========================================================================
 828    5 = Article
 829    ========================================================================== */
 830
 831 #article {
 832   width: 70%;
 833   margin-bottom: 3em;
 834   text-align: justify;
 835 }
 836
 837 #article .tags {
 838   margin-bottom: 1em;
 839 }
 840
 841 #article i {
 842   font-style: normal;
 843 }
 844
 845 blockquote {
 846   border:1px solid #999;
 847   background-color: #FFF;
 848   padding: 1em;
 849   margin: 0;
 850 }
 851
 852 #article h1 {
 853   text-align: left;
 854 }
 855
 856 #article h2, #article h3, #article h4 {
 857   text-transform: none;
 858 }
 859
 860 #article h2:after {
 861   content: none;
 862 }
 863
 864 .topPosF {
 865   position: fixed;
 866   right: 20%;
 867   bottom: 2em;
 868   font-size: 1.5em;
 869 }
 870
 871 .leftPosF {
 872   position: fixed;
 873   right: 24%;
 874   bottom: 2em;
 875   font-size: 1.5em;
 876 }
 877
 878 .rightPosF {
 879   position: fixed;
 880   right: 16%;
 881   bottom: 2em;
 882   font-size: 1.5em;
 883 }
 884
 885 #article_toolbar {
 886   margin-bottom: 1em;
 887 }
 888
 889 #article_toolbar li {
 890   display: inline-block;
 891 }
 892
 893 #article_toolbar a {
 894   background-color: #000;
 895   padding: 0.3em 0.5em 0.2em;
 896   color: #FFF;
 897   text-decoration: none;
 898 }
 899
 900   #article_toolbar a:hover, #article_toolbar a:focus {
 901     background-color: #999;
 902   }
 903
 904 .return {
 905   text-decoration: none;
 906   margin-top: 1em;
 907   display: block;
 908 }
 909
 910 .return:before {
 911   margin-right: 0.5em;
 912 }
 913
 914 .notags {
 915   font-style: italic;
 916   color: #999;
 917 }
 918
 919 .icon-rss {
 920   background-color: #000;
 921   color: #FFF;
 922   padding: 0.2em 0.5em;
 923 }
 924
 925 .icon-rss:before {
 926   position: relative;
 927   top: 2px;
 928 }
 929
 930 .list-tags li {
 931   margin-bottom: 0.5em;
 932 }
 933
 934 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
 935   background-color: #FFF;
 936   color: #000;
 937   text-decoration: none;
 938 }
 939
 940 .list-tags a {
 941   text-decoration: none;
 942 }
 943
 944 .list-tags a:hover, .list-tags a:focus {
 945   text-decoration: underline;
 946 }
 947
 948 pre code {
 949                 font-family: "Courier New", Courier, monospace;
 950                 border: 1px solid #ccc;
 951                 font-size: 0.96em;
 952 }
 953
 954 /* ==========================================================================
 955    5.1 = Tags-related styles
 956    ========================================================================== */
 957
 958 .suggestedtag {
 959     padding: 4px;
 960     cursor: pointer;
 961     display: inline-block;
 962 }
 963
 964 #tagcloud .smallesttag {
 965     font-size: x-small;
 966 }
 967
 968 #tagcloud .smalltag {
 969     font-size: small;
 970 }
 971
 972 #tagcloud .mediumtag {
 973     font-size:medium;
 974 }
 975
 976 #tagcloud .largetag {
 977     font-size:large;
 978 }
 979
 980 #tagcloud .largesttag {
 981     font-size:larger;
 982 }
 983
 984 /* ==========================================================================
 985    6 = Media Queries
 986    ========================================================================== */
 987
 988 @media screen and (max-width: 1050px) {
 989   .entrie {
 990     width: 49%;
 991   }
 992   .entrie:nth-child(3n+1) {
 993     margin-left: 1.5%;
 994   }
 995   .entrie:nth-child(2n+1) {
 996     margin-left: 0;
 997   }
 998 }
 999
1000 @media screen and (max-width: 900px) {
1001   #article {
1002     width: 80%;
1003   }
1004   .topPosF {
1005     right: 2.5em;
1006   }
1007   .leftPosF {
1008     right: 4.5em;
1009   }
1010   .rightPosF {
1011     right: 0.5em;
1012   }
1013 }
1014
1015 @media screen and (max-width: 700px) {
1016   .entrie {
1017     width: 100%;
1018     margin-left: 0;
1019   }
1020   #display-mode {
1021     display: none;
1022   }
1023 }
1024
1025 @media screen and (max-width: 500px) {
1026   .entrie {
1027     width: 100%;
1028     margin-left: 0;
1029   }
1030   body > header {
1031     background-color: #333;
1032     position: fixed;
1033     top: 0;
1034     width: 100%;
1035     height: 3em;
1036     z-index: 11;
1037   }
1038   #links li:last-child {
1039     position: static;
1040     width: auto;
1041   }
1042   #links li:last-child a:before {
1043     content: none;
1044   }
1045   .logo {
1046     width: 1.25em;
1047     height: 1.25em;
1048     left: 0;
1049     top: 0;
1050   }
1051   .login > header {
1052     position: static;
1053   }
1054   .login form {
1055     width: 100%;
1056     position: static;
1057     margin-left: 0;
1058   }
1059   .login .logo {
1060     width: auto;
1061     height: auto;
1062     top: 0.5em;
1063     width: 75px;
1064     height: 75px;
1065     margin-left: -37.5px;
1066   }
1067   .desktopHide {
1068     display: block;
1069     position: fixed;
1070     z-index: 20;
1071     top: 0;
1072     right: 0;
1073     border:0;
1074     width: 2.5em;
1075     height: 2.5em;
1076     cursor: pointer;
1077     background-color: #999;
1078     font-size: 1.2em;
1079   }
1080     .desktopHide:hover, .desktopHide:focus {
1081       background-color: #FFF;
1082     }
1083   #links {
1084     display: none;
1085     width: 100%;
1086     height: auto;
1087     padding-top: 3em;
1088   }
1089   #links.menu--open {
1090     display: block;
1091   }
1092   footer  {
1093     position: static;
1094     margin-right: 3em;
1095   }
1096   #main {
1097     margin-left: 1.5em;
1098     padding-right: 1.5em;
1099     position: static;
1100     margin-top: 3em;
1101   }
1102   #article_toolbar .topPosF {
1103     display: none;
1104   }
1105
1106   #article_toolbar .leftPosF {
1107     display: none;
1108   }
1109
1110   #article_toolbar .rightPosF {
1111     display: none;
1112   }
1113
1114   #article {
1115     width: 100%;
1116   }
1117
1118   #article h1 {
1119     font-size: 1.5em;
1120   }
1121   #article_toolbar a {
1122     padding: 0.3em 0.4em 0.2em;
1123   }
1124
1125   #display-mode {
1126     display: none;
1127   }
1128
1129   .popup-form, #bagit-form, #search-form {
1130     left: 0;
1131     width: 100%;
1132     border-left: none;
1133   }
1134
1135   .popup-form form,
1136   #bagit-form form,
1137   #search-form form {
1138     width: 100%;
1139   }
1140 }