|
|
| (180 intermediate revisions not shown) |
| Line 1: |
Line 1: |
| - | <html>
| + | <html xmlns="http://www.w3.org/1999/xhtml"><head> |
| - | <div id="box" style="width: 700px; margin-left: 137px; padding: 5px; border: 3px solid #000; background-color: #fe2b33;">
| + | <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> |
| - | <div id="template" style="text-align: center; font-weight: bold; font-size: large; color: #f6f6f6; padding: 5px;">
| + | <title>wiki</title> |
| - | This is a template page. READ THESE INSTRUCTIONS.
| + | |
| - | </div>
| + | |
| - | <div id="instructions" style="text-align: center; font-weight: normal; font-size: small; color: #f6f6f6; padding: 5px;">
| + | |
| - | You are provided with this team page template with which to start the iGEM season. You may choose to personalize it to fit your team but keep the same "look." Or you may choose to take your team wiki to a different level and design your own wiki. You can find some examples <a href="https://2009.igem.org/Help:Template/Examples">HERE</a>.
| + | |
| - | <a href="https://2011.igem.org/wiki/index.php?title=Team:Tec-Monterrey&action=edit"> Editar</a>
| + | |
| - | </div>
| + | |
| - | <div id="warning" style="text-align: center; font-weight: bold; font-size: small; color: #f6f6f6; padding: 5px;">
| + | |
| - | You <strong>MUST</strong> have a team description page, a project abstract, a complete project description, a lab notebook, and a safety page. PLEASE keep all of your pages within your teams namespace.
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </html>
| + | |
| - | | + | |
| - | <html xmlns="http://www.w3.org/1999/xhtml"> | + | |
| - | <head> | + | |
| - | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | + | |
| - | <title>Untitled Document</title> | + | |
| - | | + | |
| | <style type="text/css"> | | <style type="text/css"> |
| - | | + | <!-- |
| - | .maincontainer {
| + | #top-section { |
| - | height: 768px;
| + | |
| - | width: 1024px;
| + | height: 100px; |
| - | background-color: #FFF;
| + | border: none; |
| - | margin-left:auto;
| + | height:20px |
| - | margin-right:auto;
| + | |
| - | }
| + | |
| - | .texto {
| + | |
| - | float: left;
| + | |
| - | height: 257px;
| + | |
| - | width: 712px;
| + | |
| - | background-color: #E5E5E5;
| + | |
| - | background-image: url(https://static.igem.org/mediawiki/2011/6/6d/Espaciotextopaginav1.png);
| + | |
| - | background-repeat: no-repeat;
| + | |
| - | background-position: center center;
| + | |
| | } | | } |
| | | | |
| - | .banner {
| + | #p-logo { |
| - | float: left;
| + | position: absolute; |
| - | height: 111px;
| + | display: none; |
| - | width: 606px;
| + | |
| - | background-image: url(https://static.igem.org/mediawiki/2011/4/49/Bannerpaginav1.png);
| + | |
| - | background-repeat: no-repeat;
| + | |
| - | background-color: #333;
| + | |
| - | background-position: center center;
| + | |
| | } | | } |
| - | .language {
| + | #footer-box { |
| - | float: left;
| + | display:none; |
| - | height: 111px;
| + | |
| - | width: 262px;
| + | |
| - | background-color: #E5E5E5;
| + | |
| - | background-image: url(https://static.igem.org/mediawiki/2011/8/8d/Espacioidiomapaginav1.png);
| + | |
| - | background-repeat: no-repeat;
| + | |
| - | background-position: center center;
| + | |
| - | }
| + | |
| - | .maincontainer .texto div {
| + | |
| - | font-family: Tahoma, Geneva, sans-serif;
| + | |
| - | font-size: 18px;
| + | |
| - | color: #E5E5E5;
| + | |
| - | }
| + | |
| - | .maincontainer .texto div p a {
| + | |
| - | text-decoration: underline;
| + | |
| - | font-family: Tahoma, Geneva, sans-serif;
| + | |
| - | color: #E5E5E5;
| + | |
| - | }
| + | |
| - | .maincontainer .texto div p a:hover {
| + | |
| - | color: #4ECDC4;
| + | |
| - | text-decoration: underline;
| + | |
| | } | | } |
| | | | |
| | | | |
| - | .menubar {
| + | #catlinks { |
| - | float: left;
| + | display:none; |
| - | height: 657px;
| + | |
| - | width: 156px;
| + | |
| | } | | } |
| - | .searchlogo {
| + | |
| - | float: right;
| + | #search-controls { |
| - | height: 768px;
| + | display: none; |
| - | width: 156px;
| + | |
| - | }
| + | |
| - | .video {
| + | |
| - | float: left;
| + | |
| - | height: 400px;
| + | |
| - | width: 712px;
| + | |
| - | background-color: #E5E5E5;
| + | |
| - | background-image: url(https://static.igem.org/mediawiki/2011/5/5b/Espaciovideopaginav1.png);
| + | |
| - | background-repeat: no-repeat;
| + | |
| - | background-position: center center;
| + | |
| | } | | } |
| | | | |
| | + | #menubar { background: none repeat transparent; } |
| | | | |
| - | </style>
| |
| | | | |
| - | <script type="text/javascript">
| + | #menubar ul li a { color: white; } |
| - | var Spry;
| + | |
| - | if (!Spry) Spry = {};
| + | |
| - | if (!Spry.Widget) Spry.Widget = {};
| + | |
| | | | |
| - | Spry.Widget.CollapsiblePanel = function(element, opts)
| |
| - | {
| |
| - | 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;
| + | .right-menu li a { |
| - | this.closePanelKeyCode = Spry.Widget.CollapsiblePanel.KEY_UP;
| + | color: black; |
| | + | background: none repeat transparent; |
| | + | } |
| | | | |
| - | Spry.Widget.CollapsiblePanel.setOptions(this, opts);
| + | #content { |
| | + | background: none repeat scroll 0 0 transparent; |
| | + | border-left: 0 solid; |
| | + | border-right: 0 solid; |
| | + | } |
| | + | #content{ |
| | + | width: 80%; |
| | + | } |
| | | | |
| - | this.attachBehaviors();
| + | #headover ul{ |
| - | };
| + | list-style: none; |
| | + | display: none; |
| | + | position: absolute; |
| | + | top: 1.2em; |
| | + | left: 0.2em; |
| | + | } |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.getElement = function(ele)
| + | .firstHeading { |
| - | { | + | display: none;} |
| - | if (ele && (typeof ele == "string"))
| + | |
| - | return document.getElementById(ele);
| + | |
| - | return ele;
| + | |
| - | }; | + | |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.addClassName = function(ele, className)
| + | body { |
| - | { | + | font: 12px Tahoma, Geneva, sans-serif; |
| - | if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) | + | background-image: url(https://static.igem.org/mediawiki/2011/4/43/Lefondoleposter.png); |
| - | return;
| + | background-repeat:no-repeat; |
| - | ele.className += (ele.className ? " " : "") + className; | + | background-size: 100%; |
| - | };
| + | margin: 0; |
| | + | padding: 0; |
| | + | margin-left: 10%; |
| | + | margin-right: 10%; |
| | + | color: #FFFFF; |
| | + | } |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.removeClassName = function(ele, className)
| + | /* ~~ Element/tag selectors ~~ */ |
| - | { | + | ul, ol, dl { |
| - | if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) | + | padding: 0; |
| - | return;
| + | margin: 0; |
| - | ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); | + | } |
| - | }; | + | h1, h2, h3, h4, h5, h6, p { |
| | + | margin-top: 0; |
| | + | padding-right: 10px; |
| | + | padding-left: 10px; |
| | + | } |
| | + | a img { |
| | + | border: none; |
| | + | } |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.hasClassName = function(ele, className)
| |
| - | {
| |
| - | if (!ele || !className || !ele.className || ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)
| |
| - | return false;
| |
| - | return true;
| |
| - | };
| |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.setDisplay = function(ele, display)
| + | a:link { |
| - | { | + | |
| - | if( ele ) | + | color: #F90; |
| - | ele.style.display = display;
| + | } |
| - | }; | + | a:visited { |
| | + | color: #c02355; |
| | + | text-decoration: underline; |
| | + | } |
| | + | a:hover, a:active, a:focus { |
| | + | text-decoration: none; |
| | + | } |
| | | | |
| - | Spry.Widget.CollapsiblePanel.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.CollapsiblePanel.prototype.onTabMouseOver = function(e)
| + | .container { |
| - | { | + | width: 100%; |
| - | this.addClassName(this.getTab(), this.hoverClass); | + | max-width: 1260px; |
| - | return false; | + | min-width: 780px; |
| - | };
| + | overflow: hidden; |
| | + | color:#FFF; |
| | + | } |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.onTabMouseOut = function(e)
| |
| - | {
| |
| - | this.removeClassName(this.getTab(), this.hoverClass);
| |
| - | return false;
| |
| - | };
| |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.open = function()
| + | .sidebar1 { |
| - | { | + | float: left; |
| - | this.contentIsOpen = true; | + | width: 15%; |
| - | if (this.enableAnimation) | + | padding-bottom: 10px; |
| - | {
| + | background-color:#04191d; |
| - | if (this.animator)
| + | -moz-border-radius: 8px; |
| - | this.animator.stop();
| + | -webkit-border-radius: 8px; |
| - | this.animator = new Spry.Widget.CollapsiblePanel.PanelAnimator(this, true, { duration: this.duration, fps: this.fps, transition: this.transition });
| + | |
| - | this.animator.start();
| + | |
| - | } | + | |
| - | else | + | |
| - | this.setDisplay(this.getContent(), "block");
| + | |
| | | | |
| - | this.removeClassName(this.element, this.closedClass);
| + | } |
| - | this.addClassName(this.element, this.openClass); | + | .content { |
| - | };
| + | |
| | + | padding: none; |
| | + | width: 80%; |
| | + | float: left; |
| | + | |
| | + | } |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.close = function()
| |
| - | {
| |
| - | this.contentIsOpen = false;
| |
| - | if (this.enableAnimation)
| |
| - | {
| |
| - | if (this.animator)
| |
| - | 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);
| + | .content ul, .content ol { |
| - | this.addClassName(this.element, this.closedClass); | + | padding: 0 15px 15px 40px; |
| - | }; | + | } |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.onTabClick = function(e)
| |
| - | {
| |
| - | if (this.isOpen())
| |
| - | this.close();
| |
| - | else
| |
| - | this.open();
| |
| | | | |
| - | this.focus();
| + | ul.nav { |
| | + | list-style: none; |
| | + | border-top:none; |
| | + | margin-bottom: 15px; |
| | | | |
| - | return this.stopPropagation(e);
| + | } |
| - | };
| + | ul.nav li { |
| | + | border-bottom: 0px solid #04191d; |
| | | | |
| - | Spry.Widget.CollapsiblePanel.prototype.onFocus = function(e)
| |
| - | {
| |
| - | 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;
| |
| - | Spry.Widget.CollapsiblePanel.KEY_DOWN = 40;
| |
| - |
| |
| - | Spry.Widget.CollapsiblePanel.prototype.onKeyDown = function(e)
| |
| - | {
| |
| - | var key = e.keyCode;
| |
| - | 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) {
| |
| - | if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
| |
| - | {
| |
| - | var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
| |
| - | if (tabIndexAttr)
| |
| - | {
| |
| - | tabIndexEle = node;
| |
| - | return true;
| |
| - | }
| |
| - | if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
| |
| - | tabAnchorEle = node;
| |
| - | }
| |
| - | return false;
| |
| - | });
| |
| | | | |
| - | if (tabIndexEle)
| + | .fltrt { |
| - | this.focusElement = tabIndexEle;
| + | float: right; |
| - | else if (tabAnchorEle)
| + | margin-left: 8px; |
| - | this.focusElement = tabAnchorEle;
| + | } |
| | + | .fltlft { |
| | + | float: left; |
| | + | margin-right: 8px; |
| | + | } |
| | + | .clearfloat { |
| | + | clear:both; |
| | + | height:0; |
| | + | font-size: 1px; |
| | + | line-height: 0px; |
| | + | } |
| | | | |
| - | if (this.focusElement)
| + | /* panel */ |
| - | {
| + | .panel, .panelcollapsed |
| - | 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();
| + | /* panel heading */ |
| - | };
| + | .panel h2, .panelcollapsed h2 |
| - | | + | |
| - | Spry.Widget.CollapsiblePanel.prototype.getTab = function()
| + | |
| | { | | { |
| - | 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; | + | var noimg = 0; |
| | + | var i = 0; |
| | + | var st1 = 100; |
| | + | var st2 = 0; |
| | + | var speed = 10; |
| | + | |
| | + | //url goes here |
| | + | var imgname = new Array(); |
| | + | imgname[0] = "https://static.igem.org/mediawiki/2011/a/a0/Home01.png"; |
| | + | imgname[1] = "https://static.igem.org/mediawiki/2011/4/45/Home02.png"; |
| | + | imgname[2] = "https://static.igem.org/mediawiki/2011/6/6a/Home03.png"; |
| | + | imgname[3] = "https://static.igem.org/mediawiki/2011/d/dd/Home04.png"; |
| | + | imgname[4] = "https://static.igem.org/mediawiki/2011/e/ec/Home05.png"; |
| | + | imgname[5] = "https://static.igem.org/mediawiki/2011/0/03/Home06.png"; |
| | | | |
| - | this.transition = Spry.Widget.CollapsiblePanel.PanelAnimator.defaultTransition; | + | function changeImg(n) { |
| | + | var name = imgname[n]; |
| | + | var imgobj = document.getElementById('imagered'); |
| | + | animTransA(); |
| | + | imgobj.src = name; |
| | + | animTransB(); |
| | + | } |
| | + | function resetAuto(num) { |
| | + | noimg = num; |
| | + | clearTimeout(timg); |
| | + | autoChangeImg(); |
| | + | } |
| | | | |
| - | this.onComplete = null; | + | function autoChangeImg() { |
| | + | var s = 500; /*ms*/ |
| | + | changeImg(noimg); |
| | + | noimg++; |
| | + | if (noimg > 4) { noimg = 0;} |
| | + | timg = setTimeout("autoChangeImg()",10*s); |
| | + | } |
| | + | function animTransA() { |
| | + | st1 -= speed; |
| | + | img = document.getElementById('imagered'); |
| | + | img.style.opacity = st1/100; |
| | + | img.style.filter = 'alpha(opacity=' + st1 + ')'; |
| | + | if (st1 > 0) { t2=setTimeout("animTransA()",50); } |
| | + | else { st1 = 100;} |
| | + | } |
| | + | function animTransB () { |
| | + | st2 += speed; |
| | + | img = document.getElementById('imagered'); |
| | + | img.style.opacity = st2/100; |
| | + | img.style.filter = 'alpha(opacity=' + st2 + ')'; |
| | + | if (st2 < 100) { t3=setTimeout("animTransB()",50); } |
| | + | else { st2 = 0;} |
| | + | } |
| | + | function resetAlpha() { |
| | + | clearTimeout(t2); |
| | + | clearTimeout(t3); |
| | + | img = document.getElementById('imagered'); |
| | + | img.style.opacity = 1; |
| | + | st1 = 100; st2 = 0; |
| | + | img.style.filter = 'alpha(opacity=' + 100 + ')'; |
| | + | } |
| | | | |
| - | this.panel = panel;
| |
| - | this.content = panel.getContent();
| |
| - | this.doOpen = doOpen;
| |
| | | | |
| - | Spry.Widget.CollapsiblePanel.setOptions(this, opts, true);
| + | // ----------------------------------------------------------------------------------------------- |
| | + | // PANELS |
| | + | var PANEL_NORMAL_CLASS = "panel"; |
| | + | var PANEL_COLLAPSED_CLASS = "panelcollapsed"; |
| | + | var PANEL_HEADING_TAG = "h2"; |
| | + | var PANEL_CONTENT_CLASS = "panelcontent"; |
| | + | var PANEL_COOKIE_NAME = "panels"; |
| | + | var PANEL_ANIMATION_DELAY = 20; /*ms*/ |
| | + | var PANEL_ANIMATION_STEPS = 10; |
| | | | |
| - | this.interval = Math.floor(1000 / this.fps); | + | function setUpPanels() |
| | + | { |
| | + | loadSettings(); |
| | + | |
| | + | // get all headings |
| | + | var headingTags = document.getElementsByTagName(PANEL_HEADING_TAG); |
| | | | |
| - | var c = this.content;
| |
| | | | |
| - | var curHeight = c.offsetHeight ? c.offsetHeight : 0; | + | // go through all tags |
| - | this.fromHeight = (doOpen && c.style.display == "none") ? 0 : curHeight; | + | for (var i=0; i<headingTags.length; i++) |
| | + | { |
| | + | 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 (!doOpen) | + | // get the text value of the tag |
| - | this.toHeight = 0;
| + | var name = el.firstChild.nodeValue; |
| - | else
| + | |
| - | {
| + | // look for the name in loaded settings, apply the normal/collapsed class |
| - | if (c.style.display == "none") | + | if (panelsStatus[name] == "false") |
| | + | el.parentNode.className = PANEL_COLLAPSED_CLASS; |
| | + | else |
| | + | if (panelsStatus[name] == "true") |
| | + | el.parentNode.className = PANEL_NORMAL_CLASS; |
| | + | else |
| | { | | { |
| - | // The content area is not displayed so in order to calculate the extent | + | // if no saved setting, see the initial setting |
| - | // of the content inside it, we have to set its display to block. | + | panelsStatus[name] = (el.parentNode.className == PANEL_NORMAL_CLASS) ? "true" : "false"; |
| - | | + | |
| - | c.style.visibility = "hidden";
| + | |
| - | c.style.display = "block";
| + | |
| | } | | } |
| - | | + | |
| - | // Clear the height property so we can calculate | + | // add the click behavor to headings |
| - | // the full height of the content we are going to show. | + | el.onclick = function() |
| - | | + | { |
| - | c.style.height = ""; | + | var target = this.parentNode; |
| - | this.toHeight = c.offsetHeight; | + | var name = this.firstChild.nodeValue; |
| | + | var collapsed = (target.className == PANEL_COLLAPSED_CLASS); |
| | + | saveSettings(name, collapsed?"true":"false"); |
| | + | animateTogglePanel(target, collapsed); |
| | + | }; |
| | } | | } |
| | + | } |
| | | | |
| - | this.distance = this.toHeight - this.fromHeight;
| + | /** |
| - | this.overflow = c.style.overflow;
| + | * Start the expand/collapse animation of the panel |
| - | | + | * @param panel reference to the panel div |
| - | c.style.height = this.fromHeight + "px";
| + | */ |
| - | c.style.visibility = "visible";
| + | function animateTogglePanel(panel, expanding) |
| - | 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;
| |
| - | this.startTime = (new Date).getTime();
| |
| - | this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
| |
| - | };
| |
| | | | |
| - | Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stop = function()
| + | // find the .panelcontent div |
| - | {
| + | var elements = panel.getElementsByTagName("div"); |
| - | if (this.timer) | + | var panelContent = null; |
| - | { | + | |
| - | clearTimeout(this.timer);
| + | |
| | | | |
| - | // If we're killing the timer, restore the overflow property.
| |
| | | | |
| - | this.content.style.overflow = this.overflow;
| + | for (var i=0; i<elements.length; i++) |
| - | } | + | |
| - | | + | |
| - | this.timer = null;
| + | |
| - | };
| + | |
| - | | + | |
| - | Spry.Widget.CollapsiblePanel.PanelAnimator.prototype.stepAnimation = function()
| + | |
| - | {
| + | |
| - | var curTime = (new Date).getTime();
| + | |
| - | var elapsedTime = curTime - this.startTime;
| + | |
| - | | + | |
| - | if (elapsedTime >= this.duration)
| + | |
| | { | | { |
| - | 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; |
| | | | |
| - | var ht = this.transition(elapsedTime, this.fromHeight, this.distance, this.duration); | + | |
| | + | // 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(); |
| | | | |
| - | this.content.style.height = ((ht < 0) ? 0 : ht) + "px";
| |
| | | | |
| - | var self = this;
| |
| - | this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval);
| |
| - | };
| |
| | | | |
| - | Spry.Widget.CollapsiblePanelGroup = function(element, opts)
| + | setTimeout(function(){animateStep(panelContent,1,stepHeight,direction)}, PANEL_ANIMATION_DELAY); |
| - | { | + | } |
| - | this.element = this.getElement(element);
| + | |
| - | this.opts = opts;
| + | |
| | | | |
| - | this.attachBehaviors();
| + | /** |
| - | };
| + | * Change the height of the target |
| - | | + | * @param panelContent reference to the panel content to change height |
| - | Spry.Widget.CollapsiblePanelGroup.prototype.setOptions = Spry.Widget.CollapsiblePanel.prototype.setOptions;
| + | * @param iteration current iteration; animation will be stopped when iteration reaches PANEL_ANIMATION_STEPS |
| - | Spry.Widget.CollapsiblePanelGroup.prototype.getElement = Spry.Widget.CollapsiblePanel.prototype.getElement;
| + | * @param stepHeight height increment to be added/substracted in one step |
| - | Spry.Widget.CollapsiblePanelGroup.prototype.getElementChildren = Spry.Widget.CollapsiblePanel.prototype.getElementChildren;
| + | * @param direction 1 for expanding, -1 for collapsing |
| - | | + | */ |
| - | Spry.Widget.CollapsiblePanelGroup.prototype.setElementWidget = function(element, widget)
| + | function animateStep(panelContent, iteration, stepHeight, direction) |
| | { | | { |
| - | if (!element || !widget) | + | if (iteration<PANEL_ANIMATION_STEPS) |
| - | 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++)
| + | |
| - | {
| + | |
| - | var w = this.getElementWidget(cpanels[i]);
| + | |
| - | if (w && w.isOpen())
| + | |
| - | w.close();
| + | |
| - | }
| + | |
| - | }; | + | |
| | | | |
| | + | |
| | + | // find the cookie name |
| | + | var start = document.cookie.indexOf(PANEL_COOKIE_NAME + "="); |
| | + | if (start == -1) return; |
| | + | |
| | | | |
| - | </script>
| |
| | | | |
| | + | // 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; |
| | | | |
| - | <script type="text/javascript">
| + | // get the value, split into key:value pairs |
| - | var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1"); | + | var cookieValue = unescape(document.cookie.substring(start, end)); |
| - | var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2");
| + | var panelsData = cookieValue.split("|"); |
| - | var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
| + | |
| - | var CollapsiblePanel4 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel4"); | + | |
| - | </script>
| + | |
| | | | |
| | | | |
| - | <style type="text/css"> | + | |
| - | @charset "UTF-8";
| + | // split each key:value pair and put in object |
| | + | for (var i=0; i< panelsData.length; i++) |
| | + | { |
| | + | var pair = panelsData[i].split(":"); |
| | + | panelsStatus[pair[0]] = pair[1]; |
| | + | } |
| | | | |
| - | /* SpryCollapsiblePanel.css - version 0.5 - Spry Pre-Release 1.6.1 */
| |
| | | | |
| - | /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
| |
| - |
| |
| - | /* This is the selector for the main CollapsiblePanel container. For our
| |
| - | * default style, the CollapsiblePanel is responsible for drawing the borders
| |
| - | * around the widget.
| |
| - | *
| |
| - | * If you want to constrain the width of the CollapsiblePanel widget, set a width on
| |
| - | * the CollapsiblePanel container. By default, our CollapsiblePanel expands horizontally to fill
| |
| - | * up available space.
| |
| - | *
| |
| - | * The name of the class ("CollapsiblePanel") used in this selector is not necessary
| |
| - | * to make the widget function. You can use any class name you want to style the
| |
| - | * CollapsiblePanel container.
| |
| - | */
| |
| - |
| |
| - | @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;
| |
| | } | | } |
| | | | |
| - | /* This is the selector for the CollapsiblePanelTab. This container houses
| + | function expandAll() |
| - | * the title for the panel. This is also the container that the user clicks
| + | { |
| - | * on to open or close the panel.
| + | for (var key in panelsStatus) |
| - | *
| + | saveSettings(key, "true"); |
| - | * The name of the class ("CollapsiblePanelTab") used in this selector is not necessary
| + | |
| - | * to make the widget function. You can use any class name you want to style an
| + | setUpPanels(); |
| - | * CollapsiblePanel panel tab container.
| + | |
| - | */
| + | |
| - | .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
| + | function collapseAll() |
| - | * you should never put any padding on the content area element if you plan to
| + | { |
| - | * use the CollapsiblePanel's open/close animations. Placing a non-zero padding on the content
| + | for (var key in panelsStatus) |
| - | * element can cause the CollapsiblePanel to abruptly grow in height while the panels animate.
| + | saveSettings(key, "false"); |
| - | *
| + | |
| - | * The name of the class ("CollapsiblePanelContent") used in this selector is not necessary
| + | setUpPanels(); |
| - | * to make the widget function. You can use any class name you want to style a
| + | |
| - | * CollapsiblePanel content container.
| + | |
| - | */
| + | |
| - | .CollapsiblePanelContent {
| + | |
| - | margin: 5px;
| + | |
| - | padding: 0px;
| + | |
| - | font-family: Verdana, Geneva, sans-serif; | + | |
| - | font-size: 15px;
| + | |
| - | text-decoration: none;
| + | |
| - | list-style-type: none;
| + | |
| - | }
| + | |
| - | .descripmainlayout .descripmenu .menubar #CollapsiblePanel3 .CollapsiblePanelContent #listaproyecto li a {
| + | |
| - | text-decoration: none;
| + | |
| - | color: #333;
| + | |
| - | list-style-type: none;
| + | |
| | } | | } |
| | | | |
| - | | + | /** |
| - | /* An anchor tag can be used inside of a CollapsiblePanelTab so that the | + | * Takes data from the panelsStatus object, formats as key:value|key:value... and puts in cookie valid for 365 days |
| - | * keyboard focus ring appears *inside* the tab instead of around the tab. | + | * @param key key name to save |
| - | * This is an example of how to make the text within the anchor tag look | + | * @paeam value key value |
| - | * like non-anchor (normal) text. | + | |
| | */ | | */ |
| - | .CollapsiblePanelTab a {
| + | function saveSettings(key, value) |
| - | color: #333; | + | { |
| - | text-decoration: none; | + | // put the new value in the object |
| | + | panelsStatus[key] = value; |
| | + | |
| | + | // create an array that will keep the key:value pairs |
| | + | var panelsData = []; |
| | + | for (var key in panelsStatus) |
| | + | panelsData.push(key+":"+panelsStatus[key]); |
| | + | |
| | + | // set the cookie expiration date 1 year from now |
| | + | 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(); |
| | } | | } |
| | | | |
| - | /* This is an example of how to change the appearance of the panel tab that is | + | // ----------------------------------------------------------------------------------------------- |
| - | * currently open. The class "CollapsiblePanelOpen" is programatically added and removed
| + | // Register setUpPanels to be executed on load |
| - | * from panels as the user clicks on the tabs within the CollapsiblePanel.
| + | if (window.addEventListener) |
| - | */
| + | { |
| - | .CollapsiblePanelOpen .CollapsiblePanelTab {
| + | // the "proper" way |
| - | background-color: #4ECDC4; | + | window.addEventListener("load", setUpPanels, false); |
| | } | | } |
| - | | + | else |
| - | /* This is an example of how to change the appearance of the panel tab when the | + | if (window.attachEvent) |
| - | * CollapsiblePanel is closed. The "CollapsiblePanelClosed" class is programatically added and removed
| + | { |
| - | * whenever the CollapsiblePanel is closed.
| + | // the IE way |
| - | */
| + | window.attachEvent("onload", setUpPanels); |
| - | | + | |
| - | .CollapsiblePanelClosed .CollapsiblePanelTab {
| + | |
| - | /* background-color: #EFEFEF */
| + | |
| | } | | } |
| | + | --> |
| | + | </script> |
| | | | |
| - | /* This is an example of how to change the appearance of the panel tab as the | + | </head><body onLoad = "autoChangeImg();"> |
| - | * mouse hovers over it. The class "CollapsiblePanelTabHover" is programatically added
| + | |
| - | * and removed from panel tab containers as the mouse enters and exits the tab container.
| + | |
| - | */
| + | |
| - | .CollapsiblePanelTabHover, .CollapsiblePanelOpen .CollapsiblePanelTabHover {
| + | |
| - | background-color: #4ECDC4;
| + | |
| - | }
| + | |
| | | | |
| - | /* This is an example of how to change the appearance of all the panel tabs when the
| + | <div class="container"> |
| - | * CollapsiblePanel has focus. The "CollapsiblePanelFocused" class is programatically added and removed | + | |
| - | * whenever the CollapsiblePanel gains or loses keyboard focus.
| + | <div class="topbar"> |
| - | */
| + | <div style="filter:alpha(opacity=70);opacity:.7;"> |
| - | .CollapsiblePanelFocused .CollapsiblePanelTab { | + | |
| | + | <a href="http://www.itesm.edu/wps/portal?WCM_GLOBAL_CONTEXT="><img src="https://static.igem.org/mediawiki/2011/2/20/Logotec.png" alt="ITESM" name="teclogo" width="202" height="72" id="teclogo"> </a> |
| | + | <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> |
| | | | |
| - | }
| |
| | | | |
| | + | <a href="http://www.bayer.com.mx/bayer/cropscience/bcsmexico.nsf/ID/Home_BayNEW"><img src="https://static.igem.org/mediawiki/2011/9/9f/Logobayerspon.png"width="69" height="67" align="right" alt="nllogo" name="nllogo" id="nl"> </a> |
| | | | |
| - | </style> | + | <a href="http://www.promega.com/"><img src="https://static.igem.org/mediawiki/2011/4/49/Logopromega02.png" width="77" height="67" alt="promega" name="promega" align="right" id="promega"> </a> |
| | | | |
| - | <style type="text/css"> | + | <a href="http://www.uniparts.com.mx/"><img src="https://static.igem.org/mediawiki/2011/1/14/Logouniparts02.png"alt="uniparts" name="uniparts" align="right" width="139" height="60" id="uniparts"> </a> |
| - | @charset "utf-8";
| + | |
| - | /* CSS Document */ | + | |
| | | | |
| - | * {
| |
| - | margin: 0px;
| |
| - | padding: 0px;
| |
| - | }
| |
| - | .maincontainer .menubar #CollapsiblePanel2 .CollapsiblePanelContent #listaproyecto {
| |
| - | list-style-type: none;
| |
| - | width: 150px;
| |
| - | }
| |
| | | | |
| | + | <p> </p> |
| | + | <p> </p> |
| | + | </div> |
| | + | |
| | + | <div class="sidebar1"> |
| | + | <ul class="nav"> |
| | + | <p> </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"> |
| | | | |
| - | #listaproyecto li a {
| + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teammembers">members</a></p> |
| - | font-family: Tahoma, Geneva, sans-serif;
| + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teaminstallations">headquarters</a></p> |
| - | color: #333;
| + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/microcongreso">micro congress</a></p> |
| - | text-decoration: none;
| + | <p><a href="https://2011.igem.org/Team:Tec-Monterrey/teamfriends">friends</a></p> |
| - | display: block;
| + | |
| - | height: 25px;
| + | </div> |
| - | width: 120px;
| + | </div> |
| - | padding-left: 20px;
| + | </li><li> |
| - | list-style-type: none;
| + | <div class="panelcollapsed"> |
| - | }
| + | |
| | | | |
| - | #listaproyecto li a:hover {
| + | <h2>EXTRAS</h2> |
| - | background-color: #4ECDC4;
| + | <div class="panelcontent"> |
| - | list-style-type: none;
| + | |
| - | }
| + | |
| | | | |
| | + | <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"> |
| | + | <!--in sub pages, this divisions should be comments! :D--> |
| | + | |
| | | | |
| - | #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;
| + | |
| - | list-style-type: none;
| + | |
| - | }
| + | |
| - | .descripmainlayout .descripmenu #CollapsiblePanel5 .CollapsiblePanelContent ul li a:hover {
| + | |
| - | background-color: #4ECDC4;
| + | |
| - | list-style-type: none;
| + | |
| - | }
| + | |
| | | | |
| | + | <div class="imagehiglights"> |
| | + | |
| | + | <div style="text-align:center; float:left;"> |
| | + | <p><img src="https://static.igem.org/mediawiki/2011/a/a0/Home01.png" alt="asd" name="image" width="425" height="319" id="imagered" longdesc="http://asdas"> |
| | + | </a></p> |
| | + | |
| | + | <table width="30%" border="0" align="center"> |
| | + | <tbody><tr> |
| | + | <td> <a href="https://2011.igem.org/Team:Tec-Monterrey/projectdescription" onMouseOver="resetAuto(0)"><img name="boton01" src="https://static.igem.org/mediawiki/2011/5/57/Botones01.png" width="40" height="40"></a> </td> |
| | | | |
| - | </style>
| |
| | | | |
| - | </head> | + | <td> <a href="#" onMouseOver="resetAuto(1)"> |
| | + | <img name="boton02" src="https://static.igem.org/mediawiki/2011/d/d7/Botones02.png" |
| | + | width="40" height="40"></a> </td> |
| | | | |
| - | <body> | + | < td> <a href="https://2011.igem.org/ Team:Tec-Monterrey/teamha/AR" onMouseOver="resetAuto(2)"><img name="boton03" src="https://static.igem.org/mediawiki/2011/ 9/ 95/ Botones03.png" width=" 40" height=" 40" ></ a> </ td> |
| - | <div class="maincontainer">
| + | |
| - | <div class="banner"> </div>
| + | < td> < a href="https:/ /2011.igem.org/Team:Tec-Monterrey/video" onMouseOver="resetAuto(3)"><img name="rouge" src="https://static.igem.org/mediawiki/2011/ e/ e5/ Botones04.png" width=" 40 height=" 40" ></ a> </ td> |
| - | <div class="language"> </div>
| + | |
| - | <div class="searchlogo">
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p><a href="https://2011.igem.org/ Main_Page"><img src="https://static.igem.org/mediawiki/2011/ a/ a1/ Logoigempeginav1.png " alt="iGEM" name="logoigem" width=" 155" height=" 61" id="logoigem" /> </ p> | + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p><img src="https://static.igem.org/mediawiki/2011/ 5/ 5e/ Tec-Monterrey_logo.png " alt="" name="logotec" width=" 146" height=" 52" id="logotec" /> </ p> | + | |
| | | | |
| - | <p> </p> | + | < td> <a href=" http:// area. autodesk. com/ blogs/ cory/ maya_igem_and_tec_de_monterrey" onMouseOver=" resetAuto(4)">< img name=" boton04" src=" https:// static. igem. org/ mediawiki/ 2011/ f/ f5/ Botones05. png" width=" 40" height=" 40" alt=" welcome"></a> </ td> |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p><img src="images/igemlogo.png" alt="iGEM" name="logoigem" width="155" height="61" id="logoigem" /> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p><img src="images/igemlogo.png" alt="iGEM" name="logoigem" width="155" height="61" id="logoigem" /> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p> </p>
| + | |
| - | <p><img src="images/igemlogo.png" alt="iGEM" name="logoigem" width="155" height="61" id="logoigem" /> </p>
| + | |
| - |
| + | |
| - | </div>
| + | |
| - | <div class="menubar">
| + | |
| - | <div id="CollapsiblePanel1" class="CollapsiblePanel">
| + | |
| - | <div class="CollapsiblePanelTab" tabindex="0"><a href=" paginaigem.html">HOME</ a></ div> | + | |
| - | <div class="CollapsiblePanelContent"></div>
| + | |
| - | </div>
| + | |
| - | <div id="CollapsiblePanel2" class="CollapsiblePanel">
| + | |
| - | <div class="CollapsiblePanelTab" tabindex="0">PROJECT</div>
| + | |
| - | <div class="CollapsiblePanelContent">
| + | |
| - | <ul id="listaproyecto">
| + | |
| - | <li><a href="paginaigem.html">parts</a></li>
| + | |
| - | <li><a href="paginasafety.html">safety</a></li>
| + | |
| - | <li><a href="paginadescripcionproject.html">description</a></li>
| + | |
| - | <li><a href="paginaigem.html">modeling</a></li>
| + | |
| - | <li><a href="paginaigem.html">results</a></li>
| + | |
| - | </ul>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | <div id="CollapsiblePanel3" class="CollapsiblePanel">
| + | |
| - | <div class="CollapsiblePanelTab" tabindex="0">TEAM</div>
| + | |
| - | <div class="CollapsiblePanelContent">
| + | |
| - |
| + | |
| - | <ul id="listaproyecto">
| + | |
| - | <li><a href="paginaigem.html">members</a></li>
| + | |
| - | <li><a href="paginaigem.html">profile</a></li>
| + | |
| - | <li><a href="paginaigem.html">gallery</a></li>
| + | |
| - | <li><a href="paginaigem.html">installations</a></li>
| + | |
| - | </ul>
| + | |
| - |
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | <div id="CollapsiblePanel4" class="CollapsiblePanel">
| + | |
| - | <div class="CollapsiblePanelTab" tabindex="0">EXTRAS</div>
| + | |
| - | <div class="CollapsiblePanelContent">
| + | |
| - | <ul id="listaproyecto">
| + | |
| - | <li><a href="paginaigem.html">sitemap</a></li>
| + | |
| - | <li><a href="paginaigem.html">human approach</a></li>
| + | |
| - | <li><a href="paginamicrocongreso.html">microcongreso</a></li>
| + | |
| - | <li><a href="paginaigem.html">sponsors</a></li>
| + | |
| - | </ul>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | </div>
| + | |
| - | <div class="video"> </div>
| + | |
| - | <div class="texto">
| + | |
| - | <p> </p>
| + | |
| - | <div style="text-align: center;"></p>
| + | |
| - | </p> </p>
| + | |
| - | </p> </p>
| + | |
| - | <p><a href="paginadescripcionproject.html">project description</a> and <a href="paginasafetypage.html">safety pages</a></p>
| + | |
| - | <p>are ready! </p>
| + | |
| - | click on the link above or look for them in our menu.</p>
| + | |
| - | </p>
| + | |
| - | </div></div>
| + | |
| - | </div>
| + | |
| | | | |
| - | </body> | + | <td> <a href="https://2011.igem.org/Team:Tec-Monterrey/teammembers" onMouseOver="resetAuto(5)"><img name="boton06" src="https://static.igem.org/mediawiki/2011/7/72/Botones06.png" width="40" height="40" ></a> </td> |
| - | | + | </tr> |
| - | </html> | + | </tbody></table> |
| | + | |
| | + | <p><br> |
| | + | </p> |
| | + | </div> |
| | + | |
| | + | <div class="tweets"> |
| | + | <div style="float:right;"> |
| | + | <script src="http://widgets.twimg.com/j/2/widget.js"></script> |
| | + | <script> |
| | + | new TWTR.Widget({ |
| | + | version: 2, |
| | + | type: 'profile', |
| | + | rpp: 4, |
| | + | interval: 6000, |
| | + | width: 200, |
| | + | height: 250, |
| | + | theme: { |
| | + | shell: { |
| | + | background: '#000000', |
| | + | color: '#ffffff' |
| | + | }, |
| | + | tweets: { |
| | + | background: '#04191d', |
| | + | color: '#ffffff', |
| | + | links: '#93d740' |
| | + | } |
| | + | }, |
| | + | features: { |
| | + | scrollbar: false, |
| | + | loop: false, |
| | + | live: false, |
| | + | hashtags: true, |
| | + | timestamp: true, |
| | + | avatars: false, |
| | + | behavior: 'all' |
| | + | } |
| | + | }).render().setUser('igemTecMty11').start(); |
| | + | </script> |
| | + | </div> |
| | + | </div> |
| | + | </div> |
| | | | |
| | | | |
| | + | |
| | + | |
| | | | |
| - | <!--- The Mission, Experiments --->
| |
| | | | |
| - | {| style="color:#1b2c8a;background-color:#0c6;" cellpadding="3" cellspacing="1" border="1" bordercolor="#fff" width="62%" align="center"
| + | </div></div></body></html> |
| - | !align="center"|[[Team:Tec-Monterrey|Home]]
| + | |
| - | !align="center"|[[Team:Tec-Monterrey/Team|Team]]
| + | |
| - | !align="center"|[https://igem.org/Team.cgi?year=2011&team_name=Tec-Monterrey Official Team Profile]
| + | |
| - | !align="center"|[[Team:Tec-Monterrey/Project|Project]]
| + | |
| - | !align="center"|[[Team:Tec-Monterrey/Parts|Parts Submitted to the Registry]]
| + | |
| - | !align="center"|[[Team:Tec-Monterrey/Modeling|Modeling]]
| + | |
| - | !align="center"|[[Team:Tec-Monterrey/Notebook|Notebook]]
| + | |
| - | !align="center"|[[Team:Tec-Monterrey/Safety|Safety]]
| + | |
| - | !align="center"|[[Team:Tec-Monterrey/Attributions|Attributions]]
| + | |
| - | |}
| + | |
"
