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