"

From 2012.igem.org

• Home
• Team
  • Members
  • Official Profile
  • The University
  • Outtakes
  • Contact Us
• Project
  • Overview
    • Data Page
    • Accomplishments
    • Post-Regionals
  • Human Practices
    • Initiative
    • Interviews
    • Design
    • Killswitch
    • Regulation
    • Kill Genes
    • Safety
  • FRED
    • Toxin Sensing
    • Electroreporting
    • Modelling
    • Device Prototype
  • OSCAR
    • Decarboxylation
    • Decatecholization
    • Flux Analysis
    • Bioreactor
    • Upgrading
    • Desulfurization
    • Denitrogenation
  • Synergy
  • References
  • Attributions
• Parts
• Notebook
  • Journal
  • Protocols
• Outreach
  • LAB ESCAPE!
  • Spark Science
  • Minds in Motion
  • Blog Posts
  • TEDxCalgary
  • Follow Us!
• Sponsors
• iGEM

I'm A Badass Caption: I can haz links, style or anything that is valid markup :)

Special Thanks to our 2013 iGEM Team Sponsors!

1. box1{

width: 968px; 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; }

#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; }

1. box2{

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***/

1. epicbox{

margin-top: 4px; }

#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; } .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; }

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

<script> jQuery(document).ready(function($){

//eliminate jsnotice $('#jsnotice').hide();

/*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(); });

});

function clearinfo(){ $('#boxinfo div').hide(); } </script> </head>

<body>

</body> </html>