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