Team:UCSF/lily2

From 2013.igem.org

(Difference between revisions)
 
(152 intermediate revisions not shown)
Line 1: Line 1:
-
<!DOCTYPE html>
+
{{Template:UCSF/MainHeader}}
-
<!-- Camera is a Pixedelic free jQuery slideshow | Manuel Masia (designer and developer) -->
+
{{Template:UCSF/SlideShow}}
-
<html>  
+
<html>
-
<head>  
+
<head>
-
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
+
<!--CSS styles: global-->
-
    <title>Camera | a free jQuery slideshow by Pixedelic</title>
+
<style type="text/css">
-
    <meta name="description" content="Camera a free jQuery slideshow with many effects, transitions, adaptive layout, easy to customize, using canvas and mobile ready">
+
/***
-
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
Minimal header: removes the search bar and header image and readjusts font colours in the menus.
-
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
+
-
    //
+
-
    // Styles
+
-
    //
+
-
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->  
+
-
    <link rel='stylesheet' id='camera-css'  href='../css/camera.css' type='text/css' media='all'>  
+
-
    <style>
+
-
body {
+
-
margin: 0;
+
-
padding: 0;
+
-
}
+
-
a {
+
-
color: #09f;
+
-
}
+
-
a:hover {
+
-
text-decoration: none;
+
-
}
+
-
#back_to_camera {
+
-
clear: both;
+
-
display: block;
+
-
height: 80px;
+
-
line-height: 40px;
+
-
padding: 20px;
+
-
}
+
-
.fluid_container {
+
-
margin: 0 auto;
+
-
max-width: 1000px;
+
-
width: 90%;
+
-
}
+
-
</style>
+
-
    <!--///////////////////////////////////////////////////////////////////////////////////////////////////
+
Thanks a lot to the 2011 Brown-Stanford and 2012 Lethbridge iGEM teams for snippets of their code!
-
    //
+
Check out their wikis at:
-
    // Scripts
+
https://2011.igem.org/Team:Brown-Stanford
-
    //
+
https://2012.igem.org/Team:Lethbridge
-
    ///////////////////////////////////////////////////////////////////////////////////////////////////-->
+
***/
-
   
+
-
    <script type='text/javascript' src='../scripts/jquery.min.js'></script>
+
-
    <script type='text/javascript' src='../scripts/jquery.mobile.customized.min.js'></script>
+
-
    <script type='text/javascript' src='../scripts/jquery.easing.1.3.js'></script>
+
-
    <script type='text/javascript' src='../scripts/camera.min.js'></script>
+
-
   
+
-
    <script>
+
-
jQuery(function(){
+
-
+
-
jQuery('#camera_wrap_1').camera({
+
-
thumbnails: true
+
-
});
+
-
jQuery('#camera_wrap_2').camera({
+
#content h1.firstHeading {
-
height: '400px',
+
visibility:hidden;
-
loader: 'bar',
+
}
-
pagination: false,
+
#p-logo {
-
thumbnails: true
+
display: none;
-
});
+
}
-
});
+
#searchform {
-
</script>
+
    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
 +
======*/
 +
 +
/***Body styling***/
 +
h1{
 +
font-size: 2.5em;
 +
}
 +
h2{
 +
font-size: 1.7em;
 +
}
 +
h3{
 +
font-size: 1.7em;
 +
}
 +
 
 +
#box1{
 +
width: 980px;
 +
margin-top: -8px;
 +
background: #fffff;
 +
float: left;
 +
padding-bottom: 10px;
 +
margin-bottom: 5px;
 +
}
 +
#box1 h2{
 +
}
 +
#box1 p{
 +
font-size: 1.25em;
 +
}
 +
 
 +
#UCSFLogo{
 +
display: block;
 +
float: left;
 +
width: 250px;
 +
height:200px;
 +
background: url('https://static.igem.org/mediawiki/2013/6/6b/UCSF2013_Logonew.png');
 +
background-position: top;
 +
margin: 40px;
 +
}
 +
 +
/*Floatbox styling*/
 +
.floatbox
 +
              {
 +
                    width:980px;
 +
                    float:left;
 +
                    background-color: #fffff;
 +
                    margin-top: 10px;
 +
                    padding-bottom: 10px;
 +
                    margin-bottom: 5px;
 +
                    text-align:justify;
 +
              }
 +
 
 +
/*Showbox Styling*/
 +
 
 +
      .showbox tr:first-child td { 
 +
          border-top: 0px;
 +
          padding-top: 1px
 +
      }
 +
      .showbox tr:last-child td {
 +
          border-bottom: 0px;
 +
          padding-bottom: 1px
 +
      }
 +
      .showbox tr td:first-child {
 +
          border-left: 0px;
 +
          padding-left: 1px;
 +
      }
 +
      .showbox tr td:last-child {
 +
          border-right: 0px;
 +
          padding-right: 1px;
 +
      }
 +
 
 +
      .showbox {
 +
          margin-top: -18px;   
 +
          background:none;
 +
          color:#ffffff;
 +
          vertical-align:baseline;
 +
          border-collapse:collapse;
 +
          }
 +
      .showbox td {
 +
          margin-top: -18px;         
 +
          background:none;
 +
          border:none;
 +
          padding:10px;
 +
          width:50%;
 +
          }
 +
      .showbox p {
 +
          text-align:top;
 +
          color:black;
 +
          margin:0px;
 +
          font-size: 1.25em;
 +
          }
 +
      .showbox img {
 +
          height:150px;
 +
          width:180px;
 +
          float:left;
 +
          border-radius:4px;
 +
          margin-right:10px;
 +
          }
 +
      a:hover {
 +
          text-decoration:none;
 +
          }
 +
 
 +
  /*end showboxstyling */  
 +
 
 +
