Difference between revisions of "Team:UCL/Description"

Line 3: Line 3:
 
<html>
 
<html>
 
<head>
 
<head>
 +
 +
<script>
 +
 +
  $(function () {
 +
  $('.content').myTooltip({
 +
    speed: 200,
 +
    closeOnClick: true
 +
  });
 +
 
 +
});
 +
 +
 +
 +
$.fn.myTooltip = function ( options ) {
 +
 
 +
 
 +
  var defaults = {
 +
    speed: 650,
 +
    closeOnClick: false,
 +
    tooltipClass: 'tooltip'
 +
  };
 +
 
 +
  var settings = $.extend( {}, defaults, options );
 +
 
 +
  var $this = $(this),
 +
      $tooltip = $this.find('.'+settings.tooltipClass);
 +
 
 +
 
 +
  setPosition();
 +
  $(window).resize(function () {
 +
    setPosition();
 +
  });
 +
 
 +
 
 +
  $this.mouseenter(function () {
 +
    $('.'+settings.tooltipClass, this).fadeIn(settings.speed);
 +
  }).mouseleave(function () {
 +
    $('.'+settings.tooltipClass, this).stop(true, true).fadeOut(settings.speed);
 +
  });
 +
 
 +
  if(settings.closeOnClick) {
 +
    $tooltip.click(function () {
 +
      $(this).stop(true, true).fadeOut(settings.speed);
 +
    });
 +
  }
 +
 
 +
 
 +
  function setPosition() {
 +
    $tooltip.css({top: $this.height(), left: -150});
 +
  }
 +
 
 +
};
 +
 +
</script>
 +
 +
<script src="https://cferdinandi.github.io/smooth-scroll/dist/js/smooth-scroll.js"></script>
 +
<script>
 +
smoothScroll.init({
 +
speed: 1000,
 +
easing: 'easeInOutCubic',
 +
offset: 0,
 +
updateURL: true,
 +
callbackBefore: function ( toggle, anchor ) {},
 +
callbackAfter: function ( toggle, anchor ) {}
 +
});
 +
</script>
 
<style>
 
<style>
 +
 +
 +
