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