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