]> git.openstreetmap.org Git - rails.git/blob - app/assets/stylesheets/common.css.scss
Fall back to the mapnik layer
[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   top: 0;
336   left: 185px;
337   right: 0;
338   height: 29px;
339   border-bottom: 1px solid #ccc;
340   background: white;
341 }
342
343 #tabnav {
344   padding: 0;
345   margin: 0;
346   overflow:hidden;
347 }
348
349 #tabnav li {
350   margin: 0px;
351   padding: 0px;
352   display: inline;
353   list-style-type: none;
354 }
355
356 #tabnav a, #tabnav a:link, #tabnav a:visited {
357   float: left;
358   background: #fff;
359   font-size: 14px;
360   line-height: 19px;
361   font-weight: bold;
362   padding: 5px 10px;
363   margin-right: 1px;
364   text-decoration: none;
365   color: #333;
366   -webkit-transition: color 200ms ease-in;
367   -moz-transition: color 200ms ease-in;
368   -o-transition: color 200ms ease-in;
369   transition: color 200ms ease-in;
370 }
371
372 body.site-index #tabnav a#viewanchor,
373 body.site-edit #tabnav a#editanchor,
374 body.changeset-list #tabnav a#historyanchor,
375 body.site-export #tabnav a#exportanchor {
376   border-bottom: 1px solid #aaa;
377   background: #9ed485;
378   color: #000;
379 }
380
381 #tabnav a:link:hover, #tabnav a:visited:hover {
382   text-decoration:underline;
383 }
384
385 #tabnav a:link.disabled,
386 #tabnav a:visited.disabled,
387 #tabnav a:link:hover.disabled,
388 #tabnav a:visited:hover.disabled {
389   color: #ccc;
390   cursor: default;
391 }
392
393 #tabnav a:link.disabled:hover,
394 #tabnav a:visited.disabled:hover,
395 #tabnav a:link:hover.disabled:hover,
396 #tabnav a:visited:hover.disabled:hover {
397   text-decoration: none;
398 }
399
400 .count-number {
401   padding: 2px 5px;
402   border-radius: 3px;
403   background: #eee;
404   margin: 0 2px;
405   font-size: 11px;
406   color: #333;
407 }
408
409 /* Rules for greeting bar in the top right corner */
410
411 #greeting {
412   float: right;
413   height: 28px;
414   margin: 0px;
415   padding-right: 10px;
416   font-size: 13px;
417   line-height: 28px;
418 }
419
420 .greeting-bar-unread {
421   font-weight: bold;
422 }
423
424 /* Rules for the message shown in place of the map when javascript is disabled */
425
426 #noscript {
427   z-index: 20000000;
428   position: absolute;
429   top: 15px;
430   left: 15px;
431 }
432
433 /* Rules for Leaflet maps */
434
435 #map {
436   margin: 0px;
437   border: 0px;
438   padding: 0px;
439 }
440
441 #permalink {
442   z-index: 10000;
443   position: absolute;
444   bottom: 0px;
445   right: 0px;
446   padding: 5px;
447   background:#fff;
448   text-align: right;
449   font-size: 12px;
450 }
451
452 #permalink a {
453   padding: 5px;
454 }
455
456 .site-index .leaflet-top,
457 .site-export .leaflet-top {
458   top: 10px !important;
459
460   .leaflet-control {
461     margin-top: 0px !important;
462   }
463 }
464
465 .site-index #map .olControlScaleLine,
466 .site-export #map .olControlScaleLine {
467   left: 10px !important;
468 }
469
470 /* Rules for edit menu */
471
472 .menuicon {
473   padding: 5px;
474
475   &:hover {
476     background: #eee;
477     text-decoration: none !important;
478   }
479 }
480
481 .menu {
482   display: none;
483   z-index: 10000;
484   position: absolute;
485   background-color: #ffffff;
486   border: 1px solid #cccccc;
487   border-top: 0px;
488 }
489
490 .menu ul {
491   margin: 0px;
492   padding: 0px;
493 }
494
495 .menu li {
496   padding: 2px 5px;
497   margin: 0px;
498   list-style-type: none;
499   border-top: 1px solid #eee;
500   white-space: nowrap;
501 }
502
503 /* Rules for attribution text under the main map shown on printouts */
504
505 #attribution {
506   display: none;
507 }
508
509 .attribution_license {
510   text-align: left;
511 }
512
513 .attribution_notice {
514   text-align: center;
515 }
516
517 .attribution_project {
518   text-align: right;
519 }
520
521 /* Rules for the popout map sidebar */
522
523 #sidebar {
524   display: none;
525   position: absolute;
526   margin: 30px 0px 0px 0px;
527   padding: 0px;
528   border-right: 1px solid #ccc;
529   width: 30%;
530   top: 0px;
531   bottom: 0px;
532   left: 0px;
533 }
534
535 #sidebar #sidebar_content {
536   overflow: auto;
537   position: absolute;
538   font-size: 13px;
539   line-height: 15px;
540   top: 29px;
541   bottom: 0px;
542   left: 0px;
543   right: 0px;
544 }
545
546 #sidebar .sidebar_title {
547   margin: 0px;
548   padding: 3px 6px 4px 6px;
549   height: 29px;
550   font-size: 14px;
551   line-height: 15px;
552   background: #ccc;
553 }
554
555 #sidebar #sidebar_title {
556   text-align: left;
557 }
558
559 #sidebar #sidebar_close {
560   text-align: right;
561 }
562
563 /* Rules for the map key which appears in the popout sidebar */
564
565 #mapkey h3 {
566   font-size: 110%;
567   font-weight: normal;
568   text-align: center;
569 }
570
571 #mapkey .mapkey-table {
572   padding-left: 5px;
573   padding-right: 5px;
574 }
575
576 #mapkey .mapkey-table-key img {
577   display: block;
578   margin-left: auto;
579   margin-right: auto;
580 }
581
582 #mapkey .mapkey-table-value {
583   font-size: 90%;
584 }
585
586 /* Rules for search results which appear in the popout sidebar */
587
588 .search_searching {
589   margin-top: 5px;
590   margin-bottom: 5px;
591 }
592
593 .search_results_heading {
594   margin: 0px;
595   padding: 2px 5px;
596   border-bottom: 1px solid #ccc;
597   font-weight: bold;
598 }
599
600 .search_results_entry {
601   margin: 0px;
602   padding: 2px 5px;
603 }
604
605 .search_results_error {
606   margin: 0px;
607   padding: 2px 6px 0px;
608   color: #f00;
609 }
610
611 /* Rules for data browser information which appears in the popout sidebar */
612
613 .browse_heading {
614   margin: 0px;
615   padding: 3px 6px;
616   border: 1px solid #ccc;
617   background: #ddd;
618 }
619
620 .browse_details {
621   margin: 0px;
622   padding: 0px 6px;
623 }
624
625 /* Rules for export information which appears in the popout sidebar */
626
627 .export_heading {
628   margin: 0px;
629   padding: 2px 5px;
630   border-bottom: 1px solid #ccc;
631   font-weight: bold;
632 }
633
634 .export_bounds {
635   width: 100%;
636   text-align: center;
637 }
638
639 .export_bound {
640   margin: 5px;
641 }
642
643 .export_details {
644   padding: 2px 6px;
645 }
646
647 #export_osm {
648   display: none;
649 }
650
651 #export_mapnik {
652   display: none;
653 }
654
655 #export_osmarender {
656   display: none;
657 }
658
659 .export_hint {
660   padding: 0px 12px;
661   font-style: italic;
662 }
663
664 .export_buttons {
665   width: 100%;
666   text-align: center;
667 }
668
669 /* Rules for the main content area */
670
671 #content {
672   padding: 20px;
673   margin: 30px 0px 0px 185px;
674   border-left: 1px solid #ccc;
675   text-align: left;
676 }
677
678 .site-edit #content,
679 .site-index #content,
680 .site-export #content {
681   position: fixed;
682   left: 0px;
683   right: 0px;
684   top: 0px;
685   bottom: 0px;
686   padding: 0px;
687 }
688
689 #slim_container {
690   width: 100%;
691 }
692
693 #slim_container_content {
694   max-width: 50em;
695   background-color: #FFFFFF;
696   margin: 10px auto;
697   padding: 3px;
698   border-radius: 25px;
699   -moz-border-radius: 25px;
700   border: 1px solid #e6e6e6;
701 }
702
703 #slim_content {
704   margin: 10px;
705   margin-top: 90px;
706   max-width: 50em;
707 }
708
709 #slim_header {
710   margin: 10px;
711   position: absolute;
712   top: 0px;
713 }
714
715 #slim_header img {
716   vertical-align: middle;
717   margin-bottom: 5px;
718   margin-right: 5px;
719 }
720
721 /* Rules for text content pages */
722
723 .wide-table {
724   width: 100%;
725 }
726
727 /* Rules for the home page */
728
729 .site-index #map {
730   position: absolute;
731   top: 0px;
732   bottom: 0px;
733   left: 0px;
734   right: 0px;
735 }
736
737 .site-export #map {
738   position: absolute;
739   top: 0px;
740   bottom: 0px;
741   left: 0px;
742   right: 0px;
743 }
744
745 /* Rules for the edit page */
746
747 .site-edit #map {
748   position: absolute;
749   top: 0px;
750   bottom: 0px;
751   left: 0px;
752   right: 0px;
753   overflow: hidden;
754 }
755
756 /* Rules for the changeset list shown by the history tab etc */
757
758 #changeset_list_container {
759   position: relative;
760 }
761
762 #changeset_list {
763   width: 50%;
764   font-size: small;
765   border-collapse: collapse;
766   border-width: 0px;
767   margin-top: 1px;
768   margin-bottom: 1px;
769   text-align: left;
770 }
771
772 #changeset_list td {
773   vertical-align: top;
774   padding: 3px;
775 }
776
777 #changeset_list .date {
778   white-space: nowrap;
779 }
780
781 #changeset_list .user {
782   white-space: nowrap;
783 }
784
785 #changeset_list .area {
786   white-space: nowrap;
787 }
788
789 #changeset_list .selected {
790   background-color: rgb(255, 255, 160);
791   background-color: rgba(255, 255, 85, 0.5);
792 }
793
794 #changeset_list_map {
795   position: absolute;
796   float: right;
797   top: 0px;
798   bottom: 0px;
799   right: 0px;
800   width: 49%;
801   min-height: 400px;
802   border: solid 1px black;
803 }
804
805 /* Rules for the data browser */
806
807 #browse_navigation {
808   float: right;
809   width: 250px;
810   margin-left: 10px;
811   text-align: center;
812 }
813
814 table.browse_details th {
815   white-space: nowrap;
816 }
817
818 #browse_map {
819   float: right;
820   width: 250px;
821   text-align: right;
822   margin-left: 10px;
823 }
824
825 #browse_map #small_map {
826   width: 250px;
827   height: 300px;
828   border: solid 1px black;
829 }
830
831 #browse_map .geolink {
832   display: none;
833 }
834
835 /* Rules for the trace list shown by the traces tab etc */
836
837 #trace_list {
838   font-size: small;
839   border-collapse: collapse;
840   border-width: 0px;
841   text-align: right;
842 }
843
844 #trace_list .trace_summary {
845   font-size: 12px;
846   color: gray;
847 }
848
849 #trace_list .trace_pending {
850   color: red;
851 }
852
853 #trace_list .trace_public {
854   color: green;
855 }
856
857 #trace_list .trace_identifiable {
858   color: green;
859 }
860
861 #trace_list .trace_trackable {
862   color: red;
863 }
864
865 #trace_list .trace_private {
866   color: red;
867 }
868
869 /* Rules for the user list */
870
871 #user_list {
872   width: 100%;
873   font-size: small;
874 }
875
876 #user_list tr {
877   vertical-align: middle;
878 }
879
880 #user_list p {
881   margin-top: 0px;
882   margin-bottom: 0px;
883 }
884
885 #user_list_actions {
886   float: right;
887   margin-top: 10px;
888 }
889
890 /* Rules for the diary list */
891
892 .diary_entry-list img.user_image {
893   float: right;
894 }
895
896 .diary_entry-list img.user_thumbnail {
897   float: right;
898 }
899
900 /* Rules for the diary entry view */
901
902 .diary_entry-view img.user_image {
903   float: right;
904 }
905
906 .diary_entry-view img.user_thumbnail {
907   float: right;
908 }
909
910 /* Rules for the new diary entry page */
911
912 .diary_entry div#map {
913   position: relative;
914   width: 90%;
915   height: 400px;
916   border: 1px solid #ccc;
917   display: none;
918 }
919
920 /* Rules for the login page */
921
922 #login_wrapper div {
923   margin: 5px;
924   padding: 15px;
925   border-radius: 15px;
926   -moz-border-radius: 15px;
927 }
928
929 #login_login {
930   background-color: #f5f5ff;
931   border: 1px solid #f3f3ff;
932   border-radius: 15px;
933   -moz-border-radius: 15px;
934 }
935
936 #login_login h1 {
937   margin-top: 5px;
938 }
939
940 table#login_openid_buttons {
941   padding-bottom: 10px;
942 }
943
944 #login_openid_buttons td {
945   padding-left: 10px;
946   padding-right: 10px;
947   padding-top: 5px;
948   padding-bottom: 5px;
949 }
950
951 #login_openid_buttons img {
952   border: 0;
953 }
954
955 #login_signup form.button-to div {
956   margin: 0px;
957   padding: 0px;
958 }
959
960 /* Rules for the account confirmation page */
961
962 div#contributorTerms {
963   border: 1px solid black;
964   padding: 4px;
965   overflow: auto;
966   width: 95%;
967   height: 400px;
968 }
969
970 div#slim_content div#contributorTerms {
971   width: auto;
972 }
973
974 div#contributorTerms p#first {
975   margin-top: 0px;
976 }
977
978 div#contributorTerms p#last {
979   margin-bottom: 0px;
980 }
981
982 div#contributorTerms ol {
983   margin-bottom: 0px;
984 }
985
986 div#contributorTerms img {
987   display: block;
988   margin-left: auto;
989   margin-right: auto;
990   margin-top: 10%;
991 }
992
993 form#termsForm {
994   width: 95%;
995   margin-bottom: 3em;
996 }
997
998 form#termsForm div#buttons {
999   float: right;
1000 }
1001
1002 form#termsForm input#agree {
1003   margin-left: 50px;
1004 }
1005
1006 div#slim_content form#termsForm {
1007   width: auto;
1008 }
1009
1010 p#contributorGuidance {
1011   background-color: #f5f5ff;
1012   border: 1px solid #f3f3ff;
1013   border-radius: 15px;
1014   -moz-border-radius: 15px;
1015   padding: 10px;
1016 }
1017
1018 /* Rules for the account settings page */
1019
1020 #accountForm {
1021   margin-top: 20px;
1022 }
1023
1024 #accountForm td {
1025   padding-bottom: 10px;
1026 }
1027
1028 #accountForm .user_map {
1029   position: relative;
1030   width: 500px;
1031   height: 400px;
1032   border: 1px solid #ccc;
1033 }
1034
1035 #accountForm td.accountImage {
1036   img {
1037     vertical-align: top;
1038     margin-top: 3px;
1039   }
1040
1041   table {
1042     display: inline-block;
1043
1044     td {
1045       padding-bottom: 0px;
1046     }
1047   }
1048 }
1049
1050 .nohome .location {
1051   display: none;
1052 }
1053
1054 #homerow .message {
1055   display: none;
1056 }
1057
1058 .nohome .message {
1059   display: inline !important;
1060 }
1061
1062 #accountForm input[type=submit] {
1063   margin-top: 15px;
1064 }
1065
1066 /* Rules for the user view */
1067
1068 .user-view img.user_image {
1069   float: right;
1070 }
1071
1072 .user-view .user_map {
1073   float: right;
1074   position: relative;
1075   width: 400px;
1076   height: 400px;
1077   border: 1px solid #ccc;
1078 }
1079
1080 .user-view .user_map p#no_home_location {
1081   position: absolute;
1082   top: 0px;
1083   bottom: 0px;
1084   width: 90%;
1085   height: 30%;
1086   margin: auto 5%
1087 }
1088
1089 /* Rules for the user map */
1090
1091 .user_map .leaflet-control-pan,
1092 .user_map .leaflet-control-zoomslider {
1093   display: none;
1094 }
1095
1096 .user_map .leaflet-control-zoom {
1097   display: block;
1098 }
1099
1100 /* Rules for user popups on maps */
1101
1102 .user_popup {
1103   min-width: 200px;
1104 }
1105
1106 .user_popup p {
1107   padding-top: 3px;
1108   padding-bottom: 3px;
1109   margin-top: 0px;
1110   margin-bottom: 0px;
1111   margin-left: 55px;
1112   margin-right: 2px;
1113 }
1114
1115 .user_popup img.user_thumbnail {
1116   float: left;
1117 }
1118
1119 /* Rules for message in/out box page */
1120
1121 .messages {
1122   width: 100%;
1123   border-collapse: collapse;
1124   border-spacing: 0px;
1125   border-width: 0px;
1126 }
1127
1128 .messages tbody tr {
1129   border-top: 1px solid #ccc;
1130 }
1131
1132 .messages .inbox-row {
1133   background: #eee;
1134 }
1135
1136 .messages tr td,
1137 .messages tr th {
1138   padding: 0px 5px;
1139 }
1140
1141 .inbox-row .inbox-mark-read {
1142   display: none;
1143 }
1144
1145 .info-line {
1146   border-bottom: 1px solid #ccc;
1147   padding: 5px 0px 4px 0px;
1148 }
1149
1150 .info-line form,
1151 .info-line form div {
1152   display: inline;
1153 }
1154
1155 .info-line .user_thumbnail_tiny {
1156   vertical-align: middle;
1157 }
1158
1159 .right {
1160   float: right;
1161 }
1162
1163 .inbox-row-unread .inbox-mark-unread {
1164   display: none;
1165 }
1166
1167 /* Rules for "flash" notice boxes shown at the top of the content area */
1168
1169 #error {
1170   border: 1px solid red;
1171   padding: 7px;
1172   background-color: #fff0f0;
1173   margin-bottom: 20px;
1174   border-radius: 5px;
1175   -moz-border-radius: 5px;
1176 }
1177
1178 #warning {
1179   border: 1px solid orange;
1180   padding: 7px;
1181   background-color: #fff6f0;
1182   margin-bottom: 20px;
1183   border-radius: 5px;
1184   -moz-border-radius: 5px;
1185 }
1186
1187 #notice {
1188   border: 1px solid green;
1189   padding: 7px;
1190   background-color: #f0fff0;
1191   margin-bottom: 20px;
1192   border-radius: 5px;
1193   -moz-border-radius: 5px;
1194 }
1195
1196 /* Rules for highlighting fields with rails validation errors */
1197
1198 .field_with_errors {
1199   padding: 2px;
1200   background-color: red;
1201   display: table;
1202 }
1203
1204 /* Rules for rails validation error boxes */
1205
1206 #errorExplanation {
1207   width: 400px;
1208   border: 2px solid red;
1209   padding: 7px;
1210   padding-bottom: 12px;
1211   margin-bottom: 20px;
1212   background-color: #f0f0f0;
1213 }
1214
1215 #errorExplanation h2 {
1216   font-weight: bold;
1217   font-size: 12px;
1218   padding: 5px 5px 5px 15px;
1219   margin: -7px;
1220   background-color: #c00;
1221   color: #fff;
1222   text-align: left;
1223 }
1224
1225 #errorExplanation p {
1226   color: #333;
1227   margin-bottom: 0px;
1228   padding: 5px;
1229 }
1230
1231 #errorExplanation ul li {
1232   font-size: 12px;
1233   list-style: square;
1234 }
1235
1236 /* Rules for forms */
1237
1238 .fieldName {
1239   vertical-align: top;
1240   font-weight: bold;
1241   font-size: 12px;
1242   line-height: 20px;
1243   text-align: right;
1244 }
1245
1246 .submitButton {
1247   text-align: right;
1248 }
1249
1250 .minorNote {
1251   font-size: 0.8em;
1252 }
1253
1254 input[type="text"],
1255 input[type="email"],
1256 input[type="url"],
1257 input[type="password"],
1258 textarea {
1259   border: 1px solid #ccc;
1260 }
1261
1262 input.openid_url {
1263   background: image-url('openid_input.png') repeat-y left white;
1264   padding-left: 16px;
1265 }
1266
1267 /* Rules for user images */
1268
1269 img.user_image {
1270   max-width: 100px;
1271   max-height: 100px;
1272   border: 1px solid #ccc;
1273 }
1274
1275 img.user_thumbnail {
1276   max-width: 50px;
1277   max-height: 100px;
1278   border: 1px solid #ccc;
1279 }
1280
1281 img.user_thumbnail_tiny {
1282   max-width: 25px;
1283   max-height: 25px;
1284   border: 1px solid #ccc;
1285 }
1286
1287 /* Rule for "nowrap" class that can be applied to anything to stop wrapping */
1288
1289 .nowrap {
1290   white-space: nowrap;
1291 }
1292
1293 /* Rules for geo microformats */
1294
1295 abbr.geo {
1296   border-bottom: none;
1297 }
1298
1299 /* Rules for RSS buttons */
1300
1301 .rsssmall {
1302   position: relative;
1303   top: 4px;
1304 }
1305
1306 /* Rules for doing distinct colour of alternate table rows */
1307
1308 .table0 {
1309   background: #f6f6f6;
1310 }
1311
1312 .table1 {
1313   background: #fff;
1314 }
1315
1316 /* Rules for OpenID logo */
1317
1318 .openid_logo {
1319   vertical-align: text-bottom;
1320   border: 0;
1321 }
1322
1323 /* Rules for rich text editors */
1324
1325 .richtext_container {
1326   white-space: nowrap;
1327
1328   .richtext_content {
1329     display: inline-block;
1330     vertical-align: top;
1331
1332     .richtext_preview {
1333       display: inline-block;
1334       margin-top: 1px;
1335       margin-bottom: 1px;
1336       border: 4px solid #eee;
1337       background-color: #eee;
1338       white-space: normal;
1339
1340       &.loading {
1341         background-image: image-url("loading.gif");
1342         background-repeat: no-repeat;
1343         background-position: center;
1344       }
1345
1346       > :first-child {
1347         margin-top: 0px;
1348       }
1349     }
1350   }
1351
1352   .richtext_help {
1353     display: inline-block;
1354     vertical-align: top;
1355     background-color: #ddd;
1356     margin-left: 15px;
1357     padding: 5px 10px 10px 10px;
1358     font-size: 12px;
1359
1360     p {
1361       margin: 0px;
1362     }
1363
1364     th {
1365       vertical-align: top;
1366       text-align: left;
1367       padding: 0px 15px 0px 0px !important;
1368     }
1369
1370     td {
1371       text-align: left;
1372       font-family: fixed;
1373       line-height: 16px;
1374       padding: 0px !important;
1375     }
1376
1377     input.richtext_doedit {
1378       margin-top: 5px !important;
1379       margin-right: 10px !important;
1380     }
1381
1382     input.richtext_dopreview {
1383       margin-top: 5px !important;
1384       margin-left: 10px !important;
1385     }
1386   }
1387 }