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