Team:Calgary/SandboxMain

From 2012.igem.org

(Difference between revisions)
 
(34 intermediate revisions not shown)
Line 1: Line 1:
 +
{{Team:Calgary/MainHeader}}
 +
<html>
<html>
<!--
<!--
-
Noteable changes:
+
Completed: Epic Box and all rollovers associated with the box.
-
Width of the nav is now increased by 10px. Positions of the dropdowns are also shifted by 10px.
+
Change text in Epic Box to each icon.
-
Firefox gradient for 2-col is fixed.
+
 +
To do: Finish main page
-->
-->
<head>
<head>
Line 19: Line 21:
======*/
======*/
@media only screen and (min-device-width:481px) {
@media only screen and (min-device-width:481px) {
-
 
-
 
-
/***Nav styling***/
 
-
#nav{
 
-
list-style: none;
 
-
height: 25em;
 
-
width: 190px;
 
-
margin: 0px 10px 0px 10px;
 
-
padding: 20px 0px 20px 10px;
 
-
text-indent: 0;
 
-
float: left;
 
-
 
-
/*Background colours*/
 
-
background: #202020; /*backup colour in case gradients fail*/
 
-
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333'); /* for IE 6+7*/
 
-
-ms-filter:
 
-
"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#202020', endColorstr='#333333')"; /* for IE 8*/
 
-
background: -webkit-gradient(linear, left top, right top, from(#202020), to(#333333)); /* for webkit browsers */
 
-
background: -moz-linear-gradient(left,  #202020,  #333); /* for firefox 3.6+ */
 
-
background: linear-gradient(left, #202020 0%, #333333 100%); /*standard*/
 
-
}
 
-
/*To be moved to JQ block*/
 
-
#menu-icon{
 
-
display: none;
 
-
}
 
-
#nav li{
 
-
height: auto;
 
-
padding: 0;
 
-
}
 
-
/*submenu styling*/
 
-
#nav li a{
 
-
display: block;
 
-
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
 
-
color: white;
 
-
font-size: 1.5em;
 
-
line-height: 1.2em; /*line spacing between submenu rows*/
 
-
text-indent: 0.8em;
 
-
letter-spacing: 0.08em;
 
-
}
 
-
#nav li a.dropheader{
 
-
text-indent: 0;
 
-
margin-top: 1.3em;
 
-
}
 
-
/*primary menu styling*/
 
-
#nav li > a{
 
-
display: block;
 
-
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
 
-
font-size: 1.8em;
 
-
color: white;
 
-
line-height: 1.4em; /*centers the text vertically*/
 
-
}
 
-
/*arrows to signify dropout menus; to be moved to JQ block*/
 
-
#nav li a.drop:after{
 
-
content: '>';
 
-
padding-right: 20px;
 
-
color: #BBB;
 
-
display: inline;
 
-
float: right;
 
-
}
 
-
#nav li a:hover, #nav li a:hover::after{
 
-
display: block;
 
-
text-decoration: none;
 
-
color: #43bbff;
 
-
}
 
-
/*mega dropdown styling*/
 
-
#nav li div{
 
-
position: absolute;
 
-
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/
 
-
-ms-filter:
 
-
"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/
 
-
background: -webkit-gradient(linear, left top, right top, from(#333333), to(#424242)); /* for webkit browsers */
 
-
background: -moz-linear-gradient(left,  #333333,  #424242); /* for firefox 3.6+ */
 
-
background: linear-gradient(left, #333333 0%, #424242 100%); /*standard*/
 
-
}
 
-
/*1-column styles*/
 
-
#nav li div.col_1{
 
-
left: -999px;
 
-
width: auto;
 
-
padding-bottom: 1.5em;
 
-
}
 
-
#nav li div.col_1 a{
 
-
display: block;
 
-
padding: 0 1.5em;
 
-
}
 
-
#nav li:hover div.col_1{
 
-
left: 215px;
 
-
margin-top: -55px;
 
-
}
 
-
/*2-column styles*/
 
-
#nav li div.col_2{
 
-
width: auto;
 
-
left: -999em;
 
-
padding-bottom: 1.5em;
 
-
height: auto;
 
-
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/
 
-
-ms-filter:
 
-
"progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242')"; /* for IE 8*/
 
-
background: -webkit-gradient(linear, left top, right top, from(#333333), to(#424242)); /* for webkit browsers */
 
-
background: -moz-linear-gradient(left,  #333333,  #424242); /* for firefox 3.6+ */
 
-
}
 
-
#nav li div.col_l, #nav li div.col_r{
 
-
position: relative;
 
-
width: auto;
 
-
float: left;
 
-
background: transparent;
 
-
padding-left: 20px;
 
-
padding-right: 20px;
 
-
}
 
-
#nav li div.col_l a, #nav li div.col_r a{
 
-
display: block;
 
-
}
 
-
#nav li:hover div.col_2{
 
-
left: 215px;
 
-
margin-top: -55px;
 
-
}
 
-
 
