Team:CSU Fort Collins/Breakdown/
From 2014.igem.org
(Difference between revisions)
Line 1: | Line 1: | ||
+ | |||
{{CSS/Main}} | {{CSS/Main}} | ||
- | |||
<html> | <html> | ||
- | |||
- | < | + | <title>High-Value Product</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 84: | Line 577: | ||
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; | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
- | < | + | </head> |
- | |||
- | |||
- | |||
- | < | + | |
- | <li class= | + | <body style='margin:0'> |
- | + | ||
- | + | <div id='banner'><center><img src='https://static.igem.org/mediawiki/2014/5/50/Team-CSU_Plant.jpg' style='width:100%; margin-top:-150px'/> | |
- | + | </center></div> | |
- | + | ||
- | + | <div id='cssmenu'> | |
- | <li class= | + | <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><a href='/Team:CSU_Fort_Collins/KillSwitch/'><span>Kill Switch</span></a></li> | |
- | <li | + | </ul> |
- | + | </li> | |
- | <li class=" | + | <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 class='last'><a href='/Team:CSU_Fort_Collins/Sponsors/'><span>Sponsors</span></a></li> | |
- | + | </ul> | |
- | + | </li> | |
- | <li class= | + | <li class='has-sub' class='active'><a href='/Team:CSU_Fort_Collins/Notebook/'><span>Notebook</span></a> |
- | <li | + | <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/'><span>Biosensor</span></a> | ||
+ | <ul> | ||
+ | <li><a href="#"><span>June</span></a></li> | ||
+ | <li><a href="#"><span>July</span></a></li> | ||
+ | <li><a href='#'><span>August</span></a></li> | ||
+ | <li class='last'><a href="#"><span>September</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Notebook/Breakdown/'><span>Breakdown</span></a> | ||
+ | <ul> | ||
+ | <li><a href="#"><span>July</span></a></li> | ||
+ | <li><a href='#'><span>August</span></a></li> | ||
+ | <li class='last'><a href="#"><span>September</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li class='has-sub'><a href='/Team:CSU_Fort_Collins/Notebook/HVP/'><span>High-Value Product</span></a> | ||
+ | <ul> | ||
+ | <li><a href="#"><span>June</span></a></li> | ||
+ | <li><a href="#"><span>July</span></a></li> | ||
+ | <li><a href='#'><span>August</span></a></li> | ||
+ | <li class='last'><a href="#"><span>September</span></a></li> | ||
+ | </ul> | ||
+ | </li> | ||
+ | <li li class='has-sub'><a href='/Team:CSU_Fort_Collins/Notebook/KillSwitch/'><span>Kill Switch</span></a> | ||
+ | <ul> | ||
+ | <li><a href="#"><span>July</span></a></li> | ||
+ | <li><a href='#'><span>August</span></a></li> | ||
+ | <li class='last'><a href="#"><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><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>A Path for Breaking Down Spent Frying Oil</h1> | ||
+ | |||
+ | <div class="container"> | ||
+ | |||
+ | The starting point of our project was taking used frying oil and creating a common metabolic intermediate that the high value product team could then use. The best way to do this was to make use of a process the cell already performs. As one of the main components of frying oil is fatty acids, or molecules that can be broken down into fatty acids, the beta-oxidation pathway was the obvious choice. Beta-oxidation takes fatty acids and breaks them down, extracting energy, into the metabolic intermediate acetyl-CoA. Acetyl-CoA can be used by the cell in the Kreb’s cycle to create energy. It can also be used as the starting point in anabolic processes, like the process created by the high value product team. | ||
+ | |||
+ | We found that one of the main components of used frying oil is diacylglycerol (DAG). Therefore the first step would be to breakdown DAG into glycerol and two fatty acids. E. coli is unlikely to absorb DAG, it is too large and there are few, if any, transport mechanisms to move it into the cell. We therefore focused on secreted proteins. We found a lipase from Bacillus stearothermophilus called L1 that had a good record for breaking down DAGs found in the oils most commonly used for frying. The implementation of this lipase into a biobrick is a subject for continuing research. | ||
+ | |||
+ | The rate limiting step in beta-oxidation is the creation of acyl-CoA. In this first step fatty acids are turned into acyl-CoA with help from an enzyme called fatty acyl-CoA synthetase. This enzyme comes from a gene called FadD. FadD is regulated by FadR. As FadR also regulates many other aspects of fatty acid degradation we could not just knock it out. As a work around we upregulated FadD. FadR’s regulation of FadD is inactivated by acyl-CoA. By making more fatty acyl-CoA synthetase, more acyl-CoA is produced, lessening the regulation. Thus beta-oxidation as a whole is upregulated by just upregulating FadD. | ||
+ | In order to upregulate FadD we created a plasmid (see <a href='#fig1'>Figure 1</a> with a promoter, ribosome binding site (RBS) and the FadD gene sequence. We used biobrick part BBa_J04500, and IPTG inducible promoter with a RBS already in the biobrick backbone from our distribution kit. We used a colony PCR and specially designed primers to extract the FadD gene from the E. coli genome. Our primers added an Spe1 cut site and a Pst1 cut site to one end of the FadD genome and an Xba1 cut site to the other side. Using the Spe1 site on the promoter and the Xba1 site on the FadD sequence we ligated together to create an entire working plasmid. <br><br> | ||
+ | |||
+ | <img src='https://static.igem.org/mediawiki/2014/0/04/Team-CSU_FadD.jpg' style='width:200px'/><br> | ||
+ | <span id='#fig1'>Figure 1. Plasmid design for inducible FadD upregulation.</span><br><br> | ||
+ | |||
+ | |||
+ | |||
+ | We had hoped to be able to submit this part but ran out of time to finalize it before competition. A continuing area of research is to both optimize this part and replace the IPTG promoter with the sensor designed by our team. Thus when frying oil is present then the upregulation of beta-oxidation would occur as a result. | ||
<br><br> | <br><br> | ||
- | |||
- | |||
- | |||
- | |||
+ | <span id='source1'>1. Martin, J J Vincent, et al. <a href='http://www.nature.com/nbt/journal/v21/n7/full/nbt833.html'>“Engineering a mevalonate pathway in Escherichia coli for production of terpenoids.”</a> Nature biotechnology, 21. Web. 1 June 2003. June 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> | ||
+ | |||
+ | |||
+ | |||
+ | |||
+ | <img src='https://static.igem.org/mediawiki/2014/e/ee/Team-CSU_Brea.jpg' style='width:100%; margin:-150px'/> |
Revision as of 04:55, 15 October 2014
A Path for Breaking Down Spent Frying Oil
The starting point of our project was taking used frying oil and creating a common metabolic intermediate that the high value product team could then use. The best way to do this was to make use of a process the cell already performs. As one of the main components of frying oil is fatty acids, or molecules that can be broken down into fatty acids, the beta-oxidation pathway was the obvious choice. Beta-oxidation takes fatty acids and breaks them down, extracting energy, into the metabolic intermediate acetyl-CoA. Acetyl-CoA can be used by the cell in the Kreb’s cycle to create energy. It can also be used as the starting point in anabolic processes, like the process created by the high value product team.
We found that one of the main components of used frying oil is diacylglycerol (DAG). Therefore the first step would be to breakdown DAG into glycerol and two fatty acids. E. coli is unlikely to absorb DAG, it is too large and there are few, if any, transport mechanisms to move it into the cell. We therefore focused on secreted proteins. We found a lipase from Bacillus stearothermophilus called L1 that had a good record for breaking down DAGs found in the oils most commonly used for frying. The implementation of this lipase into a biobrick is a subject for continuing research.
The rate limiting step in beta-oxidation is the creation of acyl-CoA. In this first step fatty acids are turned into acyl-CoA with help from an enzyme called fatty acyl-CoA synthetase. This enzyme comes from a gene called FadD. FadD is regulated by FadR. As FadR also regulates many other aspects of fatty acid degradation we could not just knock it out. As a work around we upregulated FadD. FadR’s regulation of FadD is inactivated by acyl-CoA. By making more fatty acyl-CoA synthetase, more acyl-CoA is produced, lessening the regulation. Thus beta-oxidation as a whole is upregulated by just upregulating FadD.
In order to upregulate FadD we created a plasmid (see Figure 1 with a promoter, ribosome binding site (RBS) and the FadD gene sequence. We used biobrick part BBa_J04500, and IPTG inducible promoter with a RBS already in the biobrick backbone from our distribution kit. We used a colony PCR and specially designed primers to extract the FadD gene from the E. coli genome. Our primers added an Spe1 cut site and a Pst1 cut site to one end of the FadD genome and an Xba1 cut site to the other side. Using the Spe1 site on the promoter and the Xba1 site on the FadD sequence we ligated together to create an entire working plasmid.
Figure 1. Plasmid design for inducible FadD upregulation.
We had hoped to be able to submit this part but ran out of time to finalize it before competition. A continuing area of research is to both optimize this part and replace the IPTG promoter with the sensor designed by our team. Thus when frying oil is present then the upregulation of beta-oxidation would occur as a result.
1. Martin, J J Vincent, et al. “Engineering a mevalonate pathway in Escherichia coli for production of terpenoids.” Nature biotechnology, 21. Web. 1 June 2003. June 2014.
Figure 1. Plasmid design for inducible FadD upregulation.
We had hoped to be able to submit this part but ran out of time to finalize it before competition. A continuing area of research is to both optimize this part and replace the IPTG promoter with the sensor designed by our team. Thus when frying oil is present then the upregulation of beta-oxidation would occur as a result.
1. Martin, J J Vincent, et al. “Engineering a mevalonate pathway in Escherichia coli for production of terpenoids.” Nature biotechnology, 21. Web. 1 June 2003. June 2014.
<img src='https://static.igem.org/mediawiki/2014/e/ee/Team-CSU_Brea.jpg' style='width:100%; margin:-150px'/>