Difference between revisions of "Team:Hong Kong UCCKE"

Line 266: Line 266:
 
<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/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>
 
<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: 20px;
 +
  height:20px;
 +
  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>
 
</html>
 
</html>

Revision as of 12:25, 13 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.

  • Image 1
  • Image 2
  • Image 3
  • Image 4
  • Image 5
  • Image 6
‹ ›