Team:Colorado State

From 2012.igem.org

Revision as of 22:22, 14 June 2012 by Drummerdude204 (Talk | contribs)

Contents

From 2011.igem.org


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.15/jquery-ui.js"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script> <script type="text/javascript"> /* * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/ * * Uses the built in easing capabilities added In jQuery 1.1 * to offer multiple easing options * * TERMS OF USE - jQuery Easing * * Open source under the BSD License. * * Copyright © 2008 George McGinley Smith * All rights reserved. * * Redistribution and use in source and binary forms, with or without modification, * are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright notice, this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. *

  • /
// t: current time, b: begInnIng value, c: change In value, d: duration jQuery.easing['jswing'] = jQuery.easing['swing']; jQuery.extend( jQuery.easing, { def: 'easeOutQuad', swing: function (x, t, b, c, d) { //alert(jQuery.easing.default); return jQuery.easing[jQuery.easing.def](x, t, b, c, d); }, easeInQuad: function (x, t, b, c, d) { return c*(t/=d)*t + b; }, easeOutQuad: function (x, t, b, c, d) { return -c *(t/=d)*(t-2) + b; }, easeInOutQuad: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t + b; return -c/2 * ((--t)*(t-2) - 1) + b; }, easeInCubic: function (x, t, b, c, d) { return c*(t/=d)*t*t + b; }, easeOutCubic: function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; }, easeInOutCubic: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t + b; return c/2*((t-=2)*t*t + 2) + b; }, easeInQuart: function (x, t, b, c, d) { return c*(t/=d)*t*t*t + b; }, easeOutQuart: function (x, t, b, c, d) { return -c * ((t=t/d-1)*t*t*t - 1) + b; }, easeInOutQuart: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t + b; return -c/2 * ((t-=2)*t*t*t - 2) + b; }, easeInQuint: function (x, t, b, c, d) { return c*(t/=d)*t*t*t*t + b; }, easeOutQuint: function (x, t, b, c, d) { return c*((t=t/d-1)*t*t*t*t + 1) + b; }, easeInOutQuint: function (x, t, b, c, d) { if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; return c/2*((t-=2)*t*t*t*t + 2) + b; }, easeInSine: function (x, t, b, c, d) { return -c * Math.cos(t/d * (Math.PI/2)) + c + b; }, easeOutSine: function (x, t, b, c, d) { return c * Math.sin(t/d * (Math.PI/2)) + b; }, easeInOutSine: function (x, t, b, c, d) { return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; }, easeInExpo: function (x, t, b, c, d) { return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; }, easeOutExpo: function (x, t, b, c, d) { return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; }, easeInOutExpo: function (x, t, b, c, d) { if (t==0) return b; if (t==d) return b+c; if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; }, easeInCirc: function (x, t, b, c, d) { return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; }, easeOutCirc: function (x, t, b, c, d) { return c * Math.sqrt(1 - (t=t/d-1)*t) + b; }, easeInOutCirc: function (x, t, b, c, d) { if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; }, easeInElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; }, easeOutElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; }, easeInOutElastic: function (x, t, b, c, d) { var s=1.70158;var p=0;var a=c; if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); if (a < Math.abs(c)) { a=c; var s=p/4; } else var s = p/(2*Math.PI) * Math.asin (c/a); if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; }, easeInBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*(t/=d)*t*((s+1)*t - s) + b; }, easeOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; }, easeInOutBack: function (x, t, b, c, d, s) { if (s == undefined) s = 1.70158; if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; }, easeInBounce: function (x, t, b, c, d) { return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; }, easeOutBounce: function (x, t, b, c, d) { if ((t/=d) < (1/2.75)) { return c*(7.5625*t*t) + b; } else if (t < (2/2.75)) { return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; } else if (t < (2.5/2.75)) { return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; } else { return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; } }, easeInOutBounce: function (x, t, b, c, d) { if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; } }); /* * * TERMS OF USE - EASING EQUATIONS * * Open source under the BSD License. * * Copyright © 2001 Robert Penner * All rights reserved. * * Redistribution and use in source and binary forms, with or without modification, * are permitted provided that the following conditions are met: * * Redistributions of source code must retain the above copyright notice, this list of * conditions and the following disclaimer. * Redistributions in binary form must reproduce the above copyright notice, this list * of conditions and the following disclaimer in the documentation and/or other materials * provided with the distribution. * * Neither the name of the author nor the names of contributors may be used to endorse * or promote products derived from this software without specific prior written permission. * * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED * OF THE POSSIBILITY OF SUCH DAMAGE. * */ </script> <script type="text/javascript"> $(document).ready(function () { $(‘.dropdown’).each(function () { $(this).parent().eq(0).hover(function () { $(‘.dropdown:eq(0)’, this).show(); }, function () { $(‘.dropdown:eq(0)’, this).hide(); }); }); }); </script> <script type="text/javascript"> $(document).ready(function(){ jQuery.fn.setcircle = function(){ this.css({ "display":"block", "position":"absolute", "margin-left":790, "margin-top":-250, }); } jQuery.fn.resetcircle = function(){ this.hide(); $('#home #circle0').show(); $('#team #circle1').show(); $('#project #circle2').show(); $('#parts #circle3').show(); $('#notebook #circle4').show(); $('#outreach #circle5').show(); $('#sponsors #circle6').show(); } //homebutton set $('#homebutton').mouseover(function(){ $('.headercircle').hide(); $('#circle0').show(); $('#circle0').setcircle(); }); $('#homebutton').mouseout(function(){ $('#circle0').resetcircle(); }); //teambutton set $('#teambutton').mouseover(function(){ $('.headercircle').hide(); $('#circle1').show(); $('#circle1').setcircle(); }); $('#teambutton').mouseout(function(){ $('#circle1').resetcircle(); }); //projectbutton set $('#projectbutton').mouseover(function(){ $('.headercircle').hide(); $('#circle2').show(); $('#circle2').setcircle(); }); $('#projectbutton').mouseout(function(){ $('#circle2').resetcircle(); }); //partsbutton set $('#partsbutton').mouseover(function(){ $('.headercircle').hide(); $('#circle3').show(); $('#circle3').setcircle(); }); $('#partsbutton').mouseout(function(){ $('#circle3').resetcircle(); }); //notebookbutton set $('#notebookbutton').mouseover(function(){ $('.headercircle').hide(); $('#circle4').show(); $('#circle4').setcircle(); }); $('#notebookbutton').mouseout(function(){ $('#circle4').resetcircle(); }); //outreachbutton set $('#outreachbutton').mouseover(function(){ $('.headercircle').hide(); $('#circle5').show(); $('#circle5').setcircle(); }); $('#outreachbutton').mouseout(function(){ $('#circle5').resetcircle(); }); //sponsorsbutton set $('#sponsorsbutton').mouseover(function(){ $('.headercircle').hide(); $('#circle6').show(); $('#circle6').setcircle(); }); $('#sponsorsbutton').mouseout(function(){ $('#circle6').resetcircle(); }); //igembutton set $('#igembutton').mouseover(function(){ $('.headercircle').hide(); $('#circle7').show(); $('#circle7').setcircle(); }); $('#igembutton').mouseout(function(){ $('#circle7').resetcircle(); }); }); </script> <style> /***Master styling of text components, because we like consistency***/ h1, h2, h3, h4, h5, p, a{ text-decoration: none; border: 0; font-family: Arial; } a{ color: #0063bd; }
  1. sidetext a, #sidetext p, #sidetext li a{