-
/***End nav styling***/
 
-
 
-
/***Headerimage***/
 
-
#headerimage{
 
-
width: 947px;
 
-
position: relative;
 
-
left: 10px;
 
-
margin-bottom: 10px;
 
-
margin-top: -20px;
 
-
}
 
-
#css-full{
 
-
display: none;
 
-
}
 
-
#css-mobi{
 
-
display: block;
 
-
top: 0px;
 
-
}
 
-
 
-
/***Logo styling***/
 
-
#logo{
 
-
position: relative;
 
-
top: -145px;
 
-
right: 20px;
 
-
float: right;
 
-
}
 
-
 
-
#logo img{
 
-
width: 260px;
 
-
}
 
/***Body styling***/
/***Body styling***/
Line 173: Line 30:
}
}
-
/***Content styling***/
+
#box1{
-
.boxtitle{
+
width: 968px;
-
font-size: 2em;
+
margin-top: -8px;
-
padding-bottom: 0em;
+
background: #CCCCCC;
-
padding-top: .3em;
+
padding-bottom: 20px;
 +
margin-bottom: 13px;
}
}
-
 
+
#box1 h2{
-
#nav-wrap{
+
padding: 20px 20px 20px 20px;
-
float: left;
+
-
height: auto;
+
-
}
+
-
 
+
-
#row1wrap{
+
-
float: left;
+
-
width: 100%;
+
-
margin-top: -60px;
+
-
height: 28em;
+
-
overflow: hidden;
+
-
}
+
-
#box1{
+
-
float: left;
+
-
background-color: #CCC;
+
-
width: 717px;
+
-
margin-top: 0px;
+
-
padding: 10px;
+
-
height: 150%;
+
}
}
-
#box1 a{
+
#box1 p{
-
color: #0050E3;
+
padding: 0px 20px 0px 20px;
-
}
+
font-size: 1.1em;
-
 
+
}
-
#row2wrap{
+
-
float: left;
+
/***positioning of elements in ZE EPIC BOX***/
-
width: 947px;
+
#epicbox{
-
margin: 14px 10px;
+
margin-top: 4px;
}
}
-
/*row2wrap div covers both the #fredbox and #oscarbox*/
+
-
#row2wrap div{
+
#boximgcontainer{
-
width: 465px;
+
float: left;
-
height: 280px;
+
width: 644px;
 +
height: 655px;
}
}
-
#row2wrap div img{
+
#boximgcontainer div{
float: left;
float: left;
-
padding-top: 30px;
+
position: relative;
-
padding-left: 15px;
+
-
padding-right: 15px;
+
-
padding-bottom: 30px;
+
}
}
 +
#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;
 +
}
 +
-
#row2wrap div h1, #row2wrap div p{
+
#greenbox .imgbox{
-
padding-top: 10px;
+
width: 320px;
-
padding-right: 15px;
+
height: 215px;
 +
background: #58CD45;
}
}
 +
.gblank{
 +
width: 320px;
 +
height: 104px;
 +
background: #A5FF8E;
 +
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;
 +
}
-
#row2wrap div h1{
+
#bluebox{
-
padding-top: 25px;
+
position: relative;
 +
top: -323px;
 +
left: 320px;
}
}
-
+
#bluebox .imgbox{
-
#fredbox{
+
width: 320px;
-
background-color: #59F052;
+
height: 215px;
-
float: left;
+
background: #5BB5E8;
-
text-decoration: none;
+
margin-left: 4px;
-
}
+
-
+
-
#fredbox:hover{
+
-
background-color: #81FF74;
+
}
}
-
+
.bblank{
-
#oscarbox{
+
width: 320px;
-
background-color: #79BEFF;
+
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: -320px;
 +
background: transparent;
 +
}
 +
 +
#boxinfo{
float: right;
float: right;
-
text-decoration: none;
+
position: relative;
 +
width: 320px;
 +
left: 3px;
 +
background: #555555;
 +
height: 650px;
 +
margin-bottom: 12px;
}
}
-
+
#boxinfo h2{
-
#oscarbox:hover{
+
color: white;
-
background-color: #91E0FF;
+
padding: 20px 20px 0px;
}
}
-
 
+
#boxinfo p{
-
/*wrapper for all the small orange boxes*/
+
color: white;
-
.smallboxwrap{
+
padding: 10px 20px 20px;
-
width: 947px;
+
font-size: 1.2em;
-
float: left;
+
}
-
margin: 0px 10px;
+
/*initial boxinfo appearance settings*/
-
margin-bottom: 10px;
+
#boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6,
 +
#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, #boxinfo div.bbox6{
 +
display: none;
 +
}
 +
/*bold colours for FRED and OSCAR*/
 +
#boxinfo div.greenbox b{
 +
color: #72E85B;
 +
}
 +
#boxinfo div.bluebox b{
 +
color: #5EB7F0;
 +
}
 +
#threeboxes{
 +
clear: both;
 +
margin-top: 4px;
 +
position: relative;
 +
width: 968px;
 +
