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