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