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