app/assets/stylesheets/common.css.scss

   1 /* Styles common to large and small screens */
   2
   3 /* Default rules for the body of every page */
   4
   5 body {
   6   font-family: 'Helvetica Neue',Arial,sans-serif;
   7   font-size: 14px;
   8   line-height: 20px;
   9   color: #222;
  10   background-color: #fff;
  11   margin: 0px;
  12   padding: 0px;
  13 }
  14
  15 body.slim {
  16   background-color: #f0f0f0;
  17 }
  18
  19 /* Rules for links */
  20
  21 a {
  22   color: #00f;
  23   text-decoration: none;
  24 }
  25
  26 a:hover {
  27   text-decoration: underline;
  28 }
  29
  30 /* Rules for horizontal lines */
  31
  32 hr {
  33   border: none;
  34   background-color: #ccc;
  35   color: #ccc;
  36   height: 1px;
  37 }
  38
  39 /* Default rules for headings */
  40
  41 h2 {
  42   margin: 5px 0;
  43   font-size: 25px;
  44   line-height: 30px;
  45 }
  46
  47 /* Rules for the whole left sidebar, including the logo */
  48
  49 #left {
  50   position: absolute;
  51   top: 0px;
  52   width: 185px;
  53   font-size: 11px;
  54   line-height: 12px;
  55 }
  56
  57 /* Rules for the OpenStreetMap logo in the top left corner */
  58
  59 #logo {
  60   width: 170px;
  61   min-width: 170px;
  62   padding: 5px;
  63   text-align: center;
  64   margin: 25px 0 5px 0;
  65 }
  66
  67 #logo img {
  68   border: 0px;
  69 }
  70
  71 #logo h1 {
  72   font-size: 18px;
  73   line-height: 20px;
  74   text-align: center;
  75   margin: 0px;
  76 }
  77
  78 #logo h2 {
  79   font-size: 10px;
  80   line-height: 15px;
  81   margin: 0px;
  82 }
  83
  84 /* Rules for the site name */
  85
  86 #small-title {
  87   display: none;
  88 }
  89
  90 #small-title img {
  91   border: 0px;
  92 }
  93
  94 /* Rules for the introductory text displayed in the left sidebar to new users */
  95
  96 .sidebar-copy {
  97   padding: 0px 10px;
  98 }
  99
 100 .sidebar-copy p {
 101   margin: 5px 0;
 102 }
 103
 104 .sidebar-copy.intro {
 105   margin-top: -1px;
 106   border-top: 1px solid #ccc;
 107 }
 108
 109 /*
 110  * Rules for alert boxes shown in the left sidebar when important
 111  * information needs to be conveyed such as when the site is
 112  * undergoing maintenance.
 113  */
 114
 115 .sidebar-alert {
 116   padding: 4px 5px 4px 5px;
 117   border-top: 1px solid #ccc;
 118   margin-top: 4px;
 119   margin-bottom: -4px;
 120   background: #e00;
 121   font-size: 13px;
 122   font-weight: bold;
 123   line-height: 17px;
 124
 125   p {
 126     margin: 5px;
 127   }
 128 }
 129
 130 /*
 131  * Rules for notice boxes shown in the left sidebar when important, but
 132  * non-critical information needs to be conveyed such as notices about
 133  * donation drives.
 134  */
 135
 136 .sidebar-notice {
 137   padding: 4px 5px 4px 5px;
 138   border-top: 1px solid #ccc;
 139   margin-top: 4px;
 140   margin-bottom: -4px;
 141   background: #ea0;
 142   font-size: 13px;
 143   line-height: 17px;
 144
 145   p {
 146     margin: 5px;
 147   }
 148 }
 149
 150 /* Rules for the menu displayed in the left sidebar */
 151
 152 .left_menu {
 153   padding: 5px 10px;
 154   margin: 4px 0;
 155   border-top: 1px solid #ccc;
 156   line-height: 20px;
 157   font-size: 14px;
 158   font-weight: bold;
 159 }
 160
 161 .left_menu h1 {
 162   font-style: normal;
 163   font-size: 15px;
 164 }
 165
 166 .left_menu ul {
 167   margin: 0px;
 168   list-style-type: none;
 169 }
 170
 171 .left_menu li {
 172   margin: 0px;
 173   padding: 0px;
 174 }
 175
 176 /* submenus */
 177 .left_menu ul li ul {
 178   font-weight: normal;
 179   line-height: 15px;
 180   font-size: 12px;
 181 }
 182
 183 .left_menu a {
 184   color: #000;
 185 }
 186
 187 /* Rules for SOTM advert */
 188
 189 #sotm {
 190   width: 165px;
 191   margin: 10px;
 192   padding: 0px;
 193   border: 0px;
 194   background: #fff;
 195 }
 196
 197 #sotm img {
 198   width: 165px;
 199 }
 200
 201 /*
 202  * Rules for "optional boxes" which appear in the left sidebar on
 203  * certain pages. Current users are the seach box on the main page
 204  * and the tag cloud on the traces pages.
 205  */
 206
 207 .optionalbox {
 208   padding: 5px 10px;
 209   margin: 4px 0;
 210 }
 211
 212 .optionalbox h1 {
 213   font-size: 14px;
 214   font-weight: bold;
 215   line-height: 20px;
 216   margin: 0px;
 217   vertical-align: bottom;
 218 }
 219
 220 /* Rules for the search box */
 221
 222 .whereami {
 223 }
 224
 225 #search_field form {
 226   width: 100%;
 227   margin: 0px;
 228   padding: 0px;
 229 }
 230
 231 #search_field {
 232   position:relative;
 233 }
 234
 235 #search_field input[type="text"] {
 236   width: 165px;
 237   padding: 5px;
 238   font-size: 14px;
 239   line-height: 15px;
 240   height: 25px;
 241   box-shadow: inset #DDD 0px 1px 3px;
 242   box-sizing: border-box;
 243   -webkit-box-sizing: border-box;
 244   -moz-box-sizing: border-box;
 245   -ms-box-sizing: border-box;
 246 }
 247
 248 #search_field input[type="text"]:focus {
 249   outline: none;
 250   border: 1px solid #000;
 251 }
 252
 253 #search_field input[type="submit"] {
 254   width: 15px;
 255   height: 15px;
 256   border:0;
 257   text-indent:-1000px;
 258   padding-left: 0px;
 259   padding-right: 0px;
 260   background: url(sprite.png);
 261   position:absolute;
 262   right:2px;
 263   top:5px;
 264   cursor:pointer;
 265 }
 266
 267 .search_help {
 268   margin:0;
 269 }
 270
 271 .deemphasize {
 272   color: #999;
 273 }
 274
 275 .deemphasize a {
 276   color: #7092FF;
 277 }
 278
 279 /* Rules for donation request box */
 280
 281 .donate {
 282   width: 153px;
 283   margin: 10px 10px;
 284   padding: 5px;
 285   border: 1px solid #AED1A0;
 286   background: #cbeea7;
 287   line-height: 20px;
 288   text-align: center;
 289   font-size: 14px;
 290   border-radius: 2px;
 291   -moz-border-radius: 2px;
 292 }
 293
 294 .donate a {
 295   color:#222;
 296 }
 297
 298 /* Rules for Creative Commons logo button */
 299
 300 #cclogo {
 301   margin-top: 10px;
 302   margin-bottom: 10px;
 303 }
 304
 305 /* Rules for tabbed navigation bar */
 306
 307 #top-bar {
 308   border-bottom: 1px solid #ccc;
 309   height: 29px;
 310 }
 311
 312 #tabnav {
 313   padding: 0;
 314   margin: 0;
 315   overflow:hidden;
 316 }
 317
 318 #tabnav li {
 319   margin: 0px;
 320   padding: 0px;
 321   display: inline;
 322   list-style-type: none;
 323 }
 324
 325 #tabnav a, #tabnav a:link, #tabnav a:visited {
 326   background: #fff;
 327   font-size: 14px;
 328   line-height: 19px;
 329   font-weight: bold;
 330   padding: 5px 10px;
 331   text-decoration: none;
 332   color: #333;
 333   -webkit-transition: color 200ms ease-in;
 334   -moz-transition: color 200ms ease-in;
 335   -o-transition: color 200ms ease-in;
 336   transition: color 200ms ease-in;
 337 }
 338
 339 body.site-index #tabnav a#viewanchor,
 340 body.site-edit #tabnav a#editanchor,
 341 body.changeset-list #tabnav a#historyanchor,
 342 body.site-export #tabnav a#exportanchor {
 343   border-bottom: 1px solid #aaa;
 344   background: #9ed485;
 345   color: #000;
 346 }
 347
 348 #tabnav a:link:hover, #tabnav a:visited:hover {
 349   text-decoration:underline;
 350 }
 351
 352 #tabnav a:link.disabled,
 353 #tabnav a:visited.disabled,
 354 #tabnav a:link:hover.disabled,
 355 #tabnav a:visited:hover.disabled {
 356   color: #ccc;
 357   cursor: default;
 358 }
 359
 360 #tabnav a:link.disabled:hover,
 361 #tabnav a:visited.disabled:hover,
 362 #tabnav a:link:hover.disabled:hover,
 363 #tabnav a:visited:hover.disabled:hover {
 364   text-decoration: none;
 365 }
 366
 367 .count-number {
 368   padding: 2px 5px;
 369   border-radius: 3px;
 370   background: #eee;
 371   margin: 0 2px;
 372   font-size: 11px;
 373   color: #333;
 374 }
 375
 376 /* Rules for greeting bar in the top right corner */
 377
 378 #greeting {
 379   height: 28px;
 380   margin: 0px;
 381   font-size: 13px;
 382   line-height: 28px;
 383 }
 384
 385 .greeting-bar-unread {
 386   font-weight: bold;
 387 }
 388
 389 /* Rules for the message shown in place of the map when javascript is disabled */
 390
 391 #noscript {
 392   z-index: 20000000;
 393   position: absolute;
 394   top: 15px;
 395 }
 396
 397 /* Rules for OpenLayers maps */
 398
 399 #map {
 400   margin: 0px;
 401   border: 0px;
 402   padding: 0px;
 403 }
 404
 405 .olControlAttribution {
 406   bottom: 15px !important;
 407   left: 0px !important;
 408   right: 0px !important;
 409   text-align: center;
 410 }
 411
 412 #permalink {
 413   z-index: 10000;
 414   position: absolute;
 415   bottom: 0px;
 416   right: 0px;
 417   padding: 5px;
 418   background:#fff;
 419   text-align: right;
 420   font-size: 12px;
 421 }
 422
 423 #permalink a {
 424   padding: 5px;
 425 }
 426
 427 /* Rules for edit menu */
 428
 429 .menuicon {
 430   padding: 5px;
 431
 432   &:hover {
 433     background: #eee;
 434     text-decoration: none !important;
 435   }
 436 }
 437
 438 .menu {
 439   display: none;
 440   z-index: 10000;
 441   position: absolute;
 442   background-color: #ffffff;
 443   border: 1px solid #cccccc;
 444   border-top: 0px;
 445 }
 446
 447 .menu ul {
 448   margin: 0px;
 449   padding: 0px;
 450 }
 451
 452 .menu li {
 453   padding: 2px 5px;
 454   margin: 0px;
 455   list-style-type: none;
 456   border-top: 1px solid #eee;
 457   white-space: nowrap;
 458 }
 459
 460 /* Rules for attribution text under the main map shown on printouts */
 461
 462 #attribution {
 463   display: none;
 464 }
 465
 466 .attribution_notice {
 467   text-align: center;
 468 }
 469
 470 /* Rules for the popout map sidebar */
 471
 472 #sidebar {
 473   display: none;
 474   position: absolute;
 475   margin: 0px;
 476   padding: 0px;
 477   width: 30%;
 478   top: 0px;
 479   bottom: 0px;
 480 }
 481
 482 #sidebar #sidebar_content {
 483   overflow: auto;
 484   position: absolute;
 485   font-size: 13px;
 486   line-height: 15px;
 487   top: 29px;
 488   bottom: 0px;
 489   left: 0px;
 490   right: 0px;
 491 }
 492
 493 #sidebar .sidebar_title {
 494   margin: 0px;
 495   padding: 3px 6px 4px 6px;
 496   height: 29px;
 497   font-size: 14px;
 498   line-height: 15px;
 499   background: #bbb;
 500 }
 501
 502 /* Rules for the map key which appears in the popout sidebar */
 503
 504 #mapkey h3 {
 505   font-size: 110%;
 506   font-weight: normal;
 507   text-align: center;
 508 }
 509
 510 #mapkey .mapkey-table {
 511   padding-left: 5px;
 512   padding-right: 5px;
 513 }
 514
 515 #mapkey .mapkey-table-key img {
 516   display: block;
 517   margin-left: auto;
 518   margin-right: auto;
 519 }
 520
 521 #mapkey .mapkey-table-value {
 522   font-size: 90%;
 523 }
 524
 525 /* Rules for search results which appear in the popout sidebar */
 526
 527 .search_searching {
 528   margin-top: 5px;
 529   margin-bottom: 5px;
 530 }
 531
 532 .search_results_heading {
 533   margin: 0px;
 534   padding: 2px 5px;
 535   border-bottom: 1px solid #ccc;
 536   font-weight: bold;
 537 }
 538
 539 .search_results_entry {
 540   margin: 0px;
 541   padding: 2px 5px;
 542 }
 543
 544 .search_results_error {
 545   margin: 0px;
 546   padding: 2px 6px 0px;
 547   color: #f00;
 548 }
 549
 550 /* Rules for data browser information which appears in the popout sidebar */
 551
 552 .browse_heading {
 553   margin: 0px;
 554   padding: 3px 6px;
 555   border: 1px solid #ccc;
 556   background: #ddd;
 557 }
 558
 559 .browse_details {
 560   margin: 0px;
 561   padding: 0px 6px;
 562 }
 563
 564 /* Rules for export information which appears in the popout sidebar */
 565
 566 .export_heading {
 567   margin: 0px;
 568   padding: 2px 5px;
 569   border-bottom: 1px solid #ccc;
 570   font-weight: bold;
 571 }
 572
 573 .export_bounds {
 574   width: 100%;
 575   text-align: center;
 576 }
 577
 578 .export_bound {
 579   margin: 5px;
 580 }
 581
 582 .export_details {
 583   padding: 2px 6px;
 584 }
 585
 586 #export_osm {
 587   display: none;
 588 }
 589
 590 #export_mapnik {
 591   display: none;
 592 }
 593
 594 #export_osmarender {
 595   display: none;
 596 }
 597
 598 .export_hint {
 599   padding: 0px 12px;
 600   font-style: italic;
 601 }
 602
 603 .export_buttons {
 604   width: 100%;
 605   text-align: center;
 606 }
 607
 608 /* Rules for the main content area */
 609
 610 #content {
 611   padding: 10px;
 612   margin: 0px;
 613   position: absolute;
 614   bottom: 0px;
 615 }
 616
 617 .site-index #content,
 618 .site-edit #content,
 619 .site-export #content {
 620   border: 0px;
 621   padding: 0px;
 622 }
 623
 624 #slim_container {
 625   width: 100%;
 626 }
 627
 628 #slim_container_content {
 629   max-width: 50em;
 630   background-color: #FFFFFF;
 631   margin: 10px auto;
 632   padding: 3px;
 633   border-radius: 25px;
 634   -moz-border-radius: 25px;
 635   border: 1px solid #e6e6e6;
 636 }
 637
 638 #slim_content {
 639   margin: 10px;
 640   margin-top: 90px;
 641   max-width: 50em;
 642 }
 643
 644 #slim_header {
 645   margin: 10px;
 646   position: absolute;
 647   top: 0px;
 648 }
 649
 650 #slim_header img {
 651   vertical-align: middle;
 652   margin-bottom: 5px;
 653 }
 654
 655 /* Rules for the home page */
 656
 657 .site-index #map {
 658   position: absolute;
 659   top: 0px;
 660   bottom: 0px;
 661   left: 0px;
 662   right: 0px;
 663 }
 664
 665 .site-export #map {
 666   position: absolute;
 667   top: 0px;
 668   bottom: 0px;
 669   left: 0px;
 670   right: 0px;
 671 }
 672
 673 /* Rules for the edit page */
 674
 675 .site-edit #map {
 676   position: absolute;
 677   top: 0px;
 678   bottom: 0px;
 679   left: 0px;
 680   right: 0px;
 681   overflow: hidden;
 682 }
 683
 684 /* Rules for the changeset list shown by the history tab etc */
 685
 686 #changeset_list_container {
 687   position: relative;
 688 }
 689
 690 #changeset_list {
 691   width: 50%;
 692   font-size: small;
 693   border-collapse: collapse;
 694   border-width: 0px;
 695   margin-top: 1px;
 696   margin-bottom: 1px;
 697 }
 698
 699 #changeset_list td {
 700   vertical-align: top;
 701   padding: 3px;
 702 }
 703
 704 #changeset_list .date {
 705   white-space: nowrap;
 706 }
 707
 708 #changeset_list .user {
 709   white-space: nowrap;
 710 }
 711
 712 #changeset_list .area {
 713   white-space: nowrap;
 714 }
 715
 716 #changeset_list .selected {
 717   background-color: rgb(255, 255, 160);
 718   background-color: rgba(255, 255, 85, 0.5);
 719 }
 720
 721 #changeset_list_map {
 722   position: absolute;
 723   top: 0px;
 724   bottom: 0px;
 725   width: 49%;
 726   min-height: 400px;
 727   border: solid 1px black;
 728 }
 729
 730 /* Rules for the data browser */
 731
 732 #browse_navigation {
 733   width: 250px;
 734   text-align: center;
 735 }
 736
 737 table.browse_details th {
 738   white-space: nowrap;
 739 }
 740
 741 #browse_map {
 742   width: 250px;
 743 }
 744
 745 #browse_map #small_map {
 746   width: 250px;
 747   height: 300px;
 748   border: solid 1px black;
 749 }
 750
 751 #browse_map .geolink {
 752   display: none;
 753 }
 754
 755 /* Rules for the trace list shown by the traces tab etc */
 756
 757 #trace_list {
 758   font-size: small;
 759   border-collapse: collapse;
 760   border-width: 0px;
 761 }
 762
 763 #trace_list .trace_summary {
 764   font-size: 12px;
 765   color: gray;
 766 }
 767
 768 #trace_list .trace_pending {
 769   color: red;
 770 }
 771
 772 #trace_list .trace_public {
 773   color: green;
 774 }
 775
 776 #trace_list .trace_identifiable {
 777   color: green;
 778 }
 779
 780 #trace_list .trace_trackable {
 781   color: red;
 782 }
 783
 784 #trace_list .trace_private {
 785   color: red;
 786 }
 787
 788 /* Rules for the user list */
 789
 790 #user_list {
 791   width: 100%;
 792   font-size: small;
 793 }
 794
 795 #user_list tr {
 796   vertical-align: middle;
 797 }
 798
 799 #user_list p {
 800   margin-top: 0px;
 801   margin-bottom: 0px;
 802 }
 803
 804 #user_list_actions {
 805   margin-top: 10px;
 806 }
 807
 808 /* Rules for the new diary entry page */
 809
 810 .diary_entry div#map {
 811   position: relative;
 812   width: 90%;
 813   height: 400px;
 814   border: 1px solid #ccc;
 815   display: none;
 816 }
 817
 818 /* Rules for the login page */
 819
 820 #login_wrapper div {
 821   margin: 5px;
 822   padding: 15px;
 823   border-radius: 15px;
 824   -moz-border-radius: 15px;
 825 }
 826
 827 #login_login {
 828   background-color: #f5f5ff;
 829   border: 1px solid #f3f3ff;
 830   border-radius: 15px;
 831   -moz-border-radius: 15px;
 832 }
 833
 834 #login_login h1 {
 835   margin-top: 5px;
 836 }
 837
 838 table#login_openid_buttons {
 839   padding-bottom: 10px;
 840 }
 841
 842 #login_openid_buttons td {
 843   padding-left: 10px;
 844   padding-right: 10px;
 845   padding-top: 5px;
 846   padding-bottom: 5px;
 847 }
 848
 849 #login_openid_buttons img {
 850   border: 0;
 851 }
 852
 853 #login_signup form.button-to div {
 854   margin: 0px;
 855   padding: 0px;
 856 }
 857
 858 /* Rules for the account confirmation page */
 859
 860 div#contributorTerms {
 861   border: 1px solid black;
 862   padding: 4px;
 863   overflow: auto;
 864   width: 95%;
 865   height: 400px;
 866 }
 867
 868 div#slim_content div#contributorTerms {
 869   width: auto;
 870 }
 871
 872 div#contributorTerms p#first {
 873   margin-top: 0px;
 874 }
 875
 876 div#contributorTerms p#last {
 877   margin-bottom: 0px;
 878 }
 879
 880 div#contributorTerms ol {
 881   margin-bottom: 0px;
 882 }
 883
 884 div#contributorTerms img {
 885   display: block;
 886   margin-left: auto;
 887   margin-right: auto;
 888   margin-top: 10%;
 889 }
 890
 891 form#termsForm {
 892   width: 95%;
 893   margin-bottom: 3em;
 894 }
 895
 896 div#slim_content form#termsForm {
 897   width: auto;
 898 }
 899
 900 p#contributorGuidance {
 901   background-color: #f5f5ff;
 902   border: 1px solid #f3f3ff;
 903   border-radius: 15px;
 904   -moz-border-radius: 15px;
 905   padding: 10px;
 906 }
 907
 908 /* Rules for the account settings page */
 909
 910 #accountForm {
 911   margin-top: 20px;
 912 }
 913
 914 #accountForm td {
 915   padding-bottom: 10px;
 916 }
 917
 918 #accountForm .user_map {
 919   position: relative;
 920   width: 500px;
 921   height: 400px;
 922   border: 1px solid #ccc;
 923 }
 924
 925 #accountImage td {
 926   padding-bottom: 0px;
 927 }
 928
 929 .nohome .location {
 930   display: none;
 931 }
 932
 933 #homerow .message {
 934   display: none;
 935 }
 936
 937 .nohome .message {
 938   display: inline !important;
 939 }
 940
 941 #accountForm input[type=submit] {
 942   margin-top: 15px;
 943 }
 944
 945 /* Rules for the user view */
 946
 947 .user-view .user_map {
 948   position: relative;
 949   width: 400px;
 950   height: 400px;
 951   border: 1px solid #ccc;
 952 }
 953
 954 .user-view .user_map p#no_home_location {
 955   position: absolute;
 956   top: 0px;
 957   bottom: 0px;
 958   width: 90%;
 959   height: 30%;
 960   margin: auto 5%
 961 }
 962
 963 /* Rules for the user map */
 964
 965 .user_map .olControlSimplePanZoom {
 966   display: none;
 967 }
 968
 969 .user_map .olControlZoom {
 970   display: block;
 971 }
 972
 973 /* Rules for user popups on maps */
 974
 975 .user_popup p {
 976   padding-top: 3px;
 977   padding-bottom: 3px;
 978   margin-top: 0px;
 979   margin-bottom: 0px;
 980   margin-left: 55px;
 981   margin-right: 2px;
 982 }
 983
 984 .user_popup img.user_thumbnail {
 985   float: left;
 986 }
 987
 988 /* Rules for message in/out box page */
 989
 990 #messages {
 991   border: 1px solid #ccc;
 992 }
 993
 994 .inbox-row-unread .inbox-subject {
 995   font-weight: bold;
 996 }
 997
 998 .inbox-row .inbox-mark-read {
 999   display: none;
1000 }
1001
1002 .inbox-row-unread .inbox-mark-unread {
1003   display: none;
1004 }
1005
1006 /* Rules for "flash" notice boxes shown at the top of the content area */
1007
1008 #error {
1009   border: 1px solid red;
1010   padding: 7px;
1011   background-color: #fff0f0;
1012   margin-bottom: 20px;
1013   border-radius: 5px;
1014   -moz-border-radius: 5px;
1015 }
1016
1017 #warning {
1018   border: 1px solid orange;
1019   padding: 7px;
1020   background-color: #fff6f0;
1021   margin-bottom: 20px;
1022   border-radius: 5px;
1023   -moz-border-radius: 5px;
1024 }
1025
1026 #notice {
1027   border: 1px solid green;
1028   padding: 7px;
1029   background-color: #f0fff0;
1030   margin-bottom: 20px;
1031   border-radius: 5px;
1032   -moz-border-radius: 5px;
1033 }
1034
1035 /* Rules for highlighting fields with rails validation errors */
1036
1037 .field_with_errors {
1038   padding: 2px;
1039   background-color: red;
1040   display: table;
1041 }
1042
1043 /* Rules for rails validation error boxes */
1044
1045 #errorExplanation {
1046   width: 400px;
1047   border: 2px solid red;
1048   padding: 7px;
1049   padding-bottom: 12px;
1050   margin-bottom: 20px;
1051   background-color: #f0f0f0;
1052 }
1053
1054 #errorExplanation h2 {
1055   font-weight: bold;
1056   font-size: 12px;
1057   margin: -7px;
1058   background-color: #c00;
1059   color: #fff;
1060 }
1061
1062 #errorExplanation p {
1063   color: #333;
1064   margin-bottom: 0px;
1065   padding: 5px;
1066 }
1067
1068 #errorExplanation ul li {
1069   font-size: 12px;
1070   list-style: square;
1071 }
1072
1073 /* Rules for forms */
1074
1075 .fieldName {
1076   vertical-align: top;
1077   font-weight: bold;
1078   font-size: 12px;
1079   line-height: 20px;
1080 }
1081
1082 .minorNote {
1083   font-size: 0.8em;
1084 }
1085
1086 input[type="text"],
1087 input[type="email"],
1088 input[type="url"],
1089 input[type="password"],
1090 textarea {
1091   border: 1px solid #ccc;
1092 }
1093
1094 /* Rules for user images */
1095
1096 img.user_image {
1097   max-width: 100px;
1098   max-height: 100px;
1099   border: 1px solid black;
1100 }
1101
1102 img.user_thumbnail {
1103   max-width: 50px;
1104   max-height: 100px;
1105   border: 1px solid black;
1106 }
1107
1108 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1109
1110 .nowrap {
1111   white-space: nowrap;
1112 }
1113
1114 /* Rules for geo microformats */
1115
1116 abbr.geo {
1117   border-bottom: none;
1118 }
1119
1120 /* Rules for RSS buttons */
1121
1122 .rsssmall {
1123   position: relative;
1124   top: 4px;
1125 }
1126
1127 /* Rules for doing distinct colour of alternate table rows */
1128
1129 .table0 {
1130   background: #f6f6f6;
1131 }
1132
1133 .table1 {
1134   background: #fff;
1135 }
1136
1137 /* Rules for OpenID logo */
1138
1139 .openid_logo {
1140   vertical-align: text-bottom;
1141   border: 0;
1142 }
1143
1144 /* Rules for rich text editors */
1145
1146 .richtext_container {
1147   white-space: nowrap;
1148
1149   .richtext_content {
1150     display: inline-block;
1151     vertical-align: top;
1152
1153     .richtext_preview {
1154       display: inline-block;
1155       margin-top: 1px;
1156       margin-bottom: 1px;
1157       border: 4px solid #eee;
1158       background-color: #eee;
1159       white-space: normal;
1160
1161       &.loading {
1162         background-image: image-url("loading.gif");
1163         background-repeat: no-repeat;
1164         background-position: center;
1165       }
1166
1167       > :first-child {
1168         margin-top: 0px;
1169       }
1170     }
1171   }
1172
1173   .richtext_help {
1174     display: inline-block;
1175     vertical-align: top;
1176     background-color: #ddd;
1177     padding: 5px 10px 10px 10px;
1178     font-size: 12px;
1179
1180     p {
1181       margin: 0px;
1182     }
1183
1184     th {
1185       vertical-align: top;
1186     }
1187
1188     td {
1189       font-family: fixed;
1190       line-height: 16px;
1191       padding: 0px !important;
1192     }
1193
1194     input.richtext_doedit {
1195       margin-top: 5px !important;
1196     }
1197
1198     input.richtext_dopreview {
1199       margin-top: 5px !important;
1200     }
1201   }
1202 }