Bug 1381752 - Re-organize the layout

10 files changed, 1445 insertions, 183 deletions

diff --git a/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl
index 2ffee3bd7..814464f27 100644
--- a/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/common_header.html.tmpl
@@ -49,7 +49,7 @@
     "contextMenu",
     "visibility"
   );
-  style_urls.push(
+  style_urls.unshift(
     "extensions/BugModal/web/common_bug_modal.css",
     "extensions/BugModal/web/dropdown.css",
     "skins/custom/bug_groups.css",
@@ -76,4 +76,4 @@
   };
 [% END %]
 
-[% Hook.process("end") %]
\ No newline at end of file
+[% Hook.process("end") %]
diff --git a/extensions/BugModal/template/en/default/bug_modal/common_new_comment.html.tmpl b/extensions/BugModal/template/en/default/bug_modal/common_new_comment.html.tmpl
index 2ba3948d1..184310277 100644
--- a/extensions/BugModal/template/en/default/bug_modal/common_new_comment.html.tmpl
+++ b/extensions/BugModal/template/en/default/bug_modal/common_new_comment.html.tmpl
@@ -39,17 +39,19 @@
       Preview
       <img id="preview-throbber" src="extensions/BugModal/web/throbber.gif" width="16" height="11" style="display:none">
     </li>
+    <!-- <li id="comment-guide-tab" role="tab" tabindex="-2" aria-controls="comment-guide-tabpanel" aria-selected="false">
+      <a href="page.cgi?id=etiquette.html" target="_blank" tabindex="-1">
+      Comments Subject to Etiquette and Contributor Guidelines</a>
+    </li> -->
   </ul>
+<!--   <div id="bugzilla-etiquette">
+    
+  </div> -->
 
   <div id="comment-edit-tabpanel" class="comment-tabpanel" role="tabpanel" aria-labelledby="comment-edit-tab">
-    <textarea rows="5" cols="80" name="comment" id="comment" aria-labelledby="comment-edit-tab"></textarea>
+    <textarea rows="5" [%+ UNLESS disable_cols %] cols="80" [% END +%] name="comment" id="comment" aria-labelledby="comment-edit-tab"></textarea>
   </div>
   <div id="comment-preview-tabpanel" class="comment-tabpanel" role="tabpanel" aria-labelledby="comment-preview-tab" style="display:none">
     <pre id="comment-preview" class="comment-text"></pre>
   </div>
-
-  <div id="bugzilla-etiquette">
-    <a href="page.cgi?id=etiquette.html" target="_blank" tabindex="-1">
-      Comments Subject to Etiquette and Contributor Guidelines</a>
-  </div>
 </div>
diff --git a/extensions/BugModal/web/common_bug_modal.css b/extensions/BugModal/web/common_bug_modal.css
index 36b84e380..7eeefd6ff 100644
--- a/extensions/BugModal/web/common_bug_modal.css
+++ b/extensions/BugModal/web/common_bug_modal.css
@@ -692,7 +692,7 @@ body.platform-Win32 .comment-text, body.platform-Win64 .comment-text {
 /* add comment */
 
 #add-comment {
-    margin-top: 20px;
+    margin-top: 10px;
 }
 
 #add-comment-private,
diff --git a/extensions/BugModal/web/common_bug_modal.js b/extensions/BugModal/web/common_bug_modal.js
index b275c3a29..a06b391d9 100644
--- a/extensions/BugModal/web/common_bug_modal.js
+++ b/extensions/BugModal/web/common_bug_modal.js
@@ -871,9 +871,6 @@ $(function() {
             $.scrollTo($('#comment'), function() { $('#comment').focus(); });
         });
 
-    // auto-enlarge comment area (up to its max-height)
-    autosize($('#comment'));
-
     // add comment --> private
     $('#add-comment-private-cb')
         .click(function(event) {
diff --git a/extensions/BugModal/web/new_bug.css b/extensions/BugModal/web/new_bug.css
index 45c3abcea..a96083d81 100644
--- a/extensions/BugModal/web/new_bug.css
+++ b/extensions/BugModal/web/new_bug.css
@@ -1,7 +1,46 @@
-#bugzilla-etiquette {
-    float: left;
+#bugzilla-body {
+    max-width: initial;
+    min-width: initial;
+    width: initial;
 }
+
 #create-btn {
-	margin: 0 0 5px 0;
-	float: right;
+    margin: 5px 0 5px 0;
+    float: right;
+    padding: 8px;
+}
+
+.new-bug-container {
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    padding:5px;
+}
+
+.new-bug {
+    display: flex;
+    display: -webkit-flex;
+    flex-flow: row wrap;
+    padding:5px;
+}
+
+.new-bug-split-1 {
+    flex: 2 1 30px;
+    margin:5px;
+}
+.new-bug-split-2 {
+    flex: 4 1 30px;
+    margin:5px;
+}
+.new-bug-pad {
+    flex: 1 1 30px;
+    margin:5px;
+}
+
+.new-bug-title {
+    flex: 6 1 30px;
+    margin:5px;
+}
+input, label {
+    display: block; !important
 }
diff --git a/extensions/BugModal/web/new_bug.js b/extensions/BugModal/web/new_bug.js
index d00770e3a..9da5abce9 100644
--- a/extensions/BugModal/web/new_bug.js
+++ b/extensions/BugModal/web/new_bug.js
@@ -16,6 +16,7 @@ $(document).ready(function() {
     var product_sel = $("#product").selectize({
         valueField: 'name',
         labelField: 'name',
+        placeholder: 'Product',
         searchField: 'name',
         options: [],
         preload: true,
@@ -27,6 +28,7 @@ $(document).ready(function() {
     var component_sel = $("#component").selectize({
         valueField: 'name',
         labelField: 'name',
+        placeholder: 'Component',
         searchField: 'name',
         options: [],
     });
@@ -34,6 +36,7 @@ $(document).ready(function() {
     var version_sel = $("#version").selectize({
         valueField: 'name',
         labelField: 'name',
+        placeholder: 'Version',
         searchField: 'name',
         options: [],
     });
@@ -42,6 +45,7 @@ $(document).ready(function() {
         delimiter: ', ',
         valueField: 'name',
         labelField: 'name',
+        placeholder: 'Keywords',
         searchField: 'name',
         options: [],
         preload: true,
@@ -93,9 +97,13 @@ $(document).ready(function() {
     $('.create-btn')
         .click(function(event) {
             event.preventDefault();
-            if (document.newbugform.checkValidity && !document.newbugform.checkValidity())
+            if (document.newbugform.checkValidity && !document.newbugform.checkValidity()) {
+                alert("Required fields are empty");
                 return;
-            this.form.submit()
+            }
+            else {
+                this.form.submit()
+            }
         });
     
 });
diff --git a/js/jquery/plugins/selectize/selectize.bootstrap2.css b/js/jquery/plugins/selectize/selectize.bootstrap2.css
new file mode 100644
index 000000000..419862fb2
--- /dev/null
+++ b/js/jquery/plugins/selectize/selectize.bootstrap2.css
@@ -0,0 +1,494 @@
+/**
+ * selectize.bootstrap2.css (v0.12.4) - Bootstrap 2 Theme
+ * Copyright (c) 2013–2015 Brian Reavis & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Brian Reavis <brian@thirdroute.com>
+ */
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
+  box-shadow: inset 0 0 12px 4px #ffffff;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.selectize-dropdown-header {
+  position: relative;
+  padding: 3px 10px;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.selectize-dropdown-header-close {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  color: #333333;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important;
+}
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  border-right: 1px solid #f2f2f2;
+  border-top: 0 none;
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+.selectize-control.plugin-remove_button [data-value] .remove {
+  z-index: 1;
+  /* fixes ie bug (see #392) */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 17px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 1px 0 0 0;
+  border-left: 1px solid #cccccc;
+  -webkit-border-radius: 0 2px 2px 0;
+  -moz-border-radius: 0 2px 2px 0;
+  border-radius: 0 2px 2px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: #0077b3;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: #e0e0e0;
+}
+.selectize-control.plugin-remove_button .remove-single {
+  position: absolute;
+  right: 28px;
+  top: 6px;
+  font-size: 23px;
+}
+.selectize-control {
+  position: relative;
+}
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  color: #333333;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 20px;
+  -webkit-font-smoothing: inherit;
+}
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  background: #ffffff;
+  cursor: text;
+  display: inline-block;
+}
+.selectize-input {
+  border: 1px solid #d0d0d0;
+  padding: 7px 10px;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding: 5px 10px 2px;
+}
+.selectize-input.full {
+  background-color: #ffffff;
+}
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+.selectize-input.focus {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.selectize-input > * {
+  vertical-align: baseline;
+  display: -moz-inline-stack;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.selectize-control.multi .selectize-input > div {
+  cursor: pointer;
+  margin: 0 3px 3px 0;
+  padding: 1px 3px;
+  background: #e6e6e6;
+  color: #333333;
+  border: 1px solid #cccccc;
+}
+.selectize-control.multi .selectize-input > div.active {
+  background: #0088cc;
+  color: #ffffff;
+  border: 1px solid #0077b3;
+}
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #474747;
+  background: #fafafa;
+  border: 1px solid #e0e0e0;
+}
+.selectize-input > input {
+  display: inline-block !important;
+  padding: 0 !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+  text-indent: 0 !important;
+  border: 0 none !important;
+  background: none !important;
+  line-height: inherit !important;
+  -webkit-user-select: auto !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+.selectize-input > input::-ms-clear {
+  display: none;
+}
+.selectize-input > input:focus {
+  outline: none !important;
+}
+.selectize-input::after {
+  content: ' ';
+  display: block;
+  clear: left;
+}
+.selectize-input.dropdown-active::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  background: #e5e5e5;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  border: 1px solid #cccccc;
+  background: #ffffff;
+  margin: -1px 0 0 0;
+  border-top: 0 none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+.selectize-dropdown [data-selectable] {
+  cursor: pointer;
+  overflow: hidden;
+}
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(255, 237, 40, 0.4);
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+.selectize-dropdown [data-selectable],
+.selectize-dropdown .optgroup-header {
+  padding: 3px 10px;
+}
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-dropdown .optgroup-header {
+  color: #999999;
+  background: #ffffff;
+  cursor: default;
+}
+.selectize-dropdown .active {
+  background-color: #0088cc;
+  color: #ffffff;
+}
+.selectize-dropdown .active.create {
+  color: #ffffff;
+}
+.selectize-dropdown .create {
+  color: rgba(51, 51, 51, 0.5);
+}
+.selectize-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+  -webkit-overflow-scrolling: touch;
+}
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+.selectize-control.single .selectize-input:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #000000 transparent transparent transparent;
+}
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #000000 transparent;
+}
+.selectize-control.rtl.single .selectize-input:after {
+  left: 15px;
+  right: auto;
+}
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+.selectize-control .selectize-input.disabled {
+  opacity: 0.5;
+  background-color: #ffffff;
+}
+.selectize-dropdown {
+  margin: 2px 0 0 0;
+  z-index: 1000;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+}
+.selectize-dropdown .optgroup-header {
+  font-size: 11px;
+  font-weight: bold;
+  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
+  text-transform: uppercase;
+}
+.selectize-dropdown .optgroup:first-child:before {
+  display: none;
+}
+.selectize-dropdown .optgroup:before {
+  content: ' ';
+  display: block;
+  *width: 100%;
+  height: 1px;
+  margin: 9px 1px;
+  *margin: -5px 0 5px;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  border-bottom: 1px solid #ffffff;
+  margin-left: -10px;
+  margin-right: -10px;
+}
+.selectize-dropdown [data-selectable].active {
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+}
+.selectize-dropdown-content {
+  padding: 5px 0;
+}
+.selectize-dropdown-header {
+  padding: 6px 10px;
+}
+.selectize-input {
+  -webkit-transition: border linear .2s, box-shadow linear .2s;
+  -moz-transition: border linear .2s, box-shadow linear .2s;
+  -o-transition: border linear .2s, box-shadow linear .2s;
+  transition: border linear .2s, box-shadow linear .2s;
+}
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.selectize-input.dropdown-active::before {
+  display: none;
+}
+.selectize-input.input-active,
+.selectize-input.input-active:hover,
+.selectize-control.multi .selectize-input.focus {
+  background: #ffffff !important;
+  border-color: rgba(82, 168, 236, 0.8) !important;
+  outline: 0 !important;
+  outline: thin dotted \9 !important;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
+  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6) !important;
+}
+.selectize-control.single .selectize-input {
+  color: #333333;
+  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
+  background-color: #f5f5f5;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #e6e6e6;
+  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
+  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+}
+.selectize-control.single .selectize-input:hover,
+.selectize-control.single .selectize-input:focus,
+.selectize-control.single .selectize-input:active,
+.selectize-control.single .selectize-input.active,
+.selectize-control.single .selectize-input.disabled,
+.selectize-control.single .selectize-input[disabled] {
+  color: #333333;
+  background-color: #e6e6e6;
+  *background-color: #d9d9d9;
+}
+.selectize-control.single .selectize-input:active,
+.selectize-control.single .selectize-input.active {
+  background-color: #cccccc \9;
+}
+.selectize-control.single .selectize-input:hover {
+  color: #333333;
+  text-decoration: none;
+  background-position: 0 -15px;
+  -webkit-transition: background-position 0.1s linear;
+  -moz-transition: background-position 0.1s linear;
+  -o-transition: background-position 0.1s linear;
+  transition: background-position 0.1s linear;
+}
+.selectize-control.single .selectize-input.disabled {
+  background: #e6e6e6 !important;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+.selectize-control.multi .selectize-input {
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding-left: 7px;
+  padding-right: 7px;
+}
+.selectize-control.multi .selectize-input > div {
+  color: #333333;
+  text-shadow: none;
+  background-color: #f5f5f5;
+  background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
+  background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
+  background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
+  border-color: #e6e6e6 #e6e6e6 #bfbfbf;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #e6e6e6;
+  border: 1px solid #cccccc;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
+}
+.selectize-control.multi .selectize-input > div.active {
+  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
+  -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
+  box-shadow: 0 1px 2px rgba(0,0,0,.05);
+  color: #ffffff;
+  text-shadow: none;
+  background-color: #0081c2;
+  background-image: -moz-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#0088cc), to(#0077b3));
+  background-image: -webkit-linear-gradient(top, #0088cc, #0077b3);
+  background-image: -o-linear-gradient(top, #0088cc, #0077b3);
+  background-image: linear-gradient(to bottom, #0088cc, #0077b3);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
+  border-color: #0077b3 #0077b3 #004466;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  *background-color: #0088cc;
+  border: 1px solid #0088cc;
+}
\ No newline at end of file
diff --git a/js/jquery/plugins/selectize/selectize.bootstrap3.css b/js/jquery/plugins/selectize/selectize.bootstrap3.css
new file mode 100644
index 000000000..411d8d92e
--- /dev/null
+++ b/js/jquery/plugins/selectize/selectize.bootstrap3.css
@@ -0,0 +1,408 @@
+/**
+ * selectize.bootstrap3.css (v0.12.4) - Bootstrap 3 Theme
+ * Copyright (c) 2013–2015 Brian Reavis & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Brian Reavis <brian@thirdroute.com>
+ */
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
+  box-shadow: inset 0 0 12px 4px #ffffff;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.selectize-dropdown-header {
+  position: relative;
+  padding: 3px 12px;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.selectize-dropdown-header-close {
+  position: absolute;
+  right: 12px;
+  top: 50%;
+  color: #333333;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important;
+}
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  border-right: 1px solid #f2f2f2;
+  border-top: 0 none;
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+.selectize-control.plugin-remove_button [data-value] .remove {
+  z-index: 1;
+  /* fixes ie bug (see #392) */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 17px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 1px 0 0 0;
+  border-left: 1px solid rgba(0, 0, 0, 0);
+  -webkit-border-radius: 0 2px 2px 0;
+  -moz-border-radius: 0 2px 2px 0;
+  border-radius: 0 2px 2px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: rgba(0, 0, 0, 0);
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: rgba(77, 77, 77, 0);
+}
+.selectize-control.plugin-remove_button .remove-single {
+  position: absolute;
+  right: 28px;
+  top: 6px;
+  font-size: 23px;
+}
+.selectize-control {
+  position: relative;
+}
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  color: #333333;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: 20px;
+  -webkit-font-smoothing: inherit;
+}
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  background: #ffffff;
+  cursor: text;
+  display: inline-block;
+}
+.selectize-input {
+  border: 1px solid #cccccc;
+  padding: 6px 12px;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding: 5px 12px 2px;
+}
+.selectize-input.full {
+  background-color: #ffffff;
+}
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+.selectize-input.focus {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px 4px 0 0;
+  -moz-border-radius: 4px 4px 0 0;
+  border-radius: 4px 4px 0 0;
+}
+.selectize-input > * {
+  vertical-align: baseline;
+  display: -moz-inline-stack;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.selectize-control.multi .selectize-input > div {
+  cursor: pointer;
+  margin: 0 3px 3px 0;
+  padding: 1px 3px;
+  background: #efefef;
+  color: #333333;
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+.selectize-control.multi .selectize-input > div.active {
+  background: #428bca;
+  color: #ffffff;
+  border: 0 solid rgba(0, 0, 0, 0);
+}
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #808080;
+  background: #ffffff;
+  border: 0 solid rgba(77, 77, 77, 0);
+}
+.selectize-input > input {
+  display: inline-block !important;
+  padding: 0 !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  max-width: 100% !important;
+  margin: 0 !important;
+  text-indent: 0 !important;
+  border: 0 none !important;
+  background: none !important;
+  line-height: inherit !important;
+  -webkit-user-select: auto !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+.selectize-input > input::-ms-clear {
+  display: none;
+}
+.selectize-input > input:focus {
+  outline: none !important;
+}
+.selectize-input::after {
+  content: ' ';
+  display: block;
+  clear: left;
+}
+.selectize-input.dropdown-active::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  background: #ffffff;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #ffffff;
+  margin: -1px 0 0 0;
+  border-top: 0 none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 0 0 4px 4px;
+  -moz-border-radius: 0 0 4px 4px;
+  border-radius: 0 0 4px 4px;
+}
+.selectize-dropdown [data-selectable] {
+  cursor: pointer;
+  overflow: hidden;
+}
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(255, 237, 40, 0.4);
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+.selectize-dropdown [data-selectable],
+.selectize-dropdown .optgroup-header {
+  padding: 3px 12px;
+}
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-dropdown .optgroup-header {
+  color: #777777;
+  background: #ffffff;
+  cursor: default;
+}
+.selectize-dropdown .active {
+  background-color: #f5f5f5;
+  color: #262626;
+}
+.selectize-dropdown .active.create {
+  color: #262626;
+}
+.selectize-dropdown .create {
+  color: rgba(51, 51, 51, 0.5);
+}
+.selectize-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+  -webkit-overflow-scrolling: touch;
+}
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+.selectize-control.single .selectize-input:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 17px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #333333 transparent transparent transparent;
+}
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #333333 transparent;
+}
+.selectize-control.rtl.single .selectize-input:after {
+  left: 17px;
+  right: auto;
+}
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+.selectize-control .selectize-input.disabled {
+  opacity: 0.5;
+  background-color: #ffffff;
+}
+.selectize-dropdown,
+.selectize-dropdown.form-control {
+  height: auto;
+  padding: 0;
+  margin: 2px 0 0 0;
+  z-index: 1000;
+  background: #ffffff;
+  border: 1px solid #cccccc;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
+}
+.selectize-dropdown .optgroup-header {
+  font-size: 12px;
+  line-height: 1.42857143;
+}
+.selectize-dropdown .optgroup:first-child:before {
+  display: none;
+}
+.selectize-dropdown .optgroup:before {
+  content: ' ';
+  display: block;
+  height: 1px;
+  margin: 9px 0;
+  overflow: hidden;
+  background-color: #e5e5e5;
+  margin-left: -12px;
+  margin-right: -12px;
+}
+.selectize-dropdown-content {
+  padding: 5px 0;
+}
+.selectize-dropdown-header {
+  padding: 6px 12px;
+}
+.selectize-input {
+  min-height: 34px;
+}
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+}
+.selectize-input.dropdown-active::before {
+  display: none;
+}
+.selectize-input.focus {
+  border-color: #66afe9;
+  outline: 0;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+  box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, 0.6);
+}
+.has-error .selectize-input {
+  border-color: #a94442;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.has-error .selectize-input:focus {
+  border-color: #843534;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+.selectize-control.multi .selectize-input > div {
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.form-control.selectize-control {
+  padding: 0;
+  height: auto;
+  border: none;
+  background: none;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  -webkit-border-radius: 0;
+  -moz-border-radius: 0;
+  border-radius: 0;
+}
\ No newline at end of file
diff --git a/js/jquery/plugins/selectize/selectize.css b/js/jquery/plugins/selectize/selectize.css
new file mode 100644
index 000000000..96d0e1934
--- /dev/null
+++ b/js/jquery/plugins/selectize/selectize.css
@@ -0,0 +1,324 @@
+/**
+ * selectize.css (v0.12.4)
+ * Copyright (c) 2013–2015 Brian Reavis & contributors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this
+ * file except in compliance with the License. You may obtain a copy of the License at:
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF
+ * ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ *
+ * @author Brian Reavis <brian@thirdroute.com>
+ */
+
+.selectize-control.plugin-drag_drop.multi > .selectize-input > div.ui-sortable-placeholder {
+  visibility: visible !important;
+  background: #f2f2f2 !important;
+  background: rgba(0, 0, 0, 0.06) !important;
+  border: 0 none !important;
+  -webkit-box-shadow: inset 0 0 12px 4px #ffffff;
+  box-shadow: inset 0 0 12px 4px #ffffff;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-placeholder::after {
+  content: '!';
+  visibility: hidden;
+}
+.selectize-control.plugin-drag_drop .ui-sortable-helper {
+  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+}
+.selectize-dropdown-header {
+  position: relative;
+  padding: 5px 8px;
+  border-bottom: 1px solid #d0d0d0;
+  background: #f8f8f8;
+  -webkit-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 0 0;
+  border-radius: 3px 3px 0 0;
+}
+.selectize-dropdown-header-close {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  color: #303030;
+  opacity: 0.4;
+  margin-top: -12px;
+  line-height: 20px;
+  font-size: 20px !important;
+}
+.selectize-dropdown-header-close:hover {
+  color: #000000;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup {
+  border-right: 1px solid #f2f2f2;
+  border-top: 0 none;
+  float: left;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:last-child {
+  border-right: 0 none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup:before {
+  display: none;
+}
+.selectize-dropdown.plugin-optgroup_columns .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-control.plugin-remove_button [data-value] {
+  position: relative;
+  padding-right: 24px !important;
+}
+.selectize-control.plugin-remove_button [data-value] .remove {
+  z-index: 1;
+  /* fixes ie bug (see #392) */
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 17px;
+  text-align: center;
+  font-weight: bold;
+  font-size: 12px;
+  color: inherit;
+  text-decoration: none;
+  vertical-align: middle;
+  display: inline-block;
+  padding: 2px 0 0 0;
+  border-left: 1px solid #d0d0d0;
+  -webkit-border-radius: 0 2px 2px 0;
+  -moz-border-radius: 0 2px 2px 0;
+  border-radius: 0 2px 2px 0;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.selectize-control.plugin-remove_button [data-value] .remove:hover {
+  background: rgba(0, 0, 0, 0.05);
+}
+.selectize-control.plugin-remove_button [data-value].active .remove {
+  border-left-color: #cacaca;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove:hover {
+  background: none;
+}
+.selectize-control.plugin-remove_button .disabled [data-value] .remove {
+  border-left-color: #ffffff;
+}
+.selectize-control.plugin-remove_button .remove-single {
+  position: absolute;
+  right: 28px;
+  top: 6px;
+  font-size: 23px;
+}
+.selectize-control {
+  position: relative;
+}
+.selectize-dropdown,
+.selectize-input,
+.selectize-input input {
+  color: #303030;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 18px;
+  -webkit-font-smoothing: inherit;
+}
+.selectize-input,
+.selectize-control.single .selectize-input.input-active {
+  background: #ffffff;
+  cursor: text;
+  display: inline-block;
+}
+.selectize-input {
+  border: 1px solid #d0d0d0;
+  padding: 8px 8px;
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 3px;
+  -moz-border-radius: 3px;
+  border-radius: 3px;
+}
+.selectize-control.multi .selectize-input.has-items {
+  padding: 6px 8px 3px;
+}
+.selectize-input.full {
+  background-color: #ffffff;
+}
+.selectize-input.disabled,
+.selectize-input.disabled * {
+  cursor: default !important;
+}
+.selectize-input.focus {
+  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.15);
+}
+.selectize-input.dropdown-active {
+  -webkit-border-radius: 3px 3px 0 0;
+  -moz-border-radius: 3px 3px 0 0;
+  border-radius: 3px 3px 0 0;
+}
+.selectize-input > * {
+  vertical-align: baseline;
+  display: -moz-inline-stack;
+  display: inline-block;
+  zoom: 1;
+  *display: inline;
+}
+.selectize-control.multi .selectize-input > div {
+  cursor: pointer;
+  margin: 0 3px 3px 0;
+  padding: 2px 6px;
+  background: #f2f2f2;
+  color: #303030;
+  border: 0 solid #d0d0d0;
+}
+.selectize-control.multi .selectize-input > div.active {
+  background: #e8e8e8;
+  color: #303030;
+  border: 0 solid #cacaca;
+}
+.selectize-control.multi .selectize-input.disabled > div,
+.selectize-control.multi .selectize-input.disabled > div.active {
+  color: #7d7d7d;
+  background: #ffffff;
+  border: 0 solid #ffffff;
+}
+.selectize-input > input {
+  display: inline-block !important;
+  padding: 0 !important;
+  min-height: 0 !important;
+  max-height: none !important;
+  max-width: 100% !important;
+  margin: 0 2px 0 0 !important;
+  text-indent: 0 !important;
+  border: 0 none !important;
+  background: none !important;
+  line-height: inherit !important;
+  -webkit-user-select: auto !important;
+  -webkit-box-shadow: none !important;
+  box-shadow: none !important;
+}
+.selectize-input > input::-ms-clear {
+  display: none;
+}
+.selectize-input > input:focus {
+  outline: none !important;
+}
+.selectize-input::after {
+  content: ' ';
+  display: block;
+  clear: left;
+}
+.selectize-input.dropdown-active::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  background: #f0f0f0;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.selectize-dropdown {
+  position: absolute;
+  z-index: 10;
+  border: 1px solid #d0d0d0;
+  background: #ffffff;
+  margin: -1px 0 0 0;
+  border-top: 0 none;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+  -webkit-border-radius: 0 0 3px 3px;
+  -moz-border-radius: 0 0 3px 3px;
+  border-radius: 0 0 3px 3px;
+}
+.selectize-dropdown [data-selectable] {
+  cursor: pointer;
+  overflow: hidden;
+}
+.selectize-dropdown [data-selectable] .highlight {
+  background: rgba(125, 168, 208, 0.2);
+  -webkit-border-radius: 1px;
+  -moz-border-radius: 1px;
+  border-radius: 1px;
+}
+.selectize-dropdown [data-selectable],
+.selectize-dropdown .optgroup-header {
+  padding: 5px 8px;
+}
+.selectize-dropdown .optgroup:first-child .optgroup-header {
+  border-top: 0 none;
+}
+.selectize-dropdown .optgroup-header {
+  color: #303030;
+  background: #ffffff;
+  cursor: default;
+}
+.selectize-dropdown .active {
+  background-color: #f5fafd;
+  color: #495c68;
+}
+.selectize-dropdown .active.create {
+  color: #495c68;
+}
+.selectize-dropdown .create {
+  color: rgba(48, 48, 48, 0.5);
+}
+.selectize-dropdown-content {
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 200px;
+  -webkit-overflow-scrolling: touch;
+}
+.selectize-control.single .selectize-input,
+.selectize-control.single .selectize-input input {
+  cursor: pointer;
+}
+.selectize-control.single .selectize-input.input-active,
+.selectize-control.single .selectize-input.input-active input {
+  cursor: text;
+}
+.selectize-control.single .selectize-input:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  top: 50%;
+  right: 15px;
+  margin-top: -3px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 5px 5px 0 5px;
+  border-color: #808080 transparent transparent transparent;
+}
+.selectize-control.single .selectize-input.dropdown-active:after {
+  margin-top: -4px;
+  border-width: 0 5px 5px 5px;
+  border-color: transparent transparent #808080 transparent;
+}
+.selectize-control.rtl.single .selectize-input:after {
+  left: 15px;
+  right: auto;
+}
+.selectize-control.rtl .selectize-input > input {
+  margin: 0 4px 0 -2px !important;
+}
+.selectize-control .selectize-input.disabled {
+  opacity: 0.5;
+  background-color: #fafafa;
+}
\ No newline at end of file
diff --git a/template/en/default/bug/new_bug.html.tmpl b/template/en/default/bug/new_bug.html.tmpl
index 814c6b9b9..83ec1e924 100644
--- a/template/en/default/bug/new_bug.html.tmpl
+++ b/template/en/default/bug/new_bug.html.tmpl
@@ -10,185 +10,175 @@
 [% PROCESS bug_modal/common_header.html.tmpl 
     title = title
     jquery = [ "selectize" ]
-    jquery_css = [ "js/jquery/plugins/selectize/selectize.default.css" ]
+    jquery_css = [ "js/jquery/plugins/selectize/selectize.bootstrap3.css" ]
     javascript_urls = ['extensions/BugModal/web/new_bug.js']
     style_urls = ['extensions/BugModal/web/new_bug.css']
 %]
 [% PROCESS global/header.html.tmpl %]
-<p>Coming Soon!</p>
-<p>This is a demonstration of a reusable comment component</p>
 
-<form name="newbugform" id="newbugform" method="post" action="new_bug.cgi">
-
-<input type="hidden" value="[% issue_hash_token(['new_bug']) FILTER html %]" name="token">
-
-[% WRAPPER bug_modal/module.html.tmpl
-    title = ""
-%]
-    <div id="summary-container">
-    [%# summary %]
-    [% INCLUDE bug_modal/field.html.tmpl
-        field = bug_fields.short_desc
-        field_type = constants.FIELD_TYPE_FREETEXT
-        edit_only = 1
-        editable = 1
-        required = 1
-        help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#short_desc"
-    %]
-    
-  </div>
-  <div id="mode-container">
-    <div id="user-guide">
-      <a title="User guide for [% terms.Bugzilla %]" href="#">Get help with this page</a>
-    </div>
-  </div>
-[%END%]
-
-
-[%# === status === %]
-
-[% WRAPPER bug_modal/module.html.tmpl
-    title = "Status"
-%]
-  [% WRAPPER fields_lhs %]
-
-    [%# product %]
-    [% can_edit_product   = bug.check_can_change_field("product", 0, 1) %]
-    [% filtered_product   = bug.product_obj.name FILTER uri %]
-    [% filtered_component = bug.component_obj.name FILTER uri %]
-    [% WRAPPER bug_modal/field.html.tmpl
-        field        = bug_fields.product
-        field_type   = constants.FIELD_TYPE_SINGLE_SELECT
-        edit_only = 1
-        editable = 1
-        help         = "describecomponents.cgi?product=$filtered_product"
-    %]
-      <span aria-owns="product-name product-latch">
-        <span role="button" aria-label="show product information" aria-expanded="false" tabindex="0"
-              class="spin-latch" id="product-latch" data-latch="product" data-for="product">&#9656;</span>
-        <div title="show product information" tabindex="0" class="spin-toggle"
-             id="product-name" data-latch="product" data-for="product">
-          [% bug.product FILTER html %]
+[% IF user.id %]
+  <div style="display: none" id="xhr-error"></div>
+  <form name="newbugform" id="newbugform" method="post" action="new_bug.cgi">
+    <input type="hidden" value="[% issue_hash_token(['new_bug']) FILTER html %]" name="token">
+    <div class="new-bug-container">
+      <div class="new-bug">
+        <div class="new-bug-pad">
         </div>
-        <div id="product-info" style="display:none">
-          [% bug.product_obj.description FILTER html_light %]
+        <div class="new-bug-title">
+          <h2>Create New [% terms.Bug %]</h2>
+          <p>Before reporting a bug, make sure you've read our
+            <a href="https://developer.mozilla.org/en/Bug_writing_guidelines">bug writing guidelines</a> and double checked that your bug hasn't already
+            been reported. Consult our list of <a href="https://bugzilla.mozilla.org/duplicates.cgi">
+            most frequently reported bugs</a> and <a href="https://bugzilla.mozilla.org/query.cgi">
+            search through descriptions</a> of previously reported bugs.
+          </p>
         </div>
-      </span>
-    [% END %]
-    [% WRAPPER bug_modal/field.html.tmpl
-        field          = bug_fields.product
-        field_type     = constants.FIELD_TYPE_SINGLE_SELECT
-        hide_on_view   = 1
-        hide_on_edit   = !can_edit_product
-        append_content = 1
-        help           = "describecomponents.cgi?product=$filtered_product"
-    %]
-      <span id="product-search-container">
-        [% INCLUDE prodcompsearch/form.html.tmpl
-            id            = "pcs"
-            custom_select = 1
-            hidden        = 1
-            throbber      = "product-throbber"
-        %]
-        <button id="product-search" type="button" class="minor">Search</button>
-        <button id="product-search-cancel" type="button" class="minor" style="display:none">X</button>
-        <img id="product-throbber" src="extensions/BugModal/web/throbber.gif"
-          width="16" height="11" style="display:none">
-        <img id="product-search-error" class="tt" src="extensions/BugModal/web/error.png"
-          width="16" height="16" style="display:none">
-      </span>
-    [% END %]
-
-    [%# component %]
-    [% WRAPPER bug_modal/field.html.tmpl
-        field      = bug_fields.component
-        field_type = constants.FIELD_TYPE_SINGLE_SELECT
-        help       = "describecomponents.cgi?product=$filtered_product&component=$filtered_component#$filtered_component"
-        edit_only = 1
-        editable = 1
-    %]
-      <span aria-owns="component-name component-latch">
-        <span role="button" aria-label="show component description" aria-expanded="false" tabindex="0"
-              class="spin-latch" id="component-latch" data-latch="component" data-for="component">&#9656;</span>
-        <div title="show component information" tabindex="0" class="spin-toggle" id="component-name"
-             data-latch="#component-latch" data-for="component">
-            [% bug.component FILTER html %]
+        <div class="new-bug-pad">
         </div>
-        <div id="component-info" style="display:none">
-          <div>[% bug.component_obj.description FILTER html_light %]</div>
-          <a href="buglist.cgi?component=[% bug.component FILTER uri %]&amp;
-                  [%~ %]product=[% bug.product FILTER uri %]&amp;
-                  [%~ %]bug_status=__open__" target="_blank">Other [% terms.Bugs %]</a>
+      </div>
+      <div class="new-bug">
+        <div class="new-bug-pad">
         </div>
-      </span>
-    [% END %]
-  [% END %]
-  [% WRAPPER fields_rhs %]
-  <td colspan="2" id="comp_desc_container">
-    <table>
-        <tr>
-          <td>
-            <fieldset>
-              <legend>Component Description</legend>
-              <div id="comp_desc" class="comment">Select a component to read its description.</div>
-            </fieldset>
-          </td>
-        </tr>
-      </table>
-    </td>
-  [% END %]
+        <div class="new-bug-split-2">
+          [% WRAPPER bug_modal/module.html.tmpl title = "" %]
+          [%# summary %]
+          [% INCLUDE bug_modal/field.html.tmpl
+              field = bug_fields.short_desc
+              field_type = constants.FIELD_TYPE_FREETEXT
+              edit_only = 1
+              editable = 1
+              required = 1
+              help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#short_desc"
+          %]
+
+          [% INCLUDE bug_modal/common_new_comment.html.tmpl disable_cols=1 %]
+          [% END %]
+          [% WRAPPER bug_modal/module.html.tmpl title = "Attach a File" collapsed = 1 %]
+            <p>Coming Soon.</p>
+          [% END %]
+          <button type="submit" id="create-btn" class="create-btn major">Submit</button>
+        </div>
+        <div class="new-bug-split-1">
+          [% WRAPPER bug_modal/module.html.tmpl title = "Status" %]
+            [% can_edit_product   = bug.check_can_change_field("product", 0, 1) %]
+            [% filtered_product   = bug.product_obj.name FILTER uri %]
+            [% filtered_component = bug.component_obj.name FILTER uri %]
+
+            [% WRAPPER bug_modal/field.html.tmpl
+                field        = bug_fields.product
+                field_type   = constants.FIELD_TYPE_SINGLE_SELECT
+                edit_only = 1
+                editable = 1
+                help         = "describecomponents.cgi?product=$filtered_product"
+            %]
+              <span aria-owns="product-name product-latch">
+                <span role="button" aria-label="show product information" aria-expanded="false" tabindex="0"
+                      class="spin-latch" id="product-latch" data-latch="product" data-for="product">&#9656;</span>
+                <div title="show product information" tabindex="0" class="spin-toggle"
+                    id="product-name" data-latch="product" data-for="product">
+                  [% bug.product FILTER html %]
+                </div>
+                <div id="product-info" style="display:none">
+                  [% bug.product_obj.description FILTER html_light %]
+                </div>
+              </span>
+            [% END %]
+
+            [% WRAPPER bug_modal/field.html.tmpl
+                field          = bug_fields.product
+                field_type     = constants.FIELD_TYPE_SINGLE_SELECT
+                hide_on_view   = 1
+                hide_on_edit   = !can_edit_product
+                append_content = 1
+                help           = "describecomponents.cgi?product=$filtered_product"
+            %]
+              <span id="product-search-container">
+                [% INCLUDE prodcompsearch/form.html.tmpl
+                    id            = "pcs"
+                    custom_select = 1
+                    hidden        = 1
+                    throbber      = "product-throbber"
+                %]
+                <button id="product-search" type="button" class="minor">Search</button>
+                <button id="product-search-cancel" type="button" class="minor" style="display:none">X</button>
+                <img id="product-throbber" src="extensions/BugModal/web/throbber.gif"
+                  width="16" height="11" style="display:none">
+                <img id="product-search-error" class="tt" src="extensions/BugModal/web/error.png"
+                  width="16" height="16" style="display:none">
+              </span>
+            [% END %]
+
+            [%# component %]
+            [% WRAPPER bug_modal/field.html.tmpl
+                field      = bug_fields.component
+                field_type = constants.FIELD_TYPE_SINGLE_SELECT
+                help       = "describecomponents.cgi?product=$filtered_product&component=$filtered_component#$filtered_component"
+                edit_only = 1
+                editable = 1
+            %]
+              <span aria-owns="component-name component-latch">
+                <span role="button" aria-label="show component description" aria-expanded="false" tabindex="0"
+                      class="spin-latch" id="component-latch" data-latch="component" data-for="component">&#9656;</span>
+                <div title="show component information" tabindex="0" class="spin-toggle" id="component-name"
+                    data-latch="#component-latch" data-for="component">
+                    [% bug.component FILTER html %]
+                </div>
+                <div id="component-info" style="display:none">
+                  <div>[% bug.component_obj.description FILTER html_light %]</div>
+                  <a href="buglist.cgi?component=[% bug.component FILTER uri %]&amp;
+                          [%~ %]product=[% bug.product FILTER uri %]&amp;
+                          [%~ %]bug_status=__open__" target="_blank">Other [% terms.Bugs %]</a>
+                </div>
+              </span>
+            [% END %]
+
+            [% INCLUDE bug_modal/field.html.tmpl
+              field = bug_fields.version
+              field_type = constants.FIELD_TYPE_SINGLE_SELECT
+              help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#version"
+              edit_only = 1
+              editable = 1
+            %]
+          [% END %]
+          [% WRAPPER bug_modal/module.html.tmpl title = "Labels" %]
+            [%# keywords %]
+            [% INCLUDE bug_modal/field.html.tmpl
+                field = bug_fields.keywords
+                field_type = constants.FIELD_TYPE_MULTI_SELECT
+                edit_only = 1
+                editable = 1
+                help = "describekeywords.cgi"
+            %]
+
+            [% WRAPPER bug_modal/field.html.tmpl
+                field = bug_fields.status_whiteboard
+                field_type = constants.FIELD_TYPE_FREETEXT
+                help = "https://wiki.mozilla.org/BMO/UserGuide/Whiteboard"
+                edit_only = 1
+                editable = 1
+            %]
+              [% bug.status_whiteboard == "" ? "---" : bug.status_whiteboard FILTER html %]
+            [% END %]
+          [% END %]
+        </div>
+        <div class="new-bug-pad">
+        </div>
+      </div>
+    </div>
+  </form>
+[% ELSE %]
+  <div id="new-comment-notice">
+    You need to <a href="new-bug&amp;GoAheadAndLogIn=1">log in</a>
+    before you can file a [% terms.bug %].
+  </div>
 [% END %]
 
-[%# === tracking === %]
-
-[% WRAPPER bug_modal/module.html.tmpl
-  title = "Tracking"
-  subtitle = sub
-  collapsed = col
-%]
-  [% WRAPPER fields_lhs %]
-
-    [%# version %]
-    [% INCLUDE bug_modal/field.html.tmpl
-        field = bug_fields.version
-        field_type = constants.FIELD_TYPE_SINGLE_SELECT
-        help = "https://wiki.mozilla.org/BMO/UserGuide/BugFields#version"
-        edit_only = 1
-        editable = 1
-    %]
-    [%# keywords %]
-    [% INCLUDE bug_modal/field.html.tmpl
-        field = bug_fields.keywords
-        field_type = constants.FIELD_TYPE_MULTI_SELECT
-        edit_only = 1
-        editable = 1
-        help = "describekeywords.cgi"
-    %]
- [% END %]
-[% END %]
+[% PROCESS global/footer.html.tmpl %]
 
 [% BLOCK fields_lhs %]
-  <div class="fields-lhs">[% content FILTER none %]</div>
+    <div class="fields-lhs">[% content FILTER none %]</div>
 [% END %]
 
 [% BLOCK fields_rhs %]
-  <div class="fields-rhs">[% content FILTER none %]</div>
+    <div class="fields-rhs">[% content FILTER none %]</div>
 [% END %]
-
-[%
-    IF user.id;
-      INCLUDE bug_modal/common_new_comment.html.tmpl;
-    ELSE;
-      %]
-        <div id="new-comment-notice">
-          You need to <a href="new-bug&amp;GoAheadAndLogIn=1">log in</a>
-          before you can file a [% terms.bug %].
-        </div>
-      [%
-    END;
-  %]
-
-<div style="display: none" id="xhr-error"></div>
-<button type="submit" id="create-btn" class="create-btn major">Create New [% terms.Bug %]</button>
-</form>
-[% PROCESS global/footer.html.tmpl %]
\ No newline at end of file