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 div.olControlZoom a {
 428   margin: 0 !important;
 429 }
 430
 431 div.olControlZoom a.olControlZoomIn {
 432     border-bottom: 0;
 433 }
 434
 435 /* Rules for edit menu */
 436
 437 .menuicon {
 438   padding: 5px;
 439
 440   &:hover {
 441     background: #eee;
 442     text-decoration: none !important;
 443   }
 444 }
 445
 446 .menu {
 447   display: none;
 448   z-index: 10000;
 449   position: absolute;
 450   background-color: #ffffff;
 451   border: 1px solid #cccccc;
 452   border-top: 0px;
 453 }
 454
 455 .menu ul {
 456   margin: 0px;
 457   padding: 0px;
 458 }
 459
 460 .menu li {
 461   padding: 2px 5px;
 462   margin: 0px;
 463   list-style-type: none;
 464   border-top: 1px solid #eee;
 465   white-space: nowrap;
 466 }
 467
 468 /* Rules for attribution text under the main map shown on printouts */
 469
 470 #attribution {
 471   display: none;
 472 }
 473
 474 .attribution_notice {
 475   text-align: center;
 476 }
 477
 478 /* Rules for the popout map sidebar */
 479
 480 #sidebar {
 481   display: none;
 482   position: absolute;
 483   margin: 0px;
 484   padding: 0px;
 485   width: 30%;
 486   top: 0px;
 487   bottom: 0px;
 488 }
 489
 490 #sidebar #sidebar_content {
 491   overflow: auto;
 492   position: absolute;
 493   font-size: 13px;
 494   line-height: 15px;
 495   top: 29px;
 496   bottom: 0px;
 497   left: 0px;
 498   right: 0px;
 499 }
 500
 501 #sidebar .sidebar_title {
 502   margin: 0px;
 503   padding: 3px 6px 4px 6px;
 504   height: 29px;
 505   font-size: 14px;
 506   line-height: 15px;
 507   background: #bbb;
 508 }
 509
 510 /* Rules for the map key which appears in the popout sidebar */
 511
 512 #mapkey h3 {
 513   font-size: 110%;
 514   font-weight: normal;
 515   text-align: center;
 516 }
 517
 518 #mapkey .mapkey-table {
 519   padding-left: 5px;
 520   padding-right: 5px;
 521 }
 522
 523 #mapkey .mapkey-table-key img {
 524   display: block;
 525   margin-left: auto;
 526   margin-right: auto;
 527 }
 528
 529 #mapkey .mapkey-table-value {
 530   font-size: 90%;
 531 }
 532
 533 /* Rules for search results which appear in the popout sidebar */
 534
 535 .search_searching {
 536   margin-top: 5px;
 537   margin-bottom: 5px;
 538 }
 539
 540 .search_results_heading {
 541   margin: 0px;
 542   padding: 2px 5px;
 543   border-bottom: 1px solid #ccc;
 544   font-weight: bold;
 545 }
 546
 547 .search_results_entry {
 548   margin: 0px;
 549   padding: 2px 5px;
 550 }
 551
 552 .search_results_error {
 553   margin: 0px;
 554   padding: 2px 6px 0px;
 555   color: #f00;
 556 }
 557
 558 /* Rules for data browser information which appears in the popout sidebar */
 559
 560 .browse_heading {
 561   margin: 0px;
 562   padding: 3px 6px;
 563   border: 1px solid #ccc;
 564   background: #ddd;
 565 }
 566
 567 .browse_details {
 568   margin: 0px;
 569   padding: 0px 6px;
 570 }
 571
 572 /* Rules for export information which appears in the popout sidebar */
 573
 574 .export_heading {
 575   margin: 0px;
 576   padding: 2px 5px;
 577   border-bottom: 1px solid #ccc;
 578   font-weight: bold;
 579 }
 580
 581 .export_bounds {
 582   width: 100%;
 583   text-align: center;
 584 }
 585
 586 .export_bound {
 587   margin: 5px;
 588 }
 589
 590 .export_details {
 591   padding: 2px 6px;
 592 }
 593
 594 #export_osm {
 595   display: none;
 596 }
 597
 598 #export_mapnik {
 599   display: none;
 600 }
 601
 602 #export_osmarender {
 603   display: none;
 604 }
 605
 606 .export_hint {
 607   padding: 0px 12px;
 608   font-style: italic;
 609 }
 610
 611 .export_buttons {
 612   width: 100%;
 613   text-align: center;
 614 }
 615
 616 /* Rules for the main content area */
 617
 618 #content {
 619   padding: 10px;
 620   margin: 0px;
 621   position: absolute;
 622   bottom: 0px;
 623 }
 624
 625 .site-index #content,
 626 .site-edit #content,
 627 .site-export #content {
 628   border: 0px;
 629   padding: 0px;
 630 }
 631
 632 #slim_container {
 633   width: 100%;
 634 }
 635
 636 #slim_container_content {
 637   max-width: 50em;
 638   background-color: #FFFFFF;
 639   margin: 10px auto;
 640   padding: 3px;
 641   border-radius: 25px;
 642   -moz-border-radius: 25px;
 643   border: 1px solid #e6e6e6;
 644 }
 645
 646 #slim_content {
 647   margin: 10px;
 648   margin-top: 90px;
 649   max-width: 50em;
 650 }
 651
 652 #slim_header {
 653   margin: 10px;
 654   position: absolute;
 655   top: 0px;
 656 }
 657
 658 #slim_header img {
 659   vertical-align: middle;
 660   margin-bottom: 5px;
 661 }
 662
 663 /* Rules for text content pages */
 664
 665 .wide-table {
 666   width: 100%;
 667 }
 668
 669 /* Rules for the home page */
 670
 671 .site-index #map {
 672   position: absolute;
 673   top: 0px;
 674   bottom: 0px;
 675   left: 0px;
 676   right: 0px;
 677 }
 678
 679 .site-export #map {
 680   position: absolute;
 681   top: 0px;
 682   bottom: 0px;
 683   left: 0px;
 684   right: 0px;
 685 }
 686
 687 /* Rules for the edit page */
 688
 689 .site-edit #map {
 690   position: absolute;
 691   top: 0px;
 692   bottom: 0px;
 693   left: 0px;
 694   right: 0px;
 695   overflow: hidden;
 696 }
 697
 698 /* Rules for the changeset list shown by the history tab etc */
 699
 700 #changeset_list_container {
 701   position: relative;
 702 }
 703
 704 #changeset_list {
 705   width: 50%;
 706   font-size: small;
 707   border-collapse: collapse;
 708   border-width: 0px;
 709   margin-top: 1px;
 710   margin-bottom: 1px;
 711 }
 712
 713 #changeset_list td {
 714   vertical-align: top;
 715   padding: 3px;
 716 }
 717
 718 #changeset_list .date {
 719   white-space: nowrap;
 720 }
 721
 722 #changeset_list .user {
 723   white-space: nowrap;
 724 }
 725
 726 #changeset_list .area {
 727   white-space: nowrap;
 728 }
 729
 730 #changeset_list .selected {
 731   background-color: rgb(255, 255, 160);
 732   background-color: rgba(255, 255, 85, 0.5);
 733 }
 734
 735 #changeset_list_map {
 736   position: absolute;
 737   top: 0px;
 738   bottom: 0px;
 739   width: 49%;
 740   min-height: 400px;
 741   border: solid 1px black;
 742 }
 743
 744 /* Rules for the data browser */
 745
 746 #browse_navigation {
 747   width: 250px;
 748   text-align: center;
 749 }
 750
 751 table.browse_details th {
 752   white-space: nowrap;
 753 }
 754
 755 #browse_map {
 756   width: 250px;
 757 }
 758
 759 #browse_map #small_map {
 760   width: 250px;
 761   height: 300px;
 762   border: solid 1px black;
 763 }
 764
 765 #browse_map .geolink {
 766   display: none;
 767 }
 768
 769 /* Rules for the trace list shown by the traces tab etc */
 770
 771 #trace_list {
 772   font-size: small;
 773   border-collapse: collapse;
 774   border-width: 0px;
 775 }
 776
 777 #trace_list .trace_summary {
 778   font-size: 12px;
 779   color: gray;
 780 }
 781
 782 #trace_list .trace_pending {
 783   color: red;
 784 }
 785
 786 #trace_list .trace_public {
 787   color: green;
 788 }
 789
 790 #trace_list .trace_identifiable {
 791   color: green;
 792 }
 793
 794 #trace_list .trace_trackable {
 795   color: red;
 796 }
 797
 798 #trace_list .trace_private {
 799   color: red;
 800 }
 801
 802 /* Rules for the user list */
 803
 804 #user_list {
 805   width: 100%;
 806   font-size: small;
 807 }
 808
 809 #user_list tr {
 810   vertical-align: middle;
 811 }
 812
 813 #user_list p {
 814   margin-top: 0px;
 815   margin-bottom: 0px;
 816 }
 817
 818 #user_list_actions {
 819   margin-top: 10px;
 820 }
 821
 822 /* Rules for the new diary entry page */
 823
 824 .diary_entry div#map {
 825   position: relative;
 826   width: 90%;
 827   height: 400px;
 828   border: 1px solid #ccc;
 829   display: none;
 830 }
 831
 832 /* Rules for the login page */
 833
 834 #login_wrapper div {
 835   margin: 5px;
 836   padding: 15px;
 837   border-radius: 15px;
 838   -moz-border-radius: 15px;
 839 }
 840
 841 #login_login {
 842   background-color: #f5f5ff;
 843   border: 1px solid #f3f3ff;
 844   border-radius: 15px;
 845   -moz-border-radius: 15px;
 846 }
 847
 848 #login_login h1 {
 849   margin-top: 5px;
 850 }
 851
 852 table#login_openid_buttons {
 853   padding-bottom: 10px;
 854 }
 855
 856 #login_openid_buttons td {
 857   padding-left: 10px;
 858   padding-right: 10px;
 859   padding-top: 5px;
 860   padding-bottom: 5px;
 861 }
 862
 863 #login_openid_buttons img {
 864   border: 0;
 865 }
 866
 867 #login_signup form.button-to div {
 868   margin: 0px;
 869   padding: 0px;
 870 }
 871
 872 /* Rules for the account confirmation page */
 873
 874 div#contributorTerms {
 875   border: 1px solid black;
 876   padding: 4px;
 877   overflow: auto;
 878   width: 95%;
 879   height: 400px;
 880 }
 881
 882 div#slim_content div#contributorTerms {
 883   width: auto;
 884 }
 885
 886 div#contributorTerms p#first {
 887   margin-top: 0px;
 888 }
 889
 890 div#contributorTerms p#last {
 891   margin-bottom: 0px;
 892 }
 893
 894 div#contributorTerms ol {
 895   margin-bottom: 0px;
 896 }
 897
 898 div#contributorTerms img {
 899   display: block;
 900   margin-left: auto;
 901   margin-right: auto;
 902   margin-top: 10%;
 903 }
 904
 905 form#termsForm {
 906   width: 95%;
 907   margin-bottom: 3em;
 908 }
 909
 910 div#slim_content form#termsForm {
 911   width: auto;
 912 }
 913
 914 p#contributorGuidance {
 915   background-color: #f5f5ff;
 916   border: 1px solid #f3f3ff;
 917   border-radius: 15px;
 918   -moz-border-radius: 15px;
 919   padding: 10px;
 920 }
 921
 922 /* Rules for the account settings page */
 923
 924 #accountForm {
 925   margin-top: 20px;
 926 }
 927
 928 #accountForm td {
 929   padding-bottom: 10px;
 930 }
 931
 932 #accountForm .user_map {
 933   position: relative;
 934   width: 500px;
 935   height: 400px;
 936   border: 1px solid #ccc;
 937 }
 938
 939 #accountForm td.accountImage {
 940   img {
 941     vertical-align: top;
 942     margin-top: 3px;
 943   }
 944
 945   table {
 946     display: inline-block;
 947
 948     td {
 949       padding-bottom: 0px;
 950     }
 951   }
 952 }
 953
 954 .nohome .location {
 955   display: none;
 956 }
 957
 958 #homerow .message {
 959   display: none;
 960 }
 961
 962 .nohome .message {
 963   display: inline !important;
 964 }
 965
 966 #accountForm input[type=submit] {
 967   margin-top: 15px;
 968 }
 969
 970 /* Rules for the user view */
 971
 972 .user-view .user_map {
 973   position: relative;
 974   width: 400px;
 975   height: 400px;
 976   border: 1px solid #ccc;
 977 }
 978
 979 .user-view .user_map p#no_home_location {
 980   position: absolute;
 981   top: 0px;
 982   bottom: 0px;
 983   width: 90%;
 984   height: 30%;
 985   margin: auto 5%
 986 }
 987
 988 /* Rules for the user map */
 989
 990 .user_map .olControlSimplePanZoom {
 991   display: none;
 992 }
 993
 994 .user_map .olControlZoom {
 995   display: block;
 996 }
 997
 998 /* Rules for user popups on maps */
 999
