Team:Tec-Monterrey/safetypage

From 2011.igem.org

(Difference between revisions)
(Created page with "<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <link href="descriplayou...")
 
(62 intermediate revisions not shown)
Line 1: Line 1:
-
<html xmlns="http://www.w3.org/1999/xhtml">
+
<html xmlns="http://www.w3.org/1999/xhtml"><head>
-
<head>
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+
-
<title>Untitled Document</title>
+
-
<link href="descriplayout.css" rel="stylesheet" type="text/css" />
+
-
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
+
-
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css" />
+
-
<link href="submenuverticales.css" rel="stylesheet" type="text/css" media="all" />
+
-
</head>
+
 +
<title>wiki</title>
 +
<style type="text/css">
 +
<!--
 +
#top-section {
 +
      height: 100px;
 +
  border: none;
 +
  height:20px
 +
}
-
<script type="text/javascript">
+
#p-logo {
 +
  position: absolute;
 +
  display: none;
 +
 
 +
}
 +
#footer-box {
 +
display:none;
 +
}
-
(function() { // BeginSpryComponent
 
-
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
+
#catlinks {
 +
    display:none;
 +
}
-
Spry.Widget.CollapsiblePanel = function(element, opts)
+
#search-controls {
-
{
+
  display: none;
-
this.element = this.getElement(element);
+
}
-
this.focusElement = null;
+
-
this.hoverClass = "CollapsiblePanelTabHover";
+
-
this.openClass = "CollapsiblePanelOpen";
+
-
this.closedClass = "CollapsiblePanelClosed";
+
-
this.focusedClass = "CollapsiblePanelFocused";
+
-
this.enableAnimation = true;
+
-
this.enableKeyboardNavigation = true;
+
-
this.animator = null;
+
-
this.hasFocus = false;
+
-
this.contentIsOpen = true;
+
-
this.openPanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_DOWN;
+
#menubar { background: none repeat transparent; }
-
this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP;
+
-
Spry.Widget.CollapsiblePanel.setOptions(this, opts);
 
-
this.attachBehaviors();
+
#menubar ul li a { color: white; }
-
};
+
-
Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)
 
-
{
 
-
if (ele && typeof ele == "string")
 
-
return document.getElementById(ele);
 
-
return ele;
 
-
};
 
-
Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className)
+
.right-menu li a {
-
{
+
color: black;
-
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
+
background: none repeat transparent;
-
return;
+
}
-
ele.className += (ele.className ? " " : "") + className;
+
-
};
+
-
Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className)
+
#content {
-
{
+
    background: none repeat scroll 0 0 transparent;
-
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
+
    border-left: 0 solid;
-
return;
+
    border-right: 0 solid;
-
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
+
}
-
};
+
#content{
 +
    width: 80%;
 +
}
-
Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className)
+
#headover ul{
-
{
+
    list-style: none;
-
if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
+
    display: none;
-
return false;
+
    position: absolute;
-
return true;
+
    top: 1.2em;
-
};
+
    left: 0.2em;
 +
    }
-
Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)
+
  .firstHeading {
-
{
+
    display: none;}
-
if( ele )
+
-
ele.style.display = display;
+
-
};
+
-
Spry.Widget.CollapsiblePanel.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
+
body {
-
{
+
font: 12px Tahoma, Geneva, sans-serif;
-
if (!optionsObj)
+
background-image: url(https://static.igem.org/mediawiki/2011/4/43/Lefondoleposter.png);
-
return;
+
        background-repeat:no-repeat;
-
for (var optionName in optionsObj)
+
      background-size: 100%;
-
{
+
margin: 0;
-
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
+
padding: 0;
-
continue;
+
margin-left: 10%;
-
obj[optionName] = optionsObj[optionName];
+
margin-right: 10%;
-
}
+
color: #FFFFF;
-
};
+
}
-
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOver = function(e)
+
/* ~~ Element/tag selectors ~~ */
-
{
+
ul, ol, dl {
-
this.addClassName(this.getTab(), this.hoverClass);
+
padding: 0;
-
return false;
+
margin: 0;
-
};
+
}
 +
h1, h2, h3, h4, h5, h6, p {
 +
margin-top: 0;
 +
padding-right: 10px;
 +
padding-left: 10px;  
 +
}
 +
a img {
 +
border: none;
 +
}
-
Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
 
-
{
 
-
this.removeClassName(this.getTab(), this.hoverClass);
 
-
return false;
 
-
};
 
-
Spry.Widget.CollapsiblePanel.prototype.open = function()
+
a:link {
-
{
+
-
this.contentIsOpen = true;
+
color: #F90;
-
if (this.enableAnimation)
+
}
-
{
+
a:visited {
-
if (this.animator)
+
color: #c02355;
-
this.animator.stop();
+
text-decoration: underline;
-
this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition });
+
}
-
this.animator.start();
+
a:hover, a:active, a:focus {
-
}
+
text-decoration: none;
-
else
+
}
-
this.setDisplay(this.getContent(), "block");
+
-
this.removeClassName(this.element, this.closedClass);
 
-
this.addClassName(this.element, this.openClass);
 
-
};
 
-
Spry.Widget.CollapsiblePanel.prototype.close = function()
+
.container {
-
{
+
width: 100%;
-
this.contentIsOpen = false;
+
max-width: 1260px;
-
if (this.enableAnimation)
+
min-width: 780px;
-
{
+
overflow: hidden;  
-
if (this.animator)
+
  color:#FFF;
-
this.animator.stop();
+
}
-
this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, false, { duration: this.duration, fps: this.fps, transition: this.transition });
+
-
this.animator.start();
+
-
}
+
-
else
+
-
this.setDisplay(this.getContent(), "none");
+
-
this.removeClassName(this.element, this.openClass);
 
-
this.addClassName(this.element, this.closedClass);
 
-
};
 
-
Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e)
+
.sidebar1 {
-
{
+
float: left;
-
if (this.isOpen())
+
width: 15%;
-
this.close();
+
        padding-bottom: 10px;
-
else
+
background-color:#04191d;
-
this.open();
+
-moz-border-radius: 8px;
 +
-webkit-border-radius: 8px;
-
this.focus();
+
}
 +
.content {
 +
 +
padding: none;
 +
width: 80%;
 +
float: left;
 +
 +
}
-
return this.stopPropagation(e);
 
-
};
 
-
Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
+
.content ul, .content ol {  
-
{
+
padding: 0 15px 15px 40px;
-
this.hasFocus = true;
+
}
-
this.addClassName(this.element, this.focusedClass);
+
-
return false;
+
-
};
+
-
Spry.Widget.CollapsiblePanel.prototype.onBlur = function(e)
 
-
{
 
-
this.hasFocus = false;
 
-
this.removeClassName(this.element, this.focusedClass);
 
-
return false;
 
-
};
 
