]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.css.scss
Merge branch 'master' into notes
[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   text-align: left;
14 }
15
16 body.slim {
17   background-color: #f0f0f0;
18 }
19
20 /* Rules for links */
21
22 a {
23   color: #00f;
24   text-decoration: none;
25 }
26
27 a:hover {
28   text-decoration: underline;
29 }
30
31 /* Rules for horizontal lines */
32
33 hr {
34   border: none;
35   background-color: #ccc;
36   color: #ccc;
37   height: 1px;
38 }
39
40 /* Default rules for headings */
41
42 h2 {
43   margin: 5px 0;
44   font-size: 25px;
45   line-height: 30px;
46 }
47
48 /* Rules for the whole left sidebar, including the logo */
49
50 #left {
51   position: absolute;
52   top: 30px;
53   bottom: 0;
54   width: 185px;
55   font-size: 11px;
56   line-height: 12px;
57   border-right: 1px solid #ccc;
58 }
59
60 /* Rules for the OpenStreetMap logo in the top left corner */
61
62 #logo {
63   display: block;
64   width: 170px;
65   min-width: 170px;
66   padding: 5px;
67   text-align: center;
68   margin: auto;
69 }
70
71 #logo img {
72   border: 0px;
73 }
74
75 #logo h1 {
76   font-size: 18px;
77   line-height: 20px;
78   text-align: center;
79   margin: 0px;
80 }
81
82 #logo h2 {
83   font-size: 10px;
84   line-height: 15px;
85   margin: 0px;
86 }
87
88 /* Rules for the site name */
89
90 #small-title {
91   display: none;
92 }
93
94 #small-title img {
95   border: 0px;
96 }
97
98 /* Rules for the introductory text displayed in the left sidebar to new users */
99
100 .sidebar-copy {
101   padding: 5px 10px;
102 }
103
104 .sidebar-copy p {
105   margin: 5px 0;
106 }
107
108 .sidebar-copy.intro {
109   margin-top: -1px;
110   border-top: 1px solid #ccc;
111 }
112
113 /*
114  * Rules for alert boxes shown in the left sidebar when important
115  * information needs to be conveyed such as when the site is
116  * undergoing maintenance.
117  */
118
119 .sidebar-alert {
120   padding: 4px 5px 4px 5px;
121   border-top: 1px solid #ccc;
122   margin-top: 4px;
123   margin-bottom: -4px;
124   background: #e00;
125   font-size: 13px;
126   font-weight: bold;
127   line-height: 17px;
128
129   p {
130     margin: 5px;
131   }
132 }
133
134 /*
135  * Rules for notice boxes shown in the left sidebar when important, but
136  * non-critical information needs to be conveyed such as notices about
137  * donation drives.
138  */
139
140 .sidebar-notice {
141   padding: 4px 5px 4px 5px;
142   border-top: 1px solid #ccc;
143   margin-top: 4px;
144   margin-bottom: -4px;
145   background: #ea0;
146   font-size: 13px;
147   line-height: 17px;
148
149   p {
150     margin: 5px;
151   }
152 }
153
154 /* Rules for the menu displayed in the left sidebar */
155
156 .left_menu {
157   left: 0px;
158   margin: 0;
159   padding: 5px 10px;
160   line-height: 15px;
161   font-size: 12px;
162   list-style-type: none;
163   border-bottom: 1px solid #ccc;
164   border-top: 1px solid #ccc;
165 }
166
167 .left_menu ul {
168   padding: 0;
169   margin: 0;
170 }
171
172 .left_menu li {
173   list-style-type: none;
174   padding: 0;
175   margin: 0;
176 }
177
178 .left_menu h4 {
179   padding: 5px 0 5px 0;
180   font-size: 12px;
181   margin: 0;
182 }
183
184 .left_menu li:last-child h4 {
185   padding-top: 0;
186 }
187
188 /* Rules for SOTM advert */
189
190 #sotm {
191   width: 165px;
192   margin: 10px;
193   padding: 0px;
194   border: 0px;
195   background: #fff;
196 }
197
198 #sotm img {
199   width: 165px;
200 }
201
202 /*
203  * Rules for "optional boxes" which appear in the left sidebar on
204  * certain pages. Current users are the seach box on the main page
205  * and the tag cloud on the traces pages.
206  */
207
208 .optionalbox {
209   left: 0px;
210   padding: 5px 10px;
211   margin: 5px 0;
212   text-align: left;
213 }
214
215 .optionalbox h1 {
216   font-size: 14px;
217   font-weight: bold;
218   line-height: 20px;
219   margin: 0px;
220   vertical-align: bottom;
221 }
222
223 /* Rules for the search box */
224
225 .whereami {
226 }
227
228 #search_field form {
229   width: 165px;
230   margin: 0px;
231   padding: 0px;
232 }
233
234 #search_field {
235   position: relative;
236 }
237
238 #search_field input[type="text"] {
239   width: 165px;
240   font-size: 14px;
241   line-height: 15px;
242   height: 25px;
243   padding: 2px 0px 2px 5px;
244   box-shadow: inset #DDD 0px 1px 3px;
245   box-sizing: border-box;
246   -webkit-box-sizing: border-box;
247   -moz-box-sizing: border-box;
248   -ms-box-sizing: border-box;
249 }
250
251 #search_field input[type="text"]:focus {
252   outline: none;
253   border: 1px solid #000;
254 }
255
256 #search_field input[type="submit"] {
257   width: 15px;
258   height: 15px;
259   border: 0px;
260   text-indent: -1000px;
261   overflow: hidden;
262   text-transform: capitalize;
263   padding-left: 0px;
264   padding-right: 0px;
265   background: image-url("sprite.png");
266   position: absolute;
267   top: 5px;
268   right: 4px;
269   cursor: pointer;
270 }
271
272 .search_help {
273   margin: 5px 0 0 0;
274 }
275
276 .deemphasize {
277   color: #999;
278 }
279
280 .deemphasize a {
281   color: #7092FF;
282 }
283
284 /* Rules for donation request box */
285
286 .donate {
287   display: block;
288   position: relative;
289   width: 153px;
290   margin: 10px 10px 0px 10px;
291   padding: 5px;
292   border: 1px solid #AED1A0;
293   background: #cbeea7;
294   line-height: 20px;
295   text-align: center;
296   font-size: 14px;
297   border-radius: 2px;
298   -moz-border-radius: 2px;
299   color: #222;
300 }
301
302 .donate:hover {
303   background: #9ed485;
304   text-decoration: none;
305 }
306
307 .donate p {
308   text-indent: 20px;
309   margin: 0;
310 }
311
312 .donate .donate-icon {
313   width: 15px;
314   height: 15px;
315   border: 0px;
316   padding-left: 0px;
317   padding-right: 0px;
318   background: image-url("sprite.png") 0 -30px no-repeat;
319   position: absolute;
320   top: 8px;
321   left: 17px;
322 }
323
324 /* Rules for Creative Commons logo button */
325
326 #cclogo {
327   margin-top: 10px;
328   margin-bottom: 10px;
329 }
330
331 /* Rules for tabbed navigation bar */
332
333 #top-bar {
334   position: absolute;
335   z-index: 10000;
336   top: 0;
337   left: 185px;
338   right: 0;
339   height: 29px;
340   border-bottom: 1px solid #ccc;
341   background: white;
342 }
343
344 #tabnav {
345   padding: 0;
346   margin: 0;
347   overflow:hidden;
348 }
349
350 #tabnav li {
351   margin: 0px;
352   padding: 0px;
353   display: inline;
354   list-style-type: none;
355 }
356
357 #tabnav a, #tabnav a:link, #tabnav a:visited {
358   float: left;
359   background: #fff;
360   font-size: 14px;
361   line-height: 19px;
362   font-weight: bold;
363   padding: 5px 10px;
364   margin-right: 1px;
365   text-decoration: none;
366   color: #333;
367   -webkit-transition: color 200ms ease-in;
368   -moz-transition: color 200ms ease-in;
369   -o-transition: color 200ms ease-in;
370   transition: color 200ms ease-in;
371 }
372
373 body.site-index #tabnav a#viewanchor,
374 body.site-edit #tabnav a#editanchor,
375 body.changeset-list #tabnav a#historyanchor,
376 body.site-export #tabnav a#exportanchor {
377   border-bottom: 1px solid #aaa;
378   background: #9ed485;
379   color: #000;
380 }
381
382 #tabnav a:link:hover, #tabnav a:visited:hover {
383   text-decoration:underline;
384 }
385
386 #tabnav a:link.disabled,
387 #tabnav a:visited.disabled,
388 #tabnav a:link:hover.disabled,
389 #tabnav a:visited:hover.disabled {
390   color: #ccc;
391   cursor: default;
392 }
393
394 #tabnav a:link.disabled:hover,
395 #tabnav a:visited.disabled:hover,
396 #tabnav a:link:hover.disabled:hover,
397 #tabnav a:visited:hover.disabled:hover {
398   text-decoration: none;
399 }
400
401 .count-number {
402   padding: 2px 5px;
403   border-radius: 3px;
404   background: #eee;
405   margin: 0 2px;
406   font-size: 11px;
407   color: #333;
408 }
409
410 /* Rules for greeting bar in the top right corner */
411
412 #greeting {
413   float: right;
414   height: 28px;
415   margin: 0px;
416   padding-right: 10px;
417   font-size: 13px;
418   line-height: 28px;
419 }
420
421 .greeting-bar-unread {
422   font-weight: bold;
423 }
424
425 /* Rules for the message shown in place of the map when javascript is disabled */
426
427 #noscript {
428   z-index: 20000000;
429   position: absolute;
430   top: 15px;
431   left: 15px;
432 }
433
434 /* Rules for Leaflet maps */
435
436 #map {
437   margin: 0px;
438   border: 0px;
439   padding: 0px;
440 }
441
442 #permalink {
443   z-index: 10000;
444   position: absolute;
445   bottom: 0px;
446   right: 0px;
447   padding: 5px;
448   background:#fff;
449   text-align: right;
450   font-size: 12px;
451 }
452
453 #permalink a {
454   padding: 5px;
455 }
456
457 #permalink a.disabled {
458   color: #ccc;
459   cursor: default;
460   text-decoration: none;
461 }
462
463 .site-index .leaflet-top,
464 .site-export .leaflet-top {
465   top: 40px !important;
466
467   .leaflet-control {
468     margin-top: 0px !important;
469   }
470 }
471
472 .site-index #map .olControlScaleLine,
473 .site-export #map .olControlScaleLine {
474   left: 10px !important;
475 }
476
477 /* Rules for edit menu */
478
479 .menuicon {
480   padding: 5px;
481
482   &:hover {
483     background: #eee;
484     text-decoration: none !important;
485   }
486 }
487
488 .menu {
489   display: none;
490   z-index: 10000;
491   position: absolute;
492   background-color: #ffffff;
493   border: 1px solid #cccccc;
494   border-top: 0px;
495 }
496
497 .menu ul {
498   margin: 0px;
499   padding: 0px;
500 }
501
502 .menu li {
503   padding: 2px 5px;
504   margin: 0px;
505   list-style-type: none;
506   border-top: 1px solid #eee;
507   white-space: nowrap;
508 }
509
510 /* Rules for attribution text under the main map shown on printouts */
511
512 #attribution {
513   display: none;
514 }
515
516 .attribution_license {
517   text-align: left;
518 }
519
520 .attribution_notice {
521   text-align: center;
522 }
523
524 .attribution_project {
525   text-align: right;
526 }
527
528 /* Rules for the popout map sidebar */
529
530 #sidebar {
531   display: none;
532   position: absolute;
533   margin: 30px 0px 0px 0px;
534   padding: 0px;
535   border-right: 1px solid #ccc;
536   width: 30%;
537   top: 0px;
538   bottom: 0px;
539   left: 0px;
540 }
541
542 #sidebar #sidebar_content {
543   overflow: auto;
544   position: absolute;
545   font-size: 13px;
546   line-height: 15px;
547   top: 29px;
548   bottom: 0px;
549   left: 0px;
550   right: 0px;
551 }
552
553 #sidebar .sidebar_title {
554   margin: 0px;
555   padding: 3px 6px 4px 6px;
556   height: 29px;
557   font-size: 14px;
558   line-height: 15px;
559   background: #ccc;
560 }
561
562 #sidebar #sidebar_title {
563   text-align: left;
564 }
565
566 #sidebar #sidebar_close {
567   text-align: right;
568 }
569
570 /* Rules for the map key which appears in the popout sidebar */
571
572 #mapkey h3 {
573   font-size: 110%;
574   font-weight: normal;
575   text-align: center;
576 }
577
578 #mapkey .mapkey-table {
579   padding-left: 5px;
580   padding-right: 5px;
581 }
582
583 #mapkey .mapkey-table-key img {
584   display: block;
585   margin-left: auto;
586   margin-right: auto;
587 }
588
589 #mapkey .mapkey-table-value {
590   font-size: 90%;
591 }
592
593 /* Rules for search results which appear in the popout sidebar */
594
595 .search_searching {
596   margin-top: 5px;
597   margin-bottom: 5px;
598 }
599
600 .search_results_heading {
601   margin: 0px;
602   padding: 2px 5px;
603   border-bottom: 1px solid #ccc;
604   font-weight: bold;
605 }
606
607 .search_results_entry {
608   margin: 0px;
609   padding: 2px 5px;
610 }
611
612 .search_results_error {
613   margin: 0px;
614   padding: 2px 6px 0px;
615   color: #f00;
616 }
617
618 /* Rules for data browser information which appears in the popout sidebar */
619
620 .browse_heading {
621   margin: 0px;
622   padding: 3px 6px;
623   border: 1px solid #ccc;
624   background: #ddd;
625 }
626
627 .browse_details {
628   margin: 0px;
629   padding: 0px 6px;
630 }
631
632 /* Rules for export information which appears in the popout sidebar */
633
634 .export_heading {
635   margin: 0px;
636   padding: 2px 5px;
637   border-bottom: 1px solid #ccc;
638   font-weight: bold;
639 }
640
641 .export_bounds {
642   width: 100%;
643   text-align: center;
644 }
645
646 .export_bound {
647   margin: 5px;
648 }
649
650 .export_details {
651   padding: 2px 6px;
652 }
653
654 #export_osm {
655   display: none;
656 }
657
658 #export_mapnik {
659   display: none;
660 }
661
662 #export_osmarender {
663   display: none;
664 }
665
666 .export_hint {
667   padding: 0px 12px;
668   font-style: italic;
669 }
670
671 .export_buttons {
672   width: 100%;
673   text-align: center;
674 }
675
676 /* Rules for the main content area */
677
678 #content {
679   padding: 20px;
680   margin: 30px 0px 0px 185px;
681   border-left: 1px solid #ccc;
682   text-align: left;
683 }
684
685 .site-edit #content,
686 .site-index #content,
687 .site-export #content {
688   position: fixed;
689   margin-top: 0px;
690   left: 0px;
691   right: 0px;
692   top: 0px;
693   bottom: 0px;
694   padding: 0px;
695 }
696
697 .site-edit #content {
698   top: 30px;
699 }
700
701 #slim_container {
702   width: 100%;
703 }
704
705 #slim_container_content {
706   max-width: 50em;
707   background-color: #FFFFFF;
708   margin: 10px auto;
709   padding: 3px;
710   border-radius: 25px;
711   -moz-border-radius: 25px;
712   border: 1px solid #e6e6e6;
713 }
714
715 #slim_content {
716   margin: 10px;
717   margin-top: 90px;
718   max-width: 50em;
719 }
720
721 #slim_header {
722   margin: 10px;
723   position: absolute;
724   top: 0px;
725 }
726
727 #slim_header img {
728   vertical-align: middle;
729   margin-bottom: 5px;
730   margin-right: 5px;
731 }
732
733 /* Rules for text content pages */
734
735 .wide-table {
736   width: 100%;
737 }
738
739 /* Rules for the home page */
740
741 .site-index #map {
742   position: absolute;
743   top: 0px;
744   bottom: 0px;
745   left: 0px;
746   right: 0px;
747 }
748
749 .site-export #map {
750   position: absolute;
751   top: 0px;
752   bottom: 0px;
753   left: 0px;
754   right: 0px;
755 }
756
757 /* Rules for the edit page */
758
759 .site-edit #map {
760   position: absolute;
761   top: 0px;
762   bottom: 0px;
763   left: 0px;
764   right: 0px;
765   overflow: hidden;
766 }
767
768 /* Rules for the changeset list shown by the history tab etc */
769
770 #changeset_list_container {
771   position: relative;
772 }
773
774 #changeset_list {
775   width: 50%;
776   font-size: small;
777   border-collapse: collapse;
778   border-width: 0px;
779   margin-top: 1px;
780   margin-bottom: 1px;
781   text-align: left;
782 }
783
784 #changeset_list td {
785   vertical-align: top;
786   padding: 3px;
787 }
788
789 #changeset_list .date {
790   white-space: nowrap;
791 }
792
793 #changeset_list .user {
794   white-space: nowrap;
795 }
796
797 #changeset_list .area {
798   white-space: nowrap;
799 }
800
801 #changeset_list .selected {
802   background-color: rgb(255, 255, 160);
803   background-color: rgba(255, 255, 85, 0.5);
804 }
805
806 #changeset_list_map {
807   position: absolute;
808   float: right;
809   top: 0px;
810   bottom: 0px;
811   right: 0px;
812   width: 49%;
813   min-height: 400px;
814   border: solid 1px black;
815 }
816
817 /* Rules for the data browser */
818
819 #browse_navigation {
820   float: right;
821   width: 250px;
822   margin-left: 10px;
823   text-align: center;
824 }
825
826 table.browse_details th {
827   white-space: nowrap;
828 }
829
830 td.browse_comments {
831   padding: 0px;
832 }
833
834 td.browse_comments table {
835   border-collapse: collapse;
836 }
837
838 td.browse_comments table td {
839   padding-bottom: 10px;
840 }
841
842 td.browse_comments table td span.by {
843   font-size: small;
844   color: #999999;
845 }
846
847 #browse_map {
848   float: right;
849   width: 250px;
850   text-align: right;
851   margin-left: 10px;
852 }
853
854 #browse_map #small_map {
855   width: 250px;
856   height: 300px;
857   border: solid 1px black;
858 }
859
860 #browse_map .geolink {
861   display: none;
862 }
863
864 /* Rules for the trace list shown by the traces tab etc */
865
866 #trace_list {
867   font-size: small;
868   border-collapse: collapse;
869   border-width: 0px;
870   text-align: right;
871 }
872
873 #trace_list .trace_summary {
874   font-size: 12px;
875   color: gray;
876 }
877
878 #trace_list .trace_pending {
879   color: red;
880 }
881
882 #trace_list .trace_public {
883   color: green;
884 }
885
886 #trace_list .trace_identifiable {
887   color: green;
888 }
889
890 #trace_list .trace_trackable {
891   color: red;
892 }
893
894 #trace_list .trace_private {
895   color: red;
896 }
897
898 /* Rules for the user list */
899
900 #user_list {
901   width: 100%;
902   font-size: small;
903 }
904
905 #user_list tr {
906   vertical-align: middle;
907 }
908
909 #user_list p {
910   margin-top: 0px;
911   margin-bottom: 0px;
912 }
913
914 #user_list_actions {
915   float: right;
916   margin-top: 10px;
917 }
918
919 /* Rules for the diary list */
920
921 .diary_entry-list img.user_image {
922   float: right;
923 }
924
925 .diary_entry-list img.user_thumbnail {
926   float: right;
927 }
928
929 /* Rules for the diary entry view */
930
931 .diary_entry-view img.user_image {
932   float: right;
933 }
934
935 .diary_entry-view img.user_thumbnail {
936   float: right;
937 }
938
939 /* Rules for the new diary entry page */
940
941 .diary_entry div#map {
942   position: relative;
943   width: 90%;
944   height: 400px;
945   border: 1px solid #ccc;
946   display: none;
947 }
948
949 /* Rules for the login page */
950
951 #login_wrapper div {
952   margin: 5px;
953   padding: 15px;
954   border-radius: 15px;
955   -moz-border-radius: 15px;
956 }
957
958 #login_login {
959   background-color: #f5f5ff;
960   border: 1px solid #f3f3ff;
961   border-radius: 15px;
962   -moz-border-radius: 15px;
963 }
964
965 #login_login h1 {
966   margin-top: 5px;
967 }
968
969 table#login_openid_buttons {
970   padding-bottom: 10px;
971 }
972
973 #login_openid_buttons td {
974   padding-left: 10px;
975   padding-right: 10px;
976   padding-top: 5px;
977   padding-bottom: 5px;
978 }
979
980 #login_openid_buttons img {
981   border: 0;
982 }
983
984 #login_signup form.button-to div {
985   margin: 0px;
986   padding: 0px;
987 }
988
989 /* Rules for the account confirmation page */
990
991 div#contributorTerms {
992   border: 1px solid black;
993   padding: 4px;
994   overflow: auto;
995   width: 95%;
996   height: 400px;
997 }
998
999 div#slim_content div#contributorTerms {
1000   width: auto;
1001 }
1002
1003 div#contributorTerms p#first {
1004   margin-top: 0px;
1005 }
1006
1007 div#contributorTerms p#last {
1008   margin-bottom: 0px;
1009 }
1010
1011 div#contributorTerms ol {
1012   margin-bottom: 0px;
1013 }
1014
1015 div#contributorTerms img {
1016   display: block;
1017   margin-left: auto;
1018   margin-right: auto;
1019   margin-top: 10%;
1020 }
1021
1022 form#termsForm {
1023   width: 95%;
1024   margin-bottom: 3em;
1025 }
1026
1027 form#termsForm div#buttons {
1028   float: right;
1029 }
1030
1031 form#termsForm input#agree {
1032   margin-left: 50px;
1033 }
1034
1035 div#slim_content form#termsForm {
1036   width: auto;
1037 }
1038
1039 p#contributorGuidance {
1040   background-color: #f5f5ff;
1041   border: 1px solid #f3f3ff;
1042   border-radius: 15px;
1043   -moz-border-radius: 15px;
1044   padding: 10px;
1045 }
1046
1047 /* Rules for the account settings page */
1048
1049 #accountForm {
1050   margin-top: 20px;
1051 }
1052
1053 #accountForm td {
1054   padding-bottom: 10px;
1055 }
1056
1057 #accountForm .user_map {
1058   position: relative;
1059   width: 500px;
1060   height: 400px;
1061   border: 1px solid #ccc;
1062 }
1063
1064 #accountForm td.accountImage {
1065   img {
1066     vertical-align: top;
1067     margin-top: 3px;
1068   }
1069
1070   table {
1071     display: inline-block;
1072
1073     td {
1074       padding-bottom: 0px;
1075     }
1076   }
1077 }
1078
1079 .nohome .location {
1080   display: none;
1081 }
1082
1083 #homerow .message {
1084   display: none;
1085 }
1086
1087 .nohome .message {
1088   display: inline !important;
1089 }
1090
1091 #accountForm input[type=submit] {
1092   margin-top: 15px;
1093 }
1094
1095 /* Rules for the user view */
1096
1097 .user-view img.user_image {
1098   float: right;
1099 }
1100
1101 .user-view .user_map {
1102   float: right;
1103   position: relative;
1104   width: 400px;
1105   height: 400px;
1106   border: 1px solid #ccc;
1107 }
1108
1109 .user-view .user_map p#no_home_location {
1110   position: absolute;
1111   top: 0px;
1112   bottom: 0px;
1113   width: 90%;
1114   height: 30%;
1115   margin: auto 5%
1116 }
1117
1118 /* Rules for the user map */
1119
1120 .user_map .leaflet-control-pan,
1121 .user_map .leaflet-control-zoomslider {
1122   display: none;
1123 }
1124
1125 .user_map .leaflet-control-zoom {
1126   display: block;
1127 }
1128
1129 /* Rules for user popups on maps */
1130
1131 .user_popup {
1132   min-width: 200px;
1133 }
1134
1135 .user_popup p {
1136   padding-top: 3px;
1137   padding-bottom: 3px;
1138   margin-top: 0px;
1139   margin-bottom: 0px;
1140   margin-left: 55px;
1141   margin-right: 2px;
1142 }
1143
1144 .user_popup img.user_thumbnail {
1145   float: left;
1146 }
1147
1148 /* Rules for message in/out box page */
1149
1150 .messages {
1151   width: 100%;
1152   border-collapse: collapse;
1153   border-spacing: 0px;
1154   border-width: 0px;
1155 }
1156
1157 .messages tbody tr {
1158   border-top: 1px solid #ccc;
1159 }
1160
1161 .messages .inbox-row {
1162   background: #eee;
1163 }
1164
1165 .messages tr td,
1166 .messages tr th {
1167   padding: 0px 5px;
1168 }
1169
1170 .inbox-row .inbox-mark-read {
1171   display: none;
1172 }
1173
1174 .info-line {
1175   border-bottom: 1px solid #ccc;
1176   padding: 5px 0px 4px 0px;
1177 }
1178
1179 .info-line form,
1180 .info-line form div {
1181   display: inline;
1182 }
1183
1184 .info-line .user_thumbnail_tiny {
1185   vertical-align: middle;
1186 }
1187
1188 .right {
1189   float: right;
1190 }
1191
1192 .inbox-row-unread .inbox-mark-unread {
1193   display: none;
1194 }
1195
1196 /* Rules for "flash" notice boxes shown at the top of the content area */
1197
1198 #error {
1199   border: 1px solid red;
1200   padding: 7px;
1201   background-color: #fff0f0;
1202   margin-bottom: 20px;
1203   border-radius: 5px;
1204   -moz-border-radius: 5px;
1205 }
1206
1207 #warning {
1208   border: 1px solid orange;
1209   padding: 7px;
1210   background-color: #fff6f0;
1211   margin-bottom: 20px;
1212   border-radius: 5px;
1213   -moz-border-radius: 5px;
1214 }
1215
1216 #notice {
1217   border: 1px solid green;
1218   padding: 7px;
1219   background-color: #f0fff0;
1220   margin-bottom: 20px;
1221   border-radius: 5px;
1222   -moz-border-radius: 5px;
1223 }
1224
1225 /* Rules for highlighting fields with rails validation errors */
1226
1227 .field_with_errors {
1228   padding: 2px;
1229   background-color: red;
1230   display: table;
1231 }
1232
1233 /* Rules for rails validation error boxes */
1234
1235 #errorExplanation {
1236   width: 400px;
1237   border: 2px solid red;
1238   padding: 7px;
1239   padding-bottom: 12px;
1240   margin-bottom: 20px;
1241   background-color: #f0f0f0;
1242 }
1243
1244 #errorExplanation h2 {
1245   font-weight: bold;
1246   font-size: 12px;
1247   padding: 5px 5px 5px 15px;
1248   margin: -7px;
1249   background-color: #c00;
1250   color: #fff;
1251   text-align: left;
1252 }
1253
1254 #errorExplanation p {
1255   color: #333;
1256   margin-bottom: 0px;
1257   padding: 5px;
1258 }
1259
1260 #errorExplanation ul li {
1261   font-size: 12px;
1262   list-style: square;
1263 }
1264
1265 /* Rules for forms */
1266
1267 .fieldName {
1268   vertical-align: top;
1269   font-weight: bold;
1270   font-size: 12px;
1271   line-height: 20px;
1272   text-align: right;
1273 }
1274
1275 .submitButton {
1276   text-align: right;
1277 }
1278
1279 .minorNote {
1280   font-size: 0.8em;
1281 }
1282
1283 input[type="text"],
1284 input[type="email"],
1285 input[type="url"],
1286 input[type="password"],
1287 textarea {
1288   border: 1px solid #ccc;
1289 }
1290
1291 input.openid_url {
1292   background: image-url('openid_input.png') repeat-y left white;
1293   padding-left: 16px;
1294 }
1295
1296 /* Rules for user images */
1297
1298 img.user_image {
1299   max-width: 100px;
1300   max-height: 100px;
1301   border: 1px solid #ccc;
1302 }
1303
1304 img.user_thumbnail {
1305   max-width: 50px;
1306   max-height: 100px;
1307   border: 1px solid #ccc;
1308 }
1309
1310 img.user_thumbnail_tiny {
1311   max-width: 25px;
1312   max-height: 25px;
1313   border: 1px solid #ccc;
1314 }
1315
1316 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1317
1318 .nowrap {
1319   white-space: nowrap;
1320 }
1321
1322 /* Rules for geo microformats */
1323
1324 abbr.geo {
1325   border-bottom: none;
1326 }
1327
1328 /* Rules for RSS buttons */
1329
1330 .rsssmall {
1331   position: relative;
1332   top: 4px;
1333 }
1334
1335 /* Rules for doing distinct colour of alternate table rows */
1336
1337 .table0 {
1338   background: #f6f6f6;
1339 }
1340
1341 .table1 {
1342   background: #fff;
1343 }
1344
1345 /* Rules for OpenID logo */
1346
1347 .openid_logo {
1348   vertical-align: text-bottom;
1349   border: 0;
1350 }
1351
1352 /* Rules for rich text editors */
1353
1354 .richtext_container {
1355   white-space: nowrap;
1356
1357   .richtext_content {
1358     display: inline-block;
1359     vertical-align: top;
1360
1361     .richtext_preview {
1362       display: inline-block;
1363       margin-top: 1px;
1364       margin-bottom: 1px;
1365       border: 4px solid #eee;
1366       background-color: #eee;
1367       white-space: normal;
1368
1369       &.loading {
1370         background-image: image-url("loading.gif");
1371         background-repeat: no-repeat;
1372         background-position: center;
1373       }
1374
1375       > :first-child {
1376         margin-top: 0px;
1377       }
1378     }
1379   }
1380
1381   .richtext_help {
1382     display: inline-block;
1383     vertical-align: top;
1384     background-color: #ddd;
1385     margin-left: 15px;
1386     padding: 5px 10px 10px 10px;
1387     font-size: 12px;
1388
1389     p {
1390       margin: 0px;
1391     }
1392
1393     th {
1394       vertical-align: top;
1395       text-align: left;
1396       padding: 0px 15px 0px 0px !important;
1397     }
1398
1399     td {
1400       text-align: left;
1401       font-family: fixed;
1402       line-height: 16px;
1403       padding: 0px !important;
1404     }
1405
1406     input.richtext_doedit {
1407       margin-top: 5px !important;
1408       margin-right: 10px !important;
1409     }
1410
1411     input.richtext_dopreview {
1412       margin-top: 5px !important;
1413       margin-left: 10px !important;
1414     }
1415   }
1416 }
1417
1418 /* Rules for the notes interface */
1419
1420 .note {
1421   width: 300px;
1422
1423   .buttons {
1424     margin-top: 5px;
1425     text-align: right;
1426   }
1427 }