Team:Calgary/SandboxMain

From 2012.igem.org

(Difference between revisions)
Line 115: Line 115:
}
}
-
/*
 
-
#nav a {
 
-
display: block;
 
-
width: 10em;
 
-
}
 
-
 
-
#nav li {
 
-
float: left;
 
-
width: 10em;
 
-
}
 
-
#nav li ul {
 
-
position: absolute;
 
-
width: 10em;
 
-
display: none;
 
-
}
 
-
 
-
#nav li:hover ul {
 
-
display: block;
 
-
}
 
-
#nav li ul ul {
 
-
margin: 0;
 
-
}
 
-
#nav li:hover ul ul{
 
-
display: none;
 
-
}
 
-
#nav li:hover ul, #nav li li:hover ul{
 
-
display: block;
 
-
}
 
-
*/
 
/***End nav styling***/
/***End nav styling***/
Line 188: Line 159:
}
}
#box1 h2{
#box1 h2{
-
padding: 20px 20px 0px 20px;
+
padding: 20px 20px 20px 20px;
}
}
#box1 p{
#box1 p{
-
padding: 10px 20px 20px 20px;
+
padding: 0px 20px 20px 20px;
}
}
Line 218: Line 189:
position: relative;
position: relative;
margin-bottom: 4px;
margin-bottom: 4px;
-
}
 
-
.iconcontainer{
 
left: -999em;
left: -999em;
}
}
Line 255: Line 224:
-
#fredbox div{
+
#greenbox .imgbox{
width: 320px;
width: 320px;
height: 220px;
height: 220px;
background: #72E85B;
background: #72E85B;
-
 
}
}
-
#fredbox div:hover{
+
#greenbox .iconcontainer{
 +
position: relative;
 +
margin-top: 4px;
 +
left: -999em;
 +
z-index: 0;
 +
}
 +
#gbox1 div{
 +
background: #72E85B;
 +
}
 +
#gbox2 div{
 +
background: #5BCD45;
 +
}
 +
#gbox3 div{
 +
background: #4CC035;
 +
}
 +
#gbox4 div{
 +
background: #44AF2F;
 +
}
 +
#greenbox div:hover, #greenbox div.iconbox:hover div{
background: #94FF7D;
background: #94FF7D;
 +
z-index: 99; /*hovers are not overridden by OSCAR boxes*/
}
}
-
+
#greenbox:hover .iconcontainer{
-
#oscarbox div{
+
left: auto;
 +
background: transparent;
 +
}
 +
 +
#bluebox{
 +
position: relative;
 +
top: -328px;
 +
left: 320px;
 +
}
 +
#bluebox .imgbox{
width: 320px;
width: 320px;
height: 220px;
height: 220px;
background: #5BB5E8;
background: #5BB5E8;
-
 
margin-left: 4px;
margin-left: 4px;
}
}
-
#oscarbox div:hover{
+
#bluebox .iconcontainer{
 +
position: relative;
 +
margin-top: 4px;
 +
left: -999em;
 +
z-index: 0;
 +
}
 +
#bbox1 div{
 +
background: #1574AA;
 +
}
 +
#bbox2 div{
 +
background: #2580B3;
 +
}
 +
#bbox3 div{
 +
background: #3285B4;
 +
}
 +
#bbox4 div{
 +
background: #4292BF;
 +
}
 +
#bbox5 div{
 +
background: #50A2D0;
 +
}
 +
#bbox6 div{
 +
background: #5BB5E8;
 +
margin: 0;
 +
}
 +
#bluebox div:hover, #bluebox .iconbox:hover div{
background: #7DD7FF;
background: #7DD7FF;
 +
z-index: 99; /*hovers are not overridden by FRED boxes*/
 +
}
 +
#bluebox:hover .iconcontainer{
 +
left: -320px;
 +
background: transparent;
}
}
Line 282: Line 307:
left: 3px;
left: 3px;
background: #555555;
background: #555555;
-
height: 755px;
+
height: 655px;
}
}
#boxinfo h2{
#boxinfo h2{
Line 293: Line 318:
}
}
-
}
+
}
</style>
</style>
Line 480: Line 505:
</div>
</div>
-
<a id="fredbox" href="#">
+
<div id="greenbox">
-
<div class="imgbox">
+
<a href="#">
-
<img src="https://static.igem.org/mediawiki/2012/4/47/UCalgary2012_EpicBoxFRED_-_Blank.png"></img>
+
<div class="imgbox">
-
</div>
+
<img src="https://static.igem.org/mediawiki/2012/4/47/UCalgary2012_EpicBoxFRED_-_Blank.png"></img>
-
</a>
+
</div>
 +
 +
<div class="iconcontainer">
 +
<a id="gbox1" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0a/UCalgary2012_IconFRED1.png"></img>
 +
</div>
 +
</a>
 +
<a id="gbox2" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/8/8d/UCalgary2012_IconFRED2.png"></img>
 +
</div>
 +
</a>
 +
<a id="gbox3" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/c/c0/UCalgary2012_IconFRED3.png"></img>
 +
</div>
 +
</a>
 +
<a id="gbox4" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/a/a7/UCalgary2012_IconFRED4.png"></img>
 +
</div>
 +
</a>
 +
</div>
 +
</a>
 +
</div>
-
<a id="oscarbox" href="#">
+
<div id="bluebox">
-
<div class="imgbox">
+
<a href="#">
-
<img src="https://static.igem.org/mediawiki/2012/9/94/UCalgary2012_EpicBoxOSCAR_-_Blank.png"></img>
+
<div class="imgbox">
-
</div>
+
<img src="https://static.igem.org/mediawiki/2012/9/94/UCalgary2012_EpicBoxOSCAR_-_Blank.png"></img>
-
</a>
+
</div>
 +
 +
<div class="iconcontainer">
 +
<a id="bbox1" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/f/f1/UCalgary2012_IconOSCAR1.png"></img>
 +
</div>
 +
</a>
 +
<a id="bbox2" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/1/1c/UCalgary2012_IconOSCAR2.png"></img>
 +
</div>
 +
</a>
 +
<a id="bbox3" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/9/9b/UCalgary2012_IconOSCAR3.png"></img>
 +
</div>
 +
</a>
 +
<a id="bbox4" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/0/0c/UCalgary2012_IconOSCAR4.png"></img>
 +
</div>
 +
</a>
 +
<a id="bbox5" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/3/3e/UCalgary2012_IconOSCAR5.png"></img>
 +
</div>
 +
</a>
 +
<a id="bbox6" class="iconbox" href="#">
 +
<div>
 +
<img src="https://static.igem.org/mediawiki/2012/4/40/UCalgary2012_IconOSCAR6.png"></img>
 +
</div>
 +
</a>
 +
</div>
 +
</a>
 +
</div>
</div>
</div>
<div id="boxinfo">
<div id="boxinfo">

Revision as of 20:17, 2 September 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.

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!