Team:UCSF/lily2

From 2013.igem.org

(Difference between revisions)
 
(79 intermediate revisions not shown)
Line 4: Line 4:
<head>
<head>
<!--CSS styles: global-->
<!--CSS styles: global-->
-
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" />
+
<style type="text/css">
-
<style>
+
/***
 +
Minimal header: removes the search bar and header image and readjusts font colours in the menus.
 +
 
 +
Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code!
 +
Check out their wikis at:
 +
https://2011.igem.org/Team:Brown-Stanford
 +
https://2012.igem.org/Team:Lethbridge
 +
***/
 +
 
 +
#content h1.firstHeading {
 +
visibility:hidden;
 +
}
 +
#p-logo {
 +
display: none;
 +
}
 +
#searchform {
 +
    display: none;
 +
}
 +
 
 +
.left-menu {
 +
background-color: #555;
 +
 +
}
 +
.left-menu a {
 +
    color: #000;
 +
}
 +
 
 +
div#top-section{ /*the div containing the entire top bar*/
 +
height: 20px;
 +
margin-bottom: 0px !important;
 +
border: none;
 +
}
 +
 
 +
 
 +
#content{
 +
margin-top: 0px;
 +
}
 +
 
 +
#search-controls {
 +
overflow:hidden;
 +
display:none;
 +
background: none;
 +
position: absolute;
 +
top: 170px;
 +
right: 40px;
 +
}
 +
 
 +
 
 +
div#header {
 +
width: 975px;
 +
text-align: left;
 +
margin-left: auto;
 +
margin-right: auto;
 +
margin-bottom: 0px !important;
 +
} 
 +
 
 +
#menubar {
 +
position: absolute;
 +
background: none;
 +
color: black;
 +
}
 +
 
 +
.left-menu, .right-menu{
 +
position: absolute;
 +
background: none;
 +
color: black;
 +
}
 +
 
 +
.left-menu li a, .right-menu li a {
 +
color: #000 !important;
 +
}
 +
 
 +
 
 +
.left-menu ul li, .right-menu ul li a{
 +
background: none;
 +
color: #000 !important;
 +
}
 +
 
 +
.left-menu li a:hover, .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active {
 +
    color: #000 !important;
 +
}
 +
 
 +
#catlinks{
 +
display:none;
 +
}
 +
 
 +
/*important for background colours*/
 +
.mediawiki{
 +
background: #ffffff;
 +
}
 +
 
 +
/***End minimal header***/
 +
 
 +
/*Base styles*/
 +
#content{
 +
border: none;
 +
}
 +
h1, h2,h3, h4, #css-full, #css-mobi{
 +
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
 +
border: 0;
 +
font-weight: 400;
 +
}
 +
 
 +
p, div.thumb div div.thumbcaption{
 +
font-family: Calibri, Sans-Serif;
 +
font-weight: normal;
 +
color: black;
 +
margin-bottom: 10px;
 +
padding-left: 5px;
 +
}
 +
 
 +
#css-full, #css-mobi{
 +
position: absolute;
 +
float: right;
 +
color: black;
 +
font-size: 1.3em;
 +
top: 0px;
 +
right: 15px;
 +
display: block;
 +
padding: 10px;
 +
}
 +
 
 +
#jsnotice{
 +
background-color: #4ED92F;
 +
}
 +
 
 +
#table{
 +
margin: 10px;
 +
}
 +
 
 +
#textlink a:link,
 +
a:visited{
 +
font-family: Calibri, Sans-Serif;
 +
font-weight: normal;
 +
color: #008000;
 +
text-decoration:none;
 +
}
 +
 
 +
#textlink a:hover,
 +
a:active{
 +
font-family: Calibri, Sans-Serif;
 +
font-weight: normal;
 +
color: #008000;
 +
text-decoration:underline;
 +
}
 +
 
/*======
/*======
Desktop Styling
Desktop Styling
Line 15: Line 160:
}
}
h2{
h2{
-
font-size: 1.8em;
+
font-size: 1.7em;
 +
}
 +
h3{
 +
font-size: 1.7em;
}
}
#box1{
#box1{
-
width: 970px;
+
width: 980px;
margin-top: -8px;
margin-top: -8px;
background: #fffff;
background: #fffff;
Line 27: Line 175:
}
}
#box1 h2{
#box1 h2{
-
padding: 4px 4px 4px 4px;
 
}
}
#box1 p{
#box1 p{
-
padding: 0px 10px 0px 10px;
+
font-size: 1.25em;
-
font-size: 1.1em;
+
}
}
-
#FredOscarFlag{
+
#UCSFLogo{
display: block;
display: block;
float: left;
float: left;
width: 250px;
width: 250px;
-
height:195px;
+
height:200px;
background: url('https://static.igem.org/mediawiki/2013/6/6b/UCSF2013_Logonew.png');
background: url('https://static.igem.org/mediawiki/2013/6/6b/UCSF2013_Logonew.png');
background-position: top;
background-position: top;
-
margin: 30px;
+
margin: 40px;
}
}
 +
/*Floatbox styling*/
 +
