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