color: white; font-family: Arial; } a, a:visited{ color: #0063bd; } table tr{ margin-top: 5px; margin-bottom: 5px; } table td{ margin-left: 5px; margin-right: 5px; }
  1. sponsors table tr td img{
width: 200px; padding-right: 30px; padding-left: 10px; } /***End master styling***/ /*** Minimal header: removes the search bar and header image and readjusts font colours in the menus. Thanks a lot to the 2011 Brown-Stanford iGEM team for snippets of their code! Check out their wiki at https://2011.igem.org/Team:Brown-Stanford
      • /
div#top-section{ /*the div containing the entire top bar*/ height: 20px; margin-left: auto; margin-right: auto; margin-bottom: 0px !important; margin-top: -14px; padding:0px 0px 0px 0px;; border: none; width: 100%; background: none; color: black; position:absolute; }
  1. p-logo { /*the header image*/
height:0px; overflow:hidden; border:none; }
  1. content{
margin-top: 14px; }
  1. search-controls {
overflow:hidden; display:none; background: none; position: absolute; top: 170px; right: 40px; } div#header { width: 975px; text-align: left; margin-left: auto; margin-right: auto; margin-bottom: 0px !important; }
  1. menubar {
position: absolute; background: none; color: black; } .left-menu, .right-menu{ position: absolute; background: none; color: white; } .left-menu li, .right-menu li a { color: transparent !important; } .left-menu ul li, .right-menu ul li a{ background: none; color: white; } .right-menu li a:hover, .right-menu li a:visited, .right-menu li a:active { color: white !important; } /***End minimal header***/ /***Now for our own stuff: personalized header images and navbar***/
  1. headercontainer{
margin-left: 30px; }
  1. headerbar{
width: 842px; height: 48px; background-image: url(UCalgary_HeaderBarNew.png); position: absolute; margin-top: -25px; z-index: 99; } /*div containing menu bar*/ ul#topnav{ display: table; margin: 0; padding: 0; left: 15px; top: 15px; list-style: none; position: relative; z-index: 100; } ul#topnav a.navtext{ position: relative; display: block; background-position: left top; margin-right: 12px; margin-left: 12px; } ul#topnav li{ margin: 0; padding: 0; list-style: none; display: table-cell; float: left; position: relative; } ul#topnav li a{ padding: 0; display: block; color: #f0f0f0; text-decoration: none; } ul#topnav li:hover, ul#topnav a:hover{ background-position: left bottom; } /*Subnavigation*/ ul.dropdown{ margin: 0; padding: 0; padding-bottom: 10px; padding-top: 7px; display: block; position: absolute; z-index: 999; width: 200px; display: none; left: 0; /*Background of subnav*/ background-color: #00365E; opacity: 0.77; } ul.dropdown li{ margin: 0; padding: 0; width: 200px; float: none; position: relative; list-style: none; display: block; } ul.dropdown li a{ display: block; } /*Establish sprites for each individual button*/
  1. homebutton a{
background-image: url(UCalgary_MenuHome.png); width: 51px; height: 16px; }
  1. teambutton a{
background-image: url(UCalgary_MenuTeam.png); width: 48px; height: 16px; margin-bottom: 17px; }
  1. projectbutton a{
background-image: url(UCalgary_MenuProject.png); width: 62px; height: 19px; margin-bottom: 14px; }
  1. partsbutton a{
background-image: url(UCalgary_MenuParts.png); width: 45px; height: 16px; margin-bottom: 17px; }
  1. notebookbutton a{
background-image: url(UCalgary_MenuNotebook.png); width: 84px; height: 16px; margin-bottom: 17px; }
  1. outreachbutton a{
background-image: url(UCalgary_MenuOutreach.png); width: 80px; height: 17px; margin-bottom: 16px; }
  1. sponsorsbutton a{
background-image: url(UCalgary_MenuSponsors.png); width: 84px; height: 20px; margin-bottom: 13px; }
  1. igembutton a{
background-image: url(UCalgary_MenuiGEM.png); width: 46px; height: 17px; margin-bottom: 16px; } .navtext{ text-indent: -99999px; /*Shoots all HTML text buttons off the page*/ } /*Adjusting the subnavigation menu*/ ul#topnav li#teambutton ul li a, ul#topnav li#projectbutton ul li a, ul#topnav li#partsbutton ul li a, ul#topnav li#notebookbutton ul li a, ul#topnav li#outreachbutton ul li a, ul#topnav li#sponsorsbutton ul li a{ height: 35px; background-image: none; font-family: Arial; font-size: 17px; font-weight: 400; } ul#topnav li ul li a{ display: inline; /*correction of previous link style*/ background-image: url(UCalgary_SubNavRepeater.png); background-repeat: repeat-x; padding-left: 12px; padding-right: 12px; } /*Rollover settings*/ ul#topnav li:hover ul{ display: block; z-index: 999; } ul#topnav li ul li a:hover{ color: #49f0ff; } /*Active state settings*/
  1. home li#homebutton a,
  2. team li#teambutton a,
  3. project li#projectbutton a,
  4. parts li#partsbutton a,
  5. notebook li#notebookbutton a,
  6. outreach li#outreachbutton a,
  7. sponsors li#sponsorsbutton a{