.floatbox
 +
              {
 +
                    width:980px;
 +
                    float:left;
 +
                    background-color: #fffff;
 +
                    margin-top: 10px;
 +
                    padding-bottom: 10px;
 +
                    margin-bottom: 5px;
 +
                    text-align:justify;
 +
              }
-
#box2{
+
/*Showbox Styling*/
-
width: 968px;
+
-
background: #C68DD8;
+
-
float: left;
+
-
margin-bottom: 13px;
+
-
}
+
-
#box2 h2{
+
-
padding: 20px 20px 20px 20px;
+
-
color: white;
+
-
}
+
-
#box2 p{
+
-
padding: 0px 20px 0px 20px;
+
-
font-size: 1.1em;
+
-
color: white;
+
-
}
+
-
#box2 img{
+
-
float: left;
+
-
margin: 15px;
+
-
height: 110px;
+
-
}
+
-
#box2:hover{
+
-
background: #D79EE9;
+
-
}
+
-
+
-
/***positioning of elements in ZE EPIC BOX***/
+
-
#epicbox{
+
-
margin-top: 4px;
+
-
}
+
-
#boximgcontainer{
+
      .showbox tr:first-child td {  
-
float: left;
+
          border-top: 0px;
-
width: 644px;
+
          padding-top: 1px
-
height: 655px;
+
      }
-
}
+
      .showbox tr:last-child td {
-
#boximgcontainer div{
+
          border-bottom: 0px;
-
float: left;
+
          padding-bottom: 1px
-
position: relative;
+
      }
-
}
+
      .showbox tr td:first-child {
-
#orangebox{
+
          border-left: 0px;
-
margin-bottom: 4px;
+
          padding-left: 1px;
-
}
+
      }
-
#orangebox .imgbox{
+
      .showbox tr td:last-child {
-
width: 644px;
+
          border-right: 0px;
-
height: 215px;
+
          padding-right: 1px;
-
top: 108px;
+
      }
-
background: #F6A82D;
+
 
-
margin-bottom: 4px;
+
      .showbox {
-
}
+
          margin-top: -18px;    
-
.oblank{
+
          background:none;
-
width: 644px;
+
          color:#ffffff;
-
height: 104px;
+
          vertical-align:baseline;
-
background: #FFE485;
+
          border-collapse:collapse;
-
position: relative;
+
          }
-
top: -219px;
+
      .showbox td {
-
}
+
          margin-top: -18px;        
-
#orangebox:hover .oblank, .oblank:hover{
+
          background:none;
-
display: none;
+
          border:none;
-
}
+
          padding:10px;
-
#orangebox .iconcontainer{
+
          width:50%;
-
position: relative;
+
          }
-
display: none;
+
      .showbox p {
-
left: auto;
+
          text-align:top;
-
top: -219px;
+
          color:black;
-
}
+
          margin:0px;
-
.iconbox div, .iconbox{
+
          font-size: 1.25em;
-
width: 104px;
+
          }
-
height: 104px;
+
      .showbox img {
-
margin-right: 4px;
+
          height:150px;
-
}
+
          width:180px;
-
a.obox1 div{
+
          float:left;
-
background: #FFD35A;
+
          border-radius:4px;
-
}
+
          margin-right:10px;
-
a.obox2 div{
+
          }
-
background: #FECC44;
+
      a:hover {
-
}
+
          text-decoration:none;
-
a.obox3 div{
+
          }
-
background: #F8C22E;
+
 
-
}
+
  /*end showboxstyling */ 
