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