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