margin-bottom: 12px;
}
}
-
.smallboxwrap a{
+
#threeboxes a, #threeboxes a div{
-
text-decoration: none;
+
width: 320px;
 +
height: 155px;
float: left;
float: left;
 +
margin-bottom: 12px;
}
}
-
+
#threeboxes div h2{
-
.smallboxwrap div, .smallboxwrap a{
+
padding: 20px 20px 0px;
-
width: 305px;
+
position: relative;
-
height: 165px;
+
top: -155px;
-
background-position: top;
+
-
}
+
-
+
-
.smallboxwrap div h1, .smallboxwrap div p{
+
-
padding: 10px 15px;
+
-
}
+
-
+
-
.smallboxwrap div h1{
+
-
padding-bottom: 0px;
+
-
padding-top: 25px;
+
-
}
+
-
+
-
#sboxteam div{
+
-
background: url('https://static.igem.org/mediawiki/2012/1/18/UCalgary2012_MainPageSmallBoxTeam.png');
+
-
}
+
-
#sboxnotebook div{
+
-
background: url('https://static.igem.org/mediawiki/2012/a/af/UCalgary2012_MainPageSmallBoxNotebook.png');
+
-
}
+
-
#sboxoutreach div{
+
-
background: url('https://static.igem.org/mediawiki/2012/d/d5/UCalgary2012_MainPageSmallBoxOutreach.png');
+
-
}
+
-
#sboxdonate div{
+
-
background-color: #FFCC60;
+
-
}
+
-
#sboxdata div{
+
-
background-color: #FFCA48;
+
-
}
+
-
#sboxfollow div{
+
-
background-color: #FFC62A;
+
-
}
+
-
+
-
/*spacing the middle box out*/
+
-
#sboxnotebook, #sboxdata{
+
-
margin: 0px 16px;
+
-
}
+
-
+
-
/*all orange boxes hover with the same colour or switch sprites*/
+
-
#sboxdonate:hover div, #sboxdata:hover div, #sboxfollow:hover div{
+
-
background-color: #FFEE82;
+
}
}
-
#sboxteam:hover div, #sboxnotebook:hover div, #sboxoutreach:hover div{
+
#threeboxes div p{
-
background-position: bottom;
+
padding: 0px 20px;
-
}
+
position: relative;
-
 
+
top: -155px;
-
#sponsorbox{
+
-
width: 943px;
+
-
float: left;
+
-
margin: 0px 10px;
+
-
border: 2px solid #cccccc;
+
-
}
+
-
#sponsorbox h1, #sponsorbox table{
+
-
margin: 15px;
+
-
}
+
-
#sponsorbox table{
+
-
width: 917px;
+
-
}
+
-
#sponsorbox table td{
+
-
width: 250px;
+
-
margin: auto;
+
}
}
-
#sponsorbox table td img{
+
#greybox1{
-
margin: auto;
+
margin-right: 4px;
 +
background: #58CD45;
}
}
-
}
+
#greybox1:hover{
-
 
+
background: #94FF7D;
-
/*======
+
}
-
Mobile Style
+
#greybox2{
-
======*/
+
margin-right: 4px;
-
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
+
background: #5BB5E8;
-
only screen and (-o-min-device-pixel-ratio: 3/2),
+
}
-
only screen and (min--moz-device-pixel-ratio: 1.5),
+
#greybox2:hover{
-
only screen and (min-device-pixel-ratio: 1.5),
+
background: #7DD7FF;
-
only screen and (max-device-width: 480px){
+
}
-
 
+
#greybox3{
-
/***Global Adjustments***/
+
margin: 0;
-
div#footer-box, div#footer, div#content, div#f-list, ul#f-list{
+
background: #F6A82D;
-
width: 95%;
+
}
-
}
+
#greybox3:hover{
-
div#top-section{
+
background: #FFE44F;
-
width: 100%;
+
}
-
}
+
-
#footer li{
+
#sponsorsbox{
-
display: block;
+
clear: both;
-
}
+
-
.left-menu li a, .right-menu a{
+
-
font-size: 1em;
+
-
padding-bottom: 5px;
+
-
padding-top: 10px;
+
-
}
+
-
.right-menu{
+
position: relative;
position: relative;
-
padding-top: 14px;
+
width: 968px;
 +
margin: 4px 0px;
 +
background: #EEEEEE;
}
}
-
#top-section{
+
#sponsorsbox h2{
-
padding-bottom: 1.3em;
+
padding: 20px 20px 0px 20px;
-
}
+
-
 
+
-
/*IMPORTANT: used to stop iPhones from scrolling horizontally due to overflow*/
+
-
body, #globalWrapper, #content, #footer-box{
+
-
overflow-x: hidden;
+
-
}
+
-
/*Hide header image. There has to be a better method.*/
+
-
#headerimage{
+
-
display: none;
+
-
}
+
-
 
+
-
/***End Global Adjustments***/
+
-
 