</style>
</head>
</head>
 +
<body>
<body>
-
<div id="back_to_camera">
+
<!--Abstract-->
-
    <a href="http://www.pixedelic.com/plugins/camera/">&larr; Back to the Camera project</a>
+
<div id="box1" align="justify">
-
    </div><!-- #back_to_camera -->
+
<a id="UCSFLogo">
-
   
+
</a>
-
<div class="fluid_container">
+
<h2><center>Operation CRISPR: Deploying precision guided tools to target unique species in a complex microbiome</h2></center>
-
    <p>Pagination circles with the height relative to the width</p>
+
<p>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. </p>
-
        <div class="camera_wrap camera_azure_skin" id="camera_wrap_1">
+
 
-
            <div data-thumb="../images/slides/thumbs/bridge.jpg" data-src="../images/slides/bridge.jpg">
+
</div>
-
                <div class="camera_caption fadeFromBottom">
+
 
-
                    Camera is a responsive/adaptive slideshow. <em>Try to resize the browser window</em>
+
<!--Project Box-->
-
                </div>
+
<div class="floatbox">
-
            </div>
+
<table class="showbox">
-
            <div data-thumb="../images/slides/thumbs/leaf.jpg" data-src="../images/slides/leaf.jpg">
+
<tr>
-
                <div class="camera_caption fadeFromBottom">
+
              <td>
-
                    It uses a light version of jQuery mobile, <em>navigate the slides by swiping with your fingers</em>
+
 
-
                </div>
+
                    <div><a href="https://2013.igem.org/Team:UCSF/About_Us">
-
             </div>
+
<img src="https://static.igem.org/mediawiki/2013/2/29/2013UCSF_MainBox_Team.jpg" class="blur"></a>
-
            <div data-thumb="../images/slides/thumbs/road.jpg" data-src="../images/slides/road.jpg">
+
</div>
-
                <div class="camera_caption fadeFromBottom">
+
                    <a href="https://2013.igem.org/Team:UCSF/About_Us"><h3>Team</h3></a>
-
                    <em>It's completely free</em> (even if a donation is appreciated)
+
                    <p>Meet our dedicated team of under-graduates who conceived of, planned, and carried out the whole project.</p></a>
-
                </div>
+
              </td>
-
            </div>
+
             
-
            <div data-thumb="../images/slides/thumbs/sea.jpg" data-src="../images/slides/sea.jpg">
+
<td>
-
                <div class="camera_caption fadeFromBottom">
+
              <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>
-
                    Camera slideshow provides many options <em>to customize your project</em> as more as possible
+
              <a href="https://2013.igem.org/Team:UCSF/Project/Background"><h3>Project</h3></a>
-
                </div>
+
                    <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>            
-
            </div>
+
</td>        
-
            <div data-thumb="../images/slides/thumbs/shelter.jpg" data-src="../images/slides/shelter.jpg">
+
</tr>
-
                <div class="camera_caption fadeFromBottom">
+
 
-
                    It supports captions, HTML elements and videos and <em>it's validated in HTML5</em> (<a href="http://validator.w3.org/check?uri=http%3A%2F%2Fwww.pixedelic.com%2Fplugins%2Fcamera%2F&amp;charset=%28detect+automatically%29&amp;doctype=Inline&amp;group=0&amp;user-agent=W3C_Validator%2F1.2" target="_blank">have a look</a>)
+
<tr>
-
                </div>
+
             <td>
-
            </div>
+
                    <a href="https://2013.igem.org/Team:UCSF/Modeling">
-
            <div data-thumb="../images/slides/thumbs/tree.jpg" data-src="../images/slides/tree.jpg">
+
<img src="https://static.igem.org/mediawiki/2013/a/af/UCSF2013_MainBox_Modeling-1.jpg" class="blur" />
-
                <div class="camera_caption fadeFromBottom">
+
<!--img src="https://static.igem.org/mediawiki/2013/9/97/UCD_2013_HO_Button.jpg" class="blur"--></a>
-
                    Different color skins and layouts available, <em>fullscreen ready too</em>
+
                    <a href="https://2013.igem.org/Team:UCSF/Modeling"><h3>Modeling</h3></a>
-
                </div>
+
                    <p>Take a look at how we use mathematical modeling to facilitate the design and construct of our project.                    </p>
-
            </div>
+
              </td>  
-
        </div><!-- #camera_wrap_1 -->
+
<td>
-
    </div><!-- .fluid_container -->
+
              <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>
-
    <div style="clear:both; display:block; height:100px"></div>
+
                    <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>
-
</body>
+
              </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"