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