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