Merge branch 'master' into openstreetbugs
[rails.git] / app / assets / stylesheets / common.css.scss
1 /* Styles common to large and small screens */
2
3 /* Default rules for the body of every page */
4
5 body {
6   font-family: 'Helvetica Neue',Arial,sans-serif;
7   font-size: 14px;
8   line-height: 20px;
9   color: #222;
10   background-color: #fff;
11   margin: 0px;
12   padding: 0px;
13 }
14
15 body.slim {
16   background-color: #f0f0f0;
17 }
18
19 /* Rules for links */
20
21 a {
22   color: #00f;
23   text-decoration: none;
24 }
25
26 a:hover {
27   text-decoration: underline;
28 }
29
30 /* Rules for horizontal lines */
31
32 hr {
33   border: none;
34   background-color: #ccc;
35   color: #ccc;
36   height: 1px;
37 }
38
39 /* Default rules for headings */
40
41 h2 {
42   margin: 5px 0;
43   font-size: 25px;
44   line-height: 30px;
45 }
46
47 /* Rules for the whole left sidebar, including the logo */
48
49 #left {
50   position: absolute;
51   top: 0px;
52   width: 185px;
53   font-size: 11px;
54   line-height: 12px;
55 }
56
57 /* Rules for the OpenStreetMap logo in the top left corner */
58
59 #logo {
60   width: 170px;
61   min-width: 170px;
62   padding: 5px;
63   text-align: center;
64   margin: 25px 0 5px 0;
65 }
66
67 #logo h1 {
68   font-size: 18px;
69   line-height: 20px;
70   text-align: center;
71   margin: 0px;
72 }
73
74 #logo h2 {
75   font-size: 10px;
76   line-height: 15px;
77   margin: 0px;
78 }
79
80 /* Rules for the site name */
81
82 #small-title {
83   display: none;
84 }
85
86 /* Rules for the introductory text displayed in the left sidebar to new users */
87
88 #intro {
89   border-top: 1px solid #ccc;
90 }
91
92 #intro p {
93   margin: 5px;
94 }
95
96 /*
97  * Rules for alert boxes shown in the left sidebar when important
98  * information needs to be conveyed such as when the site is
99  * undergoing maintenance.
100  */
101
102 #alert {
103   width: 170px;
104   margin: 5px;
105   padding: 5px;
106   border: 1px solid #ccc;
107   background: #d00;
108   line-height: 1.2em;
109   font-size: 14px;
110   border-radius: 5px;
111   -moz-border-radius: 5px;
112 }
113
114 /*
115  * Rules for notice boxes shown in the left sidebar when important, but
116  * non-critical information needs to be conveyed such as notices about
117  * donation drives.
118  */
119
120 .notice {
121   width: 170px;
122   margin: 5px;
123   padding: 5px;
124   border: 1px solid #ccc;
125   background: #ea0;
126   line-height: 20px;
127   font-size: 14px;
128   border-radius: 5px;
129   -moz-border-radius: 5px;
130 }
131
132 /* Rules for the menu displayed in the left sidebar */
133
134 .left_menu {
135   padding: 5px;
136   margin: 4px 0;
137   border-top: 1px solid #ccc;
138   border-bottom: 1px solid #ccc;
139   line-height: 20px;
140   font-size: 14px;
141   font-weight: bold;
142 }
143
144 .left_menu h1 {
145   font-style: normal;
146   font-size: 15px;
147 }
148
149 .left_menu ul {
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 a {
160   color: #000;
161 }
162
163 /* Rules for SOTM advert */
164
165 #sotm {
166   width: 180px;
167   min-width: 180px;
168   margin: 5px;
169   padding: 0px;
170   border: 0px;
171   background: #fff;
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   padding: 5px;
182   margin: 4px 0;
183   border-top: 1px solid #ccc;
184 }
185
186 .optionalbox h1 {
187   font-size: 14px;
188   font-weight: bold;
189   line-height: 20px;
190   margin: 0px;
191   vertical-align: bottom;
192 }
193
194 /* Rules for the search box */
195
196 .whereami {
197   line-height: 20px;
198   vertical-align: bottom;
199 }
200
201 .search_container {
202   height: 15px;
203   padding-bottom: 5px;
204 }
205
206 #search_field form {
207   width: 100%;
208   margin: 0px;
209   padding: 0px;
210 }
211
212 #search_field input[type="text"] {
213   width: 136px;
214 }
215
216 #search_field input[type="submit"] {
217   width: 26px;
218   padding-left: 0px;
219   padding-right: 0px;
220 }
221
222 .search_help {
223   margin-top: 2px;
224   margin-bottom: 0px;
225 }
226
227 /* Rules for donation request box */
228
229 .donate {
230   width: 155px;
231   margin: 10px 5px;
232   padding: 5px;
233   border: 1px solid #ccc;
234   background: #cbeea7;
235   line-height: 20px;
236   text-align: center;
237   font-size: 14px;
238   border-radius: 5px;
239   -moz-border-radius: 5px;
240 }
241
242 /* Rules for Creative Commons logo button */
243
244 #cclogo {
245   margin-top: 10px;
246   margin-bottom: 10px;
247 }
248
249 /* Rules for tabbed navigation bar */
250
251 #top-bar {
252   border-bottom: 1px solid #ccc;
253   height: 29px;
254 }
255
256 #tabnav {
257   padding: 0;
258   margin: 0;
259   overflow:hidden;
260 }
261
262 #tabnav li {
263   margin: 0px;
264   padding: 0px;
265   display: inline;
266   list-style-type: none;
267 }
268
269 #tabnav a, #tabnav a:link, #tabnav a:visited {
270   background: #fff;
271   font-size: 14px;
272   line-height: 19px;
273   font-weight: bold;
274   padding: 5px 10px;
275   text-decoration: none;
276   color: #333;
277 }
278
279 #tabnav a:link.active, #tabnav a:visited.active {
280   border-bottom: 1px solid #aaa;
281   background: #9ed485;
282   color: #000;
283 }
284
285 #tabnav a:link:hover, #tabnav a:visited:hover {
286   text-decoration:underline;
287 }
288
289 #tabnav a:link.disabled,
290 #tabnav a:visited.disabled,
291 #tabnav a:link:hover.disabled,
292 #tabnav a:visited:hover.disabled {
293   color: #888;
294 }
295
296 /* Rules for greeting bar in the top right corner */
297
298 #greeting {
299   height: 28px;
300   margin: 0px;
301   font-size: 13px;
302   line-height: 28px;
303 }
304
305 .greeting-bar-unread {
306   font-weight: bold;
307 }
308
309 /* Rules for the message shown in place of the map when javascript is disabled */
310
311 #noscript {
312   z-index: 20000000;
313   position: absolute;
314   top: 15px;
315 }
316
317 /* Rules for OpenLayers maps */
318
319 #map {
320   margin: 0px;
321   padding: 0px;
322 }
323
324 .olControlAttribution {
325   bottom: 15px !important;
326   left: 0px !important;
327   right: 0px !important;
328   text-align: center;
329 }
330
331 #permalink {
332   z-index: 10000;
333   position: absolute;
334   bottom: 0px;
335   right: 0px;
336   padding: 5px;
337   background:#fff;
338   text-align: right;
339   font-size: 12px;
340 }
341
342 #permalink a {
343   padding: 5px;
344 }
345
346 /* Rules for edit menu */
347
348 .menu {
349   display: none;
350   z-index: 10000;
351   position: absolute;
352   background-color: #ffffff;
353   border: 1px solid black;
354 }
355
356 .menu ul {
357   margin-top: 10px;
358   margin-bottom: 10px;
359   padding-left: 10px;
360   padding-right: 10px;
361 }
362
363 .menu li {
364   list-style-type: none;
365   white-space: nowrap;
366 }
367
368 /* Rules for attribution text under the main map shown on printouts */
369
370 #attribution {
371   display: none;
372 }
373
374 .attribution_notice {
375   text-align: center;
376 }
377
378 /* Rules for the popout map sidebar */
379
380 #sidebar {
381   display: none;
382   position: absolute;
383   margin: 0px;
384   padding: 0px;
385   width: 30%;
386   top: 0px;
387   bottom: 0px;
388 }
389
390 #sidebar #sidebar_content {
391   overflow: auto;
392   position: absolute;
393   font-size: 13px;
394   line-height: 15px;
395   top: 29px;
396   bottom: 0px;
397   left: 0px;
398   right: 0px;
399 }
400
401 #sidebar .sidebar_title {
402   margin: 0px;
403   padding: 3px 6px 4px 6px;
404   height: 29px;
405   font-size: 14px;
406   line-height: 15px;
407   background: #bbb;
408 }
409
410 /* Rules for the map key which appears in the popout sidebar */
411
412 #mapkey h3 {
413   font-size: 110%;
414   font-weight: normal;
415   text-align: center;
416 }
417
418 #mapkey .mapkey-table {
419   padding-left: 5px;
420   padding-right: 5px;
421 }
422
423 #mapkey .mapkey-table-key {
424 }
425
426 #mapkey .mapkey-table-value {
427   font-size: 90%;
428 }
429
430 /* Rules for search results which appear in the popout sidebar */
431
432 .search_searching {
433   margin-top: 5px;
434   margin-bottom: 5px;
435 }
436
437 .search_results_heading {
438   margin: 0px;
439   padding: 2px 5px;
440   border-bottom: 1px solid #ccc;
441   font-weight: bold;
442 }
443
444 .search_results_entry {
445   margin: 0px;
446   padding: 2px 5px;
447 }
448
449 .search_results_error {
450   margin: 0px;
451   padding: 2px 6px 0px;
452   color: #f00;
453 }
454
455 /* Rules for data browser information which appears in the popout sidebar */
456
457 .browse_heading {
458   margin: 0px;
459   padding: 3px 6px;
460   border: 1px solid #ccc;
461   background: #ddd;
462 }
463
464 .browse_details {
465   margin: 0px;
466   padding: 0px 6px;
467 }
468
469 /* Rules for export information which appears in the popout sidebar */
470
471 .export_heading {
472   margin: 0px;
473   padding: 2px 5px;
474   border-bottom: 1px solid #ccc;
475   font-weight: bold;
476 }
477
478 .export_bounds {
479   width: 100%;
480   text-align: center;
481 }
482
483 .export_bound {
484   margin: 5px;
485 }
486
487 .export_details {
488   padding: 2px 6px;
489 }
490
491 #export_osm {
492   display: none;
493 }
494
495 #export_mapnik {
496   display: none;
497 }
498
499 #export_osmarender {
500   display: none;
501 }
502
503 .export_hint {
504   padding: 0px 12px;
505   font-style: italic;
506 }
507
508 .export_buttons {
509   width: 100%;
510   text-align: center;
511 }
512
513 /* Rules for the main content area */
514
515 #content {
516   padding: 10px;
517   margin: 0px;
518   position: absolute;
519   bottom: 0px;
520 }
521
522 #content.site_index,
523 #content.site_edit,
524 #content.site_export {
525   border: 0px;
526   padding: 0px;
527 }
528
529 #slim_container {
530   width: 100%;
531 }
532
533 #slim_container_content {
534   max-width: 50em;
535   background-color: #FFFFFF;
536   margin: 10px auto;
537   padding: 3px;
538   border-radius: 25px;
539   -moz-border-radius: 25px;
540   border: 1px solid #e6e6e6;
541 }
542
543 #slim_content {
544   margin: 10px;
545   margin-top: 90px;
546   max-width: 50em;
547 }
548
549 #slim_header {
550   margin: 10px;
551   position: absolute;
552   top: 0px;
553 }
554
555 #slim_header img {
556   vertical-align: middle;
557   margin-bottom: 5px;
558 }
559
560 /* Rules for the home page */
561
562 .site_index #map {
563   position: absolute;
564   top: 0px;
565   bottom: 0px;
566   left: 0px;
567   right: 0px;
568 }
569
570 .site_export #map {
571   position: absolute;
572   top: 0px;
573   bottom: 0px;
574   left: 0px;
575   right: 0px;
576 }
577
578 /* Rules for the edit page */
579
580 .site_edit #map {
581   position: absolute;
582   top: 0px;
583   bottom: 0px;
584   left: 0px;
585   right: 0px;
586 }
587
588 /* Rules for the changeset list shown by the history tab etc */
589
590 #changeset_list_container {
591   position: relative;
592 }
593
594 #changeset_list {
595   width: 50%;
596   font-size: small;
597   border-collapse: collapse;
598   border-width: 0px;
599   margin-top: 1px;
600   margin-bottom: 1px;
601 }
602
603 #changeset_list td {
604   vertical-align: top;
605   padding: 3px;
606 }
607
608 #changeset_list .date {
609   white-space: nowrap;
610 }
611
612 #changeset_list .user {
613   white-space: nowrap;
614 }
615
616 #changeset_list .area {
617   white-space: nowrap;
618 }
619
620 #changeset_list .selected {
621   background-color: rgb(255, 255, 160);
622   background-color: rgba(255, 255, 85, 0.5);
623 }
624
625 #changeset_list_map {
626   position: absolute;
627   top: 0px;
628   bottom: 0px;
629   width: 49%;
630   min-height: 400px;
631   border: solid 1px black;
632 }
633
634 /* Rules for the data browser */
635
636 #browse_navigation {
637   width: 250px;
638   text-align: center;
639 }
640
641 table.browse_details th {
642   white-space: nowrap;
643 }
644
645 td.browse_comments {
646   padding: 0px;
647 }
648
649 td.browse_comments table {
650   border-collapse: collapse;
651 }
652
653 td.browse_comments table td {
654   padding-bottom: 10px;
655 }
656
657 td.browse_comments table td span.by {
658   font-size: small;
659   color: #999999;
660 }
661
662 #browse_map {
663   width: 250px;
664 }
665
666 #browse_map #small_map {
667   width: 250px;
668   height: 300px;
669   border: solid 1px black;
670 }
671
672 #browse_map .geolink {
673   display: none;
674 }
675
676 /* Rules for the trace list shown by the traces tab etc */
677
678 #trace_list {
679   font-size: small;
680   border-collapse: collapse;
681   border-width: 0px;
682 }
683
684 #trace_list .trace_summary {
685   font-size: 12px;
686   color: gray;
687 }
688
689 #trace_list .trace_pending {
690   color: red;
691 }
692
693 #trace_list .trace_public {
694   color: green;
695 }
696
697 #trace_list .trace_identifiable {
698   color: green;
699 }
700
701 #trace_list .trace_trackable {
702   color: red;
703 }
704
705 #trace_list .trace_private {
706   color: red;
707 }
708
709 /* Rules for the user list */
710
711 #user_list {
712   width: 100%;
713   font-size: small;
714 }
715
716 #user_list tr {
717   vertical-align: middle;
718 }
719
720 #user_list p {
721   margin-top: 0px;
722   margin-bottom: 0px;
723 }
724
725 #user_list_actions {
726   margin-top: 10px;
727 }
728
729 /* Rules for the new diary entry page */
730
731 .diary_entry div#map {
732   position: relative;
733   width: 90%;
734   height: 400px;
735   border: 1px solid #ccc;
736   display: none;
737 }
738
739 /* Rules for the login page */
740
741 #login_wrapper div {
742   margin: 5px;
743   padding: 15px;
744   border-radius: 15px;
745   -moz-border-radius: 15px;
746 }
747
748 #login_login {
749   background-color: #f5f5ff;
750   border: 1px solid #f3f3ff;
751   border-radius: 15px;
752   -moz-border-radius: 15px;
753 }
754
755 #login_login h1 {
756   margin-top: 5px;
757 }
758
759 table#login_openid_buttons {
760   padding-bottom: 10px;
761 }
762
763 #login_openid_buttons td {
764   padding-left: 10px;
765   padding-right: 10px;
766   padding-top: 5px;
767   padding-bottom: 5px;
768 }
769
770 #login_openid_buttons img {
771   border: 0;
772 }
773
774 #login_signup form.button-to div {
775   margin: 0px;
776   padding: 0px;
777 }
778
779 /* Rules for the account confirmation page */
780
781 div#contributorTerms {
782   border: 1px solid black;
783   padding: 4px;
784   overflow: auto;
785   width: 95%;
786   height: 400px;
787 }
788
789 div#slim_content div#contributorTerms {
790   width: auto;
791 }
792
793 div#contributorTerms p#first {
794   margin-top: 0px;
795 }
796
797 div#contributorTerms p#last {
798   margin-bottom: 0px;
799 }
800
801 div#contributorTerms ol {
802   margin-bottom: 0px;
803 }
804
805 div#contributorTerms img {
806   display: block;
807   margin-left: auto;
808   margin-right: auto;
809   margin-top: 10%;
810 }
811
812 form#termsForm {
813   width: 95%;
814   margin-bottom: 3em;
815 }
816
817 div#slim_content form#termsForm {
818   width: auto;
819 }
820
821 p#contributorGuidance {
822   background-color: #f5f5ff;
823   border: 1px solid #f3f3ff;
824   border-radius: 15px;
825   -moz-border-radius: 15px;
826   padding: 10px;
827 }
828
829 /* Rules for the account settings page */
830
831 #accountForm td {
832   padding-bottom: 10px;
833 }
834
835 #accountForm .user_map {
836   position: relative;
837   width: 500px;
838   height: 400px; 
839   border: 1px solid #ccc;
840 }
841
842 #accountImage td {
843   padding-bottom: 0px;
844 }
845
846 .nohome .location {
847   display: none;
848 }
849
850 #homerow .message {
851   display: none;
852 }
853
854 .nohome .message {
855   display: inline !important;
856 }
857
858 #accountForm input[type=submit] {
859   margin-top: 15px;
860 }
861
862 /* Rules for the user view */
863
864 .user_view .user_map {
865   position: relative;
866   width: 400px;
867   height: 400px; 
868   border: 1px solid #ccc;
869 }
870
871 .user_view .user_map p#no_home_location {
872   position: absolute;
873   top: 0px;
874   bottom: 0px;
875   width: 90%;
876   height: 30%;
877   margin: auto 5%
878 }
879
880 /* Rules for the user map */
881
882 .user_map .olControlPanZoomBar {
883   display: none;
884 }
885
886 .user_map .olControlPanZoom {
887   display: block;
888 }
889
890 /* Rules for user popups on maps */
891
892 .user_popup p {
893   padding-top: 3px;
894   padding-bottom: 3px;
895   margin-top: 0px;
896   margin-bottom: 0px;
897   margin-left: 55px;
898   margin-right: 2px;
899 }
900
901 .user_popup img.user_thumbnail {
902   float: left;
903 }
904
905 /* Rules for message in/out box page */
906
907 #messages {
908   border: 1px solid #ccc;
909 }
910
911 .inbox-row-unread .inbox-subject {
912   font-weight: bold;
913 }
914
915 /* Rules for "flash" notice boxes shown at the top of the content area */
916
917 #error {
918   border: 1px solid red;
919   padding: 7px;
920   background-color: #fff0f0;
921   margin-bottom: 20px;
922   border-radius: 5px;
923   -moz-border-radius: 5px;
924 }
925
926 #warning {
927   border: 1px solid orange;
928   padding: 7px;
929   background-color: #fff6f0;
930   margin-bottom: 20px;
931   border-radius: 5px;
932   -moz-border-radius: 5px;
933 }
934
935 #notice {
936   border: 1px solid green;
937   padding: 7px;
938   background-color: #f0fff0;
939   margin-bottom: 20px;
940   border-radius: 5px;
941   -moz-border-radius: 5px;
942 }
943
944 /* Rules for highlighting fields with rails validation errors */
945
946 .field_with_errors {
947   padding: 2px;
948   background-color: red;
949   display: table;
950 }
951
952 /* Rules for rails validation error boxes */
953
954 #errorExplanation {
955   width: 400px;
956   border: 2px solid red;
957   padding: 7px;
958   padding-bottom: 12px;
959   margin-bottom: 20px;
960   background-color: #f0f0f0;
961 }
962
963 #errorExplanation h2 {
964   font-weight: bold;
965   font-size: 12px;
966   margin: -7px;
967   background-color: #c00;
968   color: #fff;
969 }
970
971 #errorExplanation p {
972   color: #333;
973   margin-bottom: 0px;
974   padding: 5px;
975 }
976
977 #errorExplanation ul li {
978   font-size: 12px;
979   list-style: square;
980 }
981
982 /* Rules for forms */
983
984 .fieldName {
985   vertical-align: top;
986   font-weight: bold;
987   font-size: 12px;
988   line-height: 20px;
989 }
990
991 .minorNote {
992   font-size: 0.8em;
993 }
994
995 input[type="text"],
996 input[type="email"],
997 input[type="url"],
998 input[type="password"],
999 textarea {
1000   border: 1px solid #888;
1001 }
1002
1003 /* Rules for user images */
1004
1005 img.user_image {
1006   max-width: 100px;
1007   max-height: 100px;
1008   border: 1px solid black;
1009 }
1010
1011 img.user_thumbnail {
1012   max-width: 50px;
1013   max-height: 100px;
1014   border: 1px solid black;
1015 }
1016
1017 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1018
1019 .nowrap {
1020   white-space: nowrap;
1021 }
1022
1023 /* Rules for geo microformats */
1024
1025 abbr.geo {
1026   border-bottom: none;
1027 }
1028
1029 /* Rules for RSS buttons */
1030
1031 .rsssmall {
1032   position: relative;
1033   top: 4px;
1034 }
1035
1036 /* Rules for doing distinct colour of alternate table rows */
1037
1038 .table0 {
1039   background: #f6f6f6;
1040 }
1041
1042 .table1 {
1043   background: #fff;
1044 }
1045
1046 /* Rules for OpenID logo */
1047
1048 .openid_logo {
1049   vertical-align: text-bottom;
1050   border: 0;
1051 }