Team:UIUC Illinois

From 2013.igem.org

Revision as of 16:59, 1 September 2013

/* Removing wiki-like stuff */ /* Generously provided by Team DTU Denmark*/ /****************************/

1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {

   display:none;}

/* Redesigning the topmenu */ /***************************/ body {

   margin: 10px 0 0 0;
   padding: 0;}

1. top-section {

   width: 965px;
   height: 0;
   margin: 0 auto;
   padding: 0;
   border: none;}

1. menubar {

   font-size: 65%;
   top: -14px;}

.left-menu:hover {

   background-color: transparent;}

1. menubar li a {

  background-color: transparent;}

1. menubar:hover {

   color: white;}

1. menubar li a {

   color: transparent;}

1. menubar:hover li a {

   color: white;}

1. menubar > ul > li:last-child {

   display:none;}

/* Redesigning Table Of Content */ /* Generously provided by Team DTU Denmark*/ /********************************/ table.toc, #toctitle, .toc #toctitle, #toc .toctitle, .toc .toctitle {

   text-align: left;}

1. toctitle {

   margin: 5px 0;}

.toc, #toc {

   background-color: #F6F6F6;
   border: 1px solid #CCCCCC;
   box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15);
   -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.15); /* for the Safari browser*/
   float: left;
   width: 228px;
   display: block;
   overflow: hidden;
   padding: 0;}

1. toc ul, .toc ul {

   margin: 0 5px 5px 5px;}

.toc ul li {

   padding-left: 12px;
   text-indent: -12px;
   /*width: 200px;*/}

.toc ul li ul li {

   padding-left: 30px;
   text-indent: -24px;
   /*width: 170px;*/}

1. toc ul ul, .toc ul ul {

   margin: 0;}

.toc {

   margin-left: -250px;
   margin-top: 20px;}

.stickBelowNavigation {

   position: fixed;
      top: 35px;
      left: 50%;
   margin-left: -462px;}

.tochidden {

   position: static;
   margin-left: -250px;}

/* Start of UIUC Stuff */ /*********************/ /*********************/ /*********************/

body{ width:1000px; background:url(); /*background-color:#000;*/ margin:auto; padding-top:10px; font-family:Verdana, Geneva, sans-serif; }

1. slides{

display:none; width:730px; padding:10px; }

1. sandbox{

width:1000px; height:auto; margin:auto; font-family:inherit; background-color:#FFF; }

1. container{

width:750px; padding-top:15px;

       padding-bottom:15px;
       padding-left:15px;
       padding-right:5px;

margin:auto; border:2px solid; border-color:#FFF; border-radius:25px; }

1. logo_box{

width:720px; margin-bottom:10px; padding-top:0px; padding-left:10px; padding-right:10px; padding-bottom:10px; }

1. major_image{

width:720px; padding:10px; }

1. abstract{

width:720px; margin-top:10px; margin-bottom:10px; padding:15px; text-align:justify; font-size:16px; font-family: 'Rosario', sans-serif; }

1. sponsor_text{

margin:auto; text-align:center; font-family:'Rosario',sans-serif; font-size:18px; }

1. nav_bar{

width:180px; height:800px; padding-top:15px; padding-left:5px; padding-right:5px; background-color:#6F0022; border:2px solid; border-color:#6F0022; border-radius:25px; }

1. igem{

width:160px; margin-bottom:10px; background-color:#6F0022; }

1. sponsor_outerbox{

width:1000px; margin-bottom:5px; padding-left:30px; padding-top:5px; height:160px; }

1. sponsor_innerbox{

float:left; padding-left:5px; padding-right:5px; padding-bottom:50px; }

1. bar_box{

width:720px; margin:auto; }

.left{ float:left; }

.right{ float:right; }

1. accordion{

padding-top:120px; }

.Accordion { border-left: solid 1px gray; border-right: solid 1px black; border-bottom: solid 1px gray; overflow: hidden; } .AccordionPanel { margin: 0px; padding: 0px; } .AccordionPanelTab { background-color: #CCCCCC; border-top: solid 3px black; border-bottom: solid 1px white; margin: 0px; padding: 2px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none; height:30px; } .AccordionPanelContent { overflow: auto; margin: 5px; padding: 0px; height: auto; } .AccordionPanelOpen .AccordionPanelTab { background-color: #EEEEEE; } .AccordionPanelTabHover { color: #903; } .AccordionPanelOpen .AccordionPanelTabHover { color: #903; } .AccordionFocused .AccordionPanelTab { background-color: #666; } .AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #CCC; }

@media print {

 .Accordion {
 overflow: visible !important;
 }
 .AccordionPanelContent {
 display: block !important;
 overflow: visible !important;
 height: auto !important;
 }

} (function() {

if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};

Spry.Widget.Accordion = function(element, opts) { this.element = this.getElement(element); this.defaultPanel = 0; this.hoverClass = "AccordionPanelTabHover"; this.openClass = "AccordionPanelOpen"; this.closedClass = "AccordionPanelClosed"; this.focusedClass = "AccordionFocused"; this.enableAnimation = true; this.enableKeyboardNavigation = true; this.currentPanel = null; this.animator = null; this.hasFocus = null;

this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP; this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN;

this.useFixedPanelHeights = true; this.fixedPanelHeight = 0;

Spry.Widget.Accordion.setOptions(this, opts, true);

if (this.element) this.attachBehaviors(); };

Spry.Widget.Accordion.prototype.getElement = function(ele) { if (ele && typeof ele == "string") return document.getElementById(ele); return ele; };

Spry.Widget.Accordion.prototype.addClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) return; ele.className += (ele.className ? " " : "") + className; };

Spry.Widget.Accordion.prototype.removeClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) return; ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); };

Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps) { if (!optionsObj) return; for (var optionName in optionsObj) { if (ignoreUndefinedProps && optionsObj[optionName] == undefined) continue; obj[optionName] = optionsObj[optionName]; } };

Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel) { if (panel) this.addClassName(this.getPanelTab(panel), this.hoverClass); return false; };

Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel) { if (panel) this.removeClassName(this.getPanelTab(panel), this.hoverClass); return false; };

Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex) { var panelA = this.currentPanel; var panelB;

if (typeof elementOrIndex == "number") panelB = this.getPanels()[elementOrIndex]; else panelB = this.getElement(elementOrIndex);

if (!panelB || panelA == panelB) return null;

var contentA = panelA ? this.getPanelContent(panelA) : null; var contentB = this.getPanelContent(panelB);

if (!contentB) return null;

if (this.useFixedPanelHeights && !this.fixedPanelHeight) this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight;

if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else { if(contentA) { contentA.style.display = "none"; contentA.style.height = "0px"; } contentB.style.display = "block"; contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto"; }

if(panelA) { this.removeClassName(panelA, this.openClass); this.addClassName(panelA, this.closedClass); }

this.removeClassName(panelB, this.closedClass); this.addClassName(panelB, this.openClass);

this.currentPanel = panelB;

return panelB; };

Spry.Widget.Accordion.prototype.closePanel = function() {

if (!this.useFixedPanelHeights && this.currentPanel) { var panel = this.currentPanel; var content = this.getPanelContent(panel); if (content) { if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else { content.style.display = "none"; content.style.height = "0px"; } } this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); this.currentPanel = null; } };

