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