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