background-position: left bottom; } /*Hide all circles*/ img.headercircle{ display: none; z-index: 250; } /*Active circle showing*/
  1. home #circle0,
  2. team #circle1,
  3. project #circle2,
  4. parts #circle3,
  5. notebook #circle4,
  6. outreach #circle5,
  7. sponsors #circle6{
display: block; position: absolute; margin-left: 790px; margin-top: -250px; } /***End menu stuff. Onto the rest of the header!***/ .firstHeading{ text-indent: -99999px; }
  1. headbanner, #headbanner img{
width: 906px; height: 216px; z-index: 0; }
  1. fb-button{
position: absolute; margin-left: 872px; margin-top: -170px; }
  1. twitter-button{
position: absolute; margin-left: 898px; margin-top: -170px; } /*...Not much, was there.*/ </style>

<img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 906px; height: 216px;" src="UCalgary_HeaderImage2.png"> <img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 906px; height: 216px;" src="UCalgary2011_MainPageHeaderImage1.png"> <img style="position: absolute; top: 0px; left: 0px; display: none; z-index: 5; opacity: 0; width: 906px; height: 216px;" src="UCalgary2011_HeaderImage3.png"> <img style="position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 0.3025; width: 906px; height: 216px;" src="UCalgary2011_HeaderImage4.png"> <img style="position: absolute; top: 0px; left: 0px; display: block; z-index: 6; opacity: 0.6975; width: 906px; height: 216px;" src="UCalgary2011_HeaderImage5.png">

