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