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