
<html>


<style>


 /*----------------------------------------------mylaptop----------------------------*/
 
 #container {
 background-color: #E6E6FA;
 width: 1510px;
 height:715px;
 margin-left:0px auto;
 margin-right:0px auto;
 background-size:cover;
 }
  Body{
 background-color: #E6E6FA;
 width: 1510px;
 height:725px;
 }
 a {
text-decoration:none;
 color: white;
 }
 
 #header{
 background-color: #E6E6FA;
 width: 1510px;
 height: 50px;
 padding:0px;
 position:absolute;
 top:0px;
 left:15px;
 }
  #header h1{
    color:#B22222;
	width:700px;
	height:40px;
	line-height:40px;
	font-size:30px;
	text-align:left;
 }
 
  #header h3{
	 position: absolute;
	 top:0px;
	 right:110px;
 	 color:#B22222;
	width:350px;
	height:40px;
	line-height:20px;
	font-size:20px;
	text-align:right;
 }
 #header img{
position:absolute;
right:40px;
top:0px;	 
 }
 
 #nav{
	 width:1490;
height:70px;
margin:0px auto;  
position:relative;
top:55px;
Z-index:10;
}
#nav ul{
    padding:0px;
}
#nav ul li{
    float: left; 
	background-color:#0000CD;
	color:white;
	width:185px;
	height:30px;
	line-height:30px;
	font-size:20px;
	text-align:center;
	list-style:none;
	opacity:0.8;
	
}
#nav ul li ul{
     display:none;
}
#nav ul li:hover > ul{
   display:block;
   
}

#nav ul li:hover{
    background-color:#32cd32;
    opacity:0.8;
}	
#nav ul li ul{
    position:absolute
	left:180px;
	top:0px;
}
#main{
height:650px;
width:800px;
float:left;
}
#main .RA h2{
width:490px;
height: 120px;
padding:0px;
font-family: calibri;
font-size: 25px;
text-align:left;
position: relative;
top:120px;
left:60px;
}

#main .RA p{
position: absolute;
top:235px;
left:110px;
font-size:15px;
font-family:Arial,Calibri,"Times New Roman",Courier light;

}
#main .RA a{
color:black;
text-decoration:none;

}

#main .Pic{
position:absolute;
top:130px;
left:550px;
}

#main .welcomenote{
position:relative;
top:20px;
left:25px;
Width:720px;
height:300px;
text-align:justify;
font-size:16px;
font-family:Arial,Calibri,"Times New Roman",Courier light;
text-indent:50px;
}

#sbox{
position:relative;
top:30px;
right:0px;
}

#nabox{
padding:0px;
height:250px;
width:700px;
position:relative;
top:15px;
right:140px;
Z-index:100;
}
#nabox .box {
background-color:white;
}
#nabox p {
	height:30px;
	line-height:23px;
	font-size:16px;
	text-align:left;
	list-style:none;
	
}
#nabox a {
color:blue;
text-decoration:none;
}

#footer{
position: relative;
}
#footer ul {
 clear: both;
 background-color: #0000CD;
 list-style: none;
 height:35px;
 line-height:20px;
 }
 #footer ul li{
	float:left;
	color:blue;
	width:145px;
	height:35px;
	line-height:20px;
	font-size:20px;
	text-align:center;
	list-style:none;
	margin-top:8px;
	
	}
 #footer ul li ul{
     display:none;
}
#footer ul li:hover > ul{
   display:block;
   
}

#footer ul li:hover{
   
    opacity:0.8;
}	

 /*----------------------------------------------mylaptop----------------------------*/
 
  /*----------------------------------------------Desktops----------------------------*/
  @media screen and (max-width:1439px){
	  #container{
		  width:97%;
	  }
  }
   /*----------------------------------------------Desktops----------------------------*/
 
</style>
</html>
<div id= "container">

<div class="navbarmain">
    
	<img src= "pics/iitglogo.gif" class="logo">
	
	<nav>
        <ul id="menuList">
		 <li><a href="index.">Home</a></li> 
		 <li><a href="about.html">About</a></li>
		 <li><a href="aptasearch.php">Aptamer Search</a></li>
         <li><a href="details.html">Publication Details</a></li>
         <li><a href="contri.html">Contribution</a></li>
         <li><a href="disclaimer.html">Disclaimer</a></li>		 
        </ul>		  
   </nav>
   
   <img src= "pics/menu.jpg" class="menu-icon" onclick="togglemenu()">

</div>	

<!-------common for all pages of the site----end-->

<div class= "homepage">
<img src="pics/hpp.jpg" height="450px" width="100%"> 
</div>

<div id= "counter">		
      <!-- hitwebcounter Code START -->
<a href="https://www.hitwebcounter.com" target="_blank">
<img src="https://hitwebcounter.com/counter/counter.php?page=7874434&style=0001&nbdigits=7&type=page&initCount=0" title="Free Counter" Alt="web counter"   border="0" /></a>                                     
                                                  		                
</div>	



<div class="gccal">

