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