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