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