+
-
/*Mobile styling*/
+
-
#nav-wrap{
+
-
position: absolute;
+
-
width: 100%;
+
-
height: 71px;
+
-
top: 30px;
+
-
left: 0px;
+
-
background-color: #2c2c2c;
+
-
}
+
-
 
+
-
#nav{
+
-
clear: both;
+
-
list-style: none;
+
-
position: absolute;
+
-
left: -19px;
+
-
top: 68px;
+
-
width: 200px;
+
-
background: #6d6d6d;
+
-
display: none; /*add to JQ block*/
+
-
z-index: 1000;
+
-
}
+
-
 
+
-
#nav div{
+
-
display: none;
+
}
}
-
+
#sponsorsbox p{
-
#nav a{
+
padding: 0px 20px;
-
display: block;
+
-
text-decoration: none;
+
-
color: white;
+
-
font-family: Arial, Sans-Serif;
+
-
font-size: 2em;
+
-
line-height: 1.5em;
+
-
padding-left: 20px;
+
}
}
-
 
+
#sponsorsbox table{
-
#menu-icon{
+
width: 950px;
-
text-indent: -999em;
+
margin-left: auto;
-
display: block;
+
margin-right: auto;
-
width: 116px;
+
background: #EEEEEE;
-
height: 71px;
+
-
background: url(https://static.igem.org/mediawiki/2012/b/b3/UCalgary2012_MobileMenuIconSprite.png);
+
-
background-position: top;
+
-
}
+
-
 
+
-
#menu-icon.active{
+
-
background-position: bottom;
+
}
}
-
 
+
#sponsorsbox td{
-
#logo{
+
padding: 15px 0px;
-
position: relative;
+
width: 300px;
-
float: right;
+
}
-
margin-top: -6.4em;
+
#sponsorsbox img{
-
margin-right: 10px;
+
display: block;
-
z-index: 2;
+
margin-right: auto;
-
}
+
margin-left: auto;
-
#logo img{
+
-
height: 40px;
+
}
}
-
 
-
#bodycontainer{
 
-
position: relative;
 
-
margin-top: 50px;
 
-
}
 
-
 
-
h1{
 
-
position: relative;
 
-
margin-top: 20px;
 
-
font-size: 2.7em;
 
-
line-height: 1.2em;
 
-
}
 
-
#pagetitle{
 
-
border-bottom: 1px solid #333333;
 
-
}
 
-
h2{
 
-
position: relative;
 
-
font-size: 2.5em;
 
-
}
 
-
p{
 
-
position: relative;
 
-
font-size: 2em;
 
-
}
 
-
#css-mobi{
 
-
display: none;
 
-
}
 
-
#css-full{
 
-
display: block;
 
-
top: 0px;
 
-
}
 
-
 
}
}
-
 
</style>
</style>
 +
<script>
<script>
jQuery(document).ready(function($){
jQuery(document).ready(function($){
Line 481: Line 339:
$(this).toggleClass("active");
$(this).toggleClass("active");
 +
});
 +
 +
/*epic box info functionality*/
 +
//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();
});
});
Line 496: Line 400:
});
});
 +
 +
function clearinfo(){
 +
$('#boxinfo div').hide();
 +
}
</script>
</script>
</head>
</head>
<body>
<body>
-
<header>
+
 
-
<!--
+
<div id="box1">
-
<a id="css-full" href="#default">Full View</a>
+
<h2>Detect and Destroy: Building FRED and OSCAR</h2>
-
<a id="css-mobi" href="#mobile">Mobile View</a>
+
<p><b>Naphthenic acids (NAs)</b> are a group of recalcitrant carboxylic acid-containing compounds which are byproducts of the bitumen extraction process in the northern Alberta oil sands. These toxic and corrosive compounds are part of the solid and liquid wastes deposited into large holding areas called <b>tailings ponds</b>, which pose 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 NA-sensing and degrading organisms for their <b>detection and bioremediation</b>.</p>
-
-->
+
<p><b>FRED and OSCAR</b> are the two projects we are working on this year. Take a look at the description below to learn more!</p>
-
<div id="headerimage"><img src="https://static.igem.org/mediawiki/2012/8/87/UCalgary2012_Header_Image_V3.0-Generic.png"></img></div>
+
</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>
+
 
-
</header>
+
<!--ZE EPIC BOX-->
-
<div id="row1wrap">
+
<div id="epicbox">
-
<div id="nav-wrap">
+
<div id="boximgcontainer">
-
<ul id="nav">
+
<div id="orangebox">
-
<li><a href="https://2012.igem.org/Team:Calgary">Home</a></li>
+
<a href="#">
-
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Team">Team</a>
+
<div class="imgbox">
-
<div class="col_1">
+
<img src="https://static.igem.org/mediawiki/2012/9/9e/UCalgary2012_EpicBoxHP_-_Blank.png"></img>
-
<a class="dropheader" href="#">MEMBERS</a>
+
</div>
-
<a href="#">Undergraduates</a>
+
-
<a href="#">Advisors</a>
+
<div class="oblank">
-
<a href="#">Supervisors</a>
+
</div>
-
<a class="dropheader" href="http://ung.igem.org/Team.cgi?id=902">OFFICIAL PROFILE</a>
+
-
<a class="dropheader" href="#">THE UNIVERSITY</a>
+
<div class="iconcontainer">
 +
