Move the diary link to the sidebar
[rails.git] / app / assets / stylesheets / common.css.scss
1 /* Styles common to large and small screens */
2
3 /* Default rules for the body of every page */
4
5 body {
6   font-family: 'Helvetica Neue',Arial,sans-serif;
7   font-size: 14px;
8   line-height: 20px;
9   color: #222;
10   background-color: #fff;
11   margin: 0px;
12   padding: 0px;
13 }
14
15 body.slim {
16   background-color: #f0f0f0;
17 }
18
19 /* Rules for links */
20
21 a {
22   color: #00f;
23   text-decoration: none;
24 }
25
26 a:hover {
27   text-decoration: underline;
28 }
29
30 /* Rules for horizontal lines */
31
32 hr {
33   border: none;
34   background-color: #ccc;
35   color: #ccc;
36   height: 1px;
37 }
38
39 /* Default rules for headings */
40
41 h2 {
42   margin: 5px 0;
43   font-size: 25px;
44   line-height: 30px;
45 }
46
47 /* Rules for the whole left sidebar, including the logo */
48
49 #left {
50   position: absolute;
51   top: 0px;
52   width: 185px;
53   font-size: 11px;
54   line-height: 12px;
55 }
56
57 /* Rules for the OpenStreetMap logo in the top left corner */
58
59 #logo {
60   width: 170px;
61   min-width: 170px;
62   padding: 5px;
63   text-align: center;
64   margin: 25px 0 5px 0;
65 }
66
67 #logo h1 {
68   font-size: 18px;
69   line-height: 20px;
70   text-align: center;
71   margin: 0px;
72 }
73
74 #logo h2 {
75   font-size: 10px;
76   line-height: 15px;
77   margin: 0px;
78 }
79
80 /* Rules for the site name */
81
82 #small-title {
83   display: none;
84 }
85
86 /* Rules for the introductory text displayed in the left sidebar to new users */
87
88 #intro {
89   border-top: 1px solid #ccc;
90 }
91
92 #intro p {
93   margin: 5px;
94 }
95
96 /*
97  * Rules for alert boxes shown in the left sidebar when important
98  * information needs to be conveyed such as when the site is
99  * undergoing maintenance.
100  */
101
102 #alert {
103   width: 170px;
104   margin: 5px;
105   padding: 5px;
106   border: 1px solid #ccc;
107   background: #d00;
108   line-height: 1.2em;
109   font-size: 14px;
110   border-radius: 5px;
111   -moz-border-radius: 5px;
112 }
113
114 /*
115  * Rules for notice boxes shown in the left sidebar when important, but
116  * non-critical information needs to be conveyed such as notices about
117  * donation drives.
118  */
119
120 .notice {
121   width: 170px;
122   margin: 5px;
123   padding: 5px;
124   border: 1px solid #ccc;
125   background: #ea0;
126   line-height: 20px;
127   font-size: 14px;
128   border-radius: 5px;
129   -moz-border-radius: 5px;
130 }
131
132 /* Rules for the menu displayed in the left sidebar */
133
134 .left_menu {
135   padding: 5px 10px;
136   margin: 4px 0;
137   border-top: 1px solid #ccc;
138   border-bottom: 1px solid #ccc;
139   line-height: 20px;
140   font-size: 14px;
141   font-weight: bold;
142 }
143
144 .left_menu h1 {
145   font-style: normal;
146   font-size: 15px;
147 }
148
149 .left_menu ul {
150   margin: 0px;
151   list-style-type: none;
152 }
153
154 .left_menu li {
155   margin: 0px;
156   padding: 0px;
157 }
158
159 /* submenus */
160 .left_menu ul li ul {
161   font-weight: normal;
162   line-height: 15px;
163   font-size: 12px;
164 }
165
166 .left_menu a {
167   color: #000;
168 }
169
170 /* Rules for SOTM advert */
171
172 #sotm {
173   width: 180px;
174   min-width: 180px;
175   margin: 5px;
176   padding: 0px;
177   border: 0px;
178   background: #fff;
179 }
180
181 /*
182  * Rules for "optional boxes" which appear in the left sidebar on
183  * certain pages. Current users are the seach box on the main page
184  * and the tag cloud on the traces pages.
185  */
186
187 .optionalbox {
188   padding: 5px 10px;
189   margin: 4px 0;
190   border-top: 1px solid #ccc;
191 }
192
193 .optionalbox h1 {
194   font-size: 14px;
195   font-weight: bold;
196   line-height: 20px;
197   margin: 0px;
198   vertical-align: bottom;
199 }
200
201 /* Rules for the search box */
202
203 .whereami {
204   line-height: 20px;
205   vertical-align: bottom;
206 }
207
208 .search_container {
209   height: 15px;
210   padding-bottom: 5px;
211 }
212
213 #search_field form {
214   width: 100%;
215   margin: 0px;
216   padding: 0px;
217 }
218
219 #search_field input[type="text"] {
220   width: 130px;
221 }
222
223 #search_field input[type="submit"] {
224   width: 26px;
225   padding-left: 0px;
226   padding-right: 0px;
227 }
228
229 .search_help {
230   margin-top: 2px;
231   margin-bottom: 0px;
232 }
233
234 /* Rules for donation request box */
235
236 .donate {
237   width: 155px;
238   margin: 10px 5px;
239   padding: 5px;
240   border: 1px solid #ccc;
241   background: #cbeea7;
242   line-height: 20px;
243   text-align: center;
244   font-size: 14px;
245   border-radius: 5px;
246   -moz-border-radius: 5px;
247 }
248
249 /* Rules for Creative Commons logo button */
250
251 #cclogo {
252   margin-top: 10px;
253   margin-bottom: 10px;
254 }
255
256 /* Rules for tabbed navigation bar */
257
258 #top-bar {
259   border-bottom: 1px solid #ccc;
260   height: 29px;
261 }
262
263 #tabnav {
264   padding: 0;
265   margin: 0;
266   overflow:hidden;
267 }
268
269 #tabnav li {
270   margin: 0px;
271   padding: 0px;
272   display: inline;
273   list-style-type: none;
274 }
275
276 #tabnav a, #tabnav a:link, #tabnav a:visited {
277   background: #fff;
278   font-size: 14px;
279   line-height: 19px;
280   font-weight: bold;
281   padding: 5px 10px;
282   text-decoration: none;
283   color: #333;
284 }
285
286 #tabnav a:link.active, #tabnav a:visited.active {
287   border-bottom: 1px solid #aaa;
288   background: #9ed485;
289   color: #000;
290 }
291
292 #tabnav a:link:hover, #tabnav a:visited:hover {
293   text-decoration:underline;
294 }
295
296 #tabnav a:link.disabled,
297 #tabnav a:visited.disabled,
298 #tabnav a:link:hover.disabled,
299 #tabnav a:visited:hover.disabled {
300   color: #888;
301 }
302
303 /* Rules for greeting bar in the top right corner */
304
305 #greeting {
306   height: 28px;
307   margin: 0px;
308   font-size: 13px;
309   line-height: 28px;
310 }
311
312 .greeting-bar-unread {
313   font-weight: bold;
314 }
315
316 /* Rules for the message shown in place of the map when javascript is disabled */
317
318 #noscript {
319   z-index: 20000000;
320   position: absolute;
321   top: 15px;
322 }
323
324 /* Rules for OpenLayers maps */
325
326 #map {
327   margin: 0px;
328   padding: 0px;
329 }
330
331 .olControlAttribution {
332   bottom: 15px !important;
333   left: 0px !important;
334   right: 0px !important;
335   text-align: center;
336 }
337
338 #permalink {
339   z-index: 10000;
340   position: absolute;
341   bottom: 0px;
342   right: 0px;
343   padding: 5px;
344   background:#fff;
345   text-align: right;
346   font-size: 12px;
347 }
348
349 #permalink a {
350   padding: 5px;
351 }
352
353 /* Rules for edit menu */
354
355 .menu {
356   display: none;
357   z-index: 10000;
358   position: absolute;
359   background-color: #ffffff;
360   border: 1px solid black;
361 }
362
363 .menu ul {
364   margin-top: 10px;
365   margin-bottom: 10px;
366   padding-left: 10px;
367   padding-right: 10px;
368 }
369
370 .menu li {
371   list-style-type: none;
372   white-space: nowrap;
373 }
374
375 /* Rules for attribution text under the main map shown on printouts */
376
377 #attribution {
378   display: none;
379 }
380
381 .attribution_notice {
382   text-align: center;
383 }
384
385 /* Rules for the popout map sidebar */
386
387 #sidebar {
388   display: none;
389   position: absolute;
390   margin: 0px;
391   padding: 0px;
392   width: 30%;
393   top: 0px;
394   bottom: 0px;
395 }
396
397 #sidebar #sidebar_content {
398   overflow: auto;
399   position: absolute;
400   font-size: 13px;
401   line-height: 15px;
402   top: 29px;
403   bottom: 0px;
404   left: 0px;
405   right: 0px;
406 }
407
408 #sidebar .sidebar_title {
409   margin: 0px;
410   padding: 3px 6px 4px 6px;
411   height: 29px;
412   font-size: 14px;
413   line-height: 15px;
414   background: #bbb;
415 }
416
417 /* Rules for the map key which appears in the popout sidebar */
418
419 #mapkey h3 {
420   font-size: 110%;
421   font-weight: normal;
422   text-align: center;
423 }
424
425 #mapkey .mapkey-table {
426   padding-left: 5px;
427   padding-right: 5px;
428 }
429
430 #mapkey .mapkey-table-key {
431 }
432
433 #mapkey .mapkey-table-value {
434   font-size: 90%;
435 }
436
437 /* Rules for search results which appear in the popout sidebar */
438
439 .search_searching {
440   margin-top: 5px;
441   margin-bottom: 5px;
442 }
443
444 .search_results_heading {
445   margin: 0px;
446   padding: 2px 5px;
447   border-bottom: 1px solid #ccc;
448   font-weight: bold;
449 }
450
451 .search_results_entry {
452   margin: 0px;
453   padding: 2px 5px;
454 }
455
456 .search_results_error {
457   margin: 0px;
458   padding: 2px 6px 0px;
459   color: #f00;
460 }
461
462 /* Rules for data browser information which appears in the popout sidebar */
463
464 .browse_heading {
465   margin: 0px;
466   padding: 3px 6px;
467   border: 1px solid #ccc;
468   background: #ddd;
469 }
470
471 .browse_details {
472   margin: 0px;
473   padding: 0px 6px;
474 }
475
476 /* Rules for export information which appears in the popout sidebar */
477
478 .export_heading {
479   margin: 0px;
480   padding: 2px 5px;
481   border-bottom: 1px solid #ccc;
482   font-weight: bold;
483 }
484
485 .export_bounds {
486   width: 100%;
487   text-align: center;
488 }
489
490 .export_bound {
491   margin: 5px;
492 }
493
494 .export_details {
495   padding: 2px 6px;
496 }
497
498 #export_osm {
499   display: none;
500 }
501
502 #export_mapnik {
503   display: none;
504 }
505
506 #export_osmarender {
507   display: none;
508 }
509
510 .export_hint {
511   padding: 0px 12px;
512   font-style: italic;
513 }
514
515 .export_buttons {
516   width: 100%;
517   text-align: center;
518 }
519
520 /* Rules for the main content area */
521
522 #content {
523   padding: 10px;
524   margin: 0px;
525   position: absolute;
526   bottom: 0px;
527 }
528
529 #content.site_index,
530 #content.site_edit,
531 #content.site_export {
532   border: 0px;
533   padding: 0px;
534 }
535
536 #slim_container {
537   width: 100%;
538 }
539
540 #slim_container_content {
541   max-width: 50em;
542   background-color: #FFFFFF;
543   margin: 10px auto;
544   padding: 3px;
545   border-radius: 25px;
546   -moz-border-radius: 25px;
547   border: 1px solid #e6e6e6;
548 }
549
550 #slim_content {
551   margin: 10px;
552   margin-top: 90px;
553   max-width: 50em;
554 }
555
556 #slim_header {
557   margin: 10px;
558   position: absolute;
559   top: 0px;
560 }
561
562 #slim_header img {
563   vertical-align: middle;
564   margin-bottom: 5px;
565 }
566
567 /* Rules for the home page */
568
569 .site_index #map {
570   position: absolute;
571   top: 0px;
572   bottom: 0px;
573   left: 0px;
574   right: 0px;
575 }
576
577 .site_export #map {
578   position: absolute;
579   top: 0px;
580   bottom: 0px;
581   left: 0px;
582   right: 0px;
583 }
584
585 /* Rules for the edit page */
586
587 .site_edit #map {
588   position: absolute;
589   top: 0px;
590   bottom: 0px;
591   left: 0px;
592   right: 0px;
593 }
594
595 /* Rules for the changeset list shown by the history tab etc */
596
597 #changeset_list_container {
598   position: relative;
599 }
600
601 #changeset_list {
602   width: 50%;
603   font-size: small;
604   border-collapse: collapse;
605   border-width: 0px;
606   margin-top: 1px;
607   margin-bottom: 1px;
608 }
609
610 #changeset_list td {
611   vertical-align: top;
612   padding: 3px;
613 }
614
615 #changeset_list .date {
616   white-space: nowrap;
617 }
618
619 #changeset_list .user {
620   white-space: nowrap;
621 }
622
623 #changeset_list .area {
624   white-space: nowrap;
625 }
626
627 #changeset_list .selected {
628   background-color: rgb(255, 255, 160);
629   background-color: rgba(255, 255, 85, 0.5);
630 }
631
632 #changeset_list_map {
633   position: absolute;
634   top: 0px;
635   bottom: 0px;
636   width: 49%;
637   min-height: 400px;
638   border: solid 1px black;
639 }
640
641 /* Rules for the data browser */
642
643 #browse_navigation {
644   width: 250px;
645   text-align: center;
646 }
647
648 table.browse_details th {
649   white-space: nowrap;
650 }
651
652 #browse_map {
653   width: 250px;
654 }
655
656 #browse_map #small_map {
657   width: 250px;
658   height: 300px;
659   border: solid 1px black;
660 }
661
662 #browse_map .geolink {
663   display: none;
664 }
665
666 /* Rules for the trace list shown by the traces tab etc */
667
668 #trace_list {
669   font-size: small;
670   border-collapse: collapse;
671   border-width: 0px;
672 }
673
674 #trace_list .trace_summary {
675   font-size: 12px;
676   color: gray;
677 }
678
679 #trace_list .trace_pending {
680   color: red;
681 }
682
683 #trace_list .trace_public {
684   color: green;
685 }
686
687 #trace_list .trace_identifiable {
688   color: green;
689 }
690
691 #trace_list .trace_trackable {
692   color: red;
693 }
694
695 #trace_list .trace_private {
696   color: red;
697 }
698
699 /* Rules for the user list */
700
701 #user_list {
702   width: 100%;
703   font-size: small;
704 }
705
706 #user_list tr {
707   vertical-align: middle;
708 }
709
710 #user_list p {
711   margin-top: 0px;
712   margin-bottom: 0px;
713 }
714
715 #user_list_actions {
716   margin-top: 10px;
717 }
718
719 /* Rules for the new diary entry page */
720
721 .diary_entry div#map {
722   position: relative;
723   width: 90%;
724   height: 400px;
725   border: 1px solid #ccc;
726   display: none;
727 }
728
729 /* Rules for the login page */
730
731 #login_wrapper div {
732   margin: 5px;
733   padding: 15px;
734   border-radius: 15px;
735   -moz-border-radius: 15px;
736 }
737
738 #login_login {
739   background-color: #f5f5ff;
740   border: 1px solid #f3f3ff;
741   border-radius: 15px;
742   -moz-border-radius: 15px;
743 }
744
745 #login_login h1 {
746   margin-top: 5px;
747 }
748
749 table#login_openid_buttons {
750   padding-bottom: 10px;
751 }
752
753 #login_openid_buttons td {
754   padding-left: 10px;
755   padding-right: 10px;
756   padding-top: 5px;
757   padding-bottom: 5px;
758 }
759
760 #login_openid_buttons img {
761   border: 0;
762 }
763
764 #login_signup form.button-to div {
765   margin: 0px;
766   padding: 0px;
767 }
768
769 /* Rules for the account confirmation page */
770
771 div#contributorTerms {
772   border: 1px solid black;
773   padding: 4px;
774   overflow: auto;
775   width: 95%;
776   height: 400px;
777 }
778
779 div#slim_content div#contributorTerms {
780   width: auto;
781 }
782
783 div#contributorTerms p#first {
784   margin-top: 0px;
785 }
786
787 div#contributorTerms p#last {
788   margin-bottom: 0px;
789 }
790
791 div#contributorTerms ol {
792   margin-bottom: 0px;
793 }
794
795 div#contributorTerms img {
796   display: block;
797   margin-left: auto;
798   margin-right: auto;
799   margin-top: 10%;
800 }
801
802 form#termsForm {
803   width: 95%;
804   margin-bottom: 3em;
805 }
806
807 div#slim_content form#termsForm {
808   width: auto;
809 }
810
811 p#contributorGuidance {
812   background-color: #f5f5ff;
813   border: 1px solid #f3f3ff;
814   border-radius: 15px;
815   -moz-border-radius: 15px;
816   padding: 10px;
817 }
818
819 /* Rules for the account settings page */
820
821 #accountForm td {
822   padding-bottom: 10px;
823 }
824
825 #accountForm .user_map {
826   position: relative;
827   width: 500px;
828   height: 400px; 
829   border: 1px solid #ccc;
830 }
831
832 #accountImage td {
833   padding-bottom: 0px;
834 }
835
836 .nohome .location {
837   display: none;
838 }
839
840 #homerow .message {
841   display: none;
842 }
843
844 .nohome .message {
845   display: inline !important;
846 }
847
848 #accountForm input[type=submit] {
849   margin-top: 15px;
850 }
851
852 /* Rules for the user view */
853
854 .user_view .user_map {
855   position: relative;
856   width: 400px;
857   height: 400px; 
858   border: 1px solid #ccc;
859 }
860
861 .user_view .user_map p#no_home_location {
862   position: absolute;
863   top: 0px;
864   bottom: 0px;
865   width: 90%;
866   height: 30%;
867   margin: auto 5%
868 }
869
870 /* Rules for the user map */
871
872 .user_map .olControlPanZoomBar {
873   display: none;
874 }
875
876 .user_map .olControlPanZoom {
877   display: block;
878 }
879
880 /* Rules for user popups on maps */
881
882 .user_popup p {
883   padding-top: 3px;
884   padding-bottom: 3px;
885   margin-top: 0px;
886   margin-bottom: 0px;
887   margin-left: 55px;
888   margin-right: 2px;
889 }
890
891 .user_popup img.user_thumbnail {
892   float: left;
893 }
894
895 /* Rules for message in/out box page */
896
897 #messages {
898   border: 1px solid #ccc;
899 }
900
901 .inbox-row-unread .inbox-subject {
902   font-weight: bold;
903 }
904
905 /* Rules for "flash" notice boxes shown at the top of the content area */
906
907 #error {
908   border: 1px solid red;
909   padding: 7px;
910   background-color: #fff0f0;
911   margin-bottom: 20px;
912   border-radius: 5px;
913   -moz-border-radius: 5px;
914 }
915
916 #warning {
917   border: 1px solid orange;
918   padding: 7px;
919   background-color: #fff6f0;
920   margin-bottom: 20px;
921   border-radius: 5px;
922   -moz-border-radius: 5px;
923 }
924
925 #notice {
926   border: 1px solid green;
927   padding: 7px;
928   background-color: #f0fff0;
929   margin-bottom: 20px;
930   border-radius: 5px;
931   -moz-border-radius: 5px;
932 }
933
934 /* Rules for highlighting fields with rails validation errors */
935
936 .field_with_errors {
937   padding: 2px;
938   background-color: red;
939   display: table;
940 }
941
942 /* Rules for rails validation error boxes */
943
944 #errorExplanation {
945   width: 400px;
946   border: 2px solid red;
947   padding: 7px;
948   padding-bottom: 12px;
949   margin-bottom: 20px;
950   background-color: #f0f0f0;
951 }
952
953 #errorExplanation h2 {
954   font-weight: bold;
955   font-size: 12px;
956   margin: -7px;
957   background-color: #c00;
958   color: #fff;
959 }
960
961 #errorExplanation p {
962   color: #333;
963   margin-bottom: 0px;
964   padding: 5px;
965 }
966
967 #errorExplanation ul li {
968   font-size: 12px;
969   list-style: square;
970 }
971
972 /* Rules for forms */
973
974 .fieldName {
975   vertical-align: top;
976   font-weight: bold;
977   font-size: 12px;
978   line-height: 20px;
979 }
980
981 .minorNote {
982   font-size: 0.8em;
983 }
984
985 input[type="text"],
986 input[type="email"],
987 input[type="url"],
988 input[type="password"],
989 textarea {
990   border: 1px solid #888;
991 }
992
993 /* Rules for user images */
994
995 img.user_image {
996   max-width: 100px;
997   max-height: 100px;
998   border: 1px solid black;
999 }
1000
1001 img.user_thumbnail {
1002   max-width: 50px;
1003   max-height: 100px;
1004   border: 1px solid black;
1005 }
1006
1007 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1008
1009 .nowrap {
1010   white-space: nowrap;
1011 }
1012
1013 /* Rules for geo microformats */
1014
1015 abbr.geo {
1016   border-bottom: none;
1017 }
1018
1019 /* Rules for RSS buttons */
1020
1021 .rsssmall {
1022   position: relative;
1023   top: 4px;
1024 }
1025
1026 /* Rules for doing distinct colour of alternate table rows */
1027
1028 .table0 {
1029   background: #f6f6f6;
1030 }
1031
1032 .table1 {
1033   background: #fff;
1034 }
1035
1036 /* Rules for OpenID logo */
1037
1038 .openid_logo {
1039   vertical-align: text-bottom;
1040   border: 0;
1041 }