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