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