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