-
Spry.Widget.CollapsiblePanel.KEY_UP = 38;
+
ul.nav {
-
Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
+
list-style: none;  
 +
border-top:none;
 +
margin-bottom: 15px;
-
Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
+
}
-
{
+
ul.nav li {
-
var key = e.keyCode;
+
border-bottom: 0px solid #04191d;  
-
if (!this.hasFocus || (key != this.openPanelKeyCode && key != this.closePanelKeyCode))
+
-
return true;
+
-
if (this.isOpen() && key == this.closePanelKeyCode)
 
-
this.close();
 
-
else if ( key == this.openPanelKeyCode)
 
-
this.open();
 
-
return this.stopPropagation(e);
+
}
-
};
+
ul.nav a, ul.nav a:visited {
-
Spry.Widget.CollapsiblePanel.prototype.stopPropagation = function(e)
+
padding: 5px 5px 5px 15px;
-
{
+
display: block;  
-
if (e.preventDefault) e.preventDefault();
+
text-decoration: none;
-
else e.returnValue = false;
+
color:#FFF;
-
if (e.stopPropagation) e.stopPropagation();
+
-
else e.cancelBubble = true;
+
-
return false;
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanel.prototype.attachPanelHandlers = function()
+
-
{
+
-
var tab = this.getTab();
+
-
if (!tab)
+
-
return;
+
-
 
+
-
var self = this;
+
-
Spry.Widget.CollapsiblePanel.addEventListener(tab, "click", function(e) { return self.onTabClick(e); }, false);
+
-
Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseover", function(e) { return self.onTabMouseOver(e); }, false);
+
-
Spry.Widget.CollapsiblePanel.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e); }, false);
+
-
 
+
-
if (this.enableKeyboardNavigation)
+
-
{
+
-
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
+
-
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
+
-
// by default.
+
-
 
+
-
// Find the first element within the tab container that has a tabindex or the first
+
-
// anchor tag.
+
-
var tabIndexEle = null;
+
}
-
var tabAnchorEle = null;
+
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
 +
background: #339dff; /*float amarillo*/
 +
color: #FFF;
 +
}
-
this.preorderTraversal(tab, function(node) {
+
.frame {
-
if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
+
font:12px arial;
-
{
+
width:700;
-
var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
+
height:350;
-
if (tabIndexAttr)
+
max-height: 350px;
-
{
+
border:none;
-
tabIndexEle = node;
+
overflow:auto;
-
return true;
+
border:0px solid black;
-
}
+
padding:5;
-
if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
+
}
-
tabAnchorEle = node;
+
.fltrt { 
-
}
+
float: right;
-
return false;
+
margin-left: 8px;
-
});
+
}
 +
.fltlft {
 +
float: left;
 +
margin-right: 8px;
 +
}
 +
.clearfloat {
 +
clear:both;
 +
height:0;
 +
font-size: 1px;
 +
line-height: 0px;
 +
}
-
if (tabIndexEle)
+
/* panel */
-
this.focusElement = tabIndexEle;
+
.panel, .panelcollapsed
-
else if (tabAnchorEle)
+
-
this.focusElement = tabAnchorEle;
+
-
 
+
-
if (this.focusElement)
+
-
{
+
-
Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "focus", function(e) { return self.onFocus(e); }, false);
+
-
Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "blur", function(e) { return self.onBlur(e); }, false);
+
-
Spry.Widget.CollapsiblePanel.addEventListener(this.focusElement, "keydown", function(e) { return self.onKeyDown(e); }, false);
+
-
}
+
-
}
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanel.addEventListener = function(element, eventType, handler, capture)
+
{
{
-
try
+
margin: 3px;
-
{
+
width: auto;
-
if (element.addEventListener)
+
-moz-border-radius: 4px;
-
element.addEventListener(eventType, handler, capture);
+
-webkit-border-radius: 4px;
-
else if (element.attachEvent)
+
border-top-width: 10px;
-
element.attachEvent("on" + eventType, handler);
+
border-right-width: 0px;
-
}
+
border-bottom-width: 10px;
-
catch (e) {}
+
border-left-width: 3px;
-
};
+
padding-bottom: 5px;
 +
        color: #FFF;
 +
}
-
Spry.Widget.CollapsiblePanel.prototype.preorderTraversal = function(root, func)
 
-
{
 
-
var stopTraversal = false;
 
-
if (root)
 
-
{
 
-
stopTraversal = func(root);
 
-
if (root.hasChildNodes())
 
-
{
 
-
var child = root.firstChild;
 
-
while (!stopTraversal && child)
 
-
{
 
-
stopTraversal = this.preorderTraversal(child, func);
 
-
try { child = child.nextSibling; } catch (e) { child = null; }
 
-
}
 
-
}
 
-
}
 
-
return stopTraversal;
 
-
};
 
-
Spry.Widget.CollapsiblePanel.prototype.attachBehaviors = function()
+
table {
-
{
+
    background: none repeat scroll 0 0 transparent}
-
var panel = this.element;
+
-
var tab = this.getTab();
+
-
var content = this.getContent();
+
-
 
+
-
if (this.contentIsOpen || this.hasClassName(panel, this.openClass))
+
-
{
+
-
this.addClassName(panel, this.openClass);
+
-
this.removeClassName(panel, this.closedClass);
+
-
this.setDisplay(content, "block");
+
-
this.contentIsOpen = true;
+
-
}
+
-
else
+
-
{
+
-
this.removeClassName(panel, this.openClass);
+
-
this.addClassName(panel, this.closedClass);
+
-
this.setDisplay(content, "none");
+
-
this.contentIsOpen = false;
+
-
}
+
-
this.attachPanelHandlers();
 
-
};
 
-
Spry.Widget.CollapsiblePanel.prototype.getTab = function()
+
/* panel heading */
 +
.panel h2, .panelcollapsed h2
{
{
-
return this.getElementChildren(this.element)[0];
+
        color: #FFF;
-
};
+
font-weight: normal;
 +
margin: 0px;
 +
padding: 0px;
 +
-moz-border-radius: 3px;
 +
-webkit-border-radius: 3px;
 +
border-bottom: 0px solid #04191d;  
-
Spry.Widget.CollapsiblePanel.prototype.getContent = function()
+
}
-
{
+
-
return this.getElementChildren(this.element)[1];
+
-
};
+
-
Spry.Widget.CollapsiblePanel.prototype.isOpen = function()
+
/* panel heading on rollover */
-
{
+
.panel h2:hover, .panelcollapsed h2:hover {
-
return this.contentIsOpen;
+
background-color: #339dff;
-
};
+
color: #FFF;
 +
}
-
Spry.Widget.CollapsiblePanel.prototype.getElementChildren = function(element)
+
/* heading of a collapsed panel */
 +
.panelcollapsed h2
{
{
-
var children = [];
+
background-image: url(arrow-dn.gif);
-
var child = element.firstChild;
+
background-repeat: no-repeat;
-
while (child)
+
background-position: 280px;
-
{
+
}
-
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
+
-
children.push(child);
+
-
child = child.nextSibling;
+
-
}
+
-
return children;
+
-
};
+
-
Spry.Widget.CollapsiblePanel.prototype.focus = function()
+
/* panel content - do not set borders or paddings */
 +
.panelcontent
{
{
-
if (this.focusElement && this.focusElement.focus)
+
overflow: hidden;
-
this.focusElement.focus();
+
font-size: 14px;
-
};
+
}
-
/////////////////////////////////////////////////////
+
/* collapsed panel content */
 +
