Add SotM ads
[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 body {
52   font-family: 'Helvetica Neue',Arial,sans-serif;
53   font-size: 14px;
54   line-height: 1.6666;
55   color: #222;
56   background-color: #fff;
57   margin: 0px;
58   padding: 0px;
59   text-align: left;
60 }
61
62 body.slim {
63   background-color: #f0f0f0;
64 }
65
66 h1, h2, h3 {
67   margin-top: 10px;
68   margin-bottom: 20px;
69   font-weight: bold;
70   line-height: 1.2;
71 }
72
73 h1, h2 {
74   font-size: 32px;
75 }
76
77 #content h2 {
78   font-size: 21px;
79 }
80
81 h3 {
82   font-size: 21px;
83   margin-top: 10px;
84   margin-bottom: 20px;
85 }
86
87 h4,h5,h6 {
88   font-size: 14px;
89   margin-top: 10px;
90   margin-bottom: 20px;
91   font-weight: bold;
92   line-height: 1.5;
93 }
94
95 p, ul {
96   margin-bottom: 20px;
97 }
98
99 p > img {
100   width: auto;
101   max-width: 100%;
102 }
103
104 small, aside {
105   font-size: 12px;
106 }
107
108 h1:first-child,
109 h2:first-child,
110 h3:first-child,
111 h4:first-child,
112 h5:first-child,
113 h6:first-child {
114   margin-top: 0;
115 }
116
117 .column-1 {
118   width: 50%;
119   margin-bottom: 20px;
120 }
121
122 .small_icon {
123   vertical-align: middle;
124   margin-right: 5px;
125 }
126
127 /* Rules for links */
128
129 a {
130   color: #00f;
131   text-decoration: none;
132   &:hover {
133     text-decoration: underline;
134   }
135 }
136
137 /* Rules for horizontal lines */
138
139 hr {
140   border: none;
141   background-color: #ccc;
142   color: #ccc;
143   height: 1px;
144 }
145
146 /* General styles for tables */
147
148 table {
149   width: 100%;
150   margin-bottom: 20px;
151   th, td {
152     text-align: left;
153     padding: 5px;
154     line-height: 20px;
155   }
156   th {
157     font-weight: bold;
158     vertical-align: top;
159   }
160   td {
161     vertical-align: middle;
162   }
163 }
164
165 /* Rules for the whole left sidebar, including the logo */
166
167 #left {
168   position: absolute;
169   height: 100%;
170   width: 185px;
171   font-size: 11px;
172   line-height: 1.1;
173   z-index: 100;
174   border-right: 1px solid #ccc;
175 }
176
177 /* Rules for the OpenStreetMap logo in the top left corner */
178
179 #logo {
180   display: block;
181   width: 170px;
182   min-width: 170px;
183   padding: 20px 5px;
184   text-align: center;
185   margin: auto;
186 }
187
188 #logo h1 {
189   font-size: 18px;
190   line-height: 1.1;
191   text-align: center;
192   margin: 0px;
193 }
194
195 #logo h2 {
196   font-size: 10px;
197   line-height: 15px;
198   margin: 0px;
199 }
200
201 /* Rules for the site name */
202
203 #small-title {
204   display: none;
205 }
206
207 /* Rules for the introductory text displayed in the left sidebar to new users */
208
209 .sidebar-copy {
210   padding: 5px 10px;
211 }
212
213 .sidebar-copy p {
214   margin: 5px 0;
215 }
216
217 .sidebar-copy.intro {
218   margin-top: -1px;
219   border-top: 1px solid #ccc;
220 }
221
222 /*
223  * Rules for alert boxes shown in the left sidebar when important
224  * information needs to be conveyed such as when the site is
225  * undergoing maintenance.
226  */
227
228 .sidebar-alert {
229   padding: 5px;
230   border-top: 1px solid #ccc;
231   margin-top: 4px;
232   margin-bottom: -4px;
233   background: #e00;
234   font-size: 12px;
235   font-weight: bold;
236   p {
237     margin: 5px;
238   }
239 }
240
241 /*
242  * Rules for notice boxes shown in the left sidebar when important, but
243  * non-critical information needs to be conveyed such as notices about
244  * donation drives.
245  */
246
247 .sidebar-notice {
248   padding: 5px;
249   border-top: 1px solid #ccc;
250   margin-top: 4px;
251   margin-bottom: -4px;
252   background: #ea0;
253   font-size: 12px;
254   p {
255     margin: 5px;
256   }
257 }
258
259 /* Rules for the menu displayed in the left sidebar */
260
261 .left_menu {
262   left: 0px;
263   margin: 0;
264   padding: 5px 10px;
265   font-size: 12px;
266   line-height: 1.25;
267   list-style-type: none;
268   border-bottom: 1px solid #ccc;
269   border-top: 1px solid #ccc;
270 }
271
272 .left_menu img {
273   margin: 10px 0px;
274 }
275
276 .left_menu ul {
277   padding: 0;
278   margin: 0;
279 }
280
281 .left_menu li {
282   list-style-type: none;
283   padding: 0;
284   margin: 0;
285 }
286
287 .left_menu h4 {
288   padding: 5px 0 5px 0;
289   font-size: 12px;
290   margin: 0;
291 }
292
293 .left_menu li:last-child h4 {
294   padding-top: 0;
295 }
296
297 /* Rules for SOTM advert */
298
299 #sotm {
300   width: 165px;
301   margin: 10px;
302   padding: 0px;
303   border: 0px;
304   background: #fff;
305 }
306
307 #sotm img {
308   width: 165px;
309 }
310
311 /*
312  * Rules for "optional boxes" which appear in the left sidebar on
313  * certain pages. Current users are the seach box on the main page
314  * and the tag cloud on the traces pages.
315  */
316
317 .optionalbox {
318   left: 0px;
319   padding: 5px 10px;
320   margin: 5px 0;
321   text-align: left;
322 }
323
324 /* Rules for the search box */
325
326 #search_field form {
327   width: 165px;
328 }
329
330 #search_field {
331   position: relative;
332 }
333
334 #search_field input[type="text"] {
335   width: 165px;
336   padding: 3px;
337   font-size: 14px;
338   line-height: 1.1;
339   height: 25px;
340   padding: 2px 0px 2px 5px;
341   box-shadow: inset #DDD 0px 1px 3px;
342   box-sizing: border-box;
343   -webkit-box-sizing: border-box;
344   -moz-box-sizing: border-box;
345   -ms-box-sizing: border-box;
346 }
347
348 #search_field input[type="text"]:focus {
349   outline: none;
350   border: 1px solid #000;
351 }
352
353 #search_field input[type="submit"] {
354   border: 0;
355   margin: 0;
356   padding: 0;
357   width: 15px;
358   height: 15px;
359   text-indent: -1000px;
360   overflow: hidden;
361   background: image-url("sprite.png") 0 0 no-repeat;
362   position: absolute;
363   top: 5px;
364   right: 5px;
365   cursor: pointer;
366 }
367
368 .search_help {
369   margin: 5px 0 0 0;
370 }
371
372 /* Utility for de-emphasizing content */
373
374 .deemphasize {
375   color: #999;
376   a {
377     color: #7092FF;
378   }
379 }
380
381 /* Rules for donation request box */
382
383 .donate {
384   display: block;
385   width: 153px;
386   padding: 5px;
387   border: 1px solid #AED1A0;
388   background: #cbeea7;
389   font-size: 14px;
390   line-height: 1.4;
391   text-align: center;
392   border-radius: 2px;
393   color: #222;
394   margin: 10px 10px 0px 10px;
395
396   &:hover {
397     background: #9ed485;
398     text-decoration: none;
399   }
400   span {
401     margin: 0;
402     padding-left: 18px;
403     background: image-url("sprite.png") 0 -29px no-repeat;
404   }
405 }
406
407 /* Rules for Creative Commons logo button */
408
409 #cclogo {
410   margin: 10px 0;
411   float: right;
412 }
413
414 /* Rules for tabbed navigation bar */
415
416 #top-bar {
417   position: relative;
418   margin-left: 185px;
419   height: 29px;
420   border-bottom: 1px solid #ccc;
421   background: white;
422   z-index: 100;
423 }
424
425 .site-edit #top-bar,
426 .site-index #top-bar,
427 .site-export #top-bar {
428   position: fixed;
429   left: 0;
430   right: 0;
431 }
432
433 #tabnav {
434   height: 29px;
435   margin-bottom:0;
436   overflow: hidden;
437 }
438
439 #tabnav li {
440   display: inline;
441 }
442
443 #tabnav a, #tabnav a:link, #tabnav a:visited {
444   float: left;
445   background: #fff;
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: 185px; right: 0;
780   border-left: 1px solid #ccc;
781 }
782
783 .wrapper {
784   margin-left: 185px;
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: 398px;
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 {
919   position: absolute;
920   bottom: 20px;
921   top: 20px;
922   right: 20px;
923   width: 45%;
924   min-height: 398px;
925   max-height: 598px;
926   border: 1px solid #ccc;
927 }
928
929 /* Rules for the data browser */
930
931 .browse-section {
932   border-top: 1px solid #ccc;
933   margin-top: 10px;
934   padding-top: 10px;
935   &:first-child {
936     margin-top: 0;
937   }
938   .warning {
939     background-color: #ffe0cc;
940     margin: 0px;
941     padding: 4px 6px;
942   }
943   h4, p {
944     margin-bottom: 5px;
945   }
946   p, ul, .bbox, .geo {
947     display: inline-block;
948     vertical-align: top;
949     max-width: 65%;
950   }
951   ul p {
952     margin-left: 0;
953     margin-bottom: 0;
954   }
955   h4 {
956     width: 33.3333%;
957     display: inline-block;
958     vertical-align: top;
959   }
960 }
961
962 .bbox {
963   div {
964     width: 33.3333%;
965     text-align: center;
966     padding: 5px 0;
967     overflow: hidden;
968     text-overflow: ellipsis;
969     float: left;
970   }
971   .max_lat,
972   .min_lat {
973     margin-left: auto;
974     margin-right: auto;
975     width: 100%;
976   }
977 }
978
979 #browse_map .geolink {
980   display: none;
981 }
982
983 #browse_map .secondary-actions {
984   margin-bottom: 10px;
985 }
986
987 /* Rules for the trace list shown by the traces tab etc */
988
989 #trace_list {
990   font-size: 10px;
991   border-width: 0px;
992   text-align: right;
993 }
994
995 #trace_list .trace_summary {
996   font-size: 12px;
997   color: gray;
998 }
999
1000 #trace_list .trace_pending {
1001   color: red;
1002 }
1003
1004 #trace_list .trace_public {
1005   color: green;
1006 }
1007
1008 #trace_list .trace_identifiable {
1009   color: green;
1010 }
1011
1012 #trace_list .trace_trackable {
1013   color: red;
1014 }
1015
1016 #trace_list .trace_private {
1017   color: red;
1018 }
1019
1020 /* Rules for the user profile page */
1021
1022 #userinformation {
1023   min-height: 100px;
1024   .userinformation-inner {
1025     float: left;
1026   }
1027   h2 {
1028     margin-top: 0;
1029   }
1030   .user-description {
1031     width: 100%;
1032     clear: both;
1033   }
1034   .deemphasize {
1035     margin: 0;
1036   }
1037 }
1038
1039 .admin-user-info small {
1040   margin-bottom: 10px;
1041   display: inline;
1042   margin-right: 20px;
1043 }
1044
1045 .activity-block {
1046   clear: left;
1047   border-bottom: 1px solid #ccc;
1048   padding-bottom: 20px;
1049   float: left;
1050   h3 {
1051     margin-bottom: 10px;
1052   }
1053 }
1054
1055 .contact-activity {
1056   margin-top: 20px;
1057   width: 100%;
1058 }
1059
1060 .activity-details p {
1061   margin-left: 72px;
1062   margin-bottom: 0;
1063 }
1064
1065 #friends-container .contact-activity ul {
1066   margin-left: 72px;
1067   }
1068
1069 .user-view p#no_home_location {
1070   margin: 20px;
1071 }
1072
1073 .user-view .user_thumbnail {
1074   margin-top: 5px;
1075   float: left;
1076 }
1077
1078 /* Rules for the user map */
1079
1080 .content_map .leaflet-popup-content {
1081   margin: 10px 15px;
1082   min-height: 62px;
1083 }
1084
1085 /* Rules for user popups on maps */
1086
1087 .user_popup {
1088   min-width: 200px;
1089 }
1090
1091 .user_popup p {
1092   padding-top: 3px;
1093   padding-bottom: 3px;
1094   margin-top: 0px;
1095   margin-bottom: 0px;
1096   margin-left: 55px;
1097   margin-right: 2px;
1098 }
1099
1100 .user_popup img.user_thumbnail {
1101   float: left;
1102   margin-right: 10px;
1103 }
1104
1105 /* Rules for user popups on maps */
1106
1107 .user_popup p {
1108   margin-bottom: 0;
1109   margin-left: 60px;
1110   font-size: 12px;
1111 }
1112
1113 /* Rules for the user list */
1114
1115 #user_list {
1116   font-size: 10px;
1117   width: 100%;
1118 }
1119
1120 #user_list tr {
1121   vertical-align: middle;
1122 }
1123
1124 #user_list p {
1125   margin-top: 0px;
1126   margin-bottom: 0px;
1127 }
1128
1129 #user_list_actions {
1130   float: right;
1131   margin-top: 10px;
1132 }
1133
1134 /* Rules for the diary list page */
1135
1136 .diary_entry-list img.user_thumbnail {
1137   float: left;
1138 }
1139
1140 .diary_post {
1141   max-width: 740px;
1142   position: relative;
1143   margin-top: 20px;
1144   padding-top: 20px;
1145   border-top: 1px solid #ccc;
1146
1147   &:first-child {
1148     margin-top: 0;
1149     border-top: 0;
1150     padding-top: 0;
1151   }
1152   h1, h2 {
1153     font-size: 21px;
1154     line-height: 1;
1155   }
1156   small.deemphasize {
1157     float: left;
1158     display: block;
1159   }
1160   ul.secondary-actions { display: inline-block;}
1161 }
1162
1163 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1164   display: inline;
1165 }
1166
1167 #content  .post_heading {
1168   margin-bottom: 20px;
1169   h2 {
1170     margin-top: 0;
1171     margin-bottom: 10px;
1172     font-size: 24px;
1173   }
1174 }
1175
1176 /* Rules for the diary entry page */
1177
1178 .diary_entry {
1179   #map {
1180     position: relative;
1181     width: 90%;
1182     height: 398px;
1183     border: 1px solid #ccc;
1184     display: none;
1185     margin-bottom: 20px;
1186   }
1187   #newcomment {
1188     border-top: 1px solid #ccc;
1189     padding-top: 20px;
1190     margin-top: 10px;
1191   }
1192   .comments {
1193     max-width: 740px;
1194   }
1195   .diary-comment {
1196     margin-top: 10px;
1197     border-top: 1px dashed #ccc;
1198     padding-top: 10px;
1199     &:first-child {
1200       margin-top: 20px;
1201       padding-top: 20px;
1202       border-top: 1px solid #ccc;
1203     }
1204     p {
1205       margin-bottom: 10px;
1206     }
1207     .comment-heading {
1208       margin-bottom: 0;
1209       margin-top: 0;
1210     }
1211   }
1212 }
1213
1214 .diary_entry-view img.user_thumbnail {
1215   float: left;
1216 }
1217
1218 /* Rules for the login page */
1219
1220 #login_openid_buttons li {
1221   float: left;
1222   padding: 5px 10px;
1223 }
1224
1225 /* Rules for the account confirmation page */
1226
1227 div#contributorTerms {
1228   border: 1px solid #ccc;
1229   padding: 20px;
1230   margin-bottom: 20px;
1231   overflow: auto;
1232   height: 398px;
1233 }
1234
1235 div#contributorTerms p#last {
1236   margin-bottom: 0px;
1237 }
1238
1239 div#contributorTerms ol {
1240   margin-bottom: 0px;
1241 }
1242
1243 div#contributorTerms img {
1244   display: block;
1245   margin: 20px auto inherit auto;
1246 }
1247
1248 form#termsForm div#buttons {
1249   float: right;
1250 }
1251
1252 form#termsForm input#agree {
1253   margin-left: 40px;
1254 }
1255
1256 div#slim_content form#termsForm {
1257   width: auto;
1258 }
1259
1260 p#contributorGuidance {
1261   background-color: #f4f4ff;
1262   border-radius: 3px;
1263   -moz-border-radius: 3px;
1264   margin-top: 20px;
1265   padding: 10px;
1266 }
1267
1268 /* Rules for the account settings page */
1269
1270 #accountForm {
1271   margin-top: 20px;
1272 }
1273
1274 #accountForm td {
1275   padding-bottom: 10px;
1276 }
1277
1278 #accountForm .user_map {
1279   position: relative;
1280   width: 498px;
1281   height: 398px;
1282   border: 1px solid #ccc;
1283 }
1284
1285 .accountImage-options {
1286   width: 50%;
1287   display: inline-block;
1288 }
1289
1290 .nohome .location {
1291   display: none;
1292 }
1293
1294 #homerow .message {
1295   display: none;
1296 }
1297
1298 .nohome .message {
1299   display: inline !important;
1300 }
1301
1302 #accountForm input[type=submit] {
1303   margin-top: 15px;
1304 }
1305
1306 .content_map.settings_map {
1307   float: none;
1308   width: 50%;
1309 }
1310
1311 /* Rules for message in/out box page */
1312
1313 .messages {
1314   width: 100%;
1315   border: 1px solid #ddd;
1316 }
1317
1318 .messages tbody tr {
1319   border-top: 1px solid #ccc;
1320 }
1321
1322 .messages .inbox-row {
1323   background: #f8f8ff;
1324 }
1325
1326 .messages .inbox-row-unread {
1327   background:#CBEEA7;
1328 }
1329
1330 .right {
1331   float: right;
1332 }
1333
1334 .messages tr td,
1335 .messages tr th {
1336   padding: 5px;
1337 }
1338
1339 .inbox-row .inbox-mark-read {
1340   display: none;
1341 }
1342
1343 .info-line {
1344   margin-bottom: 20px;
1345   padding: 5px 0px 4px 0px;
1346   border-bottom: 1px solid #ccc;
1347 }
1348
1349 .info-line form,
1350 .info-line form div {
1351   display: inline;
1352 }
1353
1354 .info-line .user_thumbnail_tiny {
1355   vertical-align: middle;
1356 }
1357
1358 .inbox-row-unread .inbox-mark-unread {
1359   display: none;
1360 }
1361
1362 /* Rules for "flash" notice boxes shown at the top of the content area */
1363
1364 .flash {
1365     padding: 20px;
1366   &#error {
1367     background-color: #ff7070;
1368   }
1369   &#warning {
1370     background-color: #ffe0cc;
1371   }
1372   &#notice {
1373     background-color: #CBEEA7;
1374   }
1375 }
1376
1377 /* Rules for highlighting fields with rails validation errors */
1378
1379 .field_with_errors {
1380   padding: 2px;
1381   background-color: #ff7070;
1382   display: table;
1383 }
1384
1385 /* Rules for rails validation error boxes */
1386
1387 #errorExplanation {
1388   width: 400px;
1389   border: 2px solid #ff7070;
1390   padding: 10px;
1391   margin-bottom: 20px;
1392   background-color: #f0f0f0;
1393 }
1394
1395 #errorExplanation h2 {
1396   margin: -10px;
1397   padding: 5px 5px 5px 15px;
1398   font-weight: bold;
1399   font-size: 12px;
1400   background-color: #c00;
1401   color: #fff;
1402   text-align: left;
1403 }
1404
1405 #errorExplanation p {
1406   color: #333;
1407   margin-bottom: 0px;
1408   padding: 5px;
1409 }
1410
1411 #errorExplanation ul li {
1412   font-size: 12px;
1413   list-style: disc;
1414 }
1415
1416 /* Rules for forms */
1417
1418 .submitButton {
1419   text-align: center;
1420 }
1421
1422 .fieldName {
1423   vertical-align: top;
1424   font-weight: bold;
1425   font-size: 12px;
1426   line-height: 1.6666;
1427   text-align: right;
1428 }
1429
1430 .submitButton {
1431   text-align: right;
1432 }
1433
1434 .minorNote {
1435   font-size: 12px;
1436 }
1437
1438 input[type="text"],
1439 input[type="email"],
1440 input[type="url"],
1441 input[type="password"],
1442 textarea {
1443   border: 1px solid #ccc;
1444 }
1445
1446 /* Rules for user images */
1447
1448 img.user_image {
1449   max-width: 100px;
1450   max-height: 100px;
1451   border: 1px solid #ccc;
1452   margin-bottom: 20px;
1453   float: left;
1454   margin-right: 20px;
1455 }
1456
1457 img.user_thumbnail {
1458   max-width: 50px;
1459   max-height: 50px;
1460   border: 1px solid #ccc;
1461   margin-right: 20px;
1462 }
1463
1464 img.user_thumbnail_tiny {
1465   max-width: 24px;
1466   max-height: 24px;
1467   border: 1px solid #ccc;
1468 }
1469
1470 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1471
1472 .nowrap {
1473   white-space: nowrap;
1474 }
1475
1476 /* Rules for geo microformats */
1477
1478 abbr.geo {
1479   border-bottom: none;
1480 }
1481
1482 /* Rules for RSS buttons */
1483
1484 .rsssmall {
1485   position: relative;
1486   top: 4px;
1487 }
1488
1489 /* General styles for action lists / subnavs / pager navs */
1490
1491 ul.secondary-actions {
1492   font-style: normal;
1493   margin-bottom: 0;
1494   margin-left: 0;
1495   &.pager {
1496     display: inline-block;
1497     margin-bottom: 20px;
1498     margin-right: 60px;
1499   }
1500   li {
1501     display: block;
1502     float: left;
1503     list-style: none;
1504     border-left: 1px solid #ccc;
1505     padding-left: 5px;
1506     margin-right: 5px;
1507     &:first-child {
1508       border-left: 0;
1509       padding-left: 0;
1510     }
1511     &:last-child {
1512       margin-right: 0px;
1513     }
1514   }
1515 }
1516
1517 /* Utility for managing inner content areas */
1518
1519 .inner22 { padding: 20px;}
1520
1521 .inner12 { padding: 10px 20px;}
1522
1523 .inner02 { padding: 0 20px;}
1524
1525 /* Utility for general button styles */
1526
1527 a.button {
1528   display: block;
1529   padding: 5px;
1530   min-width: 120px;
1531   margin-bottom: 10px;
1532   color: white;
1533   background: #7092FF;
1534   text-align: center;
1535   border-radius: 2px;
1536   -moz-border-radius: 2px;
1537   &:hover {
1538     background: blue;
1539     text-decoration: none;
1540   }
1541   &:last-child {
1542     margin-bottom: 0;
1543   }
1544 }
1545
1546 a.button.submit {
1547   background-color: #cbeea7;
1548   &:hover {
1549     background-color: #9ed485;
1550   }
1551 }
1552
1553 /* Rules for doing distinct colour of alternate table rows */
1554
1555 .table0,
1556 .item0 {
1557   background: #F4F4FF;
1558 }
1559
1560 .table1,
1561 .item1 {
1562   background: #fff;
1563 }
1564
1565 /* Rules for OpenID logo */
1566
1567 .openid_logo {
1568   vertical-align: text-bottom;
1569   border: 0;
1570 }
1571
1572 /* Rules for rich text */
1573
1574 .richtext {
1575   h1, h2 {
1576     padding-bottom: 10px;
1577     border-bottom: 1px dashed #cccccc;
1578     margin-bottom: 10px;
1579   }
1580
1581   h1 {
1582     font-size: 24px;
1583   }
1584
1585   h2 {
1586     font-size: 18px;
1587   }
1588
1589   h3 {
1590     font-size: 14px;
1591   }
1592
1593   img {
1594     padding: 20px;
1595     background-color: #f4f4ff;
1596     display: block;
1597     max-width: 100%;
1598     margin: auto;
1599     box-sizing: border-box;
1600     -moz-box-sizing: border-box;
1601   }
1602
1603   blockquote {
1604     border-left: 20px solid #f4f4ff;
1605     padding-left: 20px;
1606     margin: 0;
1607     color: #7E7E7E;
1608   }
1609
1610   ul, ol {
1611     font-style: italic;
1612     padding-left: 20px;
1613     margin-bottom: 20px;
1614     margin-left: 20px;
1615   }
1616
1617   ul li {
1618     list-style: disc;
1619   }
1620
1621   ol li {
1622     list-style: decimal;
1623   }
1624 }
1625
1626 .diary_post .richtext {
1627     margin-top: 20px;
1628   }
1629
1630 .comments .richtext {
1631   margin-left: 70px;
1632   margin-top: 0;
1633 }
1634
1635 /* Rules for rich text editors */
1636
1637 .richtext_container {
1638   white-space: nowrap;
1639
1640   .richtext_content {
1641     display: inline-block;
1642     vertical-align: top;
1643     white-space: normal;
1644
1645     .richtext_preview {
1646       display: inline-block;
1647       padding: 20px;
1648       background-color: #f4f4ff;
1649       overflow-x: auto;
1650
1651       &.loading {
1652         background-image: image-url("loading.gif");
1653         background-repeat: no-repeat;
1654         background-position: center;
1655       }
1656
1657       > :first-child {
1658         margin-top: 0px;
1659       }
1660     }
1661   }
1662
1663   .richtext_help {
1664     display: inline-block;
1665     vertical-align: top;
1666     margin-left: 15px;
1667     background-color: #f8f8ff;
1668     padding: 10px;
1669     width: 200px;
1670
1671     ul {
1672       margin-bottom: 0;
1673     }
1674
1675     h4.heading, li {
1676       border-bottom: 1px solid #ccc;
1677       margin-bottom: 5px;
1678       padding-bottom: 5px;
1679     }
1680
1681     li h4, li span {
1682       display: block;
1683       font-size: 11px;
1684     }
1685
1686     li h4 {
1687       margin: 0;
1688       float: left;
1689     }
1690
1691     li span {
1692       float: right;
1693       width: 50%;
1694       margin-left: 10px;
1695     }
1696
1697     input.richtext_doedit,
1698     input.richtext_dopreview {
1699       margin-right: 10px;
1700     }
1701   }
1702 }
1703
1704 /* Rules for the user notes list */
1705
1706 .note_list {
1707   tr.creator {
1708     background-color: #eeeeee;
1709   }
1710
1711   td {
1712     padding: 3px;
1713   }
1714
1715   p {
1716     margin-bottom: 0px;
1717   }
1718 }
1719
1720 /* Rules for the notes interface */
1721
1722 .note {
1723   padding-top: 10px;
1724 }
1725
1726 .note {
1727   h2 {
1728     margin-bottom: 10px;
1729   }
1730
1731   div {
1732     margin-top: 10px;
1733   }
1734
1735   .permalink {
1736     position: absolute;
1737     top: 5px;
1738     left: 5px;
1739     min-width: 15px;
1740     min-height: 15px;
1741     background: image-url("sprite.png") 0 -45px no-repeat;
1742   }
1743
1744   .permalink span {
1745     display: none;
1746     padding-left: 20px;
1747   }
1748
1749   .permalink:hover span {
1750     display: block;
1751   }
1752
1753   .warning {
1754     display: block;
1755     background-color: #ffe0cc;
1756     padding: 4px 6px;
1757     margin-bottom: 10px;
1758   }
1759
1760   .comment_body {
1761     margin-top: 2px;
1762     margin-bottom: 2px;
1763
1764     p {
1765       margin-top: 0px;
1766       margin-bottom: 0px;
1767     }
1768   }
1769
1770   .comment {
1771     width: 100%;
1772     height: 100px;
1773   }
1774
1775   .buttons {
1776     margin-top: 5px;
1777     text-align: right;
1778   }
1779 }
1780
1781 /*
1782  * Rules for the iD editor
1783  */
1784 .id-embed {
1785   width: 100%;
1786   height: 100%;
1787 }
1788
1789 /* Rules for rotating sidebar ads */
1790 .ad-container {
1791   display: block;
1792   height: 120px;
1793   overflow: hidden;
1794   position: relative;
1795   border-bottom: 1px solid #cccccc;
1796 }
1797
1798 .ads {
1799   width: 370px;
1800   position: absolute;
1801   left: 0%;
1802 }
1803
1804 .ad {
1805   float: left;
1806   height: 100px;
1807   padding: 10px;
1808   border: 0px;
1809   background: #fff;
1810 }