Difference between revisions of "Team:NUS Singapore/Notebook/Group3"

Line 4: Line 4:
 
<html lang="en" class="no-js">
 
<html lang="en" class="no-js">
 
<head>
 
<head>
    <meta charset="UTF-8" />
+
  <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
  <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Interactive Points | Codrops</title>
+
  <title>Interactive Points | Codrops</title>
    <meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" />
+
  <meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" />
    <meta name="author" content="Codrops" />
+
  <meta name="author" content="Codrops" />
    <link rel="shortcut icon" href="favicon.ico">
+
  <link rel="shortcut icon" href="favicon.ico">
  
  
    <!-- <script src="js/modernizr.custom.js"></script> -->
+
  <!-- <script src="js/modernizr.custom.js"></script> -->
  
 
         <!--[if IE]>
 
         <!--[if IE]>
 
         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
         <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 
         <![endif]-->
 
         <![endif]-->
    </head>
+
      </head>
    <body>
+
      <body>
 
         <main>
 
         <main>
            <div id="st-container" class="st-container">
+
          <div id="st-container" class="st-container">
                <div class="st-pusher">
+
            <div class="st-pusher">
  
                    <!--Sidebar button-->
+
              <!--Sidebar button-->
                    <div id="st-trigger-effects">
+
              <div id="st-trigger-effects">
                        <button data-effect="st-effect-1" class="button button--rayen button--border button--round-m" data-text="More" style="left: -83px; font-size: 50px; z-index: 100;">
+
                <button data-effect="st-effect-1" class="button button--rayen button--border button--round-m" data-text="More" style="left: -83px; font-size: 50px; z-index: 100;">
                            <span><img src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png"></span>
+
                  <span><img src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png"></span>
                        </button>
+
                </button>
 +
              </div>
 +
              <!--End of Sidebar button-->
 +
 
 +
              <!--Header-->
 +
              <header id="ha-header" class="ha-header ha-header-large">
 +
                <div class="ha-header-perspective">
 +
                  <div id="header1" class="ha-header-front" style="height: 120px">
 +
                  <a href="https://2016.igem.org/Team:NUS_Singapore"><img id="nus_logo" src="https://static.igem.org/mediawiki/2016/1/1d/T--NUS_Singapore--header_left.png" style="height: 130%; margin-top: -10px; left: 0px; position: absolute;"/></a>
 +
                  <a href="http://www.science.nus.edu.sg"><img id="sci_logo" src="https://static.igem.org/mediawiki/2016/2/21/T--NUS_Singapore--NUS_Science_logo_grey.png" style="height: 70%; margin-top: 25px; right: 0px; position: absolute;"/></a>
 +
                  <a href="http://sps.nus.edu.sg/alpha"><img id="sps_logo" src="https://static.igem.org/mediawiki/2016/e/ec/T--NUS_Singapore--SPS_Logo_High_Res_grey.png" style="height: 60%; margin-top: 25px; right: 280px; position: absolute;"/></a>
 +
                  <div style="height: 7%; background-color: rgb(217, 215, 215); width: 100%; bottom: 0px; left: 0px; position: absolute;"></div>
 +
                </div>
 +
                <div class="ha-header-bottom" style="text-align: center;">
 +
                  <a><h1><a href="https://2016.igem.org/Team:NUS_Singapore" style="color: black; font-weight: lighter;">iGEM 2016 &nbsp; &nbsp; &nbsp; &nbsp; NUS SINGAPORE</a></h1></a>
 +
                </div>
 +
              </div>
 +
            </header>
 +
            <!--End of Header-->
 +
 
 +
            <!--Side Bar-->
 +
            <nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto; z-index: 100; background-color: rgb(179, 179, 179);">
 +
              <span><img src="https://static.igem.org/mediawiki/2016/1/1e/T--NUS_Singapore--practice.png" style="width: 30px; height: auto; top: 35px; left: 35px; position: absolute;"><h4 style=" left: 75px; top: 25px; position: absolute; font-size: 17px;">NUS_SINGAPORE</h4></span>
 +
              <ul>
 +
                <li><a class="icon icon-home" id="menu-item-1" href="https://2016.igem.org/Team:NUS_Singapore">Home</a></li>
 +
                <li><a class="icon icon-project" onclick="growDiv('2')" id="menu-item-2" href="https://2016.igem.org/Team:NUS_Singapore/Project">Project
 +
                  <span><img id="sidebar-arrow-2" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
 +
                  <div class="grow" id="grow-2">
 +
                    <div class='measuringWrapper'>
 +
                      <a href="https://2016.igem.org/Team:NUS_Singapore/Project/Wet_Lab" class="list-group-item" style="color: rgb(179, 179, 179);">Overview</a>
 +
                     
 +
                      <a href="https://2016.igem.org/Team:NUS_Singapore/Model" class="list-group-item" style="color: rgb(179, 179, 179);">Modelling</a>
 +
                    </div>
 +
                  </div>
 +
                </li>
 +
                <li><a class="icon icon-notebook"  id="menu-item-9" onclick="growDiv('9')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">RIOTSensor
 +
                  <span><img id="sidebar-arrow-9" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
 +
                  <div class="grow" id="grow-9">
 +
                    <div class='measuringWrapper'>
 +
                      <a href="https://2016.igem.org/Team:NUS_Singapore/Description" class="list-group-item" style="color: rgb(179, 179, 179);">Description</a>
 +
                      <a href="https://2016.igem.org/Team:NUS_Singapore/Proof" class="list-group-item" style="color: rgb(179, 179, 179);">Proof of Concept</a>
 +
                      <a href="https://2016.igem.org/Team:NUS_Singapore/Demonstrate" class="list-group-item" style="color: rgb(179, 179, 179);">Demonstration</a>
 +
                     
 +
                    </div>
 +
                  </div>
 +
                </li>
 +
                <li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTResponder">RIOTResponder</a></li>
 +
                <li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTInvader">RIOTInvader</a></li>
 +
                <li><a class="icon icon-practice" onclick="growDiv('3')" id="menu-item-3" href="#">Human Practices
 +
                  <span><img id="sidebar-arrow-3" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"><span></a>
 +
                    <div class="grow" id="grow-3">
 +
                      <div class='measuringWrapper'>
 +
                        <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Silver" class="list-group-item" style="color: rgb(179, 179, 179);">Survey</a>
 +
                        <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Gold" class="list-group-item" style="color: rgb(179, 179, 179);">Business Plan</a>
 +
                        <a href="https://2016.igem.org/Team:NUS_Singapore/Integrated_Practices" class="list-group-item" style="color: rgb(179, 179, 179);">Integration</a>
 +
                      </div>
 +
                    </div>
 +
                  </li>
 +
                  <li><a class="icon icon-collaboration" onclick="growDiv('4')" id="menu-item-4" href="#">Collaborations
 +
                    <span><img id="sidebar-arrow-4" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
 +
                    <div class="grow" id="grow-4">
 +
                      <div class='measuringWrapper'>
 +
                        <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Melbourne</a>
 +
                        <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Hong_Kong_HKU</a>
 +
                        <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">ETH_Zurich</a>
 +
                      </div>
 
                     </div>
 
                     </div>
                    <!--End of Sidebar button-->
