Team:Calgary/SandboxMain

From 2012.igem.org

(Difference between revisions)
Line 16: Line 16:
<style>
<style>
-
/*======
+
@media only screen and (min-device-width:481px) {
-
Desktop Styling
+
/*======
-
======*/
+
Desktop Styling
 +
======*/
-
/***Nav styling***/
+
/***Nav styling***/
-
#nav{
+
#nav{
-
list-style: none;
+
list-style: none;
-
height: 25em;
+
height: 25em;
-
width: 190px;
+
width: 190px;
-
margin: 0px 10px 0px 10px;
+
margin: 0px 10px 0px 10px;
-
padding: 20px 0px 20px 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;
text-indent: 0;
-
margin-top: 1.3em;
+
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*/
}
}
-
/*primary menu styling*/
+
/*To be moved to JQ block*/
-
#nav li > a{
+
#menu-icon{
-
display: block;
+
display: none;
-
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{
-
#nav li a.drop:after{
+
height: auto;
-
content: '>';
+
padding: 0;
-
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*/
+
/*submenu styling*/
-
#nav li div{
+
#nav li a{
-
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;
display: block;
-
padding: 0 1.5em;
+
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:hover div.col_1{
+
#nav li a.dropheader{
-
left: 215px;
+
text-indent: 0;
-
margin-top: -55px;
+
margin-top: 1.3em;
}
}
-
/*2-column styles*/
+
/*primary menu styling*/
-
#nav li div.col_2{
+
#nav li > a{
-
width: auto;
+
display: block;
-
left: -999em;
+
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif;
-
padding-bottom: 1.5em;
+
font-size: 1.8em;
-
height: auto;
+
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*/
filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,startColorstr='#333333', endColorstr='#424242'); /* for IE 6+7*/
-ms-filter:
-ms-filter:
Line 117: Line 91:
background: -webkit-gradient(linear, left top, right top, from(#333333), to(#424242)); /* for webkit browsers */
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: -moz-linear-gradient(left,  #333333,  #424242); /* for firefox 3.6+ */
 +
background: linear-gradient(left, #333333 0%, #424242 100%); /*standard*/
}
}
-
#nav li div.col_l, #nav li div.col_r{
+
/*1-column styles*/
-
position: relative;
+
#nav li div.col_1{
 +
left: -999px;
width: auto;
width: auto;
-
float: left;
+
padding-bottom: 1.5em;
-
background: transparent;
+
-
padding-left: 20px;
+
-
padding-right: 20px;
+
}
}
-
#nav li div.col_l a, #nav li div.col_r a{
+
#nav li div.col_1 a{
display: block;
display: block;
 +
padding: 0 1.5em;
}
}
-
#nav li:hover div.col_2{
+
#nav li:hover div.col_1{
-
left: 215px;
+
left: 215px;
-
margin-top: -55px;
+
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***/
+
/***End nav styling***/
-
/***Headerimage***/
+
/***Headerimage***/
-
#headerimage{
+
#headerimage{
-
width: 947px;
+
width: 947px;
-
position: relative;
+
position: relative;
-
left: 10px;
+
left: 10px;
-
margin-bottom: 10px;
+
margin-bottom: 10px;
-
margin-top: -20px;
+
margin-top: -20px;
-
}
+
}
-
#css-full{
+
#css-full{
-
display: none;
+
display: none;
-
}
+
}
-
#css-mobi{
+
#css-mobi{
-
display: block;
+
display: block;
-
top: 0px;
+
top: 0px;
-
}
+
}
-
/***Logo styling***/
+
/***Logo styling***/
-
#logo{
+
#logo{
-
position: relative;
+
position: relative;
-
top: -145px;
+
top: -145px;
-
right: 20px;
+
right: 20px;
-
float: right;
+
float: right;
-
}
+
}
-
#logo img{
+
#logo img{
-
width: 260px;
+
width: 260px;
 +
}
 +
 +
/***Body styling***/
 +
h1{
 +
font-size: 2.5em;
 +
}
 +
h2{
 +
font-size: 1.8em;
}
}
-
 
-
/***Body styling***/
 
-
h1{
 
-
font-size: 2.5em;
 
-
}
 
