Team:CU-Boulder

From 2013.igem.org

(Difference between revisions)
Line 1: Line 1:
-
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
Line 5: Line 4:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="MediaWiki 1.16.0" />
<meta name="generator" content="MediaWiki 1.16.0" />
-
<link rel="alternate" type="application/x-wiki" title="Edit" href="/wiki/index.php?title=Team:Colorado_State&amp;action=edit" />
+
<link rel="alternate" type="application/x-wiki" title="Edit" href="/wiki/index.php?title=Team:Calgary&amp;action=edit" />
-
<link rel="edit" title="Edit" href="/wiki/index.php?title=Team:Colorado_State&amp;action=edit" />
+
<link rel="edit" title="Edit" href="/wiki/index.php?title=Team:Calgary&amp;action=edit" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2012.igem.org (en)" />
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2012.igem.org (en)" />
-
<link title="Creative Commons" type="application/rdf+xml" href="/wiki/index.php?title=Team:Colorado_State&amp;action=creativecommons" rel="meta" />
+
<link title="Creative Commons" type="application/rdf+xml" href="/wiki/index.php?title=Team:Calgary&amp;action=creativecommons" rel="meta" />
<link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
<link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
-
<link rel="alternate" type="application/atom+xml" title="2012.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" /> <title>Team:Colorado State - 2012.igem.org</title>
+
<link rel="alternate" type="application/atom+xml" title="2012.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" /> <title>Team:Calgary - 2012.igem.org</title>
<style type="text/css" media="screen, projection">/*<![CDATA[*/
<style type="text/css" media="screen, projection">/*<![CDATA[*/
@import "/wiki/skins/common/shared.css?270";
@import "/wiki/skins/common/shared.css?270";
Line 38: Line 37:
wgCanonicalSpecialPageName=false,
wgCanonicalSpecialPageName=false,
wgNamespaceNumber=0,
wgNamespaceNumber=0,
-
wgPageName="Team:Colorado_State",
+
wgPageName="Team:Calgary",
-
wgTitle="Team:Colorado State",
+
wgTitle="Team:Calgary",
wgAction="view",
wgAction="view",
-
wgArticleId=1229,
+
wgArticleId=1092,
wgIsArticle=true,
wgIsArticle=true,
wgUserName="Lalondej",
wgUserName="Lalondej",
Line 48: Line 47:
wgContentLanguage="en",
wgContentLanguage="en",
wgBreakFrames=false,
wgBreakFrames=false,
-
wgCurRevisionId=300995,
+
wgCurRevisionId=299478,
wgVersion="1.16.0",
wgVersion="1.16.0",
wgEnableAPI=true,
wgEnableAPI=true,
Line 82: Line 81:
</head>
</head>
-
<body              class="mediawiki  ltr ns-0 ns-subject page-Team_Colorado_State">
+
<body              class="mediawiki  ltr ns-0 ns-subject page-Team_Calgary">
   <div id="globalWrapper">
   <div id="globalWrapper">
Line 99: Line 98:
    <ul>
    <ul>
                    <li  
                    <li  
-
                 class='selected'       ><a href="/Team:Colorado_State">Page              </a></li>
+
                 class='selected'       ><a href="/Team:Calgary">Page              </a></li>
               <li  
               <li  
-
                    ><a href="/Talk:Team:Colorado_State">Discussion              </a></li>
+
                class='new'       ><a href="/wiki/index.php?title=Talk:Team:Calgary&amp;action=edit&amp;redlink=1">Discussion              </a></li>
               <li  
               <li  
-
                     ><a href="/wiki/index.php?title=Team:Colorado_State&amp;action=edit">Edit              </a></li>
+
                     ><a href="/wiki/index.php?title=Team:Calgary&amp;action=edit">Edit              </a></li>
               <li  
               <li  
-
                     ><a href="/wiki/index.php?title=Team:Colorado_State&amp;action=history">History              </a></li>
+
                     ><a href="/wiki/index.php?title=Team:Calgary&amp;action=history">History              </a></li>
               <li  
               <li  
-
                     ><a href="/Special:MovePage/Team:Colorado_State">Move              </a></li>
+
                     ><a href="/Special:MovePage/Team:Calgary">Move              </a></li>
               <li  
               <li  
-
                     ><a href="/wiki/index.php?title=Team:Colorado_State&amp;action=watch">Watch              </a></li>
+
                     ><a href="/wiki/index.php?title=Team:Calgary&amp;action=watch">Watch              </a></li>
               <li style='color:#808080;cursor:default'>teams</li>
               <li style='color:#808080;cursor:default'>teams</li>
    </ul>
    </ul>
Line 117: Line 116:
    <ul>
    <ul>
                 <li id="pt-userpage"><a href="/User:Lalondej" title="Your user page [.]" accesskey="." class="new">Lalondej</a></li>                              <li id='pt-preferences'><a href='https://igem.org/User_Information' title='My account'>My account</a></li>
                 <li id="pt-userpage"><a href="/User:Lalondej" title="Your user page [.]" accesskey="." class="new">Lalondej</a></li>                              <li id='pt-preferences'><a href='https://igem.org/User_Information' title='My account'>My account</a></li>
-
                           <li id="pt-logout"><a href="/wiki/index.php?title=Special:UserLogout&amp;returnto=Team:Colorado_State" title="Log out">Log out</a></li>     </ul>
+
                           <li id="pt-logout"><a href="/wiki/index.php?title=Special:UserLogout&amp;returnto=Team:Calgary" title="Log out">Log out</a></li>     </ul>
</div><!-- end right menubar -->
</div><!-- end right menubar -->
Line 130: Line 129:
     <div id="content">
     <div id="content">
<a name="top" id="top"></a>
<a name="top" id="top"></a>
-
<h1 class="firstHeading">Team:Colorado State</h1>
+
<h1 class="firstHeading">Team:Calgary</h1>
<div id="bodyContent">
<div id="bodyContent">
<h3 id="siteSub" class='noprint'>From 2012.igem.org</h3>
<h3 id="siteSub" class='noprint'>From 2012.igem.org</h3>
Line 139: Line 138:
<p>
<p>
<!--
<!--
 +
Currently unable to implement the CSS switching due to the stupidity of the wiki. Will work on other things instead.
 +
New header structure
 +
-->
 +
<head>
 +
<!--CSS styles: global-->
 +
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&amp;ctype=text/css" />
-
***************************************************************
+
<!--desktop-->
-
***************************************************************
+
-
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************
+
-
***************************************************************
+
-
***************************************************************
+
-
2012 Colorado State iGEM Team Wiki Site
+
<link rel='stylesheet' type='text/css' href='https://2012.igem.org/Team:Calgary/static/basicpagedesktop.css?action=raw&amp;ctype=text/css' />
-
by Ethan Ho - Ethan.N.Ho@Gmail.com
+
<script type="text/javascript">
-
All code is original, except the dropdown menu, which is modified
+
jQuery(document).ready(function($){
-
code.
+
-
Do not copy or in any way, shape, or form, use any of this code
+
//eliminate jsnotice
-
without the explicit permission of Ethan Ho (reachable by above
+
$('#jsnotice').hide();
-
E-mail). I'll probably say yes.
+
-
Be a good person. Obey the rules.
+
//prepend menu icon
 +
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
 +
 +
//toggle nav
 +
$("#menu-icon").click(function(){
 +
$("#nav").slideToggle('fast');
 +
$(this).toggleClass("active");
-
Peace out,
+
});
 +
 +
//hide url bar
 +
window.scrollTo(0, 1);
 +
-
Ethan
 
 +
});
 +
</script>
-
-->
+
<!--switching function: thanks to http://www.digital-web.com/articles/strategies_for_css_switching/-->
-
<head>
+
-
<style type="text/css">
+
-
.editbutton {
+
<script type="text/javascript">
-
visibility: hidden;
+
-
width: 0;
+
-
height: 0;
+
-
}
+
-
/*
+
  var _gaq = _gaq || [];
-
If you want to edit each individual page, uncomment the following
+
  _gaq.push(['_setAccount', 'UA-32774032-1']);
-
line of code to reveal the handy "Edit page" buttons!
+
  _gaq.push(['_trackPageview']);
-
*/
+
-
.editbutton {visibility: visible; width: auto; height: auto;}
+
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
-
/*********NOTES*********
+
</script>
-
-Colors
+
</head>
-
-DC8800-Medium
+
-
-E9B300-Medium/Light
+
-
-925F00-Dark
+
-
-F1C900-Light
+
-
-BDAF77-Créme/white
+
-
-423600-Gold with grey overlay (27%)
+
-
*/
+
<body>
-
/*********HIDE iGEM STUFF*********/
+
<header>
 +
<!--
 +
<a id="css-full" href="#default">Full View</a>
 +
<a id="css-mobi" href="#mobile">Mobile View</a>
 +
-->
 +
<div id="headerimage"><img src="https://static.igem.org/mediawiki/2012/f/fc/UCalgary2012_MainHeaderImage.png"></img></div>
 +
<a id="logo" href="https://2012.igem.org/Team:Calgary"><img src="https://static.igem.org/mediawiki/2012/4/48/UCalgary2012_White_Low-Res_Official_Logo.png"></img></a>
 +
<div id="nav-wrap">
 +
<ul id="nav">
 +
<li><a href="https://2012.igem.org/Team:Calgary" id="homelink">Home</a></li>
 +
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Team" id="teamlink">Team</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Team">Members</a></li>
 +
<li><a class="dropheader" href="http://ung.igem.org/Team.cgi?id=902">Official Profile</a></li>
 +
<li><a class="dropheader" href="https://2012.igem.org/Team:Calgary/Team/AbouttheUniversity">The University</a></li>
 +
<li><a class="dropheader" href="https://2012.igem.org/Team:Calgary/Team/Outtakes">Outtakes</a></li>
 +
<li><a class="dropheader" href="https://2012.igem.org/Team:Calgary/ContactUs">Contact Us</a></li>
 +
</ul>
 +
</li>
 +
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Project" id="projectlink">Project</a>
 +
<ul>
 +
<li>
 +
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project">Overview</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/DataPage">Data Page</a></li><li><a href="https://2012.igem.org/Team:Calgary/Project/Accomplish">Accomplishments</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/Post-Regionals">Post-Regionals</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices">Human Practices</a>
 +
<ul>
 +
  <li><a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Collaborations">Initiative</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Interviews">Interviews</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Design">Design</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch">Killswitch</a></li>
 +
<li><a style="margin:0 -1em 0 1em;" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch/Regulation">Regulation</a></li>
 +
<li><a style="margin:0 -1em 0 1em;" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch/KillGenes">Kill Genes</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Safety">Safety</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project/FRED">FRED</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/FRED/Detecting">Toxin Sensing</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/FRED/Reporting">Electroreporting</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/FRED/Modelling">Modelling</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/FRED/Prototype">Device Prototype</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project/OSCAR">OSCAR</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Decarboxylation">Decarboxylation</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/CatecholDegradation">Decatecholization</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/FluxAnalysis">Flux Analysis</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Bioreactor">Bioreactor</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Upgrading">Upgrading</a></li>
 +
<li><a style="margin:0 -1em 0 1em;"href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Desulfurization">Desulfurization</a></li>
 +
<li><a style="margin:0 -1em 0 1em;"href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Denitrogenation">Denitrogenation</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/Synergy">Synergy</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/References">References</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/Attributions">Attributions</a></li>
-
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {
+
</ul>
-
z-index: 1;
+
</li>
-
position: absolute;
+
<li><a href="https://2012.igem.org/Team:Calgary/Parts" id="partslink">Parts</a></li>
-
top: 0;
+
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Notebook" id="notebooklink">Notebook</a>
-
left: 0;
+
<ul>
-
visibility: hidden;
+
<li><a href="https://2012.igem.org/Team:Calgary/Notebook">Journal</a></li>
-
width: 0;
+
<li><a href="https://2012.igem.org/Team:Calgary/Notebook/Protocols">Protocols</a></li>
-
height: 0;
+
</ul>
-
border: none;
+
</li>
-
}
+
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Outreach" id="outreachlink">Outreach</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/VideoGame">LAB ESCAPE!</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/Spark">Spark Science</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/MindsInMotion">Minds in Motion</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/Blog">Blog Posts</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/TEDxCalgary">TEDxCalgary</a></li>
 +
<li><a href="http://twitter.com/iGEMCalgary" target="_blank">Follow Us!</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Sponsors" id="sponsorslink">Sponsors</a></li>
 +
<li><a href="https://2012.igem.org" target="_blank">iGEM</a></li>
 +
</ul>
-
/*********PAGE FORMATTING*********/
+
</div>
 +
</header>
-
#globalWrapper *, * {
 
-
border-spacing: 0;
 
-
border-collapse: collapse;
 
-
padding: 0;
 
-
margin: 0;
 
-
margin-left: 0;
 
-
margin-top: 0;
 
-
color: #CCC;
 
-
}
 