-
a.obox4 div{
+
-
background: #F8B32E;
+
-
}
+
-
a.obox5 div{
+
-
background: #F6A82D;
+
-
}
+
-
a.obox6 div{
+
-
background: #F39808;
+
-
margin-right: 0;
+
-
}
+
-
#orangebox div:hover, #orangebox div.iconbox:hover div{
+
-
background: #FFE44F;
+
-
}
+
-
#orangebox:hover .iconcontainer{
+
-
display: block;
+
-
background: transparent;
+
-
}
+
-
+
-
+
-
#greenbox .imgbox{
+
-
width: 320px;
+
-
height: 215px;
+
-
background: #58CD45;
+
-
}
+
-
.gblank{
+
-
width: 320px;
+
-
height: 104px;
+
-
background: #B6FFA3;
+
-
position: relative;
+
-
top: 219px;
+
-
left: -320px;
+
-
}
+
-
#greenbox .iconcontainer{
+
-
position: relative;
+
-
margin-top: 4px;
+
-
left: -999em;
+
-
z-index: 1;
+
-
}
+
-
a.gbox1 div{
+
-
background: #72E85B;
+
-
}
+
-
a.gbox2 div{
+
-
background: #5BCD45;
+
-
}
+
-
a.gbox3 div{
+
-
background: #4CC035;
+
-
}
+
-
a.gbox4 div{
+
-
background: #44AF2F;
+
-
}
+
-
#greenbox div:hover, #greenbox div.iconbox:hover div{
+
-
background: #94FF7D;
+
-
z-index: 99; /*hovers are not overridden by OSCAR boxes*/
+
-
}
+
-
#greenbox:hover .gblank, .gblank:hover{
+
-
display: none;
+
-
}
+
-
#greenbox:hover .iconcontainer{
+
-
left: auto;
+
-
background: transparent;
+
-
}
+
-
+
-
#bluebox{
+
-
position: relative;
+
-
top: -323px;
+
-
left: 320px;
+
-
}
+
-
#bluebox .imgbox{
+
-
width: 320px;
+
-
height: 215px;
+
-
background: #5BB5E8;
+
-
margin-left: 4px;
+
-
}
+
-
.bblank{
+
-
width: 320px;
+
-
height: 104px;
+
-
background: #C5F0F0;
+
-
position: relative;
+
-
top: 219px;
+
-
left: -320px;
+
-
z-index: 0;
+
-
}
+
-
#bluebox .iconcontainer{
+
-
position: relative;
+
-
margin-top: 4px;
+
-
left: -999em;
+
-
z-index: 0;
+
-
}
+
-
a.bbox1 div{
+
-
background: #1574AA;
+
-
}
+
-
a.bbox2 div{
+
-
background: #2580B3;
+
-
}
+
-
a.bbox3 div{
+
-
background: #3285B4;
+
-
}
+
-
a.bbox4 div{
+
-
background: #4292BF;
+
-
}
+
-
a.bbox5 div{
+
-
background: #50A2D0;
+
-
}
+
-
a.bbox6 div{
+
-
background: #5BB5E8;
+
-
margin: 0;
+
-
}
+
-
#bluebox div:hover, #bluebox .iconbox:hover div{
+
-
background: #7DD7FF;
+
-
z-index: 99; /*hovers are not overridden by FRED boxes*/
+
-
}
+
-
#bluebox:hover .bblank, .bblank:hover{
+
-
display: none;
+
-
}
+
-
#bluebox:hover .iconcontainer{
+
-
left: -212px;
+
-
background: transparent;
+
-
}
+
-
+
-
#boxinfo{
+
-
float: right;
+
-
position: relative;
+
-
width: 320px;
+
-
left: 3px;
+
-
background: #555555;
+
-
height: 650px;
+
-
margin-bottom: 12px;
+
-
}
+
-
#boxinfo h2{
+
-
color: white;
+
-
padding: 20px 20px 0px;
+
-
}
+
-
#boxinfo p{
+
-
color: white;
+
-
padding: 10px 20px 20px;
+
-
font-size: 1.2em;
+
-
}
+
-
/*initial boxinfo appearance settings*/
+
-
#boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{
+
-
display: none;
+
-
}
+
-
#boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4,
+
-
#boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{
+
-
position: relative;
+
-
padding-top: 320px;
+
-
display: none;
+
-
}
+
-
/*bold colours for FRED and OSCAR*/
+
-
#boxinfo div.greenbox b{
+
-
color: #72E85B;
+
-
}
+
-
#boxinfo div.bluebox b{
+
-
color: #5EB7F0;
+
-
}
+
-
.threeboxes{
+
-
clear: both;
+
-
position: relative;
+
-
width: 968px;
+
-
margin-bottom: 12px;
+
-
}
+
-
.threeboxes a, .threeboxes a div{
+
-
width: 320px;
+
-
height: 155px;
+
-
float: left;
+
-
margin-bottom: 12px;
+
-
}
+
-
.threeboxes div h2{
+
-
padding: 20px 20px 0px;
+
-
position: relative;
+
-
top: -155px;
+
-
}
+
-
.threeboxes div p{
+
-
padding: 0px 20px;
+
-
position: relative;
+
-
top: -155px;
+
-
}
+
-
#greybox1, #greybox6{
+
-
margin-right: 4px;
+
-
background: #58CD45;
+
-
}
+
-
#greybox1:hover, #greybox6:hover{
+
-
background: #94FF7D;
+
-
}
+
-
#greybox2, #greybox5{
+
-
margin-right: 4px;
+
-
background: #5BB5E8;
+
-
}
+
-
#greybox2:hover, #greybox5:hover{
+
-
background: #7DD7FF;
+
-
}
+
-
#greybox3, #greybox4{
+
-
margin: 0;
+
-
background: #F6A82D;
+
-
}
+
-
#greybox3:hover, #greybox4:hover{
+
-
background: #FFE44F;
+
-
}
+
-
+
-
#sponsorsbox{
+
-
clear: both;
+
-
position: relative;
+
-
width: 968px;
+
-
margin: 4px 0px;
+
-
background: #EEEEEE;
+
-
}
+
-
#sponsorsbox h2{
+
-
padding: 20px 20px 0px 20px;
+
-
}
+
-
#sponsorsbox p{
+
-
padding: 0px 20px;
+
-
}
+
-
#sponsorsbox table{
+
-
width: 950px;
+
-
margin-left: auto;
+
-
margin-right: auto;
+
-
background: #EEEEEE;
+
-
}
+
-
#sponsorsbox td{
+
-
padding: 15px 0px;
+
-
width: 300px;
+
-
}
+
-
#sponsorsbox img{
+
-
display: block;
+
-
margin-right: auto;
+
-
margin-left: auto;
+
-
}
+
</style>
</style>
</head>
</head>
-
<body>
 
 +