<script type="text/javascript"> $(document).ready(function(){ $('#headbanner').cycle({ timeout: 8000 }); }); </script> <img style="display: block; position: absolute; margin-left: 790px; margin-top: -250px;" class="headercircle" id="circle0" src="UCalgary_CircleHome.png"> <img style="display: none; position: absolute; margin-left: 790px; margin-top: -250px;" class="headercircle" id="circle1" src="UCalgary_CircleTeam.png"> <img style="display: none;" class="headercircle" id="circle2" src="UCalgary_CircleProject.png"> <img style="display: none; position: absolute; margin-left: 790px; margin-top: -250px;" class="headercircle" id="circle3" src="UCalgary_CircleParts.png"> <img style="display: none; position: absolute; margin-left: 790px; margin-top: -250px;" class="headercircle" id="circle4" src="UCalgary_CircleNotebook.png"> <img style="display: none; position: absolute; margin-left: 790px; margin-top: -250px;" class="headercircle" id="circle5" src="UCalgary_CircleOutreach.png"> <img style="display: none;" class="headercircle" id="circle6" src="UCalgary_CircleSponsors.png"> <img style="display: none;" class="headercircle" id="circle7" src="UCalgary_CircleiGEM.png">




<script type="text/javascript"> $(document).ready(function(){

$('#promoter').hover( function(){ $('#subdefault').hide(); $('#subpromoter').show(); }, function(){ $('#subpromoter').hide(); $('#subdefault').show(); });

$('#reporter').hover( function(){ $('#subdefault').hide(); $('#subreporter').show(); }, function(){ $('#subreporter').hide(); $('#subdefault').show(); });

$('#chassis').hover( function(){ $('#subdefault').hide(); $('#subchassis').show(); }, function(){ $('#subchassis').hide(); $('#subdefault').show(); });

}); </script>

