From 2013.igem.org
(Difference between revisions)
|
|
| 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: Georgia, Serif; |
| | + | font-size: 1.1em; |
| | + | 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; |
| | + | } |
| | + | </style> |
| | /*====== | | /*====== |
| | Desktop Styling | | Desktop Styling |
Revision as of 15:49, 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
/*======
Desktop Styling
======*/
/***Body styling***/
h1{
font-size: 2.5em;
}
h2{
font-size: 1.8em;
}
#box1{
width: 980px;
margin-top: -8px;
background: #fffff;
float: left;
padding-bottom: 10px;
margin-bottom: 5px;
}
#box1 h2{
padding: 2px 2px 2px 2px;
}
#box1 p{
padding: 0px 10px 0px 10px;
font-size: 1.1em;
}
#FredOscarFlag{
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;
}
#box2{
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{
float: left;
width: 644px;
height: 655px;
}
#boximgcontainer div{
float: left;
position: relative;
}
#orangebox{
margin-bottom: 4px;
}
#orangebox .imgbox{
width: 644px;
height: 215px;
top: 108px;
background: #F6A82D;
margin-bottom: 4px;
}
.oblank{
width: 644px;
height: 104px;
background: #FFE485;
position: relative;
top: -219px;
}
#orangebox:hover .oblank, .oblank:hover{
display: none;
}
#orangebox .iconcontainer{
position: relative;
display: none;
left: auto;
top: -219px;
}
.iconbox div, .iconbox{
width: 104px;
height: 104px;
margin-right: 4px;
}
a.obox1 div{
background: #FFD35A;
}
a.obox2 div{
background: #FECC44;
}
a.obox3 div{
background: #F8C22E;
}
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;
}
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.
Special Thanks to our 2013 iGEM Team Sponsors!
"
