Add hover style and hint to ordered list questions

www/form/app-form.less

@@ -506,17 +506,27 @@
             }
         }
     }
+    .cp-form-sort-hint {
+        margin-bottom: 10px;
+    }
     .cp-form-type-sort {
         cursor: grab;
-        padding: 2px;
+        padding: 5px;
         .cp-form-handle {
             margin-right: 5px;
         }
         .cp-form-sort-order {
-            border: 1px solid @cp_profile-hint;
+            border: 1px solid @cryptpad_text_col;
             padding: 0 5px;
             margin-right: 5px;
         }
+        &:hover {
+            background-color: @cp_app-bg;
+            color: @cryptpad_color_link;
+            .cp-form-sort-order {
+                border-color: @cryptpad_color_link;
+            }
+        }
     }
 
     .cp-form-type-poll-container {

www/form/inner.js

@@ -106,6 +106,7 @@ define([
     Messages.form_type_multicheck = "Multiline Checkbox"; // XXX
     Messages.form_type_poll = "Poll"; // XXX
     Messages.form_type_sort = "Ordered list"; // XXX
+    Messages.form_sort_hint = "Please sort these items from most (1) to least (n) preferred.";
 
     Messages.form_type_md = "Description"; // XXX
     Messages.form_type_page = "Page break"; // XXX
@@ -1491,7 +1492,7 @@ define([
                     $(div).data('val', data);
                     return div;
                 });
-                var tag = h('div.cp-form-type-sort-container', els);
+                var tag = h('div.cp-form-type-sort-container', [h('div.cp-form-sort-hint', Messages.form_sort_hint), els]);
                 var $tag = $(tag);
                 var reorder = function () {
                     $tag.find('.cp-form-type-sort').each(function (i, el) {