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 .list-entries + .results {
 332   margin-bottom: 2em;
 333 }
 334
 335 .estimatedTime a {
 336   color: #999;
 337   font-style: italic;
 338   font-weight: normal;
 339   font-size: 0.9em;
 340 }
 341
 342 .estimatedTime small {
 343   position: relative;
 344   top: -1px;
 345 }
 346
 347 .entrie {
 348   background: #FFF;
 349   letter-spacing:normal;
 350   box-shadow: 0 3px 7px rgba(0,0,0,0.3);
 351   display: inline-block;
 352   width: 32%;
 353   margin-bottom: 1.5em;
 354   vertical-align: top;
 355   margin-left: 1.5%;
 356   position: relative;
 357   overflow: hidden;
 358   padding: 1.5em 1.5em 3em 1.5em;
 359   -webkit-transition: all 0.5s ease;
 360      -moz-transition: all 0.5s ease;
 361       -ms-transition: all 0.5s ease;
 362        -o-transition: all 0.5s ease;
 363           transition: all 0.5s ease;
 364 }
 365
 366 .entrie:before {
 367   content: "";
 368   width: 0;
 369   height: 0;
 370   border-style:solid;
 371   border-color: transparent transparent #000 transparent;
 372   border-width: 10px;
 373   position: absolute;
 374   bottom: 0.3em;
 375   z-index: 10;
 376   right: 1.5em;
 377   -webkit-transition: all 0.5s ease;
 378      -moz-transition: all 0.5s ease;
 379       -ms-transition: all 0.5s ease;
 380        -o-transition: all 0.5s ease;
 381           transition: all 0.5s ease;
 382 }
 383
 384 .entrie:after {
 385   content: "";
 386   position: absolute;
 387   height: 7px;
 388   width: 100%;
 389   bottom: 0;
 390   left: 0;
 391   background: #000;
 392   -webkit-transition: all 0.5s ease;
 393      -moz-transition: all 0.5s ease;
 394       -ms-transition: all 0.5s ease;
 395        -o-transition: all 0.5s ease;
 396           transition: all 0.5s ease;
 397 }
 398
 399 .entrie:hover {
 400   box-shadow: 0 3px 10px rgba(0,0,0,1);
 401 }
 402
 403 .entrie:hover:after {
 404   height: 40px;
 405 }
 406
 407 .entrie:hover:before {
 408   bottom: 2.4em;
 409 }
 410
 411 .entrie:hover h2 a {
 412   color: #666;
 413 }
 414
 415 .entrie h2 {
 416   text-transform: none;
 417   margin-bottom: 0;
 418 }
 419
 420   .entrie h2:after {
 421     content: none;
 422   }
 423
 424
 425 .entrie h2 a {
 426   display: block;
 427   text-decoration: none;
 428   color: #000;
 429   word-wrap: break-word;
 430   -webkit-transition: all 0.5s ease;
 431      -moz-transition: all 0.5s ease;
 432       -ms-transition: all 0.5s ease;
 433        -o-transition: all 0.5s ease;
 434           transition: all 0.5s ease;
 435 }
 436 /*
 437 .entrie h2 a:after {
 438   content: "";
 439   position: absolute;
 440   top: 0;
 441   width: 100%;
 442   height: 100%;
 443   left: 0;
 444 }
 445 */
 446
 447 .entrie p {
 448   color: #666;
 449   font-size: 0.9em;
 450   line-height: 1.7;
 451 }
 452
 453   .entrie h2 a:first-letter {
 454     text-transform: uppercase;
 455   }
 456
 457 .entrie:hover .tools {
 458   bottom: 0;
 459 }
 460
 461 .entrie .tools {
 462   position: absolute;
 463   bottom: -50px;
 464   left: 0;
 465   width: 100%;
 466   z-index: 10;
 467   padding-right: 0.5em;
 468   text-align: right;
 469   -webkit-transition: all 0.5s ease;
 470      -moz-transition: all 0.5s ease;
 471       -ms-transition: all 0.5s ease;
 472        -o-transition: all 0.5s ease;
 473           transition: all 0.5s ease;
 474 }
 475
 476   .entrie .tools a {
 477     color: #666;
 478     text-decoration: none;
 479     display: block;
 480     padding: 0.4em;
 481   }
 482
 483   .entrie .tools a:hover {
 484     color: #FFF;
 485   }
 486
 487   .entrie .tools li {
 488     display: inline-block;
 489   }
 490
 491 .entrie:nth-child(3n+1) {
 492   margin-left: 0;
 493 }
 494
 495 .results {
 496   letter-spacing: -5px;
 497   padding: 0 0 0.5em;
 498 }
 499
 500 .results > * {
 501   display: inline-block;
 502   vertical-align: top;
 503   letter-spacing: normal;
 504   width: 50%;
 505 }
 506
 507 .pagination {
 508   text-align: right;
 509   margin-bottom:50px;
 510 }
 511
 512 .nb-results {
 513   text-align: left;
 514   font-style: italic;
 515   color: #999;
 516 }
 517
 518 .pagination > * {
 519   display: inline-block;
 520   margin-left: 0.5em;
 521 }
 522
 523 .pagination a {
 524   color: #999;
 525   text-decoration: none;
 526 }
 527
 528   .pagination a:hover, .pagination a:focus {
 529     text-decoration: underline;
 530   }
 531
 532 .pagination .disabled {
 533   display: none;
 534 }
 535
 536 /* ==========================================================================
 537   2.1 = "save a link" related styles
 538   ========================================================================== */
 539
 540 #bagit-form, #search-form {
 541   background: rgba(0,0,0,0.5);
 542   position: absolute;
 543   top: 0;
 544   left: 10em;
 545   z-index: 20;
 546   height: 100%;
 547   width: 100%;
 548   margin: 0;
 549   margin-top: -30%;
 550   padding: 2em;
 551   display: none;
 552   border-left: 1px #EEE solid;
 553 }
 554
 555 #bagit-form form, #search-form form {
 556   background: #FFF;
 557   position: absolute;
 558   top: 0;
 559   left: 0;
 560   z-index: 20;
 561   border: 10px solid #000;
 562   width: 400px;
 563   height: 200px;
 564   /* margin: -150px 0 0 -300px; */
 565   padding: 2em;
 566 }
 567
 568 a#bagit-form-close, a#search-form-close {
 569   background: #000;
 570   color: #FFF;
 571   padding: 0.2em 0.5em;
 572   text-decoration: none;
 573   display: inline-block;
 574   float: right;
 575   font-size: 0.6em;
 576 }
 577 a#bagit-form-close:hover, a#search-form-close:hover {
 578   background: #999;
 579   color: #000;
 580 }
 581
 582 .active-current {
 583   background-color: #999;
 584 }
 585
 586 .active-current:after {
 587   content: "";
 588   width: 0;
 589   height: 0;
 590   position: absolute;
 591   border-style: solid;
 592   border-width: 10px;
 593   border-color:  transparent #EEE transparent transparent;
 594   right: 0;
 595   top: 50%;
 596   margin-top: -10px;
 597 }
 598
 599 .opacity03 {
 600   opacity: 0.3;
 601 }
 602
 603 .add-to-wallabag-link-after {
 604   background-color: #000;
 605   color: #fff;
 606   padding: 0 3px 2px 3px;
 607 }
 608
 609 a.add-to-wallabag-link-after {
 610     visibility: hidden;
 611     position: absolute;
 612     opacity: 0;
 613     transition-duration: 2s;
 614     transition-timing-function: ease-out;
 615 }
 616
 617 #article article a:hover + a.add-to-wallabag-link-after, a.add-to-wallabag-link-after:hover {
 618     opacity: 1;
 619     visibility: visible;
 620     transition-duration: .3s;
 621     transition-timing-function: ease-in;
 622 }
 623
 624 a.add-to-wallabag-link-after:after {
 625      content: "w";
 626 }
 627
 628 #add-link-result {
 629   font-weight: bold;
 630   font-size: 0.9em;
 631 }
 632
 633 /* ==========================================================================
 634   2.2 = "search for articles" popup div related styles
 635   ========================================================================== */
 636 #search-form {
 637   background: rgba(0,0,0,0.5);
 638   position: absolute;
 639   top: 0;
 640   left: 10em;
 641   z-index: 20;
 642   height: 100%;
 643   width: 100%;
 644   margin: 0;
 645   margin-top: -30%;
 646   padding: 2em;
 647   display: none;
 648   border-left: 1px #EEE solid;
 649 }
 650
 651 #search-form form {
 652   background: #FFF;
 653   position: absolute;
 654   top: 0;
 655   left: 0;
 656   z-index: 20;
 657   border: 10px solid #000;
 658   width: 400px;
 659   height: 200px;
 660   /* margin: -150px 0 0 -300px; */
 661   padding: 2em;
 662 }
 663
 664 a#search-form-close {
 665   background: #000;
 666   color: #FFF;
 667   padding: 0.2em 0.5em;
 668   text-decoration: none;
 669   display: inline-block;
 670   float: right;
 671   font-size: 1.2em;
 672 }
 673 a#search-form-close:hover {
 674   background: #999;
 675   color: #000;
 676 }
 677
 678 #submit-search{
 679 margin-left: 4em;
 680 margin-top:1em;
 681 }
 682
 683 /* ==========================================================================
 684    3 = Pictos
 685    ========================================================================== */
 686
 687 @font-face {
 688   font-family: 'icomoon';
 689   src:url('../fonts/icomoon.eot?-s0mcsx');
 690   src:url('../fonts/icomoon.eot?#iefix-s0mcsx') format('embedded-opentype'),
 691     url('../fonts/icomoon.woff?-s0mcsx') format('woff'),
 692     url('../fonts/icomoon.ttf?-s0mcsx') format('truetype'),
 693     url('../fonts/icomoon.svg?-s0mcsx#icomoon') format('svg');
 694   font-weight: normal;
 695   font-style: normal;
 696 }
 697
 698 .icon span {
 699   position: absolute;
 700   top: -9999px;
 701 }
 702
 703 [class^="icon-"]:before, [class*=" icon-"]:before {
 704   font-family: 'icomoon';
 705   speak: none;
 706   font-style: normal;
 707   font-weight: normal;
 708   font-variant: normal;
 709   text-transform: none;
 710   line-height: 1;
 711
 712   /* Better Font Rendering =========== */
 713   -webkit-font-smoothing: antialiased;
 714   -moz-osx-font-smoothing: grayscale;
 715 }
 716
 717 .icon-flattr:before {
 718   content: "\e800";
 719 }
 720 .icon-mail:before {
 721   content: "\e80a";
 722 }
 723 .icon-up-open:before {
 724   content: "\e80b";
 725 }
 726 .icon-star:before {
 727   content: "\e805";
 728 }
 729 .icon-check:before {
 730   content: "\e804";
 731 }
 732 .icon-link:before {
 733   content: "\e801";
 734 }
 735 .icon-reply:before {
 736   content: "\e806";
 737 }
 738 .icon-menu:before {
 739   content: "\e802";
 740 }
 741 .icon-clock:before {
 742   content: "\e803";
 743 }
 744 .icon-twitter:before {
 745   content: "\e807";
 746 }
 747 .icon-down-open:before {
 748   content: "\e809";
 749 }
 750 .icon-trash:before {
 751   content: "\e80c";
 752 }
 753 .icon-delete:before {
 754   content: "\e600";
 755 }
 756 .icon-power:before {
 757   content: "\e601";
 758 }
 759 .icon-arrow-up-thick:before {
 760   content: "\e602";
 761 }
 762 .icon-rss:before {
 763   content: "\e808";
 764 }
 765 .icon-print:before {
 766   content: "\e80d";
 767 }
 768
 769 /* ==========================================================================
 770    Icon selected
 771    ========================================================================== */
 772
 773 .icon-star.fav:before {
 774   color: #FFF;
 775 }
 776
 777 .icon-check.archive:before {
 778   color: #FFF;
 779 }
 780
 781 /* ==========================================================================
 782    4 = Messages
 783    ========================================================================== */
 784
 785 .messages {
 786   text-align: left;
 787   margin-top: 1em;
 788 }
 789
 790 .messages > * { display: inline-block;}
 791
 792 .closeMessage {
 793   background: #000;
 794   color: #FFF;
 795   padding: 0.2em 0.5em;
 796   text-decoration: none;
 797 }
 798
 799   .closeMessage:hover, .closeMessage:focus {
 800     background: #FFF;
 801     color: #000;
 802   }
 803
 804 .warning {
 805   /* font-size: 3em;
 806   color: #999;
 807   font-style: italic;
 808   position: absolute;
 809   top: 50%;
 810   left: 0;
 811   width: 100%;
 812   text-align: center;
 813   padding-right: 5%;
 814   margin-top: -2em;*/
 815   font-weight: bold;
 816   display: block;
 817   width: 100%;
 818 }
 819
 820 /* ==========================================================================
 821    5 = Article
 822    ========================================================================== */
 823
 824 #article {
 825   width: 70%;
 826   margin-bottom: 3em;
 827   text-align: justify;
 828 }
 829
 830 #article .tags {
 831   margin-bottom: 1em;
 832 }
 833
 834 #article i {
 835   font-style: normal;
 836 }
 837
 838 blockquote {
 839   border:1px solid #999;
 840   background: #FFF;
 841   padding: 1em;
 842   margin: 0;
 843 }
 844
 845 #article h2, #article h3, #article h4 {
 846   text-transform: none;
 847 }
 848
 849 #article h2:after {
 850   content: none;
 851 }
 852
 853 .topPosF {
 854   position: fixed;
 855   right: 20%;
 856   bottom: 2em;
 857   font-size: 1.5em;
 858 }
 859
 860 #article_toolbar {
 861   margin-bottom: 1em;
 862 }
 863
 864 #article_toolbar li {
 865   display: inline-block;
 866 }
 867
 868 #article_toolbar a {
 869   background: #000;
 870   padding: 0.3em 0.5em 0.2em;
 871   color: #FFF;
 872   text-decoration: none;
 873 }
 874
 875   #article_toolbar a:hover, #article_toolbar a:focus {
 876     background: #999;
 877   }
 878
 879 .shaarli:before {
 880   content: "*";
 881 }
 882
 883 .return {
 884   text-decoration: none;
 885   margin-top: 1em;
 886   display: block;
 887 }
 888
 889 .return:before {
 890   margin-right: 0.5em;
 891 }
 892
 893 .notags {
 894   font-style: italic;
 895   color: #999;
 896 }
 897
 898 .icon-rss {
 899   background: #000;
 900   color: #FFF;
 901   padding: 0.2em 0.5em;
 902 }
 903
 904 .icon-rss:before {
 905   position: relative;
 906   top: 2px;
 907 }
 908
 909 .list-tags li {
 910   margin-bottom: 0.5em;
 911 }
 912
 913 .list-tags .icon-rss:hover, .list-tags .icon-rss:focus {
 914   background: #FFF;
 915   color: #000;
 916   text-decoration: none;
 917 }
 918
 919 .list-tags a {
 920   text-decoration: none;
 921 }
 922
 923 .list-tags a:hover, .list-tags a:focus {
 924   text-decoration: underline;
 925 }
 926
 927 pre code {
 928                 font-family: "Courier New", Courier, monospace;
 929                 border: 1px solid #ccc;
 930                 font-size: 0.96em;
 931 }
 932
 933
 934 /* ==========================================================================
 935    6 = Media Queries
 936    ========================================================================== */
 937
 938 @media screen and (max-width: 1050px) {
 939   .entrie {
 940     width: 49%;
 941   }
 942   .entrie:nth-child(3n+1) {
 943     margin-left: 1.5%;
 944   }
 945   .entrie:nth-child(2n+1) {
 946     margin-left: 0;
 947   }
 948 }
 949
 950 @media screen and (max-width: 900px) {
 951   #article {
 952     width: 80%;
 953   }
 954   .topPosF {
 955     right: 2.5em;
 956   }
 957 }
 958
 959 @media screen and (max-width: 700px) {
 960   .entrie {
 961     width: 100%;
 962     margin-left: 0;
 963   }
 964   #display-mode {
 965     display: none;
 966   }
 967 }
 968
 969 @media screen and (max-width: 500px) {
 970   .entrie {
 971     width: 100%;
 972     margin-left: 0;
 973   }
 974   body > header {
 975     background: #333;
 976     position: fixed;
 977     top: 0;
 978     width: 100%;
 979     height: 3em;
 980     z-index: 11;
 981   }
 982   #links li:last-child {
 983     position: static;
 984     width: auto;
 985   }
 986   #links li:last-child a:before {
 987     content: none;
 988   }
 989   .logo {
 990     width: 1.25em;
 991     height: 1.25em;
 992     left: 0;
 993     top: 0;
 994   }
 995   .login > header {
 996     position: static;
 997   }
 998   .login form {
 999     width: 100%;
1000     position: static;
1001     margin-left: 0;
1002   }
1003   .login .logo {
1004     width: auto;
1005     height: auto;
1006     top: 0.5em;
1007     width: 75px;
1008     height: 75px;
1009     margin-left: -37.5px;
1010   }
1011   .desktopHide {
1012     display: block;
1013     position: fixed;
1014     z-index: 20;
1015     top: 0;
1016     right: 0;
1017     border:0;
1018     width: 2.5em;
1019     height: 2.5em;
1020     cursor: pointer;
1021     background: #999;
1022     font-size: 1.2em;
1023   }
1024     .desktopHide:hover, .desktopHide:focus {
1025       background: #FFF;
1026     }
1027   #links {
1028     display: none;
1029     width: 100%;
1030     height: auto;
1031     padding-top: 3em;
1032   }
1033   footer  {
1034     position: static;
1035     margin-right: 3em;
1036   }
1037   #main {
1038     margin-left: 1.5em;
1039     padding-right: 1.5em;
1040     position: static;
1041     margin-top: 3em;
1042   }
1043   #article_toolbar .topPosF {
1044     display: none;
1045   }
1046
1047   #article {
1048     width: 100%;
1049   }
1050
1051   #article h1 {
1052     font-size: 1.5em;
1053   }
1054   #article_toolbar a {
1055     padding: 0.3em 0.4em 0.2em;
1056   }
1057
1058   #display-mode {
1059     display: none;
1060   }
1061
1062   #bagit-form, #search-form {
1063     left: 0;
1064   }
1065 }
1066