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