<form action="get">
    
  <!-- PS: This code is modified version of an existing code of the Oligonucleotide Properties Calculator which can be found at http://www.pitt.edu/~rsup/OligoCalc.html.-->
  <table  style="padding:10px; border-style:outset; background-color:#ffe6e6">
      <tr>
         <td><table>
               <tr>
                  <td style="width:20% text-align:justify" >Aptamer sequences without nucleotide modification.<br>
                     <textarea cols="30" onchange="Calculate(this.form)" name="apt_Box" rows="5" placeholder="Enter Aptamer Sequence here" style="text-align:left; white-space: nowrap; overflow: auto; " ></textarea></td>
                  <td>
                     <input name="Calbutton" onclick="Calculate(this.form)" value="Submit" type="button">
                     <br>
                     <br>

                     <input value="Reset" type="reset"></td>
               </tr>
            </table>
            <table style="padding:5px; text-align:left">
               <tr>
                  <td>Aptamer Sequence Length:</td>
                  <td><input size="3" name="lengthBox" onfocus="Disallow(this.form)"></td>
               </tr>
               <tr>
                  <td >Adenine (A):</td>
                  <td><input size="3" name="aBox" onfocus="Disallow(this.form)" ></td>
               </tr>
               <tr>
                  <td>Thymine (T):</td>
                  <td><input size="3" name="tBox" onfocus="Disallow(this.form)"></td>
               </tr>
               <tr>
                  <td>Guanine (G):</td>
                  <td><input size="3" name="gBox" onfocus="Disallow(this.form)"></td>
               </tr>
               <tr>
                  <td>Cytosine (C):</td>
                  <td><input size="3" name="cBox" onfocus="Disallow(this.form)"></td>
               </tr>
               <tr>
                   <tr>
                  <td>Uracil (U):</td>
                  <td><input size="3" name="uBox" onfocus="Disallow(this.form)"></td>
               </tr>
				  
				  <td>GC Content (%)</td>
                  <td><input size="3" name="gcBox" onfocus="Disallow(this.form)"></td>
               </tr>
			   
			  
			   
            </table></td>
      </tr>
   </table>
</form>
<script type="text/javascript">

   function Calculate(form) {
      newnuc_Count = new nuc_Count(form.apt_Box.value);
      form.apt_Box.value = newnuc_Count.Sequence;
      form.lengthBox.value = newnuc_Count.Sequence.length;
      form.aBox.value = newnuc_Count.aCount;
      form.tBox.value = newnuc_Count.tCount;
      form.gBox.value = newnuc_Count.gCount;
      form.cBox.value = newnuc_Count.cCount;
	  form.uBox.value = newnuc_Count.uCount;
      form.gcBox.value = newnuc_Count.GC();
   }

   function nuc_Count(theString) {
      this.Sequence = RemoveNonBase(theString);
      this.aCount = CountChar(this.Sequence, "A");
      this.cCount = CountChar(this.Sequence, "C");
      this.gCount = CountChar(this.Sequence, "G");
      this.tCount = CountChar(this.Sequence, "T");
	  this.uCount = CountChar(this.Sequence, "U");
      this.GC = GC;
   }

   function GC() {
      if (this.Sequence.length > 0) {
         // Multiply by 10, then divide by 10 to get one DP
         return Math.round((100 * (this.gCount + this.cCount) / this.Sequence.length) * 10) / 10;
      } else {
         return "";
      }
   }

   function RemoveNonBase(theString) {
      var returnString = "";
      theString = theString.toUpperCase();
      messageDisplayed = 0;
      for (var i = 0; i < theString.length; i++) {
         if ((theString.charAt(i) == "A") || (theString.charAt(i) == "G") || (theString.charAt(i) == "C") || (theString.charAt(i) == "U") || (theString.charAt(i) == "T")) {
            returnString += theString.charAt(i);
         } else if (i == 0 && theString.charAt(i) == ">") {
            // This is a FASTA format sequence.  Skip ahead to a CR/LF.
            while (i < theString.length && !(theString.charAt(i) == '\r' || theString.charAt(i) == '\n'))
               i++;
         } else if (messageDisplayed == 0 && theString.charAt(i) != ' ' && theString.charAt(i) != '\r' && theString.charAt(i) != '\n') {
            // Allow space, CR, and LF, otherwise delete non-Base characters and notify the user.
            messageDisplayed = 1;
            sb.ui.showMessage("Your DNA sequence contains characters other than A, T, G, U and C.  These characters will be deleted.");
         }
      }
      return returnString;
   }

   function CountChar(theString, theChar) {
      var returnValue = 0;
      theString = theString.toUpperCase();
      for (var i = 0; i < theString.length; i++) {
         if (theString.charAt(i) == theChar) {
            returnValue++;
         }
      }
      return returnValue;
   }

   function Disallow(form) {
      form.apt_Box.focus();
   }

</script>
</div>



</div>
<script>
 
function  
 function togglemenu(){
 if(menuList.style.display==="block"){
  menuList.style.display="none";
 }
 else {
  menuList.style.display="block";
 }
 }  
</script>




