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