Spry.Widget.Accordion.prototype.openNextPanel = function() { return this.openPanel(this.getCurrentPanelIndex() + 1); };

Spry.Widget.Accordion.prototype.openPreviousPanel = function() { return this.openPanel(this.getCurrentPanelIndex() - 1); };

Spry.Widget.Accordion.prototype.openFirstPanel = function() { return this.openPanel(0); };

Spry.Widget.Accordion.prototype.openLastPanel = function() { var panels = this.getPanels(); return this.openPanel(panels[panels.length - 1]); };

Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel) { if (panel != this.currentPanel) this.openPanel(panel); else this.closePanel();

if (this.enableKeyboardNavigation) this.focus();

if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true;

return false; };

Spry.Widget.Accordion.prototype.onFocus = function(e) { this.hasFocus = true; this.addClassName(this.element, this.focusedClass); return false; };

Spry.Widget.Accordion.prototype.onBlur = function(e) { this.hasFocus = false; this.removeClassName(this.element, this.focusedClass); return false; };

Spry.Widget.Accordion.KEY_UP = 38; Spry.Widget.Accordion.KEY_DOWN = 40;

Spry.Widget.Accordion.prototype.onKeyDown = function(e) { var key = e.keyCode; if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode)) return true;

var panels = this.getPanels(); if (!panels || panels.length < 1) return false; var currentPanel = this.currentPanel ? this.currentPanel : panels[0]; var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling;

while (nextPanel) { if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */) break; nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling; }

if (nextPanel && currentPanel != nextPanel) this.openPanel(nextPanel);

if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true;

return false; };

Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel) { if (!panel) return;

var tab = this.getPanelTab(panel);

if (tab) { var self = this; Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false); Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false); Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false); } };

Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture) { try { if (element.addEventListener) element.addEventListener(eventType, handler, capture); else if (element.attachEvent) element.attachEvent("on" + eventType, handler); } catch (e) {} };

Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault) { var content = this.getPanelContent(panel); if (isDefault) { this.currentPanel = panel; this.removeClassName(panel, this.closedClass); this.addClassName(panel, this.openClass);

if (content) { if (this.useFixedPanelHeights) {

if (this.fixedPanelHeight) content.style.height = this.fixedPanelHeight + "px"; } else {

content.style.height = "auto"; } } } else { this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass);

if (content) { content.style.height = "0px"; content.style.display = "none"; } }

this.attachPanelHandlers(panel); };

