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