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