Restore prohibition on low-zoom notes
[rails.git] / app / assets / stylesheets / common.css.scss
1 /* Parameters */
2 $lineheight: 20px;
3 $typeheight: 14px;
4
5 $offwhite: #f4f4ff;
6 $blue: #7092FF;
7 $lightblue: #B8C5F0;
8 $grey: #AAA;
9 $keyline: #CCC;
10 $hovercolor: 20%;
11
12 /* Styles common to large and small screens */
13
14 /* Minimal CSS reset */
15
16 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, input {
17   margin: 0;
18   padding: 0;
19   border: 0;
20   font-size:100%;
21 }
22
23 fieldset,img { border: 0; }
24
25 legend { color: #000; }
26
27 sup { vertical-align: text-top; }
28
29 sub { vertical-align: text-bottom; }
30
31 table {
32   border-collapse: collapse;
33   border-spacing: 0;
34 }
35
36 li { list-style: none; }
37
38 input,
39 select,
40 textarea,
41 body { font: #{$typeheight}/#{$lineheight} "Helvetica Neue",Arial,sans-serif; }
42
43 abbr, acronym {
44   border-bottom: .1em dotted;
45   cursor: help;
46 }
47
48 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */
49
50 .clearfix:before,
51 .clearfix:after {
52     content: " ";
53     display: table;
54 }
55
56 .clearfix:after {
57     clear: both;
58 }
59
60 /* Default rules for the body of every page */
61
62 * {
63   -moz-box-sizing: border-box;
64   -webkit-box-sizing: border-box;
65   box-sizing: border-box;
66 }
67
68 body {
69   font-family: 'Helvetica Neue',Arial,sans-serif;
70   font-size: $typeheight;
71   line-height: 1.6666;
72   color: #222;
73   background-color: #fff;
74   margin: 0px;
75   padding: 0px;
76   text-align: left;
77 }
78
79 body.slim {
80   background-color: #f0f0f0;
81 }
82
83 h1, h2, h3 {
84   margin-top: $lineheight/2;
85   margin-bottom: $lineheight;
86   font-weight: bold;
87   line-height: 1.2;
88 }
89
90 h1, h2 {
91   font-size: 32px;
92 }
93
94 #content h2 {
95   font-size: 21px;
96 }
97
98 h3 {
99   font-size: 21px;
100   margin-top: $lineheight/2;
101   margin-bottom: $lineheight;
102 }
103
104 h4,h5,h6 {
105   font-size: $typeheight;
106   margin-top: $lineheight/2;
107   margin-bottom: $lineheight/2;
108   font-weight: bold;
109   line-height: 1.5;
110 }
111
112 p, ul {
113   margin-bottom: $lineheight;
114 }
115
116 p > img {
117   width: auto;
118   max-width: 100%;
119 }
120
121 small, aside {
122   font-size: 12px;
123 }
124
125 h1:first-child,
126 h2:first-child,
127 h3:first-child,
128 h4:first-child,
129 h5:first-child,
130 h6:first-child {
131   margin-top: 0;
132 }
133
134 .column-1 {
135   width: 50%;
136   margin: 0 0 $lineheight/2 0;
137 }
138
139 .small_icon {
140   vertical-align: middle;
141   margin-right: $lineheight/4;
142 }
143
144 /* Rules for icons */
145
146 .icon {
147   display:inline-block;
148   vertical-align:top;
149   width:20px;
150   height:20px;
151   background:transparent image-url("sprite.png") no-repeat 0 0;
152   text-indent:-9999px;
153   overflow:hidden;
154   }
155
156 .icon-pre-text {
157     margin-right: 5px;
158 }
159
160 .icon.search      { background-position: 0 0; }
161 .icon.donate      { background-position: -20px 0; }
162 .icon.zoomin      { background-position: -40px 0; }
163 .icon.zoomout     { background-position: -60px 0; }
164 .icon.geolocate   { background-position: -80px 0; }
165 .active .icon.geolocate   { background-position: -80px -20px; }
166 .icon.layers      { background-position: -100px 0; }
167 .icon.key         { background-position: -120px 0; }
168 .icon.share       { background-position: -140px 0; }
169 .icon.clipboard   { background-position: -160px 0; }
170 .icon.link        { background-position: -180px 0; }
171 .icon.close       { background-position: -200px 0; }
172 .icon.check       { background-position: -220px 0; }
173 .icon.note        { background-position: -240px 0; }
174
175 /* Rules for links */
176
177 a {
178   color: #00f;
179   text-decoration: none;
180   &:hover {
181     text-decoration: underline;
182   }
183 }
184
185 /* Rules for horizontal lines */
186
187 hr {
188   border: none;
189   background-color: #ccc;
190   color: #ccc;
191   height: 1px;
192 }
193
194 /* General styles for tables */
195
196 table {
197   width: 100%;
198   margin-bottom: $lineheight;
199   th, td {
200     text-align: left;
201     padding: $lineheight/4;
202     line-height: $lineheight;
203   }
204   th {
205     font-weight: bold;
206     vertical-align: top;
207   }
208   td {
209     vertical-align: middle;
210   }
211 }
212
213 /* Rules for the whole left sidebar, including the logo */
214
215 #left {
216   position: absolute;
217   height: 100%;
218   width: 185px;
219   font-size: 11px;
220   line-height: 1.1;
221   z-index: 100;
222   border-right: 1px solid #ccc;
223 }
224
225 /* Rules for the OpenStreetMap logo in the top left corner */
226
227 #logo {
228   display: block;
229   width: 170px;
230   min-width: 170px;
231   padding: $lineheight $lineheight/4;
232   text-align: center;
233   margin: auto;
234 }
235
236 #logo h1 {
237   font-size: 18px;
238   line-height: 1;
239   text-align: center;
240   margin: 0;
241 }
242
243 #logo h2 {
244   font-size: $lineheight/2;
245   line-height: 15px;
246   margin: 0;
247 }
248
249 /* Rules for the site name */
250
251 #small-title {
252   display: none;
253 }
254
255 /* Rules for the introductory text displayed in the left sidebar to new users */
256
257 .sidebar-copy {
258   padding: $lineheight/4 $lineheight/2;
259   p {
260     margin: $lineheight/4 0;
261   }
262 }
263 .sidebar-copy.intro {
264   border-top: 1px solid #ccc;
265 }
266
267 /*
268  * Rules for alert boxes shown in the left sidebar when important
269  * information needs to be conveyed such as when the site is
270  * undergoing maintenance.
271  */
272
273 .sidebar-alert {
274   padding: $lineheight/4;
275   border-top: 1px solid #ccc;
276   margin-top: 4px;
277   margin-bottom: -5px;
278   background: #e00;
279   font-size: 12px;
280   font-weight: bold;
281   p {
282     margin: $lineheight/4;
283   }
284 }
285
286 /*
287  * Rules for notice boxes shown in the left sidebar when important, but
288  * non-critical information needs to be conveyed such as notices about
289  * donation drives.
290  */
291
292 .sidebar-notice {
293   padding: $lineheight/4;
294   border-top: 1px solid #ccc;
295   margin-top: 4px;
296   margin-bottom: -5px;
297   background: #ea0;
298   font-size: 12px;
299   p {
300     margin: $lineheight/4;
301   }
302 }
303
304 /* Rules for the menu displayed in the left sidebar */
305
306 .left_menu {
307   left: 0px;
308   margin: 0;
309   padding: $lineheight/4 $lineheight/2;
310   font-size: 12px;
311   line-height: 1.25;
312   list-style-type: none;
313   border-bottom: 1px solid #ccc;
314   border-top: 1px solid #ccc;
315   img {
316     margin: $lineheight/2 0px;
317   }
318
319   ul {
320     padding: 0;
321     margin: 0;
322   }
323
324   li {
325     list-style-type: none;
326     padding: 0;
327     margin: 0;
328   }
329
330   h4 {
331     padding: $lineheight/4 0 $lineheight/4 0;
332     font-size: 12px;
333     margin: 0;
334   }
335
336   li:last-child h4 {
337     padding-top: 0;
338   }
339 }
340
341 /*
342  * Rules for "optional boxes" which appear in the left sidebar on
343  * certain pages. Current users are the seach box on the main page
344  * and the tag cloud on the traces pages.
345  */
346
347 .optionalbox {
348   left: 0px;
349   padding: $lineheight/4 $lineheight/2;
350   margin: $lineheight/4 0;
351   text-align: left;
352 }
353
354 /* Rules for the search box */
355
356 #search_field {
357   position: relative;
358
359   form {
360     width: 165px;
361   }
362
363   input[type="text"] {
364     width: 165px;
365     padding: 3px;
366     font-size: $typeheight;
367     line-height: 1.1;
368     height: 25px;
369     padding: 2px 0px 2px $lineheight/4;
370     box-shadow: inset #DDD 0px 1px 3px;
371   }
372
373   input[type="text"]:focus {
374     outline: none;
375     border: 1px solid #000;
376   }
377
378   input[type="submit"] {
379     border: 0;
380     margin: 0;
381     padding: 0;
382     width: 15px;
383     height: 15px;
384     min-width: 0;
385     text-indent: -1000px;
386     overflow: hidden;
387     background: image-url("sprite.png") 0 0 no-repeat;
388     position: absolute;
389     top: $lineheight/4;
390     right: $lineheight/4;
391     cursor: pointer;
392   }
393 }
394
395 .search_help {
396   margin: $lineheight/4 0 0 0;
397 }
398
399 /* Utility for de-emphasizing content */
400
401 .deemphasize {
402   color: #999;
403   a {
404     color: $blue;
405   }
406 }
407
408 /* Rules for donation request box */
409
410 a.donate {
411   display: block;
412   width: 163px;
413   padding: $lineheight/4;
414   border: 1px solid #AED1A0;
415   background: #cbeea7;
416   font-size: $typeheight;
417   line-height: 1.4;
418   text-align: center;
419   border-radius: 2px;
420   color: #222;
421   margin: $lineheight/2 $lineheight/2 0px $lineheight/2;
422
423   &:hover {
424     background: #9ed485;
425     text-decoration: none;
426   }
427 }
428
429 /* Rules for Creative Commons logo button */
430
431 #cclogo {
432   margin: $lineheight/2 0;
433   float: right;
434 }
435
436 /* Rules for tabbed navigation bar */
437
438 #top-bar {
439   position: relative;
440   margin-left: 185px;
441   height: 30px;
442   border-bottom: 1px solid #ccc;
443   background: white;
444   z-index: 100;
445 }
446
447 .site-edit #top-bar,
448 .site-index #top-bar,
449 .site-export #top-bar {
450   position: fixed;
451   left: 0;
452   right: 0;
453 }
454
455 #tabnav {
456   height: 29px;
457   margin-bottom:0;
458   overflow: hidden;
459   li {
460     display: inline;
461   }
462   a, a:link, a:visited {
463     float: left;
464     font-weight: bold;
465     padding: 3px $lineheight/2;
466     text-decoration: none;
467     color: #333;
468     float: left;
469     margin-right: 1px;
470     -webkit-transition: color 200ms ease-in;
471        -moz-transition: color 200ms ease-in;
472          -o-transition: color 200ms ease-in;
473             transition: color 200ms ease-in;
474   }
475 }
476
477 .site-index #tabnav a#viewanchor,
478 .site-edit #tabnav a#editanchor,
479 .changeset-list #tabnav a#historyanchor,
480 .site-export #tabnav a#exportanchor {
481   border-bottom: 1px solid #aaa;
482   background: #9ed485;
483   color: #000;
484 }
485
486 #tabnav a:link:hover, #tabnav a:visited:hover {
487   text-decoration: underline;
488 }
489
490 #tabnav a:link.disabled,
491 #tabnav a:visited.disabled,
492 #tabnav a:link:hover.disabled,
493 #tabnav a:visited:hover.disabled {
494   color: #ccc;
495   cursor: default;
496   &:hover {
497     text-decoration: none;
498   }
499 }
500
501 /* Utility for styling notification numbers */
502
503 .count-number {
504   padding: 2px $lineheight/4;
505   border-radius: 2px;
506   background: #d7d7ff;
507   margin: 0 2px;
508   font-size: 11px;
509   color: #333;
510 }
511
512 /* Rules for greeting bar in the top right corner */
513
514 #greeting {
515   float: right;
516   padding-top: 3px;
517   margin-right: $lineheight/4;
518 }
519
520 .greeting-bar-unread {
521   font-weight: bold;
522 }
523
524 /* Rules for the message shown in place of the map when javascript is disabled */
525
526 #noscript {
527   z-index: 20000000;
528   position: absolute;
529   top: 15px;
530   left: 15px;
531 }
532
533 /* Rules for Leaflet maps */
534
535 .leaflet-control .control-button {
536   display: block;
537   height: 40px;
538   width: 40px;
539   background-color: white;
540   background-color: rgba(255,255,255,.8);
541   border-radius: 4px;
542   margin-bottom: 10px;
543   outline: none;
544 }
545
546 .leaflet-control .zoomin,
547 .control-layers .control-button {
548   margin-bottom: 0px;
549   border-radius: 4px 4px 0px 0px;
550 }
551
552 .site .leaflet-control .zoomout,
553 .control-key .control-button {
554   margin-bottom: 0px;
555   border-radius: 0px;
556 }
557
558 .leaflet-control .zoomout,
559 .control-locate .control-button,
560 .control-share .control-button {
561   border-radius: 0px 0px 4px 4px;
562 }
563
564 .leaflet-control .control-button:hover {
565   background-color: white;
566 }
567
568 .leaflet-control .control-button .icon {
569   margin: 10px;
570 }
571
572 /* Rules for the home page */
573
574 .site-export #map,
575 .site-index #map,
576 .site-edit #map {
577   height: 100%;
578   overflow: hidden;
579 }
580
581 #map-ui {
582   display: none;
583   position: relative;
584   float: right;
585   width: 250px;
586   height: 100%;
587   background: white;
588   border-left: 1px solid #CCC;
589   overflow: auto;
590
591   .section {
592     border-bottom: 1px solid #DDD;
593     padding: 15px;
594   }
595
596   a.close-button {
597     float: right;
598     padding:5px;
599     font-size:20px;
600     line-height:10px;
601     color:#222;
602     border:1px solid #ddd;
603   }
604 }
605
606 .layers-ui {
607   ul, li:last-child {
608     margin-bottom: 0;
609   }
610
611   li {
612     border-radius: 4px;
613     overflow: hidden;
614     margin-bottom: 10px;
615   }
616
617   label {
618     display: block;
619     padding: 5px 5px 5px 7px;
620     background-color: #eee;
621     cursor: pointer;
622   }
623
624   li.active label {
625     background-color: #ccc;
626   }
627
628   .base-layers {
629     .leaflet-container {
630       width: 100%;
631       height: 50px;
632       cursor: pointer;
633     }
634   }
635 }
636
637 .share-ui {
638   .share-link {
639     li {
640       display: inline-block;
641       width: 50%;
642     }
643   }
644 }
645
646 .site-index .leaflet-top,
647 .site-export .leaflet-top {
648   top: $lineheight/2 !important;
649   .leaflet-control {
650     margin-top: 0px !important;
651   }
652 }
653
654 .leaflet-popup-scrolled {
655   padding-right: $lineheight;
656   border-bottom: 0px !important;
657   border-top: 0px !important;
658 }
659
660 .leaflet-popup-content-wrapper {
661   border-radius: 4px !important;
662   -webkit-border-radius: 4px !important;
663 }
664
665 /* Rules for edit menu */
666
667 .menuicon {
668   padding: 0 $lineheight/4;
669   font-weight: normal;
670   display: inline-block;
671   &:hover {
672     text-decoration: none !important;
673   }
674 }
675
676 .menu {
677   display: none;
678   z-index: 10000;
679   position: absolute;
680   background-color: #ffffff;
681   border: 1px solid $keyline;
682   border-top: 0px;
683   ul {
684     margin: 0px;
685   }
686   li {
687     padding: 2px $lineheight/4;
688     border-top: 1px solid #eee;
689     white-space: nowrap;
690   }
691 }
692
693 /* Rules for attribution text under the main map shown on printouts */
694
695 #attribution {
696   display: none;
697 }
698
699 .attribution_license,
700 .attribution_project {
701   text-align: left;
702 }
703
704 .attribution_notice {
705   text-align: center;
706 }
707
708 /* Rules for the popout map sidebar */
709
710 #sidebar {
711   display: none;
712   position: relative;
713   float: left;
714   overflow: auto;
715   border-right: 1px solid $keyline;
716   width: 33.3333%;
717   ul {
718     margin-bottom: 0;
719     &:last-child {
720         border-bottom: 1px solid #ccc;
721     }
722     li {
723       margin-bottom: $lineheight/4;
724       &:last-child {
725         margin-bottom: 0;
726       }
727     }
728   }
729 }
730
731 .sidebar_heading {
732   position: relative;
733   padding: $lineheight/2 $lineheight;
734   z-index: 9999;
735   background: $offwhite;
736   border-bottom: 1px solid #ccc;
737   h4 {
738     margin: 0;
739   }
740 }
741
742 .sidebar_close {
743   position: absolute;
744   height: $lineheight;
745   top: 0px;
746   bottom: 0;
747   right: $lineheight;
748   margin: auto;
749 }
750
751 #sidebar_content {
752   position: relative;
753   margin-bottom: 20px;
754   width: 100%;
755   h4 {
756     padding: 0 $lineheight $lineheight/2 $lineheight;
757     margin-top: $lineheight/2;
758     margin-bottom: 0;
759     border-bottom: 1px solid #ddd;
760   }
761 }
762
763 /* Rules for the map key which appears in the popout sidebar */
764
765 #mapkey {
766  .mapkey-table-key img {
767     display: block;
768     margin-left: auto;
769     margin-right: auto;
770   }
771   td {
772     padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
773   }
774 }
775
776 /* Rules for search results which appear in the popout sidebar */
777
778 .search_searching {
779   margin-top: $lineheight/4;
780   margin-bottom: $lineheight/4;
781 }
782
783 .search_results_entry {
784   margin-bottom: 0;
785
786   .search_details {
787     display: block;
788     text-align: right;
789   }
790 }
791
792 .search_results_entry .search_searching {
793   text-align: center;
794   margin: $lineheight auto;
795   width: $lineheight;
796   display: block;
797 }
798
799 ul.results-list li { border-bottom: 1px solid #ccc; }
800
801 .search_results_error {
802   color: #f00;
803 }
804
805 /* Rules for data browser information which appears in the popout sidebar */
806
807 #browse_content {
808   position: relative;
809   .browse_show_list.button {
810     position: absolute;
811     left: $lineheight;
812     right: $lineheight;
813     bottom: -40px;
814     margin-bottom: 0;
815   }
816   a.more-details {
817     position: absolute;
818     top: 0;
819     right: $lineheight;
820   }
821   ul li {
822     margin-bottom: 0;
823   }
824 }
825
826 .browse_details {
827   position: relative;
828 }
829
830 .browse_status {
831   display: none;
832 }
833
834 /* Rules for export information which appears in the popout sidebar */
835
836 .export_bounds {
837   text-align: center;
838 }
839
840 .export_area_inputs {
841   margin-bottom: $lineheight/2;
842   input[type="text"] {
843     width: 60px;
844     margin-bottom: 5px;
845   }
846 }
847
848 .export_bound {
849   margin: $lineheight/4;
850 }
851
852 .export_details input[type="text"]#export_html_text {
853   width: 100%;
854 }
855
856 #sidebar #marker_inputs li:last-child {
857   margin-bottom: $lineheight/2;
858 }
859
860 #export_osm,
861 #export_mapnik,
862 #export_osmarender {
863   display: none;
864 }
865
866 /* Rules for the main content area */
867
868 #content {
869   padding: $lineheight;
870   position: relative;
871 }
872
873 .site-edit #content,
874 .site-index #content,
875 .site-export #content {
876   position: fixed;
877   padding: 0;
878   top: 30px; bottom: 0;
879   left: 184px; right: 0;
880   border-left: 1px solid #ccc;
881 }
882
883 .wrapper {
884   margin-left: 184px;
885   border-left: 1px solid #ccc;
886   text-align: left;
887 }
888
889 .site-edit #content {
890   top: 30px;
891 }
892
893 #content.maximised {
894   top: 0;
895   left: 0;
896   right: 0;
897   bottom: 0;
898   border: 0;
899   z-index: 1000;
900 }
901
902 #slim_container {
903   width: 100%;
904 }
905
906 #slim_container_content {
907   max-width: 50em;
908   background-color: #FFFFFF;
909   margin: $lineheight/2 auto;
910   padding: 3px;
911   border-radius: 25px;
912   -moz-border-radius: 25px;
913   border: 1px solid #e6e6e6;
914 }
915
916 #slim_content {
917   margin: $lineheight/2;
918   margin-top: 95px;
919   max-width: 50em;
920
921   .content-heading {
922     margin-bottom: 15px;
923   }
924 }
925
926 #slim_header {
927   margin: 30px $lineheight/2;
928   position: absolute;
929   top: 0px;
930   margin-right: $lineheight/4;
931   img {
932     vertical-align: middle;
933     margin-bottom: $lineheight/4;
934     margin-right: $lineheight/4;
935   }
936 }
937
938 .content-heading {
939   position: relative;
940   padding: $lineheight;
941   background: $offwhite;
942   h1, h2 {
943     margin-bottom: $lineheight/2;
944     line-height: 100%;
945     &:last-child {
946       margin-bottom: 0;
947     }
948   }
949   p {
950     margin-top: $lineheight/2;
951     margin-bottom: 0px;
952   }
953 }
954
955 /* Rules for small maps in content areas */
956
957 .content_map {
958   position: relative;
959   width: 45%;
960   height: 400px;
961   border: 1px solid #ccc;
962   margin-bottom: $lineheight;
963   float: right;
964 }
965
966 .content_map #small_map {
967   height: 100%;
968   width: 100%;
969   margin-bottom: $lineheight;
970 }
971
972 /* Rules for the changeset list shown by the history tab etc */
973
974 #changeset_list {
975   width: 100%;
976   ul {
977     padding: $lineheight/2 0;
978     margin-bottom: 0px;
979     border-top: 1px solid #ccc;
980     &:last-child {
981       border-bottom: 1px solid #ccc;
982     }
983   }
984   .selected {
985     background: #FFFFC0;
986   }
987   .date,
988   .user {
989     border-left: 1px solid #ccc;
990     padding-left: $lineheight/4;
991     margin-right: $lineheight/4;
992   }
993 }
994
995 #changeset_list_map_wrapper {
996   position: absolute;
997   width: 50%;
998   height: 490px;
999   top: 0;
1000   right: 0;
1001 }
1002
1003 #changeset_list_map_wrapper.scrolled {
1004   position: fixed;
1005 }
1006
1007 #changeset_list_map {
1008   position: absolute;
1009   bottom: $lineheight;
1010   top: $lineheight;
1011   right: $lineheight;
1012   left: $lineheight;
1013   border: 1px solid #ccc;
1014 }
1015
1016 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1017   margin-left: 93px;
1018 }
1019
1020 /* Rules for the data browser */
1021
1022 .browse-section {
1023   border-top: 1px solid #ccc;
1024   margin-top: $lineheight/2;
1025   padding-top: $lineheight/2;
1026   &:first-child {
1027     margin-top: 0;
1028   }
1029   .warning {
1030     background-color: #ffe0cc;
1031     margin: 0px;
1032     padding: 4px 6px;
1033     max-width: 100%;
1034   }
1035   h4, p {
1036     margin-bottom: $lineheight/4;
1037   }
1038   p, ul, .bbox, .geo {
1039     display: inline-block;
1040     vertical-align: top;
1041     max-width: 65%;
1042   }
1043   ul p {
1044     margin-left: 0;
1045     margin-bottom: 0;
1046   }
1047   h4 {
1048     width: 33.3333%;
1049     display: inline-block;
1050     vertical-align: top;
1051   }
1052 }
1053
1054 .bbox {
1055   div {
1056     width: 33.3333%;
1057     text-align: center;
1058     padding: $lineheight/4 0;
1059     overflow: hidden;
1060     text-overflow: ellipsis;
1061     float: left;
1062   }
1063   .max_lat,
1064   .min_lat {
1065     margin-left: auto;
1066     margin-right: auto;
1067     width: 100%;
1068   }
1069 }
1070
1071 #browse_map .geolink {
1072   display: none;
1073 }
1074
1075 #browse_map .secondary-actions {
1076   margin-bottom: $lineheight/2;
1077 }
1078
1079 /* Rules for the trace list shown by the traces tab etc */
1080
1081 #trace_list {
1082   font-size: $lineheight/2;
1083   border-width: 0px;
1084   text-align: right;
1085
1086   .trace_summary {
1087     font-size: 12px;
1088     color: gray;
1089   }
1090
1091   .trace_pending {
1092     color: red;
1093   }
1094
1095   .trace_public {
1096     color: green;
1097   }
1098
1099   .trace_identifiable {
1100     color: green;
1101   }
1102
1103   .trace_trackable {
1104     color: red;
1105   }
1106
1107   .trace_private {
1108     color: red;
1109   }
1110 }
1111
1112 /* Rules for the user profile page */
1113
1114 #userinformation {
1115
1116   min-height: 100px;
1117   .userinformation-inner {
1118     float: left;
1119   }
1120   h2 {
1121     margin-top: 0;
1122   }
1123   .user-description {
1124     width: 100%;
1125     clear: both;
1126   }
1127   .deemphasize {
1128     margin: 0;
1129   }
1130 }
1131
1132 .admin-user-info small {
1133   margin-bottom: $lineheight/2;
1134   display: inline;
1135   margin-right: $lineheight;
1136 }
1137
1138 .activity-block {
1139   clear: left;
1140   border-bottom: 1px solid #ccc;
1141   padding-bottom: $lineheight;
1142   float: left;
1143   h3 {
1144     margin-bottom: $lineheight/2;
1145   }
1146 }
1147
1148 .contact-activity {
1149   margin-top: $lineheight;
1150   width: 100%;
1151 }
1152
1153 .activity-details p {
1154   margin-left: 70px;
1155   margin-bottom: 0;
1156 }
1157
1158 #friends-container .contact-activity ul {
1159   margin-left: 70px;
1160 }
1161
1162 .user-view {
1163   p#no_home_location {
1164     margin: $lineheight;
1165   }
1166   .user_thumbnail {
1167     margin-top: $lineheight/4;
1168     float: left;
1169   }
1170 }
1171
1172 /* Rules for the user map */
1173
1174 .content_map .leaflet-popup-content {
1175   margin: $lineheight/2;
1176   min-height: 50px;
1177 }
1178
1179 /* Rules for user popups on maps */
1180
1181 .user_popup {
1182   min-width: 200px;
1183   p {
1184     padding: 0 0 5px 0;
1185     margin-top: 0 0 0 60px;
1186     font-size: 12px;
1187   }
1188   img.user_thumbnail {
1189     float: left;
1190     margin: 0 $lineheight/2 0 0;
1191   }
1192 }
1193
1194 /* Rules for the user list */
1195
1196 #user_list {
1197   font-size: $lineheight/2;
1198   width: 100%;
1199
1200   tr {
1201     vertical-align: middle;
1202   }
1203
1204   p {
1205     margin-top: 0px;
1206     margin-bottom: 0px;
1207   }
1208 }
1209
1210 #user_list_actions {
1211   float: right;
1212   margin-top: $lineheight/2;
1213 }
1214
1215 /* Rules for the diary list page */
1216
1217 .diary_entry-list img.user_thumbnail {
1218   float: left;
1219 }
1220
1221 .diary_post {
1222   max-width: 740px;
1223   position: relative;
1224   margin-top: $lineheight/2;
1225   padding-top: $lineheight;
1226   border-top: 1px solid #ccc;
1227
1228   &:first-child {
1229     margin-top: 0;
1230     border-top: 0;
1231     padding-top: 0;
1232   }
1233   h1, h2 {
1234     font-size: 21px;
1235     line-height: 1em;
1236   }
1237   small.deemphasize {
1238     float: left;
1239     display: block;
1240   }
1241   ul.secondary-actions { display: inline-block;}
1242 }
1243
1244 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1245   display: inline;
1246 }
1247
1248 #content  .post_heading {
1249   margin-bottom: $lineheight;
1250   h2 {
1251     margin-top: 0;
1252     margin-bottom: $lineheight/2;
1253     font-size: 24px;
1254   }
1255 }
1256
1257 /* Rules for the diary entry page */
1258
1259 .diary_entry {
1260   #map {
1261     position: relative;
1262     width: 90%;
1263     height: 400px;
1264     border: 1px solid #ccc;
1265     display: none;
1266     margin-bottom: $lineheight;
1267   }
1268   #newcomment {
1269     border-top: 1px solid #ccc;
1270     padding-top: $lineheight;
1271     margin-top: $lineheight/2;
1272   }
1273   .comments {
1274     max-width: 740px;
1275   }
1276   .diary-comment {
1277     margin-top: $lineheight/2;
1278     border-top: 1px dashed #ccc;
1279     padding-top: $lineheight/2;
1280     &:first-child {
1281       margin-top: $lineheight;
1282       padding-top: $lineheight;
1283       border-top: 1px solid #ccc;
1284     }
1285     p {
1286       margin-bottom: $lineheight/2;
1287     }
1288     .comment-heading {
1289       margin-bottom: 0;
1290       margin-top: 0;
1291     }
1292   }
1293 }
1294
1295 .diary_entry-view img.user_thumbnail {
1296   float: left;
1297 }
1298
1299 /* Rules for the login page */
1300
1301 #login_openid_buttons {
1302   margin-bottom: 0;
1303 }
1304
1305 #login_openid_buttons li {
1306   float: left;
1307   padding: $lineheight/4 $lineheight/2;
1308 }
1309
1310 /* Rules for the account confirmation page */
1311
1312 #terms {
1313   .legale {
1314     border: 1px solid #ccc;
1315     padding: $lineheight;
1316     margin-bottom: $lineheight;
1317     overflow: auto;
1318     height: 10em;
1319
1320     &:p#last {
1321       margin-bottom: 0px;
1322     }
1323
1324     &:ol {
1325       margin-bottom: 0px;
1326     }
1327
1328     &:img {
1329       display: block;
1330       margin: $lineheight auto inherit auto;
1331     }
1332   }
1333
1334   form.sign {
1335     input[type=submit] {
1336       float: left;
1337     }
1338     #decline {
1339       background: $grey;
1340       &:hover {
1341         background: darken($grey, $hovercolor);
1342       }
1343     }
1344   }
1345   fieldset {
1346     margin-bottom: $lineheight;
1347   }
1348   #contributorGuidance {
1349     background-color: $offwhite;
1350     border-radius: 4px;
1351     -moz-border-radius: 4px;
1352   }
1353   .signing-buttons {
1354     height: 50px;
1355   }
1356 }
1357
1358 /* Rules for the account settings page */
1359
1360 #accountForm .user_map {
1361   position: relative;
1362   width: 500px;
1363   height: 400px;
1364   border: 1px solid #ccc;
1365 }
1366
1367 #accountForm .user_image {
1368   margin-bottom: 0;
1369 }
1370
1371 #accountForm #user_image {
1372   margin-left: 20px;
1373 }
1374
1375 #accountForm ul.accountImage-options {
1376   margin-left: 120px;
1377 }
1378
1379 .nohome .location {
1380   display: none;
1381 }
1382
1383 #homerow .message {
1384   display: none;
1385 }
1386
1387 .nohome .message {
1388   display: inline !important;
1389 }
1390
1391 .content_map.settings_map {
1392   width: 50%;
1393   float: none;
1394 }
1395
1396 /* Rules for the oauth settings page */
1397
1398 .oauth_clients .buttons .oauth-edit {
1399   border-radius: 2px 0 0 2px;
1400 }
1401
1402 .oauth_clients .buttons .oauth-delete {
1403   border-radius: 0 2px 2px 0;
1404 }
1405
1406 /* Rules for messages pages */
1407
1408 .messages {
1409   width: 100%;
1410   border: 1px solid #ddd;
1411
1412   input[type="submit"] {
1413     margin: auto;
1414   }
1415   tbody tr {
1416     border-top: 1px solid #ccc;
1417   }
1418
1419   .inbox-row {
1420     background: #f8f8ff;
1421   }
1422
1423   .inbox-row-unread {
1424     background:#CBEEA7;
1425   }
1426
1427   .right {
1428     float: right;
1429   }
1430
1431   tr td,
1432   tr th {
1433     padding: $lineheight/4;
1434   }
1435   p:last-child,
1436   h2:last-child,
1437   h3:last-child,
1438   ol:last-child,
1439   ul:last-child {
1440     margin-bottom:0;
1441   }
1442   tr td {
1443     height: 30px;
1444     border-right: 1px solid $keyline;
1445   }
1446 }
1447
1448 .inbox-row .inbox-mark-read {
1449   display: none;
1450 }
1451
1452 .info-line {
1453   margin-bottom: $lineheight;
1454   padding: $lineheight/4 0px 4px 0px;
1455   border-bottom: 1px solid #ccc;
1456
1457   form, form div {
1458     display: inline;
1459   }
1460 }
1461
1462 .info-line .user_thumbnail_tiny {
1463   vertical-align: middle;
1464 }
1465
1466 .inbox-mark-unread,
1467 .inbox-mark-read,
1468 .inbox-delete {
1469   width: 1%;
1470 }
1471
1472 .inbox-row-unread .inbox-mark-unread {
1473   display: none;
1474 }
1475
1476 .message-read .message-buttons {
1477   margin-top: $lineheight;
1478   padding-top: $lineheight;
1479   border-top: 1px solid $keyline;
1480 }
1481
1482 .message-read .buttons .mark-unread-button {
1483   border-radius: 0;
1484 }
1485
1486 /* Rules for "flash" notice boxes shown at the top of the content area */
1487
1488 .flash {
1489     padding: $lineheight;
1490   &#error {
1491     background-color: #ff7070;
1492   }
1493   &#warning {
1494     background-color: #ffe0cc;
1495   }
1496   &#notice {
1497     background-color: #CBEEA7;
1498   }
1499 }
1500
1501 /* Rules for highlighting fields with rails validation errors */
1502
1503 .field_with_errors {
1504   padding: 2px;
1505   background-color: #ff7070;
1506   display: table;
1507 }
1508
1509 /* Rules for rails validation error boxes */
1510
1511 #errorExplanation {
1512   width: 400px;
1513   border: 2px solid #ff7070;
1514   padding: 0 $lineheight/2;
1515   margin-bottom: $lineheight;
1516   background-color: #f0f0f0;
1517
1518   h2 {
1519     margin: 0 -10px 10px -10px;
1520     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1521     font-weight: bold;
1522     font-size: 12px;
1523     background-color: #c00;
1524     color: #fff;
1525     text-align: left;
1526   }
1527
1528   p {
1529     color: #333;
1530     margin-bottom: 0px;
1531     padding: $lineheight/4;
1532   }
1533
1534   ul {
1535     padding-left: $lineheight;
1536
1537     li {
1538       font-size: 12px;
1539       list-style: disc;
1540     }
1541   }
1542 }
1543
1544 /* Rules for forms */
1545
1546 .standard-form {
1547   fieldset {
1548     margin-bottom: $lineheight;
1549   }
1550   label.standard-label {
1551     display: block;
1552     margin-bottom: $lineheight/4;
1553     font-size: $typeheight;
1554     font-weight: bold;
1555     line-height: 1.5;
1556   }
1557   label.standard-label.secondary {
1558     display: inline-block;
1559     font-weight: normal;
1560   }
1561   .form-help {
1562     font-weight: normal;
1563   }
1564   .form-column {
1565     float: left;
1566     margin-right: 20px;
1567   }
1568   .form-divider {
1569     margin-top: $lineheight;
1570     padding-top: $lineheight;
1571     border-top: 1px solid $keyline;
1572   }
1573   .form-row {
1574     margin-bottom: $lineheight/2;
1575   }
1576   .form-list {
1577     margin-bottom: 0;
1578   }
1579   .form-list li {
1580     margin-bottom: 5px;
1581    }
1582   input[type="checkbox"],
1583   input[type="radio"] {
1584     float: left;
1585     margin-top: 5px;
1586   }
1587 }
1588
1589 #remember_me_openid {
1590   display: block;
1591 }
1592
1593 input[type="checkbox"],
1594 input[type="radio"] {
1595     margin-right: 5px;
1596 }
1597
1598 input[type="text"],
1599 input[type="email"],
1600 input[type="url"],
1601 input[type="password"],
1602 textarea {
1603   border: 1px solid #ccc;
1604   padding: 2px 5px;
1605   margin: 0;
1606   width: 200px;
1607 }
1608
1609 textarea {
1610   padding: 5px;
1611   width: 100%;
1612   height: 100% !important;
1613 }
1614
1615 /* Rules for user images */
1616
1617 img.user_image {
1618   max-width: 100px;
1619   max-height: 100px;
1620   border: 1px solid #ccc;
1621   margin-bottom: $lineheight;
1622   float: left;
1623   margin-right: $lineheight;
1624 }
1625
1626 img.user_thumbnail {
1627   max-width: 50px;
1628   max-height: 50px;
1629   border: 1px solid #ccc;
1630   margin-right: $lineheight;
1631 }
1632
1633 img.user_thumbnail_tiny {
1634   max-width: 25px;
1635   max-height: 25px;
1636   border: 1px solid #ccc;
1637 }
1638
1639 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1640
1641 .nowrap {
1642   white-space: nowrap;
1643 }
1644
1645 /* Rules for geo microformats */
1646
1647 abbr.geo {
1648   border-bottom: none;
1649 }
1650
1651 /* Rules for RSS buttons */
1652
1653 .rsssmall {
1654   position: relative;
1655   top: 5px;
1656 }
1657
1658 /* General styles for action lists / subnavs / pager navs */
1659
1660 ul.secondary-actions {
1661   font-style: normal;
1662   margin-bottom: 0;
1663   margin-left: 0;
1664   &.pager {
1665     display: inline-block;
1666     margin-right: 60px;
1667   }
1668   li {
1669     display: block;
1670     float: left;
1671     list-style: none;
1672     border-left: 1px solid #ccc;
1673     padding-left: $lineheight/4;
1674     margin-right: $lineheight/4;
1675     &:first-child {
1676       border-left: 0;
1677       padding-left: 0;
1678     }
1679     &:last-child {
1680       margin-right: 0px;
1681     }
1682   }
1683 }
1684
1685 /* Utility for managing inner content areas */
1686
1687 .inner22 { padding: $lineheight;}
1688
1689 .inner12 { padding: $lineheight/2 $lineheight;}
1690
1691 .inner11 { padding: $lineheight/2;}
1692
1693 .inner02 { padding: 0 $lineheight;}
1694
1695 /* Utility for general button styles */
1696
1697 input[type="button"],
1698 input[type="submit"],
1699 input[type="reset"],
1700 a.button {
1701   cursor: pointer;
1702   border: 0;
1703   display: inline-block;
1704   line-height: 20px;
1705   padding: $lineheight/4 $lineheight/2;
1706   min-width: 120px;
1707   margin: 0 0 $lineheight/2 0;
1708   color: white;
1709   background: $blue;
1710   text-align: center;
1711   border-radius: 2px;
1712   -moz-border-radius: 2px;
1713   &:hover {
1714     background: darken($blue, $hovercolor);
1715     text-decoration: none;
1716   }
1717   &.deemphasize {
1718     background: $lightblue;
1719     &:hover {
1720       background: darken($lightblue, $hovercolor);
1721     }
1722   }
1723   &:disabled {
1724     background: $lightblue;
1725   }
1726   &:last-child {
1727     margin-bottom: 0;
1728   }
1729 }
1730
1731 .buttons {
1732   min-width: 200px;
1733   input[type="submit"],
1734   input[type="button"],
1735   input[type="reset"],
1736   .button {
1737     box-sizing: border-box;
1738     float: left;
1739     border-radius: 0;
1740     margin:0;
1741     min-width: 100px;
1742     max-width: 150px;
1743     border-right:1px solid white;
1744   }
1745   input:first-child,
1746   .button:first-child {
1747     border-radius:2px 0 0 2px;
1748   }
1749   input:last-child,
1750   .button:last-child {
1751     border-radius:0 2px 2px 0;
1752     border-right-width: 0;
1753   }
1754   input:only-child,
1755   .button:only-child,
1756   *[value="Hide"] + input:last-child,
1757   *[value="Hide"] + .button:last-child {
1758     border-radius:2px;
1759     border-right-width: 0;
1760   }
1761     /* if a 3-button set has a hidden middle button */
1762   *[value="Hide"] + input:nth-child(3),
1763   *[value="Hide"] + .button:nth-child(3) {
1764     border-radius:0 2px 2px 0;
1765     border-right-width: 0;
1766   }
1767   /* if a 3-button set starts with a hidden button */
1768   *[value="Hide"] + input:nth-child(2):not(:last-child),
1769   *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1770     border-radius:2px 0 0 2px;
1771     border-right-width: 1px solid white;
1772   }
1773 }
1774
1775 /* Rules for doing distinct colour of alternate table rows */
1776
1777 .table0,
1778 .item0 {
1779   background: $offwhite;
1780 }
1781
1782 .table1,
1783 .item1 {
1784   background: #fff;
1785 }
1786
1787 /* Rules for OpenID logo */
1788
1789 .openid_logo {
1790   vertical-align: text-bottom;
1791   border: 0;
1792 }
1793
1794 /* Rules for rich text */
1795
1796 .richtext,
1797 .prose {
1798   h1, h2 {
1799     padding-bottom: $lineheight/2;
1800     border-bottom: 1px dashed #cccccc;
1801     margin-bottom: $lineheight/2;
1802   }
1803
1804   h1 {
1805     font-size: 24px;
1806   }
1807
1808   h2 {
1809     font-size: 18px;
1810   }
1811
1812   h3 {
1813     font-size: $typeheight;
1814   }
1815
1816   code {
1817     font-size: 13px;
1818     background: #e8e8e8;
1819     padding: 2px 3px;
1820   }
1821
1822   pre {
1823     font-size: 13px;
1824     background: #e8e8e8;
1825     padding: 2px 3px;
1826
1827     code {
1828       padding: 0;
1829     }
1830   }
1831
1832   img {
1833     padding: $lineheight;
1834     background-color: $offwhite;
1835     display: block;
1836     max-width: 100%;
1837     margin: auto;
1838   }
1839
1840   blockquote {
1841     border-left: $lineheight solid $offwhite;
1842     padding-left: $lineheight;
1843     margin: 0;
1844     color: #7E7E7E;
1845   }
1846
1847   ul, ol {
1848     font-style: italic;
1849     padding-left: $lineheight;
1850     margin-bottom: $lineheight;
1851     margin-left: $lineheight;
1852   }
1853
1854   ul li {
1855     list-style: disc;
1856   }
1857
1858   ol li {
1859     list-style: decimal;
1860   }
1861 }
1862
1863 .diary_post .richtext {
1864     margin-top: $lineheight;
1865   }
1866
1867 .comments .richtext {
1868   margin-left: 70px;
1869   margin-top: 0;
1870 }
1871
1872 /* Rules for rich text editors */
1873
1874 .richtext_container {
1875   margin-bottom: $lineheight;
1876
1877   .richtext_content {
1878     width: 50%;
1879     display: inline-block;
1880     vertical-align: top;
1881
1882     .richtext_preview {
1883       display: inline-block;
1884       padding: $lineheight;
1885       background-color: $offwhite;
1886       overflow-x: auto;
1887
1888       &.loading {
1889         background-image: image-url("loading.gif");
1890         background-repeat: no-repeat;
1891         background-position: center;
1892       }
1893
1894       > :first-child {
1895         margin-top: 0px;
1896       }
1897     }
1898   }
1899
1900   .richtext_help {
1901     display: inline-block;
1902     vertical-align: top;
1903     margin-left: 15px;
1904     background-color: #f8f8ff;
1905     padding: $lineheight/2;
1906     width: 220px;
1907
1908     ul {
1909       margin-bottom: 0;
1910     }
1911
1912     h4.heading, li {
1913       border-bottom: 1px solid #ccc;
1914       margin-bottom: $lineheight/4;
1915       padding-bottom: $lineheight/4;
1916     }
1917
1918     li h4, li span, li p {
1919       display: inline-block;
1920       vertical-align: top;
1921       font-size: 11px;
1922     }
1923
1924     li h4 {
1925       width: 40%;
1926       margin: 0;
1927     }
1928
1929     li span, li p {
1930       width: 50%;
1931       margin-left: $lineheight/2;
1932       margin-bottom: $lineheight/4;
1933       white-space: nowrap;
1934     }
1935   }
1936 }
1937
1938 /* Rules for the user notes list */
1939
1940 .note_list {
1941   tr.creator {
1942     background-color: #eeeeee;
1943   }
1944
1945   td {
1946     padding: 3px;
1947   }
1948
1949   p {
1950     margin-bottom: 0px;
1951   }
1952 }
1953
1954 /* Rules for the notes interface */
1955
1956 .leaflet-popup-content .note {
1957   padding-top: $lineheight/2;
1958 }
1959
1960 .leaflet-popup-content .note {
1961   h2 {
1962     margin-bottom: $lineheight/2;
1963   }
1964
1965   div {
1966     margin-top: $lineheight/2;
1967   }
1968
1969   .permalink {
1970     position: absolute;
1971     top: $lineheight/4;
1972     left: $lineheight/4;
1973     min-width: 15px;
1974     min-height: 15px;
1975     background: image-url("sprite.png") 0 -45px no-repeat;
1976   }
1977
1978   .permalink span {
1979     display: none;
1980     padding-left: $lineheight;
1981   }
1982
1983   .permalink:hover span {
1984     display: block;
1985   }
1986
1987   .warning {
1988     display: block;
1989     background-color: #ffe0cc;
1990     padding: 4px 6px;
1991     margin-bottom: $lineheight/2;
1992   }
1993
1994   .comment_body {
1995     margin-top: 2px;
1996     margin-bottom: 2px;
1997
1998     p {
1999       margin-top: 0px;
2000       margin-bottom: 0px;
2001     }
2002   }
2003
2004   .comment {
2005     width: 100%;
2006     height: 100px;
2007   }
2008
2009   .buttons {
2010     margin-top: $lineheight/4;
2011     text-align: right;
2012   }
2013 }
2014
2015 /*
2016  * Rules for the iD editor
2017  */
2018 .id-embed {
2019   width: 100%;
2020   height: 100%;
2021 }
2022
2023 /* Rules for rotating sidebar ads */
2024 .ad-container {
2025   display: block;
2026   height: 120px;
2027   overflow: hidden;
2028   position: relative;
2029   border-bottom: 1px solid #ccc;
2030 }
2031
2032 .ad {
2033   height: 100px;
2034   border: 0;
2035   background: #fff;
2036 }