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