-
body {
+
</body>
-
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;
+
-
background-size: 100% 100%;
+
-
height: 100%;
+
-
width: 100%;
+
-
}
+
-
#content {
+
</p><p>
-
position: relative;
+
<!--
-
top: -10px;
+
Completed: Epic Box and all rollovers associated with the box.
-
margin-left: auto;
+
Change text in Epic Box to each icon.
-
margin-right: auto;
+
-
    margin-bottom: 100px;
+
-
padding: 0;
+
-
width: 800px;
+
-
height: auto;
+
-
border: none;
+
-
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;
+
-
+
-
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/
+
-
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
+
-
}
+
-
#footer {
+
To do: Finish main page
-
position: absolute;
+
-->
-
width: 100%;
+
<head>
-
bottom: 0;
+
<!--CSS styles: global-->
-
z-index: 1;
+
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&amp;ctype=text/css" />
-
}
+
-
#content_main {
+
<style>
-
padding: 40px;
+
/*======
-
padding-top: 0;
+
Desktop Styling
 +
======*/
 +
 +
/***Body styling***/
 +
h1{
 +
font-size: 2.5em;
}
}
-
 
+
h2{
-
#side_bar {
+
font-size: 1.8em;
-
position: fixed;
+
-
top: 150px;
+
-
right: 0;
+
-
width: 200px;
+
-
height: 250px;
+
-
z-index: 4;
+
-
cursor: pointer;
+
-
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;
+
-
background-size: 100% 100%;
+
}
}
-
#side_bar:hover {
+
#box1{
-
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;
+
width: 968px;
-
background-size: 100% 100%;
+
margin-top: -8px;
 +
background: threedface;
 +
float: left;
 +
padding-bottom: 20px;
 +
margin-bottom: 13px;
}
}
 +
#box1 h2{
 +
padding: 20px 20px 20px 20px;
 +
}
 +
#box1 p{
 +
padding: 0px 20px 0px 20px;
 +
font-size: 1.1em;
 +
}
-
/*********CONTENT_MAIN FORMATTING*********/
+
#FredOscarFlag{
 +
display: block;
 +
float: left;
 +
width: 250px;
 +
height: 274px;
 +
background: url('https://static.igem.org/mediawiki/2012/0/0b/UCalgary2012_FRED_and_OSCAR_Main_Page.png');
 +
background-position: top;
 +
margin: 15px;
 +
}
 +
#FredOscarFlag:hover{
 +
background-position: bottom;
 +
}
 +
-
#content_main a {
+
#box2{
-
font-weight: bold;
+
width: 968px;
-
color: #F1C900;
+
background: #C68DD8;
-
text-decoration: none;
+
float: left;
 +
margin-bottom: 13px;
}
}
-
 
+
#box2 h2{
-
#content_main a:hover {
+
padding: 20px 20px 20px 20px;
-
text-decoration: underline;
+
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;
}
}
-
#content_main h1, #content_main  h2, #content_main  h3, #content_main  h4, #content_main  h5 {
+
#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;
margin-bottom: 12px;
-
padding: 12px;
 
-
border: none;
 
-
border-bottom: solid 1px #CCC;
 
-
line-height: 120%;
 
}
}
-
 
+
.threeboxes a, .threeboxes a div{
-
#content_main img {
+
width: 320px;
-
border: 2px solid #CCC;
+
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;
 +
}
-
#content_main ol, #content_main ul {
+
</style>
-
margin-left: 50px;
+
-
}
+
-
#content_main ul {
+
<script>
-
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);
+
jQuery(document).ready(function($){
-
}
+
-
#content_main td {
+
//eliminate jsnotice
-
padding: 10px;
+
$('#jsnotice').hide();
-
width: 50%;
+
-
}
+
-
#content_main table, #content_main th, #content_main td {
+
-
background: none;
+
/*epic box info functionality*/
-
border: none;
+
//small icons
-
}
+
$('#boximgcontainer .iconbox').hover(
 +
function(){
 +
var className = $(this).attr('class').split(" ");
 +
var box = className[0];
 +
clearinfo();
 +
$('#boxinfo div.' + box).show();
 +
},
 +
function(){
 +
clearinfo();
 +
$('#boxinfo_default').show();
 +
});
 +
//large icons
 +
$('.imgbox').hover(
 +
function(){
 +
var id = $(this).parent().parent().attr('id');
 +
clearinfo();
 +
$('#boxinfo div.' + id).show();
 +
},
 +
function(){
 +
clearinfo();
 +
$('#boxinfo_default').show();
 +
});
 +
 +
/*epic box FRED/OSCAR blank box disappearance*/
 +
$('#bluebox').hover(
 +
function(){
 +
$('.gblank').hide();
 +
$('.bblank').hide();
 +
},
 +
function(){
 +
$('.gblank').show();
 +
$('.bblank').show();
 +
});
 +
 +
$('#greenbox').hover(
 +
function(){
 +
$('.gblank').hide();
 +
$('.bblank').hide();
 +
},
 +
function(){
 +
$('.gblank').show();
 +
$('.bblank').show();
 +
});
 +
 +
});
-
#content_main table * {
+
function clearinfo(){
-
color: #CCC;
+
$('#boxinfo div').hide();
}
}
 +
</script>
 +
</head>
-
/*********SLIDESHOW*********/
+
<body>
-
#slideshow {
+
<div id="box1" align="justify">
-
position: relative;
+
<a href="https://2012.igem.org/Team:Calgary/Project/Post-Regionals" id="FredOscarFlag">
-
top: 0;
+
-
left: 0;
+
</a>
-
width: 100%;
+
<h2>Detect and Destroy: Building FRED and OSCAR</h2>
-
height: 270px;
+
<p><b>Tailings ponds</b> are large bodies of water containing <b>toxic compounds</b> that accumulate as a byproduct of the oil extraction process in the oil sands of northern Alberta. These toxic and corrosive compounds are a potential <b>environmental and economic concern</b> to Alberta and to other areas. The University of Calgary 2012 iGEM team aims to develop a collection of toxin-sensing and degrading organisms <b>to detect and destroy (bioremediate) the toxins</b>, turning them into useable <b>hydrocarbons</b>.</p>
-
overflow: hidden;
+
<p><b>FRED and OSCAR</b> are the two projects we are working on this year. Take a look at the descriptions below to learn more!</p>
-
}
+
-
.slide {
+
</div>
-
position: absolute;
+
-
right: 0;
+
-
float: right;
+
-
width: auto;
+
-
height: 100%;
+
-
}
+
-
/*********DROPDOWN CSS**********/
+
<div class="threeboxes">
 +
<a id="greybox4" href="http://www.youtube.com/watch?v=KHhswxo6xow" style="margin-right:4px;">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/02/UCalgary2012_ThreeBoxMusic.png"></img>
 +
<h2>iGEM Style!</h2>
 +
<p>Take a look at our music video--sung and produced by our very own members--that's taking the iGEM world by storm! </p>
 +
</div>
 +
</a>
 +
<a id="greybox5" href="https://2012.igem.org/Team:Calgary/Project/Synergy">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/2/20/UCalgary2012_ThreeBoxSynergy.png"></img>
 +
<h2>Synergy</h2>
 +
<p>We have lots of new data since Regionals! Click here to see how we brought the three aspects of our project together!</p>
 +
</div>
 +
</a>
 +
<a id="greybox6" href="http://www.youtube.com/watch?v=vluDpf4ao6c" style="margin:0;">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/b/b1/UCalgary2012_ThreeBoxFilm.png"></img>
 +
<h2>Intro Video</h2>
 +
<p>Click here to see the introductory video we played at the beginning of our Jamboree presentations!</p>
 +
</div>
 +
</a>
 +
 +
</div>
-
#menu_bar td {
+
<!--ZE EPIC BOX-->
-
width: 33%;
+
<div id="epicbox">
-
}
+
<div id="boximgcontainer">
 +
<div id="orangebox">
 +
<a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices">
 +
<div class="imgbox">
 +
<img src="https://static.igem.org/mediawiki/2012/9/9e/UCalgary2012_EpicBoxHP_-_Blank.png"></img>
 +
</div>
 +
 +
<div class="oblank">
 +
</div>
 +
 +
<div class="iconcontainer">
 +
<a class="obox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Collaborations">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_IconHP8.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Interviews">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_IconHP3.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Design">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/1/1c/UCalgary2012_IconHP4.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/6/65/UCalgary2012_IconHP2.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox5 iconbox" href="https://2012.igem.org/Team:Calgary/Safety">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/c/c9/UCalgary2012_IconHP5.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox6 iconbox" href="https://2012.igem.org/Team:Calgary/Outreach">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0e/UCalgary2012_IconHP6.png"></img>
 +
</div>
 +
</a>
 +
</div>
-
#menu_bar {
+
-
width: 100%;
+
</a>
-
overflow: hidden;
+
</div>
-
color: #CCC; /*******COLOR*******/
+
-
text-align: center;
+
<div id="greenbox">
-
background: none;
+
<a href="https://2012.igem.org/Team:Calgary/Project/FRED">
-
margin: 0;
+
<div class="imgbox">
-
}
+
<img src="https://static.igem.org/mediawiki/2012/4/47/UCalgary2012_EpicBoxFRED_-_Blank.png"></img>
 +
</div>
 +
 +
<div class="gblank">
 +
</div>
 +
 +
<div class="iconcontainer">
 +
<a class="gbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Detecting">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0a/UCalgary2012_IconFRED1.png"></img>
 +
</div>
 +
</a>
 +
<a class="gbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Reporting">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/8/8d/UCalgary2012_IconFRED2.png"></img>
 +
</div>
 +
</a>
 +
<a class="gbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Modelling">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/c/c0/UCalgary2012_IconFRED3.png"></img>
 +
</div>
 +
</a>
 +
<a class="gbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Prototype">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/a/a7/UCalgary2012_IconFRED4.png"></img>
 +
</div>
 +
</a>
 +
</div>
 +
</a>
 +
</div>
 +
 +
<div id="bluebox">
 +
<a href="https://2012.igem.org/Team:Calgary/Project/OSCAR">
 +
<div class="imgbox">
 +
<img src="https://static.igem.org/mediawiki/2012/9/94/UCalgary2012_EpicBoxOSCAR_-_Blank.png"></img>
 +
</div>
 +
 +
<div class="bblank">
 +
</div>
 +
 +
<div class="iconcontainer">
 +
<a class="bbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Decarboxylation">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/f/f1/UCalgary2012_IconOSCAR1.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/CatecholDegradation">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0c/UCalgary2012_IconOSCAR4.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/FluxAnalysis">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/4/40/UCalgary2012_IconOSCAR6.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Bioreactor">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/3/3e/UCalgary2012_IconOSCAR5.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox5 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Upgrading">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/4/44/UCalgary2012_IconOSCAR7.png"></img>
 +
</div>
 +
</a>
 +
</div>
 +
</a>
 +
</div>
 +
</div>
 +
<div id="boxinfo">
 +
<div id="boxinfo_default">
 +
<h2>The Concept</h2>
 +
<p>Our project consists of three major components: FRED, OSCAR, and the overarching Human Practices considerations informing their design. Click on the boxes to your left to learn more about what iGEM Calgary has done so far!</p>
 +
</div>
 +
<div class="orangebox">
 +
<h2>Human Practices</h2>
 +
<p>Great consideration was put into our Human Practices component this year, as safety was the guiding principle behind the design of FRED and OSCAR.  iGEM Calgary has undertaken many human outreach initiatives this year. Roll over the boxes to see each of them!</p>
 +
</div>
 +
<div class="obox1">
 +
<h2>Initiative</h2>
 +
<p>We took the initiative with the oil sands industry and established a dialogue between industry experts, academics, and government representatives. Through these talks a roadmap for the use of synthetic biology in the oil sands was established, focusing on biosensing and bioremediation.</p>
 +
</div>
 +
<div class="obox2">
 +
<h2>Interviews</h2>
 +
<p>As an undergraduate team, we spoke with experts in various fields, including the oil industry, tailings pond management, biotechnology, law, and politics to gather various opinions on our project. How useful is synthetic biology in a tailings pond environment? What design considerations should we include in our project to improve security? What legal policies must we consider before implementing our project?</p>
 +
</div>
 +
<div class="obox3">
 +
<h2>Design Considerations</h2>
 +
<p>Since safety is the driving force behind our project, we need to ensure the physical design of our biosensor and bioreactor would contain and manage the bacteria to minimize the possibility of their escape. We needed to build devices that would ensure the safety of both the user and the outside environment during their use. Click here to learn more!</p>
 +
</div>
 +
<div class="obox4">
 +
<h2>Killswitch</h2>
 +
<p>Both FRED and OSCAR are designed to operate within enclosed environments. However, since safety is our highest priority, we decided to design and implement a killswitch in both FRED and OSCAR as an extra layer of security. The killswitch aims to destroy the genome using two powerful non-specific nucleases in the unlikely event that bacteria escape into the environment. Click here to learn more!</p>
 +
</div>
 +