+
                  </li>
 +
                  <li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Parts">Parts Registry</a></li>
 +
                  <li><a class="icon icon-safety" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Safety">Safety</a></li>
  
                    <!--Header-->
+
                  <li><a class="icon icon-team" id="menu-item-6" href="https://2016.igem.org/Team:NUS_Singapore/Team">Team</a></li>
                    <header id="ha-header" class="ha-header ha-header-large">
+
                  <li><a class="icon icon-notebook" id="menu-item-7" onclick="growDiv('7')" href="https://2016.igem.org/Team:NUS_Singapore/Notebook">Notebook
                        <div class="ha-header-perspective">
+
                    <span><img id="sidebar-arrow-7" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
                            <div id="header1" class="ha-header-front" style="height: 120px">
+
                    <div class="grow" id="grow-7">
                              <a href="https://2016.igem.org/Team:NUS_Singapore"><img id="nus_logo" src="https://static.igem.org/mediawiki/2016/1/1d/T--NUS_Singapore--header_left.png" style="height: 130%; margin-top: -10px; left: 0px; position: absolute;"/></a>
+
                      <div class='measuringWrapper'>
                              <a href="http://www.science.nus.edu.sg"><img id="sci_logo" src="https://static.igem.org/mediawiki/2016/2/21/T--NUS_Singapore--NUS_Science_logo_grey.png" style="height: 70%; margin-top: 25px; right: 0px; position: absolute;"/></a>
+
                        <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group1" class="list-group-item" style="color: rgb(179, 179, 179);">I. RIOT Sensor</a>
                              <a href="http://sps.nus.edu.sg/alpha"><img id="sps_logo" src="https://static.igem.org/mediawiki/2016/e/ec/T--NUS_Singapore--SPS_Logo_High_Res_grey.png" style="height: 60%; margin-top: 25px; right: 280px; position: absolute;"/></a>
+
                        <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group2" class="list-group-item" style="color: rgb(179, 179, 179);">II. RIOT Responder</a>
                              <div style="height: 7%; background-color: rgb(217, 215, 215); width: 100%; bottom: 0px; left: 0px; position: absolute;"></div>
+
                        <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group3" class="list-group-item" style="color: rgb(179, 179, 179);">III. RIOT Invader</a>
                          </div>
+
                      </div>
                          <div class="ha-header-bottom" style="text-align: center;">
+
                            <a><h1><a href="https://2016.igem.org/Team:NUS_Singapore" style="color: black; font-weight: lighter;">iGEM 2016 &nbsp; &nbsp; &nbsp; &nbsp; NUS SINGAPORE</a></h1></a>
+
                        </div>
+
 
                     </div>
 
                     </div>
                </header>
+
                  </li>
                 <!--End of Header-->
+
                  <li><a class="icon icon-acknowledgement" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Attributions">Attributions</a></li>
 +
                  <li><a class="icon icon-cup" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Medals">Medals</a></li>
 +
                 </ul>
 +
              </nav>
 +
              <!--End of Side Bar-->
  
                <!--Side Bar-->
+
 
          <nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto; z-index: 100; background-color: rgb(179, 179, 179);">
+
              <div class="demos">
<span><img src="https://static.igem.org/mediawiki/2016/1/1e/T--NUS_Singapore--practice.png" style="width: 30px; height: auto; top: 35px; left: 35px; position: absolute;"><h4 style=" left: 75px; top: 25px; position: absolute; font-size: 17px;">NUS_SINGAPORE</h4></span>
+
                <a class="current-demo" href="index.html">Default Demo</a>
            <ul>
+
                <a href="index2.html">Perspective Demo (Webkit only)</a>
               <li><a class="icon icon-home" id="menu-item-1" href="https://2016.igem.org/Team:NUS_Singapore">Home</a></li>
