]> git.openstreetmap.org Git - rails.git/blob - public/stylesheets/common.css
Use a list for the main menu, rather than br-separated links
[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: 170px;
171   padding: 0px;
172 }
173
174 /*
175  * Rules for "optional boxes" which appear in the left sidebar on
176  * certain pages. Current users are the seach box on the main page
177  * and the tag cloud on the traces pages.
178  */
179
180 .optionalbox {
181   width: 170px;
182   min-width: 170px;
183   margin: 5px;
184   padding: 5px;
185   border: 1px solid #ccc;
186   left: 0px;
187   line-height: 1.2em;
188   text-align: left;
189   font-size: 12px;
190   background: #eee;
191   border-radius: 5px;
192   -moz-border-radius: 5px;
193 }
194
195 .optionalbox h1 {
196   font-size: 14px;
197   font-weight: bold;
198   line-height: 22px;
199   margin: 0px;
200   vertical-align: bottom;
201 }
202
203 /* Rules for the search box */
204
205 .whereami {
206   line-height: 22px;
207   vertical-align: bottom;
208   float: right;
209 }
210
211 .search_form {
212   height: 16px;
213   padding-bottom: 6px;
214 }
215
216 #search_field form {
217   width: 100%;
218   margin: 0px;
219   padding: 0px;
220 }
221
222 #search_field input[type="text"] {
223   width: 136px;
224 }
225
226 #search_field input[type="submit"] {
227   width: 26px;
228 }
229
230 .search_help {
231   font-size: 10px;
232   line-height: 1em;
233   margin-top: 3px;
234   margin-bottom: 0px;
235 }
236
237 /* Rules for donation request box */
238
239 .donate {
240   width: 170px;
241   margin: 5px;
242   padding: 5px;
243   border: 1px solid #ccc;
244   background: #cbeea7;
245   line-height: 1.2em;
246   text-align: center;
247   font-size: 14px;
248   border-radius: 5px;
249   -moz-border-radius: 5px;
250 }
251
252 /* Rules for Creative Commons logo button */
253
254 #cclogo {
255   margin-top: 10px;
256   margin-bottom: 10px;
257 }
258
259 /* Rules for tabbed navigation bar */
260
261 #tabnav
262 {
263   height: 20px;
264   margin: 0px;
265   padding-left: 215px;
266   padding-top: 5px;
267   background: url('../images/tab_bottom.gif') repeat-x bottom;
268 }
269
270 #tabnav li
271 {
272   margin: 0px; 
273   padding: 0px;
274   display: inline;
275   list-style-type: none;
276 }
277
278 #tabnav a, #tabnav a:link, #tabnav a:visited 
279 {
280   float: left;
281   background: #f3f3f3;
282   font-size: 13px;
283   line-height: 14px;
284   font-weight: bold;
285   padding: 2px 10px;
286   margin-right: 4px;
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   float: right;
319   height: 20px;
320   margin: 0px;
321   padding-right: 10px;
322   padding-top: 5px;
323   font-size: 13px;
324   line-height: 14px;
325   background: url('../images/tab_bottom.gif') repeat-x bottom;
326 }
327
328 .greeting-bar-unread {
329   font-weight: bold;
330 }
331
332 /* Rules for the message shown in place of the map when javascript is disabled */
333
334 #noscript {
335   z-index: 20000000;
336   position: absolute;
337   top: 15px;
338   left: 15px
339 }
340
341 /* Rules for OpenLayers maps */
342
343 #map {
344   position: absolute;
345   border: 1px solid black;
346   margin: 0px; 
347   padding: 0px;
348   left: 0px;
349   right: 2px;
350   top: 0px;
351   bottom: 0px;
352 }
353
354 .olControlAttribution {
355   display: none !important;
356 }
357
358 #permalink {
359   z-index: 10000;
360   position: absolute;
361   bottom: 15px;
362   right: 15px;
363   font-size: smaller;
364   text-align: right;
365 }
366
367 /* Rules for edit menu */
368
369 #editmenu {
370   display: none;
371   z-index: 10000;
372   position: absolute;
373   background-color: #ffffff;
374   border: 1px solid black;
375 }
376
377 #editmenu ul {
378   margin-top: 10px;
379   margin-bottom: 10px;
380   padding-left: 10px;
381   padding-right: 10px;
382 }
383
384 #editmenu li {
385   list-style-type: none;
386 }
387
388 /* Rules for attribution text under the main map shown on printouts */
389
390 #attribution {
391   display: none;
392 }
393
394 /* Rules for the popout map sidebar */
395
396 #sidebar {
397   display: none;
398   position: absolute;
399   border: 1px solid black;
400   margin: 0px;
401   padding: 0px;
402   width: 30%;
403   left: 0px;
404   top: 0px;
405   bottom: 0px;
406 }
407
408 #sidebar_content {
409   overflow: auto;
410   position: absolute;
411   font-size: 13px;
412   line-height: 14px;
413   top: 29px;
414   bottom: 0px;
415   left: 0px;
416   right: 0px;
417 }
418
419 .sidebar_title {
420   margin: 0px;
421   padding: 3px 6px;
422   height: 29px;
423   font-size: 14px;
424   line-height: 15px;
425   border-bottom: 1px solid black;
426   background: #bbb;
427 }
428
429 /* Rules for the map key which appears in the popout sidebar */
430
431 #mapkey h3 {
432     font-size: 110%;
433     font-weight: normal;
434     text-align: center;
435 }
436
437 #mapkey .mapkey-table {
438     padding-left: 5px;
439     padding-right: 5px;
440 }
441
442 #mapkey .mapkey-table-key {
443 }
444
445 #mapkey .mapkey-table-value {
446     font-size: 90%;
447 }
448
449 /* Rules for search results which appear in the popout sidebar */
450
451 .search_searching {
452   margin-top: 5px;
453   margin-bottom: 5px;
454 }
455
456 .search_results_heading {
457   margin: 0px;
458   padding: 3px 6px;
459   border: 1px solid #ccc;
460   background: #ddd;
461 }
462
463 .search_results_entry {
464   margin: 0px;
465   padding: 2px 6px;
466 }
467
468 .search_results_error {
469   margin: 0px;
470   padding: 2px 6px 0px;
471   color: #f00;
472 }
473
474 /* Rules for data browser information which appears in the popout sidebar */
475
476 .browse_heading {
477   margin: 0px;
478   padding: 3px 6px;
479   border: 1px solid #ccc;
480   background: #ddd;
481 }
482
483 .browse_details {
484   margin: 0px;
485   padding: 0px 6px;
486 }
487
488 /* Rules for export information which appears in the popout sidebar */
489
490 .export_heading {
491   margin: 0px;
492   padding: 3px 6px;
493   border: 1px solid #ccc;
494   background: #ddd;
495 }
496
497 .export_bounds {
498   width: 100%;
499   text-align: center;
500 }
501
502 .export_bound {
503   margin: 5px;
504 }
505
506 .export_details {
507   padding: 2px 6px;
508 }
509
510 #export_osm {
511   display: none;
512 }
513
514 #export_mapnik {
515   display: none;
516 }
517
518 #export_osmarender {
519   display: none;
520 }
521
522 .export_hint {
523   padding: 0px 12px;
524   font-style: italic;
525 }
526
527 .export_buttons {
528   width: 100%;
529   text-align: center;
530 }
531
532 /* Rules for the main content area */
533
534 #content {
535   padding: 0px;
536   margin: 0px;
537   position: absolute; 
538   right: 10px;
539   bottom: 10px;
540   line-height: 1.2em;
541   text-align: left;
542 }
543
544 /* Rules for the changeset list shown by the history tab etc */
545
546 #changeset_list, #keyvalue {
547   width: 100%;
548   font-size: small;
549   text-align: left;
550   border-collapse: collapse;
551   border-width: 0px;
552 }
553
554 #changeset_list .date {
555   white-space: nowrap;
556 }
557
558 #changeset_list .user {
559   white-space: nowrap;
560 }
561
562 #changeset_list .area {
563   white-space: nowrap;
564 }
565
566 #changeset_list.th {
567   font-weight: bold;
568 }
569
570 /* Rules for the data browser */
571
572 #browse_navigation {
573   float: right;
574   width: 250px;
575   text-align: center;
576   margin-left: 10px;
577 }
578
579 #browse_map {
580   float: right;
581   width: 250px;
582   text-align: right;
583   margin-left: 10px;
584 }
585
586 #browse_map #small_map {
587   width: 250px;
588   height: 300px;
589   border: solid 1px black;
590 }
591
592 /* Rules for the trace list shown by the traces tab etc */
593
594 #trace_list {
595   font-size: small;
596   text-align: left;
597   border-collapse: collapse;
598   border-width: 0px;
599 }
600
601 #trace_list .trace_summary {
602   font-size: 12px;
603   color: gray;
604 }
605
606 /* Rules for the user list */
607
608 #user_list {
609   width: 100%;
610   font-size: small;
611 }
612
613 #user_list tr {
614   vertical-align: middle;
615 }
616
617 #user_list p {
618   margin-top: 0px;
619   margin-bottom: 0px;
620 }
621
622 #user_list_actions {
623   float: right;
624   margin-top: 10px;
625 }
626
627 /* Rules for the account confirmation page */
628
629 div#contributorTerms {
630   border: 1px solid black;
631   padding: 4px;
632   overflow: auto;
633   width: 80%;
634   height: 60%;
635 }
636
637 div#contributorTerms p#first {
638   margin-top: 0px;
639 }
640
641 div#contributorTerms p#last {
642   margin-bottom: 0px;
643 }
644
645 div#contributorTerms ol {
646   margin-bottom: 0px;
647 }
648
649 div#contributorTerms img {
650   display: block;
651   margin-left: auto;
652   margin-right: auto;
653   margin-top: 10%;
654 }
655
656 form#termsForm {
657   width: 80%;
658 }
659
660 form#termsForm div#buttons {
661   float: right;
662 }
663
664 form#termsForm input#agree {
665   margin-left: 50px;
666 }
667
668 /* Rules for the account settings page */
669
670 #accountForm td {
671   padding-bottom: 10px;
672 }
673
674 #accountImage td {
675   padding-bottom: 0px;
676 }
677
678 .nohome .location {
679   display: none;
680 }
681
682 #homerow .message {
683   display: none;
684 }
685
686 .nohome .message {
687   display: inline !important;
688 }
689
690 /* Rules for the user map */
691
692 .user_map .olControlPanZoomBar {
693   display: none;
694 }
695
696 .user_map .olControlPanZoom {
697   display: block;
698 }
699
700 /* Rules for user popups on maps */
701
702 .user_popup p {
703   padding-top: 3px;
704   padding-bottom: 3px;
705   margin-top: 0px;
706   margin-bottom: 0px;
707   margin-left: 55px;
708   margin-right: 2px;
709 }
710
711 /* Rules for message in/out box page */
712
713 #messages {
714   border: 1px solid #ccc;
715 }
716
717 .inbox-row-unread .inbox-subject {
718   font-weight: bold;
719 }
720
721 /* Rules for "flash" notice boxes shown at the top of the content area */
722
723 #error {
724   border: 1px solid red;
725   padding: 7px;
726   background-color: #fff0f0;
727   margin-bottom: 20px;
728 }
729
730 #warning {
731   border: 1px solid orange;
732   padding: 7px;
733   background-color: #fff6f0;
734   margin-bottom: 20px;
735 }
736
737 #notice {
738   border: 1px solid green;
739   padding: 7px;
740   background-color: #f0fff0;
741   margin-bottom: 20px;
742 }
743
744 /* Rules for highlighting fields with rails validation errors */
745
746 .fieldWithErrors {
747   padding: 2px;
748   background-color: red;
749   display: table;
750 }
751
752 /* Rules for rails validation error boxes */
753
754 #errorExplanation {
755   width: 400px;
756   border: 2px solid red;
757   padding: 7px;
758   padding-bottom: 12px;
759   margin-bottom: 20px;
760   background-color: #f0f0f0;
761 }
762
763 #errorExplanation h2 {
764   text-align: left;
765   font-weight: bold;
766   padding: 5px 5px 5px 15px;
767   font-size: 12px;
768   margin: -7px;
769   background-color: #c00;
770   color: #fff;
771 }
772
773 #errorExplanation p {
774   color: #333;
775   margin-bottom: 0px;
776   padding: 5px;
777 }
778
779 #errorExplanation ul li {
780   font-size: 12px;
781   list-style: square;
782 }
783
784 /* Rules for forms */
785
786 .fieldName {
787   text-align: right;
788   font-weight: bold;
789 }
790
791 .minorNote {
792   font-size: 0.8em;
793 }
794
795 input[type="text"], input[type="password"], textarea {
796   border: 1px solid black;
797 }
798
799 input[type="submit"] {
800   border: 1px solid black;
801 }
802
803 /* Rules for user images */
804
805 img.user_image {
806   max-width: 100px;
807   max-height: 100px;
808   border: 1px solid black;
809 }
810
811 img.user_thumbnail {
812   max-width: 50px;
813   max-height: 100px;
814   border: 1px solid black;
815 }
816
817 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
818
819 .nowrap {
820   white-space: nowrap;
821 }
822
823 /* Rules for geo microformats */
824
825 abbr.geo {
826   border-bottom: none;
827 }
828
829 /* Rules for RSS buttons */
830
831 .rsssmall {
832   position: relative;
833   top: 4px;
834 }
835
836 /* Rules for doing distinct colour of alternate table rows */
837
838 .table0 { 
839   background: #f6f6f6;
840 }
841
842 .table1 { 
843   background: #fff;
844 }