Merge pull request #460 from zsloan/move_styling_to_css

Move styling to css

12 files changed, 712 insertions, 579 deletions

diff --git a/wqflask/wqflask/marker_regression/run_mapping.py b/wqflask/wqflask/marker_regression/run_mapping.py
index 8a44b3fd..39820c8c 100644
--- a/wqflask/wqflask/marker_regression/run_mapping.py
+++ b/wqflask/wqflask/marker_regression/run_mapping.py
@@ -140,7 +140,7 @@ class RunMapping(object):
             mapping_results_filename = self.dataset.group.name + "_" + ''.join(random.choice(string.ascii_uppercase + string.digits) for _ in range(6))
             self.mapping_results_path = "{}{}.csv".format(webqtlConfig.GENERATED_IMAGE_DIR, mapping_results_filename)
 
-        if start_vars['manhattan_plot'] == "True":
+        if start_vars['manhattan_plot'] == "true":
             self.manhattan_plot = True
         else:
             self.manhattan_plot = False
diff --git a/wqflask/wqflask/static/new/css/main.css b/wqflask/wqflask/static/new/css/main.css
index 097cd997..d5fb8a61 100644
--- a/wqflask/wqflask/static/new/css/main.css
+++ b/wqflask/wqflask/static/new/css/main.css
@@ -33,4 +33,8 @@
     .collapsing {
         overflow: hidden!important;
     }
+}
+
+.checkbox {
+    min-height: 20px;
 }
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/css/show_trait.css b/wqflask/wqflask/static/new/css/show_trait.css
index 7a7f5455..d8964f5d 100644
--- a/wqflask/wqflask/static/new/css/show_trait.css
+++ b/wqflask/wqflask/static/new/css/show_trait.css
@@ -1,17 +1,17 @@
 tr .outlier {
-    background-color: #ffff99;
+  background-color: #ffff99;
 }
 
 table.dataTable tbody tr.selected {
-    background-color: #ffee99;
+  background-color: #ffee99;
 }
 
 #bar_chart_container {
