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 td.browse_comments {
 742   padding: 0px;
 743 }
 744
 745 td.browse_comments table {
 746   border-collapse: collapse;
 747 }
 748
 749 td.browse_comments table td {
 750   padding-bottom: 10px;
 751 }
 752
 753 td.browse_comments table td span.by {
 754   font-size: small;
 755   color: #999999;
 756 }
 757
 758 #browse_map {
 759   width: 250px;
 760 }
 761
 762 #browse_map #small_map {
 763   width: 250px;
 764   height: 300px;
 765   border: solid 1px black;
 766 }
 767
 768 #browse_map .geolink {
 769   display: none;
 770 }
 771
 772 /* Rules for the trace list shown by the traces tab etc */
 773
 774 #trace_list {
 775   font-size: small;
 776   border-collapse: collapse;
 777   border-width: 0px;
 778 }
 779
 780 #trace_list .trace_summary {
 781   font-size: 12px;
 782   color: gray;
 783 }
 784
 785 #trace_list .trace_pending {
 786   color: red;
 787 }
 788
 789 #trace_list .trace_public {
 790   color: green;
 791 }
 792
 793 #trace_list .trace_identifiable {
 794   color: green;
 795 }
 796
 797 #trace_list .trace_trackable {
 798   color: red;
 799 }
 800
 801 #trace_list .trace_private {
 802   color: red;
 803 }
 804
 805 /* Rules for the user list */
 806
 807 #user_list {
 808   width: 100%;
 809   font-size: small;
 810 }
 811
 812 #user_list tr {
 813   vertical-align: middle;
 814 }
 815
 816 #user_list p {
 817   margin-top: 0px;
 818   margin-bottom: 0px;
 819 }
 820
 821 #user_list_actions {
 822   margin-top: 10px;
 823 }
 824
 825 /* Rules for the new diary entry page */
 826
 827 .diary_entry div#map {
 828   position: relative;
 829   width: 90%;
 830   height: 400px;
 831   border: 1px solid #ccc;
 832   display: none;
 833 }
 834
 835 /* Rules for the login page */
 836
 837 #login_wrapper div {
 838   margin: 5px;
 839   padding: 15px;
 840   border-radius: 15px;
 841   -moz-border-radius: 15px;
 842 }
 843
 844 #login_login {
 845   background-color: #f5f5ff;
 846   border: 1px solid #f3f3ff;
 847   border-radius: 15px;
 848   -moz-border-radius: 15px;
 849 }
 850
 851 #login_login h1 {
 852   margin-top: 5px;
 853 }
 854
 855 table#login_openid_buttons {
 856   padding-bottom: 10px;
 857 }
 858
 859 #login_openid_buttons td {
 860   padding-left: 10px;
 861   padding-right: 10px;
 862   padding-top: 5px;
 863   padding-bottom: 5px;
 864 }
 865
 866 #login_openid_buttons img {
 867   border: 0;
 868 }
 869
 870 #login_signup form.button-to div {
 871   margin: 0px;
 872   padding: 0px;
 873 }
 874
 875 /* Rules for the account confirmation page */
 876
 877 div#contributorTerms {
 878   border: 1px solid black;
 879   padding: 4px;
 880   overflow: auto;
 881   width: 95%;
 882   height: 400px;
 883 }
 884
 885 div#slim_content div#contributorTerms {
 886   width: auto;
 887 }
 888
 889 div#contributorTerms p#first {
 890   margin-top: 0px;
 891 }
 892
 893 div#contributorTerms p#last {
 894   margin-bottom: 0px;
 895 }
 896
 897 div#contributorTerms ol {
 898   margin-bottom: 0px;
 899 }
 900
 901 div#contributorTerms img {
 902   display: block;
 903   margin-left: auto;
 904   margin-right: auto;
 905   margin-top: 10%;
 906 }
 907
 908 form#termsForm {
 909   width: 95%;
 910   margin-bottom: 3em;
 911 }
 912
 913 div#slim_content form#termsForm {
 914   width: auto;
 915 }
 916
 917 p#contributorGuidance {
 918   background-color: #f5f5ff;
 919   border: 1px solid #f3f3ff;
 920   border-radius: 15px;
 921   -moz-border-radius: 15px;
 922   padding: 10px;
 923 }
 924
 925 /* Rules for the account settings page */
 926
 927 #accountForm {
 928   margin-top: 20px;
 929 }
 930
 931 #accountForm td {
 932   padding-bottom: 10px;
 933 }
 934
 935 #accountForm .user_map {
 936   position: relative;
 937   width: 500px;
 938   height: 400px;
 939   border: 1px solid #ccc;
 940 }
 941
 942 #accountImage td {
 943   padding-bottom: 0px;
 944 }
 945
 946 .nohome .location {
 947   display: none;
 948 }
 949
 950 #homerow .message {
 951   display: none;
 952 }
 953
 954 .nohome .message {
 955   display: inline !important;
 956 }
 957
 958 #accountForm input[type=submit] {
 959   margin-top: 15px;
 960 }
 961
 962 /* Rules for the user view */
 963
 964 .user-view .user_map {
 965   position: relative;
 966   width: 400px;
 967   height: 400px;
 968   border: 1px solid #ccc;
 969 }
 970
 971 .user-view .user_map p#no_home_location {
 972   position: absolute;
 973   top: 0px;
 974   bottom: 0px;
 975   width: 90%;
 976   height: 30%;
 977   margin: auto 5%
 978 }
 979
 980 /* Rules for the user map */
 981
 982 .user_map .olControlSimplePanZoom {
 983   display: none;
 984 }
 985
 986 .user_map .olControlZoom {
 987   display: block;
 988 }
 989
 990 /* Rules for user popups on maps */
 991
 992 .user_popup p {
 993   padding-top: 3px;
 994   padding-bottom: 3px;
 995   margin-top: 0px;
 996   margin-bottom: 0px;
 997   margin-left: 55px;
 998   margin-right: 2px;
 999 }