Spry.Widget.Accordion.prototype.attachBehaviors = function() { var panels = this.getPanels(); for (var i = 0; i < panels.length; i++) this.initPanel(panels[i], i == this.defaultPanel);

this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex")); if (this.enableKeyboardNavigation) { var self = this; Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false); Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false); Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false); } };

Spry.Widget.Accordion.prototype.getPanels = function() { return this.getElementChildren(this.element); };

Spry.Widget.Accordion.prototype.getCurrentPanel = function() { return this.currentPanel; };

Spry.Widget.Accordion.prototype.getPanelIndex = function(panel) { var panels = this.getPanels(); for( var i = 0 ; i < panels.length; i++ ) { if( panel == panels[i] ) return i; } return -1; };

Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function() { return this.getPanelIndex(this.currentPanel); };

Spry.Widget.Accordion.prototype.getPanelTab = function(panel) { if (!panel) return null; return this.getElementChildren(panel)[0]; };

Spry.Widget.Accordion.prototype.getPanelContent = function(panel) { if (!panel) return null; return this.getElementChildren(panel)[1]; };

Spry.Widget.Accordion.prototype.getElementChildren = function(element) { var children = []; var child = element.firstChild; while (child) { if (child.nodeType == 1 /* Node.ELEMENT_NODE */) children.push(child); child = child.nextSibling; } return children; };

Spry.Widget.Accordion.prototype.focus = function() { if (this.element && this.element.focus) this.element.focus(); };

Spry.Widget.Accordion.prototype.blur = function() { if (this.element && this.element.blur) this.element.blur(); };

Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts) { this.timer = null; this.interval = 0;

this.fps = 60; this.duration = 500; this.startTime = 0;

this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition;

this.onComplete = null;

this.panel = panel; this.panelToOpen = accordion.getElement(panel); this.panelData = []; this.useFixedPanelHeights = accordion.useFixedPanelHeights;

Spry.Widget.Accordion.setOptions(this, opts, true);

this.interval = Math.floor(1000 / this.fps);

// Set up the array of panels we want to animate.

var panels = accordion.getPanels(); for (var i = 0; i < panels.length; i++) { var p = panels[i]; var c = accordion.getPanelContent(p); if (c) { var h = c.offsetHeight; if (h == undefined) h = 0;

if (p == panel && h == 0) c.style.display = "block";

if (p == panel || h > 0) { var obj = new Object; obj.panel = p; obj.content = c; obj.fromHeight = h; obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0; obj.distance = obj.toHeight - obj.fromHeight; obj.overflow = c.style.overflow; this.panelData.push(obj);

c.style.overflow = "hidden"; c.style.height = h + "px"; } } } };

Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };

Spry.Widget.Accordion.PanelAnimator.prototype.start = function() { var self = this; this.startTime = (new Date).getTime(); this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); };

Spry.Widget.Accordion.PanelAnimator.prototype.stop = function() { if (this.timer) { clearTimeout(this.timer);

// If we're killing the timer, restore the overflow // properties on the panels we were animating!

for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; obj.content.style.overflow = obj.overflow; } }

this.timer = null; };

Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function() { var curTime = (new Date).getTime(); var elapsedTime = curTime - this.startTime;

var i, obj;

if (elapsedTime >= this.duration) { for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; if (obj.panel != this.panel) { obj.content.style.display = "none"; obj.content.style.height = "0px"; } obj.content.style.overflow = obj.overflow; obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto"; } if (this.onComplete) this.onComplete(); return; }

for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration); obj.content.style.height = ((ht < 0) ? 0 : ht) + "px"; }

var self = this; this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); };

})();

Cardiovascular disease (CVD) has been the leading cause of death in the United States for over twenty years and is becoming a severe global health issue. CVD is highly associated with the buildup of plaque in arteries, a disease known as Atherosclerosis. Trimethylamine N-oxide (TMAO) is a known proatherogenic substance, and is abundant in carnivorous humans and those who consume energy drinks. It is the goal of the University of Illinois at Urbana Champaign (UIUC) iGEM Team to lower the amount of TMAO found in such individuals and therefore reduce the risk of atherosclerosis for those afflicted.TMAO is produced when the gut microbiota process the amino acid derivatives L-carnitine and choline. These metabolites are abundant in red meats and energy drinks, and are important bodily compounds; however, humans are intrinsically capable of producing the necessary amounts. When these substances are consumed, specific gut bacteria convert L-carnitine and choline into a harmful byproduct trimethylamine (TMA.) To protect itself, the liver oxidizes TMA into TMAO. We are creating a probiotic to outcompete the gut bacteria for L-carnitine and choline to effectively lower and ultimately remove the atherogenic activity caused by TMAO. Pseudomonas aeruginosa is a bacterium with novel adaptations that enable it to uptake L-carnitine as a sole source of carbon and nitrogen. These genes have been selected for and are being tested in various Escherichia coli.

Home

This is where the home content should go. Ideally, this text should be meaningful and instill hope into the reader.

About

This is where the about content should go. Ideally, this text should be meaningful and instill hope into the reader.

Project

This is where the project content should go. Ideally, this text should be meaningful and instill hope into the reader.

Medal Requirements

This is where the medal requirement content should go. Ideally, this text should be meaningful and instill hope into the reader.

Human Practices

This is where the human practices content should go. Ideally, this text should be meaningful and instill hope into the reader.

Safety

This is where the safety content should go. Ideally, this text should be meaningful and instill hope into the reader.