.panelcollapsed .panelcontent { display: none; }
-
Spry.Widget.CollapsiblePanel.PanelAnimator = function(panel, doOpen, opts)
+
-->
-
{
+
</style><!--[if lte IE 7]>
-
this.timer = null;
+
<style>
-
this.interval = 0;
+
.content { margin-right: -1px; }
 +
ul.nav a { zoom: 1; } 
 +
</style>
 +
<![endif]-->
-
this.fps = 60;
+
<script type="text/javascript">
-
this.duration = 500;
+
<!--
-
this.startTime = 0;
+
-
this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition;
 
-
this.onComplete = null;
 
-
this.panel = panel;
 
-
this.content = panel.getContent();
 
-
this.doOpen = doOpen;
 
-
Spry.Widget.CollapsiblePanel.setOptions(this, opts, true);
+
i = 0
 +
var speed = 10
-
this.interval = Math.floor(1000 / this.fps);
+
function scrollDown() {
 +
i = i + speed
 +
var div = document.getElementById("frame1")
 +
div.scrollTop = i
 +
if (i > div.scrollHeight - 300) {i = 350}
 +
t1=setTimeout("scrollDown()",100)
 +
}
 +
function scrollUp() {
 +
i = i - speed
 +
var div = document.getElementById("frame1")
 +
div.scrollTop = i
 +
if (i < 0) {i = 0}
 +
t1=setTimeout("scrollUp()",100)
 +
}
-
var c = this.content;
 
-
var curHeight = c.offsetHeight ? c.offsetHeight : 0;
 
-
this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight;
 
-
if (!doOpen)
 
-
this.toHeight = 0;
 
-
else
 
-
{
 
-
if (c.style.display == "none")
 
-
{
 
-
// The content area is not displayed so in order to calculate the extent
 
-
// of the content inside it, we have to set its display to block.
 
-
c.style.visibility = "hidden";
 
-
c.style.display = "block";
 
-
}
 
-
// Clear the height property so we can calculate
 
-
// the full height of the content we are going to show.
 
-
c.style.height = "";
+
// -----------------------------------------------------------------------------------------------
-
this.toHeight = c.offsetHeight;
+
// PANELS
-
}
+
var PANEL_NORMAL_CLASS    = "panel";
-
 
+
var PANEL_COLLAPSED_CLASS = "panelcollapsed";
-
this.distance = this.toHeight - this.fromHeight;
+
var PANEL_HEADING_TAG    = "h2";
-
this.overflow = c.style.overflow;
+
var PANEL_CONTENT_CLASS  = "panelcontent";
 +
var PANEL_COOKIE_NAME    = "panels";
 +
var PANEL_ANIMATION_DELAY = 20; /*ms*/
 +
var PANEL_ANIMATION_STEPS = 10;
-
c.style.height = this.fromHeight + "px";
+
function setUpPanels()
-
c.style.visibility = "visible";
+
-
c.style.overflow = "hidden";
+
-
c.style.display = "block";
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
+
-
 
+
-
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.start = function()
+
{
{
-
var self = this;
+
loadSettings();
-
this.startTime = (new Date).getTime();
+
-
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
+
// get all headings
-
};
+
var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG);
-
 
+
-
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()
+
// go through all tags
-
{
+
for (var i=0; i<headingTags.length; i++)
-
if (this.timer)
+
{
{
-
clearTimeout(this.timer);
+
var el = headingTags[i];
 +
 +
// make sure it's the heading inside a panel
 +
if ( el.parentNode.className != PANEL_COLLAPSED_CLASS)
 +
                    if(el.parentNode.className != PANEL_NORMAL_CLASS)
 +
continue;
 +
-
// If we're killing the timer, restore the overflow property.
+
// get the text value of the tag
-
 
+
var name = el.firstChild.nodeValue;
-
this.content.style.overflow = this.overflow;
+
 +
// look for the name in loaded settings, apply the normal/collapsed class
 +
if (panelsStatus[name] == "false")
 +
el.parentNode.className = PANEL_COLLAPSED_CLASS;
 +
else
 +
if (panelsStatus[name] == "true")
 +
el.parentNode.className = PANEL_NORMAL_CLASS;
 +
else
 +
{
 +
// if no saved setting, see the initial setting
 +
panelsStatus[name] = (el.parentNode.className == PANEL_NORMAL_CLASS) ? "true" : "false";
 +
}
 +
 +
// add the click behavor to headings
 +
el.onclick = function()
 +
{
 +
var target    = this.parentNode;
 +
var name      = this.firstChild.nodeValue;
 +
var collapsed = (target.className == PANEL_COLLAPSED_CLASS);
 +
saveSettings(name, collapsed?"true":"false");
 +
animateTogglePanel(target, collapsed);
 +
};
}
}
 +
}
-
this.timer = null;
+
/**
-
};
+
* Start the expand/collapse animation of the panel
-
 
+
* @param panel reference to the panel div
-
Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
+
*/
 +
function animateTogglePanel(panel, expanding)
{
{
-
var curTime = (new Date).getTime();
+
// find the .panelcontent div
-
var elapsedTime = curTime - this.startTime;
+
var elements = panel.getElementsByTagName("div");
-
 
+
var panelContent = null;
-
if (elapsedTime >= this.duration)
+
for (var i=0; i<elements.length; i++)
{
{
-
if (!this.doOpen)
+
if (elements[i].className == PANEL_CONTENT_CLASS)
-
this.content.style.display = "none";
+
{
-
this.content.style.overflow = this.overflow;
+
panelContent = elements[i];
-
this.content.style.height = this.toHeight + "px";
+
break;
-
if (this.onComplete)
+
}
-
this.onComplete();
+
-
return;
+
}
}
 +
 +
// make sure the content is visible before getting its height
 +
panelContent.style.display = "block";
 +
 +
// get the height of the content
 +
var contentHeight = panelContent.offsetHeight;
 +
 +
// if panel is collapsed and expanding, we must start with 0 height
 +
if (expanding)
 +
panelContent.style.height = "0px";
 +
 +
var stepHeight = contentHeight / PANEL_ANIMATION_STEPS;
 +
var direction = (!expanding ? -1 : 1);
 +
 +
if (direction > 0)
 +
collapseAll();
 +
setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
 +
}
-
var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration);
+
/**
-
 
+
* Change the height of the target
-
this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
+
* @param panelContent reference to the panel content to change height
-
 
+
* @param iteration current iteration; animation will be stopped when iteration reaches PANEL_ANIMATION_STEPS
-
var self = this;
+
* @param stepHeight height increment to be added/substracted in one step
-
this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
+
* @param direction 1 for expanding, -1 for collapsing
-
};
+
*/
-
 
+
function animateStep(panelContent, iteration, stepHeight, direction)
-
Spry.Widget.CollapsiblePanelGroup = function(element, opts)
+
{
{
-
this.element = this.getElement(element);
+
if (iteration<PANEL_ANIMATION_STEPS)
-
this.opts = opts;
+
-
 
+
-
this.attachBehaviors();
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions;
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement;
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren;
+
-
 
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget)
+
-
{
+
-
if (!element || !widget)
+
-
return;
+
-
if (!element.spry)
+
-
element.spry = new Object;
+
-
element.spry.collapsiblePanel = widget;
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.getElementWidget = function(element)
+
-
{
+
-
return (element && element.spry && element.spry.collapsiblePanel) ? element.spry.collapsiblePanel : null;
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.getPanels = function()
+
-
{
+
-
if (!this.element)
+
-
return [];
+
-
return this.getElementChildren(this.element);
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.getPanel = function(panelIndex)
+
-
{
+
-
return this.getPanels()[panelIndex];
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.attachBehaviors = function()
+
-
{
+
-
if (!this.element)
+
-
return;
+
-
 
+
-
var cpanels = this.getPanels();
+
-
var numCPanels = cpanels.length;
+
-
for (var i = 0; i < numCPanels; i++)
+
{
{
-
var cpanel = cpanels[i];
+
panelContent.style.height = Math.round(((direction>0) ? iteration : 10 - iteration) * stepHeight) +"px";
-
this.setElementWidget(cpanel, new Spry.Widget.CollapsiblePanel(cpanel, this.opts));
+
iteration++;
 +
setTimeout(function(){animateStep(panelContent,iteration,stepHeight,direction)}, PANEL_ANIMATION_DELAY);
}
}
-
};
+
else
-
 
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.openPanel = function(panelIndex)
+
-
{
+
-
var w = this.getElementWidget(this.getPanel(panelIndex));
+
-
if (w && !w.isOpen())
+
-
w.open();
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.closePanel = function(panelIndex)
+
-
{
+
-
var w = this.getElementWidget(this.getPanel(panelIndex));
+
-
if (w && w.isOpen())
+
-
w.close();
+
-
};
+
-
 
+
-
Spry.Widget.CollapsiblePanelGroup.prototype.openAllPanels = function()
+
-
{
+
-
var cpanels = this.getPanels();
+
-
var numCPanels = cpanels.length;
+
-
for (var i = 0; i < numCPanels; i++)
+
{
{
-
var w = this.getElementWidget(cpanels[i]);
+
// set class for the panel
-
if (w && !w.isOpen())
+
panelContent.parentNode.className = (direction<0) ? PANEL_COLLAPSED_CLASS : PANEL_NORMAL_CLASS;
-
w.open();
+
// clear inline styles
 +
panelContent.style.display = panelContent.style.height = "";
}
}
-
};
+
}
-
Spry.Widget.CollapsiblePanelGroup.prototype.closeAllPanels = function()
+
// -----------------------------------------------------------------------------------------------
 +
// Load-Save
 +
// -----------------------------------------------------------------------------------------------
 +
/**
 +
* Reads the "panels" cookie if exists, expects data formatted as key:value|key:value... puts in panelsStatus object
 +
*/
 +
function loadSettings()
{
{
-
var cpanels = this.getPanels();
+
// prepare the object that will keep the panel statuses
-
var numCPanels = cpanels.length;
+
panelsStatus = {};
-
for (var i = 0; i < numCPanels; i++)
+
 +
// find the cookie name
 +
var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "=");
 +
if (start == -1) return;
 +
 +
// starting point of the value
 +
start += PANEL_COOKIE_NAME.length+1;
 +
 +
// find end point of the value
 +
var end = document.cookie.indexOf(";", start);
 +
if (end == -1) end = document.cookie.length;
 +
 +
// get the value, split into key:value pairs
 +
var cookieValue = unescape(document.cookie.substring(start, end));
 +
var panelsData = cookieValue.split("|");
 +
 +
// split each key:value pair and put in object
 +
for (var i=0; i< panelsData.length; i++)
{
{
-
var w = this.getElementWidget(cpanels[i]);
+
var pair = panelsData[i].split(":");
-
if (w && w.isOpen())
+
panelsStatus[pair[0]] = pair[1];
-
w.close();
+
}
}
-
};
 
-
 
-
})(); // EndSpryComponent
 
-
 
-
</script>
 
-
 
-
 
-
 
-
<style type="text/css">
 
-
.descripmainlayout {
 
-
float: left;
 
-
height: 768px;
 
-
width: 1024px;
 
-
margin-left:auto;
 
-
margin-right:auto;
 
-
background-color: #FFF;
 
-
}
 
-
.descripmainlayout .descriptexto #CollapsiblePanel1 .CollapsiblePanelTab {
 
-
font-family: Tahoma, Geneva, sans-serif;
 
-
color: #4ECDC4;
 
-
background-color: #333;
 
-
padding: 10px;
 
-
margin-top: 0px;
 
-
margin-right: 50px;
 
-
margin-bottom: 0px;
 
-
margin-left: 50px;
 
-
background-image: url(images/panelesup.png);
 
-
}
 
-
.descripmainlayout .descriptexto #CollapsiblePanel1 .CollapsiblePanelContent {
 
-
font-family: Tahoma, Geneva, sans-serif;
 
-
color: #E5E5E5;
 
-
background-color: #333;
 
-
font-size: 16px;
 
-
margin-right: 50px;
 
-
margin-left: 50px;
 
-
padding: 15px;
 
-
}
 
-
.descripmainlayout .descriptexto #CollapsiblePanel1 .CollapsiblePanelContent div p {
 
-
margin: 15px;
 
}
}
-
.descriplanguage {
+
function expandAll()
-
background-color: #E5E5E5;
+
{
-
float: left;
+
for (var key in panelsStatus)
-
height: 111px;
+
saveSettings(key, "true");
-
width: 262px;
+
 +
setUpPanels();
}
}
-
.descriplogosearch {
+
function collapseAll()
-
float: right;
+
{
-
height: 768px;
+
for (var key in panelsStatus)
-
width: 156px;
+
saveSettings(key, "false");
-
}
+
-
.descripmenu {
+
setUpPanels();
-
float: left;
+
-
height: 657px;
+
-
width: 156px;
+
-
}
+
-
.descriptexto {
+
-
background-color: #E5E5E5;
+
-
float: left;
+
-
height: 657px;
+
-
width: 712px;
+
-
}
+
-
 
+
-
 
+
-
.descripbanner {
+
-
float: left;
+
-
height: 111px;
+
-
width: 606px;
+
-
background-color: #333;
+
-
background-image: url(images/banner.png);
+
-
background-position: center center;
+
-
}
+
-
.descripmainlayout .descriptexto #CollapsiblePanel1 #CollapsiblePanel6 .CollapsiblePanelContent a {
+
-
font-family: Tahoma, Geneva, sans-serif;
+
-
color: #E5E5E5;
+
-
text-decoration: underline;
+
-
font-size: 18px;
+
-
}
+
-
.descripmainlayout .descriptexto #CollapsiblePanel1 #CollapsiblePanel6 .CollapsiblePanelContent a:hover {
+
-
color: #4ECDC4;
+
-
}
+
-
 
