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