<div class="obox5">
 +
<h2>Safety</h2>
 +
<p>Click here for our safety page! Here we detail all the safety procedures, certifications, and approvals we have from our University to allow us to work this summer.</p>
 +
</div>
 +
<div class="obox6">
 +
<h2>Community Outreach</h2>
 +
<p>iGEM Calgary partnered with a number of different associations to engage the general public about science and synthetic biology. Click here to see what we've done this summer!</p>
 +
</div>
 +
<div class="greenbox">
 +
<h2>FRED</h2>
 +
<p>FRED is our <b>F</b>unctional, <b>R</b>obust <b>E</b>lectrochemical <b>D</b>etector. FRED is responsible for detecting and measuring naphthenic acids (NAs) and is able to produce an electrochemical signal that can be measured. FRED can be used to measure toxins in tailings pond samples within minutes, without having to ship them to an off-site lab for testing. Click on FRED to learn more!</p>
 +
</div>
 +
<div class="gbox1">
 +
<h2>Detecting</h2>
 +
<p>FRED is our star detective, working around the clock to detect toxins roaming freely in tailings pond water. FRED is known for being a little unorthodox in his methods namely by using a measurable electrochemical signal rather than colored or fluorescent reporters. Using his transposon library FRED gets clues about the genetic elements that will activate in the presence of toxins. </p>
 +
</div>
 +
<div class="gbox2">
 +
<h2>Reporting</h2>
 +
<p>Once FRED finds the toxins he wastes no time exposing them. Building upon last year's single output electrochemical system FRED now uses the new triple output system to report the toxins. This novel approach to electrochemical reporting means that FRED is as good as he is fast. </p>
 +
</div>
 +
<div class="gbox3">
 +
<h2>Modelling</h2>
 +
<p>Aside from being a stellar detective FRED also dabbles in the art of mathematics and modelling. These skills are used to model the behavior of the system. The results from the modelling helped guide the wet lab experiments which in turn gave new data to refine the model.</p>
 +
</div>
 +
<div class="gbox4">
 +
<h2>Prototyping</h2>
 +
<p>FRED gets a lot of information so he stays on top of things with the help of his handy dandy physical device to test the sample and software to interpret the raw data. The device has been <b>prototyped</b> and has an accompanying software platform that works with FRED to detect the toxins. </p>
 +
</div>
 +
<div class="bluebox">
 +
<h2>OSCAR</h2>
 +
<p>OSCAR is our <b>O</b>ptimized <b>S</b>ystem for <b>C</b>arboxylic <b>A</b>cid <b>R</b>emediation. OSCAR is responsible for converting toxins such as catechol and naphthenic acids into hydrocarbons. OSCAR is also capable of removing nitrogen and sulfur groups to further purify the hydrocarbons produced. Click on OSCAR to learn more!</p>
 +
</div>
 +
<div class="bbox1">
 +
<h2>Decarboxylation</h2>
 +
<p>In order to convert tailings pond toxins fully into hydrocarbons, we need to remove carboxylic acid groups. We are using the PetroBrick, from the University of Washington's 2011 iGEM team, to cleave off carboxylic acids to produce hydrocarbons. Click here to learn more!</p>
 +
</div>
 +
<div class="bbox2">
 +
<h2>Catechol Degradation</h2>
 +
<p>Catechol is a common toxic compound found in tailings ponds. We looked into giving OSCAR the ability to degrade catechol, which would also cleave ring structures of toxins.</p>
 +
</div>
 +
<div class="bbox3">
 +
<h2>Flux-Variability Analysis</h2>
 +
<p>We wanted to optimize OSCAR's output of hydrocarbons, so we computationally modelled how we can add particular metabolites to the growth media to increase hydrocarbon output. Click here to see what we found out!</p>
 +
</div>
 +
<div class="bbox4">
 +
<h2>Bioreactor</h2>
 +
<p>OSCAR needed a home, so we developed an enclosed bioreactor system where toxins can be converted into hydrocarbons for output. Click here to see how we designed the bioreactor!</p>
 +
</div>
 +
<div class="bbox5">
 +
<h2>Upgrading</h2>
 +
<p>Nitrogen and sulfur heteroatoms can produce nasty airborne pollutants when burned, cause acid rain and acid deposition, and can damage valuable catalysis mechanisms involved in fuel processing and emissions control. OSCAR can remove these atoms trapped in the rings. Click here to see how!</p>
 +
</div>
 +
</div>
 +
</div>
-
#menu_bar dt {
+
<div class="threeboxes">
-
text-align: center;
+
<a id="greybox1" href="https://2012.igem.org/Team:Calgary/Team">
-
width: 100%;
+
<div>
-
padding: 8px;
+
<img src="https://static.igem.org/mediawiki/2012/b/b8/UCalgary2012_ThreeBoxTeam.png"></img>
-
font-weight: bold;
+
<h2>Team</h2>
-
cursor: pointer;
+
<p>Who are we? What did we do? Where is this Calgary place, anyway? Click here to read our team profiles!</p>
-
background: #925F00; /*******COLOR*******/
+
</div>
-
}
+
</a>
 +
<a id="greybox2" href="https://2012.igem.org/Team:Calgary/Project/DataPage">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/9/92/UCalgary2012_ThreeBoxData.png"></img>
 +
<h2>Data Page</h2>
 +
<p>Click here to see a summary of all our data collected so far! Details on FRED and OSCAR can be found above.</p>
 +
</div>
 +
</a>
 +
<a id="greybox3" href="https://2012.igem.org/Team:Calgary/Notebook">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_ThreeBoxNotebook.png"></img>
 +
<h2>Notebook</h2>
 +
<p>Here is a record of our summer's work. We also want to thank everybody who helped us along the way!</p>
 +
</div>
 +
</a>
 +
</div>
-
#menu_bar dd {
 
-
position: absolute;
 
-
overflow: hidden;
 
-
width: 267px;
 
-
display: none;
 
-
background: #E9B300; /*******COLOR*******/
 
-
z-index: 4;
 
-
opacity: 0;
 
-
}
 
-
#menu_bar ul {
 
-
width: 263px;
 
-
border: 2px solid #925F00; /*******COLOR*******/
 
-
list-style: none;
 
-
border-top: none;
 
-
}
 
-
#menu_bar li {
 
-
display: inline;
 
-
}
 
-
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {
 
-
display: block;
 
-
padding: 5px;
 
-
text-decoration: none;
 
-
width: 100%;
 
-
color: #925F00; /*******COLOR*******/
 
-
border-top: 1px solid #925F00; /*******COLOR*******/
 
-
}
 
-
#menu_bar a:hover {
+
<div id="sponsorsbox">
-
background: #F1C900; /*******COLOR*******/
+
<h2>Thanks to Our Sponsors!</h2>
-
}
+
<table>
 +
<tr>
 +
<td><a href="http://www.ucalgary.ca/bhsc/node/16" target="_blank"><img style="width: 284px;" src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_Logo_O%27Brien_Centre.png"></img></a></td>
 +
<td><a href="http://www.ucalgary.ca" target="_blank"><img style="width: 166px;" src="https://static.igem.org/mediawiki/2012/4/46/UCalgary2012_Logo_U_of_C_Vertical.png"></img></a></td>
 +
<td><a href="http://www.albertatechfutures.ca" target="_blank"><img style="width: 234px;" src="https://static.igem.org/mediawiki/2012/7/7f/UCalgary2012_Logo_AITF.png"></img></a></td>
 +
</tr>
 +
</table>
 +
<table>
 +
<tr>
 +
<td><a href="http://bio.ucalgary.ca/" target="_blank"><img style="width: 290px;" src="https://static.igem.org/mediawiki/2012/4/45/UCalgary2012_BioSci_Logo.png"></img></a></td>
 +
<td><a href="http://enel.ucalgary.ca/" target="_blank"><img style="width: 290px;" src="https://static.igem.org/mediawiki/2012/9/9c/UCalgary2012_Schulich_Electric_Computer_Logo.png"></img></a></td>
 +
<td><a href="http://www.ucalgary.ca/bme/about/CBRE" target="_blank"><img style="width: 220px;" src="https://static.igem.org/mediawiki/2012/5/56/UCalgary2012_CBREhz_Cropped.jpg"></img></a></td>
 +
</tr>
 +
</table>
 +
<table>
 +
<tr>
 +
<td><a href="http://www.osli.ca" target="_blank"><img style="width: 891px;" src="https://static.igem.org/mediawiki/2012/9/98/UCalgary2012_Logo_OSLI.png"></img></a></td>
 +
</tr>
 +
</table>
 +
<table>
 +
<tr>
 +
<td><a href="http://www.osrin.ualberta.ca" target="_blank"><img style="width: 204px;" src="https://static.igem.org/mediawiki/2012/0/04/UCalgary2012_OSRIN.png"></img></a></td>
 +
<td><a href="http://www.mhc.ab.ca/" target="_blank"><img style="width: 250px;" src="https://static.igem.org/mediawiki/2012/7/78/UCalgary2011_Medicine_Hat_College_Logo.png"></img></a></td>
-
.leftBorder {
+
<td><a href="http://www.eurofinsdna.com" target="_blank"><img style="width: 290px;" src="https://static.igem.org/mediawiki/2012/a/a4/UCalgary2012_Logo_Eurofins.png"></img></a></td>
-
border-left: solid 2px #CCC;
+
-
}
+
-
</style>
+
</tr>
-
<script type="text/javascript">
+
<tr>
-
//newOpac: sets new opacity
+
<td><a href="http://www.autodesk.com" target="_blank"><img style="width: 274px;" src="https://static.igem.org/mediawiki/2012/0/0b/UCalgary2012-Autodesk-Logo.png"></img></a></td>
 +
<td><a href="http://www.hyperionlab.ca/" target="_blank"><img style="width: 250px;" src="https://static.igem.org/mediawiki/2012/8/89/UCalgary2012_Hyperion_Research_Logo.png"></img></a></td>
 +
<td><a href="http://www.idtdna.com/site" target="_blank"><img style="width: 228px;" src="https://static.igem.org/mediawiki/2012/1/15/UCalgary2012_Logo_IDT.png"></img></a></img></a></td>
 +
</tr>
 +
<tr>
 +
<td><a href="http://www.sarstedt.com/php/main.php" target="_blank"><img style="width: 274px;" src="https://static.igem.org/mediawiki/2012/f/f6/UCalgary2012_Logo_Sarstedt.png"></img></a></td>
 +
<td><a href="http://www.teamlab.com" target="_blank"><img style="width: 160px;" src="https://static.igem.org/mediawiki/2012/b/be/UCalgary2012_Logo_TeamLab.png"></img></a></td>
 +
<td><a href="http://www.vwr.com" target="_blank"><img style="width: 279px;" src="https://static.igem.org/mediawiki/2012/1/11/UCalgary2012_Logo_VWR.png"></img></a></td>
 +
</tr>
 +
<tr>
 +
<table><tr>
 +
<td><a href="http://genomealberta.ca" target="_blank"><img style="width: 203px;" src="https://static.igem.org/mediawiki/2012/6/68/UCalgary2012_Logo_Genome_Alberta.png"></td>
 +
<td><a href="http://www.neb.com/nebecomm/default.asp" target="_blank"><img style="width: 281px;" src="https://static.igem.org/mediawiki/2012/2/24/UCalgary2012_Logo_NEB.png"></img></a></td>
 +
<td><a href="http://www.sparkscience.ca" target="_blank"><img style="width: 261px;" src="https://static.igem.org/mediawiki/2012/6/6f/UCalgary2012_Logo_Telus_Spark.png"></img></a></td>
-
//*******************************************************************
+
</tr></table>
-
//************************SLIDESHOW SCRIPT***************************
+
</tr>
-
//*******************************************************************
+
</table>
 +