+
-
 
+
-
@charset "utf-8";
+
-
/* CSS Document */
+
-
 
+
-
* {
+
-
margin: 0px;
+
-
padding: 0px;
+
-
}
+
-
.maincontainer .menubar #CollapsiblePanel2 .CollapsiblePanelContent #listaproyecto {
+
-
list-style-type: none;
+
-
width: 150px;
+
-
}
+
-
 
+
-
 
+
-
#listaproyecto li a {
+
-
font-family: Tahoma, Geneva, sans-serif;
+
-
color: #333;
+
-
text-decoration: none;
+
-
display: block;
+
-
height: 25px;
+
-
width: 120px;
+
-
padding-left: 20px;
+
-
list-style-type: none;
+
-
}
+
-
 
+
-
#listaproyecto li a:hover {
+
-
background-color: #4ECDC4;
+
-
}
+
-
 
+
-
 
+
-
#listaproyecto li {
+
-
height: 25px;
+
-
width: 100px;
+
-
list-style-type: none;
+
-
}
+
-
.maincontainer .menubar #CollapsiblePanel3 .CollapsiblePanelContent p a {
+
-
font-family: Tahoma, Geneva, sans-serif;
+
-
font-size: 15px;
+
-
color: #333;
+
-
text-decoration: none;
+
-
list-style-type: none;
+
-
}
+
-
.descripmainlayout .descripmenu #CollapsiblePanel3 .CollapsiblePanelContent ul li a {
+
-
color: #333;
+
-
text-decoration: none;
+
-
list-style-type: none;
+
-
}
+
-
.CollapsiblePanelContent ul li a {
+
-
display: block;
+
-
font-family: Tahoma, Geneva, sans-serif;
+
-
color: #333;
+
-
text-decoration: none;
+
-
font-size: 15px;
+
-
height: 25px;
+
-
width: 120px;
+
-
padding-left: 20px;
+
-
list-style-type: none;
+
-
}
+
-
.descripmainlayout .descripmenu #CollapsiblePanel3 .CollapsiblePanelContent ul li a:hover {
+
-
background-color: #4ECDC4;
+
-
list-style-type: none;
+
-
}
+
-
.descripmainlayout .descripmenu #CollapsiblePanel4 .CollapsiblePanelContent ul li a:hover {
+
-
background-color: #4ECDC4;
+
-
}
+
-
.descripmainlayout .descripmenu #CollapsiblePanel5 .CollapsiblePanelContent ul li a:hover {
+
-
background-color: #4ECDC4;
+
-
}
+
-
 
