2a06085b33d7e747e9874838ff789a1070062c91
[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 #browse_map {
655   width: 250px;
656 }
657
658 #browse_map #small_map {
659   width: 250px;
660   height: 300px;
661   border: solid 1px black;
662 }
663
664 #browse_map .geolink {
665   display: none;
666 }
667
668 /* Rules for the trace list shown by the traces tab etc */
669
670 #trace_list {
671   font-size: small;
672   border-collapse: collapse;
673   border-width: 0px;
674 }
675
676 #trace_list .trace_summary {
677   font-size: 12px;
678   color: gray;
679 }
680
681 #trace_list .trace_pending {
682   color: red;
683 }
684
685 #trace_list .trace_public {
686   color: green;
687 }
688
689 #trace_list .trace_identifiable {
690   color: green;
691 }
692
693 #trace_list .trace_trackable {
694   color: red;
695 }
696
697 #trace_list .trace_private {
698   color: red;
699 }
700
701 /* Rules for the user list */
702
703 #user_list {
704   width: 100%;
705   font-size: small;
706 }
707
708 #user_list tr {
709   vertical-align: middle;
710 }
711
712 #user_list p {
713   margin-top: 0px;
714   margin-bottom: 0px;
715 }
716
717 #user_list_actions {
718   margin-top: 10px;
719 }
720
721 /* Rules for the new diary entry page */
722
723 .diary_entry_new div#map {
724   position: relative;
725   width: 90%;
726   height: 400px;
727   display: none;
728 }
729
730 /* Rules for the login page */
731
732 #login_wrapper div {
733   margin: 5px;
734   padding: 15px;
735   border-radius: 15px;
736   -moz-border-radius: 15px;
737 }
738
739 #login_login {
740   background-color: #f5f5ff;
741   border: 1px solid #f3f3ff;
742   border-radius: 15px;
743   -moz-border-radius: 15px;
744 }
745
746 #login_login h1 {
747   margin-top: 5px;
748 }
749
750 table#login_openid_buttons {
751   padding-bottom: 10px;
752 }
753
754 #login_openid_buttons td {
755   padding-left: 10px;
756   padding-right: 10px;
757   padding-top: 5px;
758   padding-bottom: 5px;
759 }
760
761 #login_openid_buttons img {
762   border: 0;
763 }
764
765 #login_signup form.button-to div {
766   margin: 0px;
767   padding: 0px;
768 }
769
770 /* Rules for the account confirmation page */
771
772 div#contributorTerms {
773   border: 1px solid black;
774   padding: 4px;
775   overflow: auto;
776   width: 95%;
777   height: 400px;
778 }
779
780 div#slim_content div#contributorTerms {
781   width: auto;
782 }
783
784 div#contributorTerms p#first {
785   margin-top: 0px;
786 }
787
788 div#contributorTerms p#last {
789   margin-bottom: 0px;
790 }
791
792 div#contributorTerms ol {
793   margin-bottom: 0px;
794 }
795
796 div#contributorTerms img {
797   display: block;
798   margin-left: auto;
799   margin-right: auto;
800   margin-top: 10%;
801 }
802
803 form#termsForm {
804   width: 95%;
805   margin-bottom: 3em;
806 }
807
808 div#slim_content form#termsForm {
809   width: auto;
810 }
811
812 p#contributorGuidance {
813   background-color: #f5f5ff;
814   border: 1px solid #f3f3ff;
815   border-radius: 15px;
816   -moz-border-radius: 15px;
817   padding: 10px;
818 }
819
820 /* Rules for the account settings page */
821
822 #accountForm td {
823   padding-bottom: 10px;
824 }
825
826 #accountForm .user_map {
827   position: relative;
828   width: 500px;
829   height: 400px; 
830 }
831
832 #accountImage td {
833   padding-bottom: 0px;
834 }
835
836 .nohome .location {
837   display: none;
838 }
839
840 #homerow .message {
841   display: none;
842 }
843
844 .nohome .message {
845   display: inline !important;
846 }
847
848 #accountForm input[type=submit] {
849   margin-top: 15px;
850 }
851
852 /* Rules for the user view */
853
854 .user_view .user_map {
855   position: relative;
856   width: 400px;
857   height: 400px; 
858 }
859
860 .user_view .user_map p#no_home_location {
861   position: absolute;
862   top: 0px;
863   bottom: 0px;
864   width: 90%;
865   height: 30%;
866   margin: auto 5%
867 }
868
869 /* Rules for the user map */
870
871 .user_map .olControlPanZoomBar {
872   display: none;
873 }
874
875 .user_map .olControlPanZoom {
876   display: block;
877 }
878
879 /* Rules for user popups on maps */
880
881 .user_popup p {
882   padding-top: 3px;
883   padding-bottom: 3px;
884   margin-top: 0px;
885   margin-bottom: 0px;
886   margin-left: 55px;
887   margin-right: 2px;
888 }
889
890 .user_popup img.user_thumbnail {
891   float: left;
892 }
893
894 /* Rules for message in/out box page */
895
896 #messages {
897   border: 1px solid #ccc;
898 }
899
900 .inbox-row-unread .inbox-subject {
901   font-weight: bold;
902 }
903
904 /* Rules for "flash" notice boxes shown at the top of the content area */
905
906 #error {
907   border: 1px solid red;
908   padding: 7px;
909   background-color: #fff0f0;
910   margin-bottom: 20px;
911   border-radius: 5px;
912   -moz-border-radius: 5px;
913 }
914
915 #warning {
916   border: 1px solid orange;
917   padding: 7px;
918   background-color: #fff6f0;
919   margin-bottom: 20px;
920   border-radius: 5px;
921   -moz-border-radius: 5px;
922 }
923
924 #notice {
925   border: 1px solid green;
926   padding: 7px;
927   background-color: #f0fff0;
928   margin-bottom: 20px;
929   border-radius: 5px;
930   -moz-border-radius: 5px;
931 }
932
933 /* Rules for highlighting fields with rails validation errors */
934
935 .fieldWithErrors {
936   padding: 2px;
937   background-color: red;
938   display: table;
939 }
940
941 /* Rules for rails validation error boxes */
942
943 #errorExplanation {
944   width: 400px;
945   border: 2px solid red;
946   padding: 7px;
947   padding-bottom: 12px;
948   margin-bottom: 20px;
949   background-color: #f0f0f0;
950 }
951
952 #errorExplanation h2 {
953   font-weight: bold;
954   font-size: 12px;
955   margin: -7px;
956   background-color: #c00;
957   color: #fff;
958 }
959
960 #errorExplanation p {
961   color: #333;
962   margin-bottom: 0px;
963   padding: 5px;
964 }
965
966 #errorExplanation ul li {
967   font-size: 12px;
968   list-style: square;
969 }
970
971 /* Rules for forms */
972
973 .fieldName {
974   vertical-align: top;
975   font-weight: bold;
976 }
977
978 .minorNote {
979   font-size: 0.8em;
980 }
981
982 input[type="text"], input[type="password"], textarea {
983   border: 1px solid black;
984 }
985
986 input[type="submit"] {
987   border: 1px solid black;
988 }
989
990 /* Rules for user images */
991
992 img.user_image {
993   max-width: 100px;
994   max-height: 100px;
995   border: 1px solid black;
996 }
997
998 img.user_thumbnail {
999   max-width: 50px;
1000   max-height: 100px;
1001   border: 1px solid black;
1002 }
1003
1004 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1005
1006 .nowrap {
1007   white-space: nowrap;
1008 }
1009
1010 /* Rules for geo microformats */
1011
1012 abbr.geo {
1013   border-bottom: none;
1014 }
1015
1016 /* Rules for RSS buttons */
1017
1018 .rsssmall {
1019   position: relative;
1020   top: 4px;
1021 }
1022
1023 /* Rules for doing distinct colour of alternate table rows */
1024
1025 .table0 { 
1026   background: #f6f6f6;
1027 }
1028
1029 .table1 { 
1030   background: #fff;
1031 }
1032
1033 /* Rules for OpenID logo */
1034
1035 .openid_logo {
1036   vertical-align: text-bottom;
1037   border: 0;
1038 }