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