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