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