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