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