Tighten vertical space
[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;
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") -2px -2px 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   border-bottom: 1px solid #aaa;
481   background: #9ed485;
482   color: #000;
483 }
484
485 #tabnav a:link:hover, #tabnav a:visited:hover {
486   text-decoration: underline;
487 }
488
489 #tabnav a:link.disabled,
490 #tabnav a:visited.disabled,
491 #tabnav a:link:hover.disabled,
492 #tabnav a:visited:hover.disabled {
493   color: #ccc;
494   cursor: default;
495   &:hover {
496     text-decoration: none;
497   }
498 }
499
500 /* Utility for styling notification numbers */
501
502 .count-number {
503   padding: 2px $lineheight/4;
504   border-radius: 2px;
505   background: #d7d7ff;
506   margin: 0 2px;
507   font-size: 11px;
508   color: #333;
509 }
510
511 /* Rules for greeting bar in the top right corner */
512
513 #greeting {
514   float: right;
515   padding-top: 3px;
516   margin-right: $lineheight/4;
517 }
518
519 .greeting-bar-unread {
520   font-weight: bold;
521 }
522
523 /* Rules for the message shown in place of the map when javascript is disabled */
524
525 #noscript {
526   z-index: 20000000;
527   position: absolute;
528   top: 15px;
529   left: 15px;
530 }
531
532 /* Rules for Leaflet maps */
533
534 .leaflet-control .control-button {
535   display: block;
536   height: 40px;
537   width: 40px;
538   background-color: white;
539   background-color: rgba(255,255,255,.8);
540   border-radius: 4px;
541   margin-bottom: 10px;
542   outline: none;
543 }
544
545 .leaflet-control .zoomin,
546 .control-layers .control-button {
547   margin-bottom: 0px;
548   border-radius: 4px 4px 0px 0px;
549 }
550
551 .site .leaflet-control .zoomout,
552 .control-key .control-button {
553   margin-bottom: 0px;
554   border-radius: 0px;
555 }
556
557 .leaflet-control .zoomout,
558 .control-locate .control-button,
559 .control-share .control-button {
560   border-radius: 0px 0px 4px 4px;
561 }
562
563 .leaflet-control .control-button:hover {
564   background-color: white;
565 }
566
567 .leaflet-control .control-button .icon {
568   margin: 10px;
569 }
570
571 /* Rules for the home page */
572
573 .site-export #map,
574 .site-index #map,
575 .site-edit #map {
576   height: 100%;
577   overflow: hidden;
578 }
579
580 #map-ui {
581   display: none;
582   position: relative;
583   float: right;
584   width: 250px;
585   height: 100%;
586   background: white;
587   border-left: 1px solid #CCC;
588   overflow: auto;
589
590   .section {
591     border-bottom: 1px solid #DDD;
592     padding: 15px;
593   }
594
595   a.close-button {
596     float: right;
597     padding:5px;
598     font-size:20px;
599     line-height:10px;
600     color:#222;
601     border:1px solid #ddd;
602   }
603 }
604
605 .layers-ui,
606 .share-ui {
607   ul, li:last-child, p:last-child {
608     margin-bottom: 0;
609   }
610 }
611
612 .layers-ui {
613   li {
614     border-radius: 4px;
615     overflow: hidden;
616     margin-bottom: 10px;
617   }
618
619   label {
620     display: block;
621     padding: 5px 5px 5px 7px;
622     background-color: #eee;
623     cursor: pointer;
624   }
625
626   li.active label {
627     background-color: #ccc;
628   }
629
630   .base-layers {
631     .leaflet-container {
632       width: 100%;
633       height: 50px;
634       cursor: pointer;
635     }
636   }
637 }
638
639 .share-ui {
640   .share-link {
641     li {
642       display: inline-block;
643       text-align: center;
644       width: 50%;
645     }
646   }
647
648   #embed_html {
649     resize: vertical;
650     font-family: monospace;
651     font-size: small;
652   }
653
654   #mapnik_scale {
655     width: 100px;
656   }
657 }
658
659 .site-index .leaflet-top,
660 .site-export .leaflet-top {
661   top: $lineheight/2 !important;
662   .leaflet-control {
663     margin-top: 0px !important;
664   }
665 }
666
667 .leaflet-popup-scrolled {
668   padding-right: $lineheight;
669   border-bottom: 0px !important;
670   border-top: 0px !important;
671 }
672
673 .leaflet-popup-content-wrapper {
674   border-radius: 4px !important;
675   -webkit-border-radius: 4px !important;
676 }
677
678 /* Rules for edit menu */
679
680 .menuicon {
681   padding: 0 $lineheight/4;
682   font-weight: normal;
683   display: inline-block;
684   &:hover {
685     text-decoration: none !important;
686   }
687 }
688
689 .menu {
690   display: none;
691   z-index: 10000;
692   position: absolute;
693   background-color: #ffffff;
694   border: 1px solid $lightgrey;
695   border-top: 0px;
696   ul {
697     margin: 0px;
698   }
699   li {
700     padding: 2px $lineheight/4;
701     border-top: 1px solid #eee;
702     white-space: nowrap;
703   }
704 }
705
706 /* Rules for attribution text under the main map shown on printouts */
707
708 #attribution {
709   display: none;
710 }
711
712 .attribution_license,
713 .attribution_project {
714   text-align: left;
715 }
716
717 .attribution_notice {
718   text-align: center;
719 }
720
721 /* Rules for the popout map sidebar */
722
723 #sidebar {
724   display: none;
725   position: relative;
726   float: left;
727   border-right: 1px solid $lightgrey;
728   width: 33.3333%;
729   height: 100%;
730   ul {
731     margin-bottom: 0;
732     &:last-child {
733         border-bottom: 1px solid #ccc;
734     }
735     li {
736       margin-bottom: $lineheight/4;
737       &:last-child {
738         margin-bottom: 0;
739       }
740     }
741   }
742 }
743
744 .sidebar_heading {
745   position: relative;
746   padding: $lineheight/2 $lineheight;
747   z-index: 9999;
748   background: $offwhite;
749   border-bottom: 1px solid #ccc;
750   h4 {
751     margin: 0;
752   }
753 }
754
755 .sidebar_close {
756   position: absolute;
757   height: $lineheight;
758   top: 0px;
759   bottom: 0;
760   right: $lineheight;
761   margin: auto;
762 }
763
764 #sidebar_content {
765   position: relative;
766   margin-bottom: 20px;
767   overflow: auto;
768   height: 100%;
769   width: 100%;
770   h4 {
771     padding: 0 $lineheight $lineheight/2 $lineheight;
772     margin-top: $lineheight/2;
773     margin-bottom: 0;
774     border-bottom: 1px solid #ddd;
775   }
776 }
777
778 /* Rules for the map key which appears in the popout sidebar */
779
780 #mapkey {
781  .mapkey-table-key img {
782     display: block;
783     margin-left: auto;
784     margin-right: auto;
785   }
786   td {
787     padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
788   }
789 }
790
791 /* Rules for search results which appear in the popout sidebar */
792
793 .search_searching {
794   margin-top: $lineheight/4;
795   margin-bottom: $lineheight/4;
796 }
797
798 .search_results_entry {
799   margin-bottom: 0;
800
801   .search_details {
802     display: block;
803     text-align: right;
804   }
805 }
806
807 .search_results_entry .search_searching {
808   text-align: center;
809   margin: $lineheight auto;
810   width: $lineheight;
811   display: block;
812 }
813
814 ul.results-list li { border-bottom: 1px solid #ccc; }
815
816 .search_results_error {
817   color: #f00;
818 }
819
820 /* Rules for data browser information which appears in the popout sidebar */
821
822 #browse_content {
823   position: relative;
824   .browse_show_list.button {
825     position: absolute;
826     left: $lineheight;
827     right: $lineheight;
828     bottom: -40px;
829     margin-bottom: 0;
830   }
831   a.more-details {
832     position: absolute;
833     top: 0;
834     right: $lineheight;
835   }
836   ul li {
837     margin-bottom: 0;
838   }
839 }
840
841 .browse_details {
842   position: relative;
843 }
844
845 .browse_status {
846   display: none;
847 }
848
849 /* Rules for export information which appears in the popout sidebar */
850
851 .export_bounds {
852   text-align: center;
853 }
854
855 .export_area_inputs {
856   margin-bottom: $lineheight/2;
857   input[type="text"] {
858     width: 80px;
859     margin-bottom: 5px;
860   }
861 }
862
863 .export_bound {
864   margin: $lineheight/4;
865 }
866
867 /* Rules for the main content area */
868
869 #content {
870   padding: $lineheight;
871   position: relative;
872 }
873
874 .site-edit #content,
875 .site-index #content,
876 .site-export #content {
877   position: fixed;
878   padding: 0;
879   top: 30px; bottom: 0;
880   left: 184px; right: 0;
881   border-left: 1px solid #ccc;
882 }
883
884 .wrapper {
885   margin-left: 184px;
886   border-left: 1px solid #ccc;
887   text-align: left;
888 }
889
890 .site-edit #content {
891   top: 30px;
892 }
893
894 #content.maximised {
895   top: 0;
896   left: 0;
897   right: 0;
898   bottom: 0;
899   border: 0;
900   z-index: 1000;
901 }
902
903 #slim_container {
904   width: 100%;
905 }
906
907 #slim_container_content {
908   max-width: 50em;
909   background-color: #FFFFFF;
910   margin: $lineheight/2 auto;
911   padding: 3px;
912   border-radius: 25px;
913   -moz-border-radius: 25px;
914   border: 1px solid #e6e6e6;
915 }
916
917 #slim_content {
918   margin: $lineheight/2;
919   margin-top: 95px;
920   max-width: 50em;
921
922   .content-heading {
923     margin-bottom: 15px;
924   }
925 }
926
927 #slim_header {
928   margin: 30px $lineheight/2;
929   position: absolute;
930   top: 0px;
931   margin-right: $lineheight/4;
932   img {
933     vertical-align: middle;
934     margin-bottom: $lineheight/4;
935     margin-right: $lineheight/4;
936   }
937 }
938
939 .content-heading {
940   position: relative;
941   padding: $lineheight;
942   background: $offwhite;
943   h1, h2 {
944     margin-bottom: $lineheight/2;
945     line-height: 100%;
946     &:last-child {
947       margin-bottom: 0;
948     }
949   }
950   p {
951     margin-top: $lineheight/2;
952     margin-bottom: 0px;
953   }
954 }
955
956 /* Rules for small maps in content areas */
957
958 .content_map {
959   position: relative;
960   width: 45%;
961   height: 400px;
962   border: 1px solid #ccc;
963   margin-bottom: $lineheight;
964   float: right;
965 }
966
967 .content_map #small_map {
968   height: 100%;
969   width: 100%;
970   margin-bottom: $lineheight;
971 }
972
973 /* Rules for the changeset list shown by the history tab etc */
974
975 #changeset_list {
976   width: 100%;
977   ul {
978     padding: $lineheight/2 0;
979     margin-bottom: 0px;
980     border-top: 1px solid #ccc;
981     &:last-child {
982       border-bottom: 1px solid #ccc;
983     }
984   }
985   .selected {
986     background: #FFFFC0;
987   }
988   .date,
989   .user {
990     border-left: 1px solid #ccc;
991     padding-left: $lineheight/4;
992     margin-right: $lineheight/4;
993   }
994 }
995
996 #changeset_list_map_wrapper {
997   position: absolute;
998   width: 50%;
999   height: 490px;
1000   top: 0;
1001   right: 0;
1002 }
1003
1004 #changeset_list_map_wrapper.scrolled {
1005   position: fixed;
1006 }
1007
1008 #changeset_list_map {
1009   position: absolute;
1010   bottom: $lineheight;
1011   top: $lineheight;
1012   right: $lineheight;
1013   left: $lineheight;
1014   border: 1px solid #ccc;
1015 }
1016
1017 #changeset_list_map_wrapper.scrolled #changeset_list_map {
1018   margin-left: 93px;
1019 }
1020
1021 /* Rules for the data browser */
1022
1023 .browse-section {
1024   border-top: 1px solid #ccc;
1025   margin-top: $lineheight/2;
1026   padding-top: $lineheight/2;
1027   &:first-child {
1028     margin-top: 0;
1029   }
1030   .warning {
1031     background-color: #ffe0cc;
1032     margin: 0px;
1033     padding: 4px 6px;
1034     max-width: 100%;
1035   }
1036   h4, p {
1037     margin-bottom: $lineheight/4;
1038   }
1039   ul, .bbox, .geo {
1040     display: inline-block;
1041     vertical-align: top;
1042     max-width: 65%;
1043   }
1044   ul p {
1045     margin-left: 0;
1046     margin-bottom: 0;
1047   }
1048   h4 {
1049     float: left;
1050     width: 33.3333%;
1051     display: inline-block;
1052     vertical-align: top;
1053   }
1054 }
1055
1056 .bbox {
1057   div {
1058     width: 33.3333%;
1059     text-align: center;
1060     padding: $lineheight/4 0;
1061     overflow: hidden;
1062     text-overflow: ellipsis;
1063     float: left;
1064   }
1065   .max_lat,
1066   .min_lat {
1067     margin-left: auto;
1068     margin-right: auto;
1069     width: 100%;
1070   }
1071 }
1072
1073 #browse_map .geolink {
1074   display: none;
1075 }
1076
1077 #browse_map .secondary-actions {
1078   margin-bottom: $lineheight/2;
1079 }
1080
1081 /* Rules for the trace list shown by the traces tab etc */
1082
1083 #trace_list {
1084   font-size: $lineheight/2;
1085   border-width: 0px;
1086   text-align: right;
1087
1088   .trace_summary {
1089     font-size: 12px;
1090     color: gray;
1091   }
1092
1093   .trace_pending {
1094     color: red;
1095   }
1096
1097   .trace_public {
1098     color: green;
1099   }
1100
1101   .trace_identifiable {
1102     color: green;
1103   }
1104
1105   .trace_trackable {
1106     color: red;
1107   }
1108
1109   .trace_private {
1110     color: red;
1111   }
1112 }
1113
1114 /* Rules for the user profile page */
1115
1116 #userinformation {
1117
1118   min-height: 100px;
1119   .userinformation-inner {
1120     float: left;
1121   }
1122   h2 {
1123     margin-top: 0;
1124   }
1125   .user-description {
1126     width: 100%;
1127     clear: both;
1128   }
1129   .deemphasize {
1130     margin: 0;
1131   }
1132 }
1133
1134 .admin-user-info small {
1135   margin-bottom: $lineheight/2;
1136   display: inline;
1137   margin-right: $lineheight;
1138 }
1139
1140 .activity-block {
1141   clear: left;
1142   border-bottom: 1px solid #ccc;
1143   padding-bottom: $lineheight;
1144   float: left;
1145   h3 {
1146     margin-bottom: $lineheight/2;
1147   }
1148 }
1149
1150 .contact-activity {
1151   margin-top: $lineheight;
1152   width: 100%;
1153 }
1154
1155 .activity-details p {
1156   margin-left: 70px;
1157   margin-bottom: 0;
1158 }
1159
1160 #friends-container .contact-activity ul {
1161   margin-left: 70px;
1162 }
1163
1164 .user-view {
1165   p#no_home_location {
1166     margin: $lineheight;
1167   }
1168   .user_thumbnail {
1169     margin-top: $lineheight/4;
1170     float: left;
1171   }
1172 }
1173
1174 /* Rules for the user map */
1175
1176 .content_map .leaflet-popup-content {
1177   margin: $lineheight/2;
1178   min-height: 50px;
1179 }
1180
1181 /* Rules for user popups on maps */
1182
1183 .user_popup {
1184   min-width: 200px;
1185   p {
1186     padding: 0 0 5px 0;
1187     margin-top: 0 0 0 60px;
1188     font-size: 12px;
1189   }
1190   img.user_thumbnail {
1191     float: left;
1192     margin: 0 $lineheight/2 0 0;
1193   }
1194 }
1195
1196 /* Rules for the user list */
1197
1198 #user_list {
1199   font-size: $lineheight/2;
1200   width: 100%;
1201
1202   tr {
1203     vertical-align: middle;
1204   }
1205
1206   p {
1207     margin-top: 0px;
1208     margin-bottom: 0px;
1209   }
1210 }
1211
1212 #user_list_actions {
1213   float: right;
1214   margin-top: $lineheight/2;
1215 }
1216
1217 /* Rules for the diary list page */
1218
1219 .diary_entry-list img.user_thumbnail {
1220   float: left;
1221 }
1222
1223 .diary_post {
1224   max-width: 740px;
1225   position: relative;
1226   margin-top: $lineheight/2;
1227   padding-top: $lineheight;
1228   border-top: 1px solid #ccc;
1229
1230   &:first-child {
1231     margin-top: 0;
1232     border-top: 0;
1233     padding-top: 0;
1234   }
1235   h1, h2 {
1236     font-size: 21px;
1237     line-height: 1em;
1238   }
1239   small.deemphasize {
1240     float: left;
1241     display: block;
1242   }
1243   ul.secondary-actions { display: inline-block;}
1244 }
1245
1246 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1247   display: inline;
1248 }
1249
1250 #content  .post_heading {
1251   margin-bottom: $lineheight;
1252   h2 {
1253     margin-top: 0;
1254     margin-bottom: $lineheight/2;
1255     font-size: 24px;
1256   }
1257 }
1258
1259 /* Rules for the diary entry page */
1260
1261 .diary_entry {
1262   #map {
1263     position: relative;
1264     width: 90%;
1265     height: 400px;
1266     border: 1px solid #ccc;
1267     display: none;
1268     margin-bottom: $lineheight;
1269   }
1270   #newcomment {
1271     border-top: 1px solid #ccc;
1272     padding-top: $lineheight;
1273     margin-top: $lineheight/2;
1274   }
1275   .comments {
1276     max-width: 740px;
1277   }
1278   .diary-comment {
1279     margin-top: $lineheight/2;
1280     border-top: 1px dashed #ccc;
1281     padding-top: $lineheight/2;
1282     &:first-child {
1283       margin-top: $lineheight;
1284       padding-top: $lineheight;
1285       border-top: 1px solid #ccc;
1286     }
1287     p {
1288       margin-bottom: $lineheight/2;
1289     }
1290     .comment-heading {
1291       margin-bottom: 0;
1292       margin-top: 0;
1293     }
1294   }
1295 }
1296
1297 .diary_entry-view img.user_thumbnail {
1298   float: left;
1299 }
1300
1301 /* Rules for the login page */
1302
1303 #login_openid_buttons {
1304   margin-bottom: 0;
1305 }
1306
1307 #login_openid_buttons li {
1308   float: left;
1309   padding: $lineheight/4 $lineheight/2;
1310 }
1311
1312 /* Rules for the account confirmation page */
1313
1314 #terms {
1315   .legale {
1316     border: 1px solid #ccc;
1317     padding: $lineheight;
1318     margin-bottom: $lineheight;
1319     overflow: auto;
1320     height: 10em;
1321
1322     &:p#last {
1323       margin-bottom: 0px;
1324     }
1325
1326     &:ol {
1327       margin-bottom: 0px;
1328     }
1329
1330     &:img {
1331       display: block;
1332       margin: $lineheight auto inherit auto;
1333     }
1334   }
1335
1336   form.sign {
1337     input[type=submit] {
1338       float: left;
1339     }
1340     #decline {
1341       background: $grey;
1342       &:hover {
1343         background: darken($grey, $hovercolor);
1344       }
1345     }
1346   }
1347   fieldset {
1348     margin-bottom: $lineheight;
1349   }
1350   #contributorGuidance {
1351     background-color: $offwhite;
1352     border-radius: 4px;
1353     -moz-border-radius: 4px;
1354   }
1355   .signing-buttons {
1356     height: 50px;
1357   }
1358 }
1359
1360 /* Rules for the account settings page */
1361
1362 #accountForm .user_map {
1363   position: relative;
1364   width: 500px;
1365   height: 400px;
1366   border: 1px solid #ccc;
1367 }
1368
1369 #accountForm .user_image {
1370   margin-bottom: 0;
1371 }
1372
1373 #accountForm #user_image {
1374   margin-left: 20px;
1375 }
1376
1377 #accountForm ul.accountImage-options {
1378   margin-left: 120px;
1379 }
1380
1381 .nohome .location {
1382   display: none;
1383 }
1384
1385 #homerow .message {
1386   display: none;
1387 }
1388
1389 .nohome .message {
1390   display: inline !important;
1391 }
1392
1393 .content_map.settings_map {
1394   width: 50%;
1395   float: none;
1396 }
1397
1398 /* Rules for the oauth settings page */
1399
1400 .oauth_clients .buttons .oauth-edit {
1401   border-radius: 2px 0 0 2px;
1402 }
1403
1404 .oauth_clients .buttons .oauth-delete {
1405   border-radius: 0 2px 2px 0;
1406 }
1407
1408 /* Rules for messages pages */
1409
1410 .messages {
1411   width: 100%;
1412   border: 1px solid #ddd;
1413
1414   input[type="submit"] {
1415     margin: auto;
1416   }
1417   tbody tr {
1418     border-top: 1px solid #ccc;
1419   }
1420
1421   .inbox-row {
1422     background: #f8f8ff;
1423   }
1424
1425   .inbox-row-unread {
1426     background:#CBEEA7;
1427   }
1428
1429   .right {
1430     float: right;
1431   }
1432
1433   tr td,
1434   tr th {
1435     padding: $lineheight/4;
1436   }
1437   p:last-child,
1438   h2:last-child,
1439   h3:last-child,
1440   ol:last-child,
1441   ul:last-child {
1442     margin-bottom:0;
1443   }
1444   tr td {
1445     height: 30px;
1446     border-right: 1px solid $lightgrey;
1447   }
1448 }
1449
1450 .inbox-row .inbox-mark-read {
1451   display: none;
1452 }
1453
1454 .info-line {
1455   margin-bottom: $lineheight;
1456   padding: $lineheight/4 0px 4px 0px;
1457   border-bottom: 1px solid #ccc;
1458
1459   form, form div {
1460     display: inline;
1461   }
1462 }
1463
1464 .info-line .user_thumbnail_tiny {
1465   vertical-align: middle;
1466 }
1467
1468 .inbox-mark-unread,
1469 .inbox-mark-read,
1470 .inbox-delete {
1471   width: 1%;
1472 }
1473
1474 .inbox-row-unread .inbox-mark-unread {
1475   display: none;
1476 }
1477
1478 .message-read .message-buttons {
1479   margin-top: $lineheight;
1480   padding-top: $lineheight;
1481   border-top: 1px solid $lightgrey;
1482 }
1483
1484 .message-read .buttons .mark-unread-button {
1485   border-radius: 0;
1486 }
1487
1488 /* Rules for "flash" notice boxes shown at the top of the content area */
1489
1490 .flash {
1491     padding: $lineheight;
1492   &#error {
1493     background-color: #ff7070;
1494   }
1495   &#warning {
1496     background-color: #ffe0cc;
1497   }
1498   &#notice {
1499     background-color: #CBEEA7;
1500   }
1501 }
1502
1503 /* Rules for highlighting fields with rails validation errors */
1504
1505 .field_with_errors {
1506   padding: 2px;
1507   background-color: #ff7070;
1508   display: table;
1509 }
1510
1511 /* Rules for rails validation error boxes */
1512
1513 #errorExplanation {
1514   width: 400px;
1515   border: 2px solid #ff7070;
1516   padding: 0 $lineheight/2;
1517   margin-bottom: $lineheight;
1518   background-color: #f0f0f0;
1519
1520   h2 {
1521     margin: 0 -10px 10px -10px;
1522     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1523     font-weight: bold;
1524     font-size: 12px;
1525     background-color: #c00;
1526     color: #fff;
1527     text-align: left;
1528   }
1529
1530   p {
1531     color: #333;
1532     margin-bottom: 0px;
1533     padding: $lineheight/4;
1534   }
1535
1536   ul {
1537     padding-left: $lineheight;
1538
1539     li {
1540       font-size: 12px;
1541       list-style: disc;
1542     }
1543   }
1544 }
1545
1546 /* Rules for forms */
1547
1548 .standard-form {
1549   fieldset {
1550     margin-bottom: $lineheight;
1551   }
1552   label.standard-label {
1553     display: block;
1554     margin-bottom: $lineheight/4;
1555     font-size: $typeheight;
1556     font-weight: bold;
1557     line-height: 1.5;
1558   }
1559   label.standard-label.secondary {
1560     display: inline-block;
1561     font-weight: normal;
1562   }
1563   .form-help {
1564     font-weight: normal;
1565   }
1566   .form-column {
1567     float: left;
1568     margin-right: 20px;
1569   }
1570   .form-divider {
1571     margin-top: $lineheight;
1572     padding-top: $lineheight;
1573     border-top: 1px solid $lightgrey;
1574   }
1575   .form-row {
1576     margin-bottom: $lineheight/2;
1577   }
1578   .form-list {
1579     margin-bottom: 0;
1580   }
1581   .form-list li {
1582     margin-bottom: 5px;
1583    }
1584   input[type="checkbox"],
1585   input[type="radio"] {
1586     float: left;
1587     margin-top: 5px;
1588   }
1589 }
1590
1591 #remember_me_openid {
1592   display: block;
1593 }
1594
1595 input[type="checkbox"],
1596 input[type="radio"] {
1597     margin-right: 5px;
1598 }
1599
1600 input[type="text"],
1601 input[type="email"],
1602 input[type="url"],
1603 input[type="password"],
1604 textarea {
1605   border: 1px solid #ccc;
1606   padding: 2px 5px;
1607   margin: 0;
1608   width: 200px;
1609 }
1610
1611 textarea {
1612   padding: 5px;
1613   width: 100%;
1614 }
1615
1616 /* Rules for user images */
1617
1618 img.user_image {
1619   max-width: 100px;
1620   max-height: 100px;
1621   border: 1px solid #ccc;
1622   margin-bottom: $lineheight;
1623   float: left;
1624   margin-right: $lineheight;
1625 }
1626
1627 img.user_thumbnail {
1628   max-width: 50px;
1629   max-height: 50px;
1630   border: 1px solid #ccc;
1631   margin-right: $lineheight;
1632 }
1633
1634 img.user_thumbnail_tiny {
1635   max-width: 25px;
1636   max-height: 25px;
1637   border: 1px solid #ccc;
1638 }
1639
1640 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1641
1642 .nowrap {
1643   white-space: nowrap;
1644 }
1645
1646 /* Rules for geo microformats */
1647
1648 abbr.geo {
1649   border-bottom: none;
1650 }
1651
1652 /* Rules for RSS buttons */
1653
1654 .rsssmall {
1655   position: relative;
1656   top: 5px;
1657 }
1658
1659 /* General styles for action lists / subnavs / pager navs */
1660
1661 ul.secondary-actions {
1662   font-style: normal;
1663   margin-bottom: 0;
1664   margin-left: 0;
1665   &.pager {
1666     display: inline-block;
1667     margin-right: 60px;
1668   }
1669   li {
1670     display: block;
1671     float: left;
1672     list-style: none;
1673     border-left: 1px solid #ccc;
1674     padding-left: $lineheight/4;
1675     margin-right: $lineheight/4;
1676     &:first-child {
1677       border-left: 0;
1678       padding-left: 0;
1679     }
1680     &:last-child {
1681       margin-right: 0px;
1682     }
1683   }
1684 }
1685
1686 /* Utility for managing inner content areas */
1687
1688 .inner22 { padding: $lineheight;}
1689
1690 .inner12 { padding: $lineheight/2 $lineheight;}
1691
1692 .inner11 { padding: $lineheight/2;}
1693
1694 .inner02 { padding: 0 $lineheight;}
1695
1696 /* Utility for general button styles */
1697
1698 input[type="button"],
1699 input[type="submit"],
1700 input[type="reset"],
1701 a.button {
1702   cursor: pointer;
1703   border: 0;
1704   display: inline-block;
1705   line-height: 20px;
1706   padding: $lineheight/4 $lineheight/2;
1707   min-height: 20px + $lineheight/2;
1708   min-width: 120px;
1709   margin: 0 0 $lineheight/2 0;
1710   color: white;
1711   background: $blue;
1712   text-align: center;
1713   border-radius: 2px;
1714   -moz-border-radius: 2px;
1715   &:hover {
1716     background: darken($blue, $hovercolor);
1717     text-decoration: none;
1718   }
1719   &.deemphasize {
1720     background: $lightblue;
1721     &:hover {
1722       background: darken($lightblue, $hovercolor);
1723     }
1724   }
1725   &:disabled {
1726     background: $lightgrey;
1727     &:hover {
1728       background: $lightgrey;
1729     }
1730   }
1731   &:last-child {
1732     margin-bottom: 0;
1733   }
1734 }
1735
1736 .buttons {
1737   min-width: 200px;
1738   input[type="submit"],
1739   input[type="button"],
1740   input[type="reset"],
1741   .button {
1742     box-sizing: border-box;
1743     float: left;
1744     border-radius: 0;
1745     margin:0;
1746     min-width: 100px;
1747     max-width: 180px;
1748     border-right:1px solid white;
1749     text-overflow: ellipsis;
1750     white-space: nowrap;
1751     overflow: hidden;
1752   }
1753   input:first-child,
1754   .button:first-child {
1755     border-radius:2px 0 0 2px;
1756   }
1757   input:last-child,
1758   .button:last-child {
1759     border-radius:0 2px 2px 0;
1760     border-right-width: 0;
1761   }
1762   input:only-child,
1763   .button:only-child,
1764   *[value="Hide"] + input:last-child,
1765   *[value="Hide"] + .button:last-child {
1766     border-radius:2px;
1767     border-right-width: 0;
1768   }
1769     /* if a 3-button set has a hidden middle button */
1770   *[value="Hide"] + input:nth-child(3),
1771   *[value="Hide"] + .button:nth-child(3) {
1772     border-radius:0 2px 2px 0;
1773     border-right-width: 0;
1774   }
1775   /* if a 3-button set starts with a hidden button */
1776   *[value="Hide"] + input:nth-child(2):not(:last-child),
1777   *[value="Hide"] + .button:nth-child(2):not(:last-child) {
1778     border-radius:2px 0 0 2px;
1779     border-right-width: 1px solid white;
1780   }
1781 }
1782
1783 /* Rules for doing distinct colour of alternate table rows */
1784
1785 .table0,
1786 .item0 {
1787   background: $offwhite;
1788 }
1789
1790 .table1,
1791 .item1 {
1792   background: #fff;
1793 }
1794
1795 /* Rules for OpenID logo */
1796
1797 .openid_logo {
1798   vertical-align: text-bottom;
1799   border: 0;
1800 }
1801
1802 /* Rules for rich text */
1803
1804 .richtext,
1805 .prose {
1806   h1, h2 {
1807     padding-bottom: $lineheight/2;
1808     border-bottom: 1px dashed #cccccc;
1809     margin-bottom: $lineheight/2;
1810   }
1811
1812   h1 {
1813     font-size: 24px;
1814   }
1815
1816   h2 {
1817     font-size: 18px;
1818   }
1819
1820   h3 {
1821     font-size: $typeheight;
1822   }
1823
1824   code {
1825     font-size: 13px;
1826     background: #e8e8e8;
1827     padding: 2px 3px;
1828   }
1829
1830   pre {
1831     font-size: 13px;
1832     background: #e8e8e8;
1833     padding: 2px 3px;
1834
1835     code {
1836       padding: 0;
1837     }
1838   }
1839
1840   img {
1841     padding: $lineheight;
1842     background-color: $offwhite;
1843     display: block;
1844     max-width: 100%;
1845     margin: auto;
1846   }
1847
1848   blockquote {
1849     border-left: $lineheight solid $offwhite;
1850     padding-left: $lineheight;
1851     margin: 0;
1852     color: #7E7E7E;
1853   }
1854
1855   ul, ol {
1856     padding-left: $lineheight;
1857     margin-bottom: $lineheight;
1858     margin-left: $lineheight;
1859   }
1860
1861   ul li {
1862     list-style: disc;
1863   }
1864
1865   ol li {
1866     list-style: decimal;
1867   }
1868 }
1869
1870 .diary_post .richtext {
1871     margin-top: $lineheight;
1872   }
1873
1874 .comments .richtext {
1875   margin-left: 70px;
1876   margin-top: 0;
1877 }
1878
1879 /* Rules for rich text editors */
1880
1881 .richtext_container {
1882   margin-bottom: $lineheight;
1883
1884   .richtext_content {
1885     width: 50%;
1886     display: inline-block;
1887     vertical-align: top;
1888
1889     .richtext_preview {
1890       display: inline-block;
1891       padding: $lineheight;
1892       background-color: $offwhite;
1893       overflow-x: auto;
1894
1895       &.loading {
1896         background-image: image-url("loading.gif");
1897         background-repeat: no-repeat;
1898         background-position: center;
1899       }
1900
1901       > :first-child {
1902         margin-top: 0px;
1903       }
1904     }
1905   }
1906
1907   .richtext_help {
1908     display: inline-block;
1909     vertical-align: top;
1910     margin-left: 15px;
1911     background-color: #f8f8ff;
1912     padding: $lineheight/2;
1913     width: 220px;
1914
1915     ul {
1916       margin-bottom: 0;
1917     }
1918
1919     h4.heading, li {
1920       border-bottom: 1px solid #ccc;
1921       margin-bottom: $lineheight/4;
1922       padding-bottom: $lineheight/4;
1923     }
1924
1925     li h4, li span, li p {
1926       display: inline-block;
1927       vertical-align: top;
1928       font-size: 11px;
1929     }
1930
1931     li h4 {
1932       width: 40%;
1933       margin: 0;
1934     }
1935
1936     li span, li p {
1937       width: 50%;
1938       margin-left: $lineheight/2;
1939       margin-bottom: $lineheight/4;
1940       white-space: nowrap;
1941     }
1942   }
1943 }
1944
1945 /* Rules for the user notes list */
1946
1947 .note_list {
1948   tr.creator {
1949     background-color: #eeeeee;
1950   }
1951
1952   td {
1953     padding: 3px;
1954   }
1955
1956   p {
1957     margin-bottom: 0px;
1958   }
1959 }
1960
1961 /* Rules for the notes interface */
1962
1963 .leaflet-popup-content .note {
1964   padding-top: $lineheight/2;
1965 }
1966
1967 .leaflet-popup-content .note {
1968   h2 {
1969     margin-bottom: $lineheight/2;
1970   }
1971
1972   div {
1973     margin-top: $lineheight/2;
1974   }
1975
1976   .permalink {
1977     position: absolute;
1978     top: $lineheight/4;
1979     left: $lineheight/4;
1980     min-width: 15px;
1981     min-height: 15px;
1982   }
1983
1984   .permalink span {
1985     display: none;
1986     padding-left: $lineheight;
1987   }
1988
1989   .permalink:hover span {
1990     display: block;
1991   }
1992
1993   .warning {
1994     display: block;
1995     background-color: #ffe0cc;
1996     padding: 4px 6px;
1997     margin-bottom: $lineheight/2;
1998   }
1999
2000   .comment_body {
2001     margin-top: 2px;
2002     margin-bottom: 2px;
2003
2004     p {
2005       margin-top: 0px;
2006       margin-bottom: 0px;
2007     }
2008   }
2009
2010   .comment {
2011     width: 100%;
2012     height: 100px;
2013   }
2014
2015   .buttons {
2016     margin-top: $lineheight/4;
2017     text-align: right;
2018   }
2019 }
2020
2021 /*
2022  * Rules for the iD editor
2023  */
2024 .id-embed {
2025   width: 100%;
2026   height: 100%;
2027 }
2028
2029 /* Rules for rotating sidebar ads */
2030 .ad-container {
2031   display: block;
2032   height: 120px;
2033   overflow: hidden;
2034   position: relative;
2035   border-bottom: 1px solid #ccc;
2036 }
2037
2038 .ad {
2039   height: 100px;
2040   border: 0;
2041   background: #fff;
2042 }