+
-
@charset "UTF-8";
+
-
 
+
-
 
+
-
@charset "UTF-8";
+
-
.CollapsiblePanel {
+
-
margin: 0px;
+
-
padding: 0px;
+
-
border-top-width: 0px;
+
-
border-right-width: 0px;
+
-
border-bottom-width: 0px;
+
-
border-left-width: 0px;
+
-
border-top-style: none;
+
-
border-right-style: none;
+
-
border-bottom-style: none;
+
-
border-left-style: none;
+
-
border-top-color: #FFF;
+
-
border-right-color: #FFF;
+
-
border-bottom-color: #FFF;
+
-
border-left-color: #FFF;
+
-
}
+
-
 
+
-
.CollapsiblePanelTab {
+
-
font: bold 0.7em sans-serif;
+
-
background-color: #FFF;
+
-
margin: 5px;
+
-
padding: 2px;
+
-
cursor: pointer;
+
-
-moz-user-select: none;
+
-
-khtml-user-select: none;
+
-
font-family: Verdana, Geneva, sans-serif;
+
-
font-size: 20px;
+
-
font-weight: normal;
+
-
border-bottom-style: none;
+
}
}
-
/* This is the selector for a CollapsiblePanel's Content area. It's important to note that
+
/**
-
* you should never put any padding on the content area element if you plan to
+
  * Takes data from the panelsStatus object, formats as key:value|key:value... and puts in cookie valid for 365 days
-
  * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
+
  * @param key key name to save
-
* element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
+
  * @paeam value key value
-
*
+
-
* The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
+
-
  * to make the widget function. You can use any class name you want to style a
+
-
  * CollapsiblePanel content container.
+
  */
  */
-
.CollapsiblePanelContent {
+
function saveSettings(key, value)
-
margin: 5px;
+
{
-
padding: 0px;
+
// put the new value in the object
-
font-family: Verdana, Geneva, sans-serif;
+
panelsStatus[key] = value;
-
font-size: 15px;
+
-
text-decoration: none;
+
// create an array that will keep the key:value pairs
-
list-style-type: none;
+
var panelsData = [];
-
}
+
for (var key in panelsStatus)
-
.descripmainlayout .descripmenu .menubar #CollapsiblePanel3 .CollapsiblePanelContent #listaproyecto li a {
+
panelsData.push(key+":"+panelsStatus[key]);
-
text-decoration: none;
+
-
color: #333;
+
// set the cookie expiration date 1 year from now
-
list-style-type: none;
+
var today = new Date();
 +
var expirationDate = new Date(today.getTime() + 365 * 1000 * 60 * 60 * 24);
 +
// write the cookie
 +
document.cookie = PANEL_COOKIE_NAME + "=" + escape(panelsData.join("|")) + ";expires=" + expirationDate.toGMTString();
}
}
-
 
+
// -----------------------------------------------------------------------------------------------
-
/* An anchor tag can be used inside of a CollapsiblePanelTab so that the
+
// Register setUpPanels to be executed on load
-
* keyboard focus ring appears *inside* the tab instead of around the tab.
+
if (window.addEventListener)
-
* This is an example of how to make the text within the anchor tag look
+
{
-
* like non-anchor (normal) text.
+
// the "proper" way
-
*/
+
window.addEventListener("load", setUpPanels, false);
-
.CollapsiblePanelTab a {
+
-
color: #333;
+
-
text-decoration: none;
+
}
}
-
 
+
else
-
/* This is an example of how to change the appearance of the panel tab that is
+
if (window.attachEvent)
-
* currently open. The class "CollapsiblePanelOpen" is programatically added and removed
+
{
-
* from panels as the user clicks on the tabs within the CollapsiblePanel.
+
// the IE way
-
*/
+
window.attachEvent("onload", setUpPanels);
-
.CollapsiblePanelOpen .CollapsiblePanelTab {
+
-
background-color: #4ECDC4;
+
}
}
 +
-->
 +
</script>
-
/* This is an example of how to change the appearance of the panel tab when the
+
</head>
-
  * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
+
<body>
-
* whenever the CollapsiblePanel is closed.
+
<div class="container">
-
*/
+
   
 +
<div class="topbar">
 +
    <div style="filter:alpha(opacity=70);opacity:.7;">
 +
   
 +
 
 +
<img src="https://static.igem.org/mediawiki/2011/2/20/Logotec.png" alt="ITESM" name="teclogo" width="146" height="52" id="teclogo">
 +
      <a href="https://2011.igem.org/Main_Page"><img src="https://static.igem.org/mediawiki/2011/7/73/Logoigemsmall.png" alt="iGEM" name="logoigem" width="70" height="61" id="logoigem"></a>
 +
    <p>&nbsp;</p>
 +
    <p>&nbsp;</p>
 +
  </div>
 +
 
 +
  <div class="sidebar1">
 +
    <ul class="nav">
 +
      <p>&nbsp;</p>
 +
      <!--this is our menu! D: -->
 +
      <li>
 +
      <div class="panelcollapsed">
 +
  <h2>MAIN</h2>
 +
    <div class="panelcontent" style="">
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey">home</a></p>
 +
    <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectdescription">abstract</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/video">videos</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/stepbystep">step by step</a></p>
 +
         
 +
       
 +
    </div>
 +