-    overflow-x:scroll;
+  overflow-x:scroll;
 }
 
 div.sample_group {
-    overflow: auto; # needed because it contains float dataTable wrapper
+  overflow: auto; # needed because it contains float dataTable wrapper
 }
 
 .js-plotly-plot .plotly .modebar {
@@ -35,8 +35,13 @@ table.dataTable thead th, table.dataTable tfoot {
   padding: 4px 18px 4px 10px;
 }
 
+/* Header for a column with a numeric value that should be right-aligned */
+table.dataTable thead th div.numeric_header {
+  text-align: right;
+}
+
 table.dataTable tbody td {
-  padding: 4px 15px 2px 10px;
+  padding: 2px 15px 0px 10px;
 }
 
 table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td {
@@ -54,8 +59,204 @@ table.dataTable.cell-border tbody tr td:first-child {
 
 .trait_value_input {
   text-align: right;
+}
 
 .glyphicon {
   position: relative;
   top: 2px;
+}
+
+.showtrait-main-div {
+  min-width: 700px;
+}
+
+table.dataTable tbody td.column_name-Checkbox {
+  padding: 1px 0px 0px 9px; /* The left padding here is because text-align:center does not seem to be working properly. No idea why this is. */
+  text-align: center;
+  vertical-align: middle;
+}
+
+table.dataTable tbody td.column_name-Index {
+  padding: 2px 4px 0px 2px;
+  text-align: right;
+}
+
+/* the column with +/- in it that appears in the table when there's an SE column */
+table.dataTable tbody td.column_name-PlusMinus {
+  padding-left: 2px;
+  padding-right: 2px;
+  text-align: center;
+}
+
+table.dataTable tbody td.column_name-Value, table.dataTable tbody td.column_name-SE, table.dataTable tbody td.column_name-num_cases {
+  text-align: right;
+}
+
+div.btn-toolbar {
+  margin-bottom:15px;
+}
+
+/* div containing the form options for each segment of the trait page - correlations, statistics, mapping, etc */
+div.section-form-div {
+  padding: 20px;
+}
+
+table.left-float {
+  float: left;
+}
+
+div.scatterplot-btn-div {
+  margin-bottom:40px;
+}
+
+div.correlation-main {
+  min-width: 1200px;
+}
+
+div.correlation-options {
+  min-width: 700px;
+}
+
+.min-expr-field {
+  width: 70px;
+}
+
+div.p-range-slider {
+  width: 200px;
+  margin-left: 15px;
+}
+
+span.p-range-lower {
+  margin-top: 5px;
+  font: 400 12px Arial;
+  color: #888; 
+  display: inline-block;
+}
+
+span.p-range-upper {
+  font: 400 12px Arial;
+  color: #888;
+  display: inline-block;
+  margin: 5px 0px 0px 170px;
+}
+
+input.corr-location {
+  width: 50px;
+  display: inline;
+}
+
+div.block-by-index-div {
+  margin-bottom: 10px;
+}
+
+div.block-by-attribute-div {
+  margin-top:10px;
+  margin-bottom:10px;
+}
+
+div.normalize-div {
+  margin-top:10px;
+}
+
+div.mapping-main {
+  min-width: 1200px;
+}
+div.mapping-options {
+  min-width: 500px;
+}
+
+div.covar-options {
+  padding-top: 7px;
+}
+
+.control-label {
+  text-align: right;
+}
+
+.chr-select, .maf-select, .scale-select, .reaper-ver-select {
+  width: 80px;
+}
+
+span.covar-text {
+  font-size: 13px;
+  font-weight: 400;
+}
+
+div.select-covar-div {
+  margin-bottom: 10px;
+}
+
+.select-covar-button {
+  width: 80px;
+  padding-right: 10px;
+}
+
+.selected-covariates {
+  overflow-y: scroll;
+  resize: none;
+  width: 200px;
+}
+
+.cofactor-input {
+  width: 160px;
+  display: inline-block;
+}
+
+.no-control-radio {
+  margin-left: 10px;
+}
+
+.map-method-text {
+  margin-top: 20px;
+}
+
+.rqtl-description {
+  padding-top: 40px;
+  display: none;
+}
+
+div.sample-table-container {
+  padding-bottom: 10px;
+}
+
+div.sample-table-search-container {
+  display: inline;
+  height: 40px;
+}
+
+input.sample-table-search {
+  width: 200px;
+  display: inline;
+  float: left;
+  vertical-align: top;
+}
+
+div.sample-table-export-container {
+  padding-left: 10px;
+  display: inline;
+}
+
+div.export-code-container {
+  padding-top: 20px;
+  width: 600px;
+  display: none;
+}
+
+.export-code-field {
+  padding-top: 0px;
+  padding-bottom: 0px;
+  height: 150px;
+}
+
+table.sample-table {
+  float: left;
+  width:100%;
+}
+
+input.trait-value-input {
+  text-align: right;
+}
+
+div.inline-div {
+  display: inline;
 }
\ No newline at end of file
diff --git a/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js
index a8a3041d..3e414034 100644
--- a/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js
+++ b/wqflask/wqflask/static/new/javascript/get_covariates_from_collection.js
@@ -104,7 +104,7 @@ submit_click = function() {
   //covariates_display_string = covariates_display_string.substring(0, covariates_display_string.length - 2)
 
   $("input[name=covariates]").val(covariates_string)
-  $(".selected_covariates").val(covariates_display_string)
+  $(".selected-covariates").val(covariates_display_string)
 
   return $.colorbox.close();
 };
@@ -114,7 +114,7 @@ trait_click = function() {
   trait = $(this).parent().find('.trait').text();
   dataset = $(this).parent().find('.dataset').data("dataset");
   $("input[name=covariates]").val(trait + ":" + dataset)
-  $(".selected_covariates").text(trait)
+  $(".selected-covariates").text(trait)
   return $.colorbox.close();
 };
 
diff --git a/wqflask/wqflask/static/new/javascript/show_trait.js b/wqflask/wqflask/static/new/javascript/show_trait.js
index eaad0a4c..397adb52 100644
--- a/wqflask/wqflask/static/new/javascript/show_trait.js
+++ b/wqflask/wqflask/static/new/javascript/show_trait.js
@@ -107,14 +107,14 @@ d3.select("#select_covariates").on("click", (function(_this) {
 })(this));
 $("#remove_covariates").click(function () {
     $("input[name=covariates]").val("")
-    $(".selected_covariates").val("")
+    $(".selected-covariates").val("")
 });
 $(".select_covariates").click(function () {
   open_covariate_selection();
 });
 $(".remove_covariates").click(function () {
   $("input[name=covariates]").val("")
-  $(".selected_covariates").val("")
+  $(".selected-covariates").val("")
 });
 d3.select("#clear_compare_trait").on("click", (function(_this) {
   return function() {
@@ -601,7 +601,7 @@ block_by_attribute_value = function() {
       var row;
       if ($.trim($(element).text()) === exclude_by_value) {
         row = $(element).parent('tr');
-        return $(row).find(".trait_value_input").val("x");
+        return $(row).find(".trait-value-input").val("x");
       }
     };
   })(this));
@@ -641,13 +641,14 @@ block_by_index = function() {
   for (_k = 0, _len1 = index_list.length; _k < _len1; _k++) {
     index = index_list[_k];
     val_nodes[index - 1].childNodes[0].value = "x";
+
   }
 };
 
 hide_no_value = function() {
   return $('.value_se').each((function(_this) {
     return function(_index, element) {
-      if ($(element).find('.trait_value_input').val() === 'x') {
+      if ($(element).find('.trait-value-input').val() === 'x') {
         return $(element).hide();
       }
     };
@@ -658,7 +659,7 @@ $('#hide_no_value').click(hide_no_value);
 block_outliers = function() {
   return $('.outlier').each((function(_this) {
     return function(_index, element) {
-      return $(element).find('.trait_value_input').val('x');
+      return $(element).find('.trait-value-input').val('x');
     };
   })(this));
 };
@@ -667,7 +668,6 @@ $('#block_outliers').click(block_outliers);
 reset_samples_table = function() {
   $('input[name="transform"]').val("");
   $('span[name="transform_text"]').text("")
-
   tables = ['samples_primary', 'samples_other'];
   for (_i = 0, _len = tables.length; _i < _len; _i++) {
     table = tables[_i];
@@ -871,7 +871,7 @@ $('#normalize').hover(function(){
 $('#normalize').click(normalize_data)
 
 switch_qnorm_data = function() {
-  return $('.trait_value_input').each((function(_this) {
+  return $('.trait-value-input').each((function(_this) {
     return function(_index, element) {
       transform_val = $(element).data('transform')
       if (transform_val != "") {
@@ -890,9 +890,9 @@ get_sample_table_data = function(table_name) {
       var attribute_info, key, row_data, _ref;
       row_data = {};
       row_data.name = $.trim($(element).find('.column_name-Sample').text());
-      row_data.value = $(element).find('.edit_sample_value:eq(0)').val();
-      if ($(element).find('.edit_sample_se').length > 0) {
-        row_data.se = $(element).find('.edit_sample_se').val();
+      row_data.value = $(element).find('.edit-sample-value:eq(0)').val();
+      if ($(element).find('.edit-sample-se').length > 0) {
+        row_data.se = $(element).find('.edit-sample-se').val();
       }
       if ($(element).find('.edit_sample_num_cases').length > 0) {
         row_data.num_cases = $(element).find('.edit_sample_num_cases').val();
diff --git a/wqflask/wqflask/templates/show_trait.html b/wqflask/wqflask/templates/show_trait.html
index 5ed7a90b..7b74a3f6 100644
--- a/wqflask/wqflask/templates/show_trait.html
+++ b/wqflask/wqflask/templates/show_trait.html
@@ -37,7 +37,7 @@
         <input type="hidden" name="covariates" value="">
         <input type="hidden" name="transform" value="">
 
-        <div class="container" style="min-width: 700px;">
+        <div class="container showtrait-main-div">
             <div class="panel-group" id="accordion">
                 <div class="panel panel-default">
                     <div class="panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne" aria-expanded="true">
diff --git a/wqflask/wqflask/templates/show_trait_calculate_correlations.html b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
index 9420c9c6..bc1d4091 100644
--- a/wqflask/wqflask/templates/show_trait_calculate_correlations.html
+++ b/wqflask/wqflask/templates/show_trait_calculate_correlations.html
@@ -1,149 +1,150 @@
-<div>
-  <div class="col-xs-6" style="min-width: 800px;">
-    <div style="padding: 20px" class="form-horizontal">
-        
-        <div class="form-group">
-            <label for="corr_type" class="col-xs-2 control-label">Method</label>
-            <div class="col-xs-3 controls">
-                <select name="corr_type" class="form-control">
-                    <option value="sample">Sample r</option>
-                    <option value="lit">Literature r</option>
-                    <option value="tissue">Tissue r</option>
-                </select>
-            </div>
-        </div>
-        
-        <div class="form-group">
-            <label for="corr_dataset" class="col-xs-2 control-label">Database</label>
-            <div class="col-xs-10 controls">
-                <select name="corr_dataset" class="form-control">
-                    {% for tissue in corr_tools.dataset_menu %}
-                        {% if tissue.tissue %}
-                            <optgroup label="{{ tissue.tissue }} ------">
-                        {% endif %}
-                        {% for dataset in tissue.datasets %}
-                            <option value="{{ dataset[1] }}" 
-                            {% if corr_tools.dataset_menu_selected == dataset[1] %}     
-                                selected           
-                            {% endif %}>          
-                              {{ dataset[0] }}
-                            </option>
-                        {% endfor %}
-                        {% if tissue.tissue %}
-                            </optgroup>
-                        {% endif %}
-                    {% endfor %}
-                </select>
-            </div>
-        </div>
-        
-        <div class="form-group">
-            <label for="corr_return_results" class="col-xs-2 control-label">Return</label>
-            <div class="col-xs-4 controls">
-                <select name="corr_return_results" class="form-control">
-                    {% for return_result in corr_tools.return_results_menu %}
-                        <option value="{{ return_result }}" 
-                        {% if corr_tools.return_results_menu_selected == return_result %}
-                            selected
-                        {% endif %}>
-                        Top {{ return_result }}
-                        </option>
-                    {% endfor %}
-                </select>
-            </div>
-        </div>
-        
-        <div class="form-group">
-            <label for="corr_samples_group" class="col-xs-2 control-label">Samples</label>
-            <div class="col-xs-4 controls">
-                <select name="corr_samples_group" class="form-control">
-                    {% for group, pretty_group in sample_group_types.items() %}
-                        <option value="{{ group }}">{{ pretty_group }}</option>
-                    {% endfor %}
-                </select>
-            </div>
-        </div>
-            
-        <div id="corr_sample_method" class="form-group">
-            <label for="corr_sample_method" class="col-xs-2 control-label">Type</label>
-            <div class="col-xs-4 controls">
-                <select name="corr_sample_method" class="form-control">
-                    <option value="pearson">Pearson</option>
-                    <option value="spearman">Spearman Rank</option>
-                    <option value="bicor">Biweight Midcorrelation</option>
-                </select>
-            </div>
-        </div>
-        {% if dataset.type != "Publish" %}
-        <div class="form-group">
-            <label class="col-xs-2 control-label">Min Expr</label>
-            <div class="col-xs-4 controls">
-                <input name="min_expr" value="" type="text" class="form-control" style="width: 70px;">
-            </div>
-        </div>
-        <div class="form-group">
-            <label class="col-xs-2 control-label">Location</label>
-            <div class="col-xs-5 controls">
-                <span>
-                Chr: <input name="loc_chr" value="" type="text" class="form-control" style="width: 50px; display: inline;">&nbsp;&nbsp;&nbsp;
-                Mb: <input name="min_loc_mb" value="" type="text" class="form-control" style="width: 50px; display: inline;"> &nbsp;to&nbsp; <input name="max_loc_mb" value="" type="text" class="form-control" style="width: 50px; display: inline;">
-                </span>
-                <br>
-            </div>
-        </div>
-        {% endif %}
-        <div class="form-group">
-            <label class="col-xs-2 control-label">Range</label>
-            <div class="col-xs-5 controls">
-                <input name="p_range_lower" value="" type="hidden">
-                <input name="p_range_upper" value="" type="hidden">
-                <span style="display: inline;">
-                <div id="p_range_slider" style="width: 200px;"></div>
-                <span style="font: 400 12px Arial; color: #888; display: inline; margin: 25px 0; width: 20px;" id="p_range_lower"></span>
-                <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
-                <span style="font: 400 12px Arial; color: #888; display: inline; margin: 15px 0; width: 20px;" id="p_range_upper"></span>
-                </span>
-            </div>
-        </div>
-        
-        <div class="form-group">
-            <label for="corr_sample_method" class="col-xs-2 control-label"></label>
-            <div class="col-xs-3 controls">
-                <input type="button" class="btn corr_compute submit_special btn-success" data-url="/corr_compute" title="Compute Correlation" value="Compute">
-            </div>
-        </div>
+<div class="row correlation-main">
+    <div class="col-xs-3 correlation-options">
+      <div class="form-horizontal section-form-div">
+
+          <div class="form-group">
+              <label for="corr_type" class="col-xs-2 control-label">Method</label>
+              <div class="col-xs-3 controls">
+                  <select name="corr_type" class="form-control">
+                      <option value="sample">Sample r</option>
+                      <option value="lit">Literature r</option>
+                      <option value="tissue">Tissue r</option>
+                  </select>
+              </div>
+          </div>
+
+          <div class="form-group">
+              <label for="corr_dataset" class="col-xs-2 control-label">Database</label>
+              <div class="col-xs-10 controls">
+                  <select name="corr_dataset" class="form-control">
+                      {% for tissue in corr_tools.dataset_menu %}
+                          {% if tissue.tissue %}
+                              <optgroup label="{{ tissue.tissue }} ------">
+                          {% endif %}
+                          {% for dataset in tissue.datasets %}
+                              <option value="{{ dataset[1] }}"
+                              {% if corr_tools.dataset_menu_selected == dataset[1] %}
+                                  selected
+                              {% endif %}>
+                                {{ dataset[0] }}
+                              </option>
+                          {% endfor %}
+                          {% if tissue.tissue %}
+                              </optgroup>
+                          {% endif %}
+                      {% endfor %}
+                  </select>
+              </div>
+          </div>
+
+          <div class="form-group">
+              <label for="corr_return_results" class="col-xs-2 control-label">Return</label>
+              <div class="col-xs-4 controls">
+                  <select name="corr_return_results" class="form-control">
+                      {% for return_result in corr_tools.return_results_menu %}
+                          <option value="{{ return_result }}"
+                          {% if corr_tools.return_results_menu_selected == return_result %}
+                              selected
+                          {% endif %}>
+                          Top {{ return_result }}
+                          </option>
+                      {% endfor %}
+                  </select>
+              </div>
+          </div>
+
+          <div class="form-group">
+              <label for="corr_samples_group" class="col-xs-2 control-label">Samples</label>
+              <div class="col-xs-4 controls">
+                  <select name="corr_samples_group" class="form-control">
+                      {% for group, pretty_group in sample_group_types.items() %}
+                          <option value="{{ group }}">{{ pretty_group }}</option>
+                      {% endfor %}
+                  </select>
+              </div>
+          </div>
+
+          <div id="corr_sample_method" class="form-group">
+              <label for="corr_sample_method" class="col-xs-2 control-label">Type</label>
+              <div class="col-xs-4 controls">
+                  <select name="corr_sample_method" class="form-control">
+                      <option value="pearson">Pearson</option>
+                      <option value="spearman">Spearman Rank</option>
+                      <option value="bicor">Biweight Midcorrelation</option>
+                  </select>
+              </div>
+          </div>
+          {% if dataset.type != "Publish" %}
+          <div class="form-group">
+              <label class="col-xs-2 control-label">Min Expr</label>
+              <div class="col-xs-4 controls">
+                  <input name="min_expr" value="" type="text" class="form-control min-expr-field">
+              </div>
+          </div>
+          <div class="form-group">
+              <label class="col-xs-2 control-label">Location</label>
+              <div class="col-xs-6 controls">
+                  <span>
+                  Chr: <input name="loc_chr" value="" type="text" class="form-control corr-location">&nbsp;&nbsp;&nbsp;
+                  Mb: <input name="min_loc_mb" value="" type="text" class="form-control corr-location"> &nbsp;to&nbsp; <input name="max_loc_mb" value="" type="text" class="form-control corr-location">
+                  </span>
+                  <br>
+              </div>
+          </div>
+          {% endif %}
+          <div class="form-group">
+              <label class="col-xs-2 control-label">Range</label>
+              <div class="col-xs-5 controls">
+                  <input name="p_range_lower" value="" type="hidden">
+                  <input name="p_range_upper" value="" type="hidden">
+                  <span class="inline-div">
+                  <div id="p_range_slider" class="p-range-slider"></div>
+                  <span id="p_range_lower" class="p-range-lower"></span>
+                  <span id="p_range_upper" class="p-range-upper"></span>
+                  </span>
+              </div>
+          </div>
+
+          <div class="form-group">
+              <label for="corr_sample_method" class="col-xs-2 control-label"></label>
+              <div class="col-xs-3 controls">
+                  <input type="button" class="btn corr_compute submit_special btn-success" data-url="/corr_compute" title="Compute Correlation" value="Compute">
+              </div>
+          </div>
+      </div>
     </div>
-  </div>
-  <div>
-    <span id="sample_r_desc" class="correlation_desc fs12">
-        The <a href="http://genenetwork.org/correlationAnnotation.html#genetic_r">Sample Correlation</a>
-        is computed
-        between trait data and any
-        other traits in the sample database selected above. Use
-        <a href="http://www.genenetwork.org/glossary.html#Correlations">Spearman
-        Rank</a>
-        when the sample size is small (&lt;20) or when there are influential outliers.
-    </span>
-    <span id="lit_r_desc" style="display: none;" class="correlation_desc fs12">
-        The <a href="http://genenetwork.org/correlationAnnotation.html#literatureCorr">Literature Correlation</a>
-        (Lit r) between
-        this gene and all other genes is computed<br>
-        using the <a href="https://grits.eecs.utk.edu/sgo/sgo.html">
-        Semantic Gene Organizer</a>
-        and human, rat, and mouse data from PubMed.
-        Values are ranked by Lit r, but Sample r and Tissue r are also displayed.<br>
-        <a href="http://genenetwork.org/glossary.html#Literature">More on using Lit r</a>
-    </span>
-    <span id="tissue_r_desc" style="display: none;" class="correlation_desc fs12">
-        The <a href="http://genenetwork.org/webqtl/main.py?FormID=tissueCorrelation">Tissue Correlation</a>
-        (Tissue r)
-        estimates the similarity of expression of two genes
-        or transcripts across different cells, tissues, or organs
-        (<a href="http://genenetwork.org/correlationAnnotation.html#tissueCorr">glossary</a>).
-        Tissue correlations
-        are generated by analyzing expression in multiple samples usually taken from single cases.<br>
-        <strong>Pearson</strong> and <strong>Spearman Rank</strong> correlations have been
-        computed for all pairs of genes using data from mouse samples.<br>
-    </span>
-  </div>
-</div>
\ No newline at end of file
+    <div class="col-xs-4">
+      <div class="section-form-div">
+        <span id="sample_r_desc" class="correlation_desc">
+            The <a href="http://genenetwork.org/correlationAnnotation.html#genetic_r">Sample Correlation</a>
+            is computed
+            between trait data and any
+            other traits in the sample database selected above. Use
+            <a href="http://www.genenetwork.org/glossary.html#Correlations">Spearman
+            Rank</a>
+            when the sample size is small (&lt;20) or when there are influential outliers.
+        </span>
+        <span id="lit_r_desc" style="display: none;" class="correlation_desc">
+            The <a href="http://genenetwork.org/correlationAnnotation.html#literatureCorr">Literature Correlation</a>
+            (Lit r) between
+            this gene and all other genes is computed<br>
+            using the <a href="https://grits.eecs.utk.edu/sgo/sgo.html">
+            Semantic Gene Organizer</a>
+            and human, rat, and mouse data from PubMed.
+            Values are ranked by Lit r, but Sample r and Tissue r are also displayed.<br>
+            <a href="http://genenetwork.org/glossary.html#Literature">More on using Lit r</a>
+        </span>
+        <span id="tissue_r_desc" style="display: none;" class="correlation_desc">
+            The <a href="http://genenetwork.org/webqtl/main.py?FormID=tissueCorrelation">Tissue Correlation</a>
+            (Tissue r)
+            estimates the similarity of expression of two genes
+            or transcripts across different cells, tissues, or organs
+            (<a href="http://genenetwork.org/correlationAnnotation.html#tissueCorr">glossary</a>).
+            Tissue correlations
+            are generated by analyzing expression in multiple samples usually taken from single cases.<br>
+            <strong>Pearson</strong> and <strong>Spearman Rank</strong> correlations have been
+            computed for all pairs of genes using data from mouse samples.<br>
+        </span>
+      </div>
+    </div>
+  </div>
\ No newline at end of file
diff --git a/wqflask/wqflask/templates/show_trait_details.html b/wqflask/wqflask/templates/show_trait_details.html
index 4aced50c..d2999eef 100644
--- a/wqflask/wqflask/templates/show_trait_details.html
+++ b/wqflask/wqflask/templates/show_trait_details.html
@@ -1,20 +1,20 @@
-<table class="table" style="max-width: 1400px;">
+<table class="table">
     <tr>
-        <td width="150px"><b>Group</b></td>
+        <td><b>Group</b></td>
         <td>{{ this_trait.dataset.group.species[0]|upper }}{{ this_trait.dataset.group.species[1:] }}: {{ this_trait.dataset.group.name }} group</td>
     </tr>
     {% if this_trait.dataset.type == 'Publish' %}
     <tr>
         <td><b>Phenotype</b></td>
-        <td><div style="width:40%;">{{ this_trait.description_fmt }}</div></td>
+        <td><div>{{ this_trait.description_fmt }}</div></td>
     </tr>
     <tr>
         <td><b>Authors</b></td>
-        <td><div style="width:40%;">{{ this_trait.authors }}</div></td>
+        <td><div>{{ this_trait.authors }}</div></td>
     </tr>
     <tr>
         <td><b>Title</b></td>
-        <td><div style="width:40%;">{{ this_trait.title }}</div></td>
+        <td><div>{{ this_trait.title }}</div></td>
     </tr>
     <tr>
         <td><b>Journal</b></td>
@@ -213,7 +213,7 @@
     {% endif %}
 </table>
 
-<div style="margin-bottom:15px;" class="btn-toolbar">
+<div class="btn-toolbar">
     <div class="btn-group">
         <button type="button" id="add_to_collection" class="btn btn-success" title="Add to Collection">Add</button>
         {% if this_trait.dataset.type == 'ProbeSet' or this_trait.dataset.type == 'Geno' %}
diff --git a/wqflask/wqflask/templates/show_trait_edit_data.html b/wqflask/wqflask/templates/show_trait_edit_data.html
index a8ed91b1..2e730248 100644
--- a/wqflask/wqflask/templates/show_trait_edit_data.html
+++ b/wqflask/wqflask/templates/show_trait_edit_data.html
@@ -1,10 +1,10 @@
 <div>
     {% for sample_type in sample_groups %}
-      <div style="padding-bottom: 10px;">
-        <div style="display: inline; height: 40px;">
-          <input type="text" id="{{ sample_type.sample_group_type }}_searchbox" class="form-control" style="width: 200px; display: inline; float: left; vertical-align: top;" placeholder="Search This Table For ...">
+      <div class="sample-table-container">
+        <div class="sample-table-search-container">
+          <input type="text" id="{{ sample_type.sample_group_type }}_searchbox" class="form-control sample-table-search" placeholder="Search This Table For ...">
         </div>
-        <div style="padding-left: 10px; display: inline;">
+        <div class="sample-table-export-container">
           <button class="btn btn-default export">Export <span class="glyphicon glyphicon-download-alt"></span></button>
           <select class="select optional span2 export_format">
             <option value="excel">Excel</option>
@@ -12,33 +12,33 @@
           </select>
           <input type="button" class="btn btn-success reset" value="Reset">
         </div>
-      </div>
-      <div id="export_code" style="width: 600px; display: none;">
-        <pre style="padding-top: 0px; padding-bottom: 0px; height: 150px;">
-          <code>
-# read into R
-trait <- read.csv("{{ this_trait.display_name}}.csv", header = TRUE, comment.char = "#")
+        <div id="export_code" class="export-code-container">
+          <pre class="export-code_field">
+            <code>
+  # read into R
+  trait <- read.csv("{{ this_trait.display_name}}.csv", header = TRUE, comment.char = "#")
 
-# read into python
-import pandas as pd
-trait = pd.read_csv("{{ this_trait.display_name}}.csv", header = 0, comment = "#")
-          </code>
-        </pre>
+  # read into python
+  import pandas as pd
+  trait = pd.read_csv("{{ this_trait.display_name}}.csv", header = 0, comment = "#")
+            </code>
+          </pre>
+        </div>
       </div>
-        {% set outer_loop = loop %}
-        <div class="sample_group" style="width:{{ trait_table_width }};">
-          <div style="position: relative;">
-            <div style="display: inline;"><h3 style="float: left;">{{ sample_type.header }}<span name="transform_text"></span></h3>
-          </div>
-          <div id="table_container">
-          <table class="table-hover table-striped cell-border" id="samples_{{ sample_type.sample_group_type }}" style="float: left; width:100%;">
-              <tbody>
-                <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
-              </tbody>
-          </table>
-          </div>
+      {% set outer_loop = loop %}
+      <div class="sample_group" style="width:{{ trait_table_width }};">
+        <div style="position: relative;">
+          <div class="inline-div"><h3 style="float: left;">{{ sample_type.header }}<span name="transform_text"></span></h3></div>
         </div>
-        <br>
+        <div id="table_container">
+        <table class="table-hover table-striped cell-border sample-table" id="samples_{{ sample_type.sample_group_type }}">
+            <tbody>
+              <td colspan="100%" align="center"><br><b><font size="15">Loading...</font></b><br></td>
+            </tbody>
+        </table>
+        </div>
+      </div>
+      <br>
     {% endfor %}
     <input type="hidden" name="Default_Name">
 </div>
diff --git a/wqflask/wqflask/templates/show_trait_mapping_tools.html b/wqflask/wqflask/templates/show_trait_mapping_tools.html
index 94388b2f..eca436c6 100755
--- a/wqflask/wqflask/templates/show_trait_mapping_tools.html
+++ b/wqflask/wqflask/templates/show_trait_mapping_tools.html
@@ -1,38 +1,35 @@
-<div>
+<div class="row mapping-main">
     {% if dataset.group.mapping_names|length > 0 %}
-    <div class="col-xs-3" style="min-width: 400px;">
+    <div class="col-xs-2 mapping-options">
         <div class="tabbable"> <!-- Only required for left/right tabs -->
 
             <ul class="nav nav-pills">
                 {% for mapping_method in dataset.group.mapping_names %}
                 {% if mapping_method == "GEMMA" %}
-                <li class="gemma_tab mapping_tab {% if dataset.group.mapping_id == '1' or dataset.group.mapping_id == '2' %}active{% endif %}">
+                <li class="gemma-tab mapping-tab {% if dataset.group.mapping_id == '1' or dataset.group.mapping_id == '2' %}active{% endif %}">
                     <a href="#gemma" data-toggle="tab">GEMMA</a>
                 </li>
                 {% elif mapping_method == "R/qtl" %}
-                <li class="rqtl_geno_tab mapping_tab {% if dataset.group.mapping_id == '3' %}active{% endif %}">
+                <li class="rqtl-geno-tab mapping-tab {% if dataset.group.mapping_id == '3' %}active{% endif %}">
                     <a href="#rqtl_geno" data-toggle="tab">R/qtl</a>
                 </li>
                 {% elif mapping_method == "QTLReaper" %}
-                <li class="reaper_tab mapping_tab">
+                <li class="reaper-tab mapping-tab">
                     <a href="#interval_mapping" data-toggle="tab">Haley-Knott Regression</a>
                 </li>
                 {% endif %}
                 {% endfor %}
-                <!--<li>
-                    <a href="#pair_scan" data-toggle="tab">Pair Scan</a>
-                </li>-->
             </ul>
 
             <div class="tab-content">
                 {% for mapping_method in dataset.group.mapping_names %}
                 {% if mapping_method == "GEMMA" %}
                 <div class="tab-pane {% if dataset.group.mapping_id == '1' or dataset.group.mapping_id == '2' %}active{% endif %}" id="gemma">
-                    <div style="padding-top: 20px;" class="form-horizontal">
+                    <div class="form-horizontal section-form-div">
                         <div class="mapping_method_fields form-group">
-                            <label for="chr_select" style="text-align: right;" class="col-xs-3 control-label">Chromosome</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="chr_gemma" class="form-control" style="width: 80px;">
+                            <label for="chr_select" class="col-xs-3 control-label">Chromosome</label>
+                            <div class="col-xs-2 controls">
+                                <select id="chr_gemma" class="form-control chr-select">
                                     {% for item in chr_list %}
                                     <option value="{{ item[1] }}">{{ item[0] }}</option>
                                     {% endfor %}
@@ -41,8 +38,8 @@
                         </div>
                         {% if genofiles and genofiles|length>0 %}
                         <div class="mapping_method_fields form-group">
-                            <label for="genofiles" style="text-align: right;" class="col-xs-3 control-label">Genotypes</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="genofiles" class="col-xs-3 control-label">Genotypes</label>
+                            <div class="col-xs-8 controls">
                                 <select id="genofile_gemma" class="form-control">
                                     {% for item in genofiles %}
                                     <option value="{{item['location']}}:{{item['title']}}">{{item['title']}}</option>
@@ -52,14 +49,14 @@
                         </div>
                         {% endif %}
                         <div class="mapping_method_fields form-group">
-                            <label for="maf_gemma" style="text-align: right;" class="col-xs-3 control-label">MAF >=</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
-                                <input name="maf_gemma" value="{{ maf }}" type="text" class="form-control" style="width: 80px;">
+                            <label for="maf_gemma" class="col-xs-3 control-label">MAF >=</label>
+                            <div class="col-xs-4 controls">
+                                <input name="maf_gemma" value="{{ maf }}" type="text" class="form-control maf-select">
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" class="col-xs-3 control-label">Use LOCO</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label class="col-xs-3 control-label">Use LOCO</label>
+                            <div class="col-xs-6 controls">
                                 <label class="radio-inline">
                                     <input type="radio" name="use_loco" value="True" checked="">
                                     Yes
@@ -71,25 +68,22 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <div class="col-xs-3" style="text-align: right;">
-                            <label class="control-label">Covariates</label>
-                            <font size="2">Select covariate(s) from a collection</font>
-                            </div>
-                            <div style="margin-left:20px;" class="col-xs-7">
+                            <label class="col-xs-3 control-label">Covariates<br><span class="covar-text">Select covariate(s) from a collection</span></label>
+                            <div class="col-xs-8 covar-options">
                               {% if g.user_session.num_collections < 1 %}
                               No collections available. Please add traits to a collection to use them as covariates.
                               {% else %}
-                              <div style="margin-bottom: 10px;">
-                                <button type="button" id="select_covariates" class="btn btn-default" style="width: 80px; padding-right: 10px;">Select</button>
-                                <button type="button" id="remove_covariates" class="btn btn-default" style="width: 80px;">Remove</button>
+                              <div class="select-covar-div">
+                                <button type="button" id="select_covariates" class="btn btn-default select-covar-button">Select</button>
+                                <button type="button" id="remove_covariates" class="btn btn-default select-covar-button">Remove</button>
                               </div>
-                              <textarea rows="3" cols="50" readonly placeholder="No covariates selected" style="overflow-y: scroll; resize: none; width: 200px;" class="selected_covariates"></textarea>
+                              <textarea rows="3" cols="50" readonly placeholder="No covariates selected" class="selected-covariates"></textarea>
                               {% endif %}
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
                           <label class="col-xs-3 control-label"></label>
-                          <div style="margin-left:20px;" class="col-xs-6">
+                          <div class="col-xs-6">
                             <button id="gemma_compute" class="btn submit_special btn-success" data-url="/marker_regression" title="Compute Marker Regression" value="Compute">Compute</button>
                           </div>
                         </div>
@@ -97,20 +91,20 @@
                 </div>
                 {% elif mapping_method == "QTLReaper" %}
                 <div class="tab-pane" id="interval_mapping">
-                    <div style="margin-top: 20px" class="form-horizontal">
+                    <div class="form-horizontal section-form-div">
                         <div class="mapping_method_fields form-group">
-                            <label for="reaper_version" style="text-align: right;" class="col-xs-3 control-label">Version<sup><a href="https://github.com/chfi/rust-qtlreaper" target="_blank" title="'New' is the new qtlreaper implementation written in RUST by Christian Fischer. 'Original' corresponds to the original version written in C.">?</a></sup></label>
-                            <div style="margin-left:20px;" class="col-xs-3 controls">
-                                <select name="reaper_version" class="form-control" style="width: 80px;">
+                            <label for="reaper_version" class="col-xs-3 control-label">Version<sup><a href="https://github.com/chfi/rust-qtlreaper" target="_blank" title="'New' is the new qtlreaper implementation written in RUST by Christian Fischer. 'Original' corresponds to the original version written in C.">?</a></sup></label>
+                            <div class="col-xs-3 controls">
+                                <select name="reaper_version" class="form-control reaper-ver-select">
                                     <option value="new">New</option>
                                     <option value="original">Original</option>
                                 </select>
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label for="chr_select" style="text-align: right;" class="col-xs-3 control-label">Chromosome</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                    <select id="chr_reaper" class="form-control" style="width: 80px;">
+                            <label for="chr_select" class="col-xs-3 control-label">Chromosome</label>
+                            <div class="col-xs-2 controls">
+                                    <select id="chr_reaper" class="form-control chr-select">
                                     {% for item in chr_list %}
                                     <option value="{{ item[1] }}">{{ item[0] }}</option>
                                     {% endfor %}
@@ -119,9 +113,9 @@
                         </div>
                         {% if genofiles and genofiles|length>0 %}
                         <div class="mapping_method_fields form-group">
-                            <label for="scale_select" style="text-align: right;" class="col-xs-3 control-label">Map Scale</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="scale_reaper" class="form-control" style="width: 80px;">
+                            <label for="scale_select" class="col-xs-3 control-label">Map Scale</label>
+                            <div class="col-xs-2 controls">
+                                <select id="scale_reaper" class="form-control scale-select">
                                     {% for item in scales_in_geno[genofiles[0]['location']] %}
                                     <option value="{{ item[0] }}">{{ item[1] }}</option>
                                     {% endfor %}
@@ -129,8 +123,8 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" for="genofiles" class="col-xs-3 control-label">Genotypes</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="genofiles" class="col-xs-3 control-label">Genotypes</label>
+                            <div class="col-xs-4 controls">
                                 <select id="genofile_reaper" class="form-control">
                                     {% for item in genofiles %}
                                     <option value="{{item['location']}}:{{item['title']}}">{{item['title']}}</option>
@@ -140,9 +134,9 @@
                         </div>
                         {% else %}
                         <div class="mapping_method_fields form-group">
-                            <label for="scale_select" style="text-align: right;" class="col-xs-3 control-label">Map Scale</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="scale_reaper" class="form-control" style="width: 80px;">
+                            <label for="scale_select" class="col-xs-3 control-label">Map Scale</label>
+                            <div class="col-xs-2 controls">
+                                <select id="scale_reaper" class="form-control scale-select">
                                     {% for item in scales_in_geno[dataset.group.name + ".geno"] %}
                                     <option value="{{ item[0] }}">{{ item[1] }}</option>
                                     {% endfor %}
@@ -151,79 +145,48 @@
                         </div>
                         {% endif %}
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" for="mapping_permutations" class="col-xs-3 control-label">Permutations</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="mapping_permutations" class="col-xs-3 control-label">Permutations</label>
+                            <div class="col-xs-4 controls">
                                 <input name="num_perm_reaper" value="2000" type="text" class="form-control">
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" for="mapping_bootstraps" class="col-xs-3 control-label">Bootstraps</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
-                                <input name="num_bootstrap" value="2000" type="text" class="form-control">
-                            </div>
-                        </div>
-                        <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" for="control_for" class="col-xs-3 control-label">Control&nbsp;for<br>Cofactors</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
-                                {% if dataset.type == 'ProbeSet' and this_trait.locus_chr != "" %}
-                                <input name="control_reaper" value="{{ nearest_marker }}" type="text" style="width: 160px; display: inline-block;" class="form-control" />
-                                {% else %}
-                                <input name="control_reaper" value="" type="text" style="display: inline-block; padding-right: 10px;" class="form-control" />
-                                {% endif %}
-                                <input type="radio" name="do_control_reaper" value="true"> Yes&nbsp;&nbsp;<input type="radio" name="do_control_reaper" value="false" checked="" style="margin-left: 10px;"> No</span>
-                                <!--
-                                <label class="radio-inline">
-                                    <input type="radio" name="do_control_reaper" value="true">
-                                    Yes
-                                </label>
-                                <label class="radio-inline">
-                                    <input type="radio" name="do_control_reaper" value="false" checked="">
-                                    No
-                                </label>
-                            -->
-                            </div>
-                        </div>
-
-<!--
-                        <div class="mapping_method_fields form-group">
-                            <label for="mapping_bootstraps" class="col-xs-3 control-label" title="Bootstrapping Resamples">Bootstrap Test (n=2000)</label>
+                            <label for="mapping_bootstraps" class="col-xs-3 control-label">Bootstraps</label>
                             <div class="col-xs-4 controls">
-                                <label>
-                                    <input type="checkbox" name="bootCheck" id="bootCheck"> Bootstrap Test (n=2000)
-                                </label>
+                                <input name="num_bootstrap" value="2000" type="text" class="form-control">
                             </div>
                         </div>
-
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:left;" class="col-xs-12 control-label">Display Additive Effect</label>
-                            <div class="col-xs-12 controls" id="display_additive_effect">
+                            <label for="control_for" class="col-xs-3 control-label">Control&nbsp;for<br>Cofactors</label>
+                            <div class="col-xs-6 controls">
+                                <input name="control_reaper" value="{% if dataset.type == 'ProbeSet' and this_trait.locus_chr != '' %}{{ nearest_marker }}{% endif %}" type="text" class="form-control cofactor-input" />
+                                <br>
                                 <label class="radio-inline">
-                                    <input type="radio" name="display_additive" id="display_additive" value="yes" checked="">
-                                    Yes
+                                  <input type="radio" name="do_control_reaper" value="true" checked="">
+                                  Yes
                                 </label>
                                 <label class="radio-inline">
-                                    <input type="radio" name="display_additive" id="display_additive" value="no">
-                                    No
+                                  <input type="radio" name="do_control_reaper" value="false">
+                                  No
                                 </label>
                             </div>
                         </div>
--->
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align: right;" class="col-xs-3 control-label">Interval Map</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label class="col-xs-3 control-label">Interval Map</label>
+                            <div class="col-xs-6 controls">
                                 <label class="radio-inline">
-                                    <input type="radio" name="manhattan_plot_reaper" value="False" checked="">
+                                    <input type="radio" name="manhattan_plot_reaper" value="false" checked="">
                                     Yes
                                 </label>
                                 <label class="radio-inline">
-                                    <input type="radio" name="manhattan_plot_reaper" value="True">
+                                    <input type="radio" name="manhattan_plot_reaper" value="true">
                                     No
                                </label>
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
                             <label class="col-xs-3 control-label"></label>
-                            <div style="margin-left:20px;" class="col-xs-6">
+                            <div class="col-xs-6">
                               <button id="interval_mapping_compute" class="btn submit_special btn-success" data-url="/marker_regression" title="Compute Interval Mapping" value="Compute">Compute</button>
                             </div>
                         </div>
@@ -231,11 +194,11 @@
                 </div>
                 {% elif mapping_method == "R/qtl" %}
                 <div class="tab-pane {% if dataset.group.mapping_id == '3' %}active{% endif %}" id="rqtl_geno">
-                    <div style="margin-top: 20px" class="form-horizontal">
+                    <div class="form-horizontal section-form-div">
                         <div class="mapping_method_fields form-group">
-                            <label for="chr_select" style="text-align: right;" class="col-xs-3 control-label">Chromosome</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                    <select id="chr_rqtl_geno" class="form-control" style="width: 80px;">
+                            <label for="chr_select" class="col-xs-3 control-label">Chromosome</label>
+                            <div class="col-xs-2 controls">
+                                    <select id="chr_rqtl_geno" class="form-control chr-select">
                                     {% for item in chr_list %}
                                     <option value="{{ item[1] }}">{{ item[0] }}</option>
                                     {% endfor %}
@@ -244,9 +207,9 @@
                         </div>
                         {% if genofiles and genofiles|length > 0 %}
                         <div class="mapping_method_fields form-group">
-                            <label for="scale_select" style="text-align: right;" class="col-xs-3 control-label">Map Scale</label>
-                            <div style="margin-left:20px;" class="col-xs-2 controls">
-                                <select id="scale_rqtl_geno" class="form-control" style="width: 80px;">
+                            <label for="scale_select" class="col-xs-3 control-label">Map Scale</label>
+                            <div class="col-xs-2 controls">
+                                <select id="scale_rqtl_geno" class="form-control scale-select">
                                     {% for item in scales_in_geno[genofiles[0]['location']] %}
                                     <option value="{{ item[0] }}">{{ item[1] }}</option>
                                     {% endfor %}
@@ -254,8 +217,8 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="genofiles" class="col-xs-3 control-label">Genotypes</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="genofiles" class="col-xs-3 control-label">Genotypes</label>
+                            <div class="col-xs-4 controls">
                                 <select id="genofile_rqtl_geno" class="form-control">
                                     {% for item in genofiles %}
                                     <option value="{{item['location']}}:{{item['title']}}">{{item['title']}}</option>
@@ -265,15 +228,15 @@
                         </div>
                         {% endif %}
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="mapping_permutations" class="col-xs-3 control-label">Permutations</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="mapping_permutations" class="col-xs-3 control-label">Permutations</label>
+                            <div class="col-xs-4 controls">
                                 <input name="num_perm_rqtl_geno" value="200" type="text" class="form-control">
                             </div>
                         </div>
                         {% if sample_groups[0].attributes|length > 0 %}
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" class="col-xs-3 control-label">Stratified</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label class="col-xs-3 control-label">Stratified</label>
+                            <div class="col-xs-6 controls">
                                 <label class="radio-inline">
                                     <input type="radio" name="perm_strata" value="True" checked=""> 
                                     Yes
@@ -286,27 +249,23 @@
                         </div>
                         {% endif %}
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="control_for" class="col-xs-3 control-label">Control&nbsp;for</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
-                                {% if dataset.type == 'ProbeSet' and this_trait.locus_chr != "" %}
-                                <input name="control_rqtl_geno" value="{{ nearest_marker }}" type="text" style="width: 160px;" class="form-control" />
-                                {% else %}
-                                <input name="control_rqtl_geno" value="" type="text" class="form-control" />
-                                {% endif %}
-                                <label class="radio-inline">
-                                    <input type="radio" name="do_control_rqtl" value="true">
-                                    Yes
-                                </label>
-                                <label class="radio-inline">
-                                    <input type="radio" name="do_control_rqtl" value="false" checked="">
-                                    No
-                                </label>
+                            <label for="control_for" class="col-xs-3 control-label">Control&nbsp;for</label>
+                            <div class="col-xs-6 controls">
+                              <input name="control_rqtl_geno" value="{% if dataset.type == 'ProbeSet' and this_trait.locus_chr != '' %}{{ nearest_marker }}{% endif %}" type="text" class="form-control cofactor-input" />
+                              <label class="radio-inline">
+                                  <input type="radio" name="do_control_rqtl" value="true">
+                                  Yes
+                              </label>
+                              <label class="radio-inline">
+                                  <input type="radio" name="do_control_rqtl" value="false" checked="">
+                                  No
+                              </label>
                             </div>
                         </div>
 
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="mapmodel_rqtl_geno" class="col-xs-3 control-label">Model</label>
-                            <div style="margin-left:20px;" class="col-xs-4 controls">
+                            <label for="mapmodel_rqtl_geno" class="col-xs-3 control-label">Model</label>
+                            <div class="col-xs-4 controls">
                               <select id="mapmodel_rqtl_geno" name="mapmodel_rqtl_geno" class="form-control">
                                 <option value="normal">Normal</option>
                                 {% if binary == "true" %}<option value="binary">Binary</option>{% endif %}
@@ -317,8 +276,8 @@
                         </div>
 
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" for="mapmethod_rqtl_geno" class="col-xs-3 control-label">Method</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label for="mapmethod_rqtl_geno" class="col-xs-3 control-label">Method</label>
+                            <div class="col-xs-6 controls">
                               <select id="mapmethod_rqtl_geno" name="mapmethod_rqtl_geno" class="form-control">
                                 <option value="hk" selected>Haley-Knott</option>
                                 <option value="ehk">Extended Haley-Knott</option>
@@ -329,8 +288,8 @@
                             </div>
                         </div>
                         <div id="missing_geno_div" class="mapping_method_fields form-group" style="display: none;">
-                            <label style="text-align:right;" for="missing_genotypes" class="col-xs-3 control-label"></label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label for="missing_genotypes" class="col-xs-3 control-label"></label>
+                            <div class="col-xs-6 controls">
                               <select id="missing_genotype" name="missing_genotypes" class="form-control">
                                 <option value="mr">Remove Samples w/o Genotypes</option>
                                 <option value="mr-imp">Single Imputation</option>
@@ -338,25 +297,9 @@
                               </select>
                             </div>
                         </div>
-
-                        <!--
-                        <div class="mapping_method_fields form-group">
-                            <label style="text-align:left;" class="col-xs-12 control-label">Pair Scan</label>
-                            <div class="col-xs-12 controls">
-                                <label class="radio-inline">
-                                    <input type="radio" name="pair_scan" value="true">
-                                    Yes
-                                </label>
-                                <label class="radio-inline">
-                                    <input type="radio" name="pair_scan" value="false" checked="">
-                                    No
-                               </label>
-                            </div>
-                        </div>
-                        -->
                         <div class="mapping_method_fields form-group">
-                            <label style="text-align:right;" class="col-xs-3 control-label">Manhattan<br>Plot</label>
-                            <div style="margin-left:20px;" class="col-xs-6 controls">
+                            <label class="col-xs-3 control-label">Manhattan<br>Plot</label>
+                            <div class="col-xs-6 controls">
                                 <label class="radio-inline">
                                     <input type="radio" name="manhattan_plot_rqtl" value="True">
                                     Yes
@@ -368,25 +311,22 @@
                             </div>
                         </div>
                         <div class="mapping_method_fields form-group">
-                            <div class="col-xs-3" style="text-align: right;">
-                            <label class="control-label">Covariates</label>
-                            <font size="2">Select covariate(s) from a collection</font>
-                            </div>
-                            <div style="margin-left:20px;" class="col-xs-7">
-                              {% if g.user_session.num_collections < 1 %}
-                              No collections available. Please add traits to a collection to use them as covariates.
-                              {% else %}
-                              <div style="margin-bottom: 10px;">
-                                <button type="button" class="btn btn-default select_covariates" style="width: 80px; padding-right: 10px;">Select</button>
-                                <button type="button" class="btn btn-default remove_covariates" style="width: 80px;">Remove</button>
-                              </div>
-                              <textarea rows="3" cols="50" readonly placeholder="No covariates selected" style="overflow-y: scroll; resize: none; width: 200px;" class="selected_covariates"></textarea>
-                              {% endif %}
-                            </div>
+                          <label class="col-xs-3 control-label">Covariates<br><span class="covar-text">Select covariate(s) from a collection</span></label>
+                          <div class="col-xs-8 covar-options">
+                            {% if g.user_session.num_collections < 1 %}
+                            No collections available. Please add traits to a collection to use them as covariates.
+                            {% else %}
+                            <div class="select-covar-div">
+                              <button type="button" id="select_covariates" class="btn btn-default select-covar-button">Select</button>
+                              <button type="button" id="remove_covariates" class="btn btn-default select-covar-button">Remove</button>
+                            </div>
+                            <textarea rows="3" cols="50" readonly placeholder="No covariates selected" class="selected-covariates"></textarea>
+                            {% endif %}
+                          </div>
                         </div>
                         <div class="mapping_method_fields form-group">
                             <label class="col-xs-3 control-label"></label>
-                            <div style="margin-left:20px;" class="col-xs-6">
+                            <div class="col-xs-6 controls">
                               <button id="rqtl_geno_compute" class="btn submit_special btn-success" data-url="/marker_regression" title="Compute Marker Regression" value="Compute">Compute</button>
                             </div>
                         </div>
@@ -397,23 +337,25 @@
             </div>
         </div>
     </div>
-    <div>
-        <dl>
-             {% for mapping_method in dataset.group.mapping_names %}
-             {% if mapping_method == "GEMMA" %}
-             <dt style="padding-top: 20px;">GEMMA</dt>
-             <dd>Maps traits with correction for kinship among samples using a linear mixed model method, and also allows users to fit multiple covariates such as sex, age, treatment, and genetic markers (<a href="https://www.ncbi.nlm.nih.gov/pubmed/24531419">PMID: 2453419</a>, and <a href="https://github.com/genetics-statistics/GEMMA"> GitHub code</a>). GEMMA incorporates the Leave One Chromosome Out (LOCO) method to ensure that the correction for kinship does not remove useful genetic variance near each marker. Markers can be filtered to include only those with minor allele frequencies (MAF) above a threshold. The default MAF is 0.05.</dd>
-             {% elif mapping_method == "R/qtl" %}
-             <dt style="margin-top: 20px;">R/qtl (version 1.44.9</dt>
-             <dd>The original R/qtl mapping package that supports classic experimental crosses including 4-parent F2 intercrosses (e.g., NIA ITP UM-HET3). R/qtl is ideal for populations that do not have complex kinship or admixture (<a href="https://www.ncbi.nlm.nih.gov/pubmed/12724300">PMID: 12724300</a>). Both R/qtl as implemented here, and R/qtl2 (<a href="https://www.ncbi.nlm.nih.gov/pubmed/30591514">PMID: 30591514</a>) are available as <a href="https://kbroman.org/pages/software.html">R suites</a>.</dd>
-             {% elif mapping_method == "QTLReaper" %}
-             <dt style="margin-top: 20px;">Haley-Knott Regression</dt>
-             <dd>Fast linear mapping method (<a href="https://www.ncbi.nlm.nih.gov/pubmed/16718932">PMID 16718932</a>) works well with F2 intercrosses and backcrosses, but that is not recommended for complex or admixed populations (e.g., GWAS or heterogeneous stock studies) or for advanced intercrosses, recombinant inbred families, or diallel crosses. Interactive plots in GeneNetwork have relied on the fast HK mapping for two decades and we still use this method for mapping omics data sets and computing genome-wide permutation threshold (<a href="https://github.com/pjotrp/QTLReaper">QTL Reaper code</a>).</dd>
-             {% endif %}
-             {% endfor %}
-        </dl>
-        <div class="rqtl_description" style="padding-top: 40px; display: none;">
-        More information on R/qtl mapping models and methods can be found <a href="http://www.rqtl.org/tutorials/rqtltour.pdf">here</a>.
+    <div class="col-xs-6">
+        <div class="section-form-div">
+            <dl>
+                {% for mapping_method in dataset.group.mapping_names %}
+                {% if mapping_method == "GEMMA" %}
+                <dt>GEMMA</dt>
+                <dd>Maps traits with correction for kinship among samples using a linear mixed model method, and also allows users to fit multiple covariates such as sex, age, treatment, and genetic markers (<a href="https://www.ncbi.nlm.nih.gov/pubmed/24531419">PMID: 2453419</a>, and <a href="https://github.com/genetics-statistics/GEMMA"> GitHub code</a>). GEMMA incorporates the Leave One Chromosome Out (LOCO) method to ensure that the correction for kinship does not remove useful genetic variance near each marker. Markers can be filtered to include only those with minor allele frequencies (MAF) above a threshold. The default MAF is 0.05.</dd>
+                {% elif mapping_method == "R/qtl" %}
+                <dt class="map-method-text">R/qtl (version 1.44.9</dt>
+                <dd>The original R/qtl mapping package that supports classic experimental crosses including 4-parent F2 intercrosses (e.g., NIA ITP UM-HET3). R/qtl is ideal for populations that do not have complex kinship or admixture (<a href="https://www.ncbi.nlm.nih.gov/pubmed/12724300">PMID: 12724300</a>). Both R/qtl as implemented here, and R/qtl2 (<a href="https://www.ncbi.nlm.nih.gov/pubmed/30591514">PMID: 30591514</a>) are available as <a href="https://kbroman.org/pages/software.html">R suites</a>.</dd>
+                {% elif mapping_method == "QTLReaper" %}
+                <dt class="map-method-text">Haley-Knott Regression</dt>
+                <dd>Fast linear mapping method (<a href="https://www.ncbi.nlm.nih.gov/pubmed/16718932">PMID 16718932</a>) works well with F2 intercrosses and backcrosses, but that is not recommended for complex or admixed populations (e.g., GWAS or heterogeneous stock studies) or for advanced intercrosses, recombinant inbred families, or diallel crosses. Interactive plots in GeneNetwork have relied on the fast HK mapping for two decades and we still use this method for mapping omics data sets and computing genome-wide permutation threshold (<a href="https://github.com/pjotrp/QTLReaper">QTL Reaper code</a>).</dd>
+                {% endif %}
+                {% endfor %}
+            </dl>
+            <div class="rqtl-description">
+            More information on R/qtl mapping models and methods can be found <a href="http://www.rqtl.org/tutorials/rqtltour.pdf">here</a>.
+            </div>
         </div>
     </div>
     <div id="mapping_result_holder_wrapper" style="display:none;">
diff --git a/wqflask/wqflask/templates/show_trait_statistics.html b/wqflask/wqflask/templates/show_trait_statistics.html
index 7bdb3ef9..4f347d4e 100644
--- a/wqflask/wqflask/templates/show_trait_statistics.html
+++ b/wqflask/wqflask/templates/show_trait_statistics.html
@@ -1,148 +1,137 @@
 <div>
-        <div class="tabbable"> <!-- Only required for left/right tabs -->
-            <ul class="nav nav-pills">
-                <li class="active">
-                    <a href="#stats_tab" data-toggle="tab">Basic Statistics</a>
-                </li>
-                <li>
-                    <a href="#histogram_tab" class="histogram_tab" data-toggle="tab">Histogram</a>
-                </li>
-                {% if num_values < 256 %}
-                <li>
-                    <a href="#bar_chart_tab" class="bar_chart_tab" data-toggle="tab">Bar Chart</a>
-                </li>
-                {% endif %}
-                <li>
-                    <a href="#probability_plot" class="prob_plot_tab" data-toggle="tab">Probability Plot</a>
-                </li>
-                <li>
-                    <a href="#box_plot_tab" class="box_plot_tab" data-toggle="tab">Box Plot</a>
-                </li>
-                <li>
-                    <a href="#violin_plot_tab" class="violin_plot_tab" data-toggle="tab">Violin Plot</a>
-                </li>
-                <li>
-                    <a href="#scatterplot_matrix" data-toggle="tab">Scatterplot Matrix</a>
-                </li>
-            </ul>
-
-            <div class="tab-content">
-                <div class="tab-pane active" id="stats_tab">
-                    <div style="padding: 20px;" class="form-horizontal">
-                            <table id="stats_table" style="width: {{ stats_table_width }}px; float: left;" class="table table-hover table-striped table-bordered"></table>
-                    </div>
-                </div>   
-                <div class="tab-pane" id="histogram_tab">
-                    <div style="padding: 20px" class="form-horizontal">
-                        {% if sample_groups|length != 1 %}
-                        <select class="histogram_samples_group">
-                            {% for group, pretty_group in sample_group_types.items() %}
-                                <option value="{{ group }}">{{ pretty_group }}</option>
-                            {% endfor %}
-                        </select>
-                        <br><br>
-                        {% endif %}
-                        <div id="histogram_container">
-                            <div id="histogram" class="barchart"></div>
-                        </div>
-                    </div>
+    <div class="tabbable"> <!-- Only required for left/right tabs -->
+        <ul class="nav nav-pills">
+            <li class="active">
+                <a href="#stats_tab" data-toggle="tab">Basic Statistics</a>
+            </li>
+            <li>
+                <a href="#histogram_tab" class="histogram_tab" data-toggle="tab">Histogram</a>
+            </li>
+            {% if num_values < 256 %}
+            <li>
+                <a href="#bar_chart_tab" class="bar_chart_tab" data-toggle="tab">Bar Chart</a>
+            </li>
+            {% endif %}
+            <li>
+                <a href="#probability_plot" class="prob_plot_tab" data-toggle="tab">Probability Plot</a>
+            </li>
+            <li>
+                <a href="#box_plot_tab" class="box_plot_tab" data-toggle="tab">Box Plot</a>
+            </li>
+            <li>
+                <a href="#violin_plot_tab" class="violin_plot_tab" data-toggle="tab">Violin Plot</a>
+            </li>
+            <li>
+                <a href="#scatterplot_matrix" data-toggle="tab">Scatterplot Matrix</a>
+            </li>
+        </ul>
+        <div class="tab-content">
+            <div class="tab-pane active" id="stats_tab">
+                <div class="form-horizontal section-form-div">
+                        <table id="stats_table" style="width: {{ stats_table_width }}px;" class="table table-hover table-striped table-bordered left-float"></table>
                 </div>
-                {% if num_values < 256 %}
-                <div class="tab-pane" id="bar_chart_tab">
-                    <div style="padding: 20px" class="form-horizontal">
-                        {% if sample_groups|length != 1 %}
-                        <select class="bar_chart_samples_group">
-                            {% for group, pretty_group in sample_group_types.items() %}
-                                <option value="{{ group }}">{{ pretty_group }}</option>
-                            {% endfor %}
-                        </select>
-                        {% endif %}
-                        {% if sample_groups[0].attributes %}
-                        <div class="input-append">
-                            <select id="color_attribute" size="1">
-                                <option value="None">None</option>
-                                {% for attribute in sample_groups[0].attributes %}
-                                <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">
-                                    {{ sample_groups[0].attributes[attribute].name }}</option>
-                                {% endfor %}
-                            </select>
-                        </div>
-                        {% endif %}
-                        <div id="update_bar_chart" class="btn-group" style="margin-bottom: 5px;">
-                            <button type="button" class="btn btn-default sort_by_name" value="name">
-                            <i class="icon-resize-horizontal"></i> Sort By Name
-                            </button>
-                            <button type="button" class="btn btn-default sort_by_value" value="value">
-                            <i class="icon-signal"></i> Sort By Value
-                            </button>
-                        </div>
-                        <!--
-                        <div class="btn-group">
-                            <button type="button" class="btn btn-default" id="color_by_trait" style="margin-bottom: 5px;">
-                                <i class="icon-tint"></i> Color by Trait
-                            </button>
-                        </div>
-                        -->
-                        <div id="bar_chart_container">
-                            <div id="bar_chart"></div>
-                        </div>
+            </div>
+            <div class="tab-pane" id="histogram_tab">
+                <div class="form-horizontal section-form-div">
+                    {% if sample_groups|length != 1 %}
+                    Select Group:
+                    <select class="histogram_samples_group">
+                        {% for group, pretty_group in sample_group_types.items() %}
+                            <option value="{{ group }}">{{ pretty_group }}</option>
+                        {% endfor %}
+                    </select>
+                    <br><br>
+                    {% endif %}
+                    <div id="histogram_container">
+                        <div id="histogram" class="barchart"></div>
                     </div>
                 </div>
-                {% endif %}
-                <div class="tab-pane" id="probability_plot">
-                    <div style="padding: 20px" class="form-horizontal">
-                        {% if sample_groups|length != 1 %}
-                        Select Group:
-                        <select class="prob_plot_samples_group">
-                            {% for group, pretty_group in sample_group_types.items() %}
-                                <option value="{{ group }}">{{ pretty_group }}</option>
+            </div>
+            {% if num_values < 256 %}
+            <div class="tab-pane" id="bar_chart_tab">
+                <div class="form-horizontal section-form-div">
+                    {% if sample_groups|length != 1 %}
+                    Select Group:
+                    <select class="bar_chart_samples_group">
+                        {% for group, pretty_group in sample_group_types.items() %}
+                            <option value="{{ group }}">{{ pretty_group }}</option>
+                        {% endfor %}
+                    </select>
+                    {% endif %}
+                    {% if sample_groups[0].attributes %}
+                    <div class="input-append">
+                        <select id="color_attribute" size="1">
+                            <option value="None">None</option>
+                            {% for attribute in sample_groups[0].attributes %}
+                            <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">
+                                {{ sample_groups[0].attributes[attribute].name }}</option>
                             {% endfor %}
                         </select>
-                        <br>
-                        <br>
-                        {% endif %}
-
-                        <div id="prob_plot_container">
-                            <div id="prob_plot_div"></div>
-                        </div>
-                        <div id="shapiro_wilk_text"></div>
-                        <div>
-                            More about <a href="http://en.wikipedia.org/wiki/Normal_probability_plot">Normal Probability Plots</a> and more
-                            about interpreting these plots from the <a href="http://genenetwork.org/glossary.html#normal_probability">glossary</a>
-                        </div>
-
                     </div>
-
-                </div>
-                <div class="tab-pane" id="box_plot_tab">
-                    <div id="box_plot_container">
-                        <div id="box_plot"></div>
+                    {% endif %}
+                    <div id="update_bar_chart" class="btn-group">
+                        <button type="button" class="btn btn-default sort_by_name" value="name">
+                        <i class="icon-resize-horizontal"></i> Sort By Name
+                        </button>
+                        <button type="button" class="btn btn-default sort_by_value" value="value">
+                        <i class="icon-signal"></i> Sort By Value
+                        </button>
                     </div>
-                </div>
-                <div class="tab-pane" id="violin_plot_tab">
-                    <div id="violin_plot_container">
-                        <div id="violin_plot"></div>
+                    <div id="bar_chart_container">
+                        <div id="bar_chart"></div>
                     </div>
                 </div>
-                <div class="tab-pane" id="scatterplot_matrix">
-                    
-                    <div style="margin-bottom:40px;" class="btn-group">
-                        <button type="button" class="btn btn-default" id="select_compare_trait">
-                            <i class="icon-th-large"></i> Select Traits
-                        </button>
-                        <button type="button" class="btn btn-default" id="clear_compare_trait">
-                            <i class="icon-trash"></i> Clear
-                        </button>
+            </div>
+            {% endif %}
+            <div class="tab-pane" id="probability_plot">
+                <div class="form-horizontal section-form-div">
+                    {% if sample_groups|length != 1 %}
+                    Select Group:
+                    <select class="prob_plot_samples_group">
+                        {% for group, pretty_group in sample_group_types.items() %}
+                            <option value="{{ group }}">{{ pretty_group }}</option>
+                        {% endfor %}
+                    </select>
+                    <br>
+                    <br>
+                    {% endif %}
+
+                    <div id="prob_plot_container">
+                        <div id="prob_plot_div"></div>
                     </div>
-                    <div id="scatterplot_container">
-                        <div id="comparison_scatterplot" class="qtlcharts"></div>
+                    <div id="shapiro_wilk_text"></div>
+                    <div>
+                        More about <a href="http://en.wikipedia.org/wiki/Normal_probability_plot">Normal Probability Plots</a> and more
+                        about interpreting these plots from the <a href="http://genenetwork.org/glossary.html#normal_probability">glossary</a>
                     </div>
                 </div>
             </div>
+            <div class="tab-pane" id="box_plot_tab">
+                <div id="box_plot_container">
+                    <div id="box_plot"></div>
+                </div>
+            </div>
+            <div class="tab-pane" id="violin_plot_tab">
+                <div id="violin_plot_container">
+                    <div id="violin_plot"></div>
+                </div>
+            </div>
+            <div class="tab-pane" id="scatterplot_matrix">
+                <div class="btn-group scatterplot-btn-div">
+                    <button type="button" class="btn btn-default" id="select_compare_trait">
+                        <i class="icon-th-large"></i> Select Traits
+                    </button>
+                    <button type="button" class="btn btn-default" id="clear_compare_trait">
+                        <i class="icon-trash"></i> Clear
+                    </button>
+                </div>
+                <div id="scatterplot_container">
+                    <div id="comparison_scatterplot" class="qtlcharts"></div>
+                </div>
+            </div>
         </div>
-    <!--</div>-->
+    </div>
     <div id="collections_holder_wrapper" style="display:none;">
         <div id="collections_holder"></div>
     </div>
-   
 </div>
diff --git a/wqflask/wqflask/templates/show_trait_transform_and_filter.html b/wqflask/wqflask/templates/show_trait_transform_and_filter.html
index 9fb560a0..0418d972 100644
--- a/wqflask/wqflask/templates/show_trait_transform_and_filter.html
+++ b/wqflask/wqflask/templates/show_trait_transform_and_filter.html
@@ -1,78 +1,74 @@
 <div>
   <div class="form-horizontal">
-          <p>Edit or delete values in the Trait Data boxes, and use the
-              <strong>Reset</strong> option as
-              needed.
-          </p>
-
-          <div id="blockMenuSpan" class="input-append" style="margin-bottom: 10px;">
-              <label for="remove_samples_field">Block samples by index:</label>
-              <input type="text" id="remove_samples_field" placeholder="Example: 3, 5-10, 12">
-              <select id="block_group" size="1">
-                <option value="primary">
-                  {{ sample_group_types['samples_primary'] }}
-                </option>
-                <option value="other">
-                  {{ sample_group_types['samples_other'] }}
-                </option>
-              </select>
-              <input type="button" id="block_by_index" class="btn btn-danger" value="Block">
-          </div>
-          <div id="remove_samples_invalid" class="alert alert-error" style="display:none;">
-                Please check that your input is formatted correctly, e.g. <strong>3, 5-10, 12</strong>
-          </div>
-          {% if sample_groups[0].attributes %}
-          <div class="input-append" style="margin-top:10px; margin-bottom:10px;">
-              <label for="exclude_menu">Block samples by group:</label>
-              <select id="exclude_menu" size=1>
-                {% for attribute in sample_groups[0].attributes %}
-                <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">
-                    {{ sample_groups[0].attributes[attribute].name }}</option>
-                {% endfor %}
-              </select>
-              <select id="attribute_values" size=1>
-              </select>
-              <input type="button" id="exclude_group" class="btn" value="Block">
-          </div>
-          {% endif %}
-          <div>
-            <input type="button" id="hide_no_value" class="btn btn-default" value="Hide No Value">
-            <input type="button" id="block_outliers" class="btn btn-default" value="Block Outliers">
-            <input type="button" class="btn btn-success reset" value="Reset">
-            <span class="input-append">
-              <input type="button" class="btn btn-default export" value="Export">
-              <select class="select optional span2 export_format">
-                <option value="excel">Excel</option>
-                <option value="csv">CSV</option>
-              </select>
-            </span>
-            <br>
-            <div style="margin-top:10px;">
-            <input type="button" id="normalize" class="btn btn-success" value="Normalize">
-            <select id="norm_method" class="select optional span2">
-              {% if negative_vals_exist == "false" %}
-              <option value="log2">Log2</option>
-              <option value="log10">Log10</option>
-              <option value="sqrt">Square Root</option>
-              {% endif %}
-              <option value="zscore">Z-score</option>
-              <option value="qnorm">Quantile</option>
-              <option value="invert">Invert +/-</option>
-            </select>
-            </div>
-          </div>
+    <p>Edit or delete values in the Trait Data boxes, and use the
+        <strong>Reset</strong> option as
+        needed.
+    </p>
+    <div id="blockMenuSpan" class="input-append block-by-index-div">
+        <label for="remove_samples_field">Block samples by index:</label>
+        <input type="text" id="remove_samples_field" placeholder="Example: 3, 5-10, 12">
+        <select id="block_group" size="1">
+          <option value="primary">
+            {{ sample_group_types['samples_primary'] }}
+          </option>
+          <option value="other">
+            {{ sample_group_types['samples_other'] }}
+          </option>
+        </select>
+        <input type="button" id="block_by_index" class="btn btn-danger" value="Block">
+    </div>
+    <div id="remove_samples_invalid" class="alert alert-error" style="display:none;">
+          Please check that your input is formatted correctly, e.g. <strong>3, 5-10, 12</strong>
+    </div>
+    {% if sample_groups[0].attributes %}
+    <div class="input-append block-by-attribute-div">
+        <label for="exclude_menu">Block samples by group:</label>
+        <select id="exclude_menu" size=1>
+          {% for attribute in sample_groups[0].attributes %}
+          <option value="{{ sample_groups[0].attributes[attribute].name.replace(' ', '_') }}">
+              {{ sample_groups[0].attributes[attribute].name }}</option>
+          {% endfor %}
+        </select>
+        <select id="attribute_values" size=1>
+        </select>
+        <input type="button" id="exclude_group" class="btn" value="Block">
+    </div>
+    {% endif %}
+    <div>
+      <input type="button" id="hide_no_value" class="btn btn-default" value="Hide No Value">
+      <input type="button" id="block_outliers" class="btn btn-default" value="Block Outliers">
+      <input type="button" class="btn btn-success reset" value="Reset">
+      <span class="input-append">
+        <input type="button" class="btn btn-default export" value="Export">
+        <select class="select optional span2 export_format">
+          <option value="excel">Excel</option>
+          <option value="csv">CSV</option>
+        </select>
+      </span>
       <br>
-
-      <div>
-          <p>Outliers highlighted in
-                  <strong style="background-color:orange;">orange</strong>
-                  can be hidden using
-                  the <strong>Hide Outliers</strong> button.
-          </p>
-
-          <p>Samples with no value (x) can be hidden by clicking
-                  <strong>Hide No Value</strong> button.
-          </p>
+      <div class="normalize-div">
+        <input type="button" id="normalize" class="btn btn-success" value="Normalize">
+        <select id="norm_method" class="select optional span2">
+          {% if negative_vals_exist == "false" %}
+          <option value="log2">Log2</option>
+          <option value="log10">Log10</option>
+          <option value="sqrt">Square Root</option>
+          {% endif %}
+          <option value="zscore">Z-score</option>
+          <option value="qnorm">Quantile</option>
+          <option value="invert">Invert +/-</option>
+        </select>
       </div>
+    </div>
+  </div>
+  <br>
+  <div>
+    <p>Outliers highlighted in
+      <strong style="background-color:orange;">orange</strong>
+      can be hidden using
+      the <strong>Hide Outliers</strong> button.
+    </p>
+
+    <p>Samples with no value (x) can be hidden by clicking<strong>Hide No Value</strong> button.</p>
   </div>
 </div>
\ No newline at end of file