-
h2{
 
-
font-size: 1.8em;
 
-
}
 
-
/***Content styling***/
+
/***Content styling***/
-
.boxtitle{
+
.boxtitle{
-
font-size: 2em;
+
font-size: 2em;
-
padding-bottom: 0em;
+
padding-bottom: 0em;
-
padding-top: .3em;
+
padding-top: .3em;
-
}
+
}
-
#nav-wrap{
+
#nav-wrap{
-
float: left;
+
float: left;
-
height: auto;
+
height: auto;
-
}
+
}
-
#row1wrap{
+
#row1wrap{
-
float: left;
+
float: left;
-
width: 100%;
+
width: 100%;
-
margin-top: -60px;
+
margin-top: -60px;
-
height: 28em;
+
height: 28em;
-
overflow: hidden;
+
overflow: hidden;
-
}
+
-
#box1{
+
-
float: left;
+
-
background-color: #CCC;
+
-
width: 717px;
+
-
margin-top: 0px;
+
-
padding: 10px;
+
-
height: 150%;
+
}
}
 +
#box1{
 +
float: left;
 +
background-color: #CCC;
 +
width: 717px;
 +
margin-top: 0px;
 +
padding: 10px;
 +
height: 150%;
 +
}
-
#row2wrap{
+
#row2wrap{
-
float: left;
+
float: left;
-
width: 947px;
+
width: 947px;
-
margin: 14px 10px;
+
margin: 14px 10px;
-
}
+
-
/*row2wrap div covers both the #fredbox and #oscarbox*/
+
-
#row2wrap div{
+
-
width: 465px;
+
-
height: 280px;
+
}
}
-
#row2wrap div img{
+
/*row2wrap div covers both the #fredbox and #oscarbox*/
-
float: left;
+
#row2wrap div{
-
padding-top: 30px;
+
width: 465px;
-
padding-left: 15px;
+
height: 280px;
-
padding-right: 15px;
+
-
padding-bottom: 30px;
+
}
}
 +
#row2wrap div img{
 +
float: left;
 +
padding-top: 30px;
 +
padding-left: 15px;
 +
padding-right: 15px;
 +
padding-bottom: 30px;
 +
}
 +
 +
#row2wrap div h1, #row2wrap div p{
 +
padding-top: 10px;
 +
padding-right: 15px;
 +
}
 +
 +
#row2wrap div h1{
 +
padding-top: 25px;
 +
}
-
#row2wrap div h1, #row2wrap div p{
+
#fredbox{
-
padding-top: 10px;
+
background-color: #59F052;
-
padding-right: 15px;
+
float: left;
 +
text-decoration: none;
}
}
-
#row2wrap div h1{
+
#fredbox:hover{
-
padding-top: 25px;
+
background-color: #81FF74;
 +
}
 +
 +
#oscarbox{
 +
background-color: #79BEFF;
 +
float: right;
 +
text-decoration: none;
}
}
-
+
-
#fredbox{
+
#oscarbox:hover{
-
background-color: #59F052;
+
background-color: #91E0FF;
 +
}
 +
 
 +
/*wrapper for all the small orange boxes*/
 +
.smallboxwrap{
 +
width: 947px;
float: left;
float: left;
-
text-decoration: none;
+
margin: 0px 10px;
 +
margin-bottom: 10px;
}
}
-
+
.smallboxwrap a{
-
#fredbox:hover{
+
text-decoration: none;
-
background-color: #81FF74;
+
float: left;
}
}
-
+
-
#oscarbox{
+
.smallboxwrap div, .smallboxwrap a{
-
background-color: #79BEFF;
+
width: 305px;
-
float: right;
+
height: 165px;
-
text-decoration: none;
+
background-position: top;
-
}
+
-
+
-
#oscarbox:hover{
+
-
background-color: #91E0FF;
+
}
}
 +
 +
