http://2012.igem.org/wiki/index.php?title=Special:Contributions&feed=atom&limit=50&target=Eho&year=&month=
2012.igem.org - User contributions [en]
2024-03-28T17:12:57Z
From 2012.igem.org
MediaWiki 1.16.0
http://2012.igem.org/Team:Colorado_State/Advisors
Team:Colorado State/Advisors
2012-08-14T20:24:55Z
<p>Eho: </p>
<hr />
<div>{{CSU_Template_1_top}}<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<br />
<!--START PAGE CONTENT--><br />
<br />
<a class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Advisors&amp;action=edit">Edit page</a><br />
<br />
<br><br />
<br />
<h1>Meet the Advisors</h1><br />
<br />
<table style="position: relative; margin-left: auto; margin-right: auto; width: 95%;"><br />
<tr><br />
<td><img style="float: left; margin-right: 10px;" src="http://www.world-gen.com/images/Lucas%20Argueso.jpg" width="170" /><br />
<h2>Lucas Argueso</h2><br />
<p>If there was a word for someone who knew everything about yeast, that word would be Lucas. Dr. Argueso is nothing short of a miracle worker when it comes to yeast biology and he's not afraid to prove it.</p><br />
</td><br />
<td><img style="float: left; margin-right: 10px;" src="http://www.cvmbs.colostate.edu/ns/_images/departments/mip/mip_geiss_201011_geiss_brian.jpg" width="170" /><br />
<h2>Brian Geiss</h2><br />
<p>Dr. Geiss is a biology ninja. He can scale mental walls, quietly evade less-than-intelligent questions, and can kill bad ideas with one swift stroke. He is wise beyond his years and has a sweet lab to boot, which is why some of us spent more time in his lab than in ours.</p><br />
</td><br />
</tr><br />
<tr><br />
<td><img style="float: left; margin-right: 10px;" src="http://www.cvmbs.colostate.edu/mip/wiluszlab/images/carolwilusz.jpg" width="170" /><br />
<h2>Carol Wilusz</h2><br />
<p>Dr. Wilusz is a biology ninja. He can scale mental walls, quietly evade less-than-intelligent questions, and can kill bad ideas with one swift stroke. He is wise beyond his years and has a sweet lab to boot, which is why some of us spent more time in his lab than in ours.</p><br />
</td><br />
</tr><br />
</table><br />
<br />
<!--END PAGE CONTENT--><br />
<br />
</html><br />
{{CSU_Template_1_bottom}}</div>
Eho
http://2012.igem.org/Template:CSU_Template_1_bottom
Template:CSU Template 1 bottom
2012-08-10T20:31:49Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<br><br><br />
</div><br />
<div id="footer"><br />
<a href="https://2012.igem.org/wiki/index.php?title=Template:CSU_Template_1_top&action=edit" style="cursor: default;"><img src="https://lh6.googleusercontent.com/-svMAaTUB0PU/UAWcIJr06oI/AAAAAAAAALc/rjGl0om85xQ/s139/apple.png" style="position: absolute; z-index: 10; bottom: -10px; left: 40%;"/></a><br />
<img src="https://lh4.googleusercontent.com/-sb7abRaUzoA/UAWcIeh1pxI/AAAAAAAAALo/p8byjTol0CU/s912/footer.png" style="position: absolute; left: 0;width: 100%; height: auto; z-index: 5;"/><br />
</div><br />
</body><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-10T20:30:59Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
z-index: 1;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 150px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 4;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 4;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 3;<br />
nextElem.style.zIndex = 2;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 1;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<img src="https://lh6.googleusercontent.com/-1Q-9hddFWuI/UCGVfn6W4wI/AAAAAAAAAVQ/e7PcCnXWO8o/s500/igem_home_logo.png" width="100" height="100" style="position: fixed; top: 10px; right: 10px; cursor: pointer;" onClick="linkTo('https://2012.igem.org/Main_Page')" /><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 4; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 3;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-10T20:30:23Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
z-index: 1;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 4;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 4;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 3;<br />
nextElem.style.zIndex = 2;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 1;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<img src="https://lh6.googleusercontent.com/-1Q-9hddFWuI/UCGVfn6W4wI/AAAAAAAAAVQ/e7PcCnXWO8o/s500/igem_home_logo.png" width="100" height="100" style="position: fixed; top: 10px; right: 10px; cursor: pointer;" onClick="linkTo('https://2012.igem.org/Main_Page')" /><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 4; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 3;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-10T19:48:08Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
z-index: 1;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 4;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 4;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 3;<br />
nextElem.style.zIndex = 2;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 1;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 4; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 3;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Team:Colorado_State/Sponsors
Team:Colorado State/Sponsors
2012-08-09T22:30:01Z
<p>Eho: </p>
<hr />
<div>{{CSU_Template_1_top}}<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<style type="text/css"><br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: white;<br />
}<br />
<br />
#content_main table {<br />
position: relative;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border: solid #666 2px;<br />
text-align: center;<br />
}<br />
<br />
#content_main table img {<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: black;<br />
}<br />
<br />
</style><br />
<br />
<!--START PAGE CONTENT--><br />
<br />
<a class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Sponsors&amp;action=edit">Edit page</a><br />
<br />
<br><br />
<br />
<h1>Sponsors</h1><br />
<br />
<p>Majority of support provided by</p><br />
<br /><br />
<a href="http://www.colostate.edu/"><br />
<img style="background: white; padding: 10px;" src="http://www.engr.colostate.edu/~yzhangcn/Yang%20Zhang's%20Homepage_files/colorado_state_university_logo_green.png" height="100" /><br />
</a><br />
<br /><br />
<br /><br />
<p>We would especially like to thank the following Colorado State people and organizations for making this project possible:</p><br />
<ul><br />
<li><a href="http://vpr.colostate.edu/pages/mainpage.asp">Vice President for Research</a></li><br />
<li><a href="http://www.natsci.colostate.edu/">College of Natural Sciences</a></li><br />
<li><a href="http://www.cvmbs.colostate.edu/ns/">College of Veterinary Medicine and Biomedical Sciences</a></li><br />
<li><a href="http://www.agsci.colostate.edu/">Collge of Agricultural Sciences</a></li><br />
<li><a href="http://www.engr.colostate.edu/">College of Engineering</a></li><br />
</ul><br />
<br /><br />
<p>We would also like to thank the following companies for supplying laboratory resources:</p><br />
<br /><br />
<table><br />
<tr><br />
<td><a href="http://www.equinoxbrewing.com/"><img src="https://static.igem.org/mediawiki/2012/b/b0/Equinox_logo.jpg" height="110" /></a></td><br />
<td><a href="http://www.hopsandberries.com/"><img src="https://static.igem.org/mediawiki/2012/1/11/Colorlogo.jpg" height="110" /></a></td><br />
</tr><br />
<tr><br />
<td><a href="http://www.r-biopharm.com/"><img src="http://www.naturheilkundetag.info/images/logo_rbiopharm.JPG" height="80"/></a></td><br />
<td><a href="http://www.genscript.com/"><img src="http://www.biomed.com.sg/_images/genscript_logo.jpg" height="80"/></a></td><br />
</tr><br />
</table><br />
<br />
<!--END PAGE CONTENT--><br />
<br />
</html><br />
{{CSU_Template_1_bottom}}</div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:25:39Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 4;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 4;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 3;<br />
nextElem.style.zIndex = 2;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 1;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 4; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 3;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:22:35Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:22:04Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:18:54Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:15:46Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
alert(navigator.appCodeName);<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:15:24Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
alert('blah');<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:14:42Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript"><br />
startFunctions();<br />
alert('blah');<br />
</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:14:10Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
function compatibilityCheck() {<br />
<br />
alert('blah');<br />
<br />
} //end function compatibilityCheck<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript"><br />
startFunctions();<br />
compatibilityCheck();<br />
</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:13:16Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
function compatibilityCheck() {<br />
<br />
alert(navigator.appCodeName);<br />
<br />
} //end function compatibilityCheck<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript"><br />
startFunctions();<br />
compatibilityCheck();<br />
</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T22:12:37Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original, except the dropdown menu, which is modified<br />
code.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail). I'll probably say yes.<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
function compatibilityCheck() {<br />
<br />
alert(navigator.appCodeName);<br />
<br />
} //end function compatibilityCheck<br />
<br />
</script><br />
</head><br />
<body onLoad="MM_preloadImages('m')"><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Team:Colorado_State/Sponsors
Team:Colorado State/Sponsors
2012-08-09T19:54:43Z
<p>Eho: </p>
<hr />
<div>{{CSU_Template_1_top}}<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<style type="text/css"><br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: white;<br />
}<br />
<br />
#content_main table {<br />
position: relative;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border: solid #666 2px;<br />
text-align: center;<br />
}<br />
<br />
#content_main table img {<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: black;<br />
}<br />
<br />
</style><br />
<br />
<!--START PAGE CONTENT--><br />
<br />
<a class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Sponsors&amp;action=edit">Edit page</a><br />
<br />
<br><br />
<br />
<h1>Sponsors</h1><br />
<br />
<p>Majority of support provided by</p><br />
<br /><br />
<a href="http://www.colostate.edu/"><br />
<img style="background: white; padding: 10px;" src="http://www.engr.colostate.edu/~yzhangcn/Yang%20Zhang's%20Homepage_files/colorado_state_university_logo_green.png" height="100" /><br />
</a><br />
<br /><br />
<br /><br />
<p>We would especially like to thank the following Colorado State people and organizations for making this project possible:</p><br />
<ul><br />
<li>Vice President for Research</li><br />
<li>College of Natural Sciences</li><br />
<li>College of Veterinary Medicine and Biomedical Sciences</li><br />
<li>Collge of Agricultural Sciences</li><br />
<li>College of Engineering</li><br />
</ul><br />
<br /><br />
<p>We would also like to thank the following companies for supplying laboratory resources:</p><br />
<br /><br />
<table><br />
<tr><br />
<td><a href="http://www.equinoxbrewing.com/"><img src="https://static.igem.org/mediawiki/2012/b/b0/Equinox_logo.jpg" height="110" /></a></td><br />
<td><a href="http://www.hopsandberries.com/"><img src="https://static.igem.org/mediawiki/2012/1/11/Colorlogo.jpg" height="110" /></a></td><br />
</tr><br />
<tr><br />
<td><a href="http://www.r-biopharm.com/"><img src="http://www.naturheilkundetag.info/images/logo_rbiopharm.JPG" height="80"/></a></td><br />
<td><a href="http://www.genscript.com/"><img src="http://www.biomed.com.sg/_images/genscript_logo.jpg" height="80"/></a></td><br />
</tr><br />
</table><br />
<br />
<!--END PAGE CONTENT--><br />
<br />
</html><br />
{{CSU_Template_1_bottom}}</div>
Eho
http://2012.igem.org/Team:Colorado_State/Sponsors
Team:Colorado State/Sponsors
2012-08-09T19:54:24Z
<p>Eho: </p>
<hr />
<div>{{CSU_Template_1_top}}<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<style type="text/css"><br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: white;<br />
}<br />
<br />
#content_main table {<br />
position: relative;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border: solid #666 2px;<br />
text-align: center;<br />
}<br />
<br />
#content_main table img {<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: black;<br />
}<br />
<br />
</style><br />
<br />
<!--START PAGE CONTENT--><br />
<br />
<a class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Sponsors&amp;action=edit">Edit page</a><br />
<br />
<br><br />
<br />
<h1>Sponsors</h1><br />
<br />
<p>Majority of support provided by</p><br />
<br /><br />
<a href="http://www.colostate.edu/"><br />
<img style="background: white;" src="http://www.engr.colostate.edu/~yzhangcn/Yang%20Zhang's%20Homepage_files/colorado_state_university_logo_green.png" height="100" /><br />
</a><br />
<br /><br />
<br /><br />
<p>We would especially like to thank the following Colorado State people and organizations for making this project possible:</p><br />
<ul><br />
<li>Vice President for Research</li><br />
<li>College of Natural Sciences</li><br />
<li>College of Veterinary Medicine and Biomedical Sciences</li><br />
<li>Collge of Agricultural Sciences</li><br />
<li>College of Engineering</li><br />
</ul><br />
<br /><br />
<p>We would also like to thank the following companies for supplying laboratory resources:</p><br />
<br /><br />
<table><br />
<tr><br />
<td><a href="http://www.equinoxbrewing.com/"><img src="https://static.igem.org/mediawiki/2012/b/b0/Equinox_logo.jpg" height="110" /></a></td><br />
<td><a href="http://www.hopsandberries.com/"><img src="https://static.igem.org/mediawiki/2012/1/11/Colorlogo.jpg" height="110" /></a></td><br />
</tr><br />
<tr><br />
<td><a href="http://www.r-biopharm.com/"><img src="http://www.naturheilkundetag.info/images/logo_rbiopharm.JPG" height="80"/></a></td><br />
<td><a href="http://www.genscript.com/"><img src="http://www.biomed.com.sg/_images/genscript_logo.jpg" height="80"/></a></td><br />
</tr><br />
</table><br />
<br />
<!--END PAGE CONTENT--><br />
<br />
</html><br />
{{CSU_Template_1_bottom}}</div>
Eho
http://2012.igem.org/Team:Colorado_State/Sponsors
Team:Colorado State/Sponsors
2012-08-09T19:53:18Z
<p>Eho: </p>
<hr />
<div>{{CSU_Template_1_top}}<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<style type="text/css"><br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: white;<br />
}<br />
<br />
#content_main table {<br />
position: relative;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border: solid #666 2px;<br />
text-align: center;<br />
}<br />
<br />
#content_main table img {<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: black;<br />
}<br />
<br />
</style><br />
<br />
<!--START PAGE CONTENT--><br />
<br />
<a class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Sponsors&amp;action=edit">Edit page</a><br />
<br />
<br><br />
<br />
<h1>Sponsors</h1><br />
<br />
<p>Majority of support provided by</p><br />
<br /><br />
<a href="http://www.colostate.edu/"><br />
<img style="border: none;" src="https://lh3.googleusercontent.com/-ZigNmO_3Dg4/UAWcIJbtgZI/AAAAAAAAALg/istDqjXyEk8/s832/csu_logo.png" height="100" /><br />
</a><br />
<br /><br />
<br /><br />
<p>We would especially like to thank the following Colorado State people and organizations for making this project possible:</p><br />
<ul><br />
<li>Vice President for Research</li><br />
<li>College of Natural Sciences</li><br />
<li>College of Veterinary Medicine and Biomedical Sciences</li><br />
<li>Collge of Agricultural Sciences</li><br />
<li>College of Engineering</li><br />
</ul><br />
<br /><br />
<p>We would also like to thank the following companies for supplying laboratory resources:</p><br />
<br /><br />
<table><br />
<tr><br />
<td><a href="http://www.equinoxbrewing.com/"><img src="https://static.igem.org/mediawiki/2012/b/b0/Equinox_logo.jpg" height="110" /></a></td><br />
<td><a href="http://www.hopsandberries.com/"><img src="https://static.igem.org/mediawiki/2012/1/11/Colorlogo.jpg" height="110" /></a></td><br />
</tr><br />
<tr><br />
<td><a href="http://www.r-biopharm.com/"><img src="http://www.naturheilkundetag.info/images/logo_rbiopharm.JPG" height="80"/></a></td><br />
<td><a href="http://www.genscript.com/"><img src="http://www.biomed.com.sg/_images/genscript_logo.jpg" height="80"/></a></td><br />
</tr><br />
</table><br />
<br />
<!--END PAGE CONTENT--><br />
<br />
</html><br />
{{CSU_Template_1_bottom}}</div>
Eho
http://2012.igem.org/Team:Colorado_State/Sponsors
Team:Colorado State/Sponsors
2012-08-09T19:51:31Z
<p>Eho: </p>
<hr />
<div>{{CSU_Template_1_top}}<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<style type="text/css"><br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: white;<br />
}<br />
<br />
#content_main table {<br />
position: relative;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border: solid #666 2px;<br />
text-align: center;<br />
}<br />
<br />
#content_main table img {<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: black;<br />
}<br />
<br />
</style><br />
<br />
<!--START PAGE CONTENT--><br />
<br />
<a class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Sponsors&amp;action=edit">Edit page</a><br />
<br />
<br><br />
<br />
<h1>Sponsors</h1><br />
<br />
<p>Majority of support provided by</p><br />
<br /><br />
<a href="http://www.colostate.edu/"><br />
<img src="http://www.engr.colostate.edu/~yzhangcn/Yang%20Zhang's%20Homepage_files/colorado_state_university_logo_green.png" height="100" /><br />
</a><br />
<br /><br />
<br /><br />
<p>We would especially like to thank the following Colorado State people and organizations for making this project possible:</p><br />
<ul><br />
<li>Vice President for Research</li><br />
<li>College of Natural Sciences</li><br />
<li>College of Veterinary Medicine and Biomedical Sciences</li><br />
<li>Collge of Agricultural Sciences</li><br />
<li>College of Engineering</li><br />
</ul><br />
<br /><br />
<p>We would also like to thank the following companies for supplying laboratory resources:</p><br />
<br />
<table><br />
<tr><br />
<td><a href="http://www.equinoxbrewing.com/"><img src="https://static.igem.org/mediawiki/2012/b/b0/Equinox_logo.jpg" height="110" /></a></td><br />
<td><a href="http://www.hopsandberries.com/"><img src="https://static.igem.org/mediawiki/2012/1/11/Colorlogo.jpg" height="110" /></a></td><br />
</tr><br />
<tr><br />
<td><a href="http://www.r-biopharm.com/"><img src="http://www.naturheilkundetag.info/images/logo_rbiopharm.JPG" height="80"/></a></td><br />
<td><a href="http://www.genscript.com/"><img src="http://www.biomed.com.sg/_images/genscript_logo.jpg" height="80"/></a></td><br />
</tr><br />
</table><br />
<br />
<!--END PAGE CONTENT--><br />
<br />
</html><br />
{{CSU_Template_1_bottom}}</div>
Eho
http://2012.igem.org/Team:Colorado_State/Sponsors
Team:Colorado State/Sponsors
2012-08-09T19:49:12Z
<p>Eho: </p>
<hr />
<div>{{CSU_Template_1_top}}<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<style type="text/css"><br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: white;<br />
}<br />
<br />
#content_main table {<br />
position: relative;<br />
margin-left: auto;<br />
margin-right: auto;<br />
border: solid #666 2px;<br />
text-align: center;<br />
}<br />
<br />
#content_main table img {<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: black;<br />
}<br />
<br />
</style><br />
<br />
<!--START PAGE CONTENT--><br />
<br />
<a class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Sponsors&amp;action=edit">Edit page</a><br />
<br />
<br><br />
<br />
<h1>Sponsors</h1><br />
<br />
<p>Majority of support provided by</p><br />
<br /><br />
<img src="http://www.colostate.edu/" height="100" /><br />
<br /><br />
<p>We would especially like to thank the following Colorado State people and organizations for making this project possible:</p><br />
<ul><br />
<li>Vice President for Research</li><br />
<li>College of Natural Sciences</li><br />
<li>College of Veterinary Medicine and Biomedical Sciences</li><br />
<li>Collge of Agricultural Sciences</li><br />
<li>College of Engineering</li><br />
</ul><br />
<br />
<p>We would also like to thank the following companies for supplying laboratory resources:</p><br />
<br />
<table><br />
<tr><br />
<td><a href="http://www.equinoxbrewing.com/"><img src="https://static.igem.org/mediawiki/2012/b/b0/Equinox_logo.jpg" height="110" /></a></td><br />
<td><a href="http://www.hopsandberries.com/"><img src="https://static.igem.org/mediawiki/2012/1/11/Colorlogo.jpg" height="110" /></a></td><br />
</tr><br />
<tr><br />
<td><a href="http://www.r-biopharm.com/"><img src="http://www.naturheilkundetag.info/images/logo_rbiopharm.JPG" height="80"/></a></td><br />
<td><a href="http://www.genscript.com/"><img src="http://www.biomed.com.sg/_images/genscript_logo.jpg" height="80"/></a></td><br />
</tr><br />
</table><br />
<br />
<!--END PAGE CONTENT--><br />
<br />
</html><br />
{{CSU_Template_1_bottom}}</div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T17:08:28Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-09T17:06:47Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"><img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" /> </a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:39:03Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 220px; width: 287.65px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:35:20Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: relative; top: 30px; left: 10px; border: solid red 1px; height: 200px; width: 261.5px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:34:59Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: relative; top: 30px; border: solid red 1px; height: 200px; width: 261.5px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:34:34Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: relative; top: 50px; left: 10px; height: 200px; width: 261.5px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:33:38Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: absolute; top: 0; height: 200px; width: 261.5px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:33:07Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="height: 200px; width: 261.5px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:32:44Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: relative; height: 200px; width: 261.5px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:32:09Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: absolute; height: 200px; width: 261.5px; border: none; background: url(https://lh3.googleusercontent.com/-31sRsyZb5LU/UCKUYpC-gMI/AAAAAAAAAVk/MiL9X1XsNQ0/s640/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:30:24Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: absolute; height: 200px; width: 261.5px; border: none; z-index: 50; background: url(../../current/images/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:29:46Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: absolute; height: 200px; width: 261.5px; border: none; z-index: 100; background: url(../../current/images/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:28:26Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: absolute; height: 200px; width: 261.5px; border: none; background: url(../../current/images/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-08T16:27:26Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><br />
<!-- <img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" />--><br />
<!--523:400 W:H ratio--><br />
<div style="position: absolute; height: 200px; width: 261.5px; border: none; z-index: 50; background: url(../../current/images/logo2.png) no-repeat left; background-size: auto 100%;"><br />
<img src="http://picasion.com/pic56/66eccba80910fafd431232af43e6e48f.gif" style="position: absolute; top: 12%; left: 28%; height: 22%; width: auto;" /><br />
<img src="http://picasion.com/pic56/2f058d1a44eeb5749a3117dd586e79d6.gif" style="position: absolute; top: 26%; left: 21%; height: 12%; width: auto;" /><br />
<img src="http://picasion.com/pic56/fc61f0752651a6be3920ad3917e72fa2.gif" style="position: absolute; top: 42%; left: 1.5%; height: 12%; width: auto;" /><br />
</div><br />
</a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_bottom
Template:CSU Template 1 bottom
2012-08-07T22:30:01Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<br><br><br />
</div><br />
<div id="footer"><br />
<a href="https://2012.igem.org/wiki/index.php?title=Template:CSU_Template_1_top&action=edit" style="cursor: default;"><img src="https://lh6.googleusercontent.com/-svMAaTUB0PU/UAWcIJr06oI/AAAAAAAAALc/rjGl0om85xQ/s139/apple.png" style="position: absolute; z-index: 10; bottom: -10px; left: 40%;"/></a><br />
<img src="https://lh4.googleusercontent.com/-sb7abRaUzoA/UAWcIeh1pxI/AAAAAAAAALo/p8byjTol0CU/s912/footer.png" style="position: absolute; left: 0;width: 100%; height: auto; z-index: 5;"/><br />
</div><br />
<img src="https://lh6.googleusercontent.com/-1Q-9hddFWuI/UCGVfn6W4wI/AAAAAAAAAVQ/e7PcCnXWO8o/s500/igem_home_logo.png" width="140" height="140" style="position: fixed; bottom: 10px; left: 10px; cursor: pointer;" onClick="linkTo('https://2012.igem.org/Main_Page')" /><br />
</body><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_bottom
Template:CSU Template 1 bottom
2012-08-07T22:29:29Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<br><br><br />
</div><br />
<div id="footer"><br />
<a href="https://2012.igem.org/wiki/index.php?title=Template:CSU_Template_1_top&action=edit" style="cursor: default;"><img src="https://lh6.googleusercontent.com/-svMAaTUB0PU/UAWcIJr06oI/AAAAAAAAALc/rjGl0om85xQ/s139/apple.png" style="position: absolute; z-index: 10; bottom: -10px; left: 40%;"/></a><br />
<img src="https://lh4.googleusercontent.com/-sb7abRaUzoA/UAWcIeh1pxI/AAAAAAAAALo/p8byjTol0CU/s912/footer.png" style="position: absolute; left: 0;width: 100%; height: auto; z-index: 5;"/><br />
</div><br />
<img src="https://lh6.googleusercontent.com/-1Q-9hddFWuI/UCGVfn6W4wI/AAAAAAAAAVQ/e7PcCnXWO8o/s500/igem_home_logo.png" width="140" height="140" style="position: fixed; bottom: 10; left: 10; cursor: pointer;" onClick="linkTo('https://2012.igem.org/Main_Page')" /><br />
</body><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_bottom
Template:CSU Template 1 bottom
2012-08-07T22:28:29Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<br><br><br />
</div><br />
<div id="footer"><br />
<a href="https://2012.igem.org/wiki/index.php?title=Template:CSU_Template_1_top&action=edit" style="cursor: default;"><img src="https://lh6.googleusercontent.com/-svMAaTUB0PU/UAWcIJr06oI/AAAAAAAAALc/rjGl0om85xQ/s139/apple.png" style="position: absolute; z-index: 10; bottom: -10px; left: 40%;"/></a><br />
<img src="https://lh4.googleusercontent.com/-sb7abRaUzoA/UAWcIeh1pxI/AAAAAAAAALo/p8byjTol0CU/s912/footer.png" style="position: absolute; left: 0;width: 100%; height: auto; z-index: 5;"/><br />
</div><br />
<img src="https://lh6.googleusercontent.com/-1Q-9hddFWuI/UCGVfn6W4wI/AAAAAAAAAVQ/e7PcCnXWO8o/s500/igem_home_logo.png" width="140" height="140" style="position: fixed; bottom: 0; left: 0;" onClick="linkTo('https://2012.igem.org/Main_Page')" /><br />
</body><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_bottom
Template:CSU Template 1 bottom
2012-08-07T22:26:10Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<br><br><br />
</div><br />
<div id="footer"><br />
<a href="https://2012.igem.org/wiki/index.php?title=Template:CSU_Template_1_top&action=edit" style="cursor: default;"><img src="https://lh6.googleusercontent.com/-svMAaTUB0PU/UAWcIJr06oI/AAAAAAAAALc/rjGl0om85xQ/s139/apple.png" style="position: absolute; z-index: 10; bottom: -10px; left: 40%;"/></a><br />
<img src="https://lh4.googleusercontent.com/-sb7abRaUzoA/UAWcIeh1pxI/AAAAAAAAALo/p8byjTol0CU/s912/footer.png" style="position: absolute; left: 0;width: 100%; height: auto; z-index: 5;"/><br />
</div><br />
<img src="https://lh6.googleusercontent.com/-1Q-9hddFWuI/UCGVfn6W4wI/AAAAAAAAAVQ/e7PcCnXWO8o/s500/igem_home_logo.png" width="140" height="140" style="position: fixed; bottom: 0; left: 0;" /><br />
</body><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T19:25:16Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="border: solid red 2px; position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:46:13Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
overflow: hidden;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:45:01Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
right: 0;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
visibility: hidden;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:43:40Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
float: right;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
visibility: hidden;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:43:20Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
width: auto;<br />
height: 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
visibility: hidden;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:42:39Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
float: right;<br />
width: 100%;<br />
height: 90%;<br />
background-size: auto 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
visibility: hidden;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<img id="slide1" class="slide" src="https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg" style="z-index: 30;" /><br />
<img id="slide2" class="slide" src="https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg" /><br />
<img id="slide3" class="slide" src="https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg" /><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:40:05Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
width: 100%;<br />
height: 90%;<br />
background-size: auto 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
visibility: hidden;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<div id="slide1" class="slide" style="background: url(https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg) no-repeat top right; z-index: 30;" /></div><br />
<div id="slide2" class="slide" style="background: url(https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg) no-repeat top right;" /></div><br />
<div id="slide3" class="slide" style="background: url(https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg) no-repeat top right;" /></div><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:39:31Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
width: 100%;<br />
height: 100%;<br />
background-size: 50% 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
visibility: hidden;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<div id="slide1" class="slide" style="background: url(https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg) no-repeat top right; z-index: 30;" /></div><br />
<div id="slide2" class="slide" style="background: url(https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg) no-repeat top right;" /></div><br />
<div id="slide3" class="slide" style="background: url(https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg) no-repeat top right;" /></div><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:38:47Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
width: 100%;<br />
height: 100%;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
visibility: hidden;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<div id="slide1" class="slide" style="background: url(https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg) no-repeat top right; z-index: 30;" /></div><br />
<div id="slide2" class="slide" style="background: url(https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg) no-repeat top right;" /></div><br />
<div id="slide3" class="slide" style="background: url(https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg) no-repeat top right;" /></div><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:38:00Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
width: 100%;<br />
height: 100%;<br />
background-size: auto 100%;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
visibility: hidden;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<div id="slide1" class="slide" style="background: url(https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg) no-repeat top right; z-index: 30;" /></div><br />
<div id="slide2" class="slide" style="background: url(https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg) no-repeat top right;" /></div><br />
<div id="slide3" class="slide" style="background: url(https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg) no-repeat top right;" /></div><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Template:CSU_Template_1_top
Template:CSU Template 1 top
2012-08-06T17:36:14Z
<p>Eho: </p>
<hr />
<div><html xmlns="http://www.w3.org/1999/xhtml"><br />
<!--<br />
<br />
<br />
<br />
***************************************************************<br />
***************************************************************<br />
*********STOP! BEFORE YOU STEAL MY CODE, READ THIS!************<br />
***************************************************************<br />
***************************************************************<br />
<br />
2012 Colorado State iGEM Team Wiki Site<br />
<br />
by Ethan Ho - Ethan.N.Ho@Gmail.com<br />
<br />
All code is original.<br />
<br />
Do not copy or in any way, shape, or form, use any of this code<br />
without the explicit permission of Ethan Ho (reachable by above<br />
E-mail).<br />
<br />
Be a good person. Obey the rules.<br />
<br />
Peace out,<br />
<br />
Ethan<br />
<br />
<br />
<br />
--><br />
<head><br />
<style type="text/css"><br />
<br />
.editbutton {<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
}<br />
<br />
/*************************************************************<br />
***********************HEY YOU! YA, YOU!!*********************<br />
**************************************************************<br />
<br />
If you want to edit each individual page, uncomment the following<br />
line of code to reveal the handy "Edit page" buttons!<br />
*/<br />
<br />
<br />
<br />
.editbutton {visibility: visible; width: auto; height: auto;}<br />
<br />
<br />
<br />
<br />
/*********NOTES*********<br />
<br />
-Colors<br />
-DC8800-Medium<br />
-E9B300-Medium/Light<br />
-925F00-Dark<br />
-F1C900-Light<br />
-BDAF77-Créme/white<br />
-423600-Gold with grey overlay (27%)<br />
<br />
*/<br />
<br />
/*********HIDE iGEM STUFF*********/<br />
<br />
#top-section, #footer-box, .firstHeading, .noprint, .printfooter, #catlinks, .visualclear, #contentSub, #siteSub {<br />
z-index: 1;<br />
position: absolute;<br />
top: 0;<br />
left: 0;<br />
visibility: hidden;<br />
width: 0;<br />
height: 0;<br />
border: none;<br />
}<br />
<br />
/*********PAGE FORMATTING*********/<br />
<br />
#globalWrapper *, * {<br />
border-spacing: 0;<br />
border-collapse: collapse;<br />
padding: 0;<br />
margin: 0;<br />
margin-left: 0;<br />
margin-top: 0;<br />
color: #CCC;<br />
}<br />
<br />
body {<br />
background: url(https://static.igem.org/mediawiki/2012/2/20/Beer1.png) top left fixed #DC8800;<br />
/*background: url(https://static.igem.org/mediawiki/2012/2/2a/Beer_Close_Up_Wallpaper_1280x1024_4546.jpg) top left fixed #DC8800;*/<br />
background-size: 100% 100%;<br />
height: 100%;<br />
width: 100%;<br />
}<br />
<br />
#content {<br />
position: relative;<br />
top: -10px;<br />
margin-left: auto;<br />
margin-right: auto;<br />
margin-bottom: 100px;<br />
padding: 0;<br />
width: 800px;<br />
height: auto;<br />
border: none;<br />
background: url(https://lh3.googleusercontent.com/-pusqszcwM8c/UAW5pfjsZgI/AAAAAAAAANs/0dLQIKngBhc/s488/trans1.png) repeat top left;<br />
<br />
/*font-family: 'HoeflerText-Regular', 'Hoefler Text', 'Times New Roman', 'serif';*/<br />
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;<br />
}<br />
<br />
#footer {<br />
position: absolute;<br />
width: 100%;<br />
bottom: 0;<br />
}<br />
<br />
#content_main {<br />
padding: 40px;<br />
padding-top: 0;<br />
}<br />
<br />
#side_bar {<br />
position: fixed;<br />
top: 100px;<br />
right: 0;<br />
width: 200px;<br />
height: 250px;<br />
z-index: 100;<br />
cursor: pointer;<br />
background: url(https://lh6.googleusercontent.com/-PEAQ4dNSF2Y/UAhs7D3J3VI/AAAAAAAAAOs/iRZZSBSWlK0/s300/tap1.png) no-repeat top right;<br />
background-size: 100% 100%;<br />
}<br />
<br />
#side_bar:hover {<br />
background: url(https://lh6.googleusercontent.com/-6tCnE_Wfc1M/UAhs7N8xndI/AAAAAAAAAOs/AWmXapQj0nU/s300/tap2.png) no-repeat top left;<br />
background-size: 100% 100%;<br />
}<br />
<br />
/*********CONTENT_MAIN FORMATTING*********/<br />
<br />
#content_main a {<br />
font-weight: bold;<br />
color: #F1C900;<br />
text-decoration: none;<br />
}<br />
<br />
#content_main a:hover {<br />
text-decoration: underline;<br />
}<br />
<br />
#content_main h1, #content_main h2, #content_main h3, #content_main h4, #content_main h5 {<br />
margin-bottom: 12px;<br />
padding: 12px;<br />
border: none;<br />
border-bottom: solid 1px #CCC;<br />
line-height: 120%;<br />
}<br />
<br />
#content_main img {<br />
border: 2px solid #CCC;<br />
}<br />
<br />
#content_main ol, #content_main ul {<br />
margin-left: 50px;<br />
}<br />
<br />
#content_main ul {<br />
list-style-image: url(https://lh4.googleusercontent.com/-mBAWcl14kCU/UAnEUwoTYmI/AAAAAAAAARs/Ow4zMrbuRNc/s6/bullet.png);<br />
}<br />
<br />
#content_main td {<br />
padding: 10px;<br />
width: 50%;<br />
}<br />
<br />
#content_main table, #content_main th, #content_main td {<br />
background: none;<br />
border: none;<br />
}<br />
<br />
#content_main table * {<br />
color: #CCC;<br />
}<br />
<br />
/*********SLIDESHOW*********/<br />
<br />
#slideshow {<br />
position: relative;<br />
top: 0;<br />
left: 0;<br />
width: 100%;<br />
height: 270px;<br />
}<br />
<br />
.slide {<br />
position: absolute;<br />
width: 100%;<br />
height: 100%;<br />
background-size: auto 200px;<br />
}<br />
<br />
/*********DROPDOWN CSS**********/<br />
<br />
#menu_bar td {<br />
width: 33%;<br />
}<br />
<br />
#menu_bar {<br />
width: 100%;<br />
overflow: hidden;<br />
color: #CCC; /*******COLOR*******/<br />
text-align: center;<br />
background: none;<br />
margin: 0;<br />
visibility: hidden;<br />
}<br />
<br />
#menu_bar dt {<br />
text-align: center;<br />
width: 100%;<br />
padding: 8px;<br />
font-weight: bold;<br />
cursor: pointer;<br />
background: #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar dd {<br />
position: absolute;<br />
overflow: hidden;<br />
width: 267px;<br />
display: none;<br />
background: #E9B300; /*******COLOR*******/<br />
z-index: 200;<br />
opacity: 0;<br />
}<br />
<br />
#menu_bar ul {<br />
width: 263px;<br />
border: 2px solid #925F00; /*******COLOR*******/<br />
list-style: none;<br />
border-top: none;<br />
}<br />
<br />
#menu_bar li {<br />
display: inline;<br />
}<br />
<br />
#menu_bar a, #menu_bar a:active, #menu_bar a:visited {<br />
display: block;<br />
padding: 5px;<br />
text-decoration: none;<br />
width: 100%;<br />
color: #925F00; /*******COLOR*******/<br />
border-top: 1px solid #925F00; /*******COLOR*******/<br />
}<br />
<br />
#menu_bar a:hover {<br />
background: #F1C900; /*******COLOR*******/<br />
}<br />
<br />
.leftBorder {<br />
border-left: solid 2px #CCC;<br />
}<br />
<br />
</style><br />
<script type="text/javascript"><br />
<br />
//newOpac: sets new opacity<br />
<br />
//*******************************************************************<br />
//************************SLIDESHOW SCRIPT***************************<br />
//*******************************************************************<br />
<br />
//Performs fade animation; main function<br />
function fade(curElemID,isFading) {<br />
<br />
//length that each slide shows before fade (in milliseconds)<br />
var slideStayTime = 3000;<br />
<br />
//length of fade (milliseconds)<br />
var fadeTime = 800;<br />
<br />
//number of fade loops: > means smoother, more CPU-intensive transition<br />
var numFadeLoops = 8;<br />
<br />
//In order for fade to work correctly, opacity must be rounded to<br />
//the appropriate number of decimal places. roundTo defines this.<br />
//For numFadeLoops < 20, roundTo = 1 will suffice. roundNum is the <br />
//functional form.<br />
var roundTo = 1;<br />
var roundNum = Math.pow(10, roundTo);<br />
<br />
//Fetches the current slide element<br />
var curElem = document.getElementById('slide' + curElemID);<br />
<br />
//Performs pre-fade functions. Function must be called with isFading = false.<br />
if (isFading == false) {<br />
<br />
//Fetches the next slide element. If there is no next slide,<br />
//return to slide1.<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (!nextElem) {<br />
var nextElem = document.getElementById('slide1');<br />
} //end if<br />
<br />
//Brings current slide to front/fading z-index (3) and puts the<br />
//next slide in the corresponding z-index (2). Slides that are<br />
//neither the current or next slide should have z-index = 1.<br />
curElem.style.zIndex = 30;<br />
nextElem.style.zIndex = 20;<br />
<br />
//Sets a preliminary opacities. Optional<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
nextElem.style.opacity = 1;<br />
nextElem.style.filter = 'alpha(opacity=100)';<br />
<br />
} //end if<br />
<br />
//Fades out the current slide if it is not already completely faded yet<br />
if (parseFloat(curElem.style.opacity) > 0) {<br />
<br />
//Sets new opacity and reruns the function<br />
var newOpac = (Math.round(roundNum * (parseFloat(curElem.style.opacity) - (1/numFadeLoops)))) / roundNum;<br />
curElem.style.opacity = newOpac;<br />
curElem.style.filter = 'alpha(opacity=' + (newOpac * 100) + ')';<br />
setTimeout(function(){fade(curElemID)}, (fadeTime/numFadeLoops));<br />
<br />
//Current slide has faded completely<br />
} else {<br />
<br />
//Sets the current slide to a hidden state with full opacity<br />
curElem.style.zIndex = 10;<br />
curElem.style.opacity = 1;<br />
curElem.style.filter = 'alpha(opacity=100)';<br />
<br />
//Sets next slide element. If there is no next slide,<br />
//return to slide1.<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
<br />
//Starts next fade. isFading = false is a required parameter<br />
setTimeout(function(){fade(nextElemID, false)}, slideStayTime);<br />
<br />
//Menu bar functions<br />
menuBar(curElemID);<br />
<br />
} //end if<br />
<br />
} //end function fade<br />
<br />
//Finds the next slide and returns its 'slide' + x id.<br />
function getNextSlide(curElemID) {<br />
<br />
var nextElem = document.getElementById('slide' + (curElemID + 1));<br />
if (nextElem) {<br />
var nextElemID = curElemID + 1;<br />
} else {<br />
var nextElemID = 1;<br />
} //end if<br />
<br />
return nextElemID;<br />
<br />
} //end function getNextSlide<br />
<br />
//Changes menu_bar element in coordination with slides<br />
function menuBar(curElemID) {<br />
<br />
nextElemID = getNextSlide(curElemID);<br />
var curMenuElem = document.getElementById('ddHeader' + curElemID);<br />
var nextMenuElem = document.getElementById('ddHeader' + nextElemID);<br />
<br />
//menu_bar item change actions go here<br />
nextMenuElem.style.background = '#DC8800'; /*******COLOR*******/<br />
<br />
//Change last menu_bar item back to its normal state<br />
curMenuElem.style.background = '#925F00'; /*******COLOR*******/<br />
<br />
} //end function menuBar<br />
<br />
//*******************************************************************<br />
//************************DROPDOWN SCRIPT****************************<br />
//*******************************************************************<br />
<br />
var ddspeed = 10;<br />
var ddtimer = 15;<br />
<br />
//Main function to handle the mouse events<br />
function ddMain(id, direction) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearInterval(contentElem.timer);<br />
<br />
if (direction == 1) {<br />
clearTimeout(headerElem.timer);<br />
if (contentElem.maxh <= contentElem.offsetHeight) {<br />
if (contentElem.maxh) {<br />
return;<br />
} //end if<br />
} else if (!contentElem.maxh) {<br />
contentElem.style.display = 'block';<br />
contentElem.style.height = 'auto';<br />
contentElem.maxh = contentElem.offsetHeight;<br />
contentElem.style.height = '0px';<br />
} //end if<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)},ddtimer);<br />
} else {<br />
headerElem.timer = setTimeout(function(){ddCollapse(contentElem)},50);<br />
} //end if<br />
<br />
} //end function ddMain<br />
<br />
//Collapse menu<br />
function ddCollapse(contentElem) {<br />
<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem, -1)},ddtimer);<br />
<br />
} //end function ddCollapse<br />
<br />
//Cancel the collapse if a user rolls over the dropdown<br />
function cancelCollapse(id) {<br />
<br />
var headerElem = document.getElementById('ddHeader' + id);<br />
var contentElem = document.getElementById('ddContent' + id);<br />
clearTimeout(headerElem.timer);<br />
clearInterval(contentElem.timer);<br />
<br />
if (contentElem.offsetHeight < contentElem.maxh) {<br />
contentElem.timer = setInterval(function(){ddSlide(contentElem,1)}, ddtimer);<br />
} //end if<br />
<br />
}<br />
<br />
//Incrementally expand/contract the dropdown and change the opacity<br />
function ddSlide(contentElem,direction) {<br />
<br />
var curHeight = contentElem.offsetHeight;<br />
<br />
if (direction == 1) {<br />
distance = Math.round((contentElem.maxh - curHeight) / ddspeed);<br />
} else {<br />
distance = Math.round(curHeight / ddspeed);<br />
} //end if<br />
<br />
if (distance <= 1) {<br />
if (direction == 1) {<br />
distance = 1;<br />
} //end if<br />
} //end if<br />
<br />
contentElem.style.height = curHeight + (distance * direction) + 'px';<br />
contentElem.style.opacity = curHeight / contentElem.maxh;<br />
contentElem.style.filter = 'alpha(opacity=' + (curHeight * 100 / contentElem.maxh) + ')';<br />
<br />
if (curHeight < 2) {<br />
if (direction != 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} else if (curHeight > (contentElem.maxh - 2)) {<br />
if (direction == 1) {<br />
clearInterval(contentElem.timer);<br />
} //end if<br />
} //end if<br />
} //end function ddSlide<br />
<br />
//*******************************************************************<br />
//************************MISC FUNCTIONS*****************************<br />
//*******************************************************************<br />
<br />
//Javascript link function<br />
function linkTo(url) {<br />
<br />
window.location.href = url;<br />
<br />
} //end function linkTo<br />
<br />
//Simple function that performs startup scripts when prompted<br />
function startFunctions () {<br />
<br />
setTimeout('fade(1,false)', 2000);<br />
menuBar(0);<br />
<br />
} //end function startFunctions<br />
<br />
</script><br />
</head><br />
<body><br />
<div style="border: solid red 1px;" id="menubar"></div><br />
<a id="side_bar" href="https://2012.igem.org/Team:Colorado_State/Safety"></a><br />
<div id="content_top"><br />
<div id="slideshow"><br />
<div style="position: absolute; top: 0; left: 0; height: 100%; width: 55%; z-index: 40; background: url(https://lh4.googleusercontent.com/-DDU8elUPsNM/UAm_sNRqnMI/AAAAAAAAARE/1Z2Xnvq4J1A/s600/fade1.png) top left; background-size: 100% 100%;"><br />
<a href="https://2012.igem.org/Team:Colorado_State"><img src="https://lh6.googleusercontent.com/-bxdljYiBZIY/UA2TwXb3f1I/AAAAAAAAASc/Z9Sv4HdQfNo/s640/team_logo.png" style="position: absolute; height: 80%; top: 20px; left: 20px;" /></a><br />
</div><br />
<div id="slide1" class="slide" style="background: url(https://lh6.googleusercontent.com/-HUO1pRHwGn8/UA6_152AUUI/AAAAAAAAAUg/NIAPTu0rJeo/s912/slide2.jpg) no-repeat top right; z-index: 30;" /></div><br />
<div id="slide2" class="slide" style="background: url(https://lh4.googleusercontent.com/-wv_cz741rxA/UA6_2SesX8I/AAAAAAAAAUo/kIBZr3Ydpi4/s912/slide1.jpg) no-repeat top right;" /></div><br />
<div id="slide3" class="slide" style="background: url(https://lh4.googleusercontent.com/-Atg7LS0jvu8/UA7Br49KLMI/AAAAAAAAAU8/LyqAernMIrM/s600/Brewery2-large.jpeg) no-repeat top right;" /></div><br />
</div><br />
<table id="menu_bar" cellspacing="0"><br />
<tr><br />
<td><br />
<dl><br />
<dt id="ddHeader1" onClick="linkTo('https://2012.igem.org/Team:Colorado_State')">Home</dt><br />
<dd id="ddContent1"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Home</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader2" class="leftBorder" onMouseOver="ddMain(2,1)" onMouseOut="ddMain(2)">The Brew</dt><br />
<dd id="ddContent2" onMouseOver="cancelCollapse(2)" onMouseOut="ddMain(2)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Project">Project Summary</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Parts">Parts Submitted to the Registry</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Results">Results</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Safety">Safety</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Modeling">Modeling</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Notebook">Team Notebook</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Calendar">Calendar</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
<td><br />
<dl><br />
<dt id="ddHeader3" class="leftBorder" onMouseOver="ddMain(3,1)" onMouseOut="ddMain(3)">The Brewers</dt><br />
<dd id="ddContent3" onMouseOver="cancelCollapse(3)" onMouseOut="ddMain(3)"><br />
<ul><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Team">Meet the Students</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Instructors">Meet the Instructors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Advisors">Meet the Advisors</a></li><br />
<li><a href="https://igem.org/Team.cgi?year=2012&team_name=Colorado_State">Official Team Page</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Sponsors">Sponsors</a></li><br />
<li><a href="https://2012.igem.org/Team:Colorado_State/Attributions">Attributions</a></li><br />
</ul><br />
</dd><br />
</dl><br />
</td><br />
</tr><br />
</table><br />
</div><br />
<script type="text/javascript">startFunctions();</script><br />
<div id="content_main"><br />
</html></div>
Eho
http://2012.igem.org/Team:Colorado_State/Advisors
Team:Colorado State/Advisors
2012-08-06T17:35:16Z
<p>Eho: </p>
<hr />
<div>{{CSU_Template_1_top}}<br />
<html xmlns="http://www.w3.org/1999/xhtml"><br />
<br />
<!--START PAGE CONTENT--><br />
<br />
<a class="editbutton" href="https://2012.igem.org/wiki/index.php?title=Team:Colorado_State/Advisors&amp;action=edit">Edit page</a><br />
<br />
<br><br />
<br />
<h1>Meet the Advisors</h1><br />
<br />
<table style="position: relative; margin-left: auto; margin-right: auto; width: 95%;"><br />
<tr><br />
<td><img style="float: left; margin-right: 10px;" src="http://www.world-gen.com/images/Lucas%20Argueso.jpg" width="170" /><br />
<h2>Lucas Argueso</h2><br />
<p>If there was a word for someone who knew everything about yeast, that word would be Lucas. Dr. Argueso is nothing short of a miracle worker when it comes to yeast biology and he's not afraid to prove it.</p><br />
</td><br />
<td><img style="float: left; margin-right: 10px;" src="http://www.cvmbs.colostate.edu/ns/_images/departments/mip/mip_geiss_201011_geiss_brian.jpg" width="170" /><br />
<h2>Brian Geiss</h2><br />
<p>Insert description here.</p><br />
</td><br />
</tr><br />
</table><br />
<br />
<!--END PAGE CONTENT--><br />
<br />
</html><br />
{{CSU_Template_1_bottom}}</div>
Eho