<!DOCTYPE html>


<html>
<head>
{% load static %}
{% include "chlamdb/header.html" %}
</head>

<body>

  <div class="container-fluid" id="main_container">
    <div class="row">
      <div id="wrapper">
          <div id="page-content-wrapper">
            <div class="row">
              {% include "chlamdb/menu.html" %}
              <div class="col-lg-12">

                <nav>
                <ul id="tabs" class="nav nav-tabs">
                    <li><a href="{% url 'pairwiseCDS_length' %}">pairwise CDS length</a></li>
                    <li class="active"><a>CDS length counts</a></li>
                </ul>
                </nav>


                <div class="panel panel-success" style="width:400px; top: 200px; margin: 10px 10px 10px 10px">
                    <div class="panel-heading" style="width:100%">
                        <h3 class="panel-title">Help</h3>
                    </div>

                    <p>
                      Comparative view of protein length (percentages). 
                    </p>

                    <table class="table">
                      <thead>
                        <tr>
                          <td>
                            Range
                          </td>
                          <td>
                            Color
                          </td>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <td>50-99</td>
                          <td>Red</td>
                        </tr>
                        <tr>
                          <td>100-199</td>
                          <td>Yellow</td>
                        </tr>
                        <tr>
                          <td>200-299</td>
                          <td>Green</td>
                        </tr>
                        <tr>
                          <td>300-399</td>
                          <td>Blue</td>
                        </tr>
                        <tr>
                          <td>400-499</td>
                          <td>Violet</td>
                        </tr>
                        <tr>
                          <td>500-599</td>
                          <td>Black</td>
                        </tr>
                        <tr>
                          <td> >600</td>
                          <td>Light brown</td>
                        </tr>
                      </tbody>
                    </table>

                        <br>
                    </p>
                </div>

                <div>

                    <img src="{% static asset_path1 %}" alt="phylo" style="width:50%;">

                </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
{% include "chlamdb/style_menu.html" %}
</html>