<a class="obox1 iconbox" href="https://2012.igem.org/Team:Calgary/Outreach/VideoGame">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/6/6b/UCalgary2012_IconHP1.png"></img>
 +
</div>
 +
</a>
 +
<a class="obox2 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>
</div>
-
</li>
+
</a>
-
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Project">Project</a>
+
<a class="obox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Interviews">
-
<div class="col_2">
+
<div>
-
<div class="col_l">
+
<img src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_IconHP3.png"></img>
-
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project">OVERVIEW</a>
+
-
<a href="#">Data Page</a>
+
-
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Biosensor">BIOSENSOR</a>
+
-
<a href="#">Sensing NAs</a>
+
-
<a href="#">Promoter Library</a>
+
-
<a href="#">Electrochemistry</a>
+
-
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Hydrocarbon">FUEL CONVERSION</a>
+
-
<a href="#">Decarboxylation</a>
+
-
<a href="#">Desulfurization</a>
+
-
<a href="#">Denitrification</a>
+
-
<a href="#">Catechol Degradation</a>
+
-
<a href="#">Flux Analysis</a>
+
-
</div>
+
-
+
-
<div class="col_r">
+
-
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Killswitch">KILLSWITCH</a>
+
-
<a href="#">Riboswitches</a>
+
-
<a href="#">Rhamnose Promoter</a>
+
-
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Bioreactor">BIOREACTOR</a>
+
-
<a href="#">Design</a>
+
-
<a href="#">Modelling</a>
+
-
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/FutureDirections">FUTURE DIRECTIONS</a>
+
-
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Attributions">ATTRIBUTIONS</a>
+
-
</div>
+
-
+
</div>
</div>
-
</li>
+
</a>
-
<li><a href="https://2012.igem.org/Team:Calgary/Parts">Parts</a></li>
+
<a class="obox4 iconbox" href="https://2012.igem.org/Team:Calgary/Project/HumanPractices/Design">
-
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Notebook">Notebook</a>
+
<div>
-
<div class="col_1">
+
<img src="https://static.igem.org/mediawiki/2012/1/1c/UCalgary2012_IconHP4.png"></img>
-
<a class="dropheader" href="#">JOURNAL</a>
+
-
<a class="dropheader" href="#">SAFETY</a>
+
-
<a class="dropheader" href="#">PROTOCOLS</a>
+
</div>
</div>
-
</li>
+
</a>
-
<li><a class="drop" href="https://2012.igem.org/Team:Calgary/Outreach">Outreach</a>
+
<a class="obox5 iconbox" href="https://2012.igem.org/Team:Calgary/Safety">
-
<div class="col_1">
+
<div>
-
<a class="dropheader" href="#">HUMAN PRACTICES</a>
+
<img src="https://static.igem.org/mediawiki/2012/c/c9/UCalgary2012_IconHP5.png"></img>
-
<a href="#">Video Series</a>
+
-
<a href="#">Video Game</a>
+
-
<a class="dropheader" href="#">FOLLOW US</a>
+
-
<a href="#">Twitter</a>
+
-
<a href="#">Facebook</a>
+
</div>
</div>
-
</li>
+
</a>
-
<li><a href="https://2012.igem.org/Team:Calgary/Sponsors">Sponsors</a></li>
+
<a class="obox6 iconbox" href="https://2012.igem.org/Team:Calgary/Outreach">
-
<li><a href="https://2012.igem.org" target="_blank">iGEM Home</a></li>
+
<div>
-
</ul>
+
<img src="https://static.igem.org/mediawiki/2012/0/0e/UCalgary2012_IconHP6.png"></img>
 +
</div>
 +
</a>
 +
</div>
 +
 +
</a>
</div>
</div>
-
 
+
-
<div id="box1">
+
<div id="greenbox">
-
<h1 class="boxtitle">Converting Naphthenic Acids to Biofuels</h1>
+
<a href="#">
-
<p>Naphthenic acids (NAs) are a group of recalcitrant carboxylic acid-containing compounds which are byproducts of the bitumen extraction process in the northern Alberta oil sands. These toxic and corrosive compounds are part of the solid and liquid wastes deposited into large holding areas called tailings ponds, which pose 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 NA-sensing and degrading organisms for their detection and bioremediation.</p>
+
<div class="imgbox">
-
<p>Continuing from the <a href="https://2011.igem.org/Team:Calgary">2011 iGEM team’s work</a> on developing a NA biosensor, our team aims to better characterize a biological system for detection and measurement of NAs and other tailings pond compounds using an electrochemical output. New to this year, our major objective is to develop procedures for the conversion of NAs into useful hydrocarbons. As well, our group aims to develop biological and structural solutions to safety problems found in the scale-up process of synthetic biology industrial applications.</p>
+
<img src="https://static.igem.org/mediawiki/2012/4/47/UCalgary2012_EpicBoxFRED_-_Blank.png"></img>
-
<p>Finally, we hope to develop a proof-of-concept bioreactor system that will be capable of converting these NAs into clean hydrocarbons suitable for industrial use. By providing both an environmental and economic benefit through the remediation of NAs, the 2012 University of Calgary iGEM team hopes to better facilitate biological methodologies for toxin remediation in Alberta, Canada, and beyond.</p>
+
</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>
-
</div>
 
