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