</div>
-
//Performs fade animation; main function
+
</body>
-
function fade(curElemID,isFading) {
+
 
-
+
</p>
-
//length that each slide shows before fade (in milliseconds)
+
<!--
-
var slideStayTime = 3000;
+
NewPP limit report
-
+
Preprocessor node count: 16/1000000
-
//length of fade (milliseconds)
+
Post-expand include size: 123/2097152 bytes
-
var fadeTime = 800;
+
Template argument size: 0/2097152 bytes
-
+
Expensive parser function count: 0/100
-
//number of fade loops: > means smoother, more CPU-intensive transition
+
-->
-
var numFadeLoops = 8;
+
 
-
+
<!-- Saved in parser cache with key 2012_igem_org:pcache:idhash:1092-0!1!0!!en!2 and timestamp 20130625203436 -->
-
//In order for fade to work correctly, opacity must be rounded to
+
<div class="printfooter">
-
//the appropriate number of decimal places. roundTo defines this.
+
Retrieved from "<a href="https://2012.igem.org/Team:Calgary">https://2012.igem.org/Team:Calgary</a>"</div>
-
//For numFadeLoops < 20, roundTo = 1 will suffice.  roundNum is the
+
<div id="catlinks"><div id='catlinks' class='catlinks catlinks-allhidden'></div></div> <!-- end content -->
-
//functional form.
+
<div class="visualClear"></div>
-
var roundTo = 1;
+
</div>
-
var roundNum = Math.pow(10, roundTo);
+
    </div>
-
+
<!-- PAGE FOOTER -- ITEMS FROM COLUMN ! HAVE BEEN MOVED HERE  -- RDR  -->
-
//Fetches the current slide element
+
<div class="visualClear"></div>
-
var curElem = document.getElementById('slide' + curElemID);
+
    <div id='footer-box' class='noprint'>
-
+
        <div id="footer">
-
//Performs pre-fade functions. Function must be called with isFading = false.
+
              <div id="f-poweredbyico"><a href="http://www.mediawiki.org/"><img src="/wiki/skins/common/images/poweredby_mediawiki_88x31.png" height="31" width="88" alt="Powered by MediaWiki" /></a></div>       <div id="f-copyrightico"><a href="http://creativecommons.org/licenses/by/3.0/"><img src="http://i.creativecommons.org/l/by/3.0/88x31.png" alt="Attribution 3.0 Unported" width="88" height="31" /></a></div>     <ul id="f-list">
-
if (isFading == false) {
+
-
//Fetches the next slide element. If there is no next slide,
+
 
-
//return to slide1.
+
  <!-- Recentchanges is not handles well DEBUG -->
-
var nextElem = document.getElementById('slide' + (curElemID + 1));
+
    <li id="t-recentchanges"><a href="/Special:RecentChanges"
-
if (!nextElem) {
+
      title='Recent changes'>Recent changes</a></li>
-
var nextElem = document.getElementById('slide1');
+
 
-
} //end if
+
    <li id="t-whatlinkshere"><a href="/Special:WhatLinksHere/Team:Calgary"
-
+
      title="List of all wiki pages that link here [j]" accesskey="j">What links here</a></li>
-
//Brings current slide to front/fading z-index (3) and puts the
+
 
-
//next slide in the corresponding z-index (2). Slides that are
+
                        <li id="t-recentchangeslinked"><a href="/Special:RecentChangesLinked/Team:Calgary"
-
//neither the current or next slide should have z-index = 1.
+
                          title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li>
-
curElem.style.zIndex = 3;
+
 
-
nextElem.style.zIndex = 2;
+
 
 +
 
 +
                <li id="t-upload"><a href="/Special:Upload"
 +
                  title="Upload files [u]" accesskey="u">Upload file</a>
 +
                </li>
 +
                <li id="t-specialpages"><a href="/Special:SpecialPages"
 +
                  title="List of all special pages [q]" accesskey="q">Special pages</a>
 +
                </li>
 +
                <li><a href='/Special:Preferences'>My preferences</a></li>
 +
            </ul>
 +
        </div> <!-- close footer -->
 +
        <div id='footer'>
 +
    <ul id="f-list">
 +
 
 +
            <li id="t-print"><a href="/wiki/index.php?title=Team:Calgary&amp;printable=yes"
 +
              title="Printable version of this page [p]" accesskey="p">Printable version</a>
 +
            </li>
 +
 
 +
            <li id="t-permalink"><a href="/wiki/index.php?title=Team:Calgary&amp;oldid=299478"
 +
              title="Permanent link to this revision of the page">Permanent link</a>
 +
            </li>
 +
 
 +
 
 +
        <li id="privacy"><a href="/2012.igem.org:Privacy_policy" title="2012.igem.org:Privacy policy">Privacy policy</a></li>
 +
        <li id="disclaimer"><a href="/2012.igem.org:General_disclaimer" title="2012.igem.org:General disclaimer">Disclaimers</a></li>
 +
    </ul>
 +
</div> <!-- close footer -->
 +
    </div> <!-- close footer-box -->
 +
 +
<script>if (window.runOnloadHook) runOnloadHook();</script>
 +
</div>
 +
<!-- Served in 0.163 secs. --></body>
 +
 
 +
</html>
 +
 
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<meta name="generator" content="MediaWiki 1.16.0" />
 +
<link rel="alternate" type="application/x-wiki" title="Edit" href="/wiki/index.php?title=Team:Calgary&amp;action=edit" />
 +
<link rel="edit" title="Edit" href="/wiki/index.php?title=Team:Calgary&amp;action=edit" />
 +
<link rel="shortcut icon" href="/favicon.ico" />
 +
<link rel="search" type="application/opensearchdescription+xml" href="/wiki/opensearch_desc.php" title="2012.igem.org (en)" />
 +
<link title="Creative Commons" type="application/rdf+xml" href="/wiki/index.php?title=Team:Calgary&amp;action=creativecommons" rel="meta" />
 +
<link rel="copyright" href="http://creativecommons.org/licenses/by/3.0/" />
 +
<link rel="alternate" type="application/atom+xml" title="2012.igem.org Atom feed" href="/wiki/index.php?title=Special:RecentChanges&amp;feed=atom" /> <title>Team:Calgary - 2012.igem.org</title>
 +
<style type="text/css" media="screen, projection">/*<![CDATA[*/
 +
@import "/wiki/skins/common/shared.css?270";
 +
@import "/wiki/skins/igem/main.css?270";
 +
/*]]>*/</style>
 +
<link rel="stylesheet" type="text/css" media="print" href="/wiki/skins/common/commonPrint.css?270" />
 +
<!--[if lt IE 5.5000]><style type="text/css">@import "/wiki/skins/igem/IE50Fixes.css?270";</style><![endif]-->
 +
<!--[if IE 5.5000]><style type="text/css">@import "/wiki/skins/igem/IE55Fixes.css?270";</style><![endif]-->
 +
<!--[if IE 6]><style type="text/css">@import "/wiki/skins/igem/IE60Fixes.css?270";</style><![endif]-->
 +
<!--[if IE 7]><style type="text/css">@import "/wiki/skins/igem/IE70Fixes.css?270";</style><![endif]-->
 +
<!--[if lt IE 7]><script type="text/javascript" src="/wiki/skins/common/IEFixes.js?270"></script>
 +
<meta http-equiv="imagetoolbar" content="no" /><![endif]-->
-
//Sets a preliminary opacities. Optional
+
<script>
-
curElem.style.opacity = 1;
+
var skin="igem",
-
curElem.style.filter = 'alpha(opacity=100)';
+
stylepath="/wiki/skins",
-
nextElem.style.opacity = 1;
+
wgUrlProtocols="http\\:\\/\\/|https\\:\\/\\/|ftp\\:\\/\\/|irc\\:\\/\\/|gopher\\:\\/\\/|telnet\\:\\/\\/|nntp\\:\\/\\/|worldwind\\:\\/\\/|mailto\\:|news\\:|svn\\:\\/\\/",
-
nextElem.style.filter = 'alpha(opacity=100)';
+
wgArticlePath="/$1",
-
+
wgScriptPath="/wiki",
-
} //end if
+
wgScriptExtension=".php",
-
+
wgScript="/wiki/index.php",
-
//Fades out the current slide if it is not already completely faded yet
+
wgVariantArticlePath=false,
-
if (parseFloat(curElem.style.opacity) > 0) {
+
wgActionPaths={},
-
+
wgServer="https://2012.igem.org",
-
//Sets new opacity and reruns the function
+
wgCanonicalNamespace="",
-
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;
+
wgCanonicalSpecialPageName=false,
-
curElem.style.opacity = newOpac;
+
wgNamespaceNumber=0,
-
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';
+
wgPageName="Team:Calgary",
-
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));
+
wgTitle="Team:Calgary",
-
+
wgAction="view",
-
//Current slide has faded completely
+
wgArticleId=1092,
-
} else {
+
wgIsArticle=true,
-
+
wgUserName="Lalondej",
-
//Sets the current slide to a hidden state with full opacity
+
wgUserGroups=["*", "user", "autoconfirmed"],
-
curElem.style.zIndex = 1;
+
wgUserLanguage="en",
-
curElem.style.opacity = 1;
+
wgContentLanguage="en",
-
curElem.style.filter = 'alpha(opacity=100)';
+
wgBreakFrames=false,
-
+
wgCurRevisionId=299478,
-
//Sets next slide element. If there is no next slide,
+
wgVersion="1.16.0",
-
//return to slide1.
+
wgEnableAPI=true,
-
+
wgEnableWriteAPI=true,
-
nextElemID = getNextSlide(curElemID);
+
wgSeparatorTransformTable=["", ""],
-
+
wgDigitTransformTable=["", ""],
-
//Starts next fade. isFading = false is a required parameter
+
wgMainPageTitle="Main Page",
-
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);
+
wgFormattedNamespaces={"-2": "Media", "-1": "Special", "0": "", "1": "Talk", "2": "User", "3": "User talk", "4": "2012.igem.org", "5": "2012.igem.org talk", "6": "File", "7": "File talk", "8": "MediaWiki", "9": "MediaWiki talk", "10": "Template", "11": "Template talk", "12": "Help", "13": "Help talk", "14": "Category", "15": "Category talk"},
-
+
wgNamespaceIds={"media": -2, "special": -1, "": 0, "talk": 1, "user": 2, "user_talk": 3, "2012.igem.org": 4, "2012.igem.org_talk": 5, "file": 6, "file_talk": 7, "mediawiki": 8, "mediawiki_talk": 9, "template": 10, "template_talk": 11, "help": 12, "help_talk": 13, "category": 14, "category_talk": 15, "image": 6, "image_talk": 7},
-
//Menu bar functions
+
wgSiteName="2012.igem.org",
-
menuBar(curElemID);
+
wgCategories=[],
-
+
wgMWSuggestTemplate="https://2012.igem.org/wiki/api.php?action=opensearch\x26search={searchTerms}\x26namespace={namespaces}\x26suggest",
-
} //end if
+
wgDBname="2012_igem_org",
-
+
wgSearchNamespaces=[0],
-
} //end function fade
+
wgMWSuggestMessages=["with suggestions", "no suggestions"],
 +
wgRestrictionEdit=[],
 +
wgRestrictionMove=[],
 +
wgAjaxWatch={"watchMsg": "Watch", "unwatchMsg": "Unwatch", "watchingMsg": "Watching...", "unwatchingMsg": "Unwatching...", "tooltip-ca-watchMsg": "Add this page to your watchlist", "tooltip-ca-unwatchMsg": "Remove this page from your watchlist"};
 +
</script>               
 +
<script type="text/javascript" src="/wiki/skins/common/wikibits.js?270"><!-- wikibits js --></script>
 +
<!-- Head Scripts -->
 +
<script src="/wiki/skins/common/ajax.js?270"></script>
 +
<script src="/wiki/skins/common/ajaxwatch.js?270"></script>
 +
<script src="/wiki/skins/common/mwsuggest.js?270"></script>
 +
<script type="text/javascript" src="/wiki/index.php?title=-&amp;action=raw&amp;smaxage=0&amp;gen=js&amp;useskin=igem"><!-- site js --></script>
 +
<!-- jQuery Javascript -->
 +
<script type='text/javascript'        src ='/common/jquery-latest.min.js'></script>
 +
<script type='text/javascript'        src ='/common/tablesorter/jquery.tablesorter.min.js'></script>
 +
        <link rel='stylesheet' type='text/css' href='/common/tablesorter/themes/groupparts/style.css' />
 +
        <link rel='stylesheet' type='text/css' href='/common/table_styles.css' />
 +
        <link rel='stylesheet' type='text/css' href='/forum/forum_styles.css' />
 +
<script type='text/javascript'        src ='/forum/forum_scripts.js'></script>
 +
</head>
-
//Finds the next slide and returns its 'slide' + x id.
+
<body              class="mediawiki  ltr ns-0 ns-subject page-Team_Calgary">
-
function getNextSlide(curElemID) {
+
  <div id="globalWrapper">
-
+
-
var nextElem = document.getElementById('slide' + (curElemID + 1));
+
-
if (nextElem) {
+
-
var nextElemID = curElemID + 1;
+
-
} else {
+
-
var nextElemID = 1;
+
-
} //end if
+
-
+
-
return nextElemID;
+
-
+
-
} //end function getNextSlide
+
-
//Changes menu_bar element in coordination with slides
+
    <div id="top-section">
-
function menuBar(curElemID) {
+
<div id="p-logo">
-
+
    <a href="/Main_Page"
-
nextElemID = getNextSlide(curElemID);
+
      title="Main Page">
-
var curMenuElem = document.getElementById('ddHeader' + curElemID);
+
    <img src='/wiki/skins/common/images/wiki.png'>"
-
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);
+
    </a>
-
+
</div>  <!-- end p-logo -->
-
//menu_bar item change actions go here
+
<script type="text/javascript"> if (window.isMSIE55) fixalpha(); </script>
-
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/
+
-
+
-
//Change last menu_bar item back to its normal state
+
-
curMenuElem.style.background = '#925F00'; /*******COLOR*******/
+
-
+
-
} //end function menuBar
+
-
//*******************************************************************
 