<style>

h1, h2, h3, h4, h5{ text-decoration: none; border: 0; }

  1. titlebar{

position: relative; margin-top: 0px; margin-left: 30px; z-index: 1; }

#pagetitle{ position: relative; color: white; margin-left: 50px; margin-top: -45px; z-index: 1; width: 600px; }

  1. box1{

margin-top: 24px; }

  1. box1 img.boxtop1{

position: relative; margin-left: 30px; margin-top: -25px; }

  1. box1 img.boxbottom1{

position: relative; margin-left: 30px; margin-top: -6px; }

#box1pwrap{ background-image: url(UCalgary_MainPageBox1Repeater.png); background-repeat: repeat-y; width: 600px; height: 250px; margin-left: 30px; margin-top: -4px; padding-right: 155px; }

#box1 p{ padding-left: 20px; padding-top: 15px; padding-bottom: 2px; float: left; width: 560px; color: black; }

  1. likebutton{

float: left; margin-left: 30px; margin-top: -270px; }

  1. twitterwidget{

float: left; margin-top: -670px; padding-left: 30px; }

  1. box2{

background-image: url(UCalgary_MainPageBox2Repeater.png); background-repeat: repeat-y; margin-left: 80px; margin-top: -160px; padding-bottom: 80px; }

#box2 h2{ margin-top: -20px; padding-top: 40px; padding-left: 19px; }

#box2 p{ width: 500px; padding-left: 20px; color: black; }

#chassis{ position: absolute; background-image: url(UCalgary2011_MainPageBacterialChassis.png); width: 400px; height: 206px; background-position: top; text-indent: -99999px; z-index: 1; margin-top: 75px; margin-left: 30px; }

#chassis:hover{ background-position: bottom; }

#circuit{ position: absolute; z-index: 2; margin-top: 170px; margin-left: 100px; }

#promoter{ position: absolute; background-image: url(UCalgary2011_MainPageBacterialPromoter.png); width: 90px; height: 44px; background-position: top; text-indent: -99999px; z-index: 3; margin-top: 155px; margin-left: 80px; }

#promoter:hover{ background-position: bottom; }

#reporter{ position: absolute; background-image: url(UCalgary2011_MainPageBacterialGene.png); width: 90px; height: 53px; background-position: top; text-indent: -99999px; z-index: 4; margin-top: 150px; margin-left: 205px; }

#reporter:hover{ background-position: bottom; }

#sensorimage{ margin-left: 40px; margin-top: 20px; }

#pulloutbox{ position: absolute; margin-left: -75px; margin-top: 60px; }


  1. box3{

position: relative; margin-left: 230px; margin-top: -20px; }

#box3 p, table{ background-image: url(UCalgary_MainPageBox3Repeater.png); background-repeat: repeat-y; width: 673px; padding-left: 85px; padding-right: 20px; }

#box3 table tr td{ padding-left: 10px; padding-right: 10px; padding-top: 10px; padding-bottom: 10px; margin: 0; }

#notsmalltable tr td img{ width: 240px; }

#smalltable{ padding-left: 85px; padding-right: 35px; width: 650px; }

#smalltable tr td img{ width: 155px; padding-top: 10px; padding-bottom: 5px; padding-left: 10px; }


#box3 h2{ background-image: url(UCalgary_MainPageBox3Repeater.png); background-repeat: repeat-y; padding-left: 95px; padding-bottom: 20px; margin-bottom: -5px; }

  1. box4{

background-image:url(UCalgary_MainPageBox4.png); width: 314px; height: 264px; position: relative; margin-left: 620px; margin-top: -110px; }

#box4 div h3, #box4 div p{ color: white; margin-left: 15px; margin-right: 10px; } #box4 div h3{ padding-top: 15px; }

#subdefault{ display:block; } #subpromoter{ display:none; } #subreporter{ display:none; } #subchassis{ display:none; }


</style>