.mainmenu {background-color: #fff !important;}
 +
.menu-items a {color: #493C54;}
 +
.buttonblack {background-color: #22343C; border-color: #22343C; }
 +
a.buttonblack { color: #fff !important; font-size: 12px;}
 +
.buttonblack:hover {border-color: #22343C; color: #22343C !important;}
 +
 +
 +
 +
 +
 +
 +
 +
#header2 {
 +
 +
width: 100%;
 +
position: relative;
 +
margin: 0;
 +
padding: 0;
 +
top: 0;
 +
bottom: 0;
 +
margin: 0 auto;
 +
min-height: 100%;
 +
height: auto;
 +
vertical-align: middle;
 +
font-family: Raleway;
 +
letter-spacing: 1.1px; font-size: 13px;
 +
}
 +
 +
 +
 +
#header2:before
 +
{
 +
content: "";
 +
    background-image: url('https://static.igem.org/mediawiki/2015/6/6a/Lipstick_with_freeze_dried_psychobiotics.jpg');
 +
  background-repeat: no-repeat;
 +
  background-attachment: fixed !important;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 1200, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 +
    position: absolute;
 +
    top: 0px;
 +
    left: 0px;
 +
margin: 0;
 +
padding: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
pointer-events: none;
 +
overflow: hidden;
 +
display: block;
 +
border: none;}
 +
 +
#mobilebackground {
 +
  background-image: url('https://static.igem.org/mediawiki/2015/a/a6/UCL_MG_1643_2.jpg');
 +
-webkit-mask-image: -webkit-gradient(linear, 0 0, 0 300, from(rgba(0,0,0,1)), to(rgba(0,0,0,0.2)));
 +
 +
    top: 0;
 +
    right: 0;
 +
    left: 0;
 +
    background-position: 0 0 0 0;
 +
position: fixed;
 +
    background-repeat: no-repeat;
 +
  -webkit-background-size: cover;
 +
  -moz-background-size: cover;
 +
  -o-background-size: cover;
 +
  background-size: cover;
 +
-webkit-box-sizing: border-box;
 +
-moz-box-sizing: border-box;
 +
box-sizing: border-box;
 +
display: none;
 +
width: 100%;
 +
height: 100%;
 +
 +
  }
 +
 +
 +
#text h2 {
 +
font-size: 30px !important;
 +
 +
}
 +
 +
 +
 +
#wrapper {width: 80%; height: 80%; margin: 0 auto; position: relative; top: 80px; opacity: 1;}
 +
 +
#submenu {width: 100%; margin-top: 20px; text-align: center; position: relative;}
 +
 +
#text {margin-top: 50px; z-index: 9999;}
 +
#text h2 {font-size: 20px; text-decoration: none; border-bottom: 0px; display: block; background-color: #c97062; color: #fff; font-weight: bold; border-radius: 4px; padding: 10px; opacity: 0.5; }
 +
 +
.blockk:hover h2 {opacity: 0.9 !important; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease; }
 +
 +
#text h4 {text-decoration: none; font-size: 14px; font-weight: normal !important; border-bottom: 0px; display: block;  padding-left: 5px; padding-top: 5px; padding-bottom: 5px; line-height: 2; text-align: justify; color: #272a2b}
 +
 +
.citecryan {background: #fff; border-radius: 4px; opacity: 0.8; margin-left: 340px; padding: 10px;}
 +
 +
.citecryan:hover {opacity: 1; transition-property: opacity;
 +
    transition-duration: 1s;
 +
    transition-timing-function: ease;}
 +
 +
.constructs {border-radius: 4px;  margin: 0 auto; text-align: justify; font-size: 15px; width: 60%; z-index: 3; opacity: 1;  padding: 40px; line-height: 1.4; padding-top: 25px;}
 +
#text a {color: #33726c; font-weight: bold; text-decoration: none;}
 +
#text a:hover {color: #33726c; font-weight: bold; text-decoration: none;}
 +
#text a:visited {color: #33726c; font-weight: bold; text-decoration: none;}
 +
 +
 +
 +
 +
.content .tooltip {
 +
  background-color: #fff;
 +
border: 1px #22343C solid;
 +
  border-radius: 4px;
 +
  padding: 3px;
 +
  position: absolute;
 +
  width: 300px;
 +
  z-Index: 99999;
 +
  display: none;
 +
letter-spacing: 1px;
 +
line-height: 1;
 +
font-size: 11px;
 +
}
 +
 +
.tooltip a {color: #22343C;}
 +
.tooltip {color: #22343C;}
 +
 +
.content {
 +
  position: relative;
 +
}
 +
 +
.content {color: #d67166;}
 +
 +
.bigtitle {width: 42%; top: 0; margin: 0 auto; font-size: 16px; background-image: url('https://static.igem.org/mediawiki/2015/4/43/UCL_headercircle.png'); text-align: center; line-height: 2;
 +
    background-position: top center;  background-repeat: no-repeat; background-size: contain; padding: 9%; position: relative; margin-bottom: 100px; color: #22343C;}
 +
 +
.bigtitle a {color: #22343C; text-decoration: none;}
 +
 +
.title2 {font-family: League Script; font-size: 380%;}
 +
 +
.titlecircle {width: 85%; margin: 0 auto; padding-top: 12%;}
 +
 +
.arrow {font-size: 50px;}
 +
 +
 +
.buttonblack {
 +
text-transform: uppercase;
 +
  font-size: 14px;
 +
  font-weight: normal;
 +
  line-height: 1.428571429;
 +
  text-align: center;
 +
  white-space: nowrap;
 +
  vertical-align: middle;
 +
  border-radius: 4px;
 +
transition-property: background-color, color, border-color;
 +
  transition-duration: 1s;
 +
  transition-timing-function: ease;
 +
            color: #FFFFFF;
 +
    padding: 10px 16px;
 +
  text-decoration: none;
 +
font-family: Raleway;
 +
letter-spacing: 2px;
 +
font-weight: bold;}
 +
 +
 +
@media(max-width:1280px){
 +
 +
.bigtitle {font-size: 15px;}
 +
.bigtitle {width: 50%;}
 +
.buttonblack {padding: 5px 11px;}
 +
 +
}
 +
 +
 +
@media(max-width:1152px){
 +
 +
.bigtitle {font-size: 14px;}
 +
.bigtitle {width: 52%;}
 +
.titlecircle {width: 80%;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
}
 +
 +
 +
@media(max-width:1024px){
 +
.bigtitle {width: 58%;}
 +
.titlecircle {padding-top: 15%; width: 75%;}
 +
#wrapper {top: 100px;}
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.7px;}
 +
#header2:before {background-image: none;}
 +
#mobilebackground {display: block;}
 +
.constructs {font-size: 15px;}
 +
 +
 +
}
 +
 +
@media(max-width:960px){
 +
 +
.bigtitle {font-size: 13px; width: 65%;}
 +
.arrow {font-size: 40px;}
 +
.buttonblack {padding: 5px 5px;}
 +
#submenu {width: 110%; margin-left: -5%;}
 +
.constructs img {float: none !important; margin: 0 auto !important; min-width: 60% !important;}
 +
.constructs {text-align: center;}
 +
}
 +
 +
 +
@media(max-width:910px){
 +
}
 +
 +
@media(max-width:850px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.3px;}
 +
.buttonblack {padding: 4px 3px;}
 +
#submenu {width: 112%; margin-left: -6%;}
 +
.constructs img {min-width: 80% !important;}
 +
 +
 +
 +
 +
}
 +
 +
 +
 +
@media(max-width: 768px){
 +
.bigtitle {width: 90%; font-size: 13px; padding: 13%; margin-left: -7%;}
 +
.bigtitle p { font-size: 13px; margin-top: -20px !important;}
 +
.titlecircle {width: 70%; padding-top: 8%;}
 +
a.buttonblack {font-size: 9px; letter-spacing: 1.3px;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
.citecryan {margin-left: 50px;}
 +
 +
}
 +
 +
 +
 +
 +
@media(max-width:680px){
 +
#wrapper {width: 100%;}
 +
#text {margin: 50px 25px 0 25px;}
 +
#text h4 {font-size: 13px;}
 +
.constructs {font-size: 13px;}
 +
.bigtitle p { font-size: 13px; }
 +
.titlecircle {width: 60%;}
 +
#submenu {width: 70%; margin: 0 auto;}
 +
.buttonblack {line-height: 3.8;}
 +
a.buttonblack {font-size: 11px; letter-spacing: 1.8px;}
 +
.buttonblack {padding: 5px 8px;}
 +
 +
}
 +
 +
@media(max-width:640px){
 +
.arrow {font-size: 30px;}
 +
.titlecircle {width: 60%;}
 +
#submenu {width: 80%; margin: 0 auto;}
 +
 +
 +
}
 +
 +
 +
 +
@media(max-width:530px){
 +
a.buttonblack {font-size: 10px; letter-spacing: 1.8px;}
 +
.bigtitle p {}
 +
.titlecircle {width: 60%;}
 +
.title2 {font-size: 320%;}
 +
#text h4 {line-height: 1.7;}
 +
.citecryan {margin-left: 10px;}
 +
 +
 +
}
 +
 +
@media(max-width: 480px) {
 +
.bigtitle p { font-size: 13px; text-align: center;}
 +
.titlecircle {width: 70%;}
 +
#submenu {width: 90%; margin: 0 auto;}
 +
 +
 +
 +
}
 +
 +
@media(max-width: 410px) {
 +
.titlecircle {width: 75%;}
 +
.title2 {font-size: 300%;}
 +
.bigtitle p {line-height: 1.5 !important;}
 +
}
 +
 +
@media(max-width: 380px) {
 +
.titlecircle {width: 75%; padding-top: 10%;}
 +
.bigtitle p {font-size: 12px; line-height: 1.2 !important; letter-spacing: 1px;}
 +
.title2 {font-size: 260%;}
 +
 +
}
 +
 +
 +
@media(max-width: 360px) {
 +
.titlecircle {width: 80%;}
 +
.title2 {font-size: 240%;}
 +
.buttonblack {width: 250px; display: block; line-height: 1.5; margin: 5px auto;}
 +
}
 +
 +
.idea:before {content: ""; background: url('https://static.igem.org/mediawiki/2015/d/d6/UCL_Screenshot_2015-09-03_at_00.png'); background-position: top right; opacity: 0.2; top: 0px; left: 0px; width: 100%; height: 300px; position: absolute; background-repeat: no-repeat; z-index: 1; pointer-events: none;}
 +
 +
 +
 +
.idea {line-height: 2; position: relative; z-index: 2; margin-top: 15px; padding-top: 20px;  border-top: 0px dotted #FF9B8E; border-bottom: 0px dotted #FF9B8E; padding-bottom: 20px;}
 +
 +
 +
 +
 +
.constructsdiv {position: relative; z-index: 1; width: 140%; height: 100%; background-color: #fff; opacity: 1;    margin-left: -20%;
 +
border-radius: 15px;  box-shadow: 0px 0px 20px #eaeaea;}
 +
 +
 +
 +
 +
 +
 +
.constructsdiv:before {content: ""; background-image: url('https://static.igem.org/mediawiki/2015/4/40/UCLScreenshot_2015-09-03_at_13.png'); background-repeat: no-repeat; background-position: top 0% left 9%; opacity: 0.3;  top: 0px; left: 0px; width: 100%; height: 100%; position: absolute; background-repeat: no-repeat; z-index: 2; pointer-events: none;    transition-duration: 1s; transition-property: opacity;
 +
    transition-timing-function: ease; }
 +
 +
 +
.constructsdiv:hover:before {opacity: 1; transition-duration: 1s; transition-property: opacity;
 +
    transition-timing-function: ease;}
  
  
 
</style>
 
</style>
 
</head>
 
</head>
−
<body>
 
  
−
<div id="main">
+
<div id="mobilebackground"></div>
 +
<div id="header2">
  
 +
<div id="wrapper">
  
 
<div class="bigtitle">
 
<div class="bigtitle">
−
<div class="titlecircle">
+
<div class="titlecircle"><span class="title2">Overview</span> <br><span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a></span>
−
<span class="title2" style="font-size:70px;">Overview</span> <p style="margin-top: -30px; line-height: 1.7;">Our team engineered probiotics that can sense mental stress through changes in the gut environment and respond by producing compounds that have a positive effect on mental health. <!--Our project is a proof of concept that probiotics can be used as an alternative to classical mental health medication.--> <br><span class="arrow"> <a data-scroll data-options='{ "easing": "linear" }' href="#submenu" >&#x25BC; </a></span>
+
  
−
</p>
 
  
−
</div> </div>
+
</div> </div>  
  
 
<div>
 
<div>

Revision as of 13:23, 11 September 2015

'

Overview
▼

    Tryptophan regulation

    Our first target is tryptophan metabolism which we are going to control by:

    1. inserting an antisense tryptophanase gene into E. coli to repress the expression of tryptophanase. This enzyme is present in most bacterial cells and degrades tryptophan which is the precursor of serotonin. Controlling tryptophanase output would allow accumulation of tryptophan in the cells and thus an increase in serotonin levels which could be a useful target for depression as many patients with depression have low serotonin levels.
    2. using the enzyme TPH1 which converts tryptophan to a precursor of serotonin. In a similar way as above this could be a mechanism to elevate the levels of serotonin in people with naturally low levels of this neurotransmitter.
    3. inserting the KAT gene (Kynurenine aminotransferase) into E. coli. This enzyme is necessary for the synthesis of kynurenic acid, a metabolite of tryptophan. This enzyme has been linked to schizophrenia and is being considered as a possible target for treatment.

    Neurotransmitters

    The second part of our project involves the production of neurotransmitters that target the same problems. Hence, we are using genes expressing the following neurotransmitters:

    • GABA (gamma-Aminobutyric acid)
    • Acetylcholine

These neurotransmitters are naturally produced by some gut microbes. We want to make them dependent on stimuli present in people with mental health issues.

In order to be viable as a treatment for mental disorders like depression the output of neuroactive compounds by bacteria needs to be specific to triggers that are caused by depression in the gut and decrease output when no signals for depression are present. We are therefore testing different promoters in combination with our effectors that could be relevant in this context which includes an adrenaline-sensitive promoter, a nitric-oxide sensing promoter, osmoregulated promoter, and pH-sensitive promoter.