+
              </div>
              <li><a class="icon icon-project" onclick="growDiv('2')" id="menu-item-2" href="https://2016.igem.org/Team:NUS_Singapore/Project">Project
+
              <div style="position: absolute; height: 250px; width: 100%; background-color: black; z-index: -1;"></div>
                <span><img id="sidebar-arrow-2" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
              <h2 class="ss-subtitle">Wet Lab Notebook: RIOT RESPONDER</h2>
                 <div class="grow" id="grow-2">
+
               <div id="ss-links" class="ss-links" style="z-index: 99;">
                   <div class='measuringWrapper'>
+
                <a href="#st-container">Jun</a>
                    <a href="https://2016.igem.org/Team:NUS_Singapore/Project/Wet_Lab" class="list-group-item" style="color: rgb(179, 179, 179);">Overview</a>
+
                <a href="#july">Jul</a>
                      
+
                <a href="#august">Aug</a>
<a href="https://2016.igem.org/Team:NUS_Singapore/Model" class="list-group-item" style="color: rgb(179, 179, 179);">Modelling</a>
+
                <a href="#september">Sep</a>
 +
                <a href="#october">Oct</a>
 +
              </div>
 +
              <div id="ss-container" class="ss-container" style="background-color: white;">
 +
                 <div class="ss-row" style="right: 0%;">
 +
                   <div class="ss-left" style="left: 2%;">
 +
                     <h2 id="may" class="">Jun</h2>
 
                   </div>
 
                   </div>
                </div>
+
                  <div class="ss-right" style="right: -2%;">
              </li>
+
                    <h2>2016</h2>
<li><a class="icon icon-notebook"  id="menu-item-9" onclick="growDiv('9')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">RIOTSensor
+
                <span><img id="sidebar-arrow-9" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
                <div class="grow" id="grow-9">
+
                  <div class='measuringWrapper'>
+
                    <a href="https://2016.igem.org/Team:NUS_Singapore/Description" class="list-group-item" style="color: rgb(179, 179, 179);">Description</a>
+
<a href="https://2016.igem.org/Team:NUS_Singapore/Proof" class="list-group-item" style="color: rgb(179, 179, 179);">Proof of Concept</a>
+
                    <a href="https://2016.igem.org/Team:NUS_Singapore/Demonstrate" class="list-group-item" style="color: rgb(179, 179, 179);">Demonstration</a>
+
       
+
 
                   </div>
 
                   </div>
 
                 </div>
 
                 </div>
              </li>
+
                <div class="ss-row ss-large">
<li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTResponder">RIOTResponder</a></li>
+
                  <div class="ss-left">
<li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/RIOTInvader">RIOTInvader</a></li>
+
                    <div class="log-content ss-circle-deco" style="margin-top: 20px;">
              <li><a class="icon icon-practice" onclick="growDiv('3')" id="menu-item-3" href="#">Human Practices
+
                    <p>Overall Strategies</p>
                <span><img id="sidebar-arrow-3" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"><span></a>
+
 
                <div class="grow" id="grow-3">
+
 
                  <div class='measuringWrapper'>
+
                    <p><img src="https://static.igem.org/mediawiki/2016/1/13/T--NUS_Singapore--log3_1.png" style="width: 100%;"></p>
                                                                          <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Silver" class="list-group-item" style="color: rgb(179, 179, 179);">Survey</a>
+
                    <p><img src="https://static.igem.org/mediawiki/2016/2/25/T--NUS_Singapore--log3_0.png" style="width: 100%;"></p>
                                                                          <a href="https://2016.igem.org/Team:NUS_Singapore/HP/Gold" class="list-group-item" style="color: rgb(179, 179, 179);">Business Plan</a>
+
                  </div>
<a href="https://2016.igem.org/Team:NUS_Singapore/Integrated_Practices" class="list-group-item" style="color: rgb(179, 179, 179);">Integration</a>
+
                </div>
                   </div>
+
                <div class="ss-right">
 +
                  <h3>
 +
                    <span>1 June, 2016</span>
 +
                    <a href="http://tympanus.net/Tutorials/TypographyEffects/">Milestone 1 : Overall cloning design</a>
 +
                   </h3>
 
                 </div>
 
                 </div>
               </li>
+
               </div>
              <li><a class="icon icon-collaboration" onclick="growDiv('4')" id="menu-item-4" href="#">Collaborations
+
                                                                <span><img id="sidebar-arrow-4" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
                <div class="grow" id="grow-4">
+
                  <div class='measuringWrapper'>
+
                    <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Melbourne</a>
+
                    <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">Hong_Kong_HKU</a>
+
                    <a href="https://2016.igem.org/Team:NUS_Singapore/Collaborations" class="list-group-item" style="color: rgb(179, 179, 179);">ETH_Zurich</a>
+
                  </div>
+
                </div>
+
              </li>
+
                                                        <li><a class="icon icon-notebook" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Parts">Parts Registry</a></li>
+
              <li><a class="icon icon-safety" id="menu-item-5" href="https://2016.igem.org/Team:NUS_Singapore/Safety">Safety</a></li>
+
  
               <li><a class="icon icon-team" id="menu-item-6" href="https://2016.igem.org/Team:NUS_Singapore/Team">Team</a></li>
+
               <div class="ss-row ss-large">
              <li><a class="icon icon-notebook"  id="menu-item-7" onclick="growDiv('7')"  href="https://2016.igem.org/Team:NUS_Singapore/Notebook">Notebook