<a style="position: absolute; float: right; margin-left: 788px; margin-top: 11px;" href="https://2011.igem.org/Team:Calgary/Notebook/PostRegionals"><img style="width: 150px;" src="UCalgary2011_Fred_Flag.png"></a> <a style="position: relative; float: right; left: -46px; margin-top: 75px;" href="https://2011.igem.org/Team:Calgary/Project/DataPage"><img style="width: 150px;" src="UCalgary2011_Fred_Data_Page.png"></a>

<img id="titlebar" src="UCalgary_TitleBar.png">

Welcome!

<img class="boxtop1" src="UCalgary_MainPageBox1.png">

This year, the University of Calgary iGEM team aims to build a biosensor for naphthenic acids (NAs). NAs are organic acids that are toxic to terrestrial and aquatic wildlife. Because they are waste products of the bitumen extraction process that mines petroleum from the Alberta oil sands, the accumulation of NAs in the on-site settling ponds (tailings ponds) is an environmental concern requiring constant monitoring and eventual remediation. In addition to harming the environment, NAs also contribute to refinery equipment corrosion, directly increasing maintenance and replacement costs. Currently, sophisticated and expensive procedures, such as Fourier Transform Infrared Spectrometer (FTIR) or gas chromatography-mass spectrometry, are needed to identify and assess NA concentrations in the environment. A bacterial sensor, if developed, could greatly improve the cost- and time-efficiency of NA detection, and facilitate a workable approach for remediation.

<img class="boxbottom1" src="UCalgary_MainPageBox1Bottom.png">

Our Naphthenic Acid Biosensor



A detailed description of our project can be seen <a style="color:#42ffd9;" href="https://2011.igem.org/Team:Calgary/Project">here</a>! Below is a picture of what our final product will look like. We will have our biosensing bacterium in a container that the sample to be measured can be added to.



Roll over the bacterium below!

An NA-Sensitive Promoter

The most critical component of our biosensor is a naphthenic acid sensory element. This would likely be a promoter element. The major challenge for this was that given the lack of available information on NA degradation, there was no NA sensitive promoter available in the literature for us to use. We needed to develop methods to search for such an element. These included our novel “fishing” method as well as our bioinformatics approach. Click on the promoter to learn more about this!

An Electrochemical Reporter

We need a reliable reporter for our system. Given the highly variable and often turbid nature of oil sands tailings ponds however, we needed a special kind of reporter. We chose to use the lacZ gene, but characterize it as an electrochemical reporter. Click the gene to learn more!

The Vision: A Naphthenic Acid Biosensor

We plan to create a relatively small, cheap biosensing device that can respond to naphthenic acids and produce an electrochemical output. Roll over the individual parts for more details.

<img id="sensorimage" src="UCalgary2011_MainPageDevice.png"> <img id="pulloutbox" src="UCalgary2011_MainPageBacterialZoomBox.png"> <img id="circuit" src="UCalgary2011_BacterialCircuitBase.png"> <a id="promoter" href="https://2011.igem.org/Team:Calgary/Project/Promoter">Promoter</a> <a id="reporter" href="https://2011.igem.org/Team:Calgary/Project/Reporter">Reporter</a> <a id="chassis" href="https://2011.igem.org/Team:Calgary/Project/Chassis">Chassis</a>

<img class="boxtop3" src="UCalgary_MainPageBox3.png">

Our Sponsors

<tbody> </tbody>
<a href="http://www.ucalgary.ca/"><img src="UCalgary_UofCLogo.png"></a> <a href="http://www.albertatechfutures.ca/"><img src="UCalgary2011_AITF_Logo_Small.png"></a>
<tbody> </tbody>
<a href="http://www.osli.ca/"><img style="width: 510px;" src="UCalgary2011_OSLI_Banner_Logo_Small.png"></a>
<tbody> </tbody>
<a href="http://www.osrin.ualberta.ca/"><img src="UCalgary_OSRIN_Logo.png"></a> <a href="http://www.neb.com/nebecomm/default.asp"><img src="UCalgary_NEB_Logo.png"></a> <a href="http://www.ucalgary.ca/bhsc/"><img src="UCalgary_BHSc_Logo.png"></a>
<a href="http://www.vwr.com/"><img src="UCalgary_VWR_Logo.png"></a> <a href="http://www.nexeninc.com/"><img src="UCalgary_Nexen_Logo.png"></a> <a href="http://www.sarstedt.com/php/main.php"><img src="UCalgary_Sarstedt_Logo.png"></a>
<a href="http://www.sigmaaldrich.com/canada-english.html?cm_mmc=Google_eBusiness-_-search-_-SIAL+Countries_Countries-_-sigma+aldrich+canada_BROAD&cm_guid=1-_-100000000000000025748-_-7408517799"><img src="UCalgary_Sigma_Aldrich_Logo.png"></a> <a href="http://www.mhc.ab.ca/"><img src="UCalgary2011_Medicine_Hat_College_Logo.png"></a>