-
 
-
<div id="row2wrap">
 
-
<a id="fredbox" href="https://2012.igem.org/Team:Calgary/Project/FRED">
 
-
<div>
 
-
<img src="https://static.igem.org/mediawiki/2012/3/31/UCalgary2012_FRED_Index_Box.png"></img>
 
-
<h1>Meet FRED</h1>
 
-
<p>FRED is our Functional, Robust Electrochemical Detector. He helps us detect NAs in tailings pond water by using <i>lacZ</i> to electrochemically measure NAs in a sample. FRED can even measure multiple different compounds simultaneously!
 
-
</p>
 
-
<p>
 
-
Click here to learn more!
 
-
</p>
 
-
</div>
 
-
</a>
 
-
<a id="oscarbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR">
+
<div id="bluebox">
-
<div>
+
<a href="#">
-
<img src="https://static.igem.org/mediawiki/2012/c/c3/UCalgary2012_OSCAR_Index_Box.png"></img>
+
<div class="imgbox">
-
<h1>Meet OSCAR</h1>
+
<img src="https://static.igem.org/mediawiki/2012/9/94/UCalgary2012_EpicBoxOSCAR_-_Blank.png"></img>
-
<p>OSCAR is our Optimized System for Carboxylic Acid Remediation. He helps us convert NAs in the tailings ponds into hydrocarbons that can be used for more fuel. OSCAR can purify hydrocarbons by removing sulfur and nitrogen groups from the NAs, too!</p>
+
</div>
-
<p>Click here to learn more!</p>
+
 +
<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/Denitrogenation">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/1/1c/UCalgary2012_IconOSCAR2.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox3 iconbox" href="https://2012.igem.org/Team:Calgary/Project/OSCAR/Desulfurization">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/9/9b/UCalgary2012_IconOSCAR3.png"></img>
 +
</div>
 +
</a>
 +
<a class="bbox4 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="bbox5 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="bbox6 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>
 +
</div>
 +
</a>
</div>
</div>
-
</a>
 
</div>
</div>
-
+
<div id="boxinfo">
-
<div class="smallboxwrap">
+
<div id="boxinfo_default">
-
<a id="sboxteam" href="#">
+
<h2>The Concept</h2>
-
<div>
+
<p>Our project consists of three major components: FRED, OSCAR, and the overarching Human Practices considerations surrounding both of their design. Click on the boxes to your left to learn more about what iGEM Calgary has done so far!</p>
-
<h1>Our Team</h1>
+
-
<p>Who are we? What do we do? Where is this "Calgary" place, anyway? Click here to read our team profiles!</p>
+
</div>
</div>
-
</a>
+
<div class="orangebox">
-
<a id="sboxnotebook" href="#">
+
<h2>Human Practices</h2>
-
<div>
+
<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. There are many human outreach initiatives that iGEM Calgary has done this year. Roll over the boxes to see each of them!</p>
-
<h1>Notebook</h1>
+
-
<p>Click here to find records of our summer's work, as well as attributions. We would also like to thank everybody who helped us along the way.</p>
+
</div>
</div>
-
</a>
+
<div class="obox1">
-
<a id="sboxoutreach" href="#">
+
<h2>Video Game</h2>
-
<div>
+
<p>Play our iGEM Lab Escape video game! Do you have the lab skills necessary to solve the puzzle your professor gave you and escape the lab?</p>
-
<h1>Outreach</h1>
+
</div>
-
<p>We helped spread the word on synthetic biology and why it's so great. Click here to see our outreach initiatives, and also to play our video game!</p>
+
<div class="obox2">
 +
<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 to destroy the genome using two powerful non-specific nucleases in the unlikely scenario bacteria can escape into the environment. Click here to learn more!</p>
 +
</div>
 +
<div class="obox3">
 +
<h2>Interviews</h2>
 +
<p>As an undergraduate team, we looked into speaking 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="obox4">
 +
<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 be able to contain and manage bacterial cultures without allowing any to 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="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 NAs and is able to produce an electrochemical signal that can be measured. FRED can be used to measure 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 NAs</h2>
 +
<p>We conducted a transposon search for any regulatory elements that may respond to NAs. Click here to learn more!</p>
 +
</div>
 +
<div class="gbox2">
 +
<h2>Electrochemical Reporting</h2>
 +
