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