85b8f26a9448e8f5d62c9f136eab3202273d4b95
[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 $hovercolor: 20%;
9
10 /* Styles common to large and small screens */
11
12 /* Minimal CSS reset */
13
14 html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p {
15   margin: 0;
16   padding: 0;
17   border: 0;
18   font-size:100%;
19 }
20
21 fieldset,img { border: 0; }
22
23 legend { color: #000; }
24
25 sup { vertical-align: text-top; }
26
27 sub { vertical-align: text-bottom; }
28
29 table {
30   border-collapse: collapse;
31   border-spacing: 0;
32 }
33
34 li { list-style: none; }
35
36 input,
37 select,
38 textarea,
39 body { font: $typeheight/$lineheight "Helvetica Neue",Arial,sans-serif; }
40
41 abbr, acronym {
42   border-bottom: .1em dotted;
43   cursor: help;
44 }
45
46 /* Micro Clearfix | Details: http://nicolasgallagher.com/micro-clearfix-hack/ */
47
48 .clearfix:before,
49 .clearfix:after {
50     content: " ";
51     display: table;
52 }
53
54 .clearfix:after {
55     clear: both;
56 }
57
58 /* Default rules for the body of every page */
59
60 * {
61   -moz-box-sizing: border-box;
62   -webkit-box-sizing: border-box;
63   box-sizing: border-box;
64 }
65
66 body {
67   font-family: 'Helvetica Neue',Arial,sans-serif;
68   font-size: $typeheight;
69   line-height: 1.6666;
70   color: #222;
71   background-color: #fff;
72   margin: 0px;
73   padding: 0px;
74   text-align: left;
75 }
76
77 body.slim {
78   background-color: #f0f0f0;
79 }
80
81 h1, h2, h3 {
82   margin-top: $lineheight/2;
83   margin-bottom: $lineheight;
84   font-weight: bold;
85   line-height: 1.2;
86 }
87
88 h1, h2 {
89   font-size: 32px;
90 }
91
92 #content h2 {
93   font-size: 21px;
94 }
95
96 h3 {
97   font-size: 21px;
98   margin-top: $lineheight/2;
99   margin-bottom: $lineheight;
100 }
101
102 h4,h5,h6 {
103   font-size: $typeheight;
104   margin-top: $lineheight/2;
105   margin-bottom: $lineheight/2;
106   font-weight: bold;
107   line-height: 1.5;
108 }
109
110 p, ul {
111   margin-bottom: $lineheight;
112 }
113
114 p > img {
115   width: auto;
116   max-width: 100%;
117 }
118
119 small, aside {
120   font-size: 12px;
121 }
122
123 h1:first-child,
124 h2:first-child,
125 h3:first-child,
126 h4:first-child,
127 h5:first-child,
128 h6:first-child {
129   margin-top: 0;
130 }
131
132 .column-1 {
133   width: 50%;
134   margin-bottom: $lineheight/2;
135 }
136
137 .small_icon {
138   vertical-align: middle;
139   margin-right: $lineheight/4;
140 }
141
142 /* Rules for links */
143
144 a {
145   color: #00f;
146   text-decoration: none;
147   &:hover {
148     text-decoration: underline;
149   }
150 }
151
152 /* Rules for horizontal lines */
153
154 hr {
155   border: none;
156   background-color: #ccc;
157   color: #ccc;
158   height: 1px;
159 }
160
161 /* General styles for tables */
162
163 table {
164   width: 100%;
165   margin-bottom: $lineheight;
166   th, td {
167     text-align: left;
168     padding: $lineheight/4;
169     line-height: $lineheight;
170   }
171   th {
172     font-weight: bold;
173     vertical-align: top;
174   }
175   td {
176     vertical-align: middle;
177   }
178 }
179
180 /* Rules for the whole left sidebar, including the logo */
181
182 #left {
183   position: absolute;
184   height: 100%;
185   width: 185px;
186   font-size: 11px;
187   line-height: 1.1;
188   z-index: 100;
189   border-right: 1px solid #ccc;
190 }
191
192 /* Rules for the OpenStreetMap logo in the top left corner */
193
194 #logo {
195   display: block;
196   width: 170px;
197   min-width: 170px;
198   padding: $lineheight $lineheight/4;
199   text-align: center;
200   margin: auto;
201 }
202
203 #logo h1 {
204   font-size: 18px;
205   line-height: 1;
206   text-align: center;
207   margin: 0;
208 }
209
210 #logo h2 {
211   font-size: $lineheight/2;
212   line-height: 15px;
213   margin: 0;
214 }
215
216 /* Rules for the site name */
217
218 #small-title {
219   display: none;
220 }
221
222 /* Rules for the introductory text displayed in the left sidebar to new users */
223
224 .sidebar-copy {
225   padding: $lineheight/4 $lineheight/2;
226   p {
227     margin: $lineheight/4 0;
228   }
229 }
230 .sidebar-copy.intro {
231   border-top: 1px solid #ccc;
232 }
233
234 /*
235  * Rules for alert boxes shown in the left sidebar when important
236  * information needs to be conveyed such as when the site is
237  * undergoing maintenance.
238  */
239
240 .sidebar-alert {
241   padding: $lineheight/4;
242   border-top: 1px solid #ccc;
243   margin-top: 4px;
244   margin-bottom: -5px;
245   background: #e00;
246   font-size: 12px;
247   font-weight: bold;
248   p {
249     margin: $lineheight/4;
250   }
251 }
252
253 /*
254  * Rules for notice boxes shown in the left sidebar when important, but
255  * non-critical information needs to be conveyed such as notices about
256  * donation drives.
257  */
258
259 .sidebar-notice {
260   padding: $lineheight/4;
261   border-top: 1px solid #ccc;
262   margin-top: 4px;
263   margin-bottom: -5px;
264   background: #ea0;
265   font-size: 12px;
266   p {
267     margin: $lineheight/4;
268   }
269 }
270
271 /* Rules for the menu displayed in the left sidebar */
272
273 .left_menu {
274   left: 0px;
275   margin: 0;
276   padding: $lineheight/4 $lineheight/2;
277   font-size: 12px;
278   line-height: 1.25;
279   list-style-type: none;
280   border-bottom: 1px solid #ccc;
281   border-top: 1px solid #ccc;
282   img {
283     margin: $lineheight/2 0px;
284   }
285
286   ul {
287     padding: 0;
288     margin: 0;
289   }
290   
291   li {
292     list-style-type: none;
293     padding: 0;
294     margin: 0;
295   }
296   
297   h4 {
298     padding: $lineheight/4 0 $lineheight/4 0;
299     font-size: 12px;
300     margin: 0;
301   }
302   
303   li:last-child h4 {
304     padding-top: 0;
305   }
306 }
307
308 /* Rules for SOTM advert */
309
310 #sotm {
311   width: 165px;
312   margin: $lineheight/2;
313   padding: 0px;
314   border: 0px;
315   background: #fff;
316   img {
317     width: 165px;
318   }
319 }
320
321 /*
322  * Rules for "optional boxes" which appear in the left sidebar on
323  * certain pages. Current users are the seach box on the main page
324  * and the tag cloud on the traces pages.
325  */
326
327 .optionalbox {
328   left: 0px;
329   padding: $lineheight/4 $lineheight/2;
330   margin: $lineheight/4 0;
331   text-align: left;
332 }
333
334 /* Rules for the search box */
335
336 #search_field {
337   position: relative;
338
339   form {
340     width: 165px;
341   }
342   
343   input[type="text"] {
344     width: 165px;
345     padding: 3px;
346     font-size: $typeheight;
347     line-height: 1.1;
348     height: 25px;
349     padding: 2px 0px 2px $lineheight/4;
350     box-shadow: inset #DDD 0px 1px 3px;
351   }
352   
353   input[type="text"]:focus {
354     outline: none;
355     border: 1px solid #000;
356   }
357   
358   input[type="submit"] {
359     border: 0;
360     margin: 0;
361     padding: 0;
362     width: 15px;
363     height: 15px;
364     text-indent: -1000px;
365     overflow: hidden;
366     background: image-url("sprite.png") 0 0 no-repeat;
367     position: absolute;
368     top: $lineheight/4;
369     right: $lineheight/4;
370     cursor: pointer;
371   }
372 }
373
374 .search_help {
375   margin: $lineheight/4 0 0 0;
376 }
377
378 /* Utility for de-emphasizing content */
379
380 .deemphasize {
381   color: #999;
382   a {
383     color: $blue;
384   }
385 }
386
387 /* Rules for donation request box */
388
389 .donate {
390   display: block;
391   width: 164px;
392   padding: $lineheight/4;
393   border: 1px solid #AED1A0;
394   background: #cbeea7;
395   font-size: $typeheight;
396   line-height: 1.4;
397   text-align: center;
398   border-radius: 2px;
399   color: #222;
400   margin: $lineheight/2 $lineheight/2 0px $lineheight/2;
401
402   &:hover {
403     background: #9ed485;
404     text-decoration: none;
405   }
406   span {
407     margin: 0;
408     padding-left: 18px;
409     background: image-url("sprite.png") 0 -29px no-repeat;
410   }
411 }
412
413 /* Rules for Creative Commons logo button */
414
415 #cclogo {
416   margin: $lineheight/2 0;
417   float: right;
418 }
419
420 /* Rules for tabbed navigation bar */
421
422 #top-bar {
423   position: relative;
424   margin-left: 185px;
425   height: 30px;
426   border-bottom: 1px solid #ccc;
427   background: white;
428   z-index: 100;
429 }
430
431 .site-edit #top-bar,
432 .site-index #top-bar,
433 .site-export #top-bar {
434   position: fixed;
435   left: 0;
436   right: 0;
437 }
438
439 #tabnav {
440   height: 30px;
441   margin-bottom:0;
442   overflow: hidden;
443   li {
444     display: inline;
445   }
446   a, a:link, a:visited {
447     float: left;
448     font-weight: bold;
449     padding: 3px $lineheight/2;
450     text-decoration: none;
451     color: #333;
452     float: left;
453     margin-right: 1px;
454     -webkit-transition: color 200ms ease-in;
455        -moz-transition: color 200ms ease-in;
456          -o-transition: color 200ms ease-in;
457             transition: color 200ms ease-in;
458   }
459 }
460
461 .site-index #tabnav a#viewanchor,
462 .site-edit #tabnav a#editanchor,
463 .changeset-list #tabnav a#historyanchor,
464 .site-export #tabnav a#exportanchor {
465   border-bottom: 1px solid #aaa;
466   background: #9ed485;
467   color: #000;
468 }
469
470 #tabnav a:link:hover, #tabnav a:visited:hover {
471   text-decoration: underline;
472 }
473
474 #tabnav a:link.disabled,
475 #tabnav a:visited.disabled,
476 #tabnav a:link:hover.disabled,
477 #tabnav a:visited:hover.disabled {
478   color: #ccc;
479   cursor: default;
480   &:hover {
481     text-decoration: none;
482   }
483 }
484
485 /* Utility for styling notification numbers */
486
487 .count-number {
488   padding: 2px $lineheight/4;
489   border-radius: 3px;
490   background: #d7d7ff;
491   margin: 0 2px;
492   font-size: 11px;
493   color: #333;
494 }
495
496 /* Rules for greeting bar in the top right corner */
497
498 #greeting {
499   float: right;
500   padding-top: 3px;
501   margin-right: $lineheight/4;
502 }
503
504 .greeting-bar-unread {
505   font-weight: bold;
506 }
507
508 /* Rules for the message shown in place of the map when javascript is disabled */
509
510 #noscript {
511   z-index: 20000000;
512   position: absolute;
513   top: 15px;
514   left: 15px;
515 }
516
517 /* Rules for Leaflet maps */
518
519 .leaflet-control-attribution {
520   a.disabled {
521     color: #99c9dc;
522     cursor: default;
523     text-decoration: none;
524   }
525
526   ul.secondary-actions {
527     float: left;
528     margin-right: $lineheight/4;
529
530     &:only-child {
531       margin-right: 0px;
532     }
533   }
534 }
535
536 .site-index .leaflet-top,
537 .site-export .leaflet-top {
538   top: $lineheight/2 !important;
539   .leaflet-control {
540     margin-top: 0px !important;
541   }
542 }
543
544 .site-index #map .olControlScaleLine,
545 .site-export #map .olControlScaleLine {
546   left: $lineheight/2 !important;
547 }
548
549 .leaflet-popup-scrolled {
550   padding-right: $lineheight;
551   border-bottom: 0px !important;
552   border-top: 0px !important;
553 }
554
555 .leaflet-popup-content-wrapper {
556   border-radius: 4px !important;
557   -webkit-border-radius: 4px !important;
558 }
559
560 /* Rules for edit menu */
561
562 .menuicon {
563   padding: 0 $lineheight/4;
564   font-weight: normal;
565   display: inline-block;
566   &:hover {
567     text-decoration: none !important;
568   }
569 }
570
571 .menu {
572   display: none;
573   z-index: 10000;
574   position: absolute;
575   background-color: #ffffff;
576   border: 1px solid #cccccc;
577   border-top: 0px;
578   ul {
579     margin: 0px;
580   }
581   li {
582     padding: 2px $lineheight/4;
583     border-top: 1px solid #eee;
584     white-space: nowrap;
585   }
586 }
587
588 /* Rules for attribution text under the main map shown on printouts */
589
590 #attribution {
591   display: none;
592 }
593
594 .attribution_license,
595 .attribution_project {
596   text-align: left;
597 }
598
599 .attribution_notice {
600   text-align: center;
601 }
602
603 /* Rules for the popout map sidebar */
604
605 #sidebar {
606   display: none;
607   position: absolute;
608   overflow: auto;
609   top: 0px;
610   bottom: 0px;
611   left: 0px;
612   border-right: 1px solid #ccc;
613   width: 33.3333%;
614   .sidebar_heading {
615     position: relative;
616     padding: $lineheight/2 $lineheight;
617     z-index: 9999;
618     background: $offwhite;
619     border-bottom: 1px solid #ccc;
620   }
621   h4 {
622     margin: 0;
623   }
624   ul {
625     margin-bottom: 0;
626     li {
627       margin-bottom: $lineheight/4;
628       &:last-child {
629         margin-bottom: 0;
630       }
631     }
632   }
633 }
634
635 #sidebar_close {
636   position: absolute;
637   height: $lineheight;
638   top: 0px;
639   bottom: 0;
640   right: $lineheight;
641   margin: auto;
642 }
643
644 #sidebar_content {
645   position: relative;
646   bottom: 0;
647   width: 100%;
648   h4 {
649     padding: 0 $lineheight $lineheight/2 $lineheight;
650     margin-top: $lineheight/2;
651     margin-bottom: 0;
652     border-bottom: 1px solid #ddd;
653   }
654 }
655
656 /* Rules for the map key which appears in the popout sidebar */
657
658 #mapkey {
659   padding: $lineheight;
660  .mapkey-table-key img {
661     display: block;
662     margin-left: auto;
663     margin-right: auto;
664   }
665   td {
666     padding: 0 $lineheight/4 $lineheight/4 $lineheight/4;
667   }
668 }
669
670 /* Rules for search results which appear in the popout sidebar */
671
672 .search_searching {
673   margin-top: $lineheight/4;
674   margin-bottom: $lineheight/4;
675 }
676
677 .search_results_entry {
678   margin-bottom: 0;
679
680   .search_details {
681     display: block;
682     text-align: right;
683   }
684 }
685
686 .search_results_entry .search_searching {
687   text-align: center;
688   margin: $lineheight auto;
689   width: $lineheight;
690   display: block;
691 }
692
693 ul.results-list li { border-bottom: 1px solid #ccc; }
694
695 .search_results_error {
696   color: #f00;
697 }
698
699 /* Rules for data browser information which appears in the popout sidebar */
700
701 #browse_content {
702   position: relative;
703   .browse_show_list.button {
704     position: absolute;
705     left: $lineheight;
706     right: $lineheight;
707     bottom: -40px;
708     margin-bottom: 0;
709   }
710   a.more-details {
711     position: absolute;
712     top: 0;
713     right: $lineheight;
714   }
715   ul li {
716     margin-bottom: 0;
717   }
718 }
719
720 .browse_details {
721   position: relative;
722 }
723
724 .browse_status {
725   display: none;
726 }
727
728 /* Rules for export information which appears in the popout sidebar */
729
730 .export_bounds {
731   text-align: center;
732 }
733
734 .export_area_inputs {
735   margin-bottom: $lineheight/2;
736 }
737
738 .export_bound {
739   margin: $lineheight/4;
740 }
741
742 .export_details input[type="text"]#export_html_text {
743   width: 100%;
744 }
745
746 #sidebar #marker_inputs li:last-child {
747   margin-bottom: $lineheight/2;
748 }
749
750 #export_osm,
751 #export_mapnik,
752 #export_osmarender {
753   display: none;
754 }
755
756 .export_buttons {
757   width: 100%;
758   text-align: center;
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   height: 56px;
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 {
1289   width: 50%;
1290   display: inline-block;
1291 }
1292
1293 .nohome .location {
1294   display: none;
1295 }
1296
1297 #homerow .message {
1298   display: none;
1299 }
1300
1301 .nohome .message {
1302   display: inline !important;
1303 }
1304
1305 .content_map.settings_map {
1306   float: none;
1307   width: 50%;
1308 }
1309
1310 /* Rules for message in/out box page */
1311
1312 .messages {
1313   width: 100%;
1314   border: 1px solid #ddd;
1315
1316   tbody tr {
1317     border-top: 1px solid #ccc;
1318   }
1319   
1320   .inbox-row {
1321     background: #f8f8ff;
1322   }
1323   
1324   .inbox-row-unread {
1325     background:#CBEEA7;
1326   }
1327   
1328   .right {
1329     float: right;
1330   }
1331   
1332   tr td,
1333   tr th {
1334     padding: $lineheight/4;
1335   }
1336 }
1337
1338 .inbox-row .inbox-mark-read {
1339   display: none;
1340 }
1341
1342 .info-line {
1343   margin-bottom: $lineheight;
1344   padding: $lineheight/4 0px 4px 0px;
1345   border-bottom: 1px solid #ccc;
1346
1347   form, form div {
1348     display: inline;
1349   }
1350 }
1351
1352 .info-line .user_thumbnail_tiny {
1353   vertical-align: middle;
1354 }
1355
1356 .inbox-row-unread .inbox-mark-unread {
1357   display: none;
1358 }
1359
1360 /* Rules for "flash" notice boxes shown at the top of the content area */
1361
1362 .flash {
1363     padding: $lineheight;
1364   &#error {
1365     background-color: #ff7070;
1366   }
1367   &#warning {
1368     background-color: #ffe0cc;
1369   }
1370   &#notice {
1371     background-color: #CBEEA7;
1372   }
1373 }
1374
1375 /* Rules for highlighting fields with rails validation errors */
1376
1377 .field_with_errors {
1378   padding: 2px;
1379   background-color: #ff7070;
1380   display: table;
1381 }
1382
1383 /* Rules for rails validation error boxes */
1384
1385 #errorExplanation {
1386   width: 400px;
1387   border: 2px solid #ff7070;
1388   padding: $lineheight/2;
1389   margin-bottom: $lineheight;
1390   background-color: #f0f0f0;
1391   h2 {
1392     margin: -10px;
1393     padding: $lineheight/4 $lineheight/4 $lineheight/4 15px;
1394     font-weight: bold;
1395     font-size: 12px;
1396     background-color: #c00;
1397     color: #fff;
1398     text-align: left;
1399   }
1400
1401   p {
1402     color: #333;
1403     margin-bottom: 0px;
1404     padding: $lineheight/4;
1405   }
1406   
1407   ul li {
1408     font-size: 12px;
1409     list-style: disc;
1410   }
1411
1412 }
1413
1414 /* Rules for forms */
1415
1416 .standard-form {
1417   fieldset {
1418     margin-bottom: $lineheight;
1419   }
1420   label {
1421     display: block;
1422     width: 300px;
1423     margin-right: $lineheight/2;
1424     font-size: $typeheight;
1425     font-weight: bold;
1426     line-height: 1.5;
1427   }
1428   .form-row {
1429     margin-bottom: $lineheight/2;
1430   }
1431   input[name=remember_me] {
1432     float: left;
1433   }
1434 }
1435
1436 #remember_me_openid {
1437   display: block;
1438 }
1439
1440 input[type="text"],
1441 input[type="email"],
1442 input[type="url"],
1443 input[type="password"],
1444 textarea {
1445   border: 1px solid #ccc;
1446 }
1447
1448 /* Rules for user images */
1449
1450 img.user_image {
1451   max-width: 100px;
1452   max-height: 100px;
1453   border: 1px solid #ccc;
1454   margin-bottom: $lineheight;
1455   float: left;
1456   margin-right: $lineheight;
1457 }
1458
1459 img.user_thumbnail {
1460   max-width: 50px;
1461   max-height: 50px;
1462   border: 1px solid #ccc;
1463   margin-right: $lineheight;
1464 }
1465
1466 img.user_thumbnail_tiny {
1467   max-width: 25px;
1468   max-height: 25px;
1469   border: 1px solid #ccc;
1470 }
1471
1472 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1473
1474 .nowrap {
1475   white-space: nowrap;
1476 }
1477
1478 /* Rules for geo microformats */
1479
1480 abbr.geo {
1481   border-bottom: none;
1482 }
1483
1484 /* Rules for RSS buttons */
1485
1486 .rsssmall {
1487   position: relative;
1488   top: 5px;
1489 }
1490
1491 /* General styles for action lists / subnavs / pager navs */
1492
1493 ul.secondary-actions {
1494   font-style: normal;
1495   margin-bottom: 0;
1496   margin-left: 0;
1497   &.pager {
1498     display: inline-block;
1499     margin-right: 60px;
1500   }
1501   li {
1502     display: block;
1503     float: left;
1504     list-style: none;
1505     border-left: 1px solid #ccc;
1506     padding-left: $lineheight/4;
1507     margin-right: $lineheight/4;
1508     &:first-child {
1509       border-left: 0;
1510       padding-left: 0;
1511     }
1512     &:last-child {
1513       margin-right: 0px;
1514     }
1515   }
1516 }
1517
1518 /* Utility for managing inner content areas */
1519
1520 .inner22 { padding: $lineheight;}
1521
1522 .inner12 { padding: $lineheight/2 $lineheight;}
1523
1524 .inner02 { padding: 0 $lineheight;}
1525
1526 /* Utility for general button styles */
1527
1528 input[type="button"],
1529 input[type="submit"],
1530 input[type="reset"],
1531 a.button {
1532   cursor: pointer;
1533   border: 0;
1534   display: block;
1535   padding: $lineheight/4;
1536   min-width: 120px;
1537   margin-bottom: $lineheight/2;
1538   color: white;
1539   background: $blue;
1540   text-align: center;
1541   border-radius: 2px;
1542   -moz-border-radius: 2px;
1543   &:hover {
1544     background: darken($blue, $hovercolor);
1545     text-decoration: none;
1546   }
1547   &:last-child {
1548     margin-bottom: 0;
1549   }
1550 }
1551
1552 a.button.submit {
1553   background-color: #cbeea7;
1554   &:hover {
1555     background-color: #9ed485;
1556   }
1557 }
1558
1559 /* Rules for doing distinct colour of alternate table rows */
1560
1561 .table0,
1562 .item0 {
1563   background: $offwhite;
1564 }
1565
1566 .table1,
1567 .item1 {
1568   background: #fff;
1569 }
1570
1571 /* Rules for OpenID logo */
1572
1573 .openid_logo {
1574   vertical-align: text-bottom;
1575   border: 0;
1576 }
1577
1578 /* Rules for rich text */
1579
1580 .richtext {
1581   h1, h2 {
1582     padding-bottom: $lineheight/2;
1583     border-bottom: 1px dashed #cccccc;
1584     margin-bottom: $lineheight/2;
1585   }
1586
1587   h1 {
1588     font-size: 24px;
1589   }
1590
1591   h2 {
1592     font-size: 18px;
1593   }
1594
1595   h3 {
1596     font-size: $typeheight;
1597   }
1598
1599   code {
1600     font-size: 13px;
1601     background: #e8e8e8;
1602     padding: 2px 3px;
1603   }
1604
1605   pre {
1606     font-size: 13px;
1607     background: #e8e8e8;
1608     padding: 2px 3px;
1609
1610     code {
1611       padding: 0;
1612     }
1613   }
1614
1615   img {
1616     padding: $lineheight;
1617     background-color: $offwhite;
1618     display: block;
1619     max-width: 100%;
1620     margin: auto;
1621   }
1622
1623   blockquote {
1624     border-left: $lineheight solid $offwhite;
1625     padding-left: $lineheight;
1626     margin: 0;
1627     color: #7E7E7E;
1628   }
1629
1630   ul, ol {
1631     font-style: italic;
1632     padding-left: $lineheight;
1633     margin-bottom: $lineheight;
1634     margin-left: $lineheight;
1635   }
1636
1637   ul li {
1638     list-style: disc;
1639   }
1640
1641   ol li {
1642     list-style: decimal;
1643   }
1644 }
1645
1646 .diary_post .richtext {
1647     margin-top: $lineheight;
1648   }
1649
1650 .comments .richtext {
1651   margin-left: 70px;
1652   margin-top: 0;
1653 }
1654
1655 /* Rules for rich text editors */
1656
1657 .richtext_container {
1658   .richtext_content {
1659     display: inline-block;
1660     vertical-align: top;
1661
1662     .richtext_preview {
1663       display: inline-block;
1664       padding: $lineheight;
1665       background-color: $offwhite;
1666       overflow-x: auto;
1667
1668       &.loading {
1669         background-image: image-url("loading.gif");
1670         background-repeat: no-repeat;
1671         background-position: center;
1672       }
1673
1674       > :first-child {
1675         margin-top: 0px;
1676       }
1677     }
1678   }
1679
1680   .richtext_help {
1681     display: inline-block;
1682     vertical-align: top;
1683     margin-left: 15px;
1684     background-color: #f8f8ff;
1685     padding: $lineheight/2;
1686     width: 300px;
1687     max-width: 450px;
1688
1689     ul {
1690       margin-bottom: 0;
1691     }
1692
1693     h4.heading, li {
1694       border-bottom: 1px solid #ccc;
1695       margin-bottom: $lineheight/4;
1696       padding-bottom: $lineheight/4;
1697     }
1698
1699     li h4, li span, li p {
1700       display: inline-block;
1701       vertical-align: top;
1702       font-size: 11px;
1703     }
1704
1705     li h4 {
1706       width: 35%;
1707       margin: 0;
1708     }
1709
1710     li span, li p {
1711       width: 60%;
1712       margin-left: $lineheight/2;
1713       margin-bottom: $lineheight/4;
1714       white-space: nowrap;
1715     }
1716
1717     input.richtext_doedit,
1718     input.richtext_dopreview {
1719       margin-right: $lineheight/2;
1720     }
1721   }
1722
1723   .buttons input[type="submit"] {
1724     display: inline-block;
1725     margin-bottom:0;
1726     width:99px;
1727     min-width:99px;
1728   }
1729   .buttons input:first-child {
1730     border-radius:2px 0 0 2px;
1731     margin-right:1px;
1732   }
1733   .buttons input:last-child {
1734     border-radius:0 2px 2px 0;
1735   }
1736 }
1737
1738 /* Rules for the user notes list */
1739
1740 .note_list {
1741   tr.creator {
1742     background-color: #eeeeee;
1743   }
1744
1745   td {
1746     padding: 3px;
1747   }
1748
1749   p {
1750     margin-bottom: 0px;
1751   }
1752 }
1753
1754 /* Rules for the notes interface */
1755
1756 .note {
1757   padding-top: $lineheight/2;
1758 }
1759
1760 .note {
1761   h2 {
1762     margin-bottom: $lineheight/2;
1763   }
1764
1765   div {
1766     margin-top: $lineheight/2;
1767   }
1768
1769   .permalink {
1770     position: absolute;
1771     top: $lineheight/4;
1772     left: $lineheight/4;
1773     min-width: 15px;
1774     min-height: 15px;
1775     background: image-url("sprite.png") 0 -45px no-repeat;
1776   }
1777
1778   .permalink span {
1779     display: none;
1780     padding-left: $lineheight;
1781   }
1782
1783   .permalink:hover span {
1784     display: block;
1785   }
1786
1787   .warning {
1788     display: block;
1789     background-color: #ffe0cc;
1790     padding: 4px 6px;
1791     margin-bottom: $lineheight/2;
1792   }
1793
1794   .comment_body {
1795     margin-top: 2px;
1796     margin-bottom: 2px;
1797
1798     p {
1799       margin-top: 0px;
1800       margin-bottom: 0px;
1801     }
1802   }
1803
1804   .comment {
1805     width: 100%;
1806     height: 100px;
1807   }
1808
1809   .buttons {
1810     margin-top: $lineheight/4;
1811     text-align: right;
1812   }
1813 }
1814
1815 /*
1816  * Rules for the iD editor
1817  */
1818 .id-embed {
1819   width: 100%;
1820   height: 100%;
1821 }
1822
1823 /* Rules for rotating sidebar ads */
1824 .ad-container {
1825   display: block;
1826   height: 120px;
1827   overflow: hidden;
1828   position: relative;
1829   border-bottom: 1px solid #ccc;
1830 }
1831
1832 .ads {
1833   width: 370px;
1834   position: absolute;
1835   left: 0%;
1836 }
1837
1838 .ad {
1839   float: left;
1840   height: 120px;
1841   padding: $lineheight/2;
1842   border: 0px;
1843   background: #fff;
1844 }