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