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