Team:Calgary/SandboxMain

From 2012.igem.org

(Difference between revisions)
Line 210: Line 210:
margin-bottom: 4px;
margin-bottom: 4px;
}
}
-
#orangebox .imgbox div{
+
#orangebox .imgbox{
width: 644px;
width: 644px;
height: 215px;
height: 215px;
Line 219: Line 219:
margin-bottom: 4px;
margin-bottom: 4px;
}
}
-
#orangebox .iconbox div{
+
.iconcontainer{
 +
left: -999em;
 +
}
 +
.iconbox div, .iconbox{
width: 104px;
width: 104px;
height: 104px;
height: 104px;
-
position: relative;
+
margin-right: 4px;
}
}
#obox1 div{
#obox1 div{
background: #FFD35A;
background: #FFD35A;
}
}
-
#orangebox div:hover, #orangebox div.iconbox:hover{
+
#obox2 div{
 +
background: #FECC44;
 +
}
 +
#obox3 div{
 +
background: #F8C22E;
 +
}
 +
#obox4 div{
 +
background: #F8B32E;
 +
}
 +
#obox5 div{
 +
background: #F6A82D;
 +
}
 +
#obox6 div{
 +
background: #F39808;
 +
margin-right: 0;
 +
}
 +
#orangebox div:hover, #orangebox div.iconbox:hover div{
background: #FFE44F;
background: #FFE44F;
}
}
 +
#orangebox:hover .iconcontainer{
 +
left: auto;
 +
background: transparent;
 +
}
 +
#fredbox div{
#fredbox div{
Line 270: Line 294:
}
}
-
<!--
 
-
/*======
 
-
Mobile Style
 
-
======*/
 
-
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
 
-
only screen and (-o-min-device-pixel-ratio: 3/2),
 
-
only screen and (min--moz-device-pixel-ratio: 1.5),
 
-
only screen and (min-device-pixel-ratio: 1.5),
 
-
only screen and (max-device-width: 480px){
 
-
/***Global Adjustments***/
 
-
div#footer-box, div#footer, div#content, div#f-list, ul#f-list{
 
-
width: 95%;
 
-
}
 
-
div#top-section{
 
-
width: 100%;
 
-
}
 
-
#footer li{
 
-
display: block;
 
-
}
 
-
.left-menu li a, .right-menu a{
 
-
font-size: 1em;
 
-
padding-bottom: 5px;
 
-
padding-top: 10px;
 
-
}
 
-
.right-menu{
 
-
position: relative;
 
-
padding-top: 14px;
 
-
}
 
-
#top-section{
 
-
padding-bottom: 1.3em;
 
-
}
 
-
 
-
/*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;
 
-
}
 
-
 
-
#nav a{
 
-
display: block;
 
-
text-decoration: none;
 
-
color: white;
 
-
font-family: Arial, Sans-Serif;
 
-
font-size: 2em;
 
-
line-height: 1.5em;
 
-
padding-left: 20px;
 
-
}
 
-
 
-
#menu-icon{
 
-
text-indent: -999em;
 
-
display: block;
 
-
width: 79px;
 
-
height: 71px;
 
-
background: url(https://static.igem.org/mediawiki/2012/b/b3/UCalgary2012_MobileMenuIconSprite.png);
 
-
background-position: top;
 
-
}
 
-
 
-
#menu-icon.active{
 
-
background-position: bottom;
 
-
}
 
-
 
-
#logo{
 
-
position: relative;
 
-
float: right;
 
-
margin-top: -60px;
 
-
margin-right: 10px;
 
-
z-index: 2;
 
-
}
 
-
#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>
Line 549: Line 438:
<div id="epicbox">
<div id="epicbox">
<div id="boximgcontainer">
<div id="boximgcontainer">
-
<div id="orangebox">
+
<div id="orangebox">
-
<div class="iconcontainer">
+
<a href="#">
-
<a id="obox1" class="iconbox" href="#">
+
<div class="iconcontainer">
-
<div>
+
<a id="obox1" class="iconbox" href="#">
-
<img src="https://static.igem.org/mediawiki/2012/6/6b/UCalgary2012_IconHP1.png"></img>
+
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/6/6b/UCalgary2012_IconHP1.png"></img>
 +
</div>
 +
</a>
 +
<a id="obox2" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/6/65/UCalgary2012_IconHP2.png"></img>
 +
</div>
 +
</a>
 +
<a id="obox3" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/d/d6/UCalgary2012_IconHP3.png"></img>
 +
</div>
 +
</a>
 +
<a id="obox4" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/1/1c/UCalgary2012_IconHP4.png"></img>
 +
</div>
 +
</a>
 +
<a id="obox5" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/c/c9/UCalgary2012_IconHP5.png"></img>
 +
</div>
 +
</a>
 +
<a id="obox6" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0e/UCalgary2012_IconHP6.png"></img>
 +
</div>
 +
</a>
 +
</div>
 +
 
 +
<div class="imgbox">
 +
<img src="https://static.igem.org/mediawiki/2012/9/9e/UCalgary2012_EpicBoxHP_-_Blank.png"></img>
</div>
</div>
-
</a>
 
-
</div>
 
-
 
-
<a class="imgbox" href="#">
 
-
<div>
 
-
<img src="https://static.igem.org/mediawiki/2012/9/9e/UCalgary2012_EpicBoxHP_-_Blank.png"></img>
 
-
</div>
 
</a>
</a>
</div>
</div>
 +
<a id="fredbox" href="#">
<a id="fredbox" href="#">
<div class="imgbox">
<div class="imgbox">
Line 569: Line 484:
</div>
</div>
</a>
</a>
 +
<a id="oscarbox" href="#">
<a id="oscarbox" href="#">
<div class="imgbox">
<div class="imgbox">

Revision as of 21:42, 29 August 2012

FRED and OSCAR: 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.

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!