]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.scss
Remove spacing tweaks and legacy pagination spacing CSS
[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 /* Rules for the diary entry page */
1277
1278 .diary_entries {
1279   #map {
1280     height: 400px;
1281     border: 1px solid $grey;
1282     display: none;
1283     margin-bottom: $lineheight;
1284   }
1285   #newcomment {
1286     border-top: 1px solid $grey;
1287     padding-top: $lineheight;
1288     margin-top: $lineheight/2;
1289   }
1290   .comments {
1291     max-width: 740px;
1292   }
1293   .diary-comment {
1294     border-top: 1px dashed $grey;
1295     padding-top: $lineheight/2;
1296     padding-bottom: $lineheight/2;
1297     &:first-child {
1298       margin-top: $lineheight/2;
1299       padding-top: $lineheight;
1300       border-top: 1px solid $grey;
1301     }
1302     &.deleted {
1303       background-color: #fee;
1304     }
1305     p {
1306       margin-bottom: $lineheight/2;
1307     }
1308     .comment-heading {
1309       margin-bottom: 0;
1310       margin-top: 0;
1311     }
1312   }
1313 }
1314
1315 .diary_entries-show img.user_thumbnail {
1316   float: left;
1317 }
1318
1319
1320 .diary-subscribe-buttons {
1321   position: relative;
1322   top: -30px;
1323   left: 130px;
1324 }
1325
1326 /* Rules for the log in page */
1327
1328 #login_auth_buttons {
1329   margin-bottom: 0;
1330
1331   li {
1332     float: left;
1333     padding: $lineheight/4 $lineheight/2;
1334   }
1335 }
1336
1337 /* Rules for the account confirmation page */
1338
1339 .users-terms {
1340   .legale {
1341     border: 1px solid $grey;
1342     padding: $lineheight;
1343     margin-bottom: $lineheight;
1344     overflow: auto;
1345     height: 20em;
1346
1347     li {
1348       list-style: inherit;
1349     }
1350
1351     ol ol {
1352       list-style-type: lower-alpha;
1353     }
1354   }
1355
1356   #decline {
1357     background: $lightblue;
1358     &:hover {
1359       background: darken($lightblue, $hovercolor);
1360     }
1361   }
1362 }
1363
1364 /* Rules for the account settings page */
1365
1366 #accountForm .user_image {
1367   margin-bottom: 0;
1368 }
1369
1370 #accountForm #user_image {
1371   margin-left: 20px;
1372 }
1373
1374 #accountForm ul.accountImage-options {
1375   margin-left: 120px;
1376 }
1377
1378 .nohome .location {
1379   display: none;
1380 }
1381
1382 #homerow .message {
1383   display: none;
1384 }
1385
1386 .nohome .message {
1387   display: inline !important;
1388 }
1389
1390 /* Rules for the oauth settings page */
1391
1392 .oauth_clients .buttons .oauth-edit {
1393   border-radius: 2px 0 0 2px;
1394 }
1395
1396 .oauth_clients .buttons .oauth-delete {
1397   border-radius: 0 2px 2px 0;
1398 }
1399
1400 /* Rules for the oauth authorization page */
1401
1402 .oauth-authorize ul {
1403   list-style: none;
1404 }
1405
1406 /* Rules for messages pages */
1407
1408 .messages {
1409   input[type="submit"] {
1410     margin: auto;
1411   }
1412
1413   .inbox-row {
1414     background: $offwhite;
1415   }
1416
1417   .inbox-row-unread {
1418     background: #CBEEA7;
1419   }
1420
1421   .right {
1422     float: right;
1423   }
1424 }
1425
1426 .inbox-row .inbox-mark-read {
1427   display: none;
1428 }
1429
1430 .info-line {
1431   margin-bottom: $lineheight;
1432   padding: $lineheight/4 0px 4px 0px;
1433   border-bottom: 1px solid $grey;
1434
1435   form, form div {
1436     display: inline;
1437   }
1438 }
1439
1440 .info-line .user_thumbnail_tiny {
1441   vertical-align: middle;
1442 }
1443
1444 .inbox-sent {
1445   white-space: nowrap;
1446 }
1447
1448 .inbox-mark-unread,
1449 .inbox-mark-read,
1450 .inbox-delete {
1451   width: 1%;
1452 }
1453
1454 .inbox-row-unread .inbox-mark-unread {
1455   display: none;
1456 }
1457
1458 /* Rules for "flash" notice boxes shown at the top of the content area */
1459
1460 .flash {
1461   padding: $lineheight;
1462
1463   &.error {
1464     background-color: #ff7070;
1465   }
1466
1467   &.warning {
1468     background-color: #ffe0cc;
1469   }
1470
1471   &.notice {
1472     background-color: #CBEEA7;
1473   }
1474
1475   div.message {
1476     display: inline-block;
1477     margin-left: $lineheight / 2;
1478     vertical-align: middle;
1479
1480     p {
1481       margin-top: $lineheight * 0.5;
1482       margin-bottom: $lineheight * 0.5;
1483
1484       &:first-child {
1485         margin-top: 0px;
1486       }
1487
1488       &:last-child {
1489         margin-bottom: 0px;
1490       }
1491     }
1492   }
1493 }
1494
1495 /* Rules for highlighting fields with rails validation errors */
1496
1497 .formError {
1498   display: inline-block;
1499   padding: 5px 10px;
1500   margin-top: 5px;
1501   border-radius: 4px;
1502   font-size: 12px;
1503   color: #fff;
1504   background-color: #ff7070;
1505 }
1506
1507 /* Rules for rails validation error boxes */
1508
1509 #errorExplanation {
1510   width: 400px;
1511   border: 2px solid #ff7070;
1512   padding: 0 $lineheight/2;
1513   margin-bottom: $lineheight;
1514   background-color: #f0f0f0;
1515
1516   h2 {
1517     margin: 0 -10px 10px -10px;
1518     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1519     font-weight: bold;
1520     font-size: 12px;
1521     background-color: #c00;
1522     color: #fff;
1523     text-align: left;
1524   }
1525
1526   p {
1527     color: #333;
1528     margin-bottom: 0px;
1529     padding: $lineheight/4;
1530   }
1531 }
1532
1533 /* Rules for forms */
1534
1535 .standard-form {
1536   fieldset {
1537     margin-bottom: $lineheight;
1538   }
1539   label.standard-label {
1540     display: block;
1541     margin-bottom: $lineheight/4;
1542     font-size: $typeheight;
1543     font-weight: bold;
1544     line-height: 1.5;
1545   }
1546   label.standard-label.secondary {
1547     display: inline-block;
1548     font-weight: normal;
1549   }
1550   .form-help {
1551     font-weight: normal;
1552   }
1553   .form-column {
1554     float: left;
1555     margin-right: 20px;
1556   }
1557   .form-divider {
1558     margin-top: $lineheight;
1559     padding-top: $lineheight;
1560     border-top: 1px solid $lightgrey;
1561   }
1562   .horizontal-list .standard-form-row {
1563     float: left;
1564     padding-right: 10px;
1565   }
1566   .standard-form-row {
1567     margin-bottom: $lineheight/2;
1568   }
1569   .form-list {
1570     margin-bottom: 0;
1571   }
1572   .form-list li {
1573     margin-bottom: 5px;
1574     list-style-type: none;
1575   }
1576   input[type="checkbox"],
1577   input[type="radio"] {
1578     float: left;
1579     margin-top: 5px;
1580   }
1581
1582   #remember_me_openid {
1583     display: block;
1584   }
1585
1586   select {
1587     padding: 2px;
1588   }
1589
1590   input[type="checkbox"],
1591   input[type="radio"] {
1592       margin-right: 5px;
1593   }
1594
1595   input[type="text"],
1596   input[type="email"],
1597   input[type="url"],
1598   input[type="password"],
1599   textarea {
1600     color: #222;
1601     background-color: #fff;
1602     border: 1px solid $grey;
1603     border-radius: 3px;
1604     padding: 2px 5px;
1605     margin: 0;
1606     width: 200px;
1607
1608     &.field_with_errors {
1609       border: 2px solid #ff7070;
1610     }
1611   }
1612
1613   textarea {
1614     padding: 5px;
1615     width: 100%;
1616     min-height: 50px;
1617     resize: vertical;
1618   }
1619
1620
1621   /* Utility for general button styles */
1622
1623   input[type="button"],
1624   input[type="submit"],
1625   input[type="reset"],
1626   a.button {
1627     cursor: pointer;
1628     border: 0;
1629     display: inline-block;
1630     padding: $lineheight/4 $lineheight/2;
1631     min-height: 20px + $lineheight/2;
1632     min-width: 120px;
1633     margin: 0 0 $lineheight/2 0;
1634     color: white;
1635     background: $blue;
1636     text-align: center;
1637     border-radius: 2px;
1638     &:hover {
1639       background: darken($blue, $hovercolor);
1640       text-decoration: none;
1641     }
1642     &.deemphasize {
1643       background: $lightblue;
1644       &:hover {
1645         background: darken($lightblue, $hovercolor);
1646       }
1647     }
1648     &:disabled {
1649       background: $lightgrey;
1650       &:hover {
1651         background: $lightgrey;
1652       }
1653     }
1654     &:last-child {
1655       margin-bottom: 0;
1656     }
1657   }
1658
1659   input[type="button"],
1660   input[type="submit"],
1661   input[type="reset"] {
1662     line-height: normal;
1663   }
1664
1665   a.button {
1666     line-height: 20px;
1667   }
1668
1669   .search_form,
1670   .directions_form {
1671     position: relative;
1672     padding: $lineheight/2;
1673     background-color: $lightgrey;
1674
1675     .query_wrapper {
1676       position: relative;
1677       overflow: hidden;
1678       border-radius: 2px 0 0 2px;
1679     }
1680
1681     input[type=text] {
1682       width: 100%;
1683       height: 30px;
1684       transition: 300ms linear;
1685     }
1686
1687     input[type=text].overflow {
1688       border-right: none;
1689       border-radius: 3px 0px 0px 3px;
1690     }
1691
1692     input:focus {
1693       outline: none;
1694       box-shadow: 0px 0px 7px $vibrant-green;
1695     }
1696
1697     input[type=submit].float {
1698       float: right;
1699       width: auto;
1700       min-width: 0;
1701       border-radius: 0 2px 2px 0;
1702     }
1703
1704     input.error {
1705       background-color: rgba($red, 0.4);
1706     }
1707
1708     select {
1709       /* this next line is to polyfill the vertical alignment of text within a select element,
1710        * which is different between firefox and chrome. */
1711       padding: 0.3em 0;
1712     }
1713
1714     .query_options {
1715       text-align: right;
1716       font-size: 10px;
1717       color: $blue;
1718     }
1719
1720     .describe_location {
1721       position: absolute;
1722       top: 6px;
1723       right: 6px;
1724       font-size: 10px;
1725       color: $blue;
1726     }
1727
1728     .switch_link {
1729       float: right;
1730       width: auto;
1731       min-width: 0;
1732       margin-left: 6px;
1733     }
1734
1735     img.button {
1736       display: block;
1737       width: 20px;
1738       height: 20px;
1739     }
1740
1741     span.force_width {
1742       width: 100%;
1743       padding-right: 25px;
1744       display: block;
1745     }
1746
1747     select.routing_engines {
1748       min-height: 30px;
1749       margin: 0px 0px 5px 25px;
1750     }
1751
1752     input.routing_go {
1753       min-width: 100px;
1754       float: right;
1755     }
1756
1757     div.header {
1758       width: 100%;
1759       height: 30px;
1760     }
1761
1762     div.line {
1763       width: 100%;
1764       margin: 0px 0px 5px 0px;
1765     }
1766
1767     div.loader_copy {
1768       display: none;
1769
1770       img {
1771         vertical-align: middle;
1772       }
1773     }
1774
1775     a.reverse_directions {
1776       cursor: pointer;
1777       margin: 0px 0px 5px 25px;
1778     }
1779   }
1780 }
1781
1782 /* Rules for user images */
1783
1784 img.user_image {
1785   max-width: 100px;
1786   max-height: 100px;
1787   border: 1px solid $grey;
1788   margin-bottom: $lineheight;
1789   float: left;
1790   margin-right: $lineheight;
1791 }
1792
1793 img.user_thumbnail {
1794   max-width: 50px;
1795   max-height: 50px;
1796   border: 1px solid $grey;
1797   margin-right: $lineheight;
1798 }
1799
1800 img.user_thumbnail_tiny {
1801   width: auto;
1802   height: auto;
1803   max-width: 25px;
1804   max-height: 25px;
1805   border: 1px solid $grey;
1806 }
1807
1808 /* Rules for geo microformats */
1809
1810 abbr.geo {
1811   border-bottom: none;
1812 }
1813
1814 /* General styles for action lists / subnavs / pager navs */
1815
1816 ul.secondary-actions {
1817   font-style: normal;
1818   margin-bottom: 0;
1819   margin-left: 0;
1820   padding: 0;
1821   &.pager {
1822     display: inline-block;
1823     margin-right: 60px;
1824   }
1825   > li {
1826     display: block;
1827     float: left;
1828     list-style: none;
1829     border-left: 1px solid $grey;
1830     padding-left: $lineheight/2;
1831     margin-right: $lineheight/2;
1832     &:first-child {
1833       border-left: 0;
1834       padding-left: 0;
1835     }
1836     &:last-child {
1837       margin-right: 0px;
1838     }
1839   }
1840 }
1841
1842 div.secondary-actions {
1843   padding: 10px;
1844   text-align: center;
1845 }
1846
1847 /* Utility for managing inner content areas */
1848
1849 .inner22 { padding: $lineheight;}
1850
1851 .inner12 { padding: $lineheight/2 $lineheight;}
1852
1853 .inner11 { padding: $lineheight/2;}
1854
1855 .inner20 { padding: $lineheight 0;}
1856
1857 .inner02 { padding: 0 $lineheight;}
1858
1859 .buttons {
1860   min-width: 200px;
1861   input[type="submit"],
1862   input[type="button"],
1863   input[type="reset"],
1864   .button,
1865   .button_to {
1866     box-sizing: border-box;
1867     float: left;
1868     border-radius: 0;
1869     margin:0;
1870     min-width: 75px;
1871     max-width: 180px;
1872     border-right:1px solid white;
1873     text-overflow: ellipsis;
1874     white-space: nowrap;
1875     overflow: hidden;
1876   }
1877   input:first-child,
1878   .button:first-child,
1879   .button_to:first-child {
1880     border-radius:2px 0 0 2px;
1881   }
1882   input:last-child,
1883   .button:last-child,
1884   .button_to:last-child {
1885     border-radius:0 2px 2px 0;
1886     border-right-width: 0;
1887   }
1888   input:only-child,
1889   .button:only-child,
1890   .button_to:only-child,
1891   *[value="Hide"] + input:last-child,
1892   *[value="Hide"] + .button:last-child,
1893   *[value="Hide"] + .button_to:last-child {
1894     border-radius:2px;
1895     border-right-width: 0;
1896   }
1897     /* if a 3-button set has a hidden middle button */
1898   *[value="Hide"] + input:nth-child(3),
1899   *[value="Hide"] + .button:nth-child(3),
1900   *[value="Hide"] + .button_to:nth-child(3) {
1901     border-radius:0 2px 2px 0;
1902     border-right-width: 0;
1903   }
1904   /* if a 3-button set starts with a hidden button */
1905   *[value="Hide"] + input:nth-child(2):not(:last-child),
1906   *[value="Hide"] + .button:nth-child(2):not(:last-child),
1907   *[value="Hide"] + .button_to:nth-child(2):not(:last-child) {
1908     border-radius:2px 0 0 2px;
1909     border-right-width: 1px;
1910   }
1911 }
1912
1913 /* Customise the background colour of striped tables */
1914
1915 .table-striped > tbody > tr:nth-child(2n+1) > td,
1916 .table-striped > tbody > tr:nth-child(2n+1) > th {
1917    background-color: $offwhite;
1918 }
1919
1920 /* Rules for OpenID logo */
1921
1922 .openid_logo {
1923   vertical-align: text-bottom;
1924   border: 0;
1925 }
1926
1927 /* Rules for rich text */
1928
1929 .richtext,
1930 .prose {
1931   code {
1932     font-size: 13px;
1933     background: $lightgrey;
1934     padding: 2px 3px;
1935   }
1936
1937   pre {
1938     font-size: 13px;
1939     background: $lightgrey;
1940     padding: 2px 3px;
1941     white-space: pre-wrap;
1942
1943     code {
1944       padding: 0;
1945     }
1946   }
1947
1948   img {
1949     padding: $lineheight;
1950     background-color: $offwhite;
1951     display: block;
1952     max-width: 100%;
1953     margin: auto;
1954   }
1955
1956   blockquote {
1957     border-left: $lineheight solid $offwhite;
1958     padding-left: $lineheight;
1959     margin: 0;
1960     color: $darkgrey;
1961   }
1962 }
1963
1964 .diary_post .richtext {
1965     margin-top: $lineheight;
1966   }
1967
1968 .comments .richtext {
1969   margin-left: 70px;
1970   margin-top: 0;
1971 }
1972
1973 /* Rules for rich text editors */
1974
1975 .standard-form {
1976   input.richtext_title[type="text"] {
1977     width: 50%;
1978     width: calc(100% - 235px);
1979
1980     @media only screen and (max-width:768px) {
1981       width: 100%;
1982     }
1983   }
1984
1985   .richtext_container {
1986     margin-bottom: $lineheight;
1987
1988     .richtext_content {
1989       width: 50%;
1990       width: calc(100% - 235px);
1991       display: inline-block;
1992       vertical-align: top;
1993
1994       @media only screen and (max-width:768px) {
1995         width: 100%;
1996       }
1997
1998       .richtext_preview {
1999         display: inline-block;
2000         padding: $lineheight;
2001         background-color: $offwhite;
2002         overflow-x: auto;
2003
2004         &.loading {
2005           background-image: image-url("loading.gif");
2006           background-repeat: no-repeat;
2007           background-position: center;
2008         }
2009
2010         > :first-child {
2011           margin-top: 0px;
2012         }
2013       }
2014     }
2015
2016     .richtext_help {
2017       display: inline-block;
2018       vertical-align: top;
2019       margin-left: 15px;
2020       background-color: $offwhite;
2021       padding: $lineheight/2;
2022       width: 220px;
2023
2024       ul {
2025         margin-bottom: 0;
2026       }
2027
2028       h4.heading, li {
2029         border-bottom: 1px solid $grey;
2030         margin-bottom: $lineheight/4;
2031         padding-bottom: $lineheight/4;
2032       }
2033
2034       li h4, li span, li p {
2035         display: inline-block;
2036         vertical-align: top;
2037         font-size: 11px;
2038       }
2039
2040       li h4 {
2041         width: 40%;
2042         margin: 0;
2043       }
2044
2045       li span, li p {
2046         width: 50%;
2047         margin-left: $lineheight/2;
2048         margin-bottom: $lineheight/4;
2049         white-space: nowrap;
2050       }
2051     }
2052   }
2053 }
2054
2055 /* Rules for the user notes list */
2056
2057 .note_list {
2058   tr.creator {
2059     background-color: $offwhite;
2060   }
2061 }
2062
2063 /* Rules for the iD editor */
2064
2065 .id-embed {
2066   width: 100%;
2067   height: 100%;
2068 }
2069
2070 /* Rules for the "Welcome" page */
2071 .site-welcome, .site-fixthemap {
2072   .center {
2073     text-align: center;
2074     .sprite {
2075       float: none;
2076       margin: auto;
2077     }
2078   }
2079
2080   .sprite {
2081     background-image: image-url("welcome-sprite.png");
2082     background-size: 500px 250px;
2083     display: block;
2084     float: left;
2085   }
2086
2087   .icon-list {
2088     padding-bottom: 20px;
2089     div {
2090       margin-bottom: 10px;
2091       p {
2092         padding-top: 10px;
2093       }
2094     }
2095   }
2096   .sprite.small {
2097     width: 50px;
2098     height: 50px;
2099   }
2100
2101   .sprite.x {
2102     /* no-r2 */ background-position: -50px 0;
2103   }
2104
2105   .sprite.term {
2106     margin-right: 10px;
2107     vertical-align: middle;
2108   }
2109
2110   .sprite.node {
2111     /* no-r2 */ background-position: -100px 0;
2112   }
2113
2114   .sprite.way {
2115     /* no-r2 */ background-position: -150px 0;
2116   }
2117
2118   .sprite.tag {
2119     /* no-r2 */ background-position: -200px 0;
2120   }
2121
2122   .sprite.editor {
2123     /* no-r2 */ background-position: -250px 0;
2124   }
2125
2126   .sprite.question {
2127     /* no-r2 */ background-position: -300px 0;
2128   }
2129
2130   .sprite.rules {
2131     /* no-r2 */ background-position: -350px 0;
2132   }
2133
2134   .start-mapping {
2135     margin: auto;
2136     cursor: pointer;
2137     border: none;
2138     padding: 20px 40px;
2139     font-size: 30px;
2140     text-decoration: none;
2141   }
2142
2143   .icon.note {
2144     background-color: #333;
2145     border-radius: 4px;
2146   }
2147 }
2148
2149 .site-about #content {
2150   background-color: $lightgrey;
2151   background-position: 50% 50%;
2152   background-repeat: no-repeat;
2153   background-size: cover;
2154   background-attachment: fixed;
2155
2156
2157   .content-inner {
2158     position: relative;
2159     color: #333;
2160     min-width: 320px;
2161     max-width: 640px;
2162   }
2163
2164   .text {
2165     background: white;
2166     padding: 40px;
2167   }
2168
2169   .attr {
2170     position: relative;
2171     padding: 170px 40px 20px;
2172     background: #333;
2173     background: rgba(0, 0, 0, .8);
2174     margin-bottom: 0;
2175     margin-top: -20px;
2176
2177     h1 {
2178       display: block;
2179       color: white;
2180       font-weight: 300;
2181       font-size: 28px;
2182       span {
2183         color: $vibrant-green;
2184       }
2185     }
2186
2187     @include media-breakpoint-up(sm) {
2188       h1 {
2189         font-size: 34px;
2190       }
2191     }
2192
2193     .user-image {
2194       position: absolute;
2195       top: 0px;
2196       right: 240px;
2197       left: 0px;
2198       height: 150px;
2199       background-position: 0 50%;
2200       background-repeat: no-repeat;
2201       background-image: image-url('about/osm.png');
2202       background-size: cover;
2203       background-color: $vibrant-green;
2204     }
2205
2206     .byosm {
2207       position: absolute;
2208       top: 0px;
2209       right: 0px;
2210       z-index: 1;
2211       width: 240px;
2212       height: 150px;
2213       padding: 20px 20px 20px 40px;
2214       font: 500 20px/24px Helvetica, Arial, sans-serif;
2215       white-space: nowrap;
2216       color: #fff;
2217       background: $vibrant-green;
2218     }
2219
2220     .byosm span {
2221       display: inline-block;
2222       width: 20px;
2223       margin-left: -20px;
2224     }
2225   }
2226
2227   .icon {
2228     width: 30px;
2229     height: 30px;
2230     margin-right: 10px;
2231     vertical-align: middle;
2232     background: 40px 40px image-url('about/sprite.png') no-repeat;
2233
2234     &.local {
2235       /* no-r2 */
2236       background-position: 0px 0px;
2237     }
2238     &.community {
2239       /* no-r2 */
2240       background-position: 0px -40px;
2241     }
2242     &.open {
2243       /* no-r2 */
2244       background-position: 0px -80px;
2245     }
2246     &.partners {
2247       /* no-r2 */
2248       background-position: 0px -120px;
2249     }
2250     &.infringement {
2251       /* no-r2 */
2252       background-position: 0px -160px;
2253     }
2254     &.legal {
2255       /* no-r2 */
2256       background-position: -45px -160px;
2257     }
2258   }
2259 }
2260
2261 @import 'browse';
2262
2263 @media only screen and (max-width:960px) {
2264   .header-illustration.new-user-arm {
2265     display: none;
2266   }
2267 }