Team:UCSF/Project/Background2
From 2013.igem.org
(Difference between revisions)
(143 intermediate revisions not shown) | |||
Line 1: | Line 1: | ||
- | + | {{Template:UCSF/MainHeader}} | |
- | + | ||
<html> | <html> | ||
<head> | <head> | ||
+ | <!--CSS styles: global--> | ||
<style type="text/css"> | <style type="text/css"> | ||
+ | /*** | ||
+ | Minimal header: | ||
+ | Thanks a lot to 2012 Calgary team for snippets of their code! | ||
+ | Check out their wikis at: | ||
+ | https://2012.igem.org/Team:Calgary | ||
+ | ***/ | ||
- | . | + | #content h1.firstHeading { |
- | + | visibility:hidden; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #p-logo { | |
- | + | display: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #searchform { | |
- | + | display: none; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | display: | + | |
} | } | ||
- | + | .left-menu { | |
- | + | background-color: #555; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | background-color:# | + | |
} | } | ||
- | + | .left-menu a { | |
- | + | color: #000; | |
} | } | ||
- | + | div#top-section{ /*the div containing the entire top bar*/ | |
- | + | height: 20px; | |
- | + | margin-bottom: 0px !important; | |
- | margin- | + | 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; | |
- | + | ||
- | + | ||
- | # | + | |
- | position: | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | .left-menu, .right-menu{ | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | { | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
position: absolute; | 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; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | border | + | |
- | + | ||
} | } | ||
- | + | h1, h2,h3, h4, #css-full, #css-mobi{ | |
- | { | + | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; |
- | + | border: 0; | |
- | + | font-weight: normal; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | |||
- | + | p1, p2, p3, div.thumb div div.thumbcaption{ | |
- | + | font-family: Calibri, Sans-Serif; | |
- | + | font-weight: normal; | |
- | + | color: black; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #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; |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | a:link, | |
- | { | + | a:visited{ |
- | + | font-family: Calibri, Sans-Serif; | |
- | + | font-weight: normal; | |
+ | color: #4E9600; | ||
+ | text-decoration:none; | ||
} | } | ||
- | |||
- | |||
- | + | a:hover, | |
+ | a:active{ | ||
+ | font-family: Calibri, Sans-Serif; | ||
+ | font-weight: normal; | ||
+ | color: #4E9600; | ||
+ | text-decoration:underline; | ||
} | } | ||
- | + | ||
- | color: # | + | /***Body styling***/ |
+ | h1{ | ||
+ | font-size: 2.2em; | ||
+ | line-height: 1.2em; | ||
+ | color: #008000; | ||
+ | font-weight: bold; | ||
} | } | ||
- | + | h2{ | |
- | color: # | + | font-size: 2.0em; |
+ | line-height: 1em; | ||
+ | color: #008000; | ||
+ | font-weight: bold; | ||
} | } | ||
- | + | h3{ | |
- | color: # | + | font-size: 1.8em; |
+ | line-height: 1em; | ||
+ | //margin: 0px 15px; | ||
+ | //font-weight: bold; | ||
+ | text-decoration: underline; | ||
+ | color: #008000; | ||
} | } | ||
- | + | h4{ | |
- | + | font-size: 1.6em; | |
- | + | color: #333333; | |
+ | margin: 0px 20px; | ||
+ | font-weight: bold; | ||
} | } | ||
- | + | p1{ | |
- | { | + | font-size: 1.7em; |
- | + | color: #008000; | |
- | color: # | + | font-weight: bold; |
} | } | ||
- | + | p2{ | |
- | { | + | font-size: 1.5em; |
- | + | ||
} | } | ||
- | + | p3{ | |
- | + | font-size: 1.2em; | |
- | { | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #pagetitle{ | |
- | + | border-bottom: 2px solid black; | |
+ | padding-bottom: 10px; | ||
+ | padding-left: 10px; | ||
} | } | ||
- | + | #bodycontainer h2{ | |
- | + | margin-left: 10px; | |
- | + | margin-right: 10px; | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #bodycontainer p{ |
- | + | margin-left: 20px; | |
+ | margin-right: 10px; | ||
} | } | ||
- | + | #bodycontainer{ | |
- | + | margin-left: 220px; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | # | + | #bodycontainer ul{ |
- | + | margin-left: 5.0em; | |
} | } | ||
- | # | + | #bodycontainer li{ |
- | + | font-family: Georgia, Serif; | |
} | } | ||
- | # | + | #box1{ |
- | + | width: 740px; | |
+ | height: 2000px; | ||
+ | background: #fffff; | ||
+ | float: left; | ||
+ | margin-left: 210px; | ||
+ | margin-top: 15px; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</style> | </style> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | < | + | <!------------------------------Context Styles--------------------------------> |
- | < | + | <style> |
+ | #mission {width: 500px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;} | ||
+ | #opensource {width:306px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;} | ||
+ | #rightcontent {width:800px; float:right; background-color: #F5F5F5; margin-left: 8px; margin-top:10px;} | ||
+ | #photos {float:left; background-color: #FFFFFF; margin-left: 15px; margin-top:5px;} | ||
+ | #leftcontenttext{float:left; background-color: #FFFFFF; margin-left: 15px; margin-top:5px;} | ||
+ | #rightcontenttext {float:right; background-color: #FFFFFF; margin-left:15px; padding:10px; margin-top:0px;} | ||
+ | //#flickr{width:755px; float:right;} | ||
+ | </style> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | + | <!---------------------------------Sidebar------------------------------------------> | |
- | + | <!--Thanks a lot to 2012 SJTU-BioX-Shanghai team for snippets of their code! | |
+ | Check out their wikis at: | ||
+ | https://2012.igem.org/Team:SJTU-BioX-Shanghai | ||
+ | --> | ||
- | + | <!--Sidebar Scripts--> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <!-- | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
<script type="text/javascript" > | <script type="text/javascript" > | ||
function SDMenu(id) { | function SDMenu(id) { | ||
Line 633: | Line 244: | ||
this.submenus = this.menu.getElementsByTagName("div"); | this.submenus = this.menu.getElementsByTagName("div"); | ||
this.remember = true; | this.remember = true; | ||
- | this.speed = | + | this.speed = 20; |
this.markCurrent = true; | this.markCurrent = true; | ||
this.oneSmOnly = false; | this.oneSmOnly = false; | ||
Line 663: | Line 274: | ||
SDMenu.prototype.toggleMenu = function (submenu) { | SDMenu.prototype.toggleMenu = function (submenu) { | ||
if (submenu.className == "collapsed") | if (submenu.className == "collapsed") | ||
+ | this.expandMenu(submenu); | ||
+ | else if (submenu.className == "collapsed_ab") | ||
this.expandMenu(submenu); | this.expandMenu(submenu); | ||
else | else | ||
Line 714: | Line 327: | ||
if (this.submenus[i].className != "collapsed") { | if (this.submenus[i].className != "collapsed") { | ||
this.collapseMenu(this.submenus[i]); | this.collapseMenu(this.submenus[i]); | ||
- | } | + | } |
+ | else if (this.submenus[i].className != "collapsed_ab") { | ||
+ | this.collapseMenu(this.submenus[i]); | ||
+ | } | ||
} | } | ||
} | } | ||
Line 723: | Line 339: | ||
for (var i = 0; i < this.submenus.length; i++) | for (var i = 0; i < this.submenus.length; i++) | ||
if (this.submenus[i].className == "collapsed") | if (this.submenus[i].className == "collapsed") | ||
+ | this.expandMenu(this.submenus[i]); | ||
+ | else if (this.submenus[i].className == "collapsed_ab") | ||
this.expandMenu(this.submenus[i]); | this.expandMenu(this.submenus[i]); | ||
this.oneSmOnly = oldOneSmOnly; | this.oneSmOnly = oldOneSmOnly; | ||
Line 729: | Line 347: | ||
for (var i = 0; i < this.submenus.length; i++) | for (var i = 0; i < this.submenus.length; i++) | ||
if (this.submenus[i].className != "collapsed") | if (this.submenus[i].className != "collapsed") | ||
+ | this.collapseMenu(this.submenus[i]); | ||
+ | else if (this.submenus[i].className != "collapsed_ab") | ||
this.collapseMenu(this.submenus[i]); | this.collapseMenu(this.submenus[i]); | ||
}; | }; | ||
Line 742: | Line 362: | ||
}; | }; | ||
</script> | </script> | ||
- | + | ||
- | < | + | <!--End Sidebar Scripts--> |
- | + | ||
- | + | <!--Sidebar Styles--> | |
<style type="text/css"> | <style type="text/css"> | ||
div.sdmenu { | div.sdmenu { | ||
- | + | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | |
- | font-family: Arial, | + | font-size: 1.3em; |
- | + | padding-bottom: 5px; | |
- | padding-bottom: | + | |
- | + | ||
color: #fff; | color: #fff; | ||
} | } | ||
div.sdmenu div { | div.sdmenu div { | ||
- | background-color: # | + | background-color: #67A15A; |
overflow: hidden; | overflow: hidden; | ||
} | } | ||
div.sdmenu div.collapsed { | div.sdmenu div.collapsed { | ||
- | height: 30px; | + | height: 30px;} |
- | } | + | |
div.sdmenu div span { | div.sdmenu div span { | ||
display: block; | display: block; | ||
padding: 6px 25px; | padding: 6px 25px; | ||
- | width: | + | width: 160px; |
font-weight: bold; | font-weight: bold; | ||
color: white; | color: white; | ||
Line 775: | Line 392: | ||
} | } | ||
div.sdmenu div:hover{ | div.sdmenu div:hover{ | ||
- | background-color: # | + | background-color: #69C800; |
} | } | ||
div.sdmenu div.collapsed span { | div.sdmenu div.collapsed span { | ||
Line 782: | Line 399: | ||
div.sdmenu div a { | div.sdmenu div a { | ||
padding: 5px 10px; | padding: 5px 10px; | ||
- | background: # | + | background: #D6EADC; |
display: block; | display: block; | ||
border-bottom: 1px solid #ddd; | border-bottom: 1px solid #ddd; | ||
- | color: # | + | color: #1E3A00; |
} | } | ||
div.sdmenu div a.current { | div.sdmenu div a.current { | ||
- | background : # | + | background : #C0DCA4; |
} | } | ||
div.sdmenu div a:hover { | div.sdmenu div a:hover { | ||
- | background : # | + | background : #4E9600 url(/wiki/images/2/2d/12SJTU_floatnav_linkarrow.gif) no-repeat right center; |
color: #fff; | color: #fff; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
</style> | </style> | ||
- | |||
- | |||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
- | |||
.floatbox{ | .floatbox{ | ||
position:absolute; | position:absolute; | ||
Line 809: | Line 421: | ||
background:#FFFFFF | background:#FFFFFF | ||
} | } | ||
- | |||
</style> | </style> | ||
+ | |||
+ | <script type="text/javascript"> | ||
+ | // <![CDATA[ | ||
+ | var myMenu; | ||
+ | window.onload = function () { | ||
+ | myMenu = new SDMenu("my_menu"); | ||
+ | myMenu.oneSmOnly = true; | ||
+ | myMenu.remember = false; | ||
+ | myMenu.init(); | ||
+ | myMenu.expandMenu(myMenu.submenus[0]); | ||
+ | }; | ||
+ | // ]]> | ||
+ | </script> | ||
+ | |||
</head> | </head> | ||
- | |||
+ | <body> | ||
- | + | <!------------------------------------Sidebar-------------------------------------> | |
- | <table border="0" width=" | + | <div class="floatbox" id="12SJTU_floatnav" style="top:200px; left:2px;"> |
+ | <table border="0" width="150" cellspacing="0" cellpadding="0"> | ||
<tr> | <tr> | ||
<td width="100%"> | <td width="100%"> | ||
- | |||
- | |||
- | < | + | <!--Span: Project-Background--> |
<script type="text/javascript"> | <script type="text/javascript"> | ||
// <![CDATA[ | // <![CDATA[ | ||
Line 836: | Line 460: | ||
// ]]> | // ]]> | ||
</script> | </script> | ||
- | |||
- | <!-- | + | <!--Project Sidebar--> |
- | < | + | <div style="float: left" id="my_menu" class="sdmenu"> |
- | < | + | <div class="collapsed"> |
- | < | + | <span>Background</span> |
+ | <a href="https://2013.igem.org/Team:UCSF/Project/Background2">Background</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>CRISPRi Conjugation</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Project/Conjugation/Design1">Project Design</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Project/Conjugation/Data1">Data</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>CRISPRi Circuit</span> | ||
+ | <a href="/Team:UCSF/Project/Circuit/Design">Circuit Design</a> | ||
+ | <a https://2013.igem.org/Team:UCSF/Project/Conjugation/Promoter">Promoter Engineering</a> | ||
+ | <a href="/Team:UCSF/Project/Circuit/Data">Data</a> | ||
- | + | </div> | |
- | + | </div> | |
- | + | </div> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</tr> | </tr> | ||
</table> | </table> | ||
Line 893: | Line 495: | ||
var top = parseInt(id(o).style.top); | var top = parseInt(id(o).style.top); | ||
if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 98) { | if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 98) { | ||
- | height = height - | + | height = height - 50; |
if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 198) { | if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 198) { | ||
- | height = height - | + | height = height - 50; |
if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 298) { | if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 298) { | ||
- | height = height - | + | height = height - 50; |
} | } | ||
} | } | ||
Line 910: | Line 512: | ||
scroll('12SJTU_floatnav'); | scroll('12SJTU_floatnav'); | ||
</script> | </script> | ||
- | |||
- | |||
- | |||
- | + | <!------------------------------------End Sidebar-------------------------------------> | |
- | + | ||
- | <!---------------------------------------------------- | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | <!------------------------------------Comtext-------------------------------------> | |
+ | <div id="box1" align="justify"> | ||
+ | <h1><center> Operation CRISPR: Deploying precision guided tools to target unique species in a complex microbiome </center></h1> | ||
- | + | <div id="leftcontenttext" style = "width: 740px;height:170px"> | |
- | + | <p2>Rarely in nature do bacterial strains exist in isolation; they form complex microbial communities that interact with various organisms. We ourselves contain a major microbial community in our digestive tract that has shown to directly affect our health and well-being. As shown on the left, to improve and maintain healthly living it would be useful to have the ability to change the microbial community. For example, if a large of amount of a certain sugar was present in your gut ("signal #1") you might want to slow the growth of a certain bacterial populations . In another scenario ("signal #2") it might be useful to increase the growth of other specific bacteria in your gut. But targeting precise bacterial community strains and controlling their growth, activity, and outputs is difficult and requires many new tools.</p2> | |
- | < | + | |
</div> | </div> | ||
- | |||
- | |||
- | |||
- | == | + | <div id="photos"> |
+ | <center><img style="height:290px; margin-left:150px" src="https://static.igem.org/mediawiki/2013/1/15/IntroMicrobiome_Pic1.png"> </center> | ||
+ | </div> | ||
- | + | <div id="leftcontenttext" style = "width:740px; height:280px"> | |
+ | <p2>At the beginning of this summer, we asked ourselves a question: "What could we introduce to a microbiome which would allow targeting and eventual gene expression changes in a specific bacteria?" The difficulty faced with this situation is in:</p2> | ||
+ | <p2> 1. Introduce a targeting system into a defined mixture of bacteria such that you can select and introduce manipulations without negatively affecting other bacteria. </p2> | ||
+ | <p2> 2. Creating easy to transfer pathways or circuits that can produce a multitude of outcomes (killing, repressing, upregulating). </p2> | ||
+ | <p2><br><br></p2> | ||
+ | <h3>1. Introducing CRISPRi to a bacterial community</h3> | ||
+ | <p2>To selectively target and eliminate harmful bacteria, we are utilizing the CRISPRi system, a tool repurposed from a natural adaptive immunity system in bacteria (see diagram below). This tool is comprised of a catalytically dead Cas9 (dCas9) protein that complexes with guide RNAs (gRNA) complementary to the target bacteria’s DNA sequence. This complex binds to DNA complementary to the gRNA and prevents transcription, therefore repressing gene expression.</p2> | ||
+ | </div> | ||
- | + | <div id="rightcontenttext" style = "width:340px; height:285px; margin-top:155px"align="justify"> | |
+ | <p2>WHY USE CRISPRi? <br><br>1. CRISPRi utilizes gRNAs which are highly specific and customizable.<br><br> | ||
+ | 2. In principle it could be used to take advantage of unique DNA sequences to target specific bacterial species.</p2> | ||
+ | </div> | ||
- | + | <div id="photos" style = "width:340px"> | |
+ | <img style="height:400px; margin-left:40px; padding:0;"src="https://static.igem.org/mediawiki/2013/a/a6/CRISPRi_Background_UCSF-1.png"> | ||
+ | </div> | ||
+ | <div id="leftcontenttext" style = "width:300px; height:20px; margin-left:55px; margin-top:-5px" align="justify"> | ||
+ | <p3><center>Amended from: http://www.cell.com/abstract/S0092-8674(13)00211-0?script=true</center></p3> | ||
+ | </div> | ||
- | + | <div id="rightcontenttext" style = "width:340px; height:175px; margin-top:10px" align="justify"> | |
+ | <p2> As a means <a href="https://2013.igem.org/Team:UCSF/Project/Conjugation/Design1" > to introduce our CRISPRi system into a microbial community we've opted to utilize conjugation </a> - a naturally occurring mechanism bacteria use to transfer DNA. By utilizing this mechanism, we are able to target specific strains of bacteria and affect gene expression. This will have a potential for future applications that require targeting individual strains in a bacterial community. </p2></div> | ||
- | + | <div id="photos" style = "width:340px"; height:155px;> | |
- | + | <center><img style="margin-left:20px;margin-top:40px; width: 340px"; padding:0;" | |
+ | src="https://static.igem.org/mediawiki/2013/8/8b/Conjugation_Bkgrd_UCSF-1.png"> </center><br></div> | ||
- | <center> | + | <div id="leftcontenttext" style = "width:740px; height:80px; margin-top:10px"align="justify"> |
- | < | + | <p1><center>The combination of conjugation and CRISPRi allows us to create a system capable of both transferring genetic instructions from one cell to another as well as targeting unique species in a microbial community through a specific gene. </center></p1> |
- | < | + | </div> |
- | + | ||
- | == | + | <div id="leftcontenttext" style = "width:740px; height:200px"> |
- | + | <h3>2. Creating scalable CRISPRi circuits that can choose between outcomes based on the input</h3> | |
- | + | <p2>In addition to our conjugation project, we have developed a <a href="https://2013.igem.org/Team:UCSF/Project/Circuit/Design1" >CRISPRi circuit</a>, which could be delivered by the same conjugation system, that could apply to future regulatory applications (upregulation of bacterial growth, bacterial activity and behavior, gene expression, and other bacterial processes, etc.). Our circuit is multi-functional, eliciting different responses with the presence of different inducers and is scalable by incorporating additional designed plasmids or guide RNAs. The circuit relies on the use of CRISPRi gRNAs to provide scalability - several genes can be targeted for silencing, upregulation, or other needs. </p2> | |
- | + | </div> | |
- | + | </div> | |
- | + | </body> | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
- | </ | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | </body> | + | |
</html> | </html> |
Latest revision as of 03:56, 29 October 2013
Operation CRISPR: Deploying precision guided tools to target unique species in a complex microbiome
1. Introducing CRISPRi to a bacterial community
1. CRISPRi utilizes gRNAs which are highly specific and customizable.
2. In principle it could be used to take advantage of unique DNA sequences to target specific bacterial species.