From 4c635b1ad699ffeb818910f2af03496752d1414b Mon Sep 17 00:00:00 2001
From: Rachel TORCHET <racheltorchet@users.noreply.github.com>
Date: Mon, 28 May 2018 09:31:36 +0200
Subject: [PATCH] Update templates and Test form aspect + Add fun css label
 stuffs

Former-commit-id: ad4c3cb04f5c0cc3d0c356352218470d88175f44
---
 ippisite/ippidb/forms.py                      |   69 +-
 ippisite/ippidb/static/css/admin-session.css  | 1225 +++++++++--------
 ippisite/ippidb/static/js/ippidb.js           |    1 +
 ippisite/ippidb/templates/CompoundForm.html   |   19 +-
 ippisite/ippidb/templates/IdForm.html         |    5 +-
 ippisite/ippidb/templates/PDBForm.html        |    5 +-
 ippisite/ippidb/templates/PpiForm.html        |   21 +-
 .../templates/ProteinDomainComplexForm.html   |   20 +-
 ippisite/ippidb/templates/TestsForm.html      |  152 +-
 ippisite/requirements_rachel.txt              |   14 +
 10 files changed, 884 insertions(+), 647 deletions(-)
 create mode 100644 ippisite/requirements_rachel.txt

diff --git a/ippisite/ippidb/forms.py b/ippisite/ippidb/forms.py
index 1ec00602..f5eb96eb 100644
--- a/ippisite/ippidb/forms.py
+++ b/ippisite/ippidb/forms.py
@@ -15,7 +15,7 @@ class IdForm(ModelForm):
         fields = ['source','id_source']
         widgets = {
             'source' : forms.RadioSelect,
-            'id_source': forms.TextInput(attrs={'placeholder': 'ID'}),
+            'id_source': forms.TextInput(attrs={'class': 'form-control'}),
         }
 
 """ Step 2 : BibliographyForm """
@@ -40,7 +40,7 @@ def validate_pdb_exists(value):
 
 
 class PDBForm(forms.Form):
-    pdb_id = forms.CharField(label="PDB ID", max_length=4, widget=forms.TextInput(attrs={'placeholder': 'e.g 3u85', 'required': 'required'}), required=True, validators=[
+    pdb_id = forms.CharField(label="PDB ID", max_length=4, widget=forms.TextInput(attrs={'placeholder': 'e.g 3u85', 'required': 'required', 'class':'form-control'}), required=True, validators=[
         RegexValidator(
         '^[0-9][a-zA-Z0-9]{3}$', message='PDB ID must be 1 numeric + 3 alphanumeric characters'),
                 validate_pdb_exists
@@ -102,10 +102,10 @@ COMPLEX_TYPE = (
 )
 
 class ComplexCompositionForm(forms.Form):
-    complex_type=forms.CharField(widget=forms.Select(choices=COMPLEX_TYPE))
-    complex_protein=forms.ModelChoiceField(queryset=Protein.objects.all(), required=True)
-    complex_domain=forms.ModelChoiceField(queryset=Domain.objects.all(), required=True)
-    ppc_copy_nb=forms.IntegerField(initial=1,required=True)
+    complex_type=forms.CharField(widget=forms.Select(choices=COMPLEX_TYPE, attrs={'class':'form-control'}))
+    complex_protein=forms.ModelChoiceField(queryset=Protein.objects.all(), required=True, widget=forms.Select(attrs={'class':'form-control'}),empty_label=None)
+    complex_domain=forms.ModelChoiceField(queryset=Domain.objects.all(), required=True,widget=forms.Select(attrs={'class':'form-control'}),empty_label=None)
+    ppc_copy_nb=forms.IntegerField(initial=1,required=True,widget=forms.TextInput(attrs={'class':'form-control'}))
 
     def __init__(self,*args,**kwargs):
         super(ComplexCompositionForm, self).__init__(*args, **kwargs)
@@ -131,10 +131,10 @@ class PpiComplexForm(ModelForm):
         fields = ['cc_nb']
 
 class PpiAndComplexForm(forms.Form):
-    pdb_id=forms.CharField(widget=forms.TextInput())
-    symmetry=forms.ModelChoiceField(queryset=Symmetry.objects.all(), required=True)
-    pockets_nb=forms.IntegerField(initial=1,required=True)
-    cc_nb=forms.IntegerField(initial=1,required=True)
+    pdb_id=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
+    symmetry=forms.ModelChoiceField(queryset=Symmetry.objects.all(), required=True, widget=forms.Select(attrs={'class':'form-control'}), empty_label=None)
+    pockets_nb=forms.IntegerField(initial=1,required=True,widget=forms.TextInput(attrs={'class':'form-control'}))
+    cc_nb=forms.IntegerField(initial=1,required=True,widget=forms.TextInput(attrs={'class':'form-control'}))
 
 """ Step 7 : CompoundForm """
 class CompoundForm(ModelForm):
@@ -143,7 +143,7 @@ class CompoundForm(ModelForm):
         model = Compound
         fields = ['common_name','is_macrocycle']
         widgets = {
-        'common_name': forms.TextInput(attrs={'placeholder':'Common name', 'required': 'required'}),
+        'common_name': forms.TextInput(attrs={'class':'form-control', 'required': 'required'}),
         }
 
 class RefCompoundBiblioForm(ModelForm):
@@ -160,27 +160,40 @@ TYPE_MOLECULE = (
 class BaseCompoundFormSet(BaseFormSet):
     def add_fields(self, form, index):
         super(BaseCompoundFormSet, self).add_fields(form, index)
-        form.fields["compound_name"] = forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Name in the publication','required':'required'}))
-        form.fields["molecule"] = forms.CharField(widget=forms.RadioSelect(choices=TYPE_MOLECULE))
-        form.fields["molecule_comp"] = forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Molecule composition', 'required':'required'}))
+        form.fields["compound_name"] = forms.CharField(widget=forms.TextInput(attrs={'class':'form-control','required':'required'}))
+        form.fields["molecule"] = forms.CharField(widget=forms.RadioSelect(choices=TYPE_MOLECULE, attrs={'class':'form-control'}))
+        form.fields["molecule_comp"] = forms.CharField(widget=forms.TextInput(attrs={'required':'required', 'class':'form-control'}))
 
 CompoundFormSet = formset_factory(CompoundForm, formset=BaseCompoundFormSet, max_num=500, can_delete=True)
 formset = CompoundFormSet()
 
 """ Step 8 : TestsForm """
 class TestsForm(forms.Form):
-    activityDesc_test_name=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Activity test name'}))
-    activityDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), required=True, empty_label="Choose a corresponding cell line")
-    activityDesc_ppi=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'PPI ID'}))
-    activityDesc_nb_active_compound=forms.IntegerField(initial=1,required=True)
-    activityRes_test_modulation_type=forms.ModelChoiceField(queryset=CompoundActivityResult.objects.values_list('modulation_type', flat=True).distinct(), required=True, empty_label=None)
-    activityDesc_type=forms.ModelChoiceField(widget=forms.RadioSelect(),queryset=TestActivityDescription.objects.values_list('test_type', flat=True).distinct(), required=True, empty_label=None)
-    cytotoxDesc_test_name=forms.CharField(widget=forms.TextInput())
-    cytotoxDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), required=True)
-    cytotoxDesc_compound_concentration=forms.CharField(widget=forms.TextInput())
+    activityDesc_test_name=forms.CharField(widget=forms.TextInput(attrs={'class': 'form-control'}))
+    activityDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), empty_label=None, widget=forms.Select(attrs={'class':'form-control'}))
+    activityDesc_nb_active_compound=forms.IntegerField(initial=1)
+    activityDesc_type=forms.ModelChoiceField(widget=forms.RadioSelect(attrs={'class':'form-control'}),queryset=TestActivityDescription.objects.values_list('test_type', flat=True).distinct(), empty_label=None)
+    activityDesc_test_modulation_type=forms.ModelChoiceField(queryset=TestActivityDescription.objects.values_list('test_modulation_type', flat=True).distinct(), empty_label=None, widget=forms.Select(attrs={'class':'form-control'}))
+    activityRes_compound=forms.ChoiceField(widget=forms.Select(attrs={'class':'form-control'}))
+    activityRes_test_modulation_type=forms.ModelChoiceField(queryset=CompoundActivityResult.objects.values_list('modulation_type', flat=True).distinct(), empty_label=None, widget=forms.Select(attrs={'class':'form-control'}))
+    activityRes_activity_type=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
+    activityRes_activity=forms.IntegerField(forms.NumberInput(attrs={'class':'form-control'}))
+    cytotoxDesc_test_name=forms.CharField(widget=forms.TextInput(attrs={'class':'form-control'}))
+    cytotoxDesc_cell_line=forms.ModelChoiceField(queryset=CellLine.objects.all(), empty_label=None, widget=forms.Select(attrs={'class':'form-control'}))
+    cytotoxDesc_compound_concentration=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Compound concentration'}))
+    cytotoxRes_compound=forms.ChoiceField(widget=forms.TextInput(attrs={'class': 'form-control'}))
     cytotoxRes_toxicity=forms.ModelChoiceField(queryset=CompoundCytotoxicityResult.objects.all())
