Team:CSU Fort Collins/KillSwitch/
From 2014.igem.org
(Difference between revisions)
m (Created page with "{{CSS/Main}} <html> <!--main content --> <link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'> <link href='http://font...") |
|||
Line 1: | Line 1: | ||
{{CSS/Main}} | {{CSS/Main}} | ||
- | |||
<html> | <html> | ||
- | < | + | |
+ | |||
+ | <title>Kill Switch</title> | ||
+ | |||
+ | <head> | ||
<link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'> | <link href='http://fonts.googleapis.com/css?family=Bitter:400,700,400italic' rel='stylesheet' type='text/css'> | ||
<link href='http://fonts.googleapis.com/css?family=Muli:300,400' rel='stylesheet' type='text/css'> | <link href='http://fonts.googleapis.com/css?family=Muli:300,400' rel='stylesheet' type='text/css'> | ||
- | |||
- | |||
<style type="text/css"> | <style type="text/css"> | ||
+ | /* http://meyerweb.com/eric/tools/css/reset/ | ||
+ | v2.0 | 20110126 | ||
+ | License: none (public domain) | ||
+ | */ | ||
+ | |||
+ | html, body, div, span, applet, object, iframe, p, blockquote, pre, | ||
+ | a, abbr, acronym, address, big, cite, code, | ||
+ | del, dfn, em, img, ins, kbd, q, s, samp, | ||
+ | small, strike, strong, sub, sup, tt, var, | ||
+ | b, u, i, center, | ||
+ | dl, dt, dd, ol, ul, li, | ||
+ | fieldset, form, label, legend, | ||
+ | table, caption, tbody, tfoot, thead, tr, th, td, | ||
+ | article, aside, canvas, details, embed, | ||
+ | figure, figcaption, footer, header, hgroup, | ||
+ | menu, nav, output, ruby, section, summary, | ||
+ | time, mark, audio, video { | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | border: 0; | ||
+ | font-size: 90%; | ||
+ | font: inherit; | ||
+ | vertical-align: baseline; | ||
+ | } | ||
+ | /* HTML5 display-role reset for older browsers */ | ||
+ | article, aside, details, figcaption, figure, | ||
+ | footer, header, hgroup, menu, nav, section { | ||
+ | display: block; | ||
+ | } | ||
+ | body { | ||
+ | line-height: 1; | ||
+ | } | ||
+ | ol, ul { | ||
+ | list-style: none; | ||
+ | } | ||
+ | blockquote, q { | ||
+ | quotes: none; | ||
+ | } | ||
+ | blockquote:before, blockquote:after, | ||
+ | q:before, q:after { | ||
+ | content: ''; | ||
+ | content: none; | ||
+ | } | ||
+ | table { | ||
+ | border-collapse: collapse; | ||
+ | border-spacing: 0; | ||
+ | } | ||
+ | |||
+ | #menubar > ul{ | ||
+ | vertical-align:center; | ||
+ | font-size:14px; | ||
+ | font-family:'Times New Roman',serif; | ||
+ | } | ||
+ | |||
.firstHeading{ | .firstHeading{ | ||
- | + | display:none; | |
} | } | ||
- | + | ||
- | + | #textbox span{ | |
+ | color:#E6B800; | ||
} | } | ||
- | + | .photo{ | |
- | + | width:70%; | |
} | } | ||
- | + | table{ | |
- | + | font-family:'Muli',sans-serif; | |
- | + | ||
} | } | ||
- | + | body{ | |
- | + | background-color:#EFEFEF; | |
- | + | line-height:1.3; | |
- | + | font-size:90%; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #cssmenu { | |
- | + | width:100%; | |
- | + | height: 44px; | |
- | + | background: #222222; | |
- | + | position:relative; | |
- | + | text-align:center; | |
- | + | margin:auto; | |
} | } | ||
- | + | #cssmenu ul { | |
- | + | list-style: none; | |
- | + | padding: 0; | |
- | + | margin: 0; | |
+ | line-height: 1; | ||
} | } | ||
- | + | #cssmenu > ul { | |
- | + | position: relative; | |
- | + | display: block; | |
- | + | background: #222222; | |
+ | width: 100%; | ||
+ | z-index: 500; | ||
} | } | ||
- | + | #cssmenu:after, | |
- | + | #cssmenu > ul:after { | |
- | + | content: '.'; | |
+ | display: block; | ||
+ | clear: both; | ||
+ | visibility: hidden; | ||
+ | line-height: 0; | ||
+ | height: 0; | ||
} | } | ||
- | + | #cssmenu.align-right > ul > li { | |
- | + | float: right; | |
- | + | ||
- | + | ||
- | + | ||
} | } | ||
- | + | #cssmenu.align-center ul { | |
- | + | text-align: center; | |
- | + | ||
- | + | ||
} | } | ||
- | + | #cssmenu.align-center ul ul { | |
- | + | text-align: left; | |
- | + | ||
} | } | ||
- | + | #cssmenu > ul > li { | |
- | + | display: inline-block; | |
+ | position: relative; | ||
+ | margin: 0; | ||
+ | padding: 0; | ||
+ | } | ||
+ | #cssmenu > ul > #menu-button { | ||
+ | display: none; | ||
+ | } | ||
+ | #cssmenu ul li a { | ||
+ | display: block; | ||
+ | font-family: Helvetica, sans-serif; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | #cssmenu > ul > li > a { | ||
+ | font-size: 14px; | ||
+ | font-weight: bold; | ||
+ | padding: 15px 20px; | ||
+ | color: #efefef; | ||
+ | text-transform: uppercase; | ||
+ | -webkit-transition: color 0.25s ease-out; | ||
+ | -moz-transition: color 0.25s ease-out; | ||
+ | -ms-transition: color 0.25s ease-out; | ||
+ | -o-transition: color 0.25s ease-out; | ||
+ | transition: color 0.25s ease-out; | ||
+ | } | ||
+ | #cssmenu > ul > li.has-sub > a { | ||
+ | padding-right: 32px; | ||
+ | } | ||
+ | #cssmenu > ul > li:hover > a { | ||
+ | color: #E6B800; | ||
+ | } | ||
+ | #cssmenu li.has-sub::after { | ||
+ | display: block; | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | } | ||
+ | #cssmenu > ul > li.has-sub::after { | ||
+ | right: 10px; | ||
+ | top: 20px; | ||
+ | border: 5px solid transparent; | ||
+ | border-top-color: #efefef; | ||
+ | } | ||
+ | #cssmenu > ul > li:hover::after { | ||
+ | border-top-color: #E6B800; | ||
+ | } | ||
+ | #indicatorContainer { | ||
+ | position: absolute; | ||
+ | height: 12px; | ||
+ | width: 100%; | ||
+ | bottom: 0px; | ||
+ | overflow: hidden; | ||
+ | z-index: -1; | ||
+ | } | ||
+ | #pIndicator { | ||
+ | position: absolute; | ||
+ | height: 0; | ||
+ | width: 100%; | ||
+ | border: 12px solid transparent; | ||
+ | border-top-color: #2b2f3a; | ||
+ | z-index: -2; | ||
+ | -webkit-transition: left .25s ease; | ||
+ | -moz-transition: left .25s ease; | ||
+ | -ms-transition: left .25s ease; | ||
+ | -o-transition: left .25s ease; | ||
+ | transition: left .25s ease; | ||
+ | } | ||
+ | #cIndicator { | ||
+ | position: absolute; | ||
+ | height: 0; | ||
+ | width: 100%; | ||
+ | border: 12px solid transparent; | ||
+ | border-top-color: #2b2f3a; | ||
+ | top: -12px; | ||
+ | right: 100%; | ||
+ | z-index: -2; | ||
+ | } | ||
+ | #cssmenu ul ul { | ||
+ | position: absolute; | ||
+ | left: -9999px; | ||
+ | top: 70px; | ||
+ | opacity: 0; | ||
+ | -webkit-transition: opacity .3s ease, top .25s ease; | ||
+ | -moz-transition: opacity .3s ease, top .25s ease; | ||
+ | -ms-transition: opacity .3s ease, top .25s ease; | ||
+ | -o-transition: opacity .3s ease, top .25s ease; | ||
+ | transition: opacity .3s ease, top .25s ease; | ||
+ | z-index: 1000; | ||
+ | } | ||
+ | #cssmenu ul ul ul { | ||
+ | top: 37px; | ||
+ | padding-left: 5px; | ||
+ | } | ||
+ | #cssmenu ul ul li { | ||
+ | position: relative; | ||
+ | } | ||
+ | #cssmenu > ul > li:hover > ul { | ||
+ | left: auto; | ||
+ | top: 44px; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #cssmenu.align-right > ul > li:hover > ul { | ||
+ | left: auto; | ||
+ | right: 0; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #cssmenu ul ul li:hover > ul { | ||
+ | left: 170px; | ||
+ | top: 0; | ||
+ | opacity: 1; | ||
+ | } | ||
+ | #cssmenu.align-right ul ul li:hover > ul { | ||
+ | left: auto; | ||
+ | right: 170px; | ||
+ | top: 0; | ||
+ | opacity: 1; | ||
+ | padding-right: 5px; | ||
+ | } | ||
+ | #cssmenu ul ul li a { | ||
+ | width: 130px; | ||
+ | border-bottom: 1px solid #eeeeee; | ||
+ | padding: 10px 20px; | ||
+ | font-size: 12px; | ||
+ | color: #222222; | ||
+ | background: white; | ||
+ | -webkit-transition: all .35s ease; | ||
+ | -moz-transition: all .35s ease; | ||
+ | -ms-transition: all .35s ease; | ||
+ | -o-transition: all .35s ease; | ||
+ | transition: all .35s ease; | ||
+ | } | ||
+ | #cssmenu.align-right ul ul li a { | ||
+ | text-align: right; | ||
+ | } | ||
+ | #cssmenu ul ul li:hover > a { | ||
+ | background: white; | ||
+ | color: #E6B800; | ||
+ | } | ||
+ | #cssmenu ul ul li:last-child > a, | ||
+ | #cssmenu ul ul li.last > a { | ||
+ | border-bottom: 0; | ||
+ | } | ||
+ | #cssmenu > ul > li > ul::after { | ||
+ | content: ''; | ||
+ | border: 6px solid transparent; | ||
+ | width: 0; | ||
+ | height: 0; | ||
+ | border-bottom-color: #efefef; | ||
+ | position: absolute; | ||
+ | top: -12px; | ||
+ | left: 30px; | ||
+ | } | ||
+ | #cssmenu.align-right > ul > li > ul::after { | ||
+ | left: auto; | ||
+ | right: 30px; | ||
+ | } | ||
+ | #cssmenu ul ul li.has-sub::after { | ||
+ | border: 4px solid transparent; | ||
+ | border-left-color: #222222; | ||
+ | right: 10px; | ||
+ | top: 12px; | ||
+ | -moz-transition: all .2s ease; | ||
+ | -ms-transition: all .2s ease; | ||
+ | -o-transition: all .2s ease; | ||
+ | transition: all .2s ease; | ||
+ | -webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease; | ||
+ | } | ||
+ | #cssmenu.align-right ul ul li.has-sub::after { | ||
+ | border-left-color: transparent; | ||
+ | border-right-color: #222222; | ||
+ | right: auto; | ||
+ | left: 10px; | ||
+ | } | ||
+ | #cssmenu ul ul li.has-sub:hover::after { | ||
+ | border-left-color: #efefef; | ||
+ | right: -5px; | ||
+ | -webkit-transform: rotateY(180deg); | ||
+ | -ms-transform: rotateY(180deg); | ||
+ | -moz-transform: rotateY(180deg); | ||
+ | -o-transform: rotateY(180deg); | ||
+ | transform: rotateY(180deg); | ||
+ | } | ||
+ | #cssmenu.align-right ul ul li.has-sub:hover::after { | ||
+ | border-right-color: #efefef; | ||
+ | border-left-color: transparent; | ||
+ | left: -5px; | ||
+ | -webkit-transform: rotateY(180deg); | ||
+ | -ms-transform: rotateY(180deg); | ||
+ | -moz-transform: rotateY(180deg); | ||
+ | -o-transform: rotateY(180deg); | ||
+ | transform: rotateY(180deg); | ||
+ | } | ||
+ | @media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { | ||
+ | #cssmenu { | ||
+ | width: 100%; | ||
+ | } | ||
+ | #cssmenu.align-center ul { | ||
+ | text-align: left; | ||
+ | } | ||
+ | #cssmenu.align-right > ul > li { | ||
+ | float: none; | ||
+ | } | ||
+ | #cssmenu ul { | ||
+ | width: auto; | ||
+ | } | ||
+ | #cssmenu .submenuArrow, | ||
+ | #cssmenu #indicatorContainer { | ||
+ | display: none; | ||
+ | } | ||
+ | #cssmenu > ul { | ||
+ | height: auto; | ||
+ | display: block; | ||
+ | color:#EFEFEF; | ||
+ | } | ||
+ | #cssmenu > ul > li { | ||
+ | float: none; | ||
+ | } | ||
+ | #cssmenu li, | ||
+ | #cssmenu > ul > li { | ||
+ | display: none; | ||
+ | color:white; | ||
+ | } | ||
+ | #cssmenu ul ul, | ||
+ | #cssmenu ul ul ul, | ||
+ | #cssmenu ul > li:hover > ul, | ||
+ | #cssmenu ul ul > li:hover > ul, | ||
+ | #cssmenu.align-right ul ul, | ||
+ | #cssmenu.align-right ul ul ul, | ||
+ | #cssmenu.align-right ul > li:hover > ul, | ||
+ | #cssmenu.align-right ul ul > li:hover > ul { | ||
+ | position: relative; | ||
+ | left: auto; | ||
+ | top: auto; | ||
+ | opacity: 1; | ||
+ | padding-left: 0; | ||
+ | padding-right: 0; | ||
+ | right: auto; | ||
+ | } | ||
+ | #cssmenu ul .has-sub::after { | ||
+ | display: none; | ||
+ | } | ||
+ | #cssmenu ul li a { | ||
+ | padding: 12px 20px; | ||
+ | } | ||
+ | #cssmenu ul ul li a { | ||
+ | border: 0; | ||
+ | background: none; | ||
+ | width: auto; | ||
+ | padding: 8px 35px; | ||
+ | color:white; | ||
+ | } | ||
+ | #cssmenu.align-right ul ul li a { | ||
+ | text-align: left; | ||
+ | } | ||
+ | #cssmenu ul ul li:hover > a { | ||
+ | background:none; | ||
+ | color: #ec9359; | ||
+ | } | ||
+ | #cssmenu ul ul ul a { | ||
+ | padding: 8px 50px; | ||
+ | } | ||
+ | #cssmenu ul ul ul ul a { | ||
+ | padding: 8px 65px; | ||
+ | } | ||
+ | #cssmenu ul ul ul ul ul a { | ||
+ | padding: 8px 80px; | ||
+ | } | ||
+ | #cssmenu ul ul ul ul ul ul a { | ||
+ | padding: 8px 95px; | ||
+ | } | ||
+ | #cssmenu > ul > #menu-button { | ||
+ | display: block; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | #cssmenu #menu-button > a { | ||
+ | padding: 14px 20px; | ||
+ | } | ||
+ | #cssmenu ul.open li, | ||
+ | #cssmenu > ul.open > li { | ||
+ | display: block; | ||
+ | } | ||
+ | #cssmenu > ul.open > li#menu-button > a { | ||
+ | color: #fff; | ||
+ | border-bottom: 1px solid rgba(150, 150, 150, 0.1); | ||
+ | } | ||
+ | #cssmenu ul ul::after { | ||
+ | display: none; | ||
+ | } | ||
+ | #cssmenu #menu-button::after { | ||
+ | display: block; | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | height: 3px; | ||
+ | width: 22px; | ||
+ | border-top: 2px solid #efefef; | ||
+ | border-bottom: 2px solid #efefef; | ||
+ | right: 20px; | ||
+ | top: 15px; | ||
+ | } | ||
+ | #cssmenu #menu-button::before { | ||
+ | display: block; | ||
+ | content: ''; | ||
+ | position: absolute; | ||
+ | height: 3px; | ||
+ | width: 22px; | ||
+ | border-top: 2px solid #efefef; | ||
+ | right: 20px; | ||
+ | top: 25px; | ||
+ | } | ||
+ | #cssmenu ul.open #menu-button::after, | ||
+ | #cssmenu ul.open #menu-button::before { | ||
+ | border-color: #fff; | ||
+ | } | ||
+ | } | ||
+ | .icon{ | ||
+ | width:30px; | ||
+ | } | ||
+ | .wrapper2{ | ||
+ | width:20%; | ||
+ | padding:20px 0px 20px 20px; | ||
+ | display:inline-block; | ||
+ | margin:auto; | ||
+ | vertical-align:top; | ||
+ | } | ||
+ | .wrapper{ | ||
+ | width:90%; | ||
+ | padding:20px 0px 20px 20px; | ||
+ | padding-left:0; | ||
+ | margin:auto; | ||
+ | vertical-align: top; | ||
+ | } | ||
+ | .page, .container{ | ||
+ | width:50%; | ||
+ | min-width:600px; | ||
+ | max-width:800px; | ||
+ | padding:30px; | ||
+ | margin:auto; | ||
+ | text-align:left; | ||
+ | font-family:'Muli',sans-serif; | ||
+ | display:inline-block; | ||
+ | } | ||
+ | .page a, .container a{ | ||
+ | color:#222222; | ||
+ | } | ||
+ | .page a:hover, .container a:hover{ | ||
+ | color:#E6B800; | ||
+ | text-decoration:none; | ||
} | } | ||
- | + | h1{ | |
- | display:block; | + | color:#222222; |
+ | font-family:'Bitter',serif; | ||
+ | border-bottom:none; | ||
+ | } | ||
+ | h2,h3,.toc,.show,.hide,.content{ | ||
+ | color:#E6B800; | ||
+ | font-family:'Bitter',serif; | ||
+ | } | ||
+ | h4,h5,h6, .page{ | ||
+ | color:#222222; | ||
+ | font-family:'Muli',sans-serif; | ||
+ | } | ||
+ | .toc{ | ||
+ | text-decoration:none; | ||
+ | display:none; | ||
+ | width:100%; | ||
+ | margin:auto; | ||
+ | } | ||
+ | .toc .month-group { margin: 20px 0; } | ||
+ | .toc .month-group p { padding: 0; margin: 0; } | ||
+ | #ftoc{ | ||
+ | color:#666666; | ||
+ | } | ||
+ | ul{ | ||
+ | list-style-type:none; | ||
+ | } | ||
+ | .month-group, a{ | ||
+ | text-decoration:none; | ||
+ | } | ||
+ | .month-group{ | ||
+ | margin-left:20px; | ||
+ | } | ||
+ | .month-group:hover{ | ||
+ | color:#E6B800; | ||
+ | } | ||
+ | .toc a, .toc2 a, #navi a{ | ||
+ | text-decoration:none; | ||
+ | color:#222222; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | .toc a:hover, #ftoc>a:hover, #navi a:hover, .show:hover, .hide:hover, .container>a:hover{ | ||
+ | color:#E6B800 !important; | ||
+ | cursor:pointer; | ||
+ | } | ||
+ | .toc a, #ftoc, .container a, #navi{ | ||
+ | border-bottom:2px dotted; | ||
+ | } | ||
+ | #navi{ | ||
+ | text-decoration:none; | ||
+ | font-family:'Bitter',serif; | ||
+ | } | ||
+ | #logo{ | ||
+ | width:120px; | ||
+ | margin:auto; | ||
+ | padding:40px; | ||
+ | border-radius:100%; | ||
+ | } | ||
+ | #banner{ | ||
+ | width:auto; | ||
+ | height:250px; | ||
+ | vertical-align:top; | ||
+ | background-color:#E6B800; | ||
+ | overflow: hidden | ||
+ | } | ||
+ | .fixed { | ||
+ | position:fixed !important; | ||
+ | top:0; | ||
+ | } | ||
+ | .disp{ | ||
+ | display:none; | ||
+ | } | ||
+ | .col { | ||
+ | width: 20%; | ||
+ | float: left; | ||
+ | clear: right; | ||
+ | margin: 20px 1.66666666666666666666666666%; | ||
+ | font-family:'Muli',sans-serif; | ||
+ | font-weight:300; | ||
+ | font-size:14px; | ||
+ | color:#222222; | ||
+ | text-align:left; | ||
+ | } | ||
+ | .clear{ | ||
+ | width:100%; | ||
+ | clear:both; | ||
+ | } | ||
+ | .container{ | ||
+ | line-height:1.9; | ||
+ | } | ||
+ | .index{ | ||
+ | margin-right:20px; | ||
+ | } | ||
+ | .toc2{ | ||
+ | display:block; | ||
} | } | ||
.footer{ | .footer{ | ||
Line 81: | Line 576: | ||
margin:auto; | margin:auto; | ||
padding:15px; | padding:15px; | ||
- | + | color:#efefef; | |
+ | font-size:14px; | ||
} | } | ||
- | + | .footer table{ | |
- | + | background-color:#222222; | |
- | + | color:#efefef; | |
- | + | margin:auto; | |
} | } | ||
+ | .footer a{ | ||
+ | color:#efefef; | ||
+ | } | ||
+ | #source1{ | ||
+ | font-size:12px; | ||
+ | } | ||
+ | #banner a:hover{ | ||
+ | opacity:0.7; | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
- | < | + | </head> |
- | |||
- | |||
- | |||
- | < | + | |
- | <li class= | + | <body style='margin:0'> |
- | + | ||
- | + | <div id='banner'><center> | |
- | + | <img src='https://static.igem.org/mediawiki/2014/e/ee/Team-CSU_Brea.jpg' style='width:100%; margin:-150px'/><a href='https://2014.igem.org'><img src='https://static.igem.org/mediawiki/2014/d/d7/Sysuchina_igemdeLogo.png' style="width:80px; position:absolute; top: 10px; right: 20px; opacity:0.95;"/></a> | |
- | + | </center></div> | |
- | + | ||
- | <li class= | + | <div id='cssmenu'> |
- | + | <ul> | |
- | + | <li><a href='/Team:CSU_Fort_Collins'><span>Home</span></a></li> | |
- | + | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Project/'><span>Project</span></a> | |
- | + | <ul> | |
- | + | <li><a href='/Team:CSU_Fort_Collins/Biosensor/'><span>Biosensor</span></a></li> | |
- | + | <li><a href='/Team:CSU_Fort_Collins/Breakdown/'><span>Breakdown</span></a></li> | |
- | + | <li><a href='/Team:CSU_Fort_Collins/HVP/'><span>High-Value Product</span></a></li> | |
- | <li | + | <li><a href='/Team:CSU_Fort_Collins/KillSwitch/'><span>Kill Switch</span></a></li> |
- | + | </ul> | |
- | <li class= | + | </li> |
- | + | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Members/'><span>Team</span></a> | |
- | + | <ul> | |
- | + | <li><a href='/Team:CSU_Fort_Collins/Members/'><span>Members</span></a></li> | |
- | + | <li><a href='/Team:CSU_Fort_Collins/Sponsors/'><span>Sponsors</span></a></li> | |
- | + | <li class='last'><a href='/Team:CSU_Fort_Collins/Acknowledgements/'><span>Acknowledgements</span></a></li> | |
- | <li class= | + | </ul> |
- | <li class= | + | </li> |
+ | <li class='has-sub' class='active'><a href='/Team:CSU_Fort_Collins/Notebook/'><span>Notebook</span></a> | ||
+ | <ul style="display:block"> | ||
+ | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Notebook/Protocols'><span>Protocols</span></a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/Protocols=Gibson"><span>Gibson Assembly</span></a></li> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/Protocols=Cloning"><span>Cloning Genes</span></a></li> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/Protocols=Miniprep"><span>Plasmid Miniprep</span></a></li> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/Protocols=Isolation"><span>Yeast DNA Isolation</span></a></li> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/Protocols=Gel"><span>Gel Electrophoresis</span></a></li> | ||
+ | <li class='last'><a href="/Team:CSU_Fort_Collins/Notebook/Protocols=Purify"><span>PCR Product Purification</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Notebook/DailyNotes'><span>Daily Notes</span></a> | ||
+ | <ul> | ||
+ | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Notebook/Biosensor/Jun'><span>Biosensor</span></a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/Biosensor/Jun"><span>June</span></a></li> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/Biosensor/Jul"><span>July</span></a></li> | ||
+ | <li class='last'><a href='/Team:CSU_Fort_Collins/Notebook/Biosensor/Aug'><span>August</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Notebook/Breakdown/Jul'><span>Breakdown</span></a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/Breakdown/Jul"><span>July</span></a></li> | ||
+ | <li><a href='/Team:CSU_Fort_Collins/Notebook/Breakdown/Aug'><span>August</span></a></li> | ||
+ | <li class='last'><a href="/Team:CSU_Fort_Collins/Notebook/Breakdown/Sep"><span>September</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Notebook/HVP/Jun'><span>High-Value Product</span></a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/HVP/Jun"><span>June</span></a></li> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/HVP/Jul"><span>July</span></a></li> | ||
+ | <li><a href='/Team:CSU_Fort_Collins/Notebook/HVP/Aug'><span>August</span></a></li> | ||
+ | <li class='last'><a href="/Team:CSU_Fort_Collins/Notebook/HVP/Sep"><span>September</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li li class='has-sub'><a href='/Team:CSU_Fort_Collins/Notebook/KillSwitch/Jul'><span>Kill Switch</span></a> | ||
+ | <ul> | ||
+ | <li><a href="/Team:CSU_Fort_Collins/Notebook/KillSwitch/Jul"><span>July</span></a></li> | ||
+ | <li class='last'><a href="/Team:CSU_Fort_Collins/Notebook/KillSwitch/Sep"><span>September</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/HumPrac/'><span>Human Practices</span></a> | ||
+ | <ul> | ||
+ | <li><a href='/Team:CSU_Fort_Collins/Collab/'><span>Collaboration</span></a></li> | ||
+ | <li class='last'><a href='/Team:CSU_Fort_Collins/Outreach/'><span>Outreach</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Achievements/'><span>Achievements</span></a> | ||
+ | <ul> | ||
+ | <li><a href='/Team:CSU_Fort_Collins/Parts/'><span>Parts</span></a></li> | ||
+ | <li class='last'><a href='/Team:CSU_Fort_Collins/Judging/'><span>Judging</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='last'><a href='/Team:CSU_Fort_Collins/Safety/'><span>Safety</span></a></li> | ||
</ul> | </ul> | ||
- | |||
- | |||
</div> | </div> | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
+ | <div class="clear"></div> | ||
- | < | + | <div class='wrapper'> |
- | < | + | <center> |
- | + | <h1>Creating a Kill Switch</h1> | |
- | + | ||
- | + | <div class="container"> | |
+ | While other parts of our project were based around the idea of recycling waste material into useful products, some environmental concerns still remained, such as how to control the <u>E. Coli</u> in the event of a containment breach and minimize its impact to its surroundings. To alleviate these issues, we decided to insert a kill switch into our <u>E. Coli</u> as an added safety mechanism. <br><br> | ||
- | < | + | Utilizing the gene known as KillerRed (<a href='#source1'>Bulina, 1</a>), as well as a negative Tryptophan promoter (<a href='http://parts.igem.org/Part:BBa_K588001'>BBa_K588001</a>), we were able to construct a basic kill switch. When the <u>E. Coli</u> is exposed to Tryptophan, the KillerRed gene is repressed, and the cells continue to grow and carry out normal function. However, when removed from a Tryptophan-rich system (ie. escaping containment and entering the general environment) the KillerRed gene is no longer repressed and quickly begins producing reactive oxygen species- ROS- when exposed to red spectrum light. These ROS cause rapid apoptosis, leading to mass cell death soon after the <u>E. Coli</u> enters an uncontrolled environment.<br><br> |
- | + | ||
- | + | After constructing our Trp+KillerRed plasmid, we ran several experiments designed to test its effectiveness as a kill switch (see below). While our data did not show that all of our <u>E. Coli</u> was killed off via KillerRed, it did show that the gene had an affect, as plates grown from samples irradiated with steady white light for 30 minutes had significantly less colonies than those taken from samples not exposed to light.<br><br> | |
- | < | + | |
- | + | Moving forward, we would like to study the Trp-KillerRed system in greater detail, by modelling out their function based on experimental data with the goal of optimizing the system. Reducing leakage and lag time of the kill switch would greatly increase its impact on the safety of the system.<br><br> | |
- | + | ||
- | + | ||
- | + | ||
+ | <span id='source1'> 1. Bulina, M., et. al. "<a href='http://www.ncbi.nlm.nih.gov/pubmed/16369538'>A genetically encoded photosensitizer</a>.” Nature Biotechnology, 95-99. 2005. October 2014. </span> | ||
+ | |||
+ | </center> | ||
</div> | </div> | ||
- | |||
+ | <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script> | ||
+ | <script type='text/javascript'> | ||
+ | $('#cssmenu').prepend('<div id="indicatorContainer"><div id="pIndicator"><div id="cIndicator"></div></div></div>'); | ||
+ | var activeElement = $('#cssmenu>ul>li:first'); | ||
+ | |||
+ | $('#cssmenu>ul>li').each(function() { | ||
+ | if ($(this).hasClass('active')) { | ||
+ | activeElement = $(this); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | |||
+ | var posLeft = activeElement.position().left; | ||
+ | var elementWidth = activeElement.width(); | ||
+ | posLeft = posLeft + elementWidth/2 -6; | ||
+ | if (activeElement.hasClass('has-sub')) { | ||
+ | posLeft -= 6; | ||
+ | } | ||
+ | |||
+ | $('#cssmenu #pIndicator').css('left', posLeft); | ||
+ | var element, leftPos, indicator = $('#cssmenu pIndicator'); | ||
+ | |||
+ | $("#cssmenu>ul>li").hover(function() { | ||
+ | element = $(this); | ||
+ | var w = element.width(); | ||
+ | if ($(this).hasClass('has-sub')) | ||
+ | { | ||
+ | leftPos = element.position().left + w/2 - 12; | ||
+ | } | ||
+ | else { | ||
+ | leftPos = element.position().left + w/2 - 6; | ||
+ | } | ||
+ | |||
+ | $('#cssmenu #pIndicator').css('left', leftPos); | ||
+ | } | ||
+ | , function() { | ||
+ | $('#cssmenu #pIndicator').css('left', posLeft); | ||
+ | }); | ||
+ | |||
+ | $('#cssmenu>ul').prepend('<li id="menu-button"><a>Menu</a></li>'); | ||
+ | $( "#menu-button" ).click(function(){ | ||
+ | if ($(this).parent().hasClass('open')) { | ||
+ | $(this).parent().removeClass('open'); | ||
+ | } | ||
+ | else { | ||
+ | $(this).parent().addClass('open'); | ||
+ | } | ||
+ | }); | ||
+ | </script> | ||
+ | <script type="text/javascript"> | ||
+ | $(document).ready(function(){ | ||
+ | $(document).on('click', '.show', function(){ | ||
+ | $('.toc').show(100); | ||
+ | $('.show').hide(); | ||
+ | }); | ||
+ | $(document).on('click', '.hide', function(){ | ||
+ | $('.toc').hide(); | ||
+ | $('.show').show(100); | ||
+ | }); | ||
+ | }); | ||
+ | </script> | ||
+ | <script type='text/javascript'> | ||
+ | $(document).ready(function() { | ||
+ | |||
+ | //Calculate the height of <header> | ||
+ | //Use outerHeight() instead of height() if have padding | ||
+ | var aboveHeight = $('#banner').height(); | ||
+ | |||
+ | //when scroll | ||
+ | $(window).scroll(function(){ | ||
+ | |||
+ | //if scrolled down more than the header’s height | ||
+ | if ( $(window).scrollTop() > aboveHeight ){ | ||
+ | |||
+ | // if yes, add “fixed” class to the <nav> | ||
+ | // add padding top to the #content | ||
+ | //(value is same as the height of the nav) | ||
+ | $('#cssmenu').addClass('fixed').next().css('padding-top','44'); | ||
+ | |||
+ | |||
+ | } else { | ||
+ | |||
+ | // when scroll up or less than aboveHeight, | ||
+ | //remove the “fixed” class, and the padding-top | ||
+ | $('#cssmenu').removeClass('fixed').next().css('padding-top','0'); | ||
+ | |||
+ | } | ||
+ | |||
+ | if ( $(window).scrollTop() > aboveHeight-14 ){ | ||
+ | $('#top-section').addClass('disp'); | ||
+ | } else{ | ||
+ | $('#top-section').removeClass('disp'); | ||
+ | } | ||
+ | }); | ||
+ | }); | ||
+ | |||
+ | </script> | ||
+ | |||
+ | |||
+ | </body> | ||
</html> | </html> |
Revision as of 16:22, 17 October 2014
Creating a Kill Switch
While other parts of our project were based around the idea of recycling waste material into useful products, some environmental concerns still remained, such as how to control the E. Coli in the event of a containment breach and minimize its impact to its surroundings. To alleviate these issues, we decided to insert a kill switch into our E. Coli as an added safety mechanism.
Utilizing the gene known as KillerRed (Bulina, 1), as well as a negative Tryptophan promoter (BBa_K588001), we were able to construct a basic kill switch. When the E. Coli is exposed to Tryptophan, the KillerRed gene is repressed, and the cells continue to grow and carry out normal function. However, when removed from a Tryptophan-rich system (ie. escaping containment and entering the general environment) the KillerRed gene is no longer repressed and quickly begins producing reactive oxygen species- ROS- when exposed to red spectrum light. These ROS cause rapid apoptosis, leading to mass cell death soon after the E. Coli enters an uncontrolled environment.
After constructing our Trp+KillerRed plasmid, we ran several experiments designed to test its effectiveness as a kill switch (see below). While our data did not show that all of our E. Coli was killed off via KillerRed, it did show that the gene had an affect, as plates grown from samples irradiated with steady white light for 30 minutes had significantly less colonies than those taken from samples not exposed to light.
Moving forward, we would like to study the Trp-KillerRed system in greater detail, by modelling out their function based on experimental data with the goal of optimizing the system. Reducing leakage and lag time of the kill switch would greatly increase its impact on the safety of the system.
1. Bulina, M., et. al. "A genetically encoded photosensitizer.” Nature Biotechnology, 95-99. 2005. October 2014.
Utilizing the gene known as KillerRed (Bulina, 1), as well as a negative Tryptophan promoter (BBa_K588001), we were able to construct a basic kill switch. When the E. Coli is exposed to Tryptophan, the KillerRed gene is repressed, and the cells continue to grow and carry out normal function. However, when removed from a Tryptophan-rich system (ie. escaping containment and entering the general environment) the KillerRed gene is no longer repressed and quickly begins producing reactive oxygen species- ROS- when exposed to red spectrum light. These ROS cause rapid apoptosis, leading to mass cell death soon after the E. Coli enters an uncontrolled environment.
After constructing our Trp+KillerRed plasmid, we ran several experiments designed to test its effectiveness as a kill switch (see below). While our data did not show that all of our E. Coli was killed off via KillerRed, it did show that the gene had an affect, as plates grown from samples irradiated with steady white light for 30 minutes had significantly less colonies than those taken from samples not exposed to light.
Moving forward, we would like to study the Trp-KillerRed system in greater detail, by modelling out their function based on experimental data with the goal of optimizing the system. Reducing leakage and lag time of the kill switch would greatly increase its impact on the safety of the system.
1. Bulina, M., et. al. "A genetically encoded photosensitizer.” Nature Biotechnology, 95-99. 2005. October 2014.