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