<img class="boxbottom3" src="UCalgary_MainPageBox3Bottom.png">

<script src="http://widgets.twimg.com/j/2/widget.js"></script>

<script> new TWTR.Widget({

 version: 2,
 type: 'profile',
 rpp: 5,
 interval: 30000,
 width: 250,
 height: 300,
 theme: {
   shell: {
     background: '#006ebd',
     color: '#ffffff'
   },
   tweets: {
     background: '#003961',
     color: '#ffffff',
     links: '#42ffd9'
   }
 },
 features: {
   scrollbar: true,
   loop: false,
   live: false,
   hashtags: true,
   timestamp: true,
   avatars: false,
   behavior: 'all'
 }

}).render().setUser('iGEMCalgary').start();

</script>
<a target="_blank" href="https://twitter.com/intent/user?screen_name=iGEMCalgary" class="twtr-profile-img-anchor"><img alt="profile" class="twtr-profile-img" src="Team_Logo_Updated_Twitter_normal.png"></a>

iGEM Calgary

<a target="_blank" href="https://twitter.com/intent/user?screen_name=iGEMCalgary">iGEMCalgary</a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=iGEMCalgary"><img alt="iGEMCalgary profile" src="Team_Logo_Updated_Twitter_normal.png"></a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=iGEMCalgary" class="twtr-user">iGEMCalgary</a> <a class="tweet-url username" data-screen-name="UCLiGEM" href="http://twitter.com/UCLiGEM" target="_blank">@UCLiGEM</a> Google should have a massive repository of fonts online that you can directly reference in your CSS. Tried searching for it? <a target="_blank" class="twtr-timestamp" time="Tue Jun 12 05:50:45 +0000 2012" href="https://twitter.com/iGEMCalgary/status/212421664149995521">2 days ago</a> · <a target="_blank" class="twtr-reply" href="https://twitter.com/intent/tweet?in_reply_to=212421664149995521">reply</a> · <a target="_blank" class="twtr-rt" href="https://twitter.com/intent/retweet?tweet_id=212421664149995521">retweet</a> · <a target="_blank" class="twtr-fav" href="https://twitter.com/intent/favorite?tweet_id=212421664149995521">favorite</a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=iGEMCalgary"><img alt="iGEMCalgary profile" src="Team_Logo_Updated_Twitter_normal.png"></a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=iGEMCalgary" class="twtr-user">iGEMCalgary</a> <a class="tweet-url username" data-screen-name="Nesciosquid" href="http://twitter.com/Nesciosquid" target="_blank">@Nesciosquid</a> Sadly, he isn't on the team this year, but we will be certain to pass on the message! <a target="_blank" class="twtr-timestamp" time="Mon May 28 00:19:49 +0000 2012" href="https://twitter.com/iGEMCalgary/status/206902562056716289">17 days ago</a> · <a target="_blank" class="twtr-reply" href="https://twitter.com/intent/tweet?in_reply_to=206902562056716289">reply</a> · <a target="_blank" class="twtr-rt" href="https://twitter.com/intent/retweet?tweet_id=206902562056716289">retweet</a> · <a target="_blank" class="twtr-fav" href="https://twitter.com/intent/favorite?tweet_id=206902562056716289">favorite</a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=iGEMCalgary"><img alt="iGEMCalgary profile" src="Team_Logo_Updated_Twitter_normal.png"></a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=iGEMCalgary" class="twtr-user">iGEMCalgary</a> Great iGEM workshop this weekend by <a class="tweet-url username" data-screen-name="ABInnovates" href="http://twitter.com/ABInnovates" target="_blank">@ABInnovates</a>, featuring great guest speakers! Entrepreneurial bootcamp by <a class="tweet-url username" data-screen-name="venturealberta" href="http://twitter.com/venturealberta" target="_blank">@venturealberta</a> was fantastic! <a target="_blank" class="twtr-timestamp" time="Sun May 27 21:26:37 +0000 2012" href="https://twitter.com/iGEMCalgary/status/206858973897437184">18 days ago</a> · <a target="_blank" class="twtr-reply" href="https://twitter.com/intent/tweet?in_reply_to=206858973897437184">reply</a> · <a target="_blank" class="twtr-rt" href="https://twitter.com/intent/retweet?tweet_id=206858973897437184">retweet</a> · <a target="_blank" class="twtr-fav" href="https://twitter.com/intent/favorite?tweet_id=206858973897437184">favorite</a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=Genomengin"><img alt="Genomengin profile" src="twit_normal.jpg"></a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=Genomengin" class="twtr-user">Genomengin</a> Four bases in RNA? Think again… <a href="http://t.co/RvkKcw0Y" target="_blank" urlentities="[object Object]" rel="nofollow">nblo.gs/xPD56</a> <a target="_blank" class="twtr-timestamp" time="Sat May 19 11:22:57 +0000 2012" href="https://twitter.com/Genomengin/status/203807953529225217">26 days ago</a> · <a target="_blank" class="twtr-reply" href="https://twitter.com/intent/tweet?in_reply_to=203807953529225217">reply</a> · <a target="_blank" class="twtr-rt" href="https://twitter.com/intent/retweet?tweet_id=203807953529225217">retweet</a> · <a target="_blank" class="twtr-fav" href="https://twitter.com/intent/favorite?tweet_id=203807953529225217">favorite</a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=ewaltersi"><img alt="ewaltersi profile" src="iGEM_worlds_small_normal.png"></a>

