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