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