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