</div>
 +
      </li>
 +
      <li>
 +
     
 +
      <div class="panelcollapsed">
 +
  <h2>PROJECT</h2>
 +
    <div class="panelcontent" style="">
 +
   
 +
       
 +
                  <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectoverview">overview</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectparts">parts</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectmodeling">genetic frame</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectresults/methods">methods</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectresults">results</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teamha">human approach</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectprotocols">protocols</a><p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/safetypage">safety</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/projectnotebook">notebook</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sampledata">sample data</a></p>
 +
          </div>
 +
</div>
 +
      </li>
 +
      <li>
 +
     
 +
     
 +
      <div class="panelcollapsed">
 +
  <h2>TEAM</h2>
 +
    <div class="panelcontent">
-
.CollapsiblePanelClosed .CollapsiblePanelTab {
+
    <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teammembers">members</a></p>
-
  /* background-color: #EFEFEF */
+
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teaminstallations">headquarters</a></p>
-
}
+
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/microcongreso">micro congress</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teamfriends">friends</a></p>
 +
 
 +
  </div>
 +
</div>
 +
      </li>
 +
  <li>
 +
      <div class="panelcollapsed">
 +
        <h2>EXTRAS</h2>
 +
    <div class="panelcontent">
 +
<p><a href="https://2011.igem.org/Team:Tec-Monterrey/sitemap">site map</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sponsorsplatinum">sponsors platinum</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sponsorsgold">sponsors gold</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/sponsorssilver">sponsors silver</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/specialthanks">special thanks</a></p>
 +
            <p><a href="https://2011.igem.org/Team:Tec-Monterrey/followus">follow us!</a></p>
 +
    </div>
 +
  </div>
 +
      </li>
 +
    </ul>
 +
   
 +
</div>
 +
 
 +
<div class="content">
 +
<div style="
 +
text-align:center;">
 +
<a href="https://2011.igem.org/Team:Tec-Monterrey/safetypage"><img src="https://static.igem.org/mediawiki/2011/3/3d/Safetyqa01.png" > </a>
 +
<a href="https://2011.igem.org/Team:Tec-Monterrey/safetypage/qanda">
 +
<img src="https://static.igem.org/mediawiki/2011/d/d6/Biosafty01.png"> </a>
 +
 +
<!--in sub pages, this divisions should be comments! :D-->
 +
        <div style="
 +
padding:25px 50px;
 +
        background-color:#04191d;
 +
        color:#333;
 +
text-align:left;
 +
margin:5px 30px;
 +
  ">
 +
 +
</head>
-
/* This is an example of how to change the appearance of the panel tab as the
+
<body>
-
* mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
+
<div align="justify">
-
* and removed from panel tab containers as the mouse enters and exits the tab container.
+
<div style="-moz-border-radius: 4px;-webkit-border-radius: 4px;">
-
*/
+
<div class="frame" id="frame1" style="background-color:#e5e5e5;">
-
.CollapsiblePanelTabHover,  .CollapsiblePanelOpen .CollapsiblePanelTabHover {
+
<br>
-
background-color: #4ECDC4;
+
<a href=""><img src="https://static.igem.org/mediawiki/2011/7/78/Qainfo.png" width="300" height="50"> </a>
-
}
+
-
/* This is an example of how to change the appearance of all the panel tabs when the
 
-
* CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed
 
-
* whenever the CollapsiblePanel gains or loses keyboard focus.
 
-
*/
 
-
.CollapsiblePanelFocused .CollapsiblePanelTab {
 
-
}
 
 +
    <p class="textojustif">
 +
<br>
 +
1. Would the materials used in your project and/or your final
 +
product
 +
pose:
 +
<br><br>
 +
a. Risks to the safety and health of team members or others in the
 +
<br><br>
 +
The biological device in which we worked on this project doesn’t pose
 +
a risk to any of the team members’ health if correctly handled, however we
 +
should always consider that they carry an antibiotic resistance.
 +
Nevertheless, we must also take in mind the chemicals employed
 +
in the methods used for the completion of this project. In order to dispose
 +
any of those hazardous substances, besides following the General Safety
 +
Regulations of the Laboratory, we also followed the Safety Regulations of
 +
Centro de Biotecnología FEMSA. For example, in agarose gel electrophoresis
 +
ethidium bromide and SYBR green are commonly used; in this case, we
 +
followed a protocol for handling and disposal of the chemicals, placing objects
 +
contaminated with it in special containers. In the case of pipette tips, those
 +
were treated with benzal and sterilized by autoclave. These measures were
 +
done to avoid direct contact between team members and hazardous material.
 +
<br><br>
 +
b. Risks to the safety and health of the general public if released
 +
by design or accident?
 +
<br><br>
 +
Concerning the risks to people in general, the most dangerous
 +
problem we observed is the exposure to microorganisms that are resistant to
 +
antibiotics, posing a threat on the treatment of many diseases. For this
 +
reason, we concealed our bacteria for lab use only following the appropriate
 +
measures for handling and disposing them, such as sterilizing the tubes and
 +
dishes containing modified bacteria after using them. Regarding chemical
 +
substances, we assured that every chemical used was properly disposed,
 +
even gloves used by the team when they made contact with any hazardous
 +
substance, to make sure no people alien to the lab could be exposed to the
 +
chemicals.
 +
<br><br>
 +
c. Risks to environmental quality if released by design or
 +
accident?
 +
<br><br>
 +
Our biological devices pose few risks to the environment since
 +
we are using enzymes already present in other bacteria and non-dangerous
 +
substrates and products. However, there is a slight environmental concern
 +
in one of our constructs. This construct employs cellulose as a substrate,
 +
and since all plants have cellulose in their cell wall it is possible that they
 +
could be degraded under unusual circumstances, thus generating a negative
 +
environmental impact. Again, caution measures must be taken in order to
 +
have the modified bacteria concealed so they don’t pose a direct threat to the
 +
environment.
 +
<br><br>
 +
d. Risks to security through malicious misuse by individuals,
 +
groups
 +
or states?
 +
<br><br>
 +
Our project doesn’t have any point of risk in regards of biosecurity. Due
 +
to the nature of the process and the microorganisms involved, the devices do
 +
not cause any hazard that could be misused by individuals, groups or states
 +
to affect people’s security and wellbeing.
 +
<br><br>
 +
Please explain your responses (whether yes or no) to these
 +
questions.
 +
Specifically, are any parts or devices in your project associated
 +
(or known to cause):
 +
<br><br>
 +
- pathogenicity, infectivity, or toxicity?
 +
Neither of our devices has an associated risk in these fields. The only
 +
possible concern could be the EstA protein used in the device, because it is
 +
capable of the production of a toxin when the entire sequence is used; but since
 +
only a partial sequence of this protein is needed in the device (only the
 +
membrane expressing part), the toxin cannot be synthesized and the risk is
 +
therefore eliminated.
 +
<br><br>
 +
- threats to environmental quality?
 +
There is a very little, if none at all, concern about threats on the
 +
environment by our devices. As previously explained, if modified bacteria with
 +
the cellulase gene are misused or escape, there is a possibility that plants will
 +
have contact with them, creating a possible environmental damage especially
 +
if the affected organisms are ecologically valuable. However, this scenario
 +
