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