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