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