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