+
                 <div class="ss-left">
                <span><img id="sidebar-arrow-7" src="https://static.igem.org/mediawiki/2016/c/ce/T--NUS_Singapore--scroll-down-arrow.png" style="position: relative; height: 20px; float: right;"></span></a>
+
                   <h3>
                 <div class="grow" id="grow-7">
+
                     <span>12 June, 2016</span>
                   <div class='measuringWrapper'>
+
                     <a>Milestone 2: Construction of pConst-LuxR-HA</a>
                     <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group1" class="list-group-item" style="color: rgb(179, 179, 179);">I. RIOT Sensor</a>
+
                   </h3>
                     <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group2" class="list-group-item" style="color: rgb(179, 179, 179);">II. RIOT Responder</a>
+
                    <a href="https://2016.igem.org/Team:NUS_Singapore/Notebook/Group3" class="list-group-item" style="color: rgb(179, 179, 179);">III. RIOT Invader</a>
+
                   </div>
+
 
                 </div>
 
                 </div>
              </li>
+
                <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
              <li><a class="icon icon-acknowledgement" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Attributions">Attributions</a></li>
+
                  <div class="log-content ss-circle-deco">
                            <li><a class="icon icon-cup" id="menu-item-8" href="https://2016.igem.org/Team:NUS_Singapore/Medals">Medals</a></li>
+
                  <span><p>Construct 1: </p><p><img src="https://static.igem.org/mediawiki/2016/9/9f/T--NUS_Singapore--log3_8.png" style="width: 100%;"></p></span>
            </ul>
+
          </nav>
+
          <!--End of Side Bar-->
+
  
 +
                  <p><img src="https://static.igem.org/mediawiki/2016/e/e7/T--NUS_Singapore--log3_2.png" style="width: 100%;"></p>
 +
                  <p>
 +
                    <span style="font-size: larger;">Fig 1. A.</span> LuxR gene amplified from iGEM distribution 2016 with designed primers GEM002 and GEM005. The expected band size of LuxR with overhang is 795 bp.  <span style="font-size: larger;">B.</span>LuxR stitiched with terminater (BBa_B0015) with overlapping PCR. <span style="font-size: larger;">C.</span> Constructed full-length RBS-pConstitutive-LuxR-HA-Terminator with expected size of 1034 bp.
  
  <div class="demos">
+
                  </p>
    <a class="current-demo" href="index.html">Default Demo</a>
+
                 
    <a href="index2.html">Perspective Demo (Webkit only)</a>
+
                </div>
</div>
+
              </div>
<div style="position: absolute; height: 250px; width: 100%; background-color: black; z-index: -1;"></div>
+
            </div>
<h2 class="ss-subtitle">Wet Lab Notebook: RIOT RESPONDER</h2>
+
<div id="ss-links" class="ss-links" style="z-index: 99;">
+
    <a href="#st-container">Jun</a>
+
    <a href="#july">Jul</a>
+
    <a href="#august">Aug</a>
+
    <a href="#september">Sep</a>
+
    <a href="#october">Oct</a>
+
</div>
+
<div id="ss-container" class="ss-container" style="background-color: white;">
+
    <div class="ss-row" style="right: 0%;">
+
        <div class="ss-left" style="left: 2%;">
+
            <h2 id="may" class="">Jun</h2>
+
        </div>
+
        <div class="ss-right" style="right: -2%;">
+
            <h2>2016</h2>
+
        </div>
+
        <div class="ss-row ss-large">
+
        <div class="ss-left">
+
            <div class="log-content ss-circle-deco" style="margin-top: 20px;">
+
              <p>Overall Strategies</p>
+
  
 +
            <div class="ss-row">
 +
              <div class="ss-left">
 +
                <h2 id="july" class="offset">July</h2>
 +
              </div>
 +
              <div class="ss-right offset">
 +
                <h2>2016</h2>
 +
              </div>
 +
            </div>
  
                <p><img src="https://static.igem.org/mediawiki/2016/1/13/T--NUS_Singapore--log3_1.png" style="width: 100%;"></p>
+
            <div class="ss-row ss-large">
                <p><img src="https://static.igem.org/mediawiki/2016/2/25/T--NUS_Singapore--log3_0.png" style="width: 100%;"></p>
+
              <div class="ss-left">
        </div>
+
                <div class="log-content ss-circle-deco" style="margin-top: 20px;">
    </div>
+
                <span><p>Construct 2: </p><p><img src="https://static.igem.org/mediawiki/2016/6/61/T--NUS_Singapore--log3_9.png" style="width: 100%;"></p></span>
    <div class="ss-right">
+
        <h3>
+
        <span>1 June, 2016</span>
+
            <a href="http://tympanus.net/Tutorials/TypographyEffects/">Milestone 1 : Overall cloning design</a>
+
        </h3>
+
    </div>
+
    </div>
+
  
<div class="ss-row ss-large">
+
                <p><img src="https://static.igem.org/mediawiki/2016/2/22/T--NUS_Singapore--log3_3.png" style="width: 100%;"></p>
  <div class="ss-left">
+
                <p>
    <h3>
+
                  <span style="font-size: larger;">Fig 2. A.</span> LuxI gene is cloned from iGEM2016 distribution kit with primers GEM008 and GEM011. The observed band size of LuxI with overhangs is close to the expected band size of 629 bp. <span style="font-size: larger;">B.</span>Terminator BBa_B0015 is amplified using GEM009 and 012 and stitiched with LuxI. <span style="font-size: larger;">C.</span> Promoter-RBS fragment is synthesized and stitiched to LuxI-terminator by PCR reaction. The observed band size for full LuxI construct is close to the expected band size of 936 bp.
      <span>12 June, 2016</span>