-    pkDesc_test_name=forms.CharField(widget=forms.TextInput())
-    pkDesc_organism=forms.ModelChoiceField(queryset=Taxonomy.objects.all(), required=True)
-    pkDesc_administration_mode=forms.CharField(widget=forms.TextInput())
-    pkDesc_dose=forms.IntegerField(initial=1,required=True)
-    pkDesc_dose_interval=forms.IntegerField(initial=1,required=True)
+    pkDesc_test_name=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'PK test name'}))
+    pkDesc_organism=forms.ModelChoiceField(queryset=Taxonomy.objects.all(), empty_label="Choose a corresponding organism")
+    pkDesc_administration_mode=forms.CharField(widget=forms.TextInput(attrs={'placeholder':'Admnistration mode'}))
+    pkDesc_dose=forms.IntegerField(initial=1)
+    pkDesc_dose_interval=forms.IntegerField(initial=1)
+    pkRes_compound = forms.ChoiceField(widget=forms.TextInput(attrs={'class': 'form-control'}))
+    pkRes_tolerated = forms.ChoiceField(widget=forms.TextInput(attrs={'class': 'form-control'}))
+    pkRes_auc = forms.IntegerField(initial=1)
+    pkRes_clearance = forms.DecimalField()
+    pkRes_cmax = forms.DecimalField()
+    pkRes_oral_bioavailability = forms.IntegerField(initial=1)
+    pkRes_t_demi = forms.IntegerField(initial=1)
+    pkRes_t_max = forms.IntegerField(initial=1)
+    pkRes_voldistribution = forms.DecimalField()
\ No newline at end of file
diff --git a/ippisite/ippidb/static/css/admin-session.css b/ippisite/ippidb/static/css/admin-session.css
index cdb12679..ab6e4a57 100644
--- a/ippisite/ippidb/static/css/admin-session.css
+++ b/ippisite/ippidb/static/css/admin-session.css
@@ -10,102 +10,112 @@ Description: IPPI-DB Theme
 /* Step menu */
 
 .step_nav {
-    width: 100%;
-    margin: 0 ;
-    padding: 0 ;
+  width: 100%;
+  margin: 0 ;
+  padding: 0 ;
 }
 
 .step_nav ul {
-    margin: 0 ;
-    padding: 0;
+  margin: 0 ;
+  padding: 0;
 }
 
 .step_nav li {
-    display: inline;
+  display: inline;
 }
 
 .step_nav li a, .step_nav  li a:hover, .step_nav li a:focus {
-    width: 146px;
-    background-color: #E3E9EB;
-    color:#8D8888;
-    font-family: "PlayfairDisplayReg";
-    font-size: 22px;
-    display: inline-block;
-    text-align: center;
-    text-decoration: none;
+  width: 146px;
+  background-color: #E3E9EB;
+  color:#8D8888;
+  font-family: "PlayfairDisplayReg";
+  font-size: 22px;
+  display: inline-block;
+  text-align: center;
+  text-decoration: none;
 }
 
 .step_nav li a.active {
-    text-decoration: none;
-    background-color: #2D96FA;
-    color:#FFFFFF;
+  text-decoration: none;
+  background-color: #2D96FA;
+  color:#FFFFFF;
 }
 
 .step_nav li a.validate {
-    text-decoration: none;
-    background-color: #000000;
-    color:#ffffff;
+  text-decoration: none;
+  background-color: #000000;
+  color:#ffffff;
 }
 
 /* Step window */
 .step_desc {
-    padding: 0px;
-    margin-bottom: 0px;
+  padding: 0px;
+  margin-bottom: 0px;
 }
 
 .step_title{
-    font-family: "PlayfairDisplayRed";
-    font-size: 25px;
+  font-family: "PlayfairDisplayRed";
+  font-size: 25px;
 }
 
 .step_step {
-    color: #8D8889;
-    font-size: 15px;
-    font-family: "BrandonGrotesqueReg";
+  color: #8D8889;
+  font-size: 15px;
+  font-family: "BrandonGrotesqueReg";
 }
 
 .step_step_desc {
-    padding: 0px;
-    margin-bottom: 0px;
-    font-family: "BrandonGrotesqueReg";
+  padding: 0px;
+  margin-bottom: 0px;
+  font-family: "BrandonGrotesqueReg";
 }
 
 /* Form Items */
 
 #type_style {
