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