1000 .user_popup p {
1001   padding-top: 3px;
1002   padding-bottom: 3px;
1003   margin-top: 0px;
1004   margin-bottom: 0px;
1005   margin-left: 55px;
1006   margin-right: 2px;
1007 }
1008
1009 .user_popup img.user_thumbnail {
1010   float: left;
1011 }
1012
1013 /* Rules for message in/out box page */
1014
1015 .messages {
1016   width: 100%;
1017   border-collapse: collapse;
1018   border-spacing: 0px;
1019   border-width: 0px;
1020 }
1021
1022 .messages tbody tr {
1023   border-top: 1px solid #ccc;
1024 }
1025
1026 .messages .inbox-row {
1027   background: #eee;
1028 }
1029
1030 .messages tr td,
1031 .messages tr th {
1032   padding: 0px 5px;
1033 }
1034
1035 .inbox-row .inbox-mark-read {
1036   display: none;
1037 }
1038
1039 .info-line {
1040   border-bottom: 1px solid #ccc;
1041   padding: 5px 0px 4px 0px;
1042 }
1043
1044 .info-line form,
1045 .info-line form div {
1046   display: inline;
1047 }
1048
1049 .info-line .user_thumbnail_tiny {
1050   vertical-align: middle;
1051 }
1052
1053 .right {
1054   float: right;
1055 }
1056
1057 .inbox-row-unread .inbox-mark-unread {
1058   display: none;
1059 }
1060
1061 /* Rules for "flash" notice boxes shown at the top of the content area */
1062
1063 #error {
1064   border: 1px solid red;
1065   padding: 7px;
1066   background-color: #fff0f0;
1067   margin-bottom: 20px;
1068   border-radius: 5px;
1069   -moz-border-radius: 5px;
1070 }
1071
1072 #warning {
1073   border: 1px solid orange;
1074   padding: 7px;
1075   background-color: #fff6f0;
1076   margin-bottom: 20px;
1077   border-radius: 5px;
1078   -moz-border-radius: 5px;
1079 }
1080
1081 #notice {
1082   border: 1px solid green;
1083   padding: 7px;
1084   background-color: #f0fff0;
1085   margin-bottom: 20px;
1086   border-radius: 5px;
1087   -moz-border-radius: 5px;
1088 }
1089
1090 /* Rules for highlighting fields with rails validation errors */
1091
1092 .field_with_errors {
1093   padding: 2px;
1094   background-color: red;
1095   display: table;
1096 }
1097
1098 /* Rules for rails validation error boxes */
1099
1100 #errorExplanation {
1101   width: 400px;
1102   border: 2px solid red;
1103   padding: 7px;
1104   padding-bottom: 12px;
1105   margin-bottom: 20px;
1106   background-color: #f0f0f0;
1107 }
1108
1109 #errorExplanation h2 {
1110   font-weight: bold;
1111   font-size: 12px;
1112   margin: -7px;
1113   background-color: #c00;
1114   color: #fff;
1115 }
1116
1117 #errorExplanation p {
1118   color: #333;
1119   margin-bottom: 0px;
1120   padding: 5px;
1121 }
1122
1123 #errorExplanation ul li {
1124   font-size: 12px;
1125   list-style: square;
1126 }
1127
1128 /* Rules for forms */
1129
1130 .fieldName {
1131   vertical-align: top;
1132   font-weight: bold;
1133   font-size: 12px;
1134   line-height: 20px;
1135 }
1136
1137 .minorNote {
1138   font-size: 0.8em;
1139 }
1140
1141 input[type="text"],
1142 input[type="email"],
1143 input[type="url"],
1144 input[type="password"],
1145 textarea {
1146   border: 1px solid #ccc;
1147 }
1148
1149 /* Rules for user images */
1150
1151 img.user_image {
1152   max-width: 100px;
1153   max-height: 100px;
1154   border: 1px solid #ccc;
1155 }
1156
1157 img.user_thumbnail {
1158   max-width: 50px;
1159   max-height: 100px;
1160   border: 1px solid #ccc;
1161 }
1162
1163 img.user_thumbnail_tiny {
1164   max-width: 25px;
1165   max-height: 25px;
1166   border: 1px solid #ccc;
1167 }
1168
1169 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1170
1171 .nowrap {
1172   white-space: nowrap;
1173 }
1174
1175 /* Rules for geo microformats */
1176
1177 abbr.geo {
1178   border-bottom: none;
1179 }
1180
1181 /* Rules for RSS buttons */
1182
1183 .rsssmall {
1184   position: relative;
1185   top: 4px;
1186 }
1187
1188 /* Rules for doing distinct colour of alternate table rows */
1189
1190 .table0 {
1191   background: #f6f6f6;
1192 }
1193
1194 .table1 {
1195   background: #fff;
1196 }
1197
1198 /* Rules for OpenID logo */
1199
1200 .openid_logo {
1201   vertical-align: text-bottom;
1202   border: 0;
1203 }
1204
1205 /* Rules for rich text editors */
1206
1207 .richtext_container {
1208   white-space: nowrap;
1209
1210   .richtext_content {
1211     display: inline-block;
1212     vertical-align: top;
1213
1214     .richtext_preview {
1215       display: inline-block;
1216       margin-top: 1px;
1217       margin-bottom: 1px;
1218       border: 4px solid #eee;
1219       background-color: #eee;
1220       white-space: normal;
1221
1222       &.loading {
1223         background-image: image-url("loading.gif");
1224         background-repeat: no-repeat;
1225         background-position: center;
1226       }
1227
1228       > :first-child {
1229         margin-top: 0px;
1230       }
1231     }
1232   }
1233
1234   .richtext_help {
1235     display: inline-block;
1236     vertical-align: top;
1237     background-color: #ddd;
1238     padding: 5px 10px 10px 10px;
1239     font-size: 12px;
1240
1241     p {
1242       margin: 0px;
1243     }
1244
1245     th {
1246       vertical-align: top;
1247     }
1248
1249     td {
1250       font-family: fixed;
1251       line-height: 16px;
1252       padding: 0px !important;
1253     }
1254
1255     input.richtext_doedit {
1256       margin-top: 5px !important;
1257     }
1258
1259     input.richtext_dopreview {
1260       margin-top: 5px !important;
1261     }
1262   }
1263 }