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