-
//************************DROPDOWN SCRIPT****************************
 
-
//*******************************************************************
 
-
var ddspeed = 10;
 
-
var ddtimer = 15;
 
-
//Main function to handle the mouse events
+
<div id="menubar" class='left-menu noprint'>
-
function ddMain(id, direction) {
+
  <ul>
-
+
                  <li
-
var headerElem = document.getElementById('ddHeader' + id);
+
                class='selected'       ><a href="/Team:Calgary">Page              </a></li>
-
var contentElem = document.getElementById('ddContent' + id);
+
              <li
-
clearInterval(contentElem.timer);
+
                class='new'       ><a href="/wiki/index.php?title=Talk:Team:Calgary&amp;action=edit&amp;redlink=1">Discussion              </a></li>
-
+
              <li
-
if (direction == 1) {
+
                    ><a href="/wiki/index.php?title=Team:Calgary&amp;action=edit">Edit              </a></li>
-
clearTimeout(headerElem.timer);
+
              <li
-
if (contentElem.maxh <= contentElem.offsetHeight) {
+
                    ><a href="/wiki/index.php?title=Team:Calgary&amp;action=history">History              </a></li>
-
if (contentElem.maxh) {
+
              <li
-
return;
+
                    ><a href="/Special:MovePage/Team:Calgary">Move              </a></li>
-
} //end if
+
              <li
-
} else if (!contentElem.maxh) {
+
                    ><a href="/wiki/index.php?title=Team:Calgary&amp;action=watch">Watch              </a></li>
-
contentElem.style.display = 'block';
+
              <li style='color:#808080;cursor:default'>teams</li>
-
contentElem.style.height = 'auto';
+
  </ul>
-
contentElem.maxh = contentElem.offsetHeight;
+
</div> <!-- end menubar (left) -->
-
contentElem.style.height = '0px';
+
 
-
} //end if
+
<div class="right-menu noprint" id="menubar">
-
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);
+
    <ul>
-
} else {
+
                <li id="pt-userpage"><a href="/User:Lalondej" title="Your user page [.]" accesskey="." class="new">Lalondej</a></li>                              <li id='pt-preferences'><a href='https://igem.org/User_Information' title='My account'>My account</a></li>
-
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);
+
                          <li id="pt-logout"><a href="/wiki/index.php?title=Special:UserLogout&amp;returnto=Team:Calgary" title="Log out">Log out</a></li>     </ul>
-
} //end if
+
</div><!-- end right menubar -->
 +
 
 +
<div id="search-controls" class="noprint">
 +
<form action="/Special:Search" id="searchform">
 +
<input id="searchInput" name="search" type="text" title="Search 2012.igem.org [f]" accesskey="f" value="" />
 +
<input type='submit' name="go" class="searchButton" id="searchGoButton" value="Go" title="Go to a page with this exact name if exists" />&nbsp;
 +
      <input type='submit' name="fulltext" class="searchButton" id="mw-searchButton" value="Search" title="Search the pages for this text" />
 +
</form>
 +
</div> <!-- close search controls -->
 +
    </div> <!-- close top-section-->
 +
    <div id="content">
 +
<a name="top" id="top"></a>
 +
<h1 class="firstHeading">Team:Calgary</h1>
 +
<div id="bodyContent">
 +
<h3 id="siteSub" class='noprint'>From 2012.igem.org</h3>
 +
<div id="contentSub"></div>
 +
<!--
 +
<div id="jump-to-nav">Jump to:                        <a href="#column-one">navigation</a>, <a href="#searchInput">search</a></div>-->
 +
<!-- start content -->
 +
<p>
 +
<!--
 +
Currently unable to implement the CSS switching due to the stupidity of the wiki. Will work on other things instead.
 +
 
 +
New header structure
 +
-->
 +
<head>
 +
<!--CSS styles: global-->
 +
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&amp;ctype=text/css" />
 +
 
 +
 
 +
<!--desktop-->
 +
 
 +
<link rel='stylesheet' type='text/css' href='https://2012.igem.org/Team:Calgary/static/basicpagedesktop.css?action=raw&amp;ctype=text/css' />
 +
 
 +
<script type="text/javascript">
 +
 
 +
jQuery(document).ready(function($){
 +
 
 +
//eliminate jsnotice
 +
$('#jsnotice').hide();
 +
 
 +
//prepend menu icon
 +
$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
-
} //end function ddMain
+
//toggle nav
 +
$("#menu-icon").click(function(){
 +
$("#nav").slideToggle('fast');
 +
$(this).toggleClass("active");
-
//Collapse menu
+
});
-
function ddCollapse(contentElem) {
+
-
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);
+
//hide url bar
 +
window.scrollTo(0, 1);
-
} //end function ddCollapse
 
-
//Cancel the collapse if a user rolls over the dropdown
+
 
-
function cancelCollapse(id) {
+
});
-
+
 
-
var headerElem = document.getElementById('ddHeader' + id);
+
</script>
-
var contentElem = document.getElementById('ddContent' + id);
+
 
-
clearTimeout(headerElem.timer);
+
<!--switching function: thanks to http://www.digital-web.com/articles/strategies_for_css_switching/-->
-
clearInterval(contentElem.timer);
+
 
-
+
<script type="text/javascript">
-
if (contentElem.offsetHeight < contentElem.maxh) {
+
 
-
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);
+
  var _gaq = _gaq || [];
-
} //end if
+
  _gaq.push(['_setAccount', 'UA-32774032-1']);
 +
  _gaq.push(['_trackPageview']);
 +
 
 +
  (function() {
 +
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 +
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
 +
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
 +
  })();
 +
 
 +
</script>
 +
 
 +
</head>
 +
 
 +
<body>
 +
 
 +
<header>
 +
<!--
 +
<a id="css-full" href="#default">Full View</a>
 +
<a id="css-mobi" href="#mobile">Mobile View</a>
 +
-->
 +
<div id="headerimage"><img src="https://static.igem.org/mediawiki/2012/f/fc/UCalgary2012_MainHeaderImage.png"></img></div>
 +
<a id="logo" href="https://2012.igem.org/Team:Calgary"><img src="https://static.igem.org/mediawiki/2012/4/48/UCalgary2012_White_Low-Res_Official_Logo.png"></img></a>
 +
<div id="nav-wrap">
 +
<ul id="nav">
 +
<li><a href="https://2012.igem.org/Team:Calgary" id="homelink">Home</a></li>
 +
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Team" id="teamlink">Team</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Team">Members</a></li>
 +
<li><a class="dropheader" href="http://ung.igem.org/Team.cgi?id=902">Official Profile</a></li>
 +
<li><a class="dropheader" href="https://2012.igem.org/Team:Calgary/Team/AbouttheUniversity">The University</a></li>
 +
<li><a class="dropheader" href="https://2012.igem.org/Team:Calgary/Team/Outtakes">Outtakes</a></li>
 +
<li><a class="dropheader" href="https://2012.igem.org/Team:Calgary/ContactUs">Contact Us</a></li>
 +
</ul>
 +
</li>
 +
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Project" id="projectlink">Project</a>
 +
<ul>
 +
<li>
 +
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project">Overview</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/DataPage">Data Page</a></li><li><a href="https://2012.igem.org/Team:Calgary/Project/Accomplish">Accomplishments</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/Post-Regionals">Post-Regionals</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices">Human Practices</a>
 +
<ul>
 +
  <li><a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Collaborations">Initiative</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Interviews">Interviews</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Design">Design</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch">Killswitch</a></li>
 +
<li><a style="margin:0 -1em 0 1em;" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch/Regulation">Regulation</a></li>
 +
<li><a style="margin:0 -1em 0 1em;" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch/KillGenes">Kill Genes</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Safety">Safety</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project/FRED">FRED</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/FRED/Detecting">Toxin Sensing</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/FRED/Reporting">Electroreporting</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/FRED/Modelling">Modelling</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/FRED/Prototype">Device Prototype</a></li>
 +
</ul>
 +
</li>
 +
<li>
 +
<a class="drop" href="https://2012.igem.org/Team:Calgary/Project/OSCAR">OSCAR</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Decarboxylation">Decarboxylation</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/CatecholDegradation">Decatecholization</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/FluxAnalysis">Flux Analysis</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Bioreactor">Bioreactor</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Upgrading">Upgrading</a></li>
 +
<li><a style="margin:0 -1em 0 1em;"href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Desulfurization">Desulfurization</a></li>
 +
<li><a style="margin:0 -1em 0 1em;"href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Denitrogenation">Denitrogenation</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/Synergy">Synergy</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/References">References</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Project/Attributions">Attributions</a></li>
 +
 
 +
</ul>
 +
</li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Parts" id="partslink">Parts</a></li>
 +
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Notebook" id="notebooklink">Notebook</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Notebook">Journal</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Notebook/Protocols">Protocols</a></li>
 +
</ul>
 +
</li>
 +
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Outreach" id="outreachlink">Outreach</a>
 +
<ul>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/VideoGame">LAB ESCAPE!</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/Spark">Spark Science</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/MindsInMotion">Minds in Motion</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/Blog">Blog Posts</a></li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Outreach/TEDxCalgary">TEDxCalgary</a></li>
 +
<li><a href="http://twitter.com/iGEMCalgary" target="_blank">Follow Us!</a></li>
 +
</ul>
 +
</li>
 +
<li><a href="https://2012.igem.org/Team:Calgary/Sponsors" id="sponsorslink">Sponsors</a></li>
 +
<li><a href="https://2012.igem.org" target="_blank">iGEM</a></li>
 +
</ul>
 +
 
 +
</div>
 +
</header>
 +
 
 +
 
 +
</body>
 +
 
 +
</p><p>
 +
<!--
 +
Completed: Epic Box and all rollovers associated with the box.
 +
Change text in Epic Box to each icon.
 +
 
 +
To do: Finish main page
 +
-->
 +
<head>
 +
<!--CSS styles: global-->
 +
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&amp;ctype=text/css" />
 +
 
 +
<style>
 +
/*======
 +
Desktop Styling
 +
======*/
 +
/***Body styling***/
 +
h1{
 +
font-size: 2.5em;
 +
}
 +
h2{
 +
font-size: 1.8em;
}
}
-
//Incrementally expand/contract the dropdown and change the opacity
+
#box1{
-
function ddSlide(contentElem,direction) {
+
width: 968px;
-
+
margin-top: -8px;
-
var curHeight = contentElem.offsetHeight;
+
background: threedface;
 +
float: left;
 +
padding-bottom: 20px;
 +
margin-bottom: 13px;
 +
}
 +
#box1 h2{
 +
padding: 20px 20px 20px 20px;
 +
}
 +
#box1 p{
 +
padding: 0px 20px 0px 20px;
 +
font-size: 1.1em;
 +
}
 +
 
 +
#FredOscarFlag{
 +
display: block;
 +
float: left;
 +
width: 250px;
 +
height: 274px;
 +
background: url('https://static.igem.org/mediawiki/2012/0/0b/UCalgary2012_FRED_and_OSCAR_Main_Page.png');
 +
background-position: top;
 +
margin: 15px;
 +
}
 +
#FredOscarFlag:hover{
 +
background-position: bottom;
 +
}
-
if (direction == 1) {
 
-
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);
 
-
} else {
 
-
distance = Math.round(curHeight / ddspeed);
 
-
} //end if
 
-
 
-
if (distance <= 1) {
 
-
if (direction == 1) {
 
-
distance = 1;
 
-
} //end if
 
-
} //end if
 
-
 
-
contentElem.style.height = curHeight + (distance * direction) + 'px';
 
-
contentElem.style.opacity = curHeight / contentElem.maxh;
 
-
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';
 
-
 
-
if (curHeight < 2) {
 
-
if (direction != 1) {
 
-
clearInterval(contentElem.timer);
 
-
} //end if
 
-
} else if (curHeight > (contentElem.maxh - 2)) {
 
-
if (direction == 1) {
 
-
clearInterval(contentElem.timer);
 
-
} //end if
 
-
} //end if
 
-
} //end function ddSlide
 
-
//*******************************************************************
+
#box2{
-
//************************MISC FUNCTIONS*****************************
+
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;
 +
}
-
//Javascript link function
+
#boximgcontainer{
-
function linkTo(url) {
+
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;
 +
}
 +
 
 +
</style>
-
window.location.href = url;
+
<script>
 +
