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