+
      <a>Milestone 2: Construction of pConst-LuxR-HA</a>
+
    </h3>
+
  </div>
+
  <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
+
    <div class="log-content ss-circle-deco">
+
    <span><p>Construct 1: </p><p><img src="https://static.igem.org/mediawiki/2016/9/9f/T--NUS_Singapore--log3_8.png" style="width: 100%;"></p></span>
+
  
                <p><img src="https://static.igem.org/mediawiki/2016/e/e7/T--NUS_Singapore--log3_2.png" style="width: 100%;"></p>
+
                </p>
                 <p>
+
              </div>
                <span style="font-size: larger;">Fig 1. A.</span> LuxR gene amplified from iGEM distribution 2016 with designed primers GEM002 and GEM005. The expected band size of LuxR with overhang is 795 bp.  <span style="font-size: larger;">B.</span>LuxR stitiched with terminater (BBa_B0015) with overlapping PCR. <span style="font-size: larger;">C.</span> Constructed full-length RBS-pConstitutive-LuxR-HA-Terminator with expected size of 1034 bp.
+
            </div>
 +
            <div class="ss-right">
 +
              <h3>
 +
                 <span>4 July, 2016</span>
 +
                <a>Milestone 3: : Construction of pLuxR-LuxI-HA </a>
 +
              </h3>
 +
            </div>
 +
          </div>
  
            </p>
+
          <div class="ss-row ss-large">
     
+
            <div class="ss-left">
    </div>
+
              <h3>
  </div>
+
                <span>11 July, 2016</span>
</div>
+
                <a>Milestone 4: Screening of pLuxR-invasin constructs </a>
 +
              </h3>
 +
            </div>
 +
            <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
 +
              <div class="log-content ss-circle-deco">
  
    <div class="ss-row">
+
                <p><img src="https://static.igem.org/mediawiki/2016/c/c6/T--NUS_Singapore--log3_16.png" style="width: 100%;"></p>
        <div class="ss-left">
+
              </div>
            <h2 id="july" class="offset">July</h2>
+
             </div>
        </div>
+
          </div>
        <div class="ss-right offset">
+
             <h2>2016</h2>
+
        </div>
+
    </div>
+
  
    <div class="ss-row ss-large">
+
          <div class="ss-row">
        <div class="ss-left">
+
            <div class="ss-left">
            <div class="log-content ss-circle-deco" style="margin-top: 20px;">
+
              <h2 id="august" class="offset">Aug</h2>
              <span><p>Construct 2: </p><p><img src="https://static.igem.org/mediawiki/2016/6/61/T--NUS_Singapore--log3_9.png" style="width: 100%;"></p></span>
+
            </div>
 +
            <div class="ss-right offset">
 +
              <h2>2016</h2>
 +
            </div>
 +
          </div>
  
                 <p><img src="https://static.igem.org/mediawiki/2016/2/22/T--NUS_Singapore--log3_3.png" style="width: 100%;"></p>
+
          <div class="ss-row ss-large">
                <p>
+
            <div class="ss-left">
                <span style="font-size: larger;">Fig 2. A.</span> LuxI gene is cloned from iGEM2016 distribution kit with primers GEM008 and GEM011. The observed band size of LuxI with overhangs is close to the expected band size of 629 bp. <span style="font-size: larger;">B.</span>Terminator BBa_B0015 is amplified using GEM009 and 012 and stitiched with LuxI. <span style="font-size: larger;">C.</span> Promoter-RBS fragment is synthesized and stitiched to LuxI-terminator by PCR reaction. The observed band size for full LuxI construct is close to the expected band size of 936 bp.
+
              <div class="log-content ss-circle-deco" style="margin-top: 20px;">
 +
                 <p><img src="https://static.igem.org/mediawiki/2016/0/08/T--NUS_Singapore--log3_17.png" style="width: 100%;"></p>
 +
              </div>
 +
            </div>
 +
            <div class="ss-right">
 +
              <h3>
 +
                <span>1 Aug, 2016</span>
 +
                <a>Milestone 5: Screening of pLuxR-LLO construct</a>
 +
              </h3>
 +
            </div>
 +
          </div>
  
            </p>
+
          <div class="ss-row ss-large">
        </div>
+
            <div class="ss-left">
    </div>
+
              <h3>
    <div class="ss-right">
+
                <span>8 Aug, 2016</span>
        <h3>
+
                <a>Milestone 6: Construction of pLuxR-GFP plasmid</a>
        <span>4 July, 2016</span>
+
              </h3>
            <a>Milestone 3: : Construction of pLuxR-LuxI-HA </a>
+
            </div>
        </h3>
+
            <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
    </div>
+
              <div class="log-content ss-circle-deco">
</div>
+
                <p><img src="https://static.igem.org/mediawiki/2016/2/2b/T--NUS_Singapore--log3_18.png" style="width: 100%;"></p>
  
<div class="ss-row ss-large">
+
              </div>
  <div class="ss-left">
+
            </div>
    <h3>
+
          </div>
      <span>11 July, 2016</span>
+
      <a>Milestone 4: Screening of pLuxR-invasin constructs </a>
+
    </h3>
+
  </div>
+
  <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
+
    <div class="log-content ss-circle-deco">
+
  
<p><img src="https://static.igem.org/mediawiki/2016/c/c6/T--NUS_Singapore--log3_16.png" style="width: 100%;"></p>
+
          <div class="ss-row ss-large">
    </div>
+
            <div class="ss-left">
  </div>