jQuery(document).ready(function($){
-
} //end function linkTo
+
//eliminate jsnotice
 +
$('#jsnotice').hide();
-
//Simple function that performs startup scripts when prompted
 
-
function startFunctions () {
 
-
setTimeout('fade(1,false)', 2000);
+
/*epic box info functionality*/
-
menuBar(0);
+
//small icons
 +
$('#boximgcontainer .iconbox').hover(
 +
function(){
 +
var className = $(this).attr('class').split(" ");
 +
var box = className[0];
 +
clearinfo();
 +
$('#boxinfo div.' + box).show();
 +
},
 +
function(){
 +
clearinfo();
 +
$('#boxinfo_default').show();
 +
});
 +
//large icons
 +
$('.imgbox').hover(
 +
function(){
 +
var id = $(this).parent().parent().attr('id');
 +
clearinfo();
 +
$('#boxinfo div.' + id).show();
 +
},
 +
function(){
 +
clearinfo();
 +
$('#boxinfo_default').show();
 +
});
-
} //end function startFunctions
+
/*epic box FRED/OSCAR blank box disappearance*/
 +
$('#bluebox').hover(
 +
function(){
 +
$('.gblank').hide();
 +
$('.bblank').hide();
 +
},
 +
function(){
 +
$('.gblank').show();
 +
$('.bblank').show();
 +
});
 +
 +
$('#greenbox').hover(
 +
function(){
 +
$('.gblank').hide();
 +
$('.bblank').hide();
 +
},
 +
function(){
 +
$('.gblank').show();
 +
$('.bblank').show();
 +
});
 +
 +
});
 +
function clearinfo(){
 +
$('#boxinfo div').hide();
 +
}
</script>
</script>
</head>
</head>
 +
<body>
<body>
-
<img src="https://lh6.googleusercontent.com/-1Q-9hddFWuI/UCGVfn6W4wI/AAAAAAAAAVQ/e7PcCnXWO8o/s500/igem_home_logo.png" width="100" height="100" style="position: fixed; top: 10px; right: 10px; cursor: pointer;" onClick="linkTo('https://2012.igem.org/Main_Page')" />
 
-
<div style="border: solid red 1px;" id="menubar"></div>
 
-
    <a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a>
 
-
    <div id="content_top">
 
-
        <div id="slideshow">
 
-
        <div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 4; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;">
 
-
            <a href="https://2012.igem.org/Team:Colorado_State">
 
-
                    <div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;">
 
-
                        <img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" />
 
-
                        <img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" />
 
-
                        <img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" />
 
-
                    </div>
 
-
                </a>
 
-
            </div>
 
-
            <img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 3;" />
 
-
            <img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" />
 
-
            <img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" />
 
-
        </div>
 
-
        <table id="menu_bar" cellspacing="0">
 
-
        <tr>
 
-
            <td>
 
-
            <dl>
 
-
                <dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt>
 
-
              <dd id="ddContent1">
 
-
                    <ul>
 
-
                    <li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li>
 
-
                    </ul>
 
-
                </dd>
 
-
            </dl>
 
-
        </td>
 
-
            <td>
 
-
            <dl>
 
-
                <dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt>
 
-
                <dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)">
 
-
                    <ul>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li>
 
-
                    </ul>
 
-
                </dd>
 
-
            </dl>
 
-
            </td>
 
-
            <td>
 
-
            <dl>
 
-
                <dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt>
 
-
                <dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)">
 
-
                    <ul>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li>
 
-
                        <li><a href="https://igem.org/Team.cgi?year=2012&amp;team_name=Colorado_State">Official Team Page</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li>
 
-
                        <li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li>
 
-
                    </ul>
 
-
                </dd>
 
-
            </dl>
 
-
            </td>
 
-
        </tr>
 
-
        </table>
 
-
    </div>
 
-
<script type="text/javascript">startFunctions();</script>
 
-
    <div id="content_main">
 
 +
<div id="box1" align="justify">
 +
<a href="https://2012.igem.org/Team:Calgary/Project/Post-Regionals" id="FredOscarFlag">
 +
 +
</a>
 +
<h2>Detect and Destroy: Building FRED and OSCAR</h2>
 +
<p><b>Tailings ponds</b> are large bodies of water containing <b>toxic compounds</b> that accumulate as a byproduct of the oil extraction process in the oil sands of northern Alberta. These toxic and corrosive compounds are a potential <b>environmental and economic concern</b> to Alberta and to other areas. The University of Calgary 2012 iGEM team aims to develop a collection of toxin-sensing and degrading organisms <b>to detect and destroy (bioremediate) the toxins</b>, turning them into useable <b>hydrocarbons</b>.</p>
 +
<p><b>FRED and OSCAR</b> are the two projects we are working on this year. Take a look at the descriptions below to learn more!</p>
 +
</div>
-
<!--START PAGE CONTENT-->
+
<div class="threeboxes">
 +
<a id="greybox4" href="http://www.youtube.com/watch?v=KHhswxo6xow" style="margin-right:4px;">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/02/UCalgary2012_ThreeBoxMusic.png"></img>
 +
<h2>iGEM Style!</h2>
 +
<p>Take a look at our music video--sung and produced by our very own members--that's taking the iGEM world by storm! </p>
 +
</div>
 +
</a>
 +
<a id="greybox5" href="https://2012.igem.org/Team:Calgary/Project/Synergy">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/2/20/UCalgary2012_ThreeBoxSynergy.png"></img>
 +
<h2>Synergy</h2>
 +
<p>We have lots of new data since Regionals! Click here to see how we brought the three aspects of our project together!</p>
 +
</div>
 +
</a>
 +
<a id="greybox6" href="http://www.youtube.com/watch?v=vluDpf4ao6c" style="margin:0;">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/b/b1/UCalgary2012_ThreeBoxFilm.png"></img>
 +
<h2>Intro Video</h2>
 +
<p>Click here to see the introductory video we played at the beginning of our Jamboree presentations!</p>
 +
</div>
 +
</a>
 +
 +
</div>
-
<a class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State&amp;action=edit">Edit page</a>
+
<!--ZE EPIC BOX-->
-
<h1>Our Gluten-Free Mission</h1>
+
<div id="epicbox">
 +
<div id="boximgcontainer">
 +
<div id="orangebox">
 +
<a href="https://2012.igem.org/Team:Calgary/Project/HumanPractices">
 +
<div class="imgbox">
 +
<img src="https://static.igem.org/mediawiki/2012/9/9e/UCalgary2012_EpicBoxHP_-_Blank.png"></img>
 +
</div>
 +
 +
<div class="oblank">
 +
</div>
 +
 +
<div class="iconcontainer">
 +
<a class="obox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Collaborations">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_IconHP8.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Interviews">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_IconHP3.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Design">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/1/1c/UCalgary2012_IconHP4.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Killswitch">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/6/65/UCalgary2012_IconHP2.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox5 iconbox" href="https://2012.igem.org/Team:Calgary/Safety">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/c/c9/UCalgary2012_IconHP5.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox6 iconbox" href="https://2012.igem.org/Team:Calgary/Outreach">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0e/UCalgary2012_IconHP6.png"></img>
 +
</div>
 +
</a>
 +
</div>
-
<img src="https://lh6.googleusercontent.com/-cUic9qTY128/UA3HlblblkI/AAAAAAAAATI/m2Iu9XgpMFM/s512/gluten_free_keg.png" width="250" style="border: none; float: right; margin-left: 15px;" />
+
 +
</a>
 +
</div>
 +
 +
<div id="greenbox">
 +
<a href="https://2012.igem.org/Team:Calgary/Project/FRED">
 +
<div class="imgbox">
 +
<img src="https://static.igem.org/mediawiki/2012/4/47/UCalgary2012_EpicBoxFRED_-_Blank.png"></img>
 +
</div>
 +
 +
<div class="gblank">
 +
</div>
 +
 +
<div class="iconcontainer">
 +
<a class="gbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Detecting">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0a/UCalgary2012_IconFRED1.png"></img>
 +
</div>
 +
</a>
 +
<a class="gbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Reporting">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/8/8d/UCalgary2012_IconFRED2.png"></img>
 +
</div>
 +
</a>
 +
<a class="gbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Modelling">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/c/c0/UCalgary2012_IconFRED3.png"></img>
 +
</div>
 +
</a>
 +
<a class="gbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/FRED/Prototype">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/a/a7/UCalgary2012_IconFRED4.png"></img>
 +
</div>
 +
</a>
 +
</div>
 +
</a>
 +
</div>
 +
 +
<div id="bluebox">
 +
<a href="https://2012.igem.org/Team:Calgary/Project/OSCAR">
 +
<div class="imgbox">
 +
<img src="https://static.igem.org/mediawiki/2012/9/94/UCalgary2012_EpicBoxOSCAR_-_Blank.png"></img>
 +
</div>
 +
 +
<div class="bblank">
 +
</div>
 +
 +
<div class="iconcontainer">
 +
<a class="bbox1 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Decarboxylation">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/f/f1/UCalgary2012_IconOSCAR1.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox2 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/CatecholDegradation">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0c/UCalgary2012_IconOSCAR4.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/FluxAnalysis">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/4/40/UCalgary2012_IconOSCAR6.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Bioreactor">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/3/3e/UCalgary2012_IconOSCAR5.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox5 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Upgrading">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/4/44/UCalgary2012_IconOSCAR7.png"></img>
 +
</div>
 +
</a>
 +
</div>
 +
</a>
 +
</div>
 +
</div>
 +
<div id="boxinfo">
 +
<div id="boxinfo_default">
 +
<h2>The Concept</h2>
 +
<p>Our project consists of three major components: FRED, OSCAR, and the overarching Human Practices considerations informing their design. Click on the boxes to your left to learn more about what iGEM Calgary has done so far!</p>
 +
</div>
 +
<div class="orangebox">
 +
<h2>Human Practices</h2>
 +
<p>Great consideration was put into our Human Practices component this year, as safety was the guiding principle behind the design of FRED and OSCAR.  iGEM Calgary has undertaken many human outreach initiatives this year. Roll over the boxes to see each of them!</p>
 +
</div>
 +
<div class="obox1">
 +
<h2>Initiative</h2>
 +
<p>We took the initiative with the oil sands industry and established a dialogue between industry experts, academics, and government representatives. Through these talks a roadmap for the use of synthetic biology in the oil sands was established, focusing on biosensing and bioremediation.</p>
 +
</div>
 +
<div class="obox2">
 +
<h2>Interviews</h2>
 +
<p>As an undergraduate team, we spoke with experts in various fields, including the oil industry, tailings pond management, biotechnology, law, and politics to gather various opinions on our project. How useful is synthetic biology in a tailings pond environment? What design considerations should we include in our project to improve security? What legal policies must we consider before implementing our project?</p>
 +
</div>
 +
<div class="obox3">
 +
<h2>Design Considerations</h2>
 +
<p>Since safety is the driving force behind our project, we need to ensure the physical design of our biosensor and bioreactor would contain and manage the bacteria to minimize the possibility of their escape. We needed to build devices that would ensure the safety of both the user and the outside environment during their use. Click here to learn more!</p>
 +
</div>
 +
<div class="obox4">
 +
<h2>Killswitch</h2>
 +
<p>Both FRED and OSCAR are designed to operate within enclosed environments. However, since safety is our highest priority, we decided to design and implement a killswitch in both FRED and OSCAR as an extra layer of security. The killswitch aims to destroy the genome using two powerful non-specific nucleases in the unlikely event that bacteria escape into the environment. Click here to learn more!</p>
 +
</div>
 +
<div class="obox5">
 +
<h2>Safety</h2>
 +
<p>Click here for our safety page! Here we detail all the safety procedures, certifications, and approvals we have from our University to allow us to work this summer.</p>
 +
</div>
 +
<div class="obox6">
 +
<h2>Community Outreach</h2>
 +
<p>iGEM Calgary partnered with a number of different associations to engage the general public about science and synthetic biology. Click here to see what we've done this summer!</p>
 +
</div>
 +
<div class="greenbox">
 +
<h2>FRED</h2>
 +
<p>FRED is our <b>F</b>unctional, <b>R</b>obust <b>E</b>lectrochemical <b>D</b>etector. FRED is responsible for detecting and measuring naphthenic acids (NAs) and is able to produce an electrochemical signal that can be measured. FRED can be used to measure toxins in tailings pond samples within minutes, without having to ship them to an off-site lab for testing. Click on FRED to learn more!</p>
 +
</div>
 +
<div class="gbox1">
 +
<h2>Detecting</h2>
 +
<p>FRED is our star detective, working around the clock to detect toxins roaming freely in tailings pond water. FRED is known for being a little unorthodox in his methods namely by using a measurable electrochemical signal rather than colored or fluorescent reporters. Using his transposon library FRED gets clues about the genetic elements that will activate in the presence of toxins. </p>
 +
</div>
 +
<div class="gbox2">
 +
<h2>Reporting</h2>
 +
<p>Once FRED finds the toxins he wastes no time exposing them. Building upon last year's single output electrochemical system FRED now uses the new triple output system to report the toxins. This novel approach to electrochemical reporting means that FRED is as good as he is fast. </p>
 +
</div>
 +
<div class="gbox3">
 +
<h2>Modelling</h2>
 +
<p>Aside from being a stellar detective FRED also dabbles in the art of mathematics and modelling. These skills are used to model the behavior of the system. The results from the modelling helped guide the wet lab experiments which in turn gave new data to refine the model.</p>
 +
</div>
 +
<div class="gbox4">
 +
<h2>Prototyping</h2>
 +