1000
1001 .user_popup img.user_thumbnail {
1002   float: left;
1003 }
1004
1005 /* Rules for message in/out box page */
1006
1007 #messages {
1008   border: 1px solid #ccc;
1009 }
1010
1011 .inbox-row-unread .inbox-subject {
1012   font-weight: bold;
1013 }
1014
1015 .inbox-row .inbox-mark-read {
1016   display: none;
1017 }
1018
1019 .inbox-row-unread .inbox-mark-unread {
1020   display: none;
1021 }
1022
1023 /* Rules for "flash" notice boxes shown at the top of the content area */
1024
1025 #error {
1026   border: 1px solid red;
1027   padding: 7px;
1028   background-color: #fff0f0;
1029   margin-bottom: 20px;
1030   border-radius: 5px;
1031   -moz-border-radius: 5px;
1032 }
1033
1034 #warning {
1035   border: 1px solid orange;
1036   padding: 7px;
1037   background-color: #fff6f0;
1038   margin-bottom: 20px;
1039   border-radius: 5px;
1040   -moz-border-radius: 5px;
1041 }
1042
1043 #notice {
1044   border: 1px solid green;
1045   padding: 7px;
1046   background-color: #f0fff0;
1047   margin-bottom: 20px;
1048   border-radius: 5px;
1049   -moz-border-radius: 5px;
1050 }
1051
1052 /* Rules for highlighting fields with rails validation errors */
1053
1054 .field_with_errors {
1055   padding: 2px;
1056   background-color: red;
1057   display: table;
1058 }
1059
1060 /* Rules for rails validation error boxes */
1061
1062 #errorExplanation {
1063   width: 400px;
1064   border: 2px solid red;
1065   padding: 7px;
1066   padding-bottom: 12px;
1067   margin-bottom: 20px;
1068   background-color: #f0f0f0;
1069 }
1070
1071 #errorExplanation h2 {
1072   font-weight: bold;
1073   font-size: 12px;
1074   margin: -7px;
1075   background-color: #c00;
1076   color: #fff;
1077 }
1078
1079 #errorExplanation p {
1080   color: #333;
1081   margin-bottom: 0px;
1082   padding: 5px;
1083 }
1084
1085 #errorExplanation ul li {
1086   font-size: 12px;
1087   list-style: square;
1088 }
1089
1090 /* Rules for forms */
1091
1092 .fieldName {
1093   vertical-align: top;
1094   font-weight: bold;
1095   font-size: 12px;
1096   line-height: 20px;
1097 }
1098
1099 .minorNote {
1100   font-size: 0.8em;
1101 }
1102
1103 input[type="text"],
1104 input[type="email"],
1105 input[type="url"],
1106 input[type="password"],
1107 textarea {
1108   border: 1px solid #ccc;
1109 }
1110
1111 /* Rules for user images */
1112
1113 img.user_image {
1114   max-width: 100px;
1115   max-height: 100px;
1116   border: 1px solid black;
1117 }
1118
1119 img.user_thumbnail {
1120   max-width: 50px;
1121   max-height: 100px;
1122   border: 1px solid black;
1123 }
1124
1125 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1126
1127 .nowrap {
1128   white-space: nowrap;
1129 }
1130
1131 /* Rules for geo microformats */
1132
1133 abbr.geo {
1134   border-bottom: none;
1135 }
1136
1137 /* Rules for RSS buttons */
1138
1139 .rsssmall {
1140   position: relative;
1141   top: 4px;
1142 }
1143
1144 /* Rules for doing distinct colour of alternate table rows */
1145
1146 .table0 {
1147   background: #f6f6f6;
1148 }
1149
1150 .table1 {
1151   background: #fff;
1152 }
1153
1154 /* Rules for OpenID logo */
1155
1156 .openid_logo {
1157   vertical-align: text-bottom;
1158   border: 0;
1159 }
1160
1161 /* Rules for rich text editors */
1162
1163 .richtext_container {
1164   white-space: nowrap;
1165
1166   .richtext_content {
1167     display: inline-block;
1168     vertical-align: top;
1169
1170     .richtext_preview {
1171       display: inline-block;
1172       margin-top: 1px;
1173       margin-bottom: 1px;
1174       border: 4px solid #eee;
1175       background-color: #eee;
1176       white-space: normal;
1177
1178       &.loading {
1179         background-image: image-url("loading.gif");
1180         background-repeat: no-repeat;
1181         background-position: center;
1182       }
1183
1184       > :first-child {
1185         margin-top: 0px;
1186       }
1187     }
1188   }
1189
1190   .richtext_help {
1191     display: inline-block;
1192     vertical-align: top;
1193     background-color: #ddd;
1194     padding: 5px 10px 10px 10px;
1195     font-size: 12px;
1196
1197     p {
1198       margin: 0px;
1199     }
1200
1201     th {
1202       vertical-align: top;
1203     }
1204
1205     td {
1206       font-family: fixed;
1207       line-height: 16px;
1208       padding: 0px !important;
1209     }
1210
1211     input.richtext_doedit {
1212       margin-top: 5px !important;
1213     }
1214
1215     input.richtext_dopreview {
1216       margin-top: 5px !important;
1217     }
1218   }
1219 }