<p>As a continuation of our 2011 iGEM project, we have designed a replacement for colourmetric assays. Electrochemical reporting can be used to measure miniscule concentrations regardless of how turbid the sample is. Click here to learn more!</p>
 +
</div>
 +
<div class="gbox3">
 +
<h2>Modelling</h2>
 +
<p>We conducted some modelling on FRED's predicted output.</p>
 +
</div>
 +
<div class="gbox4">
 +
<h2>Prototyping</h2>
 +
<p>We built a prototype biosensor in order to give FRED a home. This biosensor device is capable of performing voltage sweeps that will detect specific compounds. Click here to learn more!</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 NAs into hydrocarbons. OSCAR is also capable of removing nitrogen and sulfur groups from NA rings to purify the hydrocarbons produced even further. Click here to learn more!</p>
 +
</div>
 +
<div class="bbox1">
 +
<h2>Decarboxylation</h2>
 +
<p>In order to convert NAs into hydrocarbons, we need to remove the carboxylic acid groups that make NAs acids. 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>Denitrogenation</h2>
 +
<p>Nitrogen heteroatoms in the ring structures reduce the efficiency of combustion in the final product. OSCAR is able to remove these nitrogen atoms. Click here to see how!</p>
 +
</div>
 +
<div class="bbox3">
 +
<h2>Desulfurization</h2>
 +
<p>OSCAR can remove sulfur atoms trapped in the rings of NAs. Click here to see how!</p>
 +
</div>
 +
<div class="bbox4">
 +
<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 NAs.</p>
 +
</div>
 +
<div class="bbox5">
 +
<h2>Bioreactor</h2>
 +
<p>OSCAR needed a home, so we developed an enclosed bioreactor system where NAs can be converted into hydrocarbons for output. Click here to see how we designed the bioreactor!</p>
 +
</div>
 +
<div class="bbox6">
 +
<h2>Flux-Variability Analysis</h2>
 +
<p>We wanted to optimize OSCAR's output of hydrocarbons, so we computationally modelled which genes should be regulated in order to maximize hydrocarbon output. Click here to see what we found out!</p>
</div>
</div>
-
</a>
 
</div>
</div>
-
<div class="smallboxwrap">
+
</div>
-
<a id="sboxdonate" href="#">
+
 
 +
<div id="threeboxes">
 +
<a id="greybox1" href="https://2012.igem.org/Team:Calgary/Team">
<div>
<div>
-
<h1>Donate!</h1>
+
<img src="https://static.igem.org/mediawiki/2012/b/b8/UCalgary2012_ThreeBoxTeam.png"></img>
-
<p>We appreciate any support from you to help us complete our project and send our team to the Jamboree. Click here to help us reach our goals!</p>
+
<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>
</div>
-
</a>
+
</a>
-
<a id="sboxdata" href="#">
+
<a id="greybox2" href="https://2012.igem.org/Team:Calgary/Project/DataPage">
<div>
<div>
-
<h1>Data Page</h1>
+
<img src="https://static.igem.org/mediawiki/2012/9/92/UCalgary2012_ThreeBoxData.png"></img>
-
<p>Click here to take a look at a summary of all our research data so far. Details of each project can be found by clicking on FRED and OSCAR above.</p>
+
<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>
</div>
-
</a>
+
</a>
-
<a id="sboxfollow" href="#">
+
<a id="greybox3" href="https://2012.igem.org/Team:Calgary/Notebook">
<div>
<div>
-
<h1>Follow Us!</h1>
+
<img src="https://static.igem.org/mediawiki/2012/1/1b/UCalgary2012_ThreeBoxNotebook.png"></img>
-
<p>Keep tabs on what we're up to by following our Facebook page and our Twitter feed!</p>
+
<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>
</div>
-
</a>
+
</a>
-
</div>
+
</div>
-
+
 
-
<div id="sponsorbox">
+
<div id="sponsorsbox">
-
<h1>Thanks to Our Sponsors!</h1>
+
<h2>Thanks to Our Sponsors!</h2>
-
<table>
+
<table>
-
<tr>
+
<tr>
-
<td><img style="width: 200px;" src="https://static.igem.org/mediawiki/2011/3/3f/UCalgary2011_AITF_Logo_Small.png"></img></td>
+
<td><img style="width: 284px;" src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_Logo_O%27Brien_Centre.png"></img></td>
-
<td><img style="width: 200px;" src="https://static.igem.org/mediawiki/2011/c/c1/UCalgary_UofCLogo.png"></img></td>
+
<td><img style="width: 166px;" src="https://static.igem.org/mediawiki/2012/4/46/UCalgary2012_Logo_U_of_C_Vertical.png"></img></td>
-
<td><img style="width: 200px;" src="https://static.igem.org/mediawiki/2011/c/c7/UCalgary_BHSc_Logo.png"></img></td>
+
<td><img style="width: 234px;" src="https://static.igem.org/mediawiki/2012/7/7f/UCalgary2012_Logo_AITF.png"></img></td>
-
</tr>
+
</tr>
-
<tr>
+
</table>
-
<td><img src="https://static.igem.org/mediawiki/2011/d/da/UCalgary2011_OSLI_Banner_Logo_Small.png"></img></td>
+
<table>
-
</tr>
+
<tr>
-
</table>
+
<td><img style="width: 891px;" src="https://static.igem.org/mediawiki/2012/9/98/UCalgary2012_Logo_OSLI.png"></img></td>
-
</div>
+
</tr>
-
+
</table>
 +