<p>FRED gets a lot of information so he stays on top of things with the help of his handy dandy physical device to test the sample and software to interpret the raw data. The device has been <b>prototyped</b> and has an accompanying software platform that works with FRED to detect the toxins. </p>
 +
</div>
 +
<div class="bluebox">
 +
<h2>OSCAR</h2>
 +
<p>OSCAR is our <b>O</b>ptimized <b>S</b>ystem for <b>C</b>arboxylic <b>A</b>cid <b>R</b>emediation. OSCAR is responsible for converting toxins such as catechol and naphthenic acids into hydrocarbons. OSCAR is also capable of removing nitrogen and sulfur groups to further purify the hydrocarbons produced. Click on OSCAR to learn more!</p>
 +
</div>
 +
<div class="bbox1">
 +
<h2>Decarboxylation</h2>
 +
<p>In order to convert tailings pond toxins fully into hydrocarbons, we need to remove carboxylic acid groups. We are using the PetroBrick, from the University of Washington's 2011 iGEM team, to cleave off carboxylic acids to produce hydrocarbons. Click here to learn more!</p>
 +
</div>
 +
<div class="bbox2">
 +
<h2>Catechol Degradation</h2>
 +
<p>Catechol is a common toxic compound found in tailings ponds. We looked into giving OSCAR the ability to degrade catechol, which would also cleave ring structures of toxins.</p>
 +
</div>
 +
<div class="bbox3">
 +
<h2>Flux-Variability Analysis</h2>
 +
<p>We wanted to optimize OSCAR's output of hydrocarbons, so we computationally modelled how we can add particular metabolites to the growth media to increase hydrocarbon output. Click here to see what we found out!</p>
 +
</div>
 +
<div class="bbox4">
 +
<h2>Bioreactor</h2>
 +
<p>OSCAR needed a home, so we developed an enclosed bioreactor system where toxins can be converted into hydrocarbons for output. Click here to see how we designed the bioreactor!</p>
 +
</div>
 +
<div class="bbox5">
 +
<h2>Upgrading</h2>
 +
<p>Nitrogen and sulfur heteroatoms can produce nasty airborne pollutants when burned, cause acid rain and acid deposition, and can damage valuable catalysis mechanisms involved in fuel processing and emissions control. OSCAR can remove these atoms trapped in the rings. Click here to see how!</p>
 +
</div>
 +
</div>
 +
</div>
-
<p>If you have Celiac Disease or are Gluten-Intolerant (and are over 21), stop what you are doing right now. Your prayers for a great tasting gluten-free beer have finally been answered, or at least are in the process of being answered. Think of it as a delay in the mailroom. All of those nights when your friends were taunting you with the ice cold, delicious, golden liquid that gives courage to even the most faint of heart are quickly coming to an end. Your desire to enjoy a "cold one" without having a gut-wrenching reaction should be fullfilled by the end of the summer. The CSU iGEM team is working on producing a "gluten-free" beer that can be brewed from wheat or barley so you can savor that same great taste you know and love. So cross your fingers, bust out your lucky rabbits foot, and watch out for black cats because we are gearing up for something big, and it has never been done before.</p>
+
<div class="threeboxes">
 +
<a id="greybox1" href="https://2012.igem.org/Team:Calgary/Team">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/b/b8/UCalgary2012_ThreeBoxTeam.png"></img>
 +
<h2>Team</h2>
 +
<p>Who are we? What did we do? Where is this Calgary place, anyway? Click here to read our team profiles!</p>
 +
</div>
 +
</a>
 +
<a id="greybox2" href="https://2012.igem.org/Team:Calgary/Project/DataPage">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/9/92/UCalgary2012_ThreeBoxData.png"></img>
 +
<h2>Data Page</h2>
 +
<p>Click here to see a summary of all our data collected so far! Details on FRED and OSCAR can be found above.</p>
 +
</div>
 +
</a>
 +
<a id="greybox3" href="https://2012.igem.org/Team:Calgary/Notebook">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_ThreeBoxNotebook.png"></img>
 +
<h2>Notebook</h2>
 +
<p>Here is a record of our summer's work. We also want to thank everybody who helped us along the way!</p>
 +
</div>
 +
</a>
 +
</div>
-
<h1>More Than a Great Beer</h1>
 
-
<img src="http://static.wix.com/media/5bd9eb_299a61aed7aee9a8fe1c2e1ca33ea264.jpg_srz_275_207_85_22_0.50_1.20_0.00_jpg_srz" width="250" style="float: left; margin-right: 15px;" />
 
-
<p>A gluten-free beer isn't the only thing we are working on. We are also designing primers for New Belgium Brewery, developing a novel gluten-detecting assay, and creating a computer-modeled simulation for the breakdown of gluten in beer. All of these various components have us teaming up with some of the best in the business, so don't forget to visit our sponsor and attribution pages.</p>
 
-
<br /><br /><br /><br /><br />
 
-
<h1>RamStrong</h1>
+
<div id="sponsorsbox">
 +
<h2>Thanks to Our Sponsors!</h2>
 +
<table>
 +
<tr>
 +
<td><a href="http://www.ucalgary.ca/bhsc/node/16" target="_blank"><img style="width: 284px;" src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_Logo_O%27Brien_Centre.png"></img></a></td>
 +
<td><a href="http://www.ucalgary.ca" target="_blank"><img style="width: 166px;" src="https://static.igem.org/mediawiki/2012/4/46/UCalgary2012_Logo_U_of_C_Vertical.png"></img></a></td>
 +
<td><a href="http://www.albertatechfutures.ca" target="_blank"><img style="width: 234px;" src="https://static.igem.org/mediawiki/2012/7/7f/UCalgary2012_Logo_AITF.png"></img></a></td>
 +
</tr>
 +
</table>
 +
<table>
 +
<tr>
 +
<td><a href="http://bio.ucalgary.ca/" target="_blank"><img style="width: 290px;" src="https://static.igem.org/mediawiki/2012/4/45/UCalgary2012_BioSci_Logo.png"></img></a></td>
 +
<td><a href="http://enel.ucalgary.ca/" target="_blank"><img style="width: 290px;" src="https://static.igem.org/mediawiki/2012/9/9c/UCalgary2012_Schulich_Electric_Computer_Logo.png"></img></a></td>
 +
<td><a href="http://www.ucalgary.ca/bme/about/CBRE" target="_blank"><img style="width: 220px;" src="https://static.igem.org/mediawiki/2012/5/56/UCalgary2012_CBREhz_Cropped.jpg"></img></a></td>
 +
</tr>
 +
</table>
 +
<table>
 +
<tr>
 +
<td><a href="http://www.osli.ca" target="_blank"><img style="width: 891px;" src="https://static.igem.org/mediawiki/2012/9/98/UCalgary2012_Logo_OSLI.png"></img></a></td>
 +
</tr>
 +
</table>
 +
<table>
 +
<tr>
 +
<td><a href="http://www.osrin.ualberta.ca" target="_blank"><img style="width: 204px;" src="https://static.igem.org/mediawiki/2012/0/04/UCalgary2012_OSRIN.png"></img></a></td>
 +
<td><a href="http://www.mhc.ab.ca/" target="_blank"><img style="width: 250px;" src="https://static.igem.org/mediawiki/2012/7/78/UCalgary2011_Medicine_Hat_College_Logo.png"></img></a></td>
-
<img src="http://www.brandyleephotography.com/wp-content/uploads/Ram-Tough.jpg" width="250" style="float: right; margin-left: 15px;" />
+
<td><a href="http://www.eurofinsdna.com" target="_blank"><img style="width: 290px;" src="https://static.igem.org/mediawiki/2012/a/a4/UCalgary2012_Logo_Eurofins.png"></img></a></td>
-
 
+
-
<p>We proudly roam the steepest and most treacherous mountain sides, looking for adventure, and exploring whatever comes our way. We do not back down from challenges, instead we charge them head on. Although we do occasionally clash heads, we power through our disagreements, because... we are the CSU Rams!!!</p>
+
-
 
+
-
<!--END PAGE CONTENT-->
+
 +
</tr>
 +
<tr>
 +
<td><a href="http://www.autodesk.com" target="_blank"><img style="width: 274px;" src="https://static.igem.org/mediawiki/2012/0/0b/UCalgary2012-Autodesk-Logo.png"></img></a></td>
 +
<td><a href="http://www.hyperionlab.ca/" target="_blank"><img style="width: 250px;" src="https://static.igem.org/mediawiki/2012/8/89/UCalgary2012_Hyperion_Research_Logo.png"></img></a></td>
 +
<td><a href="http://www.idtdna.com/site" target="_blank"><img style="width: 228px;" src="https://static.igem.org/mediawiki/2012/1/15/UCalgary2012_Logo_IDT.png"></img></a></img></a></td>
 +
</tr>
 +
<tr>
 +
<td><a href="http://www.sarstedt.com/php/main.php" target="_blank"><img style="width: 274px;" src="https://static.igem.org/mediawiki/2012/f/f6/UCalgary2012_Logo_Sarstedt.png"></img></a></td>
 +
<td><a href="http://www.teamlab.com" target="_blank"><img style="width: 160px;" src="https://static.igem.org/mediawiki/2012/b/be/UCalgary2012_Logo_TeamLab.png"></img></a></td>
 +
<td><a href="http://www.vwr.com" target="_blank"><img style="width: 279px;" src="https://static.igem.org/mediawiki/2012/1/11/UCalgary2012_Logo_VWR.png"></img></a></td>
 +
</tr>
 +
<tr>
 +
<table><tr>
 +
<td><a href="http://genomealberta.ca" target="_blank"><img style="width: 203px;" src="https://static.igem.org/mediawiki/2012/6/68/UCalgary2012_Logo_Genome_Alberta.png"></td>
 +
<td><a href="http://www.neb.com/nebecomm/default.asp" target="_blank"><img style="width: 281px;" src="https://static.igem.org/mediawiki/2012/2/24/UCalgary2012_Logo_NEB.png"></img></a></td>
 +
<td><a href="http://www.sparkscience.ca" target="_blank"><img style="width: 261px;" src="https://static.igem.org/mediawiki/2012/6/6f/UCalgary2012_Logo_Telus_Spark.png"></img></a></td>
 +
</tr></table>
 +
</tr>
 +
</table>
 +
</div>
-
<br><br>
 
-
    </div>
 
-
    <div id="footer">
 
-
        <a href="https://2012.igem.org/wiki/index.php?title=Template:CSU_Template_1_top&amp;action=edit" style="cursor: default;"><img src="https://lh6.googleusercontent.com/-svMAaTUB0PU/UAWcIJr06oI/AAAAAAAAALc/rjGl0om85xQ/s139/apple.png" style="position: absolute; z-index: 10; bottom: -10px; left: 40%;"/></a>
 
-
        <img src="https://lh4.googleusercontent.com/-sb7abRaUzoA/UAWcIeh1pxI/AAAAAAAAALo/p8byjTol0CU/s912/footer.png" style="position: absolute; left: 0;width: 100%; height: auto; z-index: 5;"/>
 
-
    </div>
 
</body>
</body>
Line 730: Line 2,136:
<!--  
<!--  
NewPP limit report
NewPP limit report
-
Preprocessor node count: 14/1000000
+
Preprocessor node count: 16/1000000
-
Post-expand include size: 80/2097152 bytes
+
Post-expand include size: 123/2097152 bytes
Template argument size: 0/2097152 bytes
Template argument size: 0/2097152 bytes
Expensive parser function count: 0/100
Expensive parser function count: 0/100
-->
-->
-
<!-- Saved in parser cache with key 2012_igem_org:pcache:idhash:1229-0!1!0!!en!2 and timestamp 20130626064055 -->
+
<!-- Saved in parser cache with key 2012_igem_org:pcache:idhash:1092-0!1!0!!en!2 and timestamp 20130625203436 -->
<div class="printfooter">
<div class="printfooter">
-
Retrieved from "<a href="https://2012.igem.org/Team:Colorado_State">https://2012.igem.org/Team:Colorado_State</a>"</div>
+
Retrieved from "<a href="https://2012.igem.org/Team:Calgary">https://2012.igem.org/Team:Calgary</a>"</div>
<div id="catlinks"><div id='catlinks' class='catlinks catlinks-allhidden'></div></div> <!-- end content -->
<div id="catlinks"><div id='catlinks' class='catlinks catlinks-allhidden'></div></div> <!-- end content -->
<div class="visualClear"></div>
<div class="visualClear"></div>
Line 754: Line 2,160:
      title='Recent changes'>Recent changes</a></li>
      title='Recent changes'>Recent changes</a></li>
-
    <li id="t-whatlinkshere"><a href="/Special:WhatLinksHere/Team:Colorado_State"
+
    <li id="t-whatlinkshere"><a href="/Special:WhatLinksHere/Team:Calgary"
      title="List of all wiki pages that link here [j]" accesskey="j">What links here</a></li>
      title="List of all wiki pages that link here [j]" accesskey="j">What links here</a></li>
