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