<table>
 +
<tr>
 +
<td><img style="width: 204px;" src="https://static.igem.org/mediawiki/2012/0/04/UCalgary2012_OSRIN.png"></img></td>
 +
<td><img style="width: 290px;" src="https://static.igem.org/mediawiki/2012/a/a4/UCalgary2012_Logo_Eurofins.png"></img></td>
 +
<td><img style="width: 261px;" src="https://static.igem.org/mediawiki/2012/6/6f/UCalgary2012_Logo_Telus_Spark.png"></img></td>
 +
</tr>
 +
<tr>
 +
<td><img style="width: 281px;" src="https://static.igem.org/mediawiki/2012/2/24/UCalgary2012_Logo_NEB.png"></img></td>
 +
<td><img style="width: 228px;" src="https://static.igem.org/mediawiki/2012/1/15/UCalgary2012_Logo_IDT.png"></img></td>
 +
<td><img style="width: 203px;" src="https://static.igem.org/mediawiki/2012/6/68/UCalgary2012_Logo_Genome_Alberta.png"></img></td>
 +
</tr>
 +
<tr>
 +
<td><img style="width: 274px;" src="https://static.igem.org/mediawiki/2012/f/f6/UCalgary2012_Logo_Sarstedt.png"></img></td>
 +
<td><img style="width: 160px;" src="https://static.igem.org/mediawiki/2012/b/be/UCalgary2012_Logo_TeamLab.png"></img></td>
 +
<td><img style="width: 279px;" src="https://static.igem.org/mediawiki/2012/1/11/UCalgary2012_Logo_VWR.png"></img></td>
 +
</tr>
 +
</table>
 +
</div>
 +
 
</body>
</body>
</html>
</html>

Latest revision as of 21:51, 29 September 2012

Detect and Destroy: Building FRED and OSCAR

Naphthenic acids (NAs) are a group of recalcitrant carboxylic acid-containing compounds which are byproducts of the bitumen extraction process in the northern Alberta oil sands. These toxic and corrosive compounds are part of the solid and liquid wastes deposited into large holding areas called tailings ponds, which pose 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 NA-sensing and degrading organisms for their detection and bioremediation.

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

The Concept

Our project consists of three major components: FRED, OSCAR, and the overarching Human Practices considerations surrounding both of 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. There are many human outreach initiatives that iGEM Calgary has done this year. Roll over the boxes to see each of them!

Video Game

Play our iGEM Lab Escape video game! Do you have the lab skills necessary to solve the puzzle your professor gave you and escape the lab?

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 to destroy the genome using two powerful non-specific nucleases in the unlikely scenario bacteria can escape into the environment. Click here to learn more!

Interviews

As an undergraduate team, we looked into speaking 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 be able to contain and manage bacterial cultures without allowing any to 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!

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 NAs and is able to produce an electrochemical signal that can be measured. FRED can be used to measure tailings pond samples within minutes, without having to ship them to an off-site lab for testing. Click on FRED to learn more!

Detecting NAs

We conducted a transposon search for any regulatory elements that may respond to NAs. Click here to learn more!

Electrochemical Reporting

As a continuation of our 2011 iGEM project, we have designed a replacement for colourmetric assays. Electrochemical reporting can be used to measure miniscule concentrations regardless of how turbid the sample is. Click here to learn more!

Modelling

We conducted some modelling on FRED's predicted output.

Prototyping

We built a prototype biosensor in order to give FRED a home. This biosensor device is capable of performing voltage sweeps that will detect specific compounds. Click here to learn more!

OSCAR

OSCAR is our Optimized System for Carboxylic Acid Remediation. OSCAR is responsible for converting NAs into hydrocarbons. OSCAR is also capable of removing nitrogen and sulfur groups from NA rings to purify the hydrocarbons produced even further. Click here to learn more!

Decarboxylation

In order to convert NAs into hydrocarbons, we need to remove the carboxylic acid groups that make NAs acids. 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!

Denitrogenation

Nitrogen heteroatoms in the ring structures reduce the efficiency of combustion in the final product. OSCAR is able to remove these nitrogen atoms. Click here to see how!

Desulfurization

OSCAR can remove sulfur atoms trapped in the rings of NAs. Click here to see how!

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 NAs.

Bioreactor

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

Flux-Variability Analysis

We wanted to optimize OSCAR's output of hydrocarbons, so we computationally modelled which genes should be regulated in order to maximize hydrocarbon output. Click here to see what we found out!

Thanks to Our Sponsors!

Retrieved from "http://2012.igem.org/Team:Calgary/SandboxMain"