825d8719ed2741304bb9622c18b384b63a9e0fa6
[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: 4px 5px 4px 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: 4px 5px 4px 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 .arrow {
370   padding: 5px;
371
372   &:hover {
373     background: #eee;
374     text-decoration: none !important;
375   }
376 }
377
378 .menu {
379   display: none;
380   z-index: 10000;
381   position: absolute;
382   background-color: #ffffff;
383   border: 1px solid #cccccc;
384   border-top: 0;
385 }
386
387 .menu ul {
388   margin: 0;
389   padding: 0;
390 }
391
392 .menu li {
393   padding: 2px 5px;
394   margin: 0;
395   list-style-type: none;
396   border-top: 1px solid #eee;
397   white-space: nowrap;
398 }
399
400 /* Rules for attribution text under the main map shown on printouts */
401
402 #attribution {
403   display: none;
404 }
405
406 .attribution_notice {
407   text-align: center;
408 }
409
410 /* Rules for the popout map sidebar */
411
412 #sidebar {
413   display: none;
414   position: absolute;
415   margin: 0px;
416   padding: 0px;
417   width: 30%;
418   top: 0px;
419   bottom: 0px;
420 }
421
422 #sidebar #sidebar_content {
423   overflow: auto;
424   position: absolute;
425   font-size: 13px;
426   line-height: 15px;
427   top: 29px;
428   bottom: 0px;
429   left: 0px;
430   right: 0px;
431 }
432
433 #sidebar .sidebar_title {
434   margin: 0px;
435   padding: 3px 6px 4px 6px;
436   height: 29px;
437   font-size: 14px;
438   line-height: 15px;
439   background: #bbb;
440 }
441
442 /* Rules for the map key which appears in the popout sidebar */
443
444 #mapkey h3 {
445   font-size: 110%;
446   font-weight: normal;
447   text-align: center;
448 }
449
450 #mapkey .mapkey-table {
451   padding-left: 5px;
452   padding-right: 5px;
453 }
454
455 #mapkey .mapkey-table-key {
456 }
457
458 #mapkey .mapkey-table-value {
459   font-size: 90%;
460 }
461
462 /* Rules for search results which appear in the popout sidebar */
463
464 .search_searching {
465   margin-top: 5px;
466   margin-bottom: 5px;
467 }
468
469 .search_results_heading {
470   margin: 0px;
471   padding: 2px 5px;
472   border-bottom: 1px solid #ccc;
473   font-weight: bold;
474 }
475
476 .search_results_entry {
477   margin: 0px;
478   padding: 2px 5px;
479 }
480
481 .search_results_error {
482   margin: 0px;
483   padding: 2px 6px 0px;
484   color: #f00;
485 }
486
487 /* Rules for data browser information which appears in the popout sidebar */
488
489 .browse_heading {
490   margin: 0px;
491   padding: 3px 6px;
492   border: 1px solid #ccc;
493   background: #ddd;
494 }
495
496 .browse_details {
497   margin: 0px;
498   padding: 0px 6px;
499 }
500
501 /* Rules for export information which appears in the popout sidebar */
502
503 .export_heading {
504   margin: 0px;
505   padding: 2px 5px;
506   border-bottom: 1px solid #ccc;
507   font-weight: bold;
508 }
509
510 .export_bounds {
511   width: 100%;
512   text-align: center;
513 }
514
515 .export_bound {
516   margin: 5px;
517 }
518
519 .export_details {
520   padding: 2px 6px;
521 }
522
523 #export_osm {
524   display: none;
525 }
526
527 #export_mapnik {
528   display: none;
529 }
530
531 #export_osmarender {
532   display: none;
533 }
534
535 .export_hint {
536   padding: 0px 12px;
537   font-style: italic;
538 }
539
540 .export_buttons {
541   width: 100%;
542   text-align: center;
543 }
544
545 /* Rules for the main content area */
546
547 #content {
548   padding: 10px;
549   margin: 0px;
550   position: absolute;
551   bottom: 0px;
552 }
553
554 #content.site_index,
555 #content.site_edit,
556 #content.site_export {
557   border: 0px;
558   padding: 0px;
559 }
560
561 #slim_container {
562   width: 100%;
563 }
564
565 #slim_container_content {
566   max-width: 50em;
567   background-color: #FFFFFF;
568   margin: 10px auto;
569   padding: 3px;
570   border-radius: 25px;
571   -moz-border-radius: 25px;
572   border: 1px solid #e6e6e6;
573 }
574
575 #slim_content {
576   margin: 10px;
577   margin-top: 90px;
578   max-width: 50em;
579 }
580
581 #slim_header {
582   margin: 10px;
583   position: absolute;
584   top: 0px;
585 }
586
587 #slim_header img {
588   vertical-align: middle;
589   margin-bottom: 5px;
590 }
591
592 /* Rules for the home page */
593
594 .site_index #map {
595   position: absolute;
596   top: 0px;
597   bottom: 0px;
598   left: 0px;
599   right: 0px;
600 }
601
602 .site_export #map {
603   position: absolute;
604   top: 0px;
605   bottom: 0px;
606   left: 0px;
607   right: 0px;
608 }
609
610 /* Rules for the edit page */
611
612 .site_edit #map {
613   position: absolute;
614   top: 0px;
615   bottom: 0px;
616   left: 0px;
617   right: 0px;
618 }
619
620 /* Rules for the changeset list shown by the history tab etc */
621
622 #changeset_list_container {
623   position: relative;
624 }
625
626 #changeset_list {
627   width: 50%;
628   font-size: small;
629   border-collapse: collapse;
630   border-width: 0px;
631   margin-top: 1px;
632   margin-bottom: 1px;
633 }
634
635 #changeset_list td {
636   vertical-align: top;
637   padding: 3px;
638 }
639
640 #changeset_list .date {
641   white-space: nowrap;
642 }
643
644 #changeset_list .user {
645   white-space: nowrap;
646 }
647
648 #changeset_list .area {
649   white-space: nowrap;
650 }
651
652 #changeset_list .selected {
653   background-color: rgb(255, 255, 160);
654   background-color: rgba(255, 255, 85, 0.5);
655 }
656
657 #changeset_list_map {
658   position: absolute;
659   top: 0px;
660   bottom: 0px;
661   width: 49%;
662   min-height: 400px;
663   border: solid 1px black;
664 }
665
666 /* Rules for the data browser */
667
668 #browse_navigation {
669   width: 250px;
670   text-align: center;
671 }
672
673 table.browse_details th {
674   white-space: nowrap;
675 }
676
677 #browse_map {
678   width: 250px;
679 }
680
681 #browse_map #small_map {
682   width: 250px;
683   height: 300px;
684   border: solid 1px black;
685 }
686
687 #browse_map .geolink {
688   display: none;
689 }
690
691 /* Rules for the trace list shown by the traces tab etc */
692
693 #trace_list {
694   font-size: small;
695   border-collapse: collapse;
696   border-width: 0px;
697 }
698
699 #trace_list .trace_summary {
700   font-size: 12px;
701   color: gray;
702 }
703
704 #trace_list .trace_pending {
705   color: red;
706 }
707
708 #trace_list .trace_public {
709   color: green;
710 }
711
712 #trace_list .trace_identifiable {
713   color: green;
714 }
715
716 #trace_list .trace_trackable {
717   color: red;
718 }
719
720 #trace_list .trace_private {
721   color: red;
722 }
723
724 /* Rules for the user list */
725
726 #user_list {
727   width: 100%;
728   font-size: small;
729 }
730
731 #user_list tr {
732   vertical-align: middle;
733 }
734
735 #user_list p {
736   margin-top: 0px;
737   margin-bottom: 0px;
738 }
739
740 #user_list_actions {
741   margin-top: 10px;
742 }
743
744 /* Rules for the new diary entry page */
745
746 .diary_entry div#map {
747   position: relative;
748   width: 90%;
749   height: 400px;
750   border: 1px solid #ccc;
751   display: none;
752 }
753
754 /* Rules for the login page */
755
756 #login_wrapper div {
757   margin: 5px;
758   padding: 15px;
759   border-radius: 15px;
760   -moz-border-radius: 15px;
761 }
762
763 #login_login {
764   background-color: #f5f5ff;
765   border: 1px solid #f3f3ff;
766   border-radius: 15px;
767   -moz-border-radius: 15px;
768 }
769
770 #login_login h1 {
771   margin-top: 5px;
772 }
773
774 table#login_openid_buttons {
775   padding-bottom: 10px;
776 }
777
778 #login_openid_buttons td {
779   padding-left: 10px;
780   padding-right: 10px;
781   padding-top: 5px;
782   padding-bottom: 5px;
783 }
784
785 #login_openid_buttons img {
786   border: 0;
787 }
788
789 #login_signup form.button-to div {
790   margin: 0px;
791   padding: 0px;
792 }
793
794 /* Rules for the account confirmation page */
795
796 div#contributorTerms {
797   border: 1px solid black;
798   padding: 4px;
799   overflow: auto;
800   width: 95%;
801   height: 400px;
802 }
803
804 div#slim_content div#contributorTerms {
805   width: auto;
806 }
807
808 div#contributorTerms p#first {
809   margin-top: 0px;
810 }
811
812 div#contributorTerms p#last {
813   margin-bottom: 0px;
814 }
815
816 div#contributorTerms ol {
817   margin-bottom: 0px;
818 }
819
820 div#contributorTerms img {
821   display: block;
822   margin-left: auto;
823   margin-right: auto;
824   margin-top: 10%;
825 }
826
827 form#termsForm {
828   width: 95%;
829   margin-bottom: 3em;
830 }
831
832 div#slim_content form#termsForm {
833   width: auto;
834 }
835
836 p#contributorGuidance {
837   background-color: #f5f5ff;
838   border: 1px solid #f3f3ff;
839   border-radius: 15px;
840   -moz-border-radius: 15px;
841   padding: 10px;
842 }
843
844 /* Rules for the account settings page */
845
846 #accountForm td {
847   padding-bottom: 10px;
848 }
849
850 #accountForm .user_map {
851   position: relative;
852   width: 500px;
853   height: 400px; 
854   border: 1px solid #ccc;
855 }
856
857 #accountImage td {
858   padding-bottom: 0px;
859 }
860
861 .nohome .location {
862   display: none;
863 }
864
865 #homerow .message {
866   display: none;
867 }
868
869 .nohome .message {
870   display: inline !important;
871 }
872
873 #accountForm input[type=submit] {
874   margin-top: 15px;
875 }
876
877 /* Rules for the user view */
878
879 .user_view .user_map {
880   position: relative;
881   width: 400px;
882   height: 400px; 
883   border: 1px solid #ccc;
884 }
885
886 .user_view .user_map p#no_home_location {
887   position: absolute;
888   top: 0px;
889   bottom: 0px;
890   width: 90%;
891   height: 30%;
892   margin: auto 5%
893 }
894
895 /* Rules for the user map */
896
897 .user_map .olControlPanZoomBar {
898   display: none;
899 }
900
901 .user_map .olControlPanZoom {
902   display: block;
903 }
904
905 /* Rules for user popups on maps */
906
907 .user_popup p {
908   padding-top: 3px;
909   padding-bottom: 3px;
910   margin-top: 0px;
911   margin-bottom: 0px;
912   margin-left: 55px;
913   margin-right: 2px;
914 }
915
916 .user_popup img.user_thumbnail {
917   float: left;
918 }
919
920 /* Rules for message in/out box page */
921
922 #messages {
923   border: 1px solid #ccc;
924 }
925
926 .inbox-row-unread .inbox-subject {
927   font-weight: bold;
928 }
929
930 /* Rules for "flash" notice boxes shown at the top of the content area */
931
932 #error {
933   border: 1px solid red;
934   padding: 7px;
935   background-color: #fff0f0;
936   margin-bottom: 20px;
937   border-radius: 5px;
938   -moz-border-radius: 5px;
939 }
940
941 #warning {
942   border: 1px solid orange;
943   padding: 7px;
944   background-color: #fff6f0;
945   margin-bottom: 20px;
946   border-radius: 5px;
947   -moz-border-radius: 5px;
948 }
949
950 #notice {
951   border: 1px solid green;
952   padding: 7px;
953   background-color: #f0fff0;
954   margin-bottom: 20px;
955   border-radius: 5px;
956   -moz-border-radius: 5px;
957 }
958
959 /* Rules for highlighting fields with rails validation errors */
960
961 .field_with_errors {
962   padding: 2px;
963   background-color: red;
964   display: table;
965 }
966
967 /* Rules for rails validation error boxes */
968
969 #errorExplanation {
970   width: 400px;
971   border: 2px solid red;
972   padding: 7px;
973   padding-bottom: 12px;
974   margin-bottom: 20px;
975   background-color: #f0f0f0;
976 }
977
978 #errorExplanation h2 {
979   font-weight: bold;
980   font-size: 12px;
981   margin: -7px;
982   background-color: #c00;
983   color: #fff;
984 }
985
986 #errorExplanation p {
987   color: #333;
988   margin-bottom: 0px;
989   padding: 5px;
990 }
991
992 #errorExplanation ul li {
993   font-size: 12px;
994   list-style: square;
995 }
996
997 /* Rules for forms */
998
999 .fieldName {
1000   vertical-align: top;
1001   font-weight: bold;
1002   font-size: 12px;
1003   line-height: 20px;
1004 }
1005
1006 .minorNote {
1007   font-size: 0.8em;
1008 }
1009
1010 input[type="text"],
1011 input[type="email"],
1012 input[type="url"],
1013 input[type="password"],
1014 textarea {
1015   border: 1px solid #888;
1016 }
1017
1018 /* Rules for user images */
1019
1020 img.user_image {
1021   max-width: 100px;
1022   max-height: 100px;
1023   border: 1px solid black;
1024 }
1025
1026 img.user_thumbnail {
1027   max-width: 50px;
1028   max-height: 100px;
1029   border: 1px solid black;
1030 }
1031
1032 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1033
1034 .nowrap {
1035   white-space: nowrap;
1036 }
1037
1038 /* Rules for geo microformats */
1039
1040 abbr.geo {
1041   border-bottom: none;
1042 }
1043
1044 /* Rules for RSS buttons */
1045
1046 .rsssmall {
1047   position: relative;
1048   top: 4px;
1049 }
1050
1051 /* Rules for doing distinct colour of alternate table rows */
1052
1053 .table0 {
1054   background: #f6f6f6;
1055 }
1056
1057 .table1 {
1058   background: #fff;
1059 }
1060
1061 /* Rules for OpenID logo */
1062
1063 .openid_logo {
1064   vertical-align: text-bottom;
1065   border: 0;
1066 }
1067
1068 /* Rules for rich text editors */
1069
1070 .richtext_container {
1071   white-space: nowrap;
1072
1073   .richtext_content {
1074     display: inline-block;
1075     vertical-align: top;
1076
1077     .richtext_preview {
1078       display: inline-block;
1079       margin-top: 1px;
1080       margin-bottom: 1px;
1081       border: 4px solid #eee;
1082       background-color: #eee;
1083       white-space: normal;
1084
1085       &.loading {
1086         background-image: image-url("loading.gif");
1087         background-repeat: no-repeat;
1088         background-position: center;
1089       }
1090
1091       > :first-child {
1092         margin-top: 0px;
1093       }
1094     }
1095   }
1096
1097   .richtext_help {
1098     display: inline-block;
1099     vertical-align: top;
1100     background-color: #ddd;
1101     padding: 5px 10px 10px 10px;
1102     font-size: 12px;
1103
1104     p {
1105       margin: 0px;
1106     }
1107
1108     th {
1109       vertical-align: top;
1110     }
1111
1112     td {
1113       font-family: fixed;
1114       line-height: 16px;
1115       padding: 0px !important;
1116     }
1117
1118     input.richtext_doedit {
1119       margin-top: 5px !important;
1120     }
1121
1122     input.richtext_dopreview {
1123       margin-top: 5px !important;
1124     }
1125   }
1126 }