<body>
 +
<!--Abstract-->
<div id="box1" align="justify">
<div id="box1" align="justify">
-
<a id="FredOscarFlag">
+
<a id="UCSFLogo">
</a>
</a>
<h2><center>Operation CRISPR: Deploying precision guided tools to target unique species in a complex microbiome</h2></center>
<h2><center>Operation CRISPR: Deploying precision guided tools to target unique species in a complex microbiome</h2></center>
Line 361: Line 266:
</div>
</div>
-
<br>
 
-
<center>
 
-
<h2>Special Thanks to our 2013 iGEM Team Sponsors!</h2>
 
-
<img align="center" style="margin-bottom:0px; width: 500px; margin-top:20px; padding:2; margin-left:55px;" src="https://dl.dropbox.com/u/24404809/iGEM%202012/igem%202012%20website%20photos/Logos/2012%20Sponsors.jpg">
 
-
<br><p>
 
-
<!-- Links -->
+
<!--Project Box-->
-
<div id="SponsorLinks">
+
<div class="floatbox">
-
    <map name="ucsfnosearch" id="ucsfnosearch">
+
<table class="showbox">
-
      <area shape="rect" alt="UCSF home page" coords="38,3,84,27" href="http://www.ucsf.edu/" />
+
<tr>
-
      <area shape="rect" alt="UCSF home page" coords="93,11,288,19" href="http://www.ucsf.edu/" />
+
              <td>
-
      <area shape="rect" alt="About UCSF" coords="306,11,368,19" href="http://www.ucsf.edu/about_ucsf/" />
+
-
      <area shape="rect" alt="UCSF Medical Center" coords="387,11,498,19" href="http://www.ucsfhealth.org/" />
+
                    <div><a href="https://2013.igem.org/Team:UCSF/About_Us">
-
    </map>
+
<img src="https://static.igem.org/mediawiki/2013/2/29/2013UCSF_MainBox_Team.jpg" class="blur"></a>
 +
</div>
 +
                    <a href="https://2013.igem.org/Team:UCSF/About_Us"><h3>Team</h3></a>
 +
                    <p>Meet our dedicated team of under-graduates who conceived of, planned, and carried out the whole project.</p></a>
 +
              </td>
 +
             
 +