is more a concern than a menace, as bacteria need to grow under
 +
specific conditions, and plants themselves have defense mechanisms against
 +
pathogenic microorganisms, so that possibility is greatly diminished.
 +
<br><br>
 +
- security concerns?
 +
<br><br>
 +
No, our project does not posess any danger to security in general,
 +
because the enzymes are designed only to convert sucrose into glucose and
 +
fructose, and cellulose on glucose. Regarding the rest of the devices, the
 +
parts only complement the enzymes to allow them to express and function
 +
properly, so they don’t pose a security threat.
 +
<br><br>
 +
2. If your response to any of the questions above is yes:
 +
<br><br>
 +
a. Explain how you addressed these issues in project design and while conducting laboratory work.
 +
<br><br>
 +
When designing our project, thanks to the opinion of many professors,
 +
we considered the risks that our device could have because of the enzymes
 +
and the reaction catalyzed. Interestingly enough, the enzymes are already
 +
used in other industries such as food and cleaning industries, so the
 +
measures taken to confine the bacteria were effective in case there was a risk
 +
to the environment or health in general. To accomplish an acceptable safety
 +
level, during the work time at the laboratory, every time bacteria with the
 +
constructs were handled, said work was done inside a laminar flow hood, disinfected before and after being
 +
used. Disposed materials were placed in red bags for biological hazardous
 +
waste, and then sterilized in autoclave. In the end, the material was stored in red
 +
containers so they could be disposed by a certified company.
 +
<br><br>
 +
3. Under what biosafety provisions will / do you operate?
 +
<br><br>
 +
a. Does your institution have its own biosafety rules and if so
 +
what are they?
 +
<br><br>
 +
Up to this date, there is not a general biosafety handbook for the
 +
university’s laboratories. Nevertheless, we used the handbook provided to us
 +
by the university’s research center, that consists in a handbook for handling
 +
and disposal of hazardous biological waste and a handbook with the
 +
safety rules that must be followed within the lab <a href="https://static.igem.org/mediawiki/2011/d/dd/Laboratory.Rules.pdf">(link)</a>
 +
. Thanks to this, we
 +
were able to take the appropriate safety measures in the academic lab where
 +
we worked along the summer for this project.
 +
<br><br>
 +
b. Does your institution have an Institutional Biosafety Committee
 +
equivalent group? If yes, have you discussed your project with
 +
them?<br>
 +
Describe any concerns or changes that were made based on this
 +
review.
 +
<br><br>
 +
Yes, the university’s research center, “Centro de Biotecnologia
 +
FEMSA”, has a Biosecurity Committee, composed of three doctors from the
 +
institution. All of them received information about our project, the laboratory
 +
protocols that we were using, and the biosafety measures we had; this was
 +
done to have our project checked by them so it could be improved.
 +
The Commitee told us that everything was in order and that we were
 +
following appropriately the measures taken in the university. However, one
 +
of them noted a point that we had overlooked: that the use of cellulase
 +
in a construct could affect the environment because cellulose is the main
 +
component of plants, representing thus a little biosafety concern. For this
 +
reason, the Commitee suggested us to follow the already established
 +
biosafety regulations, to not accidentally free transformed bacteria into the
 +
environment.
 +
<br><br>
 +
c. Will / did you receive any biosafety and/or lab training before
 +
beginning your project? If so, describe this training.
 +
<br><br>
 +
Before initiating the project, some of our team members had already
 +
been to a conference about the laboratory rules that must be followed in the
 +
university’s Research Center, “Centro de Biotecnologia FEMSA”. The rest of
 +
us went to this conference when the project started. In this conference, the
 +
Research Center coordinators provided us with the rules that we had to follow in
 +
those laboratories. The rulebook was adapted to the academic laboratory
 +
where we worked, the Genetic Manipulation and Molecular Diagnosis
 +
Laboratory <a href="https://static.igem.org/mediawiki/2011/d/dd/Laboratory.Rules.pdf">(link)</a>.
 +
Also, Marco Mata, head of the Research Center Safety
 +
Commission, supported us in the biosafety aspect of the project, informing us
 +
about the biosafety measures followed in the Research Center, and allowing
 +
us to take the same measures to our lab to work along the summer.
 +
<br><br>
 +
d. Does your country have national biosafety regulations or
 +
guidelines?
 +
<br><br>
 +
In Mexico, in matters of biosafety, there is a Regulation for the handling
 +
of Hazardous Biological Waste, which we followed to properly dispose all
 +
the waste generated by the project. <a href="http://www.salud.gob.mx/unidades/cdi/nom/087ecolssa.html">(link)</a>.
 +
Moreover, there is a Biosafety Law for
 +
Genetically Modified Organisms <a href="http://www.salud.gob.mx/unidades/cdi/nom/compi/ley180305.html">(link)</a>.
 +
</p>
-
 
-
 
-
 
-
 
-
 
-
</style>
 
-
 
-
 
-
 
-
<body>
 
-
<div align="center">
 
-
<div class="descripmainlayout">
 
-
  <div class="descripbanner"></div>
 
-
  <div class="descriplanguage"></div>
 
-
  <div class="descriplogosearch"></div>
 
-
  <div class="descripmenu">
 
-
    <div id="CollapsiblePanel2" class="CollapsiblePanel">
 
-
      <div class="CollapsiblePanelTab" tabindex="0"><a href="paginaigem.html">HOME</a></div>
 
-
    </div>
 
-
    <div id="CollapsiblePanel3" class="CollapsiblePanel">
 
-
      <div class="CollapsiblePanelTab" tabindex="0">PROJECT</div>
 
-
      <div class="CollapsiblePanelContent">
 
-
        <ul>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">parts</a></li>
 
-
          <li><a href="paginasafety.html">safety</a></li>
 
-
          <li><a href="paginadescripcionproject.html">description</a></li>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">modeling</a></li>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">results</a></li>
 
-
        </ul>
 
-
      </div>
 
-
    </div>
 
-
    <div id="CollapsiblePanel4" class="CollapsiblePanel">
 
-
      <div class="CollapsiblePanelTab" tabindex="0">TEAM</div>
 
-
      <div class="CollapsiblePanelContent">
 
-
        <ul>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">members</a></li>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">profile</a></li>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">gallery</a></li>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">installations</a></li>
 
-
        </ul>
 
-
      </div>
 
-
    </div>
 
-
    <div id="CollapsiblePanel5" class="CollapsiblePanel">
 
-
      <div class="CollapsiblePanelTab" tabindex="0">EXTRAS</div>
 
-
      <div class="CollapsiblePanelContent">
 
-
        <ul>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">site map</a></li>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">human approach</a></li>
 
-
          <li><a href="paginamicrocongreso.html">microcongreso</a></li>
 
-
          <li><a href="https://2011.igem.org/Team:Tec-Monterrey">sponsors</a></li>
 
-
        </ul>
 
-
      </div>
 
-
    </div>
 
-
  </div>
 
-
  <div class="descriptexto">
 
-
    <p>&nbsp;</p>
 
-
    <div id="CollapsiblePanel1" class="CollapsiblePanel">
 
-
      <div class="CollapsiblePanelTab" tabindex="0">PROJECT DESCRIPTION</div>
 
