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