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