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