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