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