-
      <div class="CollapsiblePanelContent"> <div style="text-align: center;">
 
-
        <p> Read our essay here! :D</p>
 
-
<p>&nbsp;</p>
 
-
<p>(coming soon)</p>
 
-
      </div>
 
-
    </div>
 
-
      <p>&nbsp;</p>
 
-
    </div>
 
-
  </div>
 
</div>
</div>
-
<script type="text/javascript">
+
<hr>
-
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
+
<br/>
-
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
+
<input type="button" value="   Up  " onmouseover="scrollUp()" onmouseout="clearTimeout(t1)">
-
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
+
<input type="button" value=" Down " onmouseover="scrollDown()" onmouseout="clearTimeout(t1)">
-
var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4");
+
</div></body></html>
-
var CollapsiblePanel5 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel5");
+
-
</script>
+
-
</body>
+
-
</html>
+

Latest revision as of 20:53, 20 October 2011

wiki

iGEM

 

 



1. Would the materials used in your project and/or your final product pose:

a. Risks to the safety and health of team members or others in the

The biological device in which we worked on this project doesn’t pose a risk to any of the team members’ health if correctly handled, however we should always consider that they carry an antibiotic resistance. Nevertheless, we must also take in mind the chemicals employed in the methods used for the completion of this project. In order to dispose any of those hazardous substances, besides following the General Safety Regulations of the Laboratory, we also followed the Safety Regulations of Centro de Biotecnología FEMSA. For example, in agarose gel electrophoresis ethidium bromide and SYBR green are commonly used; in this case, we followed a protocol for handling and disposal of the chemicals, placing objects contaminated with it in special containers. In the case of pipette tips, those were treated with benzal and sterilized by autoclave. These measures were done to avoid direct contact between team members and hazardous material.

b. Risks to the safety and health of the general public if released by design or accident?

Concerning the risks to people in general, the most dangerous problem we observed is the exposure to microorganisms that are resistant to antibiotics, posing a threat on the treatment of many diseases. For this reason, we concealed our bacteria for lab use only following the appropriate measures for handling and disposing them, such as sterilizing the tubes and dishes containing modified bacteria after using them. Regarding chemical substances, we assured that every chemical used was properly disposed, even gloves used by the team when they made contact with any hazardous substance, to make sure no people alien to the lab could be exposed to the chemicals.

c. Risks to environmental quality if released by design or accident?

Our biological devices pose few risks to the environment since we are using enzymes already present in other bacteria and non-dangerous substrates and products. However, there is a slight environmental concern in one of our constructs. This construct employs cellulose as a substrate, and since all plants have cellulose in their cell wall it is possible that they could be degraded under unusual circumstances, thus generating a negative environmental impact. Again, caution measures must be taken in order to have the modified bacteria concealed so they don’t pose a direct threat to the environment.

d. Risks to security through malicious misuse by individuals, groups or states?

Our project doesn’t have any point of risk in regards of biosecurity. Due to the nature of the process and the microorganisms involved, the devices do not cause any hazard that could be misused by individuals, groups or states to affect people’s security and wellbeing.

Please explain your responses (whether yes or no) to these questions. Specifically, are any parts or devices in your project associated (or known to cause):

- pathogenicity, infectivity, or toxicity? Neither of our devices has an associated risk in these fields. The only possible concern could be the EstA protein used in the device, because it is capable of the production of a toxin when the entire sequence is used; but since only a partial sequence of this protein is needed in the device (only the membrane expressing part), the toxin cannot be synthesized and the risk is therefore eliminated.

- threats to environmental quality? There is a very little, if none at all, concern about threats on the environment by our devices. As previously explained, if modified bacteria with the cellulase gene are misused or escape, there is a possibility that plants will have contact with them, creating a possible environmental damage especially if the affected organisms are ecologically valuable. However, this scenario is more a concern than a menace, as bacteria need to grow under specific conditions, and plants themselves have defense mechanisms against pathogenic microorganisms, so that possibility is greatly diminished.

- security concerns?

No, our project does not posess any danger to security in general, because the enzymes are designed only to convert sucrose into glucose and fructose, and cellulose on glucose. Regarding the rest of the devices, the parts only complement the enzymes to allow them to express and function properly, so they don’t pose a security threat.

2. If your response to any of the questions above is yes:

a. Explain how you addressed these issues in project design and while conducting laboratory work.

When designing our project, thanks to the opinion of many professors, we considered the risks that our device could have because of the enzymes and the reaction catalyzed. Interestingly enough, the enzymes are already used in other industries such as food and cleaning industries, so the measures taken to confine the bacteria were effective in case there was a risk to the environment or health in general. To accomplish an acceptable safety level, during the work time at the laboratory, every time bacteria with the constructs were handled, said work was done inside a laminar flow hood, disinfected before and after being used. Disposed materials were placed in red bags for biological hazardous waste, and then sterilized in autoclave. In the end, the material was stored in red containers so they could be disposed by a certified company.

3. Under what biosafety provisions will / do you operate?

a. Does your institution have its own biosafety rules and if so what are they?

Up to this date, there is not a general biosafety handbook for the university’s laboratories. Nevertheless, we used the handbook provided to us by the university’s research center, that consists in a handbook for handling and disposal of hazardous biological waste and a handbook with the safety rules that must be followed within the lab (link) . Thanks to this, we were able to take the appropriate safety measures in the academic lab where we worked along the summer for this project.

b. Does your institution have an Institutional Biosafety Committee equivalent group? If yes, have you discussed your project with them?
Describe any concerns or changes that were made based on this review.

Yes, the university’s research center, “Centro de Biotecnologia FEMSA”, has a Biosecurity Committee, composed of three doctors from the institution. All of them received information about our project, the laboratory protocols that we were using, and the biosafety measures we had; this was done to have our project checked by them so it could be improved. The Commitee told us that everything was in order and that we were following appropriately the measures taken in the university. However, one of them noted a point that we had overlooked: that the use of cellulase in a construct could affect the environment because cellulose is the main component of plants, representing thus a little biosafety concern. For this reason, the Commitee suggested us to follow the already established biosafety regulations, to not accidentally free transformed bacteria into the environment.

c. Will / did you receive any biosafety and/or lab training before beginning your project? If so, describe this training.

Before initiating the project, some of our team members had already been to a conference about the laboratory rules that must be followed in the university’s Research Center, “Centro de Biotecnologia FEMSA”. The rest of us went to this conference when the project started. In this conference, the Research Center coordinators provided us with the rules that we had to follow in those laboratories. The rulebook was adapted to the academic laboratory where we worked, the Genetic Manipulation and Molecular Diagnosis Laboratory (link). Also, Marco Mata, head of the Research Center Safety Commission, supported us in the biosafety aspect of the project, informing us about the biosafety measures followed in the Research Center, and allowing us to take the same measures to our lab to work along the summer.

d. Does your country have national biosafety regulations or guidelines?

In Mexico, in matters of biosafety, there is a Regulation for the handling of Hazardous Biological Waste, which we followed to properly dispose all the waste generated by the project. (link). Moreover, there is a Biosafety Law for Genetically Modified Organisms (link).


Retrieved from "http://2011.igem.org/Team:Tec-Monterrey/safetypage"