.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{
 +
background-position: bottom;
 +
}
-
/*wrapper for all the small orange boxes*/
+
#sponsorbox{
-
.smallboxwrap{
+
width: 943px;
-
width: 947px;
+
-
float: left;
+
-
margin: 0px 10px;
+
-
margin-bottom: 15px;
+
-
}
+
-
.smallboxwrap a{
+
-
text-decoration: none;
+
float: left;
float: left;
 +
margin: 0px 10px;
 +
border: 2px solid #cccccc;
}
}
-
+
#sponsorbox h1, #sponsorbox table{
-
.smallboxwrap div, .smallboxwrap a{
+
margin: 15px;
-
width: 305px;
+
-
height: 165px;
+
-
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{
+
#sponsorbox table{
-
background-position: bottom;
+
width: 917px;
-
}
+
-
 
+
-
#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{
+
#sponsorbox table td{
-
margin: auto;
+
width: 250px;
-
}
+
margin: auto;
-
+
}
 +
#sponsorbox table td img{
 +
margin: auto;
 +
}
 +
}
</style>
</style>
Line 355: Line 356:
<div class="col_2">
<div class="col_2">
<div class="col_l">
<div class="col_l">
-
<a class="dropheader" href="#">OVERVIEW</a>
+
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project">OVERVIEW</a>
<a href="#">Data Page</a>
<a href="#">Data Page</a>
-
<a class="dropheader" href="#">BIOSENSOR</a>
+
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Biosensor">BIOSENSOR</a>
<a href="#">Sensing NAs</a>
<a href="#">Sensing NAs</a>
<a href="#">Promoter Library</a>
<a href="#">Promoter Library</a>
<a href="#">Electrochemistry</a>
<a href="#">Electrochemistry</a>
-
<a class="dropheader" href="#">FUEL CONVERSION</a>
+
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Hydrocarbon">FUEL CONVERSION</a>
<a href="#">Decarboxylation</a>
<a href="#">Decarboxylation</a>
<a href="#">Desulfurization</a>
<a href="#">Desulfurization</a>
<a href="#">Denitrification</a>
<a href="#">Denitrification</a>
-
<a href="#">Ring Cleavage</a>
+
<a href="#">Catechol Degradation</a>
<a href="#">Flux Analysis</a>
<a href="#">Flux Analysis</a>
</div>
</div>
<div class="col_r">
<div class="col_r">
-
<a class="dropheader" href="#">KILLSWITCH</a>
+
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Killswitch">KILLSWITCH</a>
<a href="#">Riboswitches</a>
<a href="#">Riboswitches</a>
<a href="#">Rhamnose Promoter</a>
<a href="#">Rhamnose Promoter</a>
-
<a class="dropheader" href="#">BIOREACTOR</a>
+
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Bioreactor">BIOREACTOR</a>
<a href="#">Design</a>
<a href="#">Design</a>
<a href="#">Modelling</a>
<a href="#">Modelling</a>
-
<a class="dropheader" href="#">FUTURE DIRECTIONS</a>
+
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/FutureDirections">FUTURE DIRECTIONS</a>
-
<a class="dropheader" href="#">ATTRIBUTIONS</a>
+
<a class="dropheader" href="https://2012.igem.org/Team:Calgary/Project/Attributions">ATTRIBUTIONS</a>
</div>
</div>
Line 419: Line 420:
<img src="https://static.igem.org/mediawiki/2012/3/31/UCalgary2012_FRED_Index_Box.png"></img>
<img src="https://static.igem.org/mediawiki/2012/3/31/UCalgary2012_FRED_Index_Box.png"></img>
<h1>Meet FRED</h1>
<h1>Meet FRED</h1>
-
<p>FRED is our <b>F</b>unctional, <b>R</b>obust <b>E</b>lectrochemical <b>D</b>etector. 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>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>
<p>
<p>
Line 431: Line 432:
<img src="https://static.igem.org/mediawiki/2012/c/c3/UCalgary2012_OSCAR_Index_Box.png"></img>
<img src="https://static.igem.org/mediawiki/2012/c/c3/UCalgary2012_OSCAR_Index_Box.png"></img>
<h1>Meet OSCAR</h1>
<h1>Meet OSCAR</h1>
-
<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. 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>
+
<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>
<p>Click here to learn more!</p>
<p>Click here to learn more!</p>
</div>
</div>

Revision as of 21:07, 16 August 2012

Full View Mobile View

Converting Naphthenic Acids to Biofuels

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.

Continuing from the 2011 iGEM team’s work 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.

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.

Thanks to Our Sponsors!