consistent padding in sidebar menu.
[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 $lightgrey: #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 $lineheight/2 $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
337 /*
338  * Rules for "optional boxes" which appear in the left sidebar on
339  * certain pages. Current users are the seach box on the main page
340  * and the tag cloud on the traces pages.
341  */
342
343 .optionalbox {
344   left: 0px;
345   padding: $lineheight/4 $lineheight/2;
346   margin: $lineheight/4 0;
347   text-align: left;
348 }
349
350 /* Rules for the search box */
351
352 #search_field {
353   position: relative;
354
355   form {
356     width: 165px;
357   }
358
359   input[type="text"] {
360     width: 165px;
361     padding: 3px;
362     font-size: $typeheight;
363     line-height: 1.1;
364     height: 25px;
365     padding: 2px 0px 2px $lineheight/4;
366     box-shadow: inset #DDD 0px 1px 3px;
367   }
368
369   input[type="text"]:focus {
370     outline: none;
371     border: 1px solid #000;
372   }
373
374   input[type="submit"] {
375     border: 0;
376     margin: 0;
377     padding: 0;
378     width: 15px;
379     height: 15px;
380     min-width: 0;
381     text-indent: -1000px;
382     overflow: hidden;
383     background: image-url("sprite.png") -2px -2px no-repeat;
384     position: absolute;
385     top: $lineheight/4;
386     right: $lineheight/4;
387     cursor: pointer;
388   }
389 }
390
391 .search_help {
392   margin: $lineheight/4 0 0 0;
393 }
394
395 /* Utility for de-emphasizing content */
396
397 .deemphasize {
398   color: #999;
399   a {
400     color: $blue;
401   }
402 }
403
404 /* Rules for donation request box */
405
406 a.donate {
407   display: block;
408   width: 163px;
409   padding: $lineheight/4;
410   border: 1px solid #AED1A0;
411   background: #cbeea7;
412   font-size: $typeheight;
413   line-height: 1.4;
414   text-align: center;
415   border-radius: 2px;
416   color: #222;
417   margin: $lineheight/2 $lineheight/2 0px $lineheight/2;
418
419   &:hover {
420     background: #9ed485;
421     text-decoration: none;
422   }
423 }
424
425 /* Rules for Creative Commons logo button */
426
427 #cclogo {
428   margin: $lineheight/2 0;
429   float: right;
430 }
431
432 /* Rules for tabbed navigation bar */
433
434 #top-bar {
435   position: relative;
436   margin-left: 185px;
437   height: 30px;
438   border-bottom: 1px solid #ccc;
439   background: white;
440   z-index: 100;
441 }
442
443 .site-edit #top-bar,
444 .site-index #top-bar,
445 .site-export #top-bar {
446   position: fixed;
447   left: 0;
448   right: 0;
449 }
450
451 #tabnav {
452   height: 29px;
453   margin-bottom:0;
454   overflow: hidden;
455   li {
456     display: inline;
457   }
458   a, a:link, a:visited {
459     float: left;
460     font-weight: bold;
461     padding: 3px $lineheight/2;
462     text-decoration: none;
463     color: #333;
464     float: left;
465     margin-right: 1px;
466     -webkit-transition: color 200ms ease-in;
467        -moz-transition: color 200ms ease-in;
468          -o-transition: color 200ms ease-in;
469             transition: color 200ms ease-in;
470   }
471 }
472
473 .site-index #tabnav a#viewanchor,
474 .site-edit #tabnav a#editanchor,
475 .changeset-list #tabnav a#historyanchor {
476   border-bottom: 1px solid #aaa;
477   background: #9ed485;
478   color: #000;
479 }
480
481 #tabnav a:link:hover, #tabnav a:visited:hover {
482   text-decoration: underline;
483 }
484
485 #tabnav a:link.disabled,
486 #tabnav a:visited.disabled,
487 #tabnav a:link:hover.disabled,
488 #tabnav a:visited:hover.disabled {
489   color: #ccc;
490   cursor: default;
491   &:hover {
492     text-decoration: none;
493   }
494 }
495
496 /* Utility for styling notification numbers */
497
498 .count-number {
499   padding: 2px $lineheight/4;
500   border-radius: 2px;
501   background: #d7d7ff;
502   margin: 0 2px;
503   font-size: 11px;
504   color: #333;
505 }
506
507 /* Rules for greeting bar in the top right corner */
508
509 #greeting {
510   float: right;
511   padding-top: 3px;
512   margin-right: $lineheight/4;
513 }
514
515 .greeting-bar-unread {
516   font-weight: bold;
517 }
518
519 /* Rules for the message shown in place of the map when javascript is disabled */
520
521 #noscript {
522   z-index: 20000000;
523   position: absolute;
524   top: 15px;
525   left: 15px;
526 }
527
528 /* Rules for Leaflet maps */
529
530 .leaflet-control .control-button {
531   display: block;
532   height: 40px;
533   width: 40px;
534   background-color: white;
535   background-color: rgba(255,255,255,.8);
536   border-radius: 4px;
537   margin-bottom: 10px;
538   outline: none;
539 }
540
541 .leaflet-control .zoomin,
542 .control-layers .control-button {
543   margin-bottom: 0px;
544   border-radius: 4px 4px 0px 0px;
545 }
546
547 .site .leaflet-control .zoomout,
548 .control-key .control-button {
549   margin-bottom: 0px;
550   border-radius: 0px;
551 }
552
553 .leaflet-control .zoomout,
554 .control-locate .control-button,
555 .control-share .control-button {
556   border-radius: 0px 0px 4px 4px;
557 }
558
559 .leaflet-control .control-button:hover {
560   background-color: white;
561 }
562
563 .leaflet-control .control-button .icon {
564   margin: 10px;
565 }
566
567 /* Rules for the home page */
568
569 .site-export #map,
570 .site-index #map,
571 .site-edit #map {
572   height: 100%;
573   overflow: hidden;
574 }
575
576 #map-ui {
577   display: none;
578   position: relative;
579   float: right;
580   width: 250px;
581   height: 100%;
582   background: white;
583   border-left: 1px solid #CCC;
584   overflow: auto;
585
586   .section {
587     border-bottom: 1px solid #DDD;
588     padding: 15px;
589   }
590
591   a.close-button {
592     float: right;
593     padding:5px;
594     font-size:20px;
595     line-height:10px;
596     color:#222;
597     border:1px solid #ddd;
598   }
599 }
600
601 .layers-ui,
602 .share-ui {
603   ul, li:last-child, p:last-child {
604     margin-bottom: 0;
605   }
606 }
607
608 .layers-ui {
609   li {
610     border-radius: 4px;
611     overflow: hidden;
612     margin-bottom: 10px;
613   }
614
615   label {
616     display: block;
617     padding: 5px 5px 5px 7px;
618     background-color: #eee;
619     cursor: pointer;
620   }
621
622   li.active label {
623     background-color: #ccc;
624   }
625
626   .base-layers {
627     .leaflet-container {
628       width: 100%;
629       height: 50px;
630       cursor: pointer;
631     }
632   }
633 }
634
635 .share-ui {
636   .share-link {
637     a {
638       margin-left: 5px;
639     }
640
641     input,
642     textarea {
643       font-family: monospace;
644       font-size: small;
645     }
646   }
647
648   #embed_html {
649     resize: vertical;
650   }
651
652   #mapnik_scale {
653     width: 100px;
654   }
655 }
656
657 .site-index .leaflet-top,
658 .site-export .leaflet-top {
659   top: $lineheight/2 !important;
660   .leaflet-control {
661     margin-top: 0px !important;
662   }
663 }
664
665 .leaflet-popup-scrolled {
666   padding-right: $lineheight;
667   border-bottom: 0px !important;
668   border-top: 0px !important;
669 }
670
671 .leaflet-popup-content-wrapper {
672   border-radius: 4px !important;
673   -webkit-border-radius: 4px !important;
674 }
675
676 /* Rules for edit menu */
677
678 .menuicon {
679   padding: 0 $lineheight/4;
680   font-weight: normal;
681   display: inline-block;
682   &:hover {
683     text-decoration: none !important;
684   }
685 }
686
687 .menu {
688   display: none;
689   z-index: 10000;
690   position: absolute;
691   background-color: #ffffff;
692   border: 1px solid $lightgrey;
693   border-top: 0px;
694   ul {
695     margin: 0px;
696   }
697   li {
698     padding: 2px $lineheight/4;
699     border-top: 1px solid #eee;
700     white-space: nowrap;
701   }
702 }
703
704 /* Rules for attribution text under the main map shown on printouts */
705
706 #attribution {
707   display: none;
708 }
709
710 .attribution_license,
711 .attribution_project {
712   text-align: left;
713 }
714
715 .attribution_notice {
716   text-align: center;
717 }
718
719 /* Rules for the popout map sidebar */
720
721 #sidebar {
722   display: none;
723   position: relative;
724   float: left;
725   border-right: 1px solid $lightgrey;
726   width: 33.3333%;
727   height: 100%;
728   ul {
729     margin-bottom: 0;
730     &:last-child {
731         border-bottom: 1px solid #ccc;
732     }
733     li {
734       margin-bottom: $lineheight/4;
735       &:last-child {
736         margin-bottom: 0;
737       }
738     }
739   }
740 }
741
742 .sidebar_heading {
743   position: relative;
744   padding: $lineheight/2 $lineheight;
745   z-index: 9999;
746   background: $offwhite;
747   border-bottom: 1px solid #ccc;
748   h4 {
749     margin: 0;
750   }
751 }
752
753 .sidebar_close {
754   position: absolute;
755   height: $lineheight;
756   top: 0px;
757   bottom: 0;
758   right: $lineheight;
759   margin: auto;
760 }
761
762 #sidebar_content {
763   position: relative;
764   margin-bottom: 20px;
765   overflow: auto;
766   height: 100%;
767   width: 100%;
768   h4 {
769     padding: 0 $lineheight $lineheight/2 $lineheight;
770     margin-top: $lineheight/2;
771     margin-bottom: 0;
772     border-bottom: 1px solid #ddd;
773   }
774 }
775
776 /* Rules for the map key which appears in the popout sidebar */
777
778 #mapkey {
779  .mapkey-table-key img {
780     display: block;
781     margin-left: auto;
782     margin-right: auto;
783   }
784   td {
785     padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
786   }
787 }
788
789 /* Rules for search results which appear in the popout sidebar */
790
791 .search_searching {
792   margin-top: $lineheight/4;
793   margin-bottom: $lineheight/4;
794 }
795
796 .search_results_entry {
797   margin-bottom: 0;
798
799   .search_details {
800     display: block;
801     text-align: right;
802   }
803 }
804
805 .search_results_entry .search_searching {
806   text-align: center;
807   margin: $lineheight auto;
808   width: $lineheight;
809   display: block;
810 }
811
812 ul.results-list li { border-bottom: 1px solid #ccc; }
813
814 .search_results_error {
815   color: #f00;
816 }
817
818 /* Rules for data browser information which appears in the popout sidebar */
819
820 #browse_content {
821   position: relative;
822   .browse_show_list.button {
823     position: absolute;
824     left: $lineheight;
825     right: $lineheight;
826     bottom: -40px;
827     margin-bottom: 0;
828   }
829   a.more-details {
830     position: absolute;
831     top: 0;
832     right: $lineheight;
833   }
834   ul li {
835     margin-bottom: 0;
836   }
837 }
838
839 .browse_details {
840   position: relative;
841 }
842
843 .browse_status {
844   display: none;
845 }
846
847 /* Rules for export information which appears in the popout sidebar */
848
849 .export_bounds {
850   text-align: center;
851 }
852
853 .export_area_inputs {
854   margin-bottom: $lineheight/2;
855   input[type="text"] {
856     width: 80px;
857     margin-bottom: 5px;
858   }
859 }
860
861 .export_bound {
862   margin: $lineheight/4;
863 }
864
865 /* Rules for the main content area */
866
867 #content {
868   padding: $lineheight;
869   position: relative;
870 }
871
872 .site-edit #content,
873 .site-index #content,
874 .site-export #content {
875   position: fixed;
876   padding: 0;
877   top: 30px; bottom: 0;
878   left: 184px; right: 0;
879   border-left: 1px solid #ccc;
880 }
881
882 .wrapper {
883   margin-left: 184px;
884   border-left: 1px solid #ccc;
885   text-align: left;
886 }
887
888 .site-edit #content {
889   top: 30px;
890 }
891
892 #content.maximised {
893   top: 0;
894   left: 0;
895   right: 0;
896   bottom: 0;
897   border: 0;
898   z-index: 1000;
899 }
900
901 #slim_container {
902   width: 100%;
903 }
904
905 #slim_container_content {
906   max-width: 50em;
907   background-color: #FFFFFF;
908   margin: $lineheight/2 auto;
909   padding: 3px;
910   border-radius: 25px;
911   -moz-border-radius: 25px;
912   border: 1px solid #e6e6e6;
913 }
914
915 #slim_content {
916   margin: $lineheight/2;
917   margin-top: 95px;
918   max-width: 50em;
919
920   .content-heading {
921     margin-bottom: 15px;
922   }
923 }
924
925 #slim_header {
926   margin: 30px $lineheight/2;
927   position: absolute;
928   top: 0px;
929   margin-right: $lineheight/4;
930   img {
931     vertical-align: middle;
932     margin-bottom: $lineheight/4;
933     margin-right: $lineheight/4;
934   }
935 }
936
937 .content-heading {
938   position: relative;
939   padding: $lineheight;
940   background: $offwhite;
941   h1, h2 {
942     margin-bottom: $lineheight/2;
943     line-height: 100%;
944     &:last-child {
945       margin-bottom: 0;
946     }
947   }
948   p {
949     margin-top: $lineheight/2;
950     margin-bottom: 0px;
951   }
952 }
953
954 /* Rules for small maps in content areas */
955
956 .content_map {
957   position: relative;
958   width: 45%;
959   height: 400px;
960   border: 1px solid #ccc;
961   margin-bottom: $lineheight;
962   float: right;
963 }
964
965 .content_map #small_map {
966   height: 100%;
967   width: 100%;
968   margin-bottom: $lineheight;
969 }
970
971 /* Rules for the changeset list shown by the history tab etc */
972
973 #changeset_list {
974   width: 100%;
975   ul {
976     padding: $lineheight/2 0;
977     margin-bottom: 0px;
978     border-top: 1px solid #ccc;
979     &:last-child {
980       border-bottom: 1px solid #ccc;
981     }
982   }
983   .selected {
984     background: #FFFFC0;
985   }
986   .date,
987   .user {
988     border-left: 1px solid #ccc;
989     padding-left: $lineheight/4;
990     margin-right: $lineheight/4;
991   }
992 }
993
994 #changeset_list_map_wrapper {
995   position: absolute;
996   width: 50%;
997   height: 490px;
998   top: 0;
999   right: 0;
1000 }
1001
1002 #changeset_list_map_wrapper.scrolled {
1003   position: fixed;
1004 }
1005
1006 #changeset_list_map {
1007   position: absolute;
1008   bottom: $lineheight;
1009   top: $lineheight;
1010   right: $lineheight;
1011   left: $lineheight;
1012   border: 1px solid #ccc;
1013 }
1014
1015 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1016   margin-left: 93px;
1017 }
1018
1019 /* Rules for the data browser */
1020
1021 .browse-section {
1022   border-top: 1px solid #ccc;
1023   margin-top: $lineheight/2;
1024   padding-top: $lineheight/2;
1025   &:first-child {
1026     margin-top: 0;
1027   }
1028   .warning {
1029     background-color: #ffe0cc;
1030     margin: 0px;
1031     padding: 4px 6px;
1032     max-width: 100%;
1033   }
1034   h4, p {
1035     margin-bottom: $lineheight/4;
1036   }
1037   ul, .bbox, .geo {
1038     display: inline-block;
1039     vertical-align: top;
1040     max-width: 65%;
1041   }
1042   ul p {
1043     margin-left: 0;
1044     margin-bottom: 0;
1045   }
1046   h4 {
1047     float: left;
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 $lightgrey;
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 $lightgrey;
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 $lightgrey;
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 }
1613
1614 /* Rules for user images */
1615
1616 img.user_image {
1617   max-width: 100px;
1618   max-height: 100px;
1619   border: 1px solid #ccc;
1620   margin-bottom: $lineheight;
1621   float: left;
1622   margin-right: $lineheight;
1623 }
1624
1625 img.user_thumbnail {
1626   max-width: 50px;
1627   max-height: 50px;
1628   border: 1px solid #ccc;
1629   margin-right: $lineheight;
1630 }
1631
1632 img.user_thumbnail_tiny {
1633   max-width: 25px;
1634   max-height: 25px;
1635   border: 1px solid #ccc;
1636 }
1637
1638 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1639
1640 .nowrap {
1641   white-space: nowrap;
1642 }
1643
1644 /* Rules for geo microformats */
1645
1646 abbr.geo {
1647   border-bottom: none;
1648 }
1649
1650 /* Rules for RSS buttons */
1651
1652 .rsssmall {
1653   position: relative;
1654   top: 5px;
1655 }
1656
1657 /* General styles for action lists / subnavs / pager navs */
1658
1659 ul.secondary-actions {
1660   font-style: normal;
1661   margin-bottom: 0;
1662   margin-left: 0;
1663   &.pager {
1664     display: inline-block;
1665     margin-right: 60px;
1666   }
1667   li {
1668     display: block;
1669     float: left;
1670     list-style: none;
1671     border-left: 1px solid #ccc;
1672     padding-left: $lineheight/4;
1673     margin-right: $lineheight/4;
1674     &:first-child {
1675       border-left: 0;
1676       padding-left: 0;
1677     }
1678     &:last-child {
1679       margin-right: 0px;
1680     }
1681   }
1682 }
1683
1684 /* Utility for managing inner content areas */
1685
1686 .inner22 { padding: $lineheight;}
1687
1688 .inner12 { padding: $lineheight/2 $lineheight;}
1689
1690 .inner11 { padding: $lineheight/2;}
1691
1692 .inner02 { padding: 0 $lineheight;}
1693
1694 /* Utility for general button styles */
1695
1696 input[type="button"],
1697 input[type="submit"],
1698 input[type="reset"],
1699 a.button {
1700   cursor: pointer;
1701   border: 0;
1702   display: inline-block;
1703   line-height: 20px;
1704   padding: $lineheight/4 $lineheight/2;
1705   min-height: 20px + $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: $lightgrey;
1725     &:hover {
1726       background: $lightgrey;
1727     }
1728   }
1729   &:last-child {
1730     margin-bottom: 0;
1731   }
1732 }
1733
1734 .buttons {
1735   min-width: 200px;
1736   input[type="submit"],
1737   input[type="button"],
1738   input[type="reset"],
1739   .button {
1740     box-sizing: border-box;
1741     float: left;
1742     border-radius: 0;
1743     margin:0;
1744     min-width: 100px;
1745     max-width: 180px;
1746     border-right:1px solid white;
1747     text-overflow: ellipsis;
1748     white-space: nowrap;
1749     overflow: hidden;
1750   }
1751   input:first-child,
1752   .button:first-child {
1753     border-radius:2px 0 0 2px;
1754   }
1755   input:last-child,
1756   .button:last-child {
1757     border-radius:0 2px 2px 0;
1758     border-right-width: 0;
1759   }
1760   input:only-child,
1761   .button:only-child,
1762   *[value="Hide"] + input:last-child,
1763   *[value="Hide"] + .button:last-child {
1764     border-radius:2px;
1765     border-right-width: 0;
1766   }
1767     /* if a 3-button set has a hidden middle button */
1768   *[value="Hide"] + input:nth-child(3),
1769   *[value="Hide"] + .button:nth-child(3) {
1770     border-radius:0 2px 2px 0;
1771     border-right-width: 0;
1772   }
1773   /* if a 3-button set starts with a hidden button */
1774   *[value="Hide"] + input:nth-child(2):not(:last-child),
1775   *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1776     border-radius:2px 0 0 2px;
1777     border-right-width: 1px solid white;
1778   }
1779 }
1780
1781 /* Rules for doing distinct colour of alternate table rows */
1782
1783 .table0,
1784 .item0 {
1785   background: $offwhite;
1786 }
1787
1788 .table1,
1789 .item1 {
1790   background: #fff;
1791 }
1792
1793 /* Rules for OpenID logo */
1794
1795 .openid_logo {
1796   vertical-align: text-bottom;
1797   border: 0;
1798 }
1799
1800 /* Rules for rich text */
1801
1802 .richtext,
1803 .prose {
1804   h1, h2 {
1805     padding-bottom: $lineheight/2;
1806     border-bottom: 1px dashed #cccccc;
1807     margin-bottom: $lineheight/2;
1808   }
1809
1810   h1 {
1811     font-size: 24px;
1812   }
1813
1814   h2 {
1815     font-size: 18px;
1816   }
1817
1818   h3 {
1819     font-size: $typeheight;
1820   }
1821
1822   code {
1823     font-size: 13px;
1824     background: #e8e8e8;
1825     padding: 2px 3px;
1826   }
1827
1828   pre {
1829     font-size: 13px;
1830     background: #e8e8e8;
1831     padding: 2px 3px;
1832
1833     code {
1834       padding: 0;
1835     }
1836   }
1837
1838   img {
1839     padding: $lineheight;
1840     background-color: $offwhite;
1841     display: block;
1842     max-width: 100%;
1843     margin: auto;
1844   }
1845
1846   blockquote {
1847     border-left: $lineheight solid $offwhite;
1848     padding-left: $lineheight;
1849     margin: 0;
1850     color: #7E7E7E;
1851   }
1852
1853   ul, ol {
1854     padding-left: $lineheight;
1855     margin-bottom: $lineheight;
1856     margin-left: $lineheight;
1857   }
1858
1859   ul li {
1860     list-style: disc;
1861   }
1862
1863   ol li {
1864     list-style: decimal;
1865   }
1866 }
1867
1868 .diary_post .richtext {
1869     margin-top: $lineheight;
1870   }
1871
1872 .comments .richtext {
1873   margin-left: 70px;
1874   margin-top: 0;
1875 }
1876
1877 /* Rules for rich text editors */
1878
1879 .richtext_container {
1880   margin-bottom: $lineheight;
1881
1882   .richtext_content {
1883     width: 50%;
1884     display: inline-block;
1885     vertical-align: top;
1886
1887     .richtext_preview {
1888       display: inline-block;
1889       padding: $lineheight;
1890       background-color: $offwhite;
1891       overflow-x: auto;
1892
1893       &.loading {
1894         background-image: image-url("loading.gif");
1895         background-repeat: no-repeat;
1896         background-position: center;
1897       }
1898
1899       > :first-child {
1900         margin-top: 0px;
1901       }
1902     }
1903   }
1904
1905   .richtext_help {
1906     display: inline-block;
1907     vertical-align: top;
1908     margin-left: 15px;
1909     background-color: #f8f8ff;
1910     padding: $lineheight/2;
1911     width: 220px;
1912
1913     ul {
1914       margin-bottom: 0;
1915     }
1916
1917     h4.heading, li {
1918       border-bottom: 1px solid #ccc;
1919       margin-bottom: $lineheight/4;
1920       padding-bottom: $lineheight/4;
1921     }
1922
1923     li h4, li span, li p {
1924       display: inline-block;
1925       vertical-align: top;
1926       font-size: 11px;
1927     }
1928
1929     li h4 {
1930       width: 40%;
1931       margin: 0;
1932     }
1933
1934     li span, li p {
1935       width: 50%;
1936       margin-left: $lineheight/2;
1937       margin-bottom: $lineheight/4;
1938       white-space: nowrap;
1939     }
1940   }
1941 }
1942
1943 /* Rules for the user notes list */
1944
1945 .note_list {
1946   tr.creator {
1947     background-color: #eeeeee;
1948   }
1949
1950   td {
1951     padding: 3px;
1952   }
1953
1954   p {
1955     margin-bottom: 0px;
1956   }
1957 }
1958
1959 /* Rules for the notes interface */
1960
1961 .leaflet-popup-content .note {
1962   padding-top: $lineheight/2;
1963 }
1964
1965 .leaflet-popup-content .note {
1966   h2 {
1967     margin-bottom: $lineheight/2;
1968   }
1969
1970   div {
1971     margin-top: $lineheight/2;
1972   }
1973
1974   .permalink {
1975     position: absolute;
1976     top: $lineheight/4;
1977     left: $lineheight/4;
1978     min-width: 15px;
1979     min-height: 15px;
1980   }
1981
1982   .permalink span {
1983     display: none;
1984     padding-left: $lineheight;
1985   }
1986
1987   .permalink:hover span {
1988     display: block;
1989   }
1990
1991   .warning {
1992     display: block;
1993     background-color: #ffe0cc;
1994     padding: 4px 6px;
1995     margin-bottom: $lineheight/2;
1996   }
1997
1998   .comment_body {
1999     margin-top: 2px;
2000     margin-bottom: 2px;
2001
2002     p {
2003       margin-top: 0px;
2004       margin-bottom: 0px;
2005     }
2006   }
2007
2008   .comment {
2009     width: 100%;
2010     height: 100px;
2011   }
2012
2013   .buttons {
2014     margin-top: $lineheight/4;
2015     text-align: right;
2016   }
2017 }
2018
2019 /*
2020  * Rules for the iD editor
2021  */
2022 .id-embed {
2023   width: 100%;
2024   height: 100%;
2025 }
2026
2027 /* Rules for rotating sidebar ads */
2028 .ad-container {
2029   display: block;
2030   height: 120px;
2031   overflow: hidden;
2032   position: relative;
2033   border-bottom: 1px solid #ccc;
2034 }
2035
2036 .ad {
2037   height: 100px;
2038   border: 0;
2039   background: #fff;
2040 }