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