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