+
              <div class="log-content ss-circle-deco" style="margin-top: 20px;">
</div>
+
                <p><img src="https://static.igem.org/mediawiki/2016/a/a3/T--NUS_Singapore--log3_19.png" style="width: 100%;"></p>
 +
              </div>
 +
            </div>
 +
            <div class="ss-right">
 +
              <h3>
 +
                <span>1 Aug, 2016</span>
 +
                <a>Milestone 7: Testing the assembled pConst-LuxR-pLuxR-LuxI construct</a>
 +
              </h3>
 +
            </div>
 +
          </div>
  
<div class="ss-row">
+
          <div class="ss-row">
  <div class="ss-left">
+
            <div class="ss-left">
    <h2 id="august" class="offset">Aug</h2>
+
              <h2 id="september" class="offset">Sep</h2>
  </div>
+
            </div>
  <div class="ss-right offset">
+
            <div class="ss-right offset">
    <h2>2016</h2>
+
              <h2>2016</h2>
  </div>
+
            </div>
</div>
+
          </div>
  
<div class="ss-row ss-large">
+
          <div class="ss-row ss-large">
        <div class="ss-left">
+
            <div class="ss-left">
             <div class="log-content ss-circle-deco" style="margin-top: 20px;">
+
              <h3>
<p><img src="https://static.igem.org/mediawiki/2016/0/08/T--NUS_Singapore--log3_17.png" style="width: 100%;"></p>
+
                <span>19 Sep, 2016</span>
        </div>
+
                <a>Milestone 8: Testing the assembled pConst-LuxR-pLuxR-LLO construct</a>
    </div>
+
              </h3>
    <div class="ss-right">
+
            </div>
        <h3>
+
             <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
        <span>1 Aug, 2016</span>
+
              <div class="log-content ss-circle-deco">
            <a>Milestone 5: Screening of pLuxR-LLO construct</a>
+
                <p><img src="https://static.igem.org/mediawiki/2016/b/bf/T--NUS_Singapore--log3_20.png" style="width: 100%;"></p>
        </h3>
+
    </div>
+
</div>
+
  
<div class="ss-row ss-large">
+
              </div>
  <div class="ss-left">
+
            </div>
    <h3>
+
          </div>
      <span>8 Aug, 2016</span>
+
          <div class="ss-row">
      <a>Milestone 6: Construction of pLuxR-GFP plasmid</a>
+
            <div class="ss-left">
    </h3>
+
              <h2 id="october" class="offset">Oct</h2>
  </div>
+
            </div>
  <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
+
            <div class="ss-right offset">
    <div class="log-content ss-circle-deco">
+
              <h2>2016</h2>
<p><img src="https://static.igem.org/mediawiki/2016/2/2b/T--NUS_Singapore--log3_18.png" style="width: 100%;"></p>
+
            </div>
 +
          </div>
  
    </div>
+
          <div class="ss-row ss-large">
  </div>
+
            <div class="ss-left">
</div>
+
              <div class="log-content ss-circle-deco" style="margin-top: 20px;">
 +
                <p><img src="https://static.igem.org/mediawiki/2016/6/64/T--NUS_Singapore--log3_211.png" style="width: 100%;"></p>
 +
              </div>
 +
            </div>
 +
            <div class="ss-right">
 +
              <h3>
 +
                <span>10 Oct, 2016</span>
 +
                <a>Milestone 9: Testing the assembled pConst-LuxR-pLuxR-GFP construct</a>
 +
              </h3>
 +
            </div>
 +
          </div>
  
<div class="ss-row ss-large">
 
        <div class="ss-left">
 
            <div class="log-content ss-circle-deco" style="margin-top: 20px;">
 
<p><img src="https://static.igem.org/mediawiki/2016/a/a3/T--NUS_Singapore--log3_19.png" style="width: 100%;"></p>
 
        </div>
 
    </div>
 
    <div class="ss-right">
 
        <h3>
 
        <span>1 Aug, 2016</span>
 
            <a>Milestone 7: Testing the assembled pConst-LuxR-pLuxR-LuxI construct</a>
 
        </h3>
 
    </div>
 
</div>
 
  
<div class="ss-row">
 
    <div class="ss-left">
 
        <h2 id="september" class="offset">Sep</h2>
 
    </div>
 
    <div class="ss-right offset">
 
        <h2>2016</h2>
 
    </div>
 
</div>
 
  
<div class="ss-row ss-large">
 
  <div class="ss-left">
 
    <h3>
 
      <span>19 Sep, 2016</span>
 
      <a>Milestone 8: Testing the assembled pConst-LuxR-pLuxR-LLO construct</a>
 
    </h3>
 
  </div>
 
  <div class="ss-right ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
 
    <div class="log-content ss-circle-deco">
 
<p><img src="https://static.igem.org/mediawiki/2016/b/bf/T--NUS_Singapore--log3_20.png" style="width: 100%;"></p>
 
 
    </div>
 
  </div>
 
</div>
 
    <div class="ss-row">
 
        <div class="ss-left">
 
            <h2 id="october" class="offset">Oct</h2>
 
 
         </div>
 
         </div>
        <div class="ss-right offset">
+
      </div>
            <h2>2016</h2>
+
        </div>
+
    </div>
+
 
+
<div class="ss-row ss-large">
+
        <div class="ss-left">
+
            <div class="log-content ss-circle-deco" style="margin-top: 20px;">
+
<p><img src="https://static.igem.org/mediawiki/2016/6/64/T--NUS_Singapore--log3_211.png" style="width: 100%;"></p>
+
        </div>
