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