-    background-color: rgb(227, 233, 235);
-    padding: 10px;
-    margin: 10px;
-    margin-left: -81px;
-    margin-right: -81px;
+  background-color: rgb(227, 233, 235);
+  padding: 10px;
+  margin: 10px;
+  margin-left: -81px;
+  margin-right: -81px;
 }
 
 #type_title h1{
-    text-align: left;
-    color: #414144;
-    font-size: 42px;
-    font-family: "BrandonGrotesqueBlk"
+  text-align: left;
+  color: #414144;
+  font-size: 42px;
+  font-family: "BrandonGrotesqueBlk"
 }
 
 #type_title h2{
-    font-size: 18px;
+  font-size: 18px;
+}
+
+.add_button {
+  margin: 0px;
+  padding-bottom: 0px;
+  padding-top: 0px;
+  height: 29px;
+  background-color: inherit;
+  color:#2d96fa;
+  border:none;
 }
 
 .submit_button {
-    font-family: "BrandonGrotesqueReg";
-    width: 100%;
+  font-family: "BrandonGrotesqueReg";
+  width: 100%;
 }
 
 .clear_button {
-    text-align: center;
-    padding-top: 10px;
+  text-align: center;
+  padding-top: 10px;
 }
 
 /* IdForm*/
 
 #id_IdForm-source {
-    overflow: hidden;
-    padding-bottom: 5px;
+  overflow: hidden;
+  padding-bottom: 5px;
 }
 
 #id_IdForm-source label span{
@@ -117,79 +127,87 @@ Description: IPPI-DB Theme
 } 
 
 #id_IdForm-source input {
-    display:none;
+  display:none;
 }
 
 #id_IdForm-source input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 #id_IdForm-source input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .input_field {
-    width:100%;
-    margin-right: 2px;
-    font-family: "BrandonGrotesqueReg";
+  width:100%;
+  margin-right: 2px;
+  font-family: "BrandonGrotesqueReg";
+  text-align: left;
+  margin-top: 5px;
 }
 
 .input_field input {
-    width:100%;
-    font-family: "BrandonGrotesqueReg";
-    text-align: center;
+  width:100%;
+  font-family: "BrandonGrotesqueReg";
+  text-align: center;
 }
 
 /* Form step items */
 
 .compound{
-    background-color: #E3E9EB;
-    margin-left: -60%;
-    margin-right: -60%;
-    padding: 5%;
+  background-color: #E3E9EB;
+  margin-left: -60%;
+  margin-right: -60%;
+  padding: 5%;
 }
 
 .compound h1 {
-    text-align: left;
-    color: #414144;
-    font-size: 42px;
-    padding-bottom: 1%;
+  text-align: left;
+  color: #414144;
+  font-size: 42px;
+  padding-bottom: 1%;
 }
 
 .compound h2 {
-    text-align: left;
-    padding-bottom: 1%;
+  text-align: left;
+  padding-bottom: 1%;
 }
 
 .compound_input {
-    margin-bottom: 5px;
+    margin-bottom: 15px;
+    width: 100%;
+    margin-right: 2px;
+    font-family: "BrandonGrotesqueReg";
+    text-align: left;
+    margin-top: 15px;
 }
 
 .compound_input input{
-    width: 100%;
-    padding: 5px;
+  width: 100%;
+  padding: 5px;
+  margin-bottom: 5px;
 }
 
 #compound_mol {
-    overflow: hidden;
-    display: flex;
-    padding-bottom: 5px;
+  overflow: hidden;
+  display: flex;
+  padding-bottom: 5px;
 }
 
 /* Background image classes */
 .compound_radio_smiles input {
-    display:none;
+  display:none;
 }
 
 .compound_radio_smiles label span{
@@ -207,34 +225,34 @@ Description: IPPI-DB Theme
 } 
 
 .compound_radio_smiles input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/Other/SMILESIcon.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
-    opacity: 1.0;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/Other/SMILESIcon.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
+  opacity: 1.0;
 }
 
 .compound_radio_smiles input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/Other/SMILESIcon.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
-    opacity: 1.0;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/Other/SMILESIcon.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
+  opacity: 1.0;
 }
 
 .compound_radio_iupac input {
-    display:none;
+  display:none;
 }
 
 .compound_radio_iupac label span{
@@ -252,34 +270,34 @@ Description: IPPI-DB Theme
 } 
 
 .compound_radio_iupac input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/Other/IUPACIcon.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
-    opacity: 1.0;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/Other/IUPACIcon.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
+  opacity: 1.0;
 }
 
 .compound_radio_iupac input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/Other/IUPACIcon.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
-    opacity: 1.0;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/Other/IUPACIcon.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
+  opacity: 1.0;
 }
 
 .compound_radio_sketch input {
-    display:none;
+  display:none;
 }
 
 .compound_radio_sketch label span{
@@ -297,57 +315,57 @@ Description: IPPI-DB Theme
 } 
 
 .compound_radio_sketch input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/Other/SketchIcon.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
-    opacity: 1.0;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/Other/SketchIcon.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
+  opacity: 1.0;
 }
 
 .compound_radio_sketch input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/Other/SketchIcon.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
-    opacity: 1.0;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/Other/SketchIcon.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
+  opacity: 1.0;
 }
 
 .small_icon {
-    width:30%;
+  width:30%;
 }
 
 .add_form div{
-    background-color: #8D8889;
-    color: #FFFFFF;
+  background-color: #8D8889;
+  color: #FFFFFF;
 }
 
 .add_form div:hover{
-    cursor: pointer;
-    background-color: #484848;
-    color: #FFFFFF;
+  cursor: pointer;
+  background-color: #484848;
+  color: #FFFFFF;
 }
 
 .add_form div:active {
-    background-color: #484848;
+  background-color: #484848;
 }
 
 .add_field_button{
-    width:10%;
+  width:10%;
 }
 
 .remove_field{
-    width:10%;
+  width:10%;
 }
 
 
