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 }
  14
  15 body.slim {
  16   background-color: #f0f0f0;
  17 }
  18
  19 /* Rules for links */
  20
  21 a {
  22   color: #00f;
  23   text-decoration: none;
  24 }
  25
  26 a:hover {
  27   text-decoration: underline;
  28 }
  29
  30 /* Rules for horizontal lines */
  31
  32 hr {
  33   border: none;
  34   background-color: #ccc;
  35   color: #ccc;
  36   height: 1px;
  37 }
  38
  39 /* Default rules for headings */
  40
  41 h2 {
  42   margin: 5px 0;
  43   font-size: 25px;
  44   line-height: 30px;
  45 }
  46
  47 /* Rules for the whole left sidebar, including the logo */
  48
  49 #left {
  50   position: absolute;
  51   top: 0px;
  52   width: 185px;
  53   font-size: 11px;
  54   line-height: 12px;
  55 }
  56
  57 /* Rules for the OpenStreetMap logo in the top left corner */
  58
  59 #logo {
  60   display: block;
  61   width: 170px;
  62   min-width: 170px;
  63   padding: 5px;
  64   text-align: center;
  65   margin: 25px auto 5px auto;
  66 }
  67
  68 #logo img {
  69   border: 0px;
  70 }
  71
  72 #logo h1 {
  73   font-size: 18px;
  74   line-height: 20px;
  75   text-align: center;
  76   margin: 0px;
  77 }
  78
  79 #logo h2 {
  80   font-size: 10px;
  81   line-height: 15px;
  82   margin: 0px;
  83 }
  84
  85 /* Rules for the site name */
  86
  87 #small-title {
  88   display: none;
  89 }
  90
  91 #small-title img {
  92   border: 0px;
  93 }
  94
  95 /* Rules for the introductory text displayed in the left sidebar to new users */
  96
  97 .sidebar-copy {
  98   padding: 5px 10px;
  99 }
 100
 101 .sidebar-copy p {
 102   margin: 5px 0;
 103 }
 104
 105 .sidebar-copy.intro {
 106   margin-top: -1px;
 107   border-top: 1px solid #ccc;
 108 }
 109
 110 /*
 111  * Rules for alert boxes shown in the left sidebar when important
 112  * information needs to be conveyed such as when the site is
 113  * undergoing maintenance.
 114  */
 115
 116 .sidebar-alert {
 117   padding: 4px 5px 4px 5px;
 118   border-top: 1px solid #ccc;
 119   margin-top: 4px;
 120   margin-bottom: -4px;
 121   background: #e00;
 122   font-size: 13px;
 123   font-weight: bold;
 124   line-height: 17px;
 125
 126   p {
 127     margin: 5px;
 128   }
 129 }
 130
 131 /*
 132  * Rules for notice boxes shown in the left sidebar when important, but
 133  * non-critical information needs to be conveyed such as notices about
 134  * donation drives.
 135  */
 136
 137 .sidebar-notice {
 138   padding: 4px 5px 4px 5px;
 139   border-top: 1px solid #ccc;
 140   margin-top: 4px;
 141   margin-bottom: -4px;
 142   background: #ea0;
 143   font-size: 13px;
 144   line-height: 17px;
 145
 146   p {
 147     margin: 5px;
 148   }
 149 }
 150
 151 /* Rules for the menu displayed in the left sidebar */
 152
 153 .left_menu {
 154   margin: 0;
 155   padding: 5px 10px;
 156   line-height: 15px;
 157   font-size: 12px;
 158   list-style-type: none;
 159   border-bottom: 1px solid #ccc;
 160   border-top: 1px solid #ccc;
 161 }
 162
 163 .left_menu ul {
 164   padding: 0;
 165   margin: 0;
 166 }
 167
 168 .left_menu li {
 169   list-style-type: none;
 170   padding: 0;
 171   margin: 0;
 172 }
 173
 174 .left_menu h4 {
 175   padding: 5px 0 5px 0;
 176   font-size: 12px;
 177   margin: 0;
 178 }
 179
 180 .left_menu li:last-child h4 {
 181   padding-top: 0;
 182 }
 183
 184 /* Rules for SOTM advert */
 185
 186 #sotm {
 187   width: 165px;
 188   margin: 10px;
 189   padding: 0px;
 190   border: 0px;
 191   background: #fff;
 192 }
 193
 194 #sotm img {
 195   width: 165px;
 196 }
 197
 198 /*
 199  * Rules for "optional boxes" which appear in the left sidebar on
 200  * certain pages. Current users are the seach box on the main page
 201  * and the tag cloud on the traces pages.
 202  */
 203
 204 .optionalbox {
 205   padding: 5px 10px;
 206   margin: 5px 0;
 207 }
 208
 209 .optionalbox h1 {
 210   font-size: 14px;
 211   font-weight: bold;
 212   line-height: 20px;
 213   margin: 0px;
 214   vertical-align: bottom;
 215 }
 216
 217 /* Rules for the search box */
 218
 219 .whereami {
 220 }
 221
 222 #search_field form {
 223   width: 165px;
 224   margin: 0px;
 225   padding: 0px;
 226 }
 227
 228 #search_field {
 229   position:relative;
 230 }
 231
 232 #search_field input[type="text"] {
 233   width: 165px;
 234   font-size: 14px;
 235   line-height: 15px;
 236   height: 25px;
 237   box-shadow: inset #DDD 0px 1px 3px;
 238   box-sizing: border-box;
 239   -webkit-box-sizing: border-box;
 240   -moz-box-sizing: border-box;
 241   -ms-box-sizing: border-box;
 242 }
 243
 244 #search_field input[type="text"]:focus {
 245   outline: none;
 246   border: 1px solid #000;
 247 }
 248
 249 #search_field input[type="submit"] {
 250   width: 15px;
 251   height: 15px;
 252   border: 0px;
 253   text-indent: -1000px;
 254   overflow: hidden;
 255   text-transform: capitalize;
 256   padding-left: 0px;
 257   padding-right: 0px;
 258   background: url(sprite.png);
 259   position: absolute;
 260   top: 5px;
 261   cursor: pointer;
 262 }
 263
 264 .search_help {
 265   margin: 5px 0 0 0;
 266 }
 267
 268 .deemphasize {
 269   color: #999;
 270 }
 271
 272 .deemphasize a {
 273   color: #7092FF;
 274 }
 275
 276 /* Rules for donation request box */
 277
 278 .donate {
 279   display: block;
 280   position: relative;
 281   width: 153px;
 282   margin: 10px 10px 0px 10px;
 283   padding: 5px;
 284   border: 1px solid #AED1A0;
 285   background: #cbeea7;
 286   line-height: 20px;
 287   text-align: center;
 288   font-size: 14px;
 289   border-radius: 2px;
 290   -moz-border-radius: 2px;
 291   color: #222;
 292 }
 293
 294 .donate:hover {
 295   background: #9ed485;
 296   text-decoration: none;
 297 }
 298
 299 .donate p {
 300   text-indent: 20px;
 301   margin: 0;
 302 }
 303
 304 .donate .donate-icon {
 305   width: 15px;
 306   height: 15px;
 307   border: 0px;
 308   padding-left: 0px;
 309   padding-right: 0px;
 310   background: url(sprite.png) 0 -30px no-repeat;
 311   position: absolute;
 312   top: 8px;
 313 }
 314
 315 /* Rules for Creative Commons logo button */
 316
 317 #cclogo {
 318   margin-top: 10px;
 319   margin-bottom: 10px;
 320 }
 321
 322 /* Rules for tabbed navigation bar */
 323
 324 #top-bar {
 325   border-bottom: 1px solid #ccc;
 326   height: 29px;
 327 }
 328
 329 #tabnav {
 330   padding: 0;
 331   margin: 0;
 332   overflow:hidden;
 333 }
 334
 335 #tabnav li {
 336   margin: 0px;
 337   padding: 0px;
 338   display: inline;
 339   list-style-type: none;
 340 }
 341
 342 #tabnav a, #tabnav a:link, #tabnav a:visited {
 343   background: #fff;
 344   font-size: 14px;
 345   line-height: 19px;
 346   font-weight: bold;
 347   padding: 5px 10px;
 348   text-decoration: none;
 349   color: #333;
 350   -webkit-transition: color 200ms ease-in;
 351   -moz-transition: color 200ms ease-in;
 352   -o-transition: color 200ms ease-in;
 353   transition: color 200ms ease-in;
 354 }
 355
 356 body.site-index #tabnav a#viewanchor,
 357 body.site-edit #tabnav a#editanchor,
 358 body.changeset-list #tabnav a#historyanchor,
 359 body.site-export #tabnav a#exportanchor {
 360   border-bottom: 1px solid #aaa;
 361   background: #9ed485;
 362   color: #000;
 363 }
 364
 365 #tabnav a:link:hover, #tabnav a:visited:hover {
 366   text-decoration:underline;
 367 }
 368
 369 #tabnav a:link.disabled,
 370 #tabnav a:visited.disabled,
 371 #tabnav a:link:hover.disabled,
 372 #tabnav a:visited:hover.disabled {
 373   color: #ccc;
 374   cursor: default;
 375 }
 376
 377 #tabnav a:link.disabled:hover,
 378 #tabnav a:visited.disabled:hover,
 379 #tabnav a:link:hover.disabled:hover,
 380 #tabnav a:visited:hover.disabled:hover {
 381   text-decoration: none;
 382 }
 383
 384 .count-number {
 385   padding: 2px 5px;
 386   border-radius: 3px;
 387   background: #eee;
 388   margin: 0 2px;
 389   font-size: 11px;
 390   color: #333;
 391 }
 392
 393 /* Rules for greeting bar in the top right corner */
 394
 395 #greeting {
 396   height: 28px;
 397   margin: 0px;
 398   font-size: 13px;
 399   line-height: 28px;
 400 }
 401
 402 .greeting-bar-unread {
 403   font-weight: bold;
 404 }
 405
 406 /* Rules for the message shown in place of the map when javascript is disabled */
 407
 408 #noscript {
 409   z-index: 20000000;
 410   position: absolute;
 411   top: 15px;
 412 }
 413
 414 /* Rules for OpenLayers maps */
 415
 416 #map {
 417   margin: 0px;
 418   border: 0px;
 419   padding: 0px;
 420 }
 421
 422 .olControlAttribution {
 423   bottom: 15px !important;
 424   left: 0px !important;
 425   right: 0px !important;
 426   text-align: center;
 427 }
 428
 429 #permalink {
 430   z-index: 10000;
 431   position: absolute;
 432   bottom: 0px;
 433   right: 0px;
 434   padding: 5px;
 435   background:#fff;
 436   text-align: right;
 437   font-size: 12px;
 438 }
 439
 440 #permalink a {
 441   padding: 5px;
 442 }
 443
 444 div.olControlZoom a {
 445   margin: 0 !important;
 446 }
 447
 448 div.olControlZoom a.olControlZoomIn {
 449     border-bottom: 0;
 450 }
 451
 452 /* Rules for edit menu */
 453
 454 .menuicon {
 455   padding: 5px;
 456
 457   &:hover {
 458     background: #eee;
 459     text-decoration: none !important;
 460   }
 461 }
 462
 463 .menu {
 464   display: none;
 465   z-index: 10000;
 466   position: absolute;
 467   background-color: #ffffff;
 468   border: 1px solid #cccccc;
 469   border-top: 0px;
 470 }
 471
 472 .menu ul {
 473   margin: 0px;
 474   padding: 0px;
 475 }
 476
 477 .menu li {
 478   padding: 2px 5px;
 479   margin: 0px;
 480   list-style-type: none;
 481   border-top: 1px solid #eee;
 482   white-space: nowrap;
 483 }
 484
 485 /* Rules for attribution text under the main map shown on printouts */
 486
 487 #attribution {
 488   display: none;
 489 }
 490
 491 .attribution_notice {
 492   text-align: center;
 493 }
 494
 495 /* Rules for the popout map sidebar */
 496
 497 #sidebar {
 498   display: none;
 499   position: absolute;
 500   margin: 0px;
 501   padding: 0px;
 502   width: 30%;
 503   top: 0px;
 504   bottom: 0px;
 505 }
 506
 507 #sidebar #sidebar_content {
 508   overflow: auto;
 509   position: absolute;
 510   font-size: 13px;
 511   line-height: 15px;
 512   top: 29px;
 513   bottom: 0px;
 514   left: 0px;
 515   right: 0px;
 516 }
 517
 518 #sidebar .sidebar_title {
 519   margin: 0px;
 520   padding: 3px 6px 4px 6px;
 521   height: 29px;
 522   font-size: 14px;
 523   line-height: 15px;
 524   background: #bbb;
 525 }
 526
 527 /* Rules for the map key which appears in the popout sidebar */
 528
 529 #mapkey h3 {
 530   font-size: 110%;
 531   font-weight: normal;
 532   text-align: center;
 533 }
 534
 535 #mapkey .mapkey-table {
 536   padding-left: 5px;
 537   padding-right: 5px;
 538 }
 539
 540 #mapkey .mapkey-table-key img {
 541   display: block;
 542   margin-left: auto;
 543   margin-right: auto;
 544 }
 545
 546 #mapkey .mapkey-table-value {
 547   font-size: 90%;
 548 }
 549
 550 /* Rules for search results which appear in the popout sidebar */
 551
 552 .search_searching {
 553   margin-top: 5px;
 554   margin-bottom: 5px;
 555 }
 556
 557 .search_results_heading {
 558   margin: 0px;
 559   padding: 2px 5px;
 560   border-bottom: 1px solid #ccc;
 561   font-weight: bold;
 562 }
 563
 564 .search_results_entry {
 565   margin: 0px;
 566   padding: 2px 5px;
 567 }
 568
 569 .search_results_error {
 570   margin: 0px;
 571   padding: 2px 6px 0px;
 572   color: #f00;
 573 }
 574
 575 /* Rules for data browser information which appears in the popout sidebar */
 576
 577 .browse_heading {
 578   margin: 0px;
 579   padding: 3px 6px;
 580   border: 1px solid #ccc;
 581   background: #ddd;
 582 }
 583
 584 .browse_details {
 585   margin: 0px;
 586   padding: 0px 6px;
 587 }
 588
 589 /* Rules for export information which appears in the popout sidebar */
 590
 591 .export_heading {
 592   margin: 0px;
 593   padding: 2px 5px;
 594   border-bottom: 1px solid #ccc;
 595   font-weight: bold;
 596 }
 597
 598 .export_bounds {
 599   width: 100%;
 600   text-align: center;
 601 }
 602
 603 .export_bound {
 604   margin: 5px;
 605 }
 606
 607 .export_details {
 608   padding: 2px 6px;
 609 }
 610
 611 #export_osm {
 612   display: none;
 613 }
 614
 615 #export_mapnik {
 616   display: none;
 617 }
 618
 619 #export_osmarender {
 620   display: none;
 621 }
 622
 623 .export_hint {
 624   padding: 0px 12px;
 625   font-style: italic;
 626 }
 627
 628 .export_buttons {
 629   width: 100%;
 630   text-align: center;
 631 }
 632
 633 /* Rules for the main content area */
 634
 635 #content {
 636   padding: 10px;
 637   margin: 0px;
 638   position: absolute;
 639   bottom: 0px;
 640 }
 641
 642 .site-index #content,
 643 .site-edit #content,
 644 .site-export #content {
 645   border: 0px;
 646   padding: 0px;
 647 }
 648
 649 #slim_container {
 650   width: 100%;
 651 }
 652
 653 #slim_container_content {
 654   max-width: 50em;
 655   background-color: #FFFFFF;
 656   margin: 10px auto;
 657   padding: 3px;
 658   border-radius: 25px;
 659   -moz-border-radius: 25px;
 660   border: 1px solid #e6e6e6;
 661 }
 662
 663 #slim_content {
 664   margin: 10px;
 665   margin-top: 90px;
 666   max-width: 50em;
 667 }
 668
 669 #slim_header {
 670   margin: 10px;
 671   position: absolute;
 672   top: 0px;
 673 }
 674
 675 #slim_header img {
 676   vertical-align: middle;
 677   margin-bottom: 5px;
 678 }
 679
 680 /* Rules for text content pages */
 681
 682 .wide-table {
 683   width: 100%;
 684 }
 685
 686 /* Rules for the home page */
 687
 688 .site-index #map {
 689   position: absolute;
 690   top: 0px;
 691   bottom: 0px;
 692   left: 0px;
 693   right: 0px;
 694 }
 695
 696 .site-export #map {
 697   position: absolute;
 698   top: 0px;
 699   bottom: 0px;
 700   left: 0px;
 701   right: 0px;
 702 }
 703
 704 /* Rules for the edit page */
 705
 706 .site-edit #map {
 707   position: absolute;
 708   top: 0px;
 709   bottom: 0px;
 710   left: 0px;
 711   right: 0px;
 712   overflow: hidden;
 713 }
 714
 715 /* Rules for the changeset list shown by the history tab etc */
 716
 717 #changeset_list_container {
 718   position: relative;
 719 }
 720
 721 #changeset_list {
 722   width: 50%;
 723   font-size: small;
 724   border-collapse: collapse;
 725   border-width: 0px;
 726   margin-top: 1px;
 727   margin-bottom: 1px;
 728 }
 729
 730 #changeset_list td {
 731   vertical-align: top;
 732   padding: 3px;
 733 }
 734
 735 #changeset_list .date {
 736   white-space: nowrap;
 737 }
 738
 739 #changeset_list .user {
 740   white-space: nowrap;
 741 }
 742
 743 #changeset_list .area {
 744   white-space: nowrap;
 745 }
 746
 747 #changeset_list .selected {
 748   background-color: rgb(255, 255, 160);
 749   background-color: rgba(255, 255, 85, 0.5);
 750 }
 751
 752 #changeset_list_map {
 753   position: absolute;
 754   top: 0px;
 755   bottom: 0px;
 756   width: 49%;
 757   min-height: 400px;
 758   border: solid 1px black;
 759 }
 760
 761 /* Rules for the data browser */
 762
 763 #browse_navigation {
 764   width: 250px;
 765   text-align: center;
 766 }
 767
 768 table.browse_details th {
 769   white-space: nowrap;
 770 }
 771
 772 #browse_map {
 773   width: 250px;
 774 }
 775
 776 #browse_map #small_map {
 777   width: 250px;
 778   height: 300px;
 779   border: solid 1px black;
 780 }
 781
 782 #browse_map .geolink {
 783   display: none;
 784 }
 785
 786 /* Rules for the trace list shown by the traces tab etc */
 787
 788 #trace_list {
 789   font-size: small;
 790   border-collapse: collapse;
 791   border-width: 0px;
 792 }
 793
 794 #trace_list .trace_summary {
 795   font-size: 12px;
 796   color: gray;
 797 }
 798
 799 #trace_list .trace_pending {
 800   color: red;
 801 }
 802
 803 #trace_list .trace_public {
 804   color: green;
 805 }
 806
 807 #trace_list .trace_identifiable {
 808   color: green;
 809 }
 810
 811 #trace_list .trace_trackable {
 812   color: red;
 813 }
 814
 815 #trace_list .trace_private {
 816   color: red;
 817 }
 818
 819 /* Rules for the user list */
 820
 821 #user_list {
 822   width: 100%;
 823   font-size: small;
 824 }
 825
 826 #user_list tr {
 827   vertical-align: middle;
 828 }
 829
 830 #user_list p {
 831   margin-top: 0px;
 832   margin-bottom: 0px;
 833 }
 834
 835 #user_list_actions {
 836   margin-top: 10px;
 837 }
 838
 839 /* Rules for the new diary entry page */
 840
 841 .diary_entry div#map {
 842   position: relative;
 843   width: 90%;
 844   height: 400px;
 845   border: 1px solid #ccc;
 846   display: none;
 847 }
 848
 849 /* Rules for the login page */
 850
 851 #login_wrapper div {
 852   margin: 5px;
 853   padding: 15px;
 854   border-radius: 15px;
 855   -moz-border-radius: 15px;
 856 }
 857
 858 #login_login {
 859   background-color: #f5f5ff;
 860   border: 1px solid #f3f3ff;
 861   border-radius: 15px;
 862   -moz-border-radius: 15px;
 863 }
 864
 865 #login_login h1 {
 866   margin-top: 5px;
 867 }
 868
 869 table#login_openid_buttons {
 870   padding-bottom: 10px;
 871 }
 872
 873 #login_openid_buttons td {
 874   padding-left: 10px;
 875   padding-right: 10px;
 876   padding-top: 5px;
 877   padding-bottom: 5px;
 878 }
 879
 880 #login_openid_buttons img {
 881   border: 0;
 882 }
 883
 884 #login_signup form.button-to div {
 885   margin: 0px;
 886   padding: 0px;
 887 }
 888
 889 /* Rules for the account confirmation page */
 890
 891 div#contributorTerms {
 892   border: 1px solid black;
 893   padding: 4px;
 894   overflow: auto;
 895   width: 95%;
 896   height: 400px;
 897 }
 898
 899 div#slim_content div#contributorTerms {
 900   width: auto;
 901 }
 902
 903 div#contributorTerms p#first {
 904   margin-top: 0px;
 905 }
 906
 907 div#contributorTerms p#last {
 908   margin-bottom: 0px;
 909 }
 910
 911 div#contributorTerms ol {
 912   margin-bottom: 0px;
 913 }
 914
 915 div#contributorTerms img {
 916   display: block;
 917   margin-left: auto;
 918   margin-right: auto;
 919   margin-top: 10%;
 920 }
 921
 922 form#termsForm {
 923   width: 95%;
 924   margin-bottom: 3em;
 925 }
 926
 927 div#slim_content form#termsForm {
 928   width: auto;
 929 }
 930
 931 p#contributorGuidance {
 932   background-color: #f5f5ff;
 933   border: 1px solid #f3f3ff;
 934   border-radius: 15px;
 935   -moz-border-radius: 15px;
 936   padding: 10px;
 937 }
 938
 939 /* Rules for the account settings page */
 940
 941 #accountForm {
 942   margin-top: 20px;
 943 }
 944
 945 #accountForm td {
 946   padding-bottom: 10px;
 947 }
 948
 949 #accountForm .user_map {
 950   position: relative;
 951   width: 500px;
 952   height: 400px;
 953   border: 1px solid #ccc;
 954 }
 955
 956 #accountForm td.accountImage {
 957   img {
 958     vertical-align: top;
 959     margin-top: 3px;
 960   }
 961
 962   table {
 963     display: inline-block;
 964
 965     td {
 966       padding-bottom: 0px;
 967     }
 968   }
 969 }
 970
 971 .nohome .location {
 972   display: none;
 973 }
 974
 975 #homerow .message {
 976   display: none;
 977 }
 978
 979 .nohome .message {
 980   display: inline !important;
 981 }
 982
 983 #accountForm input[type=submit] {
 984   margin-top: 15px;
 985 }
 986
 987 /* Rules for the user view */
 988
 989 .user-view .user_map {
 990   position: relative;
 991   width: 400px;
 992   height: 400px;
 993   border: 1px solid #ccc;
 994 }
 995
 996 .user-view .user_map p#no_home_location {
 997   position: absolute;
 998   top: 0px;
 999   bottom: 0px;