+
    </div>
+
    <div class="ss-right">
+
        <h3>
+
        <span>10 Oct, 2016</span>
+
            <a>Milestone 9: Testing the assembled pConst-LuxR-pLuxR-GFP construct</a>
+
        </h3>
+
    </div>
+
</div>
+
 
+
 
+
 
+
 
     </div>
 
     </div>
</div>
 
</div>
 
  
  
Line 329: Line 330:
  
  
<section class="content content--related">
+
    <section class="content content--related">
    <ul class="copyright">
+
      <ul class="copyright">
 
         <li>&copy; NUS_Singapore iGEM 2016</li>
 
         <li>&copy; NUS_Singapore iGEM 2016</li>
    </ul>
+
      </ul>
</section>
+
    </section>
<a href="#" class="go-top">Go To Top</a>
+
    <a href="#" class="go-top">Go To Top</a>
</div><!-- /st-pusher -->
+
  </div><!-- /st-pusher -->
 
</div><!-- /st-container -->
 
</div><!-- /st-container -->
 
</main>
 
</main>
 
<script>
 
<script>
    $(function() {
+
  $(function() {
  
        var $sidescroll = (function() {
+
    var $sidescroll = (function() {
  
 
                     // the row elements
 
                     // the row elements
Line 376: Line 377:
 
                         // if perspective add css
 
                         // if perspective add css
 
                         if( perspective ) {
 
                         if( perspective ) {
                            $rows.css({
+
                          $rows.css({
                                '-webkit-perspective'          : 600,
+
                            '-webkit-perspective'          : 600,
                                '-webkit-perspective-origin'    : '50% 0%'
+
                            '-webkit-perspective-origin'    : '50% 0%'
                            });
+
                          });
 
                         }
 
                         }
 
                         // show the pointers for the inviewport rows
 
                         // show the pointers for the inviewport rows
Line 386: Line 387:
 
                         placeRows();
 
                         placeRows();
 
                          
 
                          
                    },
+
                      },
 
                     // defines a selector that gathers the row elems that are initially visible.
 
                     // defines a selector that gathers the row elems that are initially visible.
 
                     // the element is visible if its top is less than the window's height.
 
                     // the element is visible if its top is less than the window's height.
Line 392: Line 393:
 
                     defineViewport  = function() {
 
                     defineViewport  = function() {
  
                        $.extend( $.expr[':'], {
+
                      $.extend( $.expr[':'], {
  
                            inviewport  : function ( el ) {
+
                        inviewport  : function ( el ) {
                                if ( $(el).offset().top < winSize.height ) {
+
                          if ( $(el).offset().top < winSize.height ) {
                                    return true;
+
                            return true;
                                }
+
                          }
                                return false;
+
                          return false;
                            }
+
                        }
  
                        });
+
                      });
  
 
                     },
 
                     },
Line 407: Line 408:
 
                     setViewportRows = function() {
 
                     setViewportRows = function() {
  
                        $rowsViewport      = $rows.filter(':inviewport');
+
                      $rowsViewport      = $rows.filter(':inviewport');
                        $rowsOutViewport    = $rows.not( $rowsViewport )
+
                      $rowsOutViewport    = $rows.not( $rowsViewport )
                       
+
                     
 
                     },
 
                     },
 
                     // get window sizes
 
                     // get window sizes
 
                     getWinSize      = function() {
 
                     getWinSize      = function() {
  
                        winSize.width  = $win.width();
+
                      winSize.width  = $win.width();
                        winSize.height  = $win.height();
+
                      winSize.height  = $win.height();
  
 
                     },
 
                     },
Line 427: Line 428:
 
                             // scroll to the element that has id = menu's href
 
                             // scroll to the element that has id = menu's href
 
                             $('html, body').stop().animate({
 
                             $('html, body').stop().animate({
                                scrollTop: $( $(this).attr('href') ).offset().top
+
                              scrollTop: $( $(this).attr('href') ).offset().top
 
                             }, scollPageSpeed, scollPageEasing );
 
                             }, scollPageSpeed, scollPageEasing );
 
                              
 
                              
 
                             return false;
 
                             return false;
  
                        });
+
                          });
 
                          
 
                          
 
                         $(window).on({
 
                         $(window).on({
Line 447: Line 448:
 
                                 $rowsViewport.each( function() {
 
                                 $rowsViewport.each( function() {
  
                                    $(this).find('div.ss-left')
+
                                  $(this).find('div.ss-left')
                                    .css({ left  : '0%' })
+
                                  .css({ left  : '0%' })
                                    .end()
+
                                  .end()
                                    .find('div.ss-right')
+
                                  .find('div.ss-right')
                                    .css({ right  : '0%' })
+
                                  .css({ right  : '0%' })
                                    .end()
+
                                  .end()
                                    .find('a.ss-circle')
+
                                  .find('a.ss-circle')
                                    .addClass('ss-circle-deco');
+
                                  .addClass('ss-circle-deco');
  
 
                                 });
 
                                 });
  
                            },
+
                              },
 
                             // when scrolling the page change the position of each row   
 
                             // when scrolling the page change the position of each row   
 
                             'scroll.Scrolling' : function( event ) {
 
                             'scroll.Scrolling' : function( event ) {
Line 468: Line 469:
 
                                 setTimeout( function() {
 
                                 setTimeout( function() {
  
                                    placeRows();
+
                                  placeRows();
                                    anim = false;
+
                                  anim = false;
                                   
+
                                 
 
                                 }, 10 );
 
                                 }, 10 );
  
                            }
+
                              }
                        });
+
                            });
  
                    },