@@ -356,144 +374,144 @@ Description: IPPI-DB Theme
 
 .publi_info{
 
-    padding: 10px;
+  padding: 10px;
 }
 
 .publi_title{
-    font-family: "BrandonGrotesqueReg";
-    margin-left: -300px;
-    margin-right: -300px;
-    margin-bottom: 20px;
+  font-family: "BrandonGrotesqueReg";
+  margin-left: -300px;
+  margin-right: -300px;
+  margin-bottom: 20px;
 }
 
 #ck-button {
-    margin: 4px;
-    float:left;
+  margin: 4px;
+  float:left;
 }
 
 #ck-button-long {
-    width:100%;
+  width:100%;
 }
 
 #ck-button label {
-    width: 100%;
-    margin-bottom: 0px;
+  width: 100%;
+  margin-bottom: 0px;
 }
 
 #ck-button-long label {
-    width: 100%;
-    margin-top: 5px;
+  width: 100%;
+  margin-top: 5px;
 }
 
 #ck-button label span {
-    text-align:center;
-    padding:3px;
-    display:block;
-    background-color: #E8E0E0;
-    color: #8D8888;
-    border-bottom: 2px solid #fff;
+  text-align:center;
+  padding:3px;
+  display:block;
+  background-color: #E8E0E0;
+  color: #8D8888;
+  border-bottom: 2px solid #fff;
 }
 
 #ck-button-long label span {
-    text-align:center;
-    padding:3px;
-    display:block;
-    background-color: #E8E0E0;
-    color: #8D8888;
+  text-align:center;
+  padding:3px;
+  display:block;
+  background-color: #E8E0E0;
+  color: #8D8888;
 }
 
 #ck-button label input {
-    position:absolute;
-    top:-20px;
-    display:none;
+  position:absolute;
+  top:-20px;
+  display:none;
 }
 
 #ck-button-long label input {
-    position:absolute;
-    top:-20px;
-    display:none;
+  position:absolute;
+  top:-20px;
+  display:none;
 }
 
 #ck-button input:hover + span {
-   background-color: #FFFFFF;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+ background-color: #FFFFFF;
+ color: #000000;
+ border-bottom: 1px solid #2D96FA;
+ border-top: 1px solid #E3E9EB;
+ border-left: 1px solid #E3E9EB;
+ border-right: 1px solid #E3E9EB;
 }
 
 #ck-button-long input:hover + span {
-   background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
-    background-size: contain;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+ background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
+ background-size: contain;
+ color: #000000;
+ border-bottom: 1px solid #2D96FA;
+ border-top: 1px solid #E3E9EB;
+ border-left: 1px solid #E3E9EB;
+ border-right: 1px solid #E3E9EB;
 }
 
 
 #ck-button input:checked + span {
-    background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
-    background-size: contain;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
+  background-size: contain;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 #ck-button-long input:checked + span {
-    background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
-    background-size: contain;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
+  background-size: contain;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 #ck-button input:checked:hover + span {
-   background-color: #FFFFFF;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+ background-color: #FFFFFF;
+ color: #000000;
+ border-bottom: 1px solid #2D96FA;
+ border-top: 1px solid #E3E9EB;
+ border-left: 1px solid #E3E9EB;
+ border-right: 1px solid #E3E9EB;
 }
 
 #ck-button-long input:checked:hover + span {
-   background-color: #FFFFFF;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+ background-color: #FFFFFF;
+ color: #000000;
+ border-bottom: 1px solid #2D96FA;
+ border-top: 1px solid #E3E9EB;
+ border-left: 1px solid #E3E9EB;
+ border-right: 1px solid #E3E9EB;
 }
 
 /* ProteinDomainComplexTypeForm */
 
 #id_ProteinDomainComplexTypeForm-inhibited {
-    overflow: hidden;
-    display: flex;
+  overflow: hidden;
+  display: flex;
 }
 
 #id_ProteinDomainComplexTypeForm-complexChoice {
-    line-height: inherit;
-    font-family: "BrandonGrotesqueReg";
-    border-bottom: 1px solid #2d96fa;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
-    text-align: center;
-    width: 100%;
+  line-height: inherit;
+  font-family: "BrandonGrotesqueReg";
+  border-bottom: 1px solid #2d96fa;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
+  text-align: center;
+  width: 100%;
 }
