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