Difference between revisions of "Team:Hong Kong UCCKE"

 
(25 intermediate revisions by the same user not shown)
Line 1: Line 1:
 
{{Hong_Kong_UCCKE/CSS/reset.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.css}} {{Hong_Kong_UCCKE/CSS/style.css}} {{Hong_Kong_UCCKE/CSS/latofonts.css}} {{Hong_Kong_UCCKE/CSS/font-awesome.css}} {{Hong_Kong_UCCKE/CSS/jcarousel.responsive.css}}
 
{{Hong_Kong_UCCKE/CSS/reset.css}} {{Hong_Kong_UCCKE/CSS/bootstrap.css}} {{Hong_Kong_UCCKE/CSS/style.css}} {{Hong_Kong_UCCKE/CSS/latofonts.css}} {{Hong_Kong_UCCKE/CSS/font-awesome.css}} {{Hong_Kong_UCCKE/CSS/jcarousel.responsive.css}}
 
<html>
 
<html>
 +
 
<meta name="theme-color" content="#5379d0">
 
<meta name="theme-color" content="#5379d0">
 
<style>
 
<style>
−
.wholehead {background-color: #5379d0 !important;}
+
。wholehead {background-color: #5379d0 !important;}
 
.mainfooter {background-color: #5379d0 !important;}
 
.mainfooter {background-color: #5379d0 !important;}
 
@-webkit-keyframes colours {
 
@-webkit-keyframes colours {
Line 126: Line 127:
 
                 <div>
 
                 <div>
 
                     <h1 id="98uy5454g43">UCCKE Bio Research Team</h1>
 
                     <h1 id="98uy5454g43">UCCKE Bio Research Team</h1>
−
                     <p style="text-align:left;">offendit malis arbitror appellat o arbitror nisi nam quamquam illustriora do se appellat praetermissum.</p>
+
                     <p style="text-align:left;">Welcome to our wiki! You can learn how to navigate around our wiki by clicking <a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Tour" style="color:#fff; border-bottom:1px dotter #fff;">here</a></p>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 162: Line 163:
 
             <div class="videocol col-md-12">
 
             <div class="videocol col-md-12">
 
                 <div class="videowrapper">
 
                 <div class="videowrapper">
−
                     <iframe src="https://www.youtube.com/embed/Vvrn4imd5v0" frameborder="0" allowfullscreen></iframe>
+
                     <iframe src="https://static.igem.org/mediawiki/2016/0/0c/T--Hong_Kong_UCCKE--brief.mp4" frameborder="0" allowfullscreen></iframe>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 168: Line 169:
 
                 <h2>Nematode Biochemical marshal: attractant and repellent</h2>
 
                 <h2>Nematode Biochemical marshal: attractant and repellent</h2>
 
                 <p style="text-align:left;">Inspired by the ability of horsehair worm modifying the behavior of other organisms, we would like to employ the idea to modify organisms behavior by what available in our laboratory. Nematode is a pest, which will attack the roots of crops. We wish to modify its behavior by engineering bacteria to produce biochemical cues to attract or repel the worm. We identified two potential biochemicals, cinnamaldehyde and phenylpyruvic acid, which are possibly attractant or repellent to the Nematode. We have designed a chemosensation assay to demonstrate the attraction and repulsion ability of the biochemical of interest. The results suggest that cinnamaldehyde is a strong repellent and phenylpyruvic acid is a moderate attractant to the worm. Genetic engineering of bacteria to produce the two biochemicals are working in progress.</p>
 
                 <p style="text-align:left;">Inspired by the ability of horsehair worm modifying the behavior of other organisms, we would like to employ the idea to modify organisms behavior by what available in our laboratory. Nematode is a pest, which will attack the roots of crops. We wish to modify its behavior by engineering bacteria to produce biochemical cues to attract or repel the worm. We identified two potential biochemicals, cinnamaldehyde and phenylpyruvic acid, which are possibly attractant or repellent to the Nematode. We have designed a chemosensation assay to demonstrate the attraction and repulsion ability of the biochemical of interest. The results suggest that cinnamaldehyde is a strong repellent and phenylpyruvic acid is a moderate attractant to the worm. Genetic engineering of bacteria to produce the two biochemicals are working in progress.</p>
−
                 <a href="#" class="proabs-btn">Read More</a></div>
+
                 <a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Description" class="proabs-btn">Read More</a></div>
 
         </div>
 
         </div>
 
     </div>
 
     </div>
Line 179: Line 180:
 
         color: #5379d0;
 
         color: #5379d0;
 
     }
 
     }
 +
    .golinks .col-xs-6 {
 +
        height:300px;
 +
    }
 +
@media screen and (max-width: 475px) {
 +
    .golinks .col-xs-6 {
 +
        height:340px;
 +
    }
 +
}
 
</style>
 
</style>
 
<div class="golinks" id="golinks">
 
<div class="golinks" id="golinks">
Line 184: Line 193:
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
−
                 <div class="golinksbox"><i class="golinksicon fa fa-map-signs" aria-hidden="true"></i>
+
                 <div class="golinksbox"><i class="golinksicon fa fa-map-signs" aria-hidden="true" style="color: #7453d0 !important"></i>
 
                     <h4>Tour</h4>
 
                     <h4>Tour</h4>
−
                     <p style="text-align:left;">Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">This tour aims to tell you how to navigate around our wiki. Please click on the button below and start the tour.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Tour" class="proabs-btn tourbbun">Read More</a></div>
 +
<style>
 +
.tourbbun {
 +
border: 1px solid #7453d0 !important;
 +
color: #7453d0 !important;
 +
}
 +
.tourbbun:hover {
 +
border: 1px solid #7453d0 !important;
 +
background-color: #7453d0 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
             <div class="col-xs-6 col-sm-4 col-md-4">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
−
                 <div class="golinksbox"><i class="golinksicon fa fa-users" aria-hidden="true"></i>
+
                 <div class="golinksbox"><i class="golinksicon fa fa-users" aria-hidden="true" style="color: #d05353 !important"></i>
 
                     <h4>Our team</h4>
 
                     <h4>Our team</h4>
−
                     <p style="text-align:left;">Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">In this page, you will learn about our school, members of our team and our instructors.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Team" class="proabs-btn teambun">Read More</a></div>
 +
<style>
 +
.teambun {
 +
border: 1px solid #d05353 !important;
 +
color: #d05353 !important;
 +
}
 +
.teambun:hover {
 +
border: 1px solid #d05353 !important;
 +
background-color: #d05353 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
             <div class="col-xs-6 col-sm-4 col-md-4">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
−
                 <div class="golinksbox"><i class="golinksicon fa fa-pencil" aria-hidden="true"></i>
+
                 <div class="golinksbox"><i class="golinksicon fa fa-pencil" aria-hidden="true" style="color: #d0b153 !important"></i>
 
                     <h4>Our Project</h4>
 
                     <h4>Our Project</h4>
−
                     <p style="text-align:left;">Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">In this page, you can get an overall image about our project.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Description" class="proabs-btn prooobtn">Read More</a></div>
−
                </div>
+
<style>
−
            </div>
+
.prooobtn {
−
            <div class="col-xs-6 col-sm-4 col-md-4">
+
border: 1px solid #d0b153 !important;
−
                <div class="golinksbox"><i class="golinksicon fa fa-book" aria-hidden="true"></i>
+
color: #d0b153 !important;
−
                    <h4>Notebook</h4>
+
}
−
                    <p style="text-align:left;">Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
.prooobtn:hover {
−
                    <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
border: 1px solid #d0b153 !important;
 +
background-color: #d0b153 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 214: Line 249:
 
                 <div class="golinksbox"><i class="golinksicon fa fa-list" aria-hidden="true"></i>
 
                 <div class="golinksbox"><i class="golinksicon fa fa-list" aria-hidden="true"></i>
 
                     <h4>Parts</h4>
 
                     <h4>Parts</h4>
−
                     <p style="text-align:left;">Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">In this page, you can know about details of parts that we submitted.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Parts" class="proabs-btn parrtbtn">Read More</a></div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
             <div class="col-xs-6 col-sm-4 col-md-4">
 
             <div class="col-xs-6 col-sm-4 col-md-4">
−
                 <div class="golinksbox"><i class="golinksicon fa fa-heartbeat" aria-hidden="true"></i>
+
                 <div class="golinksbox"><i class="golinksicon fa fa-heartbeat" aria-hidden="true" style="color: #91d053 !important"></i>
 
                     <h4>Safety</h4>
 
                     <h4>Safety</h4>
−
                     <p style="text-align:left;">Eram singulis expetendis te do aute distinguantur. In enim o legam, o hic nulla summis qui senserit.</p>
+
                     <p style="text-align:left;">In this page, you will learn about what have we done to ensure safety.</p>
−
                     <div class="golinksbtnbox"><a href="#" class="proabs-btn">Read More</a></div>
+
                     <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Safety" class="proabs-btn saffbtn">Read More</a></div>
 +
<style>
 +
.saffbtn {
 +
border: 1px solid #91d053 !important;
 +
color: #d0b153 !important;
 +
}
 +
.saffbtn:hover {
 +
border: 1px solid #91d053 !important;
 +
background-color: #91d053 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 +
                </div>
 +
            </div>
 +
            <div class="col-xs-6 col-sm-4 col-md-4">
 +
                <div class="golinksbox"><i class="golinksicon fa fa-info" aria-hidden="true" style="color: #53d091 !important"></i>
 +
                    <h4>Attributions</h4>
 +
                    <p style="text-align:left;">In this page, you can know about our work division and who did we get help from.</p>
 +
                    <div class="golinksbtnbox"><a href="https://2016.igem.org/Team:Hong_Kong_UCCKE/Attributions" class="proabs-btn strbtn">Read More</a></div>
 +
<style>
 +
.strbtn {
 +
border: 1px solid #53d091 !important;
 +
color: #53d091 !important;
 +
}
 +
.strbtn:hover {
 +
border: 1px solid #53d091 !important;
 +
background-color: #53d091 !important;
 +
color: #fff !important;
 +
}
 +
</style>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
Line 236: Line 300:
  
  
 +
<style>
 +
.thanks3498 {
 +
width:100%;
 +
}
 +
</style>
 +
                <div class="row">
 +
<div class="col-xs-4">
 +
<img class="thanks3498" src="https://static.igem.org/mediawiki/2016/1/1f/T--Hong_Kong_UCCKE--thank2comp.png">
 +
</div>
 +
<div class="col-xs-4">
 +
<img class="thanks3498" src="https://static.igem.org/mediawiki/2016/0/0a/T--Hong_Kong_UCCKE--thank1comp.png">
 +
</div>
 +
<div class="col-xs-4">
 +
<img class="thanks3498" src="https://static.igem.org/mediawiki/2016/e/e9/T--Hong_Kong_UCCKE--thank3comp.png">
 +
</div>
 +
</div>
  
−
                <div class="jcarousel-wrapper">
 
−
                    <div class="jcarousel">
 
−
                        <ul>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 1"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 2"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 3"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 4"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 5"></li>
 
−
                            <li><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg" alt="Image 6"></li>
 
−
                        </ul>
 
−
                    </div>
 
  
−
                    <a href="#" class="jcarousel-control-prev">&lsaquo;</a>
 
−
                    <a href="#" class="jcarousel-control-next">&rsaquo;</a>
 
−
 
−
                    <p class="jcarousel-pagination"></p>
 
 
                 </div>
 
                 </div>
  
Line 262: Line 327:
 
</html>
 
</html>
 
{{Hong_Kong_UCCKE/heyfooter}} {{Hong_Kong_UCCKE/illbeback}}
 
{{Hong_Kong_UCCKE/heyfooter}} {{Hong_Kong_UCCKE/illbeback}}
−
<html>
 
−
 
−
<script src="https://2016.igem.org/Template:Hong_Kong_UCCKE/introjs?action=raw&amp;ctype=text/javascript" type="text/javascript "></script>
 
−
<script src="https://2016.igem.org/Template:Hong_Kong_UCCKE/JS/bootstrap?action=raw&amp;ctype=text/javascript"></script>
 
−
 
−
<style>
 
−
.introjs-overlay {
 
−
  position: absolute;
 
−
  z-index: 999999;
 
−
  background-color: #000;
 
−
  opacity: 0;
 
−
  background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
 
−
  background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9)));
 
−
  background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
 
−
  background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
 
−
  background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
 
−
  background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%);
 
−
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1);
 
−
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 
−
  filter: alpha(opacity=50);
 
−
  -webkit-transition: all 0.3s ease-out;
 
−
    -moz-transition: all 0.3s ease-out;
 
−
      -ms-transition: all 0.3s ease-out;
 
−
      -o-transition: all 0.3s ease-out;
 
−
          transition: all 0.3s ease-out;
 
−
}
 
−
 
−
.introjs-fixParent {
 
−
  z-index: auto !important;
 
−
  opacity: 1.0 !important;
 
−
  position: absolute !important;
 
−
  -webkit-transform: none !important;
 
−
    -moz-transform: none !important;
 
−
      -ms-transform: none !important;
 
−
      -o-transform: none !important;
 
−
          transform: none !important;
 
−
}
 
−
 
−
.introjs-showElement,
 
−
tr.introjs-showElement > td,
 
−
tr.introjs-showElement > th {
 
−
  z-index: 9999999 !important;
 
−
}
 
−
 
−
.introjs-disableInteraction {
 
−
  z-index: 99999999 !important;
 
−
  position: absolute;
 
−
}
 
−
 
−
.introjs-relativePosition,
 
−
tr.introjs-showElement > td,
 
−
tr.introjs-showElement > th {
 
−
  position: relative;
 
−
}
 
−
 
−
.introjs-helperLayer {
 
−
  position: absolute;
 
−
  z-index: 9999998;
 
−
  background-color: #FFF;
 
−
  background-color: rgba(255,255,255,.9);
 
−
  border: 1px solid #777;
 
−
  border: 1px solid rgba(0,0,0,.5);
 
−
  border-radius: 4px;
 
−
  box-shadow: 0 2px 15px rgba(0,0,0,.4);
 
−
  -webkit-transition: all 0.3s ease-out;
 
−
    -moz-transition: all 0.3s ease-out;
 
−
      -ms-transition: all 0.3s ease-out;
 
−
      -o-transition: all 0.3s ease-out;
 
−
          transition: all 0.3s ease-out;
 
−
}
 
−
 
−
.introjs-tooltipReferenceLayer {
 
−
  position: absolute;
 
−
  visibility: hidden;
 
−
  z-index: 10000000;
 
−
  background-color: transparent;
 
−
  -webkit-transition: all 0.3s ease-out;
 
−
    -moz-transition: all 0.3s ease-out;
 
−
      -ms-transition: all 0.3s ease-out;
 
−
      -o-transition: all 0.3s ease-out;
 
−
          transition: all 0.3s ease-out;
 
−
}
 
−
 
−
.introjs-helperLayer *,
 
−
.introjs-helperLayer *:before,
 
−
.introjs-helperLayer *:after {
 
−
  -webkit-box-sizing: content-box;
 
−
    -moz-box-sizing: content-box;
 
−
      -ms-box-sizing: content-box;
 
−
      -o-box-sizing: content-box;
 
−
          box-sizing: content-box;
 
−
}
 
−
 
−
.introjs-helperNumberLayer {
 
−
  position: absolute;
 
−
  visibility: visible;
 
−
  top: -16px;
 
−
  left: -16px;
 
−
  z-index: 9999999999 !important;
 
−
  padding: 2px;
 
−
  font-family: Arial, verdana, tahoma;
 
−
  font-size: 13px;
 
−
  font-weight: bold;
 
−
  color: white;
 
−
  text-align: center;
 
−
  text-shadow: 1px 1px 1px rgba(0,0,0,.3);
 
−
  background: #ff3019; /* Old browsers */
 
−
  background: -webkit-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Chrome10+,Safari5.1+ */
 
−
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff3019), color-stop(100%, #cf0404)); /* Chrome,Safari4+ */
 
−
  background:    -moz-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* FF3.6+ */
 
−
  background:    -ms-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* IE10+ */
 
−
  background:      -o-linear-gradient(top, #ff3019 0%, #cf0404 100%); /* Opera 11.10+ */
 
−
  background:        linear-gradient(to bottom, #ff3019 0%, #cf0404 100%);  /* W3C */
 
−
  width: 27px;
 
−
  height:27px;
 
−
  line-height: 20px;
 
−
  border: 3px solid white;
 
−
  border-radius: 50%;
 
−
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3019', endColorstr='#cf0404', GradientType=0); /* IE6-9 */
 
−
  filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */
 
−
  box-shadow: 0 2px 5px rgba(0,0,0,.4);
 
−
}
 
−
 
−
.introjs-arrow {
 
−
  border: 5px solid white;
 
−
  content:'';
 
−
  position: absolute;
 
−
}
 
−
.introjs-arrow.top {
 
−
  top: -10px;
 
−
  border-top-color:transparent;
 
−
  border-right-color:transparent;
 
−
  border-bottom-color:white;
 
−
  border-left-color:transparent;
 
−
}
 
−
.introjs-arrow.top-right {
 
−
  top: -10px;
 
−
  right: 10px;
 
−
  border-top-color:transparent;
 
−
  border-right-color:transparent;
 
−
  border-bottom-color:white;
 
−
  border-left-color:transparent;
 
−
}
 
−
.introjs-arrow.top-middle {
 
−
  top: -10px;
 
−
  left: 50%;
 
−
  margin-left: -5px;
 
−
  border-top-color:transparent;
 
−
  border-right-color:transparent;
 
−
  border-bottom-color:white;
 
−
  border-left-color:transparent;
 
−
}
 
−
.introjs-arrow.right {
 
−
  right: -10px;
 
−
  top: 10px;
 
−
  border-top-color:transparent;
 
−
  border-right-color:transparent;
 
−
  border-bottom-color:transparent;
 
−
  border-left-color:white;
 
−
}
 
−
.introjs-arrow.right-bottom {
 
−
  bottom:10px;
 
−
  right: -10px;
 
−
  border-top-color:transparent;
 
−
  border-right-color:transparent;
 
−
  border-bottom-color:transparent;
 
−
  border-left-color:white;
 
−
}
 
−
.introjs-arrow.bottom {
 
−
  bottom: -10px;
 
−
  border-top-color:white;
 
−
  border-right-color:transparent;
 
−
  border-bottom-color:transparent;
 
−
  border-left-color:transparent;
 
−
}
 
−
.introjs-arrow.left {
 
−
  left: -10px;
 
−
  top: 10px;
 
−
  border-top-color:transparent;
 
−
  border-right-color:white;
 
−
  border-bottom-color:transparent;
 
−
  border-left-color:transparent;
 
−
}
 
−
.introjs-arrow.left-bottom {
 
−
  left: -10px;
 
−
  bottom:10px;
 
−
  border-top-color:transparent;
 
−
  border-right-color:white;
 
−
  border-bottom-color:transparent;
 
−
  border-left-color:transparent;
 
−
}
 
−
 
−
.introjs-tooltip {
 
−
  position: absolute;
 
−
  visibility: visible;
 
−
  padding: 10px;
 
−
  background-color: white;
 
−
  min-width: 200px;
 
−
  max-width: 300px;
 
−
  border-radius: 3px;
 
−
  box-shadow: 0 1px 10px rgba(0,0,0,.4);
 
−
  -webkit-transition: opacity 0.1s ease-out;
 
−
    -moz-transition: opacity 0.1s ease-out;
 
−
      -ms-transition: opacity 0.1s ease-out;
 
−
      -o-transition: opacity 0.1s ease-out;
 
−
          transition: opacity 0.1s ease-out;
 
−
}
 
−
 
−
.introjs-tooltipbuttons {
 
−
  text-align: right;
 
−
  white-space: nowrap;
 
−
}
 
−
 
−
/*
 
−
Buttons style by http://nicolasgallagher.com/lab/css3-github-buttons/
 
−
Changed by Afshin Mehrabani
 
−
*/
 
−
.introjs-button {
 
−
  position: relative;
 
−
  overflow: visible;
 
−
  display: inline-block;
 
−
  padding: 0.3em 0.8em;
 
−
  border: 1px solid #d4d4d4;
 
−
  margin: 0;
 
−
  text-decoration: none;
 
−
  text-shadow: 1px 1px 0 #fff;
 
−
  font: 11px/normal sans-serif;
 
−
  color: #333;
 
−
  white-space: nowrap;
 
−
  cursor: pointer;
 
−
  outline: none;
 
−
  background-color: #ececec;
 
−
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
 
−
  background-image: -moz-linear-gradient(#f4f4f4, #ececec);
 
−
  background-image: -o-linear-gradient(#f4f4f4, #ececec);
 
−
  background-image: linear-gradient(#f4f4f4, #ececec);
 
−
  -webkit-background-clip: padding;
 
−
  -moz-background-clip: padding;
 
−
  -o-background-clip: padding-box;
 
−
  /*background-clip: padding-box;*/ /* commented out due to Opera 11.10 bug */
 
−
  -webkit-border-radius: 0.2em;
 
−
  -moz-border-radius: 0.2em;
 
−
  border-radius: 0.2em;
 
−
  /* IE hacks */
 
−
  zoom: 1;
 
−
  *display: inline;
 
−
  margin-top: 10px;
 
−
}
 
−
 
−
.introjs-button:hover {
 
−
  border-color: #bcbcbc;
 
−
  text-decoration: none;
 
−
  box-shadow: 0px 1px 1px #e3e3e3;
 
−
}
 
−
 
−
.introjs-button:focus,
 
−
.introjs-button:active {
 
−
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ececec), to(#f4f4f4));
 
−
  background-image: -moz-linear-gradient(#ececec, #f4f4f4);
 
−
  background-image: -o-linear-gradient(#ececec, #f4f4f4);
 
−
  background-image: linear-gradient(#ececec, #f4f4f4);
 
−
}
 
−
 
−
/* overrides extra padding on button elements in Firefox */
 
−
.introjs-button::-moz-focus-inner {
 
−
  padding: 0;
 
−
  border: 0;
 
−
}
 
−
 
−
.introjs-skipbutton {
 
−
  margin-right: 5px;
 
−
  color: #7a7a7a;
 
−
}
 
−
 
−
.introjs-prevbutton {
 
−
  -webkit-border-radius: 0.2em 0 0 0.2em;
 
−
  -moz-border-radius: 0.2em 0 0 0.2em;
 
−
  border-radius: 0.2em 0 0 0.2em;
 
−
  border-right: none;
 
−
}
 
−
 
−
.introjs-nextbutton {
 
−
  -webkit-border-radius: 0 0.2em 0.2em 0;
 
−
  -moz-border-radius: 0 0.2em 0.2em 0;
 
−
  border-radius: 0 0.2em 0.2em 0;
 
−
}
 
−
 
−
.introjs-disabled, .introjs-disabled:hover, .introjs-disabled:focus {
 
−
  color: #9a9a9a;
 
−
  border-color: #d4d4d4;
 
−
  box-shadow: none;
 
−
  cursor: default;
 
−
  background-color: #f4f4f4;
 
−
  background-image: none;
 
−
  text-decoration: none;
 
−
}
 
−
 
−
.introjs-bullets {
 
−
  text-align: center;
 
−
}
 
−
.introjs-bullets ul {
 
−
  clear: both;
 
−
  margin: 15px auto 0;
 
−
  padding: 0;
 
−
  display: inline-block;
 
−
}
 
−
.introjs-bullets ul li {
 
−
  list-style: none;
 
−
  float: left;
 
−
  margin: 0 2px;
 
−
}
 
−
.introjs-bullets ul li a {
 
−
  display: block;
 
−
  width: 6px;
 
−
  height: 6px;
 
−
  background: #ccc;
 
−
  border-radius: 10px;
 
−
  -moz-border-radius: 10px;
 
−
  -webkit-border-radius: 10px;
 
−
  text-decoration: none;
 
−
}
 
−
.introjs-bullets ul li a:hover {
 
−
  background: #999;
 
−
}
 
−
.introjs-bullets ul li a.active {
 
−
  background: #999;
 
−
}
 
−
 
−
.introjs-progress {
 
−
  overflow: hidden;
 
−
  height: 10px;
 
−
  margin: 10px 0 5px 0;
 
−
  border-radius: 4px;
 
−
  background-color: #ecf0f1
 
−
}
 
−
.introjs-progressbar {
 
−
  float: left;
 
−
  width: 0%;
 
−
  height: 100%;
 
−
  font-size: 10px;
 
−
  line-height: 10px;
 
−
  text-align: center;
 
−
  background-color: #08c;
 
−
}
 
−
 
−
.introjsFloatingElement {
 
−
  position: absolute;
 
−
  height: 0;
 
−
  width: 0;
 
−
  left: 50%;
 
−
  top: 50%;
 
−
}
 
−
 
−
.introjs-fixedTooltip {
 
−
  position: fixed;
 
−
}
 
−
 
−
.introjs-hint {
 
−
  position: absolute;
 
−
  background: transparent;
 
−
  width: 20px;
 
−
  height: 15px;
 
−
}
 
−
 
−
.introjs-hidehint {
 
−
  display: none;
 
−
}
 
−
 
−
.introjs-fixedhint {
 
−
  position: fixed;
 
−
}
 
−
 
−
.introjs-hint:hover > .introjs-hint-pulse {
 
−
  border: 5px solid rgba(60, 60, 60, 0.57);
 
−
}
 
−
 
−
.introjs-hint-pulse {
 
−
  width: 10px;
 
−
  height: 10px;
 
−
  border: 5px solid rgba(60, 60, 60, 0.27);
 
−
  -webkit-border-radius: 30px;
 
−
  -moz-border-radius: 30px;
 
−
  border-radius: 30px;
 
−
  background-color: rgba(136, 136, 136, 0.24);
 
−
  z-index: 10;
 
−
  position: absolute;
 
−
  -webkit-transition: all 0.2s ease-out;
 
−
    -moz-transition: all 0.2s ease-out;
 
−
      -ms-transition: all 0.2s ease-out;
 
−
      -o-transition: all 0.2s ease-out;
 
−
          transition: all 0.2s ease-out;
 
−
}
 
−
 
−
.introjs-hint-dot {
 
−
  border: 10px solid rgba(146, 146, 146, 0.36);
 
−
  background: transparent;
 
−
  -webkit-border-radius: 60px;
 
−
  -moz-border-radius: 60px;
 
−
  border-radius: 60px;
 
−
  height: 50px;
 
−
  width: 50px;
 
−
  -webkit-animation: introjspulse 3s ease-out;
 
−
  -moz-animation: introjspulse 3s ease-out;
 
−
  animation: introjspulse 3s ease-out;
 
−
  -webkit-animation-iteration-count: infinite;
 
−
  -moz-animation-iteration-count: infinite;
 
−
  animation-iteration-count: infinite;
 
−
  position: absolute;
 
−
  top: -25px;
 
−
  left: -25px;
 
−
  z-index: 1;
 
−
  opacity: 0;
 
−
}
 
−
 
−
@-moz-keyframes intrjspulse {
 
−
0% {
 
−
    -moz-transform: scale(0);
 
−
    opacity: 0.0;
 
−
}
 
−
25% {
 
−
    -moz-transform: scale(0);
 
−
    opacity: 0.1;
 
−
}
 
−
50% {
 
−
    -moz-transform: scale(0.1);
 
−
    opacity: 0.3;
 
−
}
 
−
75% {
 
−
    -moz-transform: scale(0.5);
 
−
    opacity: 0.5;
 
−
}
 
−
100% {
 
−
    -moz-transform: scale(1);
 
−
    opacity: 0.0;
 
−
}
 
−
}
 
−
 
−
@-webkit-keyframes "introjspulse" {
 
−
0% {
 
−
    -webkit-transform: scale(0);
 
−
    opacity: 0.0;
 
−
}
 
−
25% {
 
−
    -webkit-transform: scale(0);
 
−
    opacity: 0.1;
 
−
}
 
−
50% {
 
−
    -webkit-transform: scale(0.1);
 
−
    opacity: 0.3;
 
−
}
 
−
75% {
 
−
    -webkit-transform: scale(0.5);
 
−
    opacity: 0.5;
 
−
}
 
−
100% {
 
−
    -webkit-transform: scale(1);
 
−
    opacity: 0.0;
 
−
}
 
−
}
 
−
</style>
 
−
<script type="text/javascript">
 
−
      function startIntro(){
 
−
        var intro = introJs();
 
−
          intro.setOptions({
 
−
            steps: [
 
−
              {
 
−
                intro: "Hello! Welcome to the tour. This tour aims to tell you how to navigate around our wiki. Please click next and we will bring you to a sample page."
 
−
              },
 
−
             
 
−
            ]
 
−
          });
 
−
 
−
          intro.start();
 
−
      }
 
−
</script>
 
−
<script>
 
−
        introJs().setOption('doneLabel', 'Next page').start().oncomplete(function() {
 
−
          window.location.href = 'Demo?multipage=true';
 
−
        });
 
−
    </script>
 
−
</html>
 

Latest revision as of 12:29, 19 October 2016

Nematode Biochemical marshal: attractant and repellent

Inspired by the ability of horsehair worm modifying the behavior of other organisms, we would like to employ the idea to modify organisms behavior by what available in our laboratory. Nematode is a pest, which will attack the roots of crops. We wish to modify its behavior by engineering bacteria to produce biochemical cues to attract or repel the worm. We identified two potential biochemicals, cinnamaldehyde and phenylpyruvic acid, which are possibly attractant or repellent to the Nematode. We have designed a chemosensation assay to demonstrate the attraction and repulsion ability of the biochemical of interest. The results suggest that cinnamaldehyde is a strong repellent and phenylpyruvic acid is a moderate attractant to the worm. Genetic engineering of bacteria to produce the two biochemicals are working in progress.

Read More

Thanks...

We would like to thank the following associations for helping or sponsoring us during our project.