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