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