]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss
Merge remote-tracking branch 'upstream/pull/2698'
[rails.git] / app / assets / stylesheets / common.scss
1 @import "parameters";
2 @import "bootstrap";
3
4 /* Styles common to large and small screens */
5
6 .fillL { background-color: white; }
7
8 /* Default rules for the body of every page */
9
10 body {
11   font-family: 'Helvetica Neue',Arial,sans-serif;
12   font-size: $typeheight;
13   line-height: 1.6666;
14   color: #222;
15   background-color: #fff;
16   margin: 0px;
17   padding: 0px;
18   text-align: left;
19   height: 100%;
20 }
21
22 p > img {
23   width: auto;
24   max-width: 100%;
25 }
26
27 small, aside {
28   font-size: 12px;
29 }
30
31 #container { position: relative; }
32
33 .small_icon {
34   vertical-align: middle;
35   margin-right: $lineheight/4;
36 }
37
38 .red { color: $red; }
39
40 .piwik { border: 0; }
41
42 [dir=rtl] { /* no-r2 */ text-align: right; }
43
44 [dir=ltr] { /* no-r2 */ text-align: left; }
45
46 /* Rules for icons */
47
48 .icon {
49   display: inline-block;
50   vertical-align: top;
51   width: 20px;
52   height: 20px;
53   background: transparent image-url("sprite.png") no-repeat 0 0;
54   background-image: image-url("sprite.svg");
55   text-indent: -9999px;
56   overflow: hidden;
57 }
58
59 .icon.search      { /* no-r2 */ background-position: 0 0; }
60 .icon.donate      { /* no-r2 */ background-position: -20px 0; }
61 .icon.zoomin      { /* no-r2 */ background-position: -40px 0; }
62 .icon.zoomout     { /* no-r2 */ background-position: -60px 0; }
63 .icon.geolocate   { /* no-r2 */ background-position: -80px 0; }
64 .active .icon.geolocate   { /* no-r2 */ background-position: -80px -20px; }
65 .icon.layers      { /* no-r2 */ background-position: -100px 0; }
66 .icon.key         { /* no-r2 */ background-position: -120px 0; }
67 .icon.share       { /* no-r2 */ background-position: -140px 0; }
68 .icon.clipboard   { /* no-r2 */ background-position: -160px 0; }
69 .icon.link        { /* no-r2 */ background-position: -180px 0; }
70 .icon.close       { /* no-r2 */ background-position: -200px 0; }
71 .close-wrap:hover .icon.close,
72 .icon.close:hover { /* no-r2 */ background-position: -200px -20px; }
73 .icon.check       { /* no-r2 */ background-position: -220px 0; }
74 .icon.note        { /* no-r2 */ background-position: -240px 0; }
75 .icon.note.grey   { /* no-r2 */ background-position: -240px -20px; }
76 .icon.query       { /* no-r2 */ background-position: -260px 0; }
77
78 /* Rules for links */
79
80 a {
81   color: #24d;
82   text-decoration: none;
83   -webkit-appearance: none;
84   outline: 0;
85   &:hover {
86     text-decoration: underline;
87   }
88 }
89
90 /* Utility for de-emphasizing content */
91
92 .deemphasize {
93   color: $darkgrey;
94   a {
95     color: $blue;
96   }
97 }
98
99 .text-muted a {
100   color: $blue;
101 }
102
103 /* Rules for the header */
104
105 #menu-icon {
106   display: none !important;
107   float: right;
108   background: image-url("menu-icon.png") no-repeat;
109   background-size: 30px 30px;
110   display: block;
111   width: 30px;
112   height: 30px;
113   margin: 14px 10px 0 0;
114   opacity: 0.6;
115 }
116
117 header {
118   height: $headerHeight;
119   position: relative;
120   z-index: 1001;
121   font-size: 14px;
122
123   h1, nav, nav > ul, nav > ul > li {
124     display: inline-block;
125   }
126
127   > * {
128     height: 100%;
129     padding: $lineheight/2;
130   }
131
132   h1, nav.primary {
133     float: left;
134   }
135
136   a, a:hover {
137     text-decoration: none;
138   }
139
140   img.logo {
141     width: 30px;
142     height: 30px;
143     margin-top: -2px;
144     vertical-align: middle;
145   }
146
147   h1 {
148     font-size: 18px;
149     font-weight: 600;
150     line-height: 1.2;
151     margin: 0;
152     padding-top: 15px;
153
154     a {
155       color: #000;
156     }
157
158     a:hover {
159       color: #000;
160     }
161   }
162
163   .btn {
164     font-size: 14px;
165   }
166 }
167
168
169 nav.primary {
170   .btn-outline-primary {
171     @include button-outline-variant($green, $white);
172   }
173
174   .disabled {
175     .btn-outline-primary {
176       color: $grey;
177       cursor: default;
178
179       .caret {
180         border-top-color: $grey;
181       }
182
183       &:hover {
184         background-color: lighten($green, 30%);
185       }
186     }
187   }
188
189   // Small tweaks to the toggle to stop the primary colour showing through
190   // when the menu is shown
191   .show > .btn-outline-primary.dropdown-toggle {
192     background-color: $green;
193     border-color: $green;
194
195     &:focus {
196       box-shadow: 0 0 0 0.2rem fade-out($green, 0.5);
197     }
198   }
199 }
200
201 nav.secondary {
202   position: absolute;
203   right: 0;
204
205   .nav-link {
206     padding: 0.2rem;
207     color: $darkgrey;
208   }
209
210   > ul li.current a {
211     color: darken($darkgrey, 25%);
212   }
213
214   .login-menu {
215     .btn-outline-secondary {
216       @include button-outline-variant($darkgrey);
217     }
218   }
219
220   .user-menu {
221     .btn-outline-secondary {
222       @include button-outline-variant($darkgrey, $darkgrey, white, $darkgrey);
223       border-color: $grey;
224       &:hover {
225         border-color: $grey;
226       }
227       &:focus {
228         background-color: white;
229         box-shadow: none;
230       }
231     }
232     &.show .btn-outline-secondary {
233       background-color: white;
234       &:focus {
235         box-shadow: none;
236       }
237     }
238   }
239
240   img.user_thumbnail_tiny {
241     border: 0;
242     border-radius: 3px;
243   }
244
245   #inboxanchor {
246     display: inline-block;
247     height: 25px;
248     margin: 3px 0 3px 3px;
249     background-color: lighten($grey, 10%);
250     line-height: 20px;
251     border-radius: 3;
252   }
253
254   .dropdown-menu {
255     .count-number {
256       font-size: 14px;
257     }
258   }
259 }
260
261 nav.primary, nav.secondary {
262   .dropdown-item {
263     &:hover, &:active {
264       background-color: $green;
265       color: white;
266     }
267   }
268 }
269
270 #compact-secondary-nav {
271   display: none;
272 }
273
274 body.compact {
275   #compact-secondary-nav {
276     display: inline-block;
277   }
278   .compact-hide {
279     display: none;
280   }
281 }
282
283 /* Utility for styling notification numbers */
284
285 .count-number {
286   padding: 2px $lineheight/4;
287   border-radius: 2px;
288   background: lighten($green, 30%);
289   margin: 0 2px;
290   font-size: 11px;
291   color: #333;
292 }
293
294 /* Rules for the message shown in place of the map when javascript is disabled */
295
296 #noscript {
297   z-index: 20000000;
298   margin-left: 400px;
299   margin-top: 50px;
300 }
301
302 /* Rules for Leaflet maps */
303
304 .leaflet-control .control-button {
305   display: block;
306   height: 40px;
307   width: 40px;
308   background-color: #333;
309   background-color: rgba(0,0,0,.6);
310   border-radius: 4px 0 0 4px;
311   margin-bottom: 10px;
312   outline: none;
313
314   &:hover {
315     background-color: black;
316   }
317
318   &.disabled,
319   &.leaflet-disabled {
320     background-color: #333;
321     background-color: rgba(0,0,0,.5);
322     cursor: default;
323   }
324
325   &.active {
326     background-color: $vibrant-green;
327   }
328
329   .icon {
330     margin: 10px;
331   }
332 }
333
334 .leaflet-control .zoomin,
335 .control-layers .control-button {
336   margin-bottom: 0px;
337   border-radius: 4px 0 0 0;
338 }
339
340 .leaflet-control .zoomout,
341 .control-key .control-button {
342   margin-bottom: 0;
343   border-radius: 0;
344 }
345
346 .control-locate .control-button,
347 .control-share .control-button {
348   border-radius: 0 0 0 4px;
349 }
350
351 /* Rules for the sidebar and main map area */
352
353 .map-layout {
354   #content {
355     overflow: hidden;
356     position: absolute;
357     top: $headerHeight;
358     bottom: 0;
359     width: 100%;
360   }
361
362   #sidebar, #map {
363     position: relative;
364     height: 100%;
365     overflow-x: hidden;
366     overflow-y: auto;
367   }
368
369   #sidebar {
370     float: left;
371     width: $sidebarWidth;
372     background: #fff;
373
374     #sidebar_loader {
375       display: none;
376     }
377
378     > div {
379       position: relative;
380       float: left;
381       clear: both;
382       width: 100%;
383     }
384
385     h2 {
386       padding: $lineheight $lineheight $lineheight/2;
387       font-size: 1.5rem;
388     }
389
390     h3, h4 {
391       margin-top: $lineheight;
392       margin-bottom: $lineheight/2;
393       font-size: 1.25rem;
394     }
395
396     .close-wrap {
397       cursor: pointer;
398       position: absolute;
399       top: 0;
400       right: 0;
401       width: 60px;
402       height: 60px;
403
404       .icon.close {
405         pointer-events: none;
406         position: absolute;
407         right: 20px;
408         top: 20px;
409       }
410     }
411
412     .icon.close {
413       float: right;
414       cursor: pointer;
415     }
416
417     .flash {
418       padding: 15px;
419
420       picture {
421         margin-right: -25px;
422       }
423
424       div.message {
425         margin-left: 30px;
426       }
427     }
428   }
429
430   .overlay-sidebar #sidebar {
431     position: absolute;
432     z-index: 1000;
433     height: auto;
434     overflow: hidden;
435
436     #banner {
437       display: block;
438     }
439
440     .welcome {
441       display: none;
442
443       &.visible {
444         display: block;
445       }
446     }
447
448     #sidebar_content {
449       display: none;
450     }
451   }
452
453   .welcome {
454     display: none;
455     padding-bottom: 5px;
456
457     p {
458       padding: $lineheight/2 $lineheight $lineheight;
459       font-size: 110%;
460       font-weight: 300;
461     }
462
463     .button {
464       width: 50%;
465       float: left;
466       margin: 0;
467       border-radius: 0;
468       font-weight: normal;
469       padding: .6em;
470
471       &.learn-more {
472         border-right: 1px solid #fff;
473       }
474     }
475   }
476
477   #banner {
478     display: none;
479
480     img {
481       display: block;
482       width: $sidebarWidth;
483     }
484   }
485
486   #map {
487     height: 100%;
488     overflow: hidden;
489
490     &.query-active {
491       cursor: help;
492     }
493
494     &.query-disabled {
495       cursor: not-allowed;
496     }
497
498     .leaflet-marker-draggable {
499       cursor: move;
500     }
501   }
502
503   #map-ui {
504     display: none;
505     position: relative;
506     float: right;
507     width: 250px;
508     height: 100%;
509     background: white;
510     overflow: auto;
511
512     .section {
513       border-bottom: 1px solid $grey;
514       padding: 10px 20px;
515     }
516
517     a.close-button {
518       float: right;
519       padding:5px;
520       font-size:20px;
521       line-height:10px;
522       color:#222;
523       border:1px solid $grey;
524     }
525
526     .tooltip {
527       opacity: 1;
528       border: 1px solid $grey;
529       .tooltip-arrow {
530         border-top-color: $grey;
531       }
532     }
533   }
534 }
535
536 .layers-ui,
537 .share-ui {
538   li:last-child {
539     margin-bottom: 0;
540   }
541 }
542
543 .layers-ui {
544   .base-layers {
545     .leaflet-container {
546       width: 100%;
547       height: 50px;
548       cursor: pointer;
549     }
550
551     li  {
552       overflow: hidden;
553       border-radius: 3px;
554       border: 2px solid #fff;
555       margin-bottom: 8px;
556       position: relative;
557       transition: border-color 0.08s ease-in;
558
559       label {
560         position: absolute;
561         top: 0;
562         left: 0;
563         padding: 2px 6px;
564         border-bottom-right-radius: 3px;
565         cursor: pointer;
566         font-weight: 600;
567         font-size: 16px;
568         text-stroke: 2px #fff;
569         background: rgba(255,255,255,.9);
570         z-index: 1000;
571         input[type="radio"] {
572           display: none;
573         }
574       }
575
576       &.active { border-color: darken($green, 10%); }
577       &:hover {
578         border-color: $grey;
579         &.active { border-color: darken($green, 20%); }
580       }
581     }
582   }
583
584   .overlay-layers {
585     p {
586       font-size: 13px;
587       margin-bottom: 8px;
588     }
589     li.disabled { color: $darkgrey; }
590   }
591 }
592
593 .share-ui {
594   .share-tabs {
595     margin-bottom: 10px;
596
597     a {
598       color: #fff;
599       text-decoration: none;
600       background-color: $lightblue;
601       padding: 5px 10px;
602       border-right: 1px solid #fff;
603     }
604
605     a:first-child {
606       border-right: 1px solid #fff;
607       border-radius: 4px 0 0 4px;
608     }
609
610     a:last-child {
611       border-radius: 0 4px 4px 0;
612     }
613
614     a.active {
615       background-color: $blue;
616     }
617   }
618
619   .share-tab {
620     display: none;
621   }
622
623   .share-link {
624     input[type=text],
625     textarea {
626       width: 100%;
627       font-family: monospace;
628       font-size: small;
629       line-height: 1.3;
630     }
631   }
632
633   .share-image {
634     label {
635       margin-right: 10px;
636     }
637   }
638
639   #embed_html {
640     resize: vertical;
641   }
642
643   #mapnik_scale {
644     width: 100px;
645   }
646 }
647
648 .leaflet-top {
649   top: $lineheight/2 !important;
650   .leaflet-control {
651     margin-right: 0px !important;
652     margin-top: 0px !important;
653   }
654 }
655
656 .leaflet-popup-scrolled {
657   padding-right: $lineheight;
658   border-bottom: 0px !important;
659   border-top: 0px !important;
660 }
661
662 .leaflet-popup-content-wrapper {
663   border-radius: 4px !important;
664 }
665
666 /* Rules for attribution text under the main map shown on printouts */
667
668 #attribution {
669   display: none;
670
671   table {
672     width: 100%
673   }
674 }
675
676 .attribution_license,
677 .attribution_project {
678   text-align: left;
679 }
680
681 .attribution_notice {
682   text-align: center;
683 }
684
685 .donate-attr { color: darken($green, 10%) !important; }
686
687 /* Rules for the sidebar */
688
689 .sidebar_heading {
690   position: relative;
691   padding: $lineheight/2 $lineheight;
692   // background: $offwhite;
693   // border-bottom: 1px solid $grey;
694   > .close {
695     float: right;
696     margin-top: 2px;
697     cursor: pointer;
698   }
699 }
700
701 #browse_status {
702   p {
703     padding: $lineheight;
704   }
705
706   input {
707     display: block;
708     margin-left: auto;
709     margin-right: auto;
710   }
711 }
712
713 #sidebar {
714   #sidebar_loader,
715   .search_more {
716     width: 100%;
717     margin: $lineheight auto;
718   }
719
720   .loader,
721   .load_more {
722     text-align: center;
723     margin: auto;
724     width: 40px;
725     display: block;
726   }
727 }
728
729 /* Rules for the search and direction forms */
730
731 header .search_forms,
732 .directions_form {
733   display: none;
734 }
735
736 .search_form,
737 .directions_form {
738   position: relative;
739   padding: $lineheight/2;
740   background-color: $lightgrey;
741
742   .query_wrapper {
743     position: relative;
744     overflow: hidden;
745     border-radius: 2px 0 0 2px;
746   }
747
748   input[type=text] {
749     width: 100%;
750     height: 30px;
751     transition: 300ms linear;
752   }
753
754   input[type=text].overflow {
755     border-right: none;
756     border-radius: 3px 0px 0px 3px;
757   }
758
759   input:focus {
760     outline: none;
761     box-shadow: 0px 0px 7px $vibrant-green;
762   }
763
764   input[type=submit].float {
765     float: right;
766     width: auto;
767     min-width: 0;
768     border-radius: 0 2px 2px 0;
769   }
770
771   input.error {
772     background-color: rgba($red, 0.4);
773   }
774
775   select {
776     /* this next line is to polyfill the vertical alignment of text within a select element,
777      * which is different between firefox and chrome. */
778     padding: 0.3em 0;
779   }
780
781   .query_options {
782     text-align: right;
783     font-size: 10px;
784     color: $blue;
785   }
786
787   .describe_location {
788     position: absolute;
789     top: 6px;
790     right: 6px;
791     font-size: 10px;
792     color: $blue;
793   }
794
795   .switch_link {
796     float: right;
797     width: auto;
798     min-width: 0;
799     margin-left: 6px;
800   }
801
802   img.button {
803     display: block;
804     width: 20px;
805     height: 20px;
806   }
807
808   span.force_width {
809     width: 100%;
810     padding-right: 25px;
811     display: block;
812   }
813
814   select.routing_engines {
815     min-height: 30px;
816     margin: 0px 0px 5px 25px;
817   }
818
819   input.routing_go {
820     min-width: 100px;
821     float: right;
822   }
823
824   div.header {
825     width: 100%;
826     height: 30px;
827   }
828
829   div.line {
830     width: 100%;
831     margin: 0px 0px 5px 0px;
832   }
833
834   div.loader_copy {
835     display: none;
836
837     img {
838       vertical-align: middle;
839     }
840   }
841
842   a.reverse_directions {
843     cursor: pointer;
844     margin: 0px 0px 5px 25px;
845   }
846 }
847
848 /* Rules for the map key which appears in the popout sidebar */
849
850 #mapkey {
851  .mapkey-table-key img {
852     display: block;
853     margin-left: auto;
854     margin-right: auto;
855   }
856 }
857
858 /* Rules for search sidebar */
859
860 #sidebar .search_results_entry {
861   ul li {
862     cursor: pointer;
863     &.selected { background: $list-highlight; }
864   }
865
866   .search_more .loader {
867     display: none;
868     width: 100%;
869   }
870 }
871
872 .search_results_error {
873   color: #f00;
874   padding: 10px 20px;
875 }
876
877 /* Rules for routing */
878
879 #sidebar_content>table {
880     padding: 5px 20px 10px 15px;
881     width: 100%;
882     border-collapse: separate;
883     border-spacing: 0;
884 }
885
886 div.direction {
887   background-image: image-url('routing-sprite.png');
888   width: 20px;
889   height: 20px;
890   background-repeat: no-repeat;
891 }
892 @for $i from 0 through 25 {
893 div.direction.i#{$i} { background-position: #{($i)*-20}px 0px; }
894 }
895
896 p#routing_summary {
897     padding: 0 $lineheight $lineheight/4;
898 }
899
900 td.instruction, td.distance {
901     padding-top: $lineheight/5;
902     padding-bottom: $lineheight/5;
903     border-bottom: 1px solid $grey;
904 }
905 td.distance {
906     color: $darkgrey;
907     text-align: right;
908     font-size: x-small;
909 }
910 tr.turn {
911     cursor: pointer;
912 }
913 tr.turn:hover {
914     background: $list-highlight;
915 }
916 .routing_engines, #route_from, #route_to { margin-left: 25px; }
917 .routing_marker { width: 15px; position: absolute; cursor: move; }
918
919 /* Rules for entity history */
920
921 #sidebar_content {
922   .browse_details {
923     position: relative;
924     border-bottom: $keyline;
925   }
926 }
927
928 .browse_status {
929   display: none;
930 }
931
932 /* Rules for the history sidebar */
933
934 #sidebar .changesets {
935   li {
936     cursor: pointer;
937
938     &.selected { background: $list-highlight; }
939     /* color is derived from changeset bbox fillColor in history.js */
940   }
941
942   .comments {
943     float: right;
944     color: $darkgrey;
945   }
946
947   .comments-0 {
948     opacity: 0.5;
949   }
950
951   .changeset_more .loader {
952     display: none;
953     width: 100%;
954   }
955 }
956
957 /* Rules for the browse sidebar */
958
959 #sidebar_content {
960   .browse-section {
961     padding: $lineheight/2 $lineheight;
962     border-bottom: 1px solid $grey;
963
964     h4:first-child {
965       margin-top: 0;
966       word-wrap: break-word;
967     }
968   }
969
970   .browse-section:last-of-type {
971     border-bottom: none;
972   }
973
974   .paginate {
975     float: right;
976     padding: 1px 6px;
977     border: 1px solid $lightgrey;
978     border-radius: 3px;
979   }
980
981   .browse-field {
982     margin-bottom: 10px;
983
984     h4 {
985       padding: 5px 0 5px 10px;
986       font-size: 12px;
987       border: 1px solid $grey;
988       border-radius: 4px 4px 0 0;
989       background-color: $offwhite;
990     }
991
992     p {
993       padding: 7px 10px;
994       font-size: 12px;
995       background-color: #FFF;
996       border: 1px solid $grey;
997       border-top: 0;
998       border-radius: 0 0 4px 4px;
999     }
1000   }
1001
1002   .browse-tag-list {
1003     background-color: $offwhite;
1004     border: 1px solid $grey;
1005     border-radius: 3px;
1006     table-layout: fixed;
1007     border-collapse: separate;
1008     border-spacing: 0;
1009     width: 100%;
1010
1011     th, td {
1012       border-bottom: 1px solid $grey;
1013     }
1014
1015     tr:last-child th, tr:last-child td {
1016       border-bottom: 0;
1017     }
1018
1019     .browse-tag-k,
1020     .browse-tag-v {
1021       width: 50%;
1022       padding: 6px 10px;
1023       word-wrap: break-word;
1024       white-space: pre-wrap;
1025     }
1026
1027     .browse-tag-k {
1028       font-weight: 500;
1029       background-color: $offwhite;
1030     }
1031
1032     .browse-tag-v {
1033       border-left: 1px solid $grey;
1034       background-color: #fff;
1035     }
1036
1037     .colour-preview-box {
1038       float: right;
1039       width: 14px;
1040       height: 14px;
1041       margin: 4px 0px;
1042       border: 1px solid rgba(0, 0, 0, .1);
1043       // add color via inline css on element: background-color: <tag value>;
1044     }
1045   }
1046
1047   .warning {
1048     margin: 0 0 $lineheight/2 0;
1049     padding: 0 $lineheight/2;
1050   }
1051
1052   .note-comments li, .changeset-comments li {
1053     margin: $lineheight/2 0;
1054
1055     p {
1056       margin: 10px 6px 0 6px;
1057       line-height: 1.5;
1058     }
1059   }
1060
1061   .comments-header {
1062     float: left;
1063   }
1064
1065   .subscribe-buttons {
1066     float: left;
1067     margin: 18px 10px 10px;
1068     min-width: 80px;
1069   }
1070
1071   .subscribe-buttons input {
1072     font-size: 90%;
1073     line-height: 15px;
1074     min-height: 20px;
1075   }
1076
1077   span.action-button:hover {
1078     cursor: pointer;
1079     text-decoration: underline;
1080   }
1081
1082   .note-description {
1083     overflow: hidden;
1084     margin: 0 0 10px 10px;
1085   }
1086
1087   .query-intro p {
1088     padding: $lineheight $lineheight $lineheight/2;
1089   }
1090
1091   .query-results {
1092     display: none;
1093     padding-bottom: $lineheight/2;
1094
1095     h3 {
1096       padding: 0 $lineheight;
1097     }
1098
1099     ul {
1100       li {
1101         &.query-result {
1102           cursor: pointer;
1103         }
1104
1105         &.selected {
1106           background: $list-highlight;
1107         }
1108       }
1109     }
1110   }
1111 }
1112
1113 /* Rules for export sidebar */
1114
1115 .export_form {
1116   padding: $lineheight;
1117
1118   .export_area_inputs,
1119   .export_button {
1120     text-align: center;
1121   }
1122
1123   .export_area_inputs {
1124     margin-bottom: $lineheight/2;
1125     input[type="text"] {
1126       width: 80px;
1127       text-align: center;
1128       margin-bottom: 5px;
1129     }
1130   }
1131
1132   .export_boxy {
1133     background: $lightgrey;
1134     border: 1px solid $grey;
1135     border-radius: 3px;
1136
1137     #maxlat { margin-top: -1px; }
1138     #minlon {
1139       float: left;
1140       /* no-r2 */ margin-left: -1px;
1141     }
1142     #maxlon {
1143       float: right;
1144       /* no-r2 */ margin-right: -1px;
1145     }
1146     #minlat { margin-bottom: 0; }
1147   }
1148
1149   .export_bound {
1150     margin: $lineheight/4;
1151   }
1152
1153   .export_button {
1154     margin-top: $lineheight;
1155     margin-bottom: $lineheight;
1156   }
1157
1158   dl {
1159     padding-left: $lineheight/2;
1160     dd {
1161       margin-left: 0;
1162       margin-bottom: 10px;
1163     }
1164   }
1165 }
1166
1167 /* Rules for the routing sidebar */
1168
1169 #sidebar_content {
1170   #routing_credit {
1171     text-align: center;
1172     padding: 0.5em;
1173   }
1174 }
1175
1176 /* Rules for edit pages */
1177
1178 .site-edit {
1179   #content {
1180     position: absolute;
1181     top: $headerHeight;
1182     bottom: 0;
1183     width: 100%;
1184   }
1185
1186   #map {
1187     height: 100%;
1188     overflow: hidden;
1189   }
1190 }
1191
1192 /* Rules for non-map content pages */
1193
1194 .content-heading {
1195   background: $lightgrey;
1196 }
1197
1198 .content-inner {
1199   position: relative;
1200   max-width: 900px;
1201   margin: auto;
1202   padding: $lineheight;
1203 }
1204
1205 /* Overrides for pages that use new layout conventions */
1206
1207 .users-new,
1208 .users-create,
1209 .users-terms,
1210 .users-confirm {
1211   .content-heading .content-inner {
1212     height: 200px;
1213   }
1214 }
1215
1216 .header-illustration {
1217   background-position: 0 0;
1218   background-repeat: no-repeat;
1219   position: absolute;
1220   height: 200px;
1221   width: 100%;
1222   left: 0;
1223   bottom: 0;
1224
1225   &.new-user-main {
1226     background-image: image-url("sign-up-illustration.png");
1227   }
1228
1229   &.confirm-main {
1230     background-image: image-url("confirm-illustration.png");
1231   }
1232
1233   &.new-user-terms {
1234     background-image: image-url("terms-illustration.png");
1235   }
1236
1237   &.new-user-arm {
1238     height: 110px;
1239     width: 130px;
1240     left: 260px;
1241     top: 160px;
1242     background-image: image-url("sign-up-illustration-arm.png");
1243     z-index: 100;
1244   }
1245 }
1246
1247 [dir=rtl] .header-illustration {
1248   transform: scaleX(-1);
1249 }
1250
1251 #content.maximised {
1252   top: 0;
1253   left: 0;
1254   right: 0;
1255   bottom: 0;
1256   border: 0;
1257   z-index: 2000;
1258 }
1259
1260 /* Rules for small maps in content areas */
1261
1262 .content_map {
1263   height: 200px;
1264   border: 1px solid $grey;
1265   margin-bottom: $lineheight;
1266 }
1267
1268 @include media-breakpoint-up(md) {
1269   .content_map {
1270     height: 400px;
1271   }
1272 }
1273
1274 /* Rules for the new trace form */
1275
1276 #new_trace {
1277   input[type=text] {
1278     width: 50%;
1279     width: calc(100% - 150px);
1280     max-width: 500px;
1281   }
1282 }
1283
1284 /* Rules for the edit trace form */
1285
1286 .edit_trace {
1287   .standard-form-row p {
1288     margin-bottom: 0px;
1289   }
1290
1291   input[type=text] {
1292     width: 50%;
1293     width: calc(100% - 150px);
1294     max-width: 500px;
1295   }
1296 }
1297
1298 /* Rules for the user profile page */
1299
1300 #userinformation {
1301   min-height: 100px;
1302   .userinformation-inner {
1303     float: left;
1304   }
1305   .user-description {
1306     width: 100%;
1307     clear: both;
1308   }
1309 }
1310
1311 .admin-user-info small {
1312   margin-bottom: $lineheight/2;
1313   display: inline;
1314   margin-right: $lineheight;
1315 }
1316
1317 .contact-activity {
1318   margin-top: $lineheight;
1319   width: 100%;
1320 }
1321
1322 .activity-details p {
1323   margin-left: 70px;
1324   margin-bottom: 0;
1325 }
1326
1327 .users-show {
1328   // Silly exception; remove when user page is redesigned.
1329   .content-inner {
1330     max-width: none;
1331   }
1332   p#no_home_location {
1333     margin: $lineheight;
1334   }
1335   .user_thumbnail {
1336     margin-top: $lineheight/4;
1337     float: left;
1338   }
1339 }
1340
1341 /* Rules for the user map */
1342
1343 .content_map .leaflet-popup-content {
1344   margin: $lineheight/2;
1345   min-height: 50px;
1346 }
1347
1348 /* Rules for user popups on maps */
1349
1350 .user_popup {
1351   min-width: 200px;
1352   p {
1353     padding: 0 0 5px 0;
1354     margin-top: 0 0 0 60px;
1355     font-size: 12px;
1356   }
1357   img.user_thumbnail {
1358     float: left;
1359     margin: 0 $lineheight/2 0 0;
1360   }
1361 }
1362
1363 /* Rules for the user list */
1364
1365 #user_list {
1366   width: 100%;
1367
1368   tr {
1369     vertical-align: middle;
1370   }
1371
1372   p {
1373     margin-top: 0px;
1374     margin-bottom: 0px;
1375   }
1376 }
1377
1378 #user_list_actions {
1379   float: right;
1380   margin-top: $lineheight/2;
1381 }
1382
1383 /* Rules for the diary list page */
1384
1385 .diary_post {
1386   position: relative;
1387   padding-top: $lineheight;
1388   padding-bottom: $lineheight/2;
1389   border-top: 1px solid $grey;
1390
1391   &:first-of-type {
1392     margin-top: $lineheight/2;
1393   }
1394
1395   &.deleted {
1396     background-color: #fee;
1397   }
1398
1399   .post_heading {
1400     margin-bottom: $lineheight;
1401
1402     h2 {
1403       margin-top: 0;
1404       margin-bottom: $lineheight/2;
1405     }
1406   }
1407
1408   img.user_thumbnail {
1409     float: left;
1410   }
1411
1412   small.deemphasize {
1413     float: left;
1414     display: block;
1415   }
1416 }
1417
1418 .pagination {
1419   padding-top: $lineheight;
1420 }
1421
1422 /* Rules for the diary entry page */
1423
1424 .diary_entries {
1425   #map {
1426     position: relative;
1427     width: 90%;
1428     height: 400px;
1429     border: 1px solid $grey;
1430     display: none;
1431     margin-bottom: $lineheight;
1432   }
1433   #newcomment {
1434     border-top: 1px solid $grey;
1435     padding-top: $lineheight;
1436     margin-top: $lineheight/2;
1437   }
1438   .comments {
1439     max-width: 740px;
1440   }
1441   .diary-comment {
1442     border-top: 1px dashed $grey;
1443     padding-top: $lineheight/2;
1444     padding-bottom: $lineheight/2;
1445     &:first-child {
1446       margin-top: $lineheight/2;
1447       padding-top: $lineheight;
1448       border-top: 1px solid $grey;
1449     }
1450     &.deleted {
1451       background-color: #fee;
1452     }
1453     p {
1454       margin-bottom: $lineheight/2;
1455     }
1456     .comment-heading {
1457       margin-bottom: 0;
1458       margin-top: 0;
1459     }
1460   }
1461 }
1462
1463 .diary_entries-show img.user_thumbnail {
1464   float: left;
1465 }
1466
1467
1468 .diary-subscribe-buttons {
1469   position:relative;
1470   top: -30px;
1471   left: 130px;
1472 }
1473
1474 /* Rules for the log in page */
1475
1476 #login_auth_buttons {
1477   margin-bottom: 0;
1478 }
1479
1480 #login_auth_buttons li {
1481   float: left;
1482   padding: $lineheight/4 $lineheight/2;
1483 }
1484
1485 /* Rules for the account confirmation page */
1486
1487 .users-terms {
1488   .legale {
1489     border: 1px solid $grey;
1490     padding: $lineheight;
1491     margin-bottom: $lineheight;
1492     overflow: auto;
1493     height: 20em;
1494
1495     li {
1496       list-style: inherit;
1497     }
1498
1499     ol ol {
1500       list-style-type: lower-alpha;
1501     }
1502   }
1503
1504   #decline {
1505     background: $lightblue;
1506     &:hover {
1507       background: darken($lightblue, $hovercolor);
1508     }
1509   }
1510 }
1511
1512 /* Rules for the account settings page */
1513
1514 #accountForm .user_map {
1515   position: relative;
1516   width: 500px;
1517   height: 400px;
1518   border: 1px solid $grey;
1519 }
1520
1521 #accountForm .user_image {
1522   margin-bottom: 0;
1523 }
1524
1525 #accountForm #user_image {
1526   margin-left: 20px;
1527 }
1528
1529 #accountForm ul.accountImage-options {
1530   margin-left: 120px;
1531 }
1532
1533 .nohome .location {
1534   display: none;
1535 }
1536
1537 #homerow .message {
1538   display: none;
1539 }
1540
1541 .nohome .message {
1542   display: inline !important;
1543 }
1544
1545 /* Rules for the oauth settings page */
1546
1547 .oauth_clients .buttons .oauth-edit {
1548   border-radius: 2px 0 0 2px;
1549 }
1550
1551 .oauth_clients .buttons .oauth-delete {
1552   border-radius: 0 2px 2px 0;
1553 }
1554
1555 /* Rules for the oauth authorization page */
1556
1557 .oauth-authorize ul {
1558   list-style: none;
1559 }
1560
1561 /* Rules for messages pages */
1562
1563 .messages {
1564   input[type="submit"] {
1565     margin: auto;
1566   }
1567
1568   .inbox-row {
1569     background: $offwhite;
1570   }
1571
1572   .inbox-row-unread {
1573     background: #CBEEA7;
1574   }
1575
1576   .right {
1577     float: right;
1578   }
1579 }
1580
1581 .inbox-row .inbox-mark-read {
1582   display: none;
1583 }
1584
1585 .info-line {
1586   margin-bottom: $lineheight;
1587   padding: $lineheight/4 0px 4px 0px;
1588   border-bottom: 1px solid $grey;
1589
1590   form, form div {
1591     display: inline;
1592   }
1593 }
1594
1595 .info-line .user_thumbnail_tiny {
1596   vertical-align: middle;
1597 }
1598
1599 .inbox-sent {
1600   white-space: nowrap;
1601 }
1602
1603 .inbox-mark-unread,
1604 .inbox-mark-read,
1605 .inbox-delete {
1606   width: 1%;
1607 }
1608
1609 .inbox-row-unread .inbox-mark-unread {
1610   display: none;
1611 }
1612
1613 /* Rules for "flash" notice boxes shown at the top of the content area */
1614
1615 .flash {
1616   padding: $lineheight;
1617
1618   &.error {
1619     background-color: #ff7070;
1620   }
1621
1622   &.warning {
1623     background-color: #ffe0cc;
1624   }
1625
1626   &.notice {
1627     background-color: #CBEEA7;
1628   }
1629
1630   div.message {
1631     display: inline-block;
1632     margin-left: $lineheight / 2;
1633     vertical-align: middle;
1634
1635     p {
1636       margin-top: $lineheight * 0.5;
1637       margin-bottom: $lineheight * 0.5;
1638
1639       &:first-child {
1640         margin-top: 0px;
1641       }
1642
1643       &:last-child {
1644         margin-bottom: 0px;
1645       }
1646     }
1647   }
1648 }
1649
1650 /* Rules for highlighting fields with rails validation errors */
1651
1652 .formError {
1653   display: inline-block;
1654   padding: 5px 10px;
1655   margin-top: 5px;
1656   border-radius: 4px;
1657   font-size: 12px;
1658   color: #fff;
1659   background-color: #ff7070;
1660 }
1661
1662 /* Rules for rails validation error boxes */
1663
1664 #errorExplanation {
1665   width: 400px;
1666   border: 2px solid #ff7070;
1667   padding: 0 $lineheight/2;
1668   margin-bottom: $lineheight;
1669   background-color: #f0f0f0;
1670
1671   h2 {
1672     margin: 0 -10px 10px -10px;
1673     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1674     font-weight: bold;
1675     font-size: 12px;
1676     background-color: #c00;
1677     color: #fff;
1678     text-align: left;
1679   }
1680
1681   p {
1682     color: #333;
1683     margin-bottom: 0px;
1684     padding: $lineheight/4;
1685   }
1686 }
1687
1688 /* Rules for forms */
1689
1690 .standard-form {
1691   fieldset {
1692     margin-bottom: $lineheight;
1693   }
1694   label.standard-label {
1695     display: block;
1696     margin-bottom: $lineheight/4;
1697     font-size: $typeheight;
1698     font-weight: bold;
1699     line-height: 1.5;
1700   }
1701   label.standard-label.secondary {
1702     display: inline-block;
1703     font-weight: normal;
1704   }
1705   .form-help {
1706     font-weight: normal;
1707   }
1708   .form-column {
1709     float: left;
1710     margin-right: 20px;
1711   }
1712   .form-divider {
1713     margin-top: $lineheight;
1714     padding-top: $lineheight;
1715     border-top: 1px solid $lightgrey;
1716   }
1717   .horizontal-list .standard-form-row {
1718     float: left;
1719     padding-right: 10px;
1720   }
1721   .standard-form-row {
1722     margin-bottom: $lineheight/2;
1723   }
1724   .form-list {
1725     margin-bottom: 0;
1726   }
1727   .form-list li {
1728     margin-bottom: 5px;
1729     list-style-type: none;
1730   }
1731   input[type="checkbox"],
1732   input[type="radio"] {
1733     float: left;
1734     margin-top: 5px;
1735   }
1736 }
1737
1738 #remember_me_openid {
1739   display: block;
1740 }
1741
1742 select {
1743   padding: 2px;
1744 }
1745
1746 input[type="checkbox"],
1747 input[type="radio"] {
1748     margin-right: 5px;
1749 }
1750
1751 input[type="text"],
1752 input[type="email"],
1753 input[type="url"],
1754 input[type="password"],
1755 textarea {
1756   color: #222;
1757   background-color: #fff;
1758   border: 1px solid $grey;
1759   border-radius: 3px;
1760   padding: 2px 5px;
1761   margin: 0;
1762   width: 200px;
1763
1764   &.field_with_errors {
1765     border: 2px solid #ff7070;
1766   }
1767 }
1768
1769 textarea {
1770   padding: 5px;
1771   width: 100%;
1772   min-height: 50px;
1773   resize: vertical;
1774 }
1775
1776 /* Rules for user images */
1777
1778 img.user_image {
1779   max-width: 100px;
1780   max-height: 100px;
1781   border: 1px solid $grey;
1782   margin-bottom: $lineheight;
1783   float: left;
1784   margin-right: $lineheight;
1785 }
1786
1787 img.user_thumbnail {
1788   max-width: 50px;
1789   max-height: 50px;
1790   border: 1px solid $grey;
1791   margin-right: $lineheight;
1792 }
1793
1794 img.user_thumbnail_tiny {
1795   width: auto;
1796   height: auto;
1797   max-width: 25px;
1798   max-height: 25px;
1799   border: 1px solid $grey;
1800 }
1801
1802 /* Rules for geo microformats */
1803
1804 abbr.geo {
1805   border-bottom: none;
1806 }
1807
1808 /* General styles for action lists / subnavs / pager navs */
1809
1810 ul.secondary-actions {
1811   font-style: normal;
1812   margin-bottom: 0;
1813   margin-left: 0;
1814   padding: 0;
1815   &.pager {
1816     display: inline-block;
1817     margin-right: 60px;
1818   }
1819   > li {
1820     display: block;
1821     float: left;
1822     list-style: none;
1823     border-left: 1px solid $grey;
1824     padding-left: $lineheight/2;
1825     margin-right: $lineheight/2;
1826     &:first-child {
1827       border-left: 0;
1828       padding-left: 0;
1829     }
1830     &:last-child {
1831       margin-right: 0px;
1832     }
1833   }
1834 }
1835
1836 div.secondary-actions {
1837   padding: 10px;
1838   text-align: center;
1839 }
1840
1841 /* Utility for managing inner content areas */
1842
1843 .inner22 { padding: $lineheight;}
1844
1845 .inner12 { padding: $lineheight/2 $lineheight;}
1846
1847 .inner11 { padding: $lineheight/2;}
1848
1849 .inner20 { padding: $lineheight 0;}
1850
1851 .inner02 { padding: 0 $lineheight;}
1852
1853 /* Utility for general button styles */
1854
1855 input[type="button"],
1856 input[type="submit"],
1857 input[type="reset"],
1858 a.button {
1859   cursor: pointer;
1860   border: 0;
1861   display: inline-block;
1862   padding: $lineheight/4 $lineheight/2;
1863   min-height: 20px + $lineheight/2;
1864   min-width: 120px;
1865   margin: 0 0 $lineheight/2 0;
1866   color: white;
1867   background: $blue;
1868   text-align: center;
1869   border-radius: 2px;
1870   &:hover {
1871     background: darken($blue, $hovercolor);
1872     text-decoration: none;
1873   }
1874   &.deemphasize {
1875     background: $lightblue;
1876     &:hover {
1877       background: darken($lightblue, $hovercolor);
1878     }
1879   }
1880   &:disabled {
1881     background: $lightgrey;
1882     &:hover {
1883       background: $lightgrey;
1884     }
1885   }
1886   &:last-child {
1887     margin-bottom: 0;
1888   }
1889 }
1890
1891 input[type="button"],
1892 input[type="submit"],
1893 input[type="reset"] {
1894   line-height: normal;
1895 }
1896
1897 a.button {
1898   line-height: 20px;
1899 }
1900
1901 .buttons {
1902   min-width: 200px;
1903   input[type="submit"],
1904   input[type="button"],
1905   input[type="reset"],
1906   .button,
1907   .button_to {
1908     box-sizing: border-box;
1909     float: left;
1910     border-radius: 0;
1911     margin:0;
1912     min-width: 75px;
1913     max-width: 180px;
1914     border-right:1px solid white;
1915     text-overflow: ellipsis;
1916     white-space: nowrap;
1917     overflow: hidden;
1918   }
1919   input:first-child,
1920   .button:first-child,
1921   .button_to:first-child {
1922     border-radius:2px 0 0 2px;
1923   }
1924   input:last-child,
1925   .button:last-child,
1926   .button_to:last-child {
1927     border-radius:0 2px 2px 0;
1928     border-right-width: 0;
1929   }
1930   input:only-child,
1931   .button:only-child,
1932   .button_to:only-child,
1933   *[value="Hide"] + input:last-child,
1934   *[value="Hide"] + .button:last-child,
1935   *[value="Hide"] + .button_to:last-child {
1936     border-radius:2px;
1937     border-right-width: 0;
1938   }
1939     /* if a 3-button set has a hidden middle button */
1940   *[value="Hide"] + input:nth-child(3),
1941   *[value="Hide"] + .button:nth-child(3),
1942   *[value="Hide"] + .button_to:nth-child(3) {
1943     border-radius:0 2px 2px 0;
1944     border-right-width: 0;
1945   }
1946   /* if a 3-button set starts with a hidden button */
1947   *[value="Hide"] + input:nth-child(2):not(:last-child),
1948   *[value="Hide"] + .button:nth-child(2):not(:last-child),
1949   *[value="Hide"] + .button_to:nth-child(2):not(:last-child) {
1950     border-radius:2px 0 0 2px;
1951     border-right-width: 1px;
1952   }
1953 }
1954
1955 /* Customise the background colour of striped tables */
1956
1957 .table-striped > tbody > tr:nth-child(2n+1) > td,
1958 .table-striped > tbody > tr:nth-child(2n+1) > th {
1959    background-color: $offwhite;
1960 }
1961
1962 /* Rules for OpenID logo */
1963
1964 .openid_logo {
1965   vertical-align: text-bottom;
1966   border: 0;
1967 }
1968
1969 /* Rules for rich text */
1970
1971 .richtext,
1972 .prose {
1973   code {
1974     font-size: 13px;
1975     background: $lightgrey;
1976     padding: 2px 3px;
1977   }
1978
1979   pre {
1980     font-size: 13px;
1981     background: $lightgrey;
1982     padding: 2px 3px;
1983     white-space: pre-wrap;
1984
1985     code {
1986       padding: 0;
1987     }
1988   }
1989
1990   img {
1991     padding: $lineheight;
1992     background-color: $offwhite;
1993     display: block;
1994     max-width: 100%;
1995     margin: auto;
1996   }
1997
1998   blockquote {
1999     border-left: $lineheight solid $offwhite;
2000     padding-left: $lineheight;
2001     margin: 0;
2002     color: $darkgrey;
2003   }
2004 }
2005
2006 .diary_post .richtext {
2007     margin-top: $lineheight;
2008   }
2009
2010 .comments .richtext {
2011   margin-left: 70px;
2012   margin-top: 0;
2013 }
2014
2015 /* Rules for rich text editors */
2016
2017 input.richtext_title[type="text"] {
2018   width: 50%;
2019   width: calc(100% - 235px);
2020
2021   @media only screen and (max-width:768px) {
2022     width: 100%;
2023   }
2024 }
2025
2026 .richtext_container {
2027   margin-bottom: $lineheight;
2028
2029   .richtext_content {
2030     width: 50%;
2031     width: calc(100% - 235px);
2032     display: inline-block;
2033     vertical-align: top;
2034
2035     @media only screen and (max-width:768px) {
2036       width: 100%;
2037     }
2038
2039     .richtext_preview {
2040       display: inline-block;
2041       padding: $lineheight;
2042       background-color: $offwhite;
2043       overflow-x: auto;
2044
2045       &.loading {
2046         background-image: image-url("loading.gif");
2047         background-repeat: no-repeat;
2048         background-position: center;
2049       }
2050
2051       > :first-child {
2052         margin-top: 0px;
2053       }
2054     }
2055   }
2056
2057   .richtext_help {
2058     display: inline-block;
2059     vertical-align: top;
2060     margin-left: 15px;
2061     background-color: $offwhite;
2062     padding: $lineheight/2;
2063     width: 220px;
2064
2065     ul {
2066       margin-bottom: 0;
2067     }
2068
2069     h4.heading, li {
2070       border-bottom: 1px solid $grey;
2071       margin-bottom: $lineheight/4;
2072       padding-bottom: $lineheight/4;
2073     }
2074
2075     li h4, li span, li p {
2076       display: inline-block;
2077       vertical-align: top;
2078       font-size: 11px;
2079     }
2080
2081     li h4 {
2082       width: 40%;
2083       margin: 0;
2084     }
2085
2086     li span, li p {
2087       width: 50%;
2088       margin-left: $lineheight/2;
2089       margin-bottom: $lineheight/4;
2090       white-space: nowrap;
2091     }
2092   }
2093 }
2094
2095 /* Rules for the user notes list */
2096
2097 .note_list {
2098   tr.creator {
2099     background-color: $offwhite;
2100   }
2101 }
2102
2103 /* Rules for the iD editor */
2104
2105 .id-embed {
2106   width: 100%;
2107   height: 100%;
2108 }
2109
2110 /* Rules for the "Welcome" page */
2111 .site-welcome, .site-fixthemap {
2112   .center {
2113     text-align: center;
2114     .sprite {
2115       float: none;
2116       margin: auto;
2117     }
2118   }
2119
2120   .sprite {
2121     background-image: image-url("welcome-sprite.png");
2122     background-size: 500px 250px;
2123     display: block;
2124     float: left;
2125   }
2126
2127   .icon-list {
2128     padding-bottom: 20px;
2129     div {
2130       margin-bottom: 10px;
2131       p {
2132         padding-top: 10px;
2133       }
2134     }
2135   }
2136   .sprite.small {
2137     width: 50px;
2138     height: 50px;
2139   }
2140
2141   .sprite.x {
2142     /* no-r2 */ background-position: -50px 0;
2143   }
2144
2145   .sprite.term {
2146     margin-right: 10px;
2147     vertical-align: middle;
2148   }
2149
2150   .sprite.node {
2151     /* no-r2 */ background-position: -100px 0;
2152   }
2153
2154   .sprite.way {
2155     /* no-r2 */ background-position: -150px 0;
2156   }
2157
2158   .sprite.tag {
2159     /* no-r2 */ background-position: -200px 0;
2160   }
2161
2162   .sprite.editor {
2163     /* no-r2 */ background-position: -250px 0;
2164   }
2165
2166   .sprite.question {
2167     /* no-r2 */ background-position: -300px 0;
2168   }
2169
2170   .sprite.rules {
2171     /* no-r2 */ background-position: -350px 0;
2172   }
2173
2174   .start-mapping {
2175     margin: auto;
2176     cursor: pointer;
2177     border: none;
2178     padding: 20px 40px;
2179     font-size: 30px;
2180     text-decoration: none;
2181   }
2182
2183   .icon.note {
2184     background-color: #333;
2185     border-radius: 4px;
2186   }
2187 }
2188
2189 .site-about #content {
2190   background-color: $lightgrey;
2191   background-position: 50% 50%;
2192   background-repeat: no-repeat;
2193   background-size: cover;
2194   background-attachment: fixed;
2195
2196
2197   .content-inner {
2198     position: relative;
2199     color: #333;
2200     min-width: 320px;
2201     max-width: 640px;
2202   }
2203
2204   .text {
2205     background: white;
2206     padding: 40px;
2207   }
2208
2209   .attr {
2210     position: relative;
2211     padding: 170px 40px 20px;
2212     background: #333;
2213     background: rgba(0, 0, 0, .8);
2214     margin-bottom: 0;
2215     margin-top: -20px;
2216
2217     h1 {
2218       display: block;
2219       color: white;
2220       font-weight: 300;
2221       font-size: 34px;
2222       span {
2223         color: $vibrant-green;
2224       }
2225     }
2226
2227     .user-image {
2228       position: absolute;
2229       top: 0px;
2230       right: 240px;
2231       left: 0px;
2232       height: 150px;
2233       background-position: 0 50%;
2234       background-repeat: no-repeat;
2235       background-image: image-url('about/osm.png');
2236       background-size: cover;
2237       background-color: $vibrant-green;
2238     }
2239
2240     .byosm {
2241       position: absolute;
2242       top: 0px;
2243       right: 0px;
2244       z-index: 1;
2245       width: 240px;
2246       height: 150px;
2247       padding: 20px 20px 20px 40px;
2248       font: 500 20px/24px Helvetica, Arial, sans-serif;
2249       white-space: nowrap;
2250       color: #fff;
2251       background: $vibrant-green;
2252     }
2253
2254     .byosm span {
2255       display: inline-block;
2256       width: 20px;
2257       margin-left: -20px;
2258     }
2259   }
2260
2261   .icon {
2262     width: 30px;
2263     height: 30px;
2264     margin-right: 10px;
2265     vertical-align: middle;
2266     background: 40px 40px image-url('about/sprite.png') no-repeat;
2267
2268     &.local {
2269       /* no-r2 */
2270       background-position: 0px 0px;
2271     }
2272     &.community {
2273       /* no-r2 */
2274       background-position: 0px -40px;
2275     }
2276     &.open {
2277       /* no-r2 */
2278       background-position: 0px -80px;
2279     }
2280     &.partners {
2281       /* no-r2 */
2282       background-position: 0px -120px;
2283     }
2284     &.infringement {
2285       /* no-r2 */
2286       background-position: 0px -160px;
2287     }
2288     &.legal {
2289       /* no-r2 */
2290       background-position: -45px -160px;
2291     }
2292   }
2293 }
2294
2295 @import 'browse';
2296
2297 @media only screen and (max-width:960px) {
2298   .header-illustration.new-user-arm {
2299     display: none;
2300   }
2301 }
2302
2303 .read-reports {
2304   background: $lightgrey;
2305   opacity: 0.7;
2306 }