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