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