<td>
 +
              <a href="https://2013.igem.org/Team:UCSF/Project/Background"><img src="https://static.igem.org/mediawiki/2013/c/c2/UCSF2013_MainBox_Project-1.jpg" class="blur"></a>
 +
              <a href="https://2013.igem.org/Team:UCSF/Project/Background"><h3>Project</h3></a>
 +
                    <p>Discover our precision guided tools to target unique species in a complex microbiome and our groundwork for transferring large circuits that enable complex functionality and decision-making in cells.</p>           
 +
</td>       
 +
</tr>
 +
 
 +
<tr>
 +
            <td>
 +
                    <a href="https://2013.igem.org/Team:UCSF/Modeling">
 +
<img src="https://static.igem.org/mediawiki/2013/a/af/UCSF2013_MainBox_Modeling-1.jpg" class="blur" />
 +
<!--img src="https://static.igem.org/mediawiki/2013/9/97/UCD_2013_HO_Button.jpg" class="blur"--></a>
 +
                    <a href="https://2013.igem.org/Team:UCSF/Modeling"><h3>Modeling</h3></a>
 +
                    <p>Take a look at how we use mathematical modeling to facilitate the design and construct of our project.                    </p>
 +
              </td>
 +
<td>
 +
              <a href="https://2013.igem.org/Team:UCSF/Exploratorium"><img src="https://static.igem.org/mediawiki/2013/7/7c/UCSF2013_MainBox_HP.jpg" class="blur"</a>
 +
              <a href="https://2013.igem.org/Team:UCSF/Exploratorium"><h3>Human Practice</h3></a>
 +
                    <p>Examine how we teach Synthetic Biology to the general public through night event at Exploratorium and to high school students through a collaboration with Lincoln High School.</p>
 +
              </td>   
 +
      </tr>
 +
</table>
 +
 
 +
</div>
 +
 
 +
 
 +
<!--Sponsors-->
 +
<div id="box1" align="justify">
 +
<h2><center>Special Thanks to Our 2013 iGEM Team Sponsors!</h2></center>
 +
<center><img style="margin-bottom:0px; width: 500px; padding:2;"src="https://dl.dropbox.com/u/24404809/iGEM%202012/igem%202012%20website%20photos/Logos/2012%20Sponsors.jpg" usemap="#sponsor">
 +
<map name="sponsor">
 +
              <area shape="rect" coords="0,0,200,100" href="http://www.lifetechnologies.com/us/en/home.html" />
 +
              <area shape="rect" coords="200,0,450,100" href="http://systemsbiology.ucsf.edu/" />
 +
              <area shape="rect" coords="0,95,180,200" href="http://www.qb3.org/" />
 +
              <area shape="rect" coords="180,95,495,200" href="http://www.synberc.org/" />
 +
</map>
 +
</center>
 +
</p>
 +
<br>
 +
</div>
</html>
</html>

Latest revision as of 19:15, 27 September 2013

UCSF Home

UCSF iGEM 2013 Group Photo
Brainstorming project ideas during our second week of Bootcamp
Presenting a poster at the UCSF Center for Systems and Synthetic Biology retreat
Having a skype meeting with one of our mentors!
Human Practices: Speaking about Synthetic Biology at the SF Exploratorium
Having fun outside of the lab making ice cream with dry ice

Operation CRISPR: Deploying precision guided tools to target unique species in a complex microbiome

In microbial communities, bacterial populations are commonly controlled using indiscriminate, broad range antibiotics. There are few ways to target specific strains effectively without disrupting the entire microbiome and local environment. The goal of our project is to take advantage of a natural horizontal gene transfer mechanism in bacteria to precisely affect gene expression in selected strains. We combine bacterial conjugation with CRISPRi, an RNAi-like repression system developed from bacteria, to regulate gene expression in targeted strains within a complex microbial community. One possible application is to selectively repress pathogenic genes in a microbiome, leaving the community makeup unaffected. In addition, we use CRISPRi to lay the groundwork for transferring large circuits that enable complex functionality and decision-making in cells.

Team

Meet our dedicated team of under-graduates who conceived of, planned, and carried out the whole project.

Project

Discover our precision guided tools to target unique species in a complex microbiome and our groundwork for transferring large circuits that enable complex functionality and decision-making in cells.

Modeling

Take a look at how we use mathematical modeling to facilitate the design and construct of our project.

Human Practice

Examine how we teach Synthetic Biology to the general public through night event at Exploratorium and to high school students through a collaboration with Lincoln High School.

Special Thanks to Our 2013 iGEM Team Sponsors!


Retrieved from "http://2013.igem.org/Team:UCSF/lily2"