-
                         <li id="t-recentchangeslinked"><a href="/Special:RecentChangesLinked/Team:Colorado_State"
+
                         <li id="t-recentchangeslinked"><a href="/Special:RecentChangesLinked/Team:Calgary"
                           title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li>
                           title="Recent changes in pages linked from this page [k]" accesskey="k">Related changes</a></li>
Line 774: Line 2,180:
    <ul id="f-list">
    <ul id="f-list">
-
            <li id="t-print"><a href="/wiki/index.php?title=Team:Colorado_State&amp;printable=yes"
+
            <li id="t-print"><a href="/wiki/index.php?title=Team:Calgary&amp;printable=yes"
              title="Printable version of this page [p]" accesskey="p">Printable version</a>
              title="Printable version of this page [p]" accesskey="p">Printable version</a>
            </li>
            </li>
-
            <li id="t-permalink"><a href="/wiki/index.php?title=Team:Colorado_State&amp;oldid=300995"
+
            <li id="t-permalink"><a href="/wiki/index.php?title=Team:Calgary&amp;oldid=299478"
              title="Permanent link to this revision of the page">Permanent link</a>
              title="Permanent link to this revision of the page">Permanent link</a>
            </li>
            </li>
Line 791: Line 2,197:
<script>if (window.runOnloadHook) runOnloadHook();</script>
<script>if (window.runOnloadHook) runOnloadHook();</script>
</div>
</div>
-
<!-- Served in 0.201 secs. --></body>
+
<!-- Served in 0.163 secs. --></body>
</html>
</html>

Revision as of 06:53, 26 June 2013

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Team:Calgary - 2012.igem.org

Team:Calgary

From 2012.igem.org

Detect and Destroy: Building FRED and OSCAR

Tailings ponds are large bodies of water containing toxic compounds that accumulate as a byproduct of the oil extraction process in the oil sands of northern Alberta. These toxic and corrosive compounds are a potential environmental and economic concern to Alberta and to other areas. The University of Calgary 2012 iGEM team aims to develop a collection of toxin-sensing and degrading organisms to detect and destroy (bioremediate) the toxins, turning them into useable hydrocarbons.

FRED and OSCAR are the two projects we are working on this year. Take a look at the descriptions below to learn more!

iGEM Style!

Take a look at our music video--sung and produced by our very own members--that's taking the iGEM world by storm!

Synergy

We have lots of new data since Regionals! Click here to see how we brought the three aspects of our project together!

Intro Video

Click here to see the introductory video we played at the beginning of our Jamboree presentations!

The Concept

Our project consists of three major components: FRED, OSCAR, and the overarching Human Practices considerations informing their design. Click on the boxes to your left to learn more about what iGEM Calgary has done so far!

Human Practices

Great consideration was put into our Human Practices component this year, as safety was the guiding principle behind the design of FRED and OSCAR. iGEM Calgary has undertaken many human outreach initiatives this year. Roll over the boxes to see each of them!

Initiative

We took the initiative with the oil sands industry and established a dialogue between industry experts, academics, and government representatives. Through these talks a roadmap for the use of synthetic biology in the oil sands was established, focusing on biosensing and bioremediation.

Interviews

As an undergraduate team, we spoke with experts in various fields, including the oil industry, tailings pond management, biotechnology, law, and politics to gather various opinions on our project. How useful is synthetic biology in a tailings pond environment? What design considerations should we include in our project to improve security? What legal policies must we consider before implementing our project?

Design Considerations

Since safety is the driving force behind our project, we need to ensure the physical design of our biosensor and bioreactor would contain and manage the bacteria to minimize the possibility of their escape. We needed to build devices that would ensure the safety of both the user and the outside environment during their use. Click here to learn more!

Killswitch

Both FRED and OSCAR are designed to operate within enclosed environments. However, since safety is our highest priority, we decided to design and implement a killswitch in both FRED and OSCAR as an extra layer of security. The killswitch aims to destroy the genome using two powerful non-specific nucleases in the unlikely event that bacteria escape into the environment. Click here to learn more!

Safety

Click here for our safety page! Here we detail all the safety procedures, certifications, and approvals we have from our University to allow us to work this summer.

Community Outreach

iGEM Calgary partnered with a number of different associations to engage the general public about science and synthetic biology. Click here to see what we've done this summer!

FRED

FRED is our Functional, Robust Electrochemical Detector. FRED is responsible for detecting and measuring naphthenic acids (NAs) and is able to produce an electrochemical signal that can be measured. FRED can be used to measure toxins in tailings pond samples within minutes, without having to ship them to an off-site lab for testing. Click on FRED to learn more!

Detecting

FRED is our star detective, working around the clock to detect toxins roaming freely in tailings pond water. FRED is known for being a little unorthodox in his methods namely by using a measurable electrochemical signal rather than colored or fluorescent reporters. Using his transposon library FRED gets clues about the genetic elements that will activate in the presence of toxins.

Reporting

Once FRED finds the toxins he wastes no time exposing them. Building upon last year's single output electrochemical system FRED now uses the new triple output system to report the toxins. This novel approach to electrochemical reporting means that FRED is as good as he is fast.

Modelling

Aside from being a stellar detective FRED also dabbles in the art of mathematics and modelling. These skills are used to model the behavior of the system. The results from the modelling helped guide the wet lab experiments which in turn gave new data to refine the model.

Prototyping

FRED gets a lot of information so he stays on top of things with the help of his handy dandy physical device to test the sample and software to interpret the raw data. The device has been prototyped and has an accompanying software platform that works with FRED to detect the toxins.

OSCAR

OSCAR is our Optimized System for Carboxylic Acid Remediation. OSCAR is responsible for converting toxins such as catechol and naphthenic acids into hydrocarbons. OSCAR is also capable of removing nitrogen and sulfur groups to further purify the hydrocarbons produced. Click on OSCAR to learn more!

Decarboxylation

In order to convert tailings pond toxins fully into hydrocarbons, we need to remove carboxylic acid groups. We are using the PetroBrick, from the University of Washington's 2011 iGEM team, to cleave off carboxylic acids to produce hydrocarbons. Click here to learn more!

Catechol Degradation

Catechol is a common toxic compound found in tailings ponds. We looked into giving OSCAR the ability to degrade catechol, which would also cleave ring structures of toxins.

Flux-Variability Analysis

We wanted to optimize OSCAR's output of hydrocarbons, so we computationally modelled how we can add particular metabolites to the growth media to increase hydrocarbon output. Click here to see what we found out!

Bioreactor

OSCAR needed a home, so we developed an enclosed bioreactor system where toxins can be converted into hydrocarbons for output. Click here to see how we designed the bioreactor!

Upgrading

Nitrogen and sulfur heteroatoms can produce nasty airborne pollutants when burned, cause acid rain and acid deposition, and can damage valuable catalysis mechanisms involved in fuel processing and emissions control. OSCAR can remove these atoms trapped in the rings. Click here to see how!

Team

Who are we? What did we do? Where is this Calgary place, anyway? Click here to read our team profiles!

Data Page

Click here to see a summary of all our data collected so far! Details on FRED and OSCAR can be found above.

Notebook

Here is a record of our summer's work. We also want to thank everybody who helped us along the way!

Thanks to Our Sponsors!

Retrieved from "https://2012.igem.org/Team:Calgary"

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Team:Calgary - 2012.igem.org

Team:Calgary

From 2012.igem.org

Detect and Destroy: Building FRED and OSCAR

Tailings ponds are large bodies of water containing toxic compounds that accumulate as a byproduct of the oil extraction process in the oil sands of northern Alberta. These toxic and corrosive compounds are a potential environmental and economic concern to Alberta and to other areas. The University of Calgary 2012 iGEM team aims to develop a collection of toxin-sensing and degrading organisms to detect and destroy (bioremediate) the toxins, turning them into useable hydrocarbons.

FRED and OSCAR are the two projects we are working on this year. Take a look at the descriptions below to learn more!

iGEM Style!

Take a look at our music video--sung and produced by our very own members--that's taking the iGEM world by storm!

Synergy

We have lots of new data since Regionals! Click here to see how we brought the three aspects of our project together!

Intro Video

Click here to see the introductory video we played at the beginning of our Jamboree presentations!

The Concept

Our project consists of three major components: FRED, OSCAR, and the overarching Human Practices considerations informing their design. Click on the boxes to your left to learn more about what iGEM Calgary has done so far!

Human Practices

Great consideration was put into our Human Practices component this year, as safety was the guiding principle behind the design of FRED and OSCAR. iGEM Calgary has undertaken many human outreach initiatives this year. Roll over the boxes to see each of them!

Initiative

We took the initiative with the oil sands industry and established a dialogue between industry experts, academics, and government representatives. Through these talks a roadmap for the use of synthetic biology in the oil sands was established, focusing on biosensing and bioremediation.

Interviews

As an undergraduate team, we spoke with experts in various fields, including the oil industry, tailings pond management, biotechnology, law, and politics to gather various opinions on our project. How useful is synthetic biology in a tailings pond environment? What design considerations should we include in our project to improve security? What legal policies must we consider before implementing our project?

Design Considerations

Since safety is the driving force behind our project, we need to ensure the physical design of our biosensor and bioreactor would contain and manage the bacteria to minimize the possibility of their escape. We needed to build devices that would ensure the safety of both the user and the outside environment during their use. Click here to learn more!

Killswitch

Both FRED and OSCAR are designed to operate within enclosed environments. However, since safety is our highest priority, we decided to design and implement a killswitch in both FRED and OSCAR as an extra layer of security. The killswitch aims to destroy the genome using two powerful non-specific nucleases in the unlikely event that bacteria escape into the environment. Click here to learn more!

Safety

Click here for our safety page! Here we detail all the safety procedures, certifications, and approvals we have from our University to allow us to work this summer.

Community Outreach

iGEM Calgary partnered with a number of different associations to engage the general public about science and synthetic biology. Click here to see what we've done this summer!

FRED

FRED is our Functional, Robust Electrochemical Detector. FRED is responsible for detecting and measuring naphthenic acids (NAs) and is able to produce an electrochemical signal that can be measured. FRED can be used to measure toxins in tailings pond samples within minutes, without having to ship them to an off-site lab for testing. Click on FRED to learn more!

Detecting

FRED is our star detective, working around the clock to detect toxins roaming freely in tailings pond water. FRED is known for being a little unorthodox in his methods namely by using a measurable electrochemical signal rather than colored or fluorescent reporters. Using his transposon library FRED gets clues about the genetic elements that will activate in the presence of toxins.

Reporting

Once FRED finds the toxins he wastes no time exposing them. Building upon last year's single output electrochemical system FRED now uses the new triple output system to report the toxins. This novel approach to electrochemical reporting means that FRED is as good as he is fast.

Modelling

Aside from being a stellar detective FRED also dabbles in the art of mathematics and modelling. These skills are used to model the behavior of the system. The results from the modelling helped guide the wet lab experiments which in turn gave new data to refine the model.

Prototyping

FRED gets a lot of information so he stays on top of things with the help of his handy dandy physical device to test the sample and software to interpret the raw data. The device has been prototyped and has an accompanying software platform that works with FRED to detect the toxins.

OSCAR

OSCAR is our Optimized System for Carboxylic Acid Remediation. OSCAR is responsible for converting toxins such as catechol and naphthenic acids into hydrocarbons. OSCAR is also capable of removing nitrogen and sulfur groups to further purify the hydrocarbons produced. Click on OSCAR to learn more!

Decarboxylation

In order to convert tailings pond toxins fully into hydrocarbons, we need to remove carboxylic acid groups. We are using the PetroBrick, from the University of Washington's 2011 iGEM team, to cleave off carboxylic acids to produce hydrocarbons. Click here to learn more!

Catechol Degradation

Catechol is a common toxic compound found in tailings ponds. We looked into giving OSCAR the ability to degrade catechol, which would also cleave ring structures of toxins.

Flux-Variability Analysis

We wanted to optimize OSCAR's output of hydrocarbons, so we computationally modelled how we can add particular metabolites to the growth media to increase hydrocarbon output. Click here to see what we found out!

Bioreactor

OSCAR needed a home, so we developed an enclosed bioreactor system where toxins can be converted into hydrocarbons for output. Click here to see how we designed the bioreactor!

Upgrading

Nitrogen and sulfur heteroatoms can produce nasty airborne pollutants when burned, cause acid rain and acid deposition, and can damage valuable catalysis mechanisms involved in fuel processing and emissions control. OSCAR can remove these atoms trapped in the rings. Click here to see how!

Team

Who are we? What did we do? Where is this Calgary place, anyway? Click here to read our team profiles!

Data Page

Click here to see a summary of all our data collected so far! Details on FRED and OSCAR can be found above.

Notebook

Here is a record of our summer's work. We also want to thank everybody who helped us along the way!

Thanks to Our Sponsors!

Retrieved from "https://2012.igem.org/Team:Calgary"

Retrieved from "http://2013.igem.org/Team:CU-Boulder"