-    
+
 
 /* Background image classes */
 .imageBack_Inhib_Hetero2-merAB input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Inhib_Hetero2-merAB label span{
@@ -510,33 +528,33 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Inhib_Hetero2-merAB input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Inhibited/Hetero2-merAB_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Inhibited/Hetero2-merAB_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Inhib_Hetero2-merAB input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Inhibited/Hetero2-merAB_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Inhibited/Hetero2-merAB_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 
 .imageBack_Inhib_Homo2-merA2 input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Inhib_Homo2-merA2 label span{
@@ -552,32 +570,32 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Inhib_Homo2-merA2 input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Inhibited/Homo2-merA2_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Inhibited/Homo2-merA2_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Inhib_Homo2-merA2 input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Inhibited/Homo2-merA2_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Inhibited/Homo2-merA2_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Inhib_Custom input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Inhib_Custom label span{
@@ -594,40 +612,40 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Inhib_Custom input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Inhibited/Custom_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Inhibited/Custom_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Inhib_Custom input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Inhibited/Custom_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Inhibited/Custom_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 /* Stabilized */
 
 
 #id_ProteinDomainComplexTypeForm-stabilized {
-    overflow: hidden;
-    display: flex;
-    flex-wrap: wrap;
+  overflow: hidden;
+  display: flex;
+  flex-wrap: wrap;
 }
 
 .imageBack_Stab_Hetero2-merAB input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Stab_Hetero2-merAB label span{
@@ -644,32 +662,32 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Stab_Hetero2-merAB input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Hetero2-merAB_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Hetero2-merAB_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Hetero2-merAB input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Hetero2-merAB_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Hetero2-merAB_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo2-merA2 input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Stab_Homo2-merA2 label span{
@@ -686,32 +704,32 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Stab_Homo2-merA2 input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo2-merA2_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo2-merA2_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo2-merA2 input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo2-merA2_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo2-merA2_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo-Like2-merA2 input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Stab_Homo-Like2-merA2 label span{
@@ -728,32 +746,32 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Stab_Homo-Like2-merA2 input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo-Like2-merA2_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo-Like2-merA2_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo-Like2-merA2 input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo-Like2-merA2_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo-Like2-merA2_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo3-merA3 input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Stab_Homo3-merA3 label span{
@@ -770,32 +788,32 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Stab_Homo3-merA3 input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo3-merA3 input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo3-merA3inhibitedA2-dimer input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Stab_Homo3-merA3inhibitedA2-dimer label span{
@@ -812,32 +830,32 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Stab_Homo3-merA3inhibitedA2-dimer input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3inhibitedA2-dimer_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3inhibitedA2-dimer_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo3-merA3inhibitedA2-dimer input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3inhibitedA2-dimer_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo3-merA3inhibitedA2-dimer_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo4-merA4 input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Stab_Homo4-merA4 label span{
@@ -854,32 +872,32 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Stab_Homo4-merA4 input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo4-merA4_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo4-merA4_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Homo4-merA4 input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Homo4-merA4_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Homo4-merA4_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Ring-Like3-merA3 input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Stab_Ring-Like3-merA3 label span{
@@ -896,32 +914,32 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Stab_Ring-Like3-merA3 input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Ring-Like3-merA3_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Ring-Like3-merA3_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Ring-Like3-merA3 input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Ring-Like3-merA3_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Ring-Like3-merA3_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Ring-Like5-merA5 input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Stab_Ring-Like5-merA5 label span{
@@ -938,33 +956,33 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Stab_Ring-Like5-merA5 input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Ring-Like5-merA5_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Ring-Like5-merA5_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Ring-Like5-merA5 input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Ring-Like5-merA5_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Ring-Like5-merA5_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 
 .imageBack_Stab_Custom input {
-    display:none;
+  display:none;
 }
 
 .imageBack_Stab_Custom label span{
@@ -981,41 +999,50 @@ Description: IPPI-DB Theme
 } 
 
 .imageBack_Stab_Custom input:hover+label span{
-    cursor: pointer;
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Custom_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  cursor: pointer;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Custom_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 .imageBack_Stab_Custom input[type="radio"]:checked+label span{
-    background-color: #FFFFFF;
-    background-image: url('/static/images/PPITypes/Stabilized/Custom_Holo.png');
-    background-position: center;
-    background-repeat: no-repeat;
-    color: #000000;
-    border-bottom: 1px solid #2D96FA;
-    border-top: 1px solid #E3E9EB;
-    border-left: 1px solid #E3E9EB;
-    border-right: 1px solid #E3E9EB;
+  background-color: #FFFFFF;
+  background-image: url('/static/images/PPITypes/Stabilized/Custom_Holo.png');
+  background-position: center;
+  background-repeat: no-repeat;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
 }
 
 /* Tests form */
 
-.tests{
+.tests {
   background-color: #E3E9EB;
   margin-left: -60%;
   margin-right: -60%;
   padding-bottom: 0% 5% 5% 5%;
+  text-align: left;
+}
+
+.tests h2 {
+  font-size: 18px;
+  text-align: left;
+  padding-top: 1%;
+  padding-bottom: 1%;
 }
 
 .test_input{
-  margin-bottom: 5px;
+  margin-bottom: 15px;
+  margin-top: 15px;
 }
 
 .test_input input {
@@ -1027,146 +1054,236 @@ Description: IPPI-DB Theme
   width: 100%;
   padding: 5px;
 }
+
+.inline_box_test {
+  display: inline-flex;
+  width: 100%;
+}
+
+.test_activity {
+  width: 70%;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+#ck-button-half {
+  width:100%;
+  display: inline-flex;
+  margin-bottom: 2.5px;
+}
+
+#ck-button-half label {
+  width: 100%;
+  margin: 4px;
+}
+
+
+#ck-button-half label span {
+  text-align:center;
+  padding:3px;
+  display:block;
+  background-color: #E8E0E0;
+  color: #8D8888;
+}
+
+#ck-button-half label input {
+  position:absolute;
+  top:-20px;
+  display:none;
+}
+
+#ck-button-half input:hover + span {
+ background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
+ background-size: contain;
+ color: #000000;
+ border-bottom: 1px solid #2D96FA;
+ border-top: 1px solid #E3E9EB;
+ border-left: 1px solid #E3E9EB;
+ border-right: 1px solid #E3E9EB;
+}
+
+#ck-button-half input:checked + span {
+  background: white url("http://localhost:8000/static/images/Buttons/CheckButton.png") no-repeat right;
+  background-size: contain;
+  color: #000000;
+  border-bottom: 1px solid #2D96FA;
+  border-top: 1px solid #E3E9EB;
+  border-left: 1px solid #E3E9EB;
+  border-right: 1px solid #E3E9EB;
+}
+
+#ck-button-half input:checked:hover + span {
+ background-color: #FFFFFF;
+ color: #000000;
+ border-bottom: 1px solid #2D96FA;
+ border-top: 1px solid #E3E9EB;
+ border-left: 1px solid #E3E9EB;
+ border-right: 1px solid #E3E9EB;
+}
+
 /* Style the tab */
 .tab {
-    overflow: hidden;
-    background-color: #ffffff;
+  overflow: hidden;
+  background-color: #ffffff;
 }
 
 /* Style the buttons that are used to open the tab content */
 .tab button {
-    background-color: #ffffff;
-    float: left;
-    border: none;
-    outline: none;
-    cursor: pointer;
-    padding: 14px 16px;
-    transition: 0.3s;
-    text-align: center;
-    color: #8D8889;
-    font-size: 42px;
-    font-family: "BrandonGrotesqueBlk";
-    width: 33.33%;
+  background-color: #ffffff;
+  float: left;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  padding: 14px 16px;
+  transition: 0.3s;
+  text-align: center;
+  color: #8D8889;
+  font-size: 42px;
+  font-family: "BrandonGrotesqueBlk";
+  width: 33.33%;
 }
 
 /* Change background color of buttons on hover */
 .tab button:hover {
-    background-color: #E3E9EB;
-    color: #414144;
+  background-color: #E3E9EB;
+  color: #414144;
 }
 
 /* Create an active/current tablink class */
 .tab button.active {
-    background-color: #E3E9EB;
-    color: #414144;
+  background-color: #E3E9EB;
+  color: #414144;
 }
 
 /* Style the tab content */
 .tabcontent {
-    display: none;
-    padding: 12px 12px;
-    border-top: none;
-    background-color: #E3E9EB;
+  display: none;
+  padding: 12px 12px;
+  border-top: none;
+  background-color: #E3E9EB;
 }
 
 /* Proteins form */
 
 .proteins_form {
-    width: 100%;
+  width: 100%;
 }
 
 .inline_prot {
-    display: inline-flex;
+  display: inline-flex;
 }
 
 .inline_label {
-    font-weight: 700;
-    padding-right: 5px;
+  font-weight: 700;
+  padding-right: 5px;
 }
 
 .inline_field {
-    padding-right: 5px;
+  padding-right: 2px;
+  width: 100%;
+  margin-top: 5px;
+  text-align: left;
 }
 
 .inline_field input {
-    width: 100%;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    padding-right: 5px;
+  width: 100%;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-right: 5px;
 }
 
 .inline_field select {
-    width: 150px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    padding-right: 5px;
+  width: 150px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-right: 5px;
+  width: 100%;
 }
 
 .inline_field_multiple select {
-    width: 210px;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    padding-right: 5px;
+  width: 210px;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+  padding-right: 5px;
 }
 
 .inline_box_complex {
-    margin: 5px;
-    padding: 10px;
-    display: inline-flex;
-    margin-left: -150px;
-    margin-right: -150px;
+  margin: 5px;
+  padding: 10px;
+  display: inline-flex;
+  margin-left: -150px;
+  margin-right: -150px;
 }
 
 .inline_box_complex_long {
-    margin: 5px;
-    padding: 10px;
-    display: inline-flex;
-    margin-left: -280px;
-    margin-right: -280px;
+  margin: 5px;
+  padding: 10px;
+  display: inline-flex;
+  margin-left: -280px;
+  margin-right: -280px;
 }
 
 
 /*  Done step  */
 .last_step {
-    margin-top: 10%;
+  margin-top: 10%;
 }
 
 .add_new {
-    margin-top: 5px;
-    border-radius: 0px;
-    background-color: #2d96fa;
-    border: none;
-    color: #fff;
-    margin: 0 auto;
-    width: 43%;
+  margin-top: 5px;
+  border-radius: 0px;
+  background-color: #2d96fa;
+  border: none;
+  color: #fff;
+  margin: 0 auto;
+  width: 43%;
 }
 
 .add_new a {
-    color: #FFF;
-    text-decoration: none;
+  color: #FFF;
+  text-decoration: none;
 }
 
 .add_new a:hover {
-    color: #FFF;
-    text-decoration: none;
+  color: #FFF;
+  text-decoration: none;
 }
 
 .add_new a:visited {
-    color: #FFF;
-    text-decoration: none;
+  color: #FFF;
+  text-decoration: none;
 }
 
 
+[type="reset"], [type="submit"], button {
+  -webkit-appearance: button;
+  margin-top: 5px;
+  border-radius: 0px;
+  background-color: #2d96fa;
+  border: none;
+  color: #fff;
+}
 
-[type="reset"], [type="submit"], button, html [type="button"] {
-    -webkit-appearance: button;
-    margin-top: 5px;
-    border-radius: 0px;
-    background-color: #2d96fa;
-    border: none;
-    color: #fff;
+
+/* Test floating label */
+.form-group {
+  position: relative;
 }
 
+.form-control-placeholder {
+  position: absolute;
+  top: 0;
+  padding: 7px 0 0 7px;
+  transition: all 200ms;
+  opacity: 0.5;
+}
+
+.form-control:focus + .form-control-placeholder,
+.form-control:valid + .form-control-placeholder {
+  font-size: 75%;
+  transform: translate3d(0, -100%, 0);
+  opacity: 1;
+}
diff --git a/ippisite/ippidb/static/js/ippidb.js b/ippisite/ippidb/static/js/ippidb.js
index d53314e5..c88592a2 100644
--- a/ippisite/ippidb/static/js/ippidb.js
+++ b/ippisite/ippidb/static/js/ippidb.js
@@ -33,6 +33,7 @@ function addComp(id){
     document.getElementById("compound_"+id).appendChild(clone);
 }
 
+
 // Function to enlarge some part of the main page
 $(document).ready(function(){
     $('.box').on('click','.box__inner',function() {
diff --git a/ippisite/ippidb/templates/CompoundForm.html b/ippisite/ippidb/templates/CompoundForm.html
index e12d945f..274d1619 100644
--- a/ippisite/ippidb/templates/CompoundForm.html
+++ b/ippisite/ippidb/templates/CompoundForm.html
@@ -37,8 +37,14 @@
 								<h1 id="Name_{{ form.compound_name.id_for_label }}">Compound</h1>
 								<h2>Name your compound</h2>
 							</div>
-							<div class="compound_input">{{ form.common_name }}</div>
-							<div class="compound_input">{{ form.compound_name }}</div>
+							<div class="compound_input form-group">
+								{{ form.common_name }}
+								<label class="form-control-placeholder">Common name</label>
+							</div>
+							<div class="compound_input form-group">
+								{{ form.compound_name }}
+								<label class="form-control-placeholder">Name in biblio</label>
+							</div>
 							<div id="type_title">
 								<h2>Choose a format to import your molecule</h2>
 							</div>
@@ -52,14 +58,15 @@
 								</div>
 								{% endfor %}
 							</div>
-							<div class="compound_input" id="molecule_comp_{{ form.molecule.id_for_label }}">
+							<div class="compound_input form-group" id="molecule_comp_{{ form.molecule.id_for_label }}">
 								{{form.molecule_comp}}
+								<label class="form-control-placeholder">Molecule composition</label>
 							</div>
-							<div id="ck-button-long" class="compound_input">
+							<div id="ck-button-long">
 								<label>{{ form.is_macrocycle}}<span>{{ form.is_macrocycle.label }}</span></label>
 							</div>
-							<div id="ck-button-long" class="submit_button"> Add compound
-							</div>
+							<input type="button" id="ck-button-long" class="add_button" onclick="addComp();" value="Add Compound">
+							</input>
 						</div>
 				{% endfor %}
 				</div>
diff --git a/ippisite/ippidb/templates/IdForm.html b/ippisite/ippidb/templates/IdForm.html
index ef8eeef8..6c834eb1 100644
--- a/ippisite/ippidb/templates/IdForm.html
+++ b/ippisite/ippidb/templates/IdForm.html
@@ -46,7 +46,10 @@
 					    		</label>
 						{% endfor %}
 					</div>
-					<div class="input_field">{{ wizard.form.id_source}}</div>
+					<div class="input_field form-group">
+					{{ wizard.form.id_source}}
+					<label class="form-control-placeholder">ID</label>
+					</div>
 				</div>
 			{% endif %}
 			</table>
diff --git a/ippisite/ippidb/templates/PDBForm.html b/ippisite/ippidb/templates/PDBForm.html
index 50626d6d..d6033a2e 100644
--- a/ippisite/ippidb/templates/PDBForm.html
+++ b/ippisite/ippidb/templates/PDBForm.html
@@ -36,7 +36,10 @@
 				    test {{ form }}
 				{% endfor %}
 			{% else %}
-				<div class="input_field">{{form.pdb_id}}</div>
+				<div class="input_field form-group">
+					{{form.pdb_id}}
+					<label for="id_PDBForm-pdb_id" class="form-control-placeholder">PDB ID</label>
+				</div>
 			{% endif %}
 			</table>
 			<input class="submit_button" type="submit" value="{% trans "Next step" %}"/>
diff --git a/ippisite/ippidb/templates/PpiForm.html b/ippisite/ippidb/templates/PpiForm.html
index 7a37f00d..e9021764 100644
--- a/ippisite/ippidb/templates/PpiForm.html
+++ b/ippisite/ippidb/templates/PpiForm.html
@@ -39,11 +39,22 @@
 				{% endfor %}
 			{% else %}
 			<div class="inline_box_complex">
-				<div class="inline_label"> PPI: </div>
-				<div class="input_field">{{ wizard.form.pdb_id }}</div>
-				<div class="input_field">{{ wizard.form.pockets_nb}}</div>
-				<div class="inline_field">{{ wizard.form.cc_nb }}</div>
-				<div class="inline_field">{{ wizard.form.symmetry }}</div>
+				<div class="input_field form-group">
+					{{ wizard.form.pdb_id }}
+					<label class="form-control-placeholder">PDB ID</label>
+				</div>
+				<div class="input_field form-group">
+					{{ wizard.form.pockets_nb}}
+					<label class="form-control-placeholder">Pockets number</label>
+				</div>
+				<div class="input_field form-group">
+					{{ wizard.form.cc_nb }}
+					<label class="form-control-placeholder">Complex per PPI</label>
+				</div>
+				<div class="input_field form-group">
+					{{ wizard.form.symmetry }}
+					<label class="form-control-placeholder">Symmetry</label>				
+				</div>
 			</div>
 			{% endif %}
 			</table>
diff --git a/ippisite/ippidb/templates/ProteinDomainComplexForm.html b/ippisite/ippidb/templates/ProteinDomainComplexForm.html
index f6bfa0ee..3dea9303 100644
--- a/ippisite/ippidb/templates/ProteinDomainComplexForm.html
+++ b/ippisite/ippidb/templates/ProteinDomainComplexForm.html
@@ -34,10 +34,22 @@
 				{{ wizard.form.management_form }}
 				{% for form in wizard.form.forms %}
 				<div class="inline_box_complex_long">
-					<div class="input_field"> {{ form.complex_type }}</div>
-					<div class="input_field"> {{ form.complex_protein }}</div>
-					<div class="input_field"> {{ form.complex_domain }}</div>
-					<div class="input_field"> {{ form.ppc_copy_nb }}</div>
+					<div class="input_field form-group"> 
+						{{ form.complex_type }}
+						<label class="form-control-placeholder">Complex type</label>
+					</div>
+					<div class="input_field form-group"> 
+						{{ form.complex_protein }}
+						<label class="form-control-placeholder">Protein</label>
+						</div>
+					<div class="input_field form-group"> 
+						{{ form.complex_domain }}
+						<label class="form-control-placeholder">Domain</label>
+					</div>
+					<div class="input_field form-group"> 
+						{{ form.ppc_copy_nb }}
+						<label class="form-control-placeholder">Number of copies of the protein in the complex</label>
+					</div>
 				</div>
 				{% endfor %}
 			{% endif %}
diff --git a/ippisite/ippidb/templates/TestsForm.html b/ippisite/ippidb/templates/TestsForm.html
index ca1dbdd9..ef8dd9cb 100644
--- a/ippisite/ippidb/templates/TestsForm.html
+++ b/ippisite/ippidb/templates/TestsForm.html
@@ -19,68 +19,124 @@
 <div id="Form">
 	<div class="step_desc">
 		<h1 class="step_title">Tests performed</h1>
-	<p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p>
-	<p class="step_step_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate felis ac augue pretium, ac blandit lectus mattis. Vestibulum iaculis consequat facilisis. Duis porttitor erat mauris, non porttitor eros feugiat eu. Pellentesque id nisl vel nisl imperdiet convallis vel sed lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dolor urna, posuere vitae leo quis, hendrerit imperdiet enim. Nunc nec euismod nisi. Phasellus ut ante ante.</p>
+		<p class="step_step">Step {{ wizard.steps.step1 }} on {{ wizard.steps.count }}</p>
+		<p class="step_step_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vulputate felis ac augue pretium, ac blandit lectus mattis. Vestibulum iaculis consequat facilisis. Duis porttitor erat mauris, non porttitor eros feugiat eu. Pellentesque id nisl vel nisl imperdiet convallis vel sed lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dolor urna, posuere vitae leo quis, hendrerit imperdiet enim. Nunc nec euismod nisi. Phasellus ut ante ante.</p>
 	</div>
 	<div class="form_div">
 		<form action="" method="post">
 			{% csrf_token %}
 			<table>
-			{{ wizard.management_form }}
-			{{ wizard.form.errors}}
-	    	{{ wizard.form.non_field_errors}}
-	    	{% block custom_form %}{% endblock %}
-		
-			{% if wizard.form.forms %}
+				{{ wizard.management_form }}
+				{{ wizard.form.errors}}
+				{{ wizard.form.non_field_errors}}
+				{% block custom_form %}{% endblock %}
+
+				{% if wizard.form.forms %}
 				{{ wizard.form.management_form }}
 				{% for form in wizard.form.forms %}
-				    {{ form }}
+				{{ form }}
 				{% endfor %}
-			{% else %}
-			<div class="tests">
-				<!-- Tab links -->
-				<div class="tab">
-				  <button class="tablinks active" onclick="openTests(event, 'Activity')" id="defaultOpen">Activity</button>
-				  <button class="tablinks" onclick="openTests(event, 'Cytotoxicity')">Cytotoxicity</button>
-				  <button class="tablinks" onclick="openTests(event, 'PK')">PK</button>
-				</div>
+				{% else %}
+				<div class="tests">
+					<!-- Tab links -->
+					<div class="tab">
+						<button class="tablinks active" onclick="openTests(event, 'Activity')" id="defaultOpen">Activity</button>
+						<button class="tablinks" onclick="openTests(event, 'Cytotoxicity')">Cytotoxicity</button>
+						<button class="tablinks" onclick="openTests(event, 'PK')">PK</button>
+					</div>
 
-				<!-- Tab content -->
-				<div id="Activity" class="tabcontent" style="display: block;">
-				  <div class="test_input">{{ wizard.form.activityDesc_test_name }}</div>
-					<div>
-						{% for radio in wizard.form.activityDesc_type %}
-						<div>
-							{{ radio.tag }}
-							<label>
-								<span>{{ radio.choice_label }}</span>
-							</label>
+					<!-- Tab content -->
+					<div id="Activity" class="tabcontent" style="display: block;">
+						<div class="test_activity">
+							<h2>Describe your activity test</h2>
+							<div class="test_input form-group">
+								{{ wizard.form.activityDesc_test_name }}
+								<label class="form-control-placeholder" for="id_TestsForm-activityDesc_test_name">Activity test name</label>
+							</div>
+							<div id="ck-button-half">
+								{% for radio in wizard.form.activityDesc_type %}
+								<label>
+									{{ radio.tag }}
+									<span>{{ radio.choice_label }}</span>
+								</label>
+								{% endfor %}
+								<label class="form-control-placeholder">Activity type</label>
+							</div>
+							<div class="test_input form-group">
+								{{ wizard.form.activityDesc_cell_line }}
+								<label class="form-control-placeholder">Corresponding cell line</label>
+							</div>
+							<div class="test_input form-group">
+								{{ wizard.form.activityDesc_test_modulation_type }}
+								<label class="form-control-placeholder">Modulation type</label>
+							</div>
+							<h2>Results</h2>
+							<div class="inline_box_test ">
+								<div class="inline_field  form-group">
+									{{ wizard.form.activityRes_compound }}
+									<label class="form-control-placeholder">Compound</label>
+								</div>
+								<div class="inline_field  form-group">
+									{{ wizard.form.activityRes_test_modulation_type }}
+									<label class="form-control-placeholder">Modulation type</label>
+								</div>
+								<div class="inline_field form-group">
+									{{ wizard.form.activityRes_activity_type }}
+									<label class="form-control-placeholder">Activity type</label>
+								</div>
+								<div class="inline_field form-group">
+									{{ wizard.form.activityRes_activity }}
+									<label class="form-control-placeholder">Activity</label>
+								</div>
+								<input type="button" class="add_button" value="+ Add compound"></input>
+							</div>
+						</div>
+					</div>
+					<div id="Cytotoxicity" class="tabcontent">
+						<div class="test_activity">
+							<h2>Describe your cytotoxicity test</h2>
+							<div class="test_input form-group">
+								{{ wizard.form.cytotoxDesc_test_name }}
+								<label class="form-control-placeholder" for="id_TestsForm-id_TestsForm-cytotoxDesc_test_name">Cytotoxicity test name</label>
+							</div>
+							<div class="test_input">{{ wizard.form.cytotoxDesc_cell_line }}</div>
+							<div class="test_input">{{ wizard.form.cytotoxDesc_compound_concentration }}</div>
+							<h2>Results</h2>
+							<div class="inline_box_test">
+								<div class="inline_field">{{ wizard.form.cytotoxRes_compound }}</div>
+								<div class="inline_field">{{ wizard.form.cytotoxRes_toxicity }}</div>
+								<input type="button" class="add_button" value="+ Add compound"></input>
+							</div>
 						</div>
-						{% endfor %}
 					</div>
-					<div class="test_input">{{ wizard.form.activityDesc_cell_line }}</div>
-					<div class="test_input">{{ wizard.form.activityDesc_ppi }}</div>
-					<div class="test_input">{{ wizard.form.activityRes_test_modulation_type }}</div>
-				</div>
 
-				<div id="Cytotoxicity" class="tabcontent">
-					<div class="test_input">{{ wizard.form.cytotoxDesc_test_name }}</div>
-					<div class="test_input">{{ wizard.form.cytotoxDesc_cell_line }}</div>
-					<div class="test_input">{{ wizard.form.cytotoxDesc_compound_concentration }}</div>
-					<div class="test_input">{{ wizard.form.cytotoxRes_toxicity }}</div>
+					<div id="PK" class="tabcontent">
+						<div class="test_activity">
+							<h2>Describe your PK test</h2>
+							<div class="test_input">{{ wizard.form.pkDesc_test_name }}</div>
+							<div class="test_input">{{ wizard.form.pkDesc_organism }}</div>
+							<div class="test_input">{{ wizard.form.pkDesc_administration_mode }}</div>
+							<div class="test_input">{{ wizard.form.pkDesc_dose }}</div>
+							<div class="test_input">{{ wizard.form.pkDesc_dose_interval }}</div>
+							<h2>Results</h2>
+							<div class="inline_box_test">
+								<div class="inline_field">{{ wizard.form.pkRes_compound }}</div>
+								<div class="inline_field">{{ wizard.form.pkRes_tolerated }}</div>
+								<div class="inline_field">{{ wizard.form.pkRes_auc }}</div>
+								<div class="inline_field">{{ wizard.form.pkRes_clearance }}</div>
+								<div class="inline_field">{{ wizard.form.pkRes_cmax }}</div>
+								<div class="inline_field">{{ wizard.form.pkRes_oral_bioavailability }}</div>
+								<div class="inline_field">{{ wizard.form.pkRes_t_demi }}</div>
+								<div class="inline_field">{{ wizard.form.pkRes_t_max }}</div>
+								<div class="inline_field">{{ wizard.form.pkRes_voldistribution }}</div>
+								<input type="button" class="add_button" value="+ Add compound"></input>
+							</div>
+						</div>	
+					</div>	
 				</div>
-
-				<div id="PK" class="tabcontent">
-					<div class="test_input">{{ wizard.form.pkDesc_test_name }}</div>
-					<div class="test_input">{{ wizard.form.pkDesc_organism }}</div>
-					<div class="test_input">{{ wizard.form.pkDesc_administration_mode }}</div>
-					<div class="test_input">{{ wizard.form.pkDesc_dose }}</div>
-					<div class="test_input">{{ wizard.form.pkDesc_dose_interval }}</div>
-				</div>	
-			</div>
-			{% endif %}
+				{% endif %}
 			</table>
-				<input class="submit_button" type="submit" value="{% trans "submit" %}"/>
+			<input class="submit_button" type="submit" value="{% trans "submit" %}"/>
 		</form>
 	</div>
 </div>
diff --git a/ippisite/requirements_rachel.txt b/ippisite/requirements_rachel.txt
new file mode 100644
index 00000000..18ef0a1d
--- /dev/null
+++ b/ippisite/requirements_rachel.txt
@@ -0,0 +1,14 @@
+Django==1.11
+django-bootstrap3
+django-pandas
+bioservices
+typing
+django-extensions
+pydot
+pyparsing
+django-formtools
+django-debug-toolbar
+mod_wsgi
+bioblend
+django-allauth
+#pygraphviz>=1.3 --install-option="--include-path=/usr/local/include/graphviz/" --install-option="--library-path=/usr/local/lib/graphviz"
-- 
GitLab