<a target="_blank" href="https://twitter.com/intent/user?screen_name=ewaltersi" class="twtr-user">ewaltersi</a> Free stickers, pins, & bubble wrap? Awwww yeah, the <a class="tweet-url username" data-screen-name="iGEM" href="http://twitter.com/iGEM" target="_blank">@iGEM</a> distribution is here! (And some cool DNA too, I guess) <a target="_blank" class="twtr-timestamp" time="Wed May 16 21:00:39 +0000 2012" href="https://twitter.com/ewaltersi/status/202866174550228994">29 days ago</a> · <a target="_blank" class="twtr-reply" href="https://twitter.com/intent/tweet?in_reply_to=202866174550228994">reply</a> · <a target="_blank" class="twtr-rt" href="https://twitter.com/intent/retweet?tweet_id=202866174550228994">retweet</a> · <a target="_blank" class="twtr-fav" href="https://twitter.com/intent/favorite?tweet_id=202866174550228994">favorite</a>

<a target="_blank" href="https://twitter.com"><img alt="" src="//widgets.twimg.com/i/widget-bird.png"></a> <a target="_blank" class="twtr-join-conv" style="color:#ffffff" href="https://twitter.com/iGEMCalgary">Join the conversation</a>

<a id="likebutton" href="http://www.facebook.com/pages/Calgary-iGEM/215971681759173"> <img src="UCalgary_FacebookLikeButton_Small.png"> </a>




You can write a background of your team here. Give us a background of your team, the members, etc. Or tell us more about something of your choosing.
Colorado State logo.png

Tell us more about your project. Give us background. Use this as the abstract of your project. Be descriptive but concise (1-2 paragraphs)

Your team picture
Team Colorado_State


Home Team Official Team Profile Project Parts Submitted to the Registry Modeling Notebook Safety Attributions