f6a34534efe7b99b83c3817de4a75b52983b15bb
[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 * {
52   -moz-box-sizing: border-box;
53   -webkit-box-sizing: border-box;
54   box-sizing: border-box;
55 }
56
57 body {
58   font-family: 'Helvetica Neue',Arial,sans-serif;
59   font-size: 14px;
60   line-height: 1.6666;
61   color: #222;
62   background-color: #fff;
63   margin: 0px;
64   padding: 0px;
65   text-align: left;
66 }
67
68 body.slim {
69   background-color: #f0f0f0;
70 }
71
72 h1, h2, h3 {
73   margin-top: 10px;
74   margin-bottom: 20px;
75   font-weight: bold;
76   line-height: 1.2;
77 }
78
79 h1, h2 {
80   font-size: 32px;
81 }
82
83 #content h2 {
84   font-size: 21px;
85 }
86
87 h3 {
88   font-size: 21px;
89   margin-top: 10px;
90   margin-bottom: 20px;
91 }
92
93 h4,h5,h6 {
94   font-size: 14px;
95   margin-top: 10px;
96   margin-bottom: 10px;
97   font-weight: bold;
98   line-height: 1.5;
99 }
100
101 p, ul {
102   margin-bottom: 20px;
103 }
104
105 p > img {
106   width: auto;
107   max-width: 100%;
108 }
109
110 small, aside {
111   font-size: 12px;
112 }
113
114 h1:first-child,
115 h2:first-child,
116 h3:first-child,
117 h4:first-child,
118 h5:first-child,
119 h6:first-child {
120   margin-top: 0;
121 }
122
123 .column-1 {
124   width: 50%;
125   margin-bottom: 10px;
126 }
127
128 .small_icon {
129   vertical-align: middle;
130   margin-right: 5px;
131 }
132
133 /* Rules for links */
134
135 a {
136   color: #00f;
137   text-decoration: none;
138   &:hover {
139     text-decoration: underline;
140   }
141 }
142
143 /* Rules for horizontal lines */
144
145 hr {
146   border: none;
147   background-color: #ccc;
148   color: #ccc;
149   height: 1px;
150 }
151
152 /* General styles for tables */
153
154 table {
155   width: 100%;
156   margin-bottom: 20px;
157   th, td {
158     text-align: left;
159     padding: 5px;
160     line-height: 20px;
161   }
162   th {
163     font-weight: bold;
164     vertical-align: top;
165   }
166   td {
167     vertical-align: middle;
168   }
169 }
170
171 /* Rules for the whole left sidebar, including the logo */
172
173 #left {
174   position: absolute;
175   height: 100%;
176   width: 185px;
177   font-size: 11px;
178   line-height: 1.1;
179   z-index: 100;
180   border-right: 1px solid #ccc;
181 }
182
183 /* Rules for the OpenStreetMap logo in the top left corner */
184
185 #logo {
186   display: block;
187   width: 170px;
188   min-width: 170px;
189   padding: 20px 5px;
190   text-align: center;
191   margin: auto;
192 }
193
194 #logo h1 {
195   font-size: 18px;
196   line-height: 1;
197   text-align: center;
198   margin: 0;
199 }
200
201 #logo h2 {
202   font-size: 10px;
203   line-height: 15px;
204   margin: 0;
205 }
206
207 /* Rules for the site name */
208
209 #small-title {
210   display: none;
211 }
212
213 /* Rules for the introductory text displayed in the left sidebar to new users */
214
215 .sidebar-copy {
216   padding: 5px 10px;
217 }
218
219 .sidebar-copy p {
220   margin: 5px 0;
221 }
222
223 .sidebar-copy.intro {
224   border-top: 1px solid #ccc;
225 }
226
227 /*
228  * Rules for alert boxes shown in the left sidebar when important
229  * information needs to be conveyed such as when the site is
230  * undergoing maintenance.
231  */
232
233 .sidebar-alert {
234   padding: 5px;
235   border-top: 1px solid #ccc;
236   margin-top: 4px;
237   margin-bottom: -5px;
238   background: #e00;
239   font-size: 12px;
240   font-weight: bold;
241   p {
242     margin: 5px;
243   }
244 }
245
246 /*
247  * Rules for notice boxes shown in the left sidebar when important, but
248  * non-critical information needs to be conveyed such as notices about
249  * donation drives.
250  */
251
252 .sidebar-notice {
253   padding: 5px;
254   border-top: 1px solid #ccc;
255   margin-top: 4px;
256   margin-bottom: -5px;
257   background: #ea0;
258   font-size: 12px;
259   p {
260     margin: 5px;
261   }
262 }
263
264 /* Rules for the menu displayed in the left sidebar */
265
266 .left_menu {
267   left: 0px;
268   margin: 0;
269   padding: 5px 10px;
270   font-size: 12px;
271   line-height: 1.25;
272   list-style-type: none;
273   border-bottom: 1px solid #ccc;
274   border-top: 1px solid #ccc;
275 }
276
277 .left_menu img {
278   margin: 10px 0px;
279 }
280
281 .left_menu ul {
282   padding: 0;
283   margin: 0;
284 }
285
286 .left_menu li {
287   list-style-type: none;
288   padding: 0;
289   margin: 0;
290 }
291
292 .left_menu h4 {
293   padding: 5px 0 5px 0;
294   font-size: 12px;
295   margin: 0;
296 }
297
298 .left_menu li:last-child h4 {
299   padding-top: 0;
300 }
301
302 /* Rules for SOTM advert */
303
304 #sotm {
305   width: 165px;
306   margin: 10px;
307   padding: 0px;
308   border: 0px;
309   background: #fff;
310 }
311
312 #sotm img {
313   width: 165px;
314 }
315
316 /*
317  * Rules for "optional boxes" which appear in the left sidebar on
318  * certain pages. Current users are the seach box on the main page
319  * and the tag cloud on the traces pages.
320  */
321
322 .optionalbox {
323   left: 0px;
324   padding: 5px 10px;
325   margin: 5px 0;
326   text-align: left;
327 }
328
329 /* Rules for the search box */
330
331 #search_field form {
332   width: 165px;
333 }
334
335 #search_field {
336   position: relative;
337 }
338
339 #search_field input[type="text"] {
340   width: 165px;
341   padding: 3px;
342   font-size: 14px;
343   line-height: 1.1;
344   height: 25px;
345   padding: 2px 0px 2px 5px;
346   box-shadow: inset #DDD 0px 1px 3px;
347 }
348
349 #search_field input[type="text"]:focus {
350   outline: none;
351   border: 1px solid #000;
352 }
353
354 #search_field input[type="submit"] {
355   border: 0;
356   margin: 0;
357   padding: 0;
358   width: 15px;
359   height: 15px;
360   min-width: 15px;
361   text-indent: -1000px;
362   overflow: hidden;
363   background: image-url("sprite.png") 0 0 no-repeat;
364   position: absolute;
365   top: 5px;
366   right: 5px;
367   cursor: pointer;
368 }
369
370 .search_help {
371   margin: 5px 0 0 0;
372 }
373
374 /* Utility for de-emphasizing content */
375
376 .deemphasize {
377   color: #999;
378   a {
379     color: #7092FF;
380   }
381 }
382
383 /* Rules for donation request box */
384
385 .donate {
386   display: block;
387   width: 164px;
388   padding: 5px;
389   border: 1px solid #AED1A0;
390   background: #cbeea7;
391   font-size: 14px;
392   line-height: 1.4;
393   text-align: center;
394   border-radius: 2px;
395   color: #222;
396   margin: 10px 10px 0px 10px;
397
398   &:hover {
399     background: #9ed485;
400     text-decoration: none;
401   }
402   span {
403     margin: 0;
404     padding-left: 18px;
405     background: image-url("sprite.png") 0 -29px no-repeat;
406   }
407 }
408
409 /* Rules for Creative Commons logo button */
410
411 #cclogo {
412   margin: 10px 0;
413   float: right;
414 }
415
416 /* Rules for tabbed navigation bar */
417
418 #top-bar {
419   position: relative;
420   margin-left: 185px;
421   height: 30px;
422   border-bottom: 1px solid #ccc;
423   background: white;
424   z-index: 100;
425 }
426
427 .site-edit #top-bar,
428 .site-index #top-bar,
429 .site-export #top-bar {
430   position: fixed;
431   left: 0;
432   right: 0;
433 }
434
435 #tabnav {
436   height: 30px;
437   margin-bottom:0;
438   overflow: hidden;
439 }
440
441 #tabnav li {
442   display: inline;
443 }
444
445 #tabnav a, #tabnav a:link, #tabnav a:visited {
446   float: left;
447   font-weight: bold;
448   padding: 3px 10px;
449   text-decoration: none;
450   color: #333;
451   float: left;
452   margin-right: 1px;
453   -webkit-transition: color 200ms ease-in;
454      -moz-transition: color 200ms ease-in;
455        -o-transition: color 200ms ease-in;
456           transition: color 200ms ease-in;
457 }
458
459 .site-index #tabnav a#viewanchor,
460 .site-edit #tabnav a#editanchor,
461 .changeset-list #tabnav a#historyanchor,
462 .site-export #tabnav a#exportanchor {
463   border-bottom: 1px solid #aaa;
464   background: #9ed485;
465   color: #000;
466 }
467
468 #tabnav a:link:hover, #tabnav a:visited:hover {
469   text-decoration: underline;
470 }
471
472 #tabnav a:link.disabled,
473 #tabnav a:visited.disabled,
474 #tabnav a:link:hover.disabled,
475 #tabnav a:visited:hover.disabled {
476   color: #ccc;
477   cursor: default;
478 }
479
480 #tabnav a:link.disabled:hover,
481 #tabnav a:visited.disabled:hover,
482 #tabnav a:link:hover.disabled:hover,
483 #tabnav a:visited:hover.disabled:hover {
484   text-decoration: none;
485 }
486
487 /* Utility for styling notification numbers */
488
489 .count-number {
490   padding: 2px 5px;
491   border-radius: 3px;
492   background: #d7d7ff;
493   margin: 0 2px;
494   font-size: 11px;
495   color: #333;
496 }
497
498 /* Rules for greeting bar in the top right corner */
499
500 #greeting {
501   float: right;
502   padding-top: 3px;
503   margin-right: 5px;
504 }
505
506 .greeting-bar-unread {
507   font-weight: bold;
508 }
509
510 /* Rules for the message shown in place of the map when javascript is disabled */
511
512 #noscript {
513   z-index: 20000000;
514   position: absolute;
515   top: 15px;
516   left: 15px;
517 }
518
519 /* Rules for Leaflet maps */
520
521 .leaflet-control-attribution {
522   a.disabled {
523     color: #99c9dc;
524     cursor: default;
525     text-decoration: none;
526   }
527
528   ul.secondary-actions {
529     float: left;
530     margin-right: 5px;
531
532     &:only-child {
533       margin-right: 0px;
534     }
535   }
536 }
537
538 .site-index .leaflet-top,
539 .site-export .leaflet-top {
540   top: 10px !important;
541   .leaflet-control {
542     margin-top: 0px !important;
543   }
544 }
545
546 .site-index #map .olControlScaleLine,
547 .site-export #map .olControlScaleLine {
548   left: 10px !important;
549 }
550
551 .leaflet-popup-scrolled {
552   padding-right: 20px;
553   border-bottom: 0px !important;
554   border-top: 0px !important;
555 }
556
557 .leaflet-popup-content-wrapper {
558   border-radius: 4px !important;
559   -webkit-border-radius: 4px !important;
560 }
561
562 /* Rules for edit menu */
563
564 .menuicon {
565   padding: 0 5px;
566   font-weight: normal;
567   display: inline-block;
568   &:hover {
569     text-decoration: none !important;
570   }
571 }
572
573 .menu {
574   display: none;
575   z-index: 10000;
576   position: absolute;
577   background-color: #ffffff;
578   border: 1px solid #cccccc;
579   border-top: 0px;
580 }
581
582 .menu ul {
583   margin: 0px;
584 }
585
586 .menu li {
587   padding: 2px 5px;
588   border-top: 1px solid #eee;
589   white-space: nowrap;
590 }
591
592 /* Rules for attribution text under the main map shown on printouts */
593
594 #attribution {
595   display: none;
596 }
597
598 .attribution_license,
599 .attribution_project {
600   text-align: left;
601 }
602
603 .attribution_notice {
604   text-align: center;
605 }
606
607 /* Rules for the popout map sidebar */
608
609 #sidebar {
610   display: none;
611   position: absolute;
612   overflow: auto;
613   top: 0px;
614   bottom: 0px;
615   left: 0px;
616   border-right: 1px solid #ccc;
617   width: 33.3333%;
618   .sidebar_heading {
619     position: relative;
620     padding: 10px 20px;
621     z-index: 9999;
622     background: #F4F4FF;
623     border-bottom: 1px solid #ccc;
624   }
625   h4 {
626     margin: 0;
627   }
628   ul {
629     margin-bottom: 0;
630     li {
631       margin-bottom: 5px;
632       &:last-child {
633         margin-bottom: 0;
634       }
635     }
636   }
637 }
638
639 #sidebar_close {
640   position: absolute;
641   height: 20px;
642   top: 0px;
643   bottom: 0;
644   right: 20px;
645   margin: auto;
646 }
647
648 #sidebar_content {
649   position: relative;
650   bottom: 0;
651   width: 100%;
652   h4 {
653     padding: 0 20px 10px 20px;
654     margin-top: 10px;
655     margin-bottom: 0;
656     border-bottom: 1px solid #ddd;
657   }
658 }
659
660 /* Rules for the map key which appears in the popout sidebar */
661
662 #mapkey {
663   padding: 20px;
664 }
665
666 #mapkey .mapkey-table-key img {
667   display: block;
668   margin-left: auto;
669   margin-right: auto;
670 }
671
672 #mapkey td {
673   padding: 0 5px 5px 5px;
674 }
675
676 /* Rules for search results which appear in the popout sidebar */
677
678 .search_searching {
679   margin-top: 5px;
680   margin-bottom: 5px;
681 }
682
683 .search_results_entry {
684   margin-bottom: 0;
685
686   .search_details {
687     display: block;
688     text-align: right;
689   }
690 }
691
692 .search_results_entry .search_searching {
693   text-align: center;
694   margin: 20px auto;
695   width: 20px;
696   display: block;
697 }
698
699 ul.results-list li { border-bottom: 1px solid #ccc; }
700
701 .search_results_error {
702   color: #f00;
703 }
704
705 /* Rules for data browser information which appears in the popout sidebar */
706
707 #browse_content {
708   position: relative;
709   .browse_show_list.button {
710     position: absolute;
711     left: 20px;
712     right: 20px;
713     bottom: -40px;
714     margin-bottom: 0;
715   }
716   a.more-details {
717     position: absolute;
718     top: 0;
719     right: 20px;
720   }
721   ul li {
722     margin-bottom: 0;
723   }
724 }
725
726 .browse_details {
727   position: relative;
728 }
729
730 .browse_status {
731   display: none;
732 }
733
734 /* Rules for export information which appears in the popout sidebar */
735
736 .export_bounds {
737   text-align: center;
738 }
739
740 .export_area_inputs {
741   margin-bottom: 10px;
742 }
743
744 .export_bound {
745   margin: 5px;
746 }
747
748 .export_details input[type="text"]#export_html_text {
749   width: 100%;
750 }
751
752 #sidebar #marker_inputs li:last-child {
753   margin-bottom: 10px;
754 }
755
756 #export_osm,
757 #export_mapnik,
758 #export_osmarender {
759   display: none;
760 }
761
762 .export_buttons {
763   width: 100%;
764   text-align: center;
765 }
766
767 /* Rules for the main content area */
768
769 #content {
770   padding: 20px;
771   position: relative;
772 }
773
774 .site-edit #content,
775 .site-index #content,
776 .site-export #content {
777   position: fixed;
778   padding: 0;
779   top: 30px; bottom: 0;
780   left: 184px; right: 0;
781   border-left: 1px solid #ccc;
782 }
783
784 .wrapper {
785   margin-left: 184px;
786   border-left: 1px solid #ccc;
787   text-align: left;
788 }
789
790 .site-edit #content {
791   top: 30px;
792 }
793
794 #content.maximised {
795   top: 0;
796   left: 0;
797   right: 0;
798   bottom: 0;
799   border: 0;
800   z-index: 1000;
801 }
802
803 #slim_container {
804   width: 100%;
805 }
806
807 #slim_container_content {
808   max-width: 50em;
809   background-color: #FFFFFF;
810   margin: 10px auto;
811   padding: 3px;
812   border-radius: 25px;
813   -moz-border-radius: 25px;
814   border: 1px solid #e6e6e6;
815 }
816
817 #slim_content {
818   margin: 10px;
819   margin-top: 95px;
820   max-width: 50em;
821
822   .content-heading {
823     margin-bottom: 15px;
824   }
825 }
826
827 #slim_header {
828   margin: 30px 10px;
829   position: absolute;
830   top: 0px;
831   margin-right: 5px;
832 }
833
834 #slim_header img {
835   vertical-align: middle;
836   margin-bottom: 5px;
837   margin-right: 5px;
838 }
839
840 .content-heading {
841   position: relative;
842   padding: 20px;
843   background: #F4F4FF;
844   h1, h2 {
845     margin-bottom: 10px;
846     line-height: 100%;
847     &:last-child {
848       margin-bottom: 0;
849     }
850   }
851   p {
852     margin-top: 10px;
853     margin-bottom: 0px;
854   }
855 }
856
857 /* Rules for small maps in content areas */
858
859 .content_map {
860   position: relative;
861   width: 45%;
862   height: 400px;
863   border: 1px solid #ccc;
864   margin-bottom: 20px;
865   float: right;
866 }
867
868 .content_map #small_map {
869   height: 100%;
870   width: 100%;
871   margin-bottom: 20px;
872 }
873
874 /* Rules for the home page */
875
876 .site-export #map,
877 .site-index #map {
878   position: absolute;
879   top: 0px;
880   bottom: 0px;
881   left: 0px;
882   right: 0px;
883 }
884
885 /* Rules for the edit page */
886
887 .site-edit #map {
888   position: absolute;
889   top: 0px;
890   bottom: 0px;
891   left: 0px;
892   right: 0px;
893   overflow: hidden;
894 }
895
896 /* Rules for the changeset list shown by the history tab etc */
897
898 #changeset_list {
899   width: 100%;
900   ul {
901     padding: 10px 0;
902     margin-bottom: 0px;
903     border-top: 1px solid #ccc;
904     &:last-child {
905       border-bottom: 1px solid #ccc;
906     }
907   }
908   .selected {
909     background: #FFFFC0;
910   }
911   .date,
912   .user {
913     border-left: 1px solid #ccc;
914     padding-left: 5px;
915     margin-right: 5px;
916   }
917 }
918
919 #changeset_list_map_wrapper {
920   position: absolute;
921   width: 50%;
922   height: 490px;
923   top: 0;
924   right: 0;
925 }
926
927 #changeset_list_map_wrapper.scrolled {
928   position: fixed;
929 }
930
931 #changeset_list_map {
932   position: absolute;
933   bottom: 20px;
934   top: 20px;
935   right: 20px;
936   left: 20px;
937   border: 1px solid #ccc;
938 }
939
940 #changeset_list_map_wrapper.scrolled #changeset_list_map {
941   margin-left: 93px;
942 }
943
944 /* Rules for the data browser */
945
946 .browse-section {
947   border-top: 1px solid #ccc;
948   margin-top: 10px;
949   padding-top: 10px;
950   &:first-child {
951     margin-top: 0;
952   }
953   .warning {
954     background-color: #ffe0cc;
955     margin: 0px;
956     padding: 4px 6px;
957     max-width: 100%;
958   }
959   h4, p {
960     margin-bottom: 5px;
961   }
962   p, ul, .bbox, .geo {
963     display: inline-block;
964     vertical-align: top;
965     max-width: 65%;
966   }
967   ul p {
968     margin-left: 0;
969     margin-bottom: 0;
970   }
971   h4 {
972     width: 33.3333%;
973     display: inline-block;
974     vertical-align: top;
975   }
976 }
977
978 .bbox {
979   div {
980     width: 33.3333%;
981     text-align: center;
982     padding: 5px 0;
983     overflow: hidden;
984     text-overflow: ellipsis;
985     float: left;
986   }
987   .max_lat,
988   .min_lat {
989     margin-left: auto;
990     margin-right: auto;
991     width: 100%;
992   }
993 }
994
995 #browse_map .geolink {
996   display: none;
997 }
998
999 #browse_map .secondary-actions {
1000   margin-bottom: 10px;
1001 }
1002
1003 /* Rules for the trace list shown by the traces tab etc */
1004
1005 #trace_list {
1006   font-size: 10px;
1007   border-width: 0px;
1008   text-align: right;
1009 }
1010
1011 #trace_list .trace_summary {
1012   font-size: 12px;
1013   color: gray;
1014 }
1015
1016 #trace_list .trace_pending {
1017   color: red;
1018 }
1019
1020 #trace_list .trace_public {
1021   color: green;
1022 }
1023
1024 #trace_list .trace_identifiable {
1025   color: green;
1026 }
1027
1028 #trace_list .trace_trackable {
1029   color: red;
1030 }
1031
1032 #trace_list .trace_private {
1033   color: red;
1034 }
1035
1036 /* Rules for the user profile page */
1037
1038 #userinformation {
1039   min-height: 100px;
1040   .userinformation-inner {
1041     float: left;
1042   }
1043   h2 {
1044     margin-top: 0;
1045   }
1046   .user-description {
1047     width: 100%;
1048     clear: both;
1049   }
1050   .deemphasize {
1051     margin: 0;
1052   }
1053 }
1054
1055 .admin-user-info small {
1056   margin-bottom: 10px;
1057   display: inline;
1058   margin-right: 20px;
1059 }
1060
1061 .activity-block {
1062   clear: left;
1063   border-bottom: 1px solid #ccc;
1064   padding-bottom: 20px;
1065   float: left;
1066   h3 {
1067     margin-bottom: 10px;
1068   }
1069 }
1070
1071 .contact-activity {
1072   margin-top: 20px;
1073   width: 100%;
1074 }
1075
1076 .activity-details p {
1077   margin-left: 72px;
1078   margin-bottom: 0;
1079 }
1080
1081 #friends-container .contact-activity ul {
1082   margin-left: 72px;
1083   }
1084
1085 .user-view p#no_home_location {
1086   margin: 20px;
1087 }
1088
1089 .user-view .user_thumbnail {
1090   margin-top: 5px;
1091   float: left;
1092 }
1093
1094 /* Rules for the user map */
1095
1096 .content_map .leaflet-popup-content {
1097   margin: 10px;
1098   min-height: 50px;
1099 }
1100
1101 /* Rules for user popups on maps */
1102
1103 .user_popup {
1104   min-width: 200px;
1105 }
1106
1107 .user_popup p {
1108   padding-top:0;
1109   padding-bottom: 5px;
1110   margin-top: 0;
1111 }
1112
1113 .user_popup img.user_thumbnail {
1114   float: left;
1115   margin: 0 10px 0 0;
1116 }
1117
1118 /* Rules for user popups on maps */
1119
1120 .user_popup p {
1121   margin-bottom: 0;
1122   margin-left: 60px;
1123   font-size: 12px;
1124 }
1125
1126 /* Rules for the user list */
1127
1128 #user_list {
1129   font-size: 10px;
1130   width: 100%;
1131 }
1132
1133 #user_list tr {
1134   vertical-align: middle;
1135 }
1136
1137 #user_list p {
1138   margin-top: 0px;
1139   margin-bottom: 0px;
1140 }
1141
1142 #user_list_actions {
1143   float: right;
1144   margin-top: 10px;
1145 }
1146
1147 /* Rules for the diary list page */
1148
1149 .diary_entry-list img.user_thumbnail {
1150   float: left;
1151 }
1152
1153 .diary_post {
1154   max-width: 740px;
1155   position: relative;
1156   margin-top: 10px;
1157   padding-top: 20px;
1158   border-top: 1px solid #ccc;
1159
1160   &:first-child {
1161     margin-top: 0;
1162     border-top: 0;
1163     padding-top: 0;
1164   }
1165   h1, h2 {
1166     font-size: 21px;
1167     line-height: 1;
1168   }
1169   small.deemphasize {
1170     float: left;
1171     display: block;
1172   }
1173   ul.secondary-actions { display: inline-block;}
1174 }
1175
1176 .content-heading .hide_unless_logged_in { // hacky selector, better to just add a new class to this div
1177   display: inline;
1178 }
1179
1180 #content  .post_heading {
1181   margin-bottom: 20px;
1182   h2 {
1183     margin-top: 0;
1184     margin-bottom: 10px;
1185     font-size: 24px;
1186   }
1187 }
1188
1189 /* Rules for the diary entry page */
1190
1191 .diary_entry {
1192   #map {
1193     position: relative;
1194     width: 90%;
1195     height: 400px;
1196     border: 1px solid #ccc;
1197     display: none;
1198     margin-bottom: 20px;
1199   }
1200   #newcomment {
1201     border-top: 1px solid #ccc;
1202     padding-top: 20px;
1203     margin-top: 10px;
1204   }
1205   .comments {
1206     max-width: 740px;
1207   }
1208   .diary-comment {
1209     margin-top: 10px;
1210     border-top: 1px dashed #ccc;
1211     padding-top: 10px;
1212     &:first-child {
1213       margin-top: 20px;
1214       padding-top: 20px;
1215       border-top: 1px solid #ccc;
1216     }
1217     p {
1218       margin-bottom: 10px;
1219     }
1220     .comment-heading {
1221       margin-bottom: 0;
1222       margin-top: 0;
1223     }
1224   }
1225 }
1226
1227 .diary_entry-view img.user_thumbnail {
1228   float: left;
1229 }
1230
1231 /* Rules for the login page */
1232
1233 #login_openid_buttons {
1234   height: 56px;
1235 }
1236
1237 #login_openid_buttons li {
1238   float: left;
1239   padding: 5px 10px;
1240 }
1241
1242 /* Rules for the account confirmation page */
1243
1244 #terms {
1245   .legale {
1246     border: 1px solid #ccc;
1247     padding: 20px;
1248     margin-bottom: 20px;
1249     overflow: auto;
1250     height: 10em;
1251   
1252     &:p#last {
1253       margin-bottom: 0px;
1254     }
1255     
1256     &:ol {
1257       margin-bottom: 0px;
1258     }
1259     
1260     &:img {
1261       display: block;
1262       margin: 20px auto inherit auto;
1263     }
1264   }
1265   
1266   form.sign {
1267     input[type=submit] {
1268       float: left;
1269     }
1270     #decline {
1271       background: #AAA;
1272       &:hover {
1273         background: #777;
1274       }
1275     }
1276   }
1277   fieldset {
1278     margin-bottom: 20px;
1279   }
1280   #contributorGuidance {
1281     background-color: #f4f4ff;
1282     border-radius: 4px;
1283     -moz-border-radius: 4px;
1284   }
1285   .signing-buttons {
1286     height: 50px;
1287   }
1288 }
1289
1290 /* Rules for the account settings page */
1291
1292 #accountForm .user_map {
1293   position: relative;
1294   width: 500px;
1295   height: 400px;
1296   border: 1px solid #ccc;
1297 }
1298
1299 .accountImage-options {
1300   width: 50%;
1301   display: inline-block;
1302 }
1303
1304 .nohome .location {
1305   display: none;
1306 }
1307
1308 #homerow .message {
1309   display: none;
1310 }
1311
1312 .nohome .message {
1313   display: inline !important;
1314 }
1315
1316 .content_map.settings_map {
1317   float: none;
1318   width: 50%;
1319 }
1320
1321 /* Rules for message in/out box page */
1322
1323 .messages {
1324   width: 100%;
1325   border: 1px solid #ddd;
1326 }
1327
1328 .messages tbody tr {
1329   border-top: 1px solid #ccc;
1330 }
1331
1332 .messages .inbox-row {
1333   background: #f8f8ff;
1334 }
1335
1336 .messages .inbox-row-unread {
1337   background:#CBEEA7;
1338 }
1339
1340 .right {
1341   float: right;
1342 }
1343
1344 .messages tr td,
1345 .messages tr th {
1346   padding: 5px;
1347 }
1348
1349 .inbox-row .inbox-mark-read {
1350   display: none;
1351 }
1352
1353 .info-line {
1354   margin-bottom: 20px;
1355   padding: 5px 0px 4px 0px;
1356   border-bottom: 1px solid #ccc;
1357 }
1358
1359 .info-line form,
1360 .info-line form div {
1361   display: inline;
1362 }
1363
1364 .info-line .user_thumbnail_tiny {
1365   vertical-align: middle;
1366 }
1367
1368 .inbox-row-unread .inbox-mark-unread {
1369   display: none;
1370 }
1371
1372 /* Rules for "flash" notice boxes shown at the top of the content area */
1373
1374 .flash {
1375     padding: 20px;
1376   &#error {
1377     background-color: #ff7070;
1378   }
1379   &#warning {
1380     background-color: #ffe0cc;
1381   }
1382   &#notice {
1383     background-color: #CBEEA7;
1384   }
1385 }
1386
1387 /* Rules for highlighting fields with rails validation errors */
1388
1389 .field_with_errors {
1390   padding: 2px;
1391   background-color: #ff7070;
1392   display: table;
1393 }
1394
1395 /* Rules for rails validation error boxes */
1396
1397 #errorExplanation {
1398   width: 400px;
1399   border: 2px solid #ff7070;
1400   padding: 10px;
1401   margin-bottom: 20px;
1402   background-color: #f0f0f0;
1403 }
1404
1405 #errorExplanation h2 {
1406   margin: -10px;
1407   padding: 5px 5px 5px 15px;
1408   font-weight: bold;
1409   font-size: 12px;
1410   background-color: #c00;
1411   color: #fff;
1412   text-align: left;
1413 }
1414
1415 #errorExplanation p {
1416   color: #333;
1417   margin-bottom: 0px;
1418   padding: 5px;
1419 }
1420
1421 #errorExplanation ul li {
1422   font-size: 12px;
1423   list-style: disc;
1424 }
1425
1426 /* Rules for forms */
1427
1428 .standard-form fieldset {
1429   margin-bottom: 20px;
1430 }
1431
1432 .standard-form label {
1433   display: block;
1434   width: 300px;
1435   margin-right: 10px;
1436   font-size: 14px;
1437   font-weight: bold;
1438   line-height: 1.5;
1439 }
1440
1441 .standard-form .form-row {
1442   margin-bottom: 10px;
1443 }
1444
1445 .standard-form input[name=remember_me] {
1446   float: left;
1447 }
1448
1449 #remember_me_openid {
1450   display: block;
1451 }
1452
1453 input[type="text"],
1454 input[type="email"],
1455 input[type="url"],
1456 input[type="password"],
1457 textarea {
1458   border: 1px solid #ccc;
1459 }
1460
1461 /* Rules for user images */
1462
1463 img.user_image {
1464   max-width: 100px;
1465   max-height: 100px;
1466   border: 1px solid #ccc;
1467   margin-bottom: 20px;
1468   float: left;
1469   margin-right: 20px;
1470 }
1471
1472 img.user_thumbnail {
1473   max-width: 50px;
1474   max-height: 50px;
1475   border: 1px solid #ccc;
1476   margin-right: 20px;
1477 }
1478
1479 img.user_thumbnail_tiny {
1480   max-width: 25px;
1481   max-height: 25px;
1482   border: 1px solid #ccc;
1483 }
1484
1485 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1486
1487 .nowrap {
1488   white-space: nowrap;
1489 }
1490
1491 /* Rules for geo microformats */
1492
1493 abbr.geo {
1494   border-bottom: none;
1495 }
1496
1497 /* Rules for RSS buttons */
1498
1499 .rsssmall {
1500   position: relative;
1501   top: 5px;
1502 }
1503
1504 /* General styles for action lists / subnavs / pager navs */
1505
1506 ul.secondary-actions {
1507   font-style: normal;
1508   margin-bottom: 0;
1509   margin-left: 0;
1510   &.pager {
1511     display: inline-block;
1512     margin-right: 60px;
1513   }
1514   li {
1515     display: block;
1516     float: left;
1517     list-style: none;
1518     border-left: 1px solid #ccc;
1519     padding-left: 5px;
1520     margin-right: 5px;
1521     &:first-child {
1522       border-left: 0;
1523       padding-left: 0;
1524     }
1525     &:last-child {
1526       margin-right: 0px;
1527     }
1528   }
1529 }
1530
1531 /* Utility for managing inner content areas */
1532
1533 .inner22 { padding: 20px;}
1534
1535 .inner12 { padding: 10px 20px;}
1536
1537 .inner02 { padding: 0 20px;}
1538
1539 /* Utility for general button styles */
1540
1541 input[type="button"],
1542 input[type="submit"],
1543 input[type="reset"],
1544 a.button {
1545   cursor: pointer;
1546   border: 0;
1547   display: block;
1548   padding: 5px;
1549   min-width: 120px;
1550   margin-bottom: 10px;
1551   color: white;
1552   background: #7092FF;
1553   text-align: center;
1554   border-radius: 2px;
1555   -moz-border-radius: 2px;
1556   &:hover {
1557     background: blue;
1558     text-decoration: none;
1559   }
1560   &:last-child {
1561     margin-bottom: 0;
1562   }
1563 }
1564
1565 a.button.submit {
1566   background-color: #cbeea7;
1567   &:hover {
1568     background-color: #9ed485;
1569   }
1570 }
1571
1572 /* Rules for doing distinct colour of alternate table rows */
1573
1574 .table0,
1575 .item0 {
1576   background: #F4F4FF;
1577 }
1578
1579 .table1,
1580 .item1 {
1581   background: #fff;
1582 }
1583
1584 /* Rules for OpenID logo */
1585
1586 .openid_logo {
1587   vertical-align: text-bottom;
1588   border: 0;
1589 }
1590
1591 /* Rules for rich text */
1592
1593 .richtext {
1594   h1, h2 {
1595     padding-bottom: 10px;
1596     border-bottom: 1px dashed #cccccc;
1597     margin-bottom: 10px;
1598   }
1599
1600   h1 {
1601     font-size: 24px;
1602   }
1603
1604   h2 {
1605     font-size: 18px;
1606   }
1607
1608   h3 {
1609     font-size: 14px;
1610   }
1611
1612   code {
1613     font-size: 13px;
1614     background: #e8e8e8;
1615     padding: 2px 3px;
1616   }
1617
1618   pre {
1619     font-size: 13px;
1620     background: #e8e8e8;
1621     padding: 2px 3px;
1622
1623     code {
1624       padding: 0;
1625     }
1626   }
1627
1628   img {
1629     padding: 20px;
1630     background-color: #f4f4ff;
1631     display: block;
1632     max-width: 100%;
1633     margin: auto;
1634   }
1635
1636   blockquote {
1637     border-left: 20px solid #f4f4ff;
1638     padding-left: 20px;
1639     margin: 0;
1640     color: #7E7E7E;
1641   }
1642
1643   ul, ol {
1644     font-style: italic;
1645     padding-left: 20px;
1646     margin-bottom: 20px;
1647     margin-left: 20px;
1648   }
1649
1650   ul li {
1651     list-style: disc;
1652   }
1653
1654   ol li {
1655     list-style: decimal;
1656   }
1657 }
1658
1659 .diary_post .richtext {
1660     margin-top: 20px;
1661   }
1662
1663 .comments .richtext {
1664   margin-left: 70px;
1665   margin-top: 0;
1666 }
1667
1668 /* Rules for rich text editors */
1669
1670 .richtext_container {
1671   .richtext_content {
1672     display: inline-block;
1673     vertical-align: top;
1674
1675     .richtext_preview {
1676       display: inline-block;
1677       padding: 20px;
1678       background-color: #f4f4ff;
1679       overflow-x: auto;
1680
1681       &.loading {
1682         background-image: image-url("loading.gif");
1683         background-repeat: no-repeat;
1684         background-position: center;
1685       }
1686
1687       > :first-child {
1688         margin-top: 0px;
1689       }
1690     }
1691   }
1692
1693   .richtext_help {
1694     display: inline-block;
1695     vertical-align: top;
1696     margin-left: 15px;
1697     background-color: #f8f8ff;
1698     padding: 10px;
1699     width: 300px;
1700     max-width: 450px;
1701
1702     ul {
1703       margin-bottom: 0;
1704     }
1705
1706     h4.heading, li {
1707       border-bottom: 1px solid #ccc;
1708       margin-bottom: 5px;
1709       padding-bottom: 5px;
1710     }
1711
1712     li h4, li span, li p {
1713       display: inline-block;
1714       vertical-align: top;
1715       font-size: 11px;
1716     }
1717
1718     li h4 {
1719       width: 35%;
1720       margin: 0;
1721     }
1722
1723     li span, li p {
1724       width: 60%;
1725       margin-left: 10px;
1726       margin-bottom: 5px;
1727       white-space: nowrap;
1728     }
1729
1730     input.richtext_doedit,
1731     input.richtext_dopreview {
1732       margin-right: 10px;
1733     }
1734   }
1735
1736   .buttons input[type="submit"] {
1737     display: inline-block;
1738     margin-bottom:0;
1739     width:99px;
1740     min-width:99px;
1741   }
1742   .buttons input:first-child {
1743     border-radius:2px 0 0 2px;
1744     margin-right:1px;
1745   }
1746   .buttons input:last-child {
1747     border-radius:0 2px 2px 0;
1748   }
1749 }
1750
1751 /* Rules for the user notes list */
1752
1753 .note_list {
1754   tr.creator {
1755     background-color: #eeeeee;
1756   }
1757
1758   td {
1759     padding: 3px;
1760   }
1761
1762   p {
1763     margin-bottom: 0px;
1764   }
1765 }
1766
1767 /* Rules for the notes interface */
1768
1769 .note {
1770   padding-top: 10px;
1771 }
1772
1773 .note {
1774   h2 {
1775     margin-bottom: 10px;
1776   }
1777
1778   div {
1779     margin-top: 10px;
1780   }
1781
1782   .permalink {
1783     position: absolute;
1784     top: 5px;
1785     left: 5px;
1786     min-width: 15px;
1787     min-height: 15px;
1788     background: image-url("sprite.png") 0 -45px no-repeat;
1789   }
1790
1791   .permalink span {
1792     display: none;
1793     padding-left: 20px;
1794   }
1795
1796   .permalink:hover span {
1797     display: block;
1798   }
1799
1800   .warning {
1801     display: block;
1802     background-color: #ffe0cc;
1803     padding: 4px 6px;
1804     margin-bottom: 10px;
1805   }
1806
1807   .comment_body {
1808     margin-top: 2px;
1809     margin-bottom: 2px;
1810
1811     p {
1812       margin-top: 0px;
1813       margin-bottom: 0px;
1814     }
1815   }
1816
1817   .comment {
1818     width: 100%;
1819     height: 100px;
1820   }
1821
1822   .buttons {
1823     margin-top: 5px;
1824     text-align: right;
1825   }
1826 }
1827
1828 /*
1829  * Rules for the iD editor
1830  */
1831 .id-embed {
1832   width: 100%;
1833   height: 100%;
1834 }
1835
1836 /* Rules for rotating sidebar ads */
1837 .ad-container {
1838   display: block;
1839   height: 120px;
1840   overflow: hidden;
1841   position: relative;
1842   border-bottom: 1px solid #ccc;
1843 }
1844
1845 .ads {
1846   width: 370px;
1847   position: absolute;
1848   left: 0%;
1849 }
1850
1851 .ad {
1852   float: left;
1853   height: 120px;
1854   padding: 10px;
1855   border: 0px;
1856   background: #fff;
1857 }