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