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