1000   width: 90%;
1001   height: 30%;
1002   margin: auto 5%
1003 }
1004
1005 /* Rules for the user map */
1006
1007 .user_map .olControlSimplePanZoom {
1008   display: none;
1009 }
1010
1011 .user_map .olControlZoom {
1012   display: block;
1013 }
1014
1015 /* Rules for user popups on maps */
1016
1017 .user_popup p {
1018   padding-top: 3px;
1019   padding-bottom: 3px;
1020   margin-top: 0px;
1021   margin-bottom: 0px;
1022   margin-left: 55px;
1023   margin-right: 2px;
1024 }
1025
1026 .user_popup img.user_thumbnail {
1027   float: left;
1028 }
1029
1030 /* Rules for message in/out box page */
1031
1032 .messages {
1033   width: 100%;
1034   border-collapse: collapse;
1035   border-spacing: 0px;
1036   border-width: 0px;
1037 }
1038
1039 .messages tbody tr {
1040   border-top: 1px solid #ccc;
1041 }
1042
1043 .messages .inbox-row {
1044   background: #eee;
1045 }
1046
1047 .messages tr td,
1048 .messages tr th {
1049   padding: 0px 5px;
1050 }
1051
1052 .inbox-row .inbox-mark-read {
1053   display: none;
1054 }
1055
1056 .info-line {
1057   border-bottom: 1px solid #ccc;
1058   padding: 5px 0px 4px 0px;
1059 }
1060
1061 .info-line form,
1062 .info-line form div {
1063   display: inline;
1064 }
1065
1066 .info-line .user_thumbnail_tiny {
1067   vertical-align: middle;
1068 }
1069
1070 .right {
1071   float: right;
1072 }
1073
1074 .inbox-row-unread .inbox-mark-unread {
1075   display: none;
1076 }
1077
1078 /* Rules for "flash" notice boxes shown at the top of the content area */
1079
1080 #error {
1081   border: 1px solid red;
1082   padding: 7px;
1083   background-color: #fff0f0;
1084   margin-bottom: 20px;
1085   border-radius: 5px;
1086   -moz-border-radius: 5px;
1087 }
1088
1089 #warning {
1090   border: 1px solid orange;
1091   padding: 7px;
1092   background-color: #fff6f0;
1093   margin-bottom: 20px;
1094   border-radius: 5px;
1095   -moz-border-radius: 5px;
1096 }
1097
1098 #notice {
1099   border: 1px solid green;
1100   padding: 7px;
1101   background-color: #f0fff0;
1102   margin-bottom: 20px;
1103   border-radius: 5px;
1104   -moz-border-radius: 5px;
1105 }
1106
1107 /* Rules for highlighting fields with rails validation errors */
1108
1109 .field_with_errors {
1110   padding: 2px;
1111   background-color: red;
1112   display: table;
1113 }
1114
1115 /* Rules for rails validation error boxes */
1116
1117 #errorExplanation {
1118   width: 400px;
1119   border: 2px solid red;
1120   padding: 7px;
1121   padding-bottom: 12px;
1122   margin-bottom: 20px;
1123   background-color: #f0f0f0;
1124 }
1125
1126 #errorExplanation h2 {
1127   font-weight: bold;
1128   font-size: 12px;
1129   margin: -7px;
1130   background-color: #c00;
1131   color: #fff;
1132 }
1133
1134 #errorExplanation p {
1135   color: #333;
1136   margin-bottom: 0px;
1137   padding: 5px;
1138 }
1139
1140 #errorExplanation ul li {
1141   font-size: 12px;
1142   list-style: square;
1143 }
1144
1145 /* Rules for forms */
1146
1147 .fieldName {
1148   vertical-align: top;
1149   font-weight: bold;
1150   font-size: 12px;
1151   line-height: 20px;
1152 }
1153
1154 .minorNote {
1155   font-size: 0.8em;
1156 }
1157
1158 input[type="text"],
1159 input[type="email"],
1160 input[type="url"],
1161 input[type="password"],
1162 textarea {
1163   border: 1px solid #ccc;
1164 }
1165
1166 /* Rules for user images */
1167
1168 img.user_image {
1169   max-width: 100px;
1170   max-height: 100px;
1171   border: 1px solid #ccc;
1172 }
1173
1174 img.user_thumbnail {
1175   max-width: 50px;
1176   max-height: 100px;
1177   border: 1px solid #ccc;
1178 }
1179
1180 img.user_thumbnail_tiny {
1181   max-width: 25px;
1182   max-height: 25px;
1183   border: 1px solid #ccc;
1184 }
1185
1186 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1187
1188 .nowrap {
1189   white-space: nowrap;
1190 }
1191
1192 /* Rules for geo microformats */
1193
1194 abbr.geo {
1195   border-bottom: none;
1196 }
1197
1198 /* Rules for RSS buttons */
1199
1200 .rsssmall {
1201   position: relative;
1202   top: 4px;
1203 }
1204
1205 /* Rules for doing distinct colour of alternate table rows */
1206
1207 .table0 {
1208   background: #f6f6f6;
1209 }
1210
1211 .table1 {
1212   background: #fff;
1213 }
1214
1215 /* Rules for OpenID logo */
1216
1217 .openid_logo {
1218   vertical-align: text-bottom;
1219   border: 0;
1220 }
1221
1222 /* Rules for rich text editors */
1223
1224 .richtext_container {
1225   white-space: nowrap;
1226
1227   .richtext_content {
1228     display: inline-block;
1229     vertical-align: top;
1230
1231     .richtext_preview {
1232       display: inline-block;
1233       margin-top: 1px;
1234       margin-bottom: 1px;
1235       border: 4px solid #eee;
1236       background-color: #eee;
1237       white-space: normal;
1238
1239       &.loading {
1240         background-image: image-url("loading.gif");
1241         background-repeat: no-repeat;
1242         background-position: center;
1243       }
1244
1245       > :first-child {
1246         margin-top: 0px;
1247       }
1248     }
1249   }
1250
1251   .richtext_help {
1252     display: inline-block;
1253     vertical-align: top;
1254     background-color: #ddd;
1255     padding: 5px 10px 10px 10px;
1256     font-size: 12px;
1257
1258     p {
1259       margin: 0px;
1260     }
1261
1262     th {
1263       vertical-align: top;
1264     }
1265
1266     td {
1267       font-family: fixed;
1268       line-height: 16px;
1269       padding: 0px !important;
1270     }
1271
1272     input.richtext_doedit {
1273       margin-top: 5px !important;
1274     }
1275
1276     input.richtext_dopreview {
1277       margin-top: 5px !important;
1278     }
1279   }
1280 }