+
                      },
 
                     // sets the position of the rows (left and right row elements).
 
                     // sets the position of the rows (left and right row elements).
 
                     // Both of these elements will start with -50% for the left/right (not visible)
 
                     // Both of these elements will start with -50% for the left/right (not visible)
Line 491: Line 492:
 
                         $rowsOutViewport.each( function(i) {
 
                         $rowsOutViewport.each( function(i) {
  
                            var $row    = $(this),
+
                          var $row    = $(this),
 
                                 // the left side element
 
                                 // the left side element
 
                                 $rowL  = $row.find('div.ss-left'),
 
                                 $rowL  = $row.find('div.ss-left'),
Line 502: Line 503:
 
                             if( rowT > winSize.height + winscroll ) {
 
                             if( rowT > winSize.height + winscroll ) {
  
                                if( perspective ) {
+
                              if( perspective ) {
  
                                    $rowL.css({
+
                                $rowL.css({
                                        '-webkit-transform' : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)',
+
                                  '-webkit-transform' : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)',
                                        'opacity'          : 0
+
                                  'opacity'          : 0
                                    });
+
                                });
                                    $rowR.css({
+
                                $rowR.css({
                                        '-webkit-transform' : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)',
+
                                  '-webkit-transform' : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)',
                                        'opacity'          : 0
+
                                  'opacity'          : 0
                                    });
+
                                });
  
                                }
+
                              }
                                else {
+
                              else {
  
                                    $rowL.css({ left        : '-50%' });
+
                                $rowL.css({ left        : '-50%' });
                                    $rowR.css({ right      : '-50%' });
+
                                $rowR.css({ right      : '-50%' });
  
                                }
+
                              }
                               
+
                             
 
                             }
 
                             }
 
                             // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen.
 
                             // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen.
Line 538: Line 539:
 
                                     if( !$row.data('pointer') ) {
 
                                     if( !$row.data('pointer') ) {
  
                                        $row.data( 'pointer', true );
+
                                      $row.data( 'pointer', true );
                                        $row.find('.ss-circle').addClass('ss-circle-deco');
+
                                      $row.find('.ss-circle').addClass('ss-circle-deco');
  
 
                                     }
 
                                     }
  
                                }
+
                                  }
                                else {
+
                                  else {
  
 
                                     // the pointer should not be shown
 
                                     // the pointer should not be shown
 
                                     if( $row.data('pointer') ) {
 
                                     if( $row.data('pointer') ) {
  
                                        $row.data( 'pointer', false );
+
                                      $row.data( 'pointer', false );
                                        $row.find('.ss-circle').removeClass('ss-circle-deco');
+
                                      $row.find('.ss-circle').removeClass('ss-circle-deco');
  
 
                                     }
 
                                     }
 
                                      
 
                                      
                                }
+
                                  }
                               
+
                                 
 
                                 // set calculated values
 
                                 // set calculated values
 
                                 if( perspective ) {
 
                                 if( perspective ) {
  
                                    var t      = Math.max( factor * 75, 0 ),
+
                                  var t      = Math.max( factor * 75, 0 ),
                                    r      = Math.max( factor * 90, 0 ),
+
                                  r      = Math.max( factor * 90, 0 ),
                                    o      = Math.min( Math.abs( factor - 1 ), 1 );
+
                                  o      = Math.min( Math.abs( factor - 1 ), 1 );
                                   
+
                                 
                                    $rowL.css({
+
                                  $rowL.css({
                                        '-webkit-transform' : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)',
+
                                    '-webkit-transform' : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)',
                                        'opacity'          : o
+
                                    'opacity'          : o
                                    });
+
                                  });
                                    $rowR.css({
+
                                  $rowR.css({
                                        '-webkit-transform' : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)',
+
                                    '-webkit-transform' : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)',
                                        'opacity'          : o
+
                                    'opacity'          : o
                                    });
+
                                  });
  
 
                                 }
 
                                 }
 
                                 else {
 
                                 else {
  
                                    $rowL.css({ left    : - val + '%' });
+
                                  $rowL.css({ left    : - val + '%' });
                                    $rowR.css({ right  : - val + '%' });
+
                                  $rowR.css({ right  : - val + '%' });
                                   
+
                                 
 
                                 }
 
                                 }
 
                                  
 
                                  
                            }   
+
                              }   
  
                        });
+
                            });
  
 
};
 
};

Revision as of 15:15, 19 October 2016

<!DOCTYPE html> Interactive Points | Codrops

Wet Lab Notebook: RIOT RESPONDER

Jun

2016

Overall Strategies

Construct 1:

Fig 1. A. LuxR gene amplified from iGEM distribution 2016 with designed primers GEM002 and GEM005. The expected band size of LuxR with overhang is 795 bp. B.LuxR stitiched with terminater (BBa_B0015) with overlapping PCR. C. Constructed full-length RBS-pConstitutive-LuxR-HA-Terminator with expected size of 1034 bp.

July

2016

Construct 2:

Fig 2. A. LuxI gene is cloned from iGEM2016 distribution kit with primers GEM008 and GEM011. The observed band size of LuxI with overhangs is close to the expected band size of 629 bp. B.Terminator BBa_B0015 is amplified using GEM009 and 012 and stitiched with LuxI. C. Promoter-RBS fragment is synthesized and stitiched to LuxI-terminator by PCR reaction. The observed band size for full LuxI construct is close to the expected band size of 936 bp.

Aug

2016

Sep

2016

Oct

2016

Go To Top