Team:UCSF/Team1
From 2013.igem.org
(Difference between revisions)
Line 5: | Line 5: | ||
<style type="text/css"> | <style type="text/css"> | ||
/*** | /*** | ||
- | Minimal header: | + | Minimal header: |
- | + | Thanks a lot to 2012 Calgary team for snippets of their code! | |
- | Thanks a lot to | + | |
Check out their wikis at: | Check out their wikis at: | ||
- | + | https://2012.igem.org/Team:Calgary | |
- | https://2012.igem.org/Team: | + | |
***/ | ***/ | ||
Line 104: | Line 102: | ||
font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | ||
border: 0; | border: 0; | ||
- | font-weight: | + | font-weight: normal; |
} | } | ||
- | + | p1, p2, p3, div.thumb div div.thumbcaption{ | |
font-family: Calibri, Sans-Serif; | font-family: Calibri, Sans-Serif; | ||
font-weight: normal; | font-weight: normal; | ||
color: black; | color: black; | ||
- | |||
- | |||
} | } | ||
Line 134: | Line 130: | ||
} | } | ||
- | + | a:link, | |
a:visited{ | a:visited{ | ||
font-family: Calibri, Sans-Serif; | font-family: Calibri, Sans-Serif; | ||
font-weight: normal; | font-weight: normal; | ||
- | color: # | + | color: #4E9600; |
text-decoration:none; | text-decoration:none; | ||
} | } | ||
- | + | a:hover, | |
a:active{ | a:active{ | ||
font-family: Calibri, Sans-Serif; | font-family: Calibri, Sans-Serif; | ||
font-weight: normal; | font-weight: normal; | ||
- | color: # | + | color: #4E9600; |
text-decoration:underline; | text-decoration:underline; | ||
} | } | ||
- | |||
- | |||
- | |||
- | |||
/***Body styling***/ | /***Body styling***/ | ||
h1{ | h1{ | ||
- | font-size: 2. | + | font-size: 2.2em; |
+ | line-height: 1.2em; | ||
+ | color: #008000; | ||
+ | font-weight: bold; | ||
} | } | ||
h2{ | h2{ | ||
- | font-size: | + | font-size: 2.0em; |
+ | line-height: 1em; | ||
+ | //color: #008000; | ||
+ | font-weight: bold; | ||
} | } | ||
h3{ | h3{ | ||
- | font-size: 1. | + | font-size: 1.8em; |
+ | line-height: 1em; | ||
+ | //margin: 0px 15px; | ||
+ | //font-weight: bold; | ||
+ | text-decoration: underline; | ||
+ | color: #008000; | ||
+ | } | ||
+ | h4{ | ||
+ | font-size: 1.4em; | ||
+ | color: #008000; | ||
+ | //margin: 0px 20px; | ||
+ | font-weight: bold; | ||
+ | } | ||
+ | p1{ | ||
+ | font-size: 1.5em; | ||
+ | line-height: 1.5em; | ||
+ | //color: #008000; | ||
+ | //font-weight: bold; | ||
+ | } | ||
+ | p2{ | ||
+ | font-size: 1.5em; | ||
+ | } | ||
+ | p3{ | ||
+ | font-size: 1.2em; | ||
} | } | ||
+ | #pagetitle{ | ||
+ | border-bottom: 2px solid black; | ||
+ | padding-bottom: 10px; | ||
+ | padding-left: 10px; | ||
+ | } | ||
+ | #bodycontainer h2{ | ||
+ | margin-left: 10px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | #bodycontainer p{ | ||
+ | margin-left: 20px; | ||
+ | margin-right: 10px; | ||
+ | } | ||
+ | #bodycontainer{ | ||
+ | margin-left: 220px; | ||
+ | } | ||
+ | #bodycontainer ul{ | ||
+ | margin-left: 5.0em; | ||
+ | } | ||
+ | #bodycontainer li{ | ||
+ | font-family: Georgia, Serif; | ||
+ | } | ||
#box1{ | #box1{ | ||
- | width: | + | width: 740px; |
+ | height: 1000px; | ||
background: #fffff; | background: #fffff; | ||
float: left; | float: left; | ||
- | margin-left: | + | margin-left: 210px; |
margin-top: 15px; | margin-top: 15px; | ||
} | } | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</style> | </style> | ||
+ | |||
+ | <!------------------------------Context Styles--------------------------------> | ||
<style> | <style> | ||
#mission {width: 500px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;} | #mission {width: 500px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;} | ||
#opensource {width:306px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;} | #opensource {width:306px; float:left; background-color: #F5F5F5; margin-left:8px; padding: 10px; margin-top:8px;} | ||
#rightcontent {width:800px; float:right; background-color: #F5F5F5; margin-left: 8px; margin-top:10px;} | #rightcontent {width:800px; float:right; background-color: #F5F5F5; margin-left: 8px; margin-top:10px;} | ||
- | #photos { | + | #photos {float:left; background-color: #FFFFFF; margin-left: 15px; margin-top:5px;} |
- | # | + | #leftcontenttext{float:left; background-color: #FFFFFF; margin-left: 15px; margin-top:5px;} |
- | + | #rightcontenttext {float:right; background-color: #FFFFFF; margin-left:15px; padding:10px; margin-top:0px;} | |
- | #rightcontenttext { | + | //#flickr{width:755px; float:right;} |
</style> | </style> | ||
- | |||
- | |||
- | |||
- | |||
+ | <!---------------------------------Sidebar------------------------------------------> | ||
+ | <!--Thanks a lot to 2012 SJTU-BioX-Shanghai team for snippets of their code! | ||
+ | Check out their wikis at: | ||
+ | https://2012.igem.org/Team:SJTU-BioX-Shanghai | ||
+ | --> | ||
- | < | + | <!-------------------------------Sidebar Styles--------------------------------> |
+ | <style type="text/css"> | ||
+ | div.sdmenu { | ||
+ | font-family: Myriad Pro, Gill Sans MT, Trebuchet MS, Arial, Sans-Serif; | ||
+ | font-size: 1.3em; | ||
+ | padding-bottom: 5px; | ||
+ | color: #fff; | ||
+ | } | ||
+ | div.sdmenu div { | ||
+ | background-color: #67A15A; | ||
+ | overflow: hidden; | ||
+ | } | ||
+ | div.sdmenu div.collapsed { | ||
+ | height: 30px;} | ||
+ | div.sdmenu div span { | ||
+ | display: block; | ||
+ | padding: 6px 25px; | ||
+ | width: 160px; | ||
+ | font-weight: bold; | ||
+ | color: white; | ||
+ | background: url(/wiki/images/f/f7/12SJTU_floatnav_expanded.gif) no-repeat 10px center; | ||
+ | cursor: default; | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | cursor: pointer; | ||
+ | } | ||
+ | div.sdmenu div:hover{ | ||
+ | background-color: #69C800; | ||
+ | } | ||
+ | div.sdmenu div.collapsed span { | ||
+ | background-image: url(/wiki/images/2/20/12SJTU_floatnav_collapsed.gif); | ||
+ | } | ||
+ | div.sdmenu div a { | ||
+ | padding: 5px 10px; | ||
+ | background: #D6EADC; | ||
+ | display: block; | ||
+ | border-bottom: 1px solid #ddd; | ||
+ | color: #1E3A00; | ||
+ | } | ||
+ | div.sdmenu div a.current { | ||
+ | background : #C0DCA4; | ||
+ | } | ||
+ | div.sdmenu div a:hover { | ||
+ | background : #4E9600 url(/wiki/images/2/2d/12SJTU_floatnav_linkarrow.gif) no-repeat right center; | ||
+ | color: #fff; | ||
+ | text-decoration: none; | ||
+ | } | ||
+ | </style> | ||
- | < | + | <style type="text/css"> |
- | + | .floatbox{ | |
+ | position:absolute; | ||
+ | width:160px; | ||
+ | height:00px; | ||
+ | background:#FFFFFF | ||
+ | } | ||
+ | </style> | ||
- | < | + | <!-------------------------------Sidebar JavaScripts-----------------------------> |
+ | <script type="text/javascript" > | ||
+ | function SDMenu(id) { | ||
+ | if (!document.getElementById || !document.getElementsByTagName) | ||
+ | return false; | ||
+ | this.menu = document.getElementById(id); | ||
+ | this.submenus = this.menu.getElementsByTagName("div"); | ||
+ | this.remember = true; | ||
+ | this.speed = 20; | ||
+ | this.markCurrent = true; | ||
+ | this.oneSmOnly = false; | ||
+ | } | ||
+ | SDMenu.prototype.init = function() { | ||
+ | var mainInstance = this; | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | this.submenus[i].getElementsByTagName("span")[0].onclick= function() { | ||
+ | mainInstance.toggleMenu(this.parentNode); | ||
+ | }; | ||
+ | if (this.markCurrent) { | ||
+ | var links = this.menu.getElementsByTagName("a"); | ||
+ | for (var i = 0; i < links.length; i++) | ||
+ | if (links[i].href == document.location.href) { | ||
+ | links[i].className = "current"; | ||
+ | break; | ||
+ | } | ||
+ | } | ||
+ | if (this.remember) { | ||
+ | var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)"); | ||
+ | var match = regex.exec(document.cookie); | ||
+ | if (match) { | ||
+ | var states = match[1].split(""); | ||
+ | for (var i = 0; i < states.length; i++) | ||
+ | this.submenus[i].className = (states[i] == 0 ? "collapsed" : ""); | ||
+ | } | ||
+ | } | ||
+ | }; | ||
+ | SDMenu.prototype.toggleMenu = function(submenu) { | ||
+ | if (submenu.className == "collapsed") | ||
+ | this.expandMenu(submenu); | ||
+ | else | ||
+ | this.collapseMenu(submenu); | ||
+ | this.collapseOthers(submenu); | ||
+ | }; | ||
+ | SDMenu.prototype.expandMenu = function(submenu) { | ||
+ | var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight; | ||
+ | var links = submenu.getElementsByTagName("a"); | ||
- | < | + | for (var i = 0; i < links.length; i++) |
- | + | fullHeight += links[i].offsetHeight; | |
+ | var moveBy = Math.round(this.speed * links.length); | ||
+ | |||
+ | var mainInstance = this; | ||
+ | var intId = setInterval(function() { | ||
+ | var curHeight = submenu.offsetHeight; | ||
+ | var newHeight = curHeight + moveBy; | ||
+ | if (newHeight < fullHeight) | ||
+ | submenu.style.height = newHeight + "px"; | ||
+ | else { | ||
+ | clearInterval(intId); | ||
+ | submenu.style.height = ""; | ||
+ | submenu.className = ""; | ||
+ | mainInstance.memorize(); | ||
+ | } | ||
+ | }, 30); | ||
+ | this.collapseOthers(submenu); | ||
+ | }; | ||
+ | SDMenu.prototype.collapseMenu = function(submenu) { | ||
+ | var minHeight = submenu.getElementsByTagName("span")[0].offsetHeight; | ||
+ | var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length); | ||
+ | var mainInstance = this; | ||
+ | var intId = setInterval(function() { | ||
+ | var curHeight = submenu.offsetHeight; | ||
+ | var newHeight = curHeight - moveBy; | ||
+ | if (newHeight > minHeight) | ||
+ | submenu.style.height = newHeight + "px"; | ||
+ | else { | ||
+ | clearInterval(intId); | ||
+ | submenu.style.height = ""; | ||
+ | submenu.className = "collapsed"; | ||
+ | mainInstance.memorize(); | ||
+ | } | ||
+ | }, 30); | ||
+ | }; | ||
+ | SDMenu.prototype.collapseOthers = function(submenu) { | ||
+ | if (this.oneSmOnly) { | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | if (this.submenus[i] != submenu){ if (this.submenus[i].className != "collapsed"){ | ||
+ | this.collapseMenu(this.submenus[i]);}} | ||
+ | } | ||
+ | }; | ||
+ | SDMenu.prototype.expandAll = function() { | ||
+ | var oldOneSmOnly = this.oneSmOnly; | ||
+ | this.oneSmOnly = false; | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | if (this.submenus[i].className == "collapsed") | ||
+ | this.expandMenu(this.submenus[i]); | ||
+ | this.oneSmOnly = oldOneSmOnly; | ||
+ | }; | ||
+ | SDMenu.prototype.collapseAll = function() { | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | if (this.submenus[i].className != "collapsed") | ||
+ | this.collapseMenu(this.submenus[i]); | ||
+ | }; | ||
+ | SDMenu.prototype.memorize = function() { | ||
+ | if (this.remember) { | ||
+ | var states = new Array(); | ||
+ | for (var i = 0; i < this.submenus.length; i++) | ||
+ | states.push(this.submenus[i].className == "collapsed" ? 0 : 1); | ||
+ | var d = new Date(); | ||
+ | d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000)); | ||
+ | document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/"; | ||
+ | } | ||
+ | }; | ||
+ | </script> | ||
- | < | + | <script type="text/javascript"> |
- | + | // <![CDATA[ | |
+ | var myMenu; | ||
+ | window.onload = function () { | ||
+ | myMenu = new SDMenu("my_menu"); | ||
+ | myMenu.oneSmOnly = true; | ||
+ | myMenu.remember = false; | ||
+ | myMenu.init(); | ||
+ | myMenu.expandMenu(myMenu.submenus[0]); | ||
+ | }; | ||
+ | // ]]> | ||
+ | </script> | ||
- | |||
- | < | + | </head> |
- | + | ||
- | |||
- | |||
- | < | + | <body> |
- | <div id=" | + | <!------------------------------------Sidebar-------------------------------------> |
- | < | + | <div class="floatbox" id="12SJTU_floatnav" style="top:200px; left:2px;"> |
- | + | <table border="0" width="150" cellspacing="0" cellpadding="0"> | |
- | < | + | <tr> |
- | < | + | <td width="100%"> |
- | <div id=" | + | <!--Team Sidebar--> |
- | < | + | <div style="float: left" id="my_menu" class="sdmenu"> |
- | + | <div class="collapsed"> | |
- | </ | + | <span>About Us</span> |
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content1">Biotechnology Program at Abraham Lincoln High School (ALHS)</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content2">Peking University and UCSF iGEM Exchange</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content3">Returning Team Members</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content4">UC Berkeley Cal Teach Program</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/About_Us1#content5">HHMI EXROP</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Members</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Team1#content1">First Year Team Members</a> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Team1#content2">Super Buddies/Second Year iGEM Team</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Advisors</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Advisors">Advisors</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Memtors</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Mentors&Instructors">Mentors & Instructors</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Profile</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Safety1">Official Profile</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Contact Us</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Safety1">Contact Us</a> | ||
+ | </div> | ||
</div> | </div> | ||
- | < | + | <!--Span: Members--> |
- | < | + | <script type="text/javascript"> |
- | + | // <![CDATA[ | |
- | + | var myMenu; | |
- | </ | + | window.onload = function () { |
+ | myMenu = new SDMenu("my_menu"); | ||
+ | myMenu.oneSmOnly = true; | ||
+ | myMenu.remember = false; | ||
+ | myMenu.init(); | ||
+ | myMenu.expandMenu(myMenu.submenus[1]); | ||
+ | }; | ||
+ | // ]]> | ||
+ | </script> | ||
- | <div | + | </tr> |
- | + | </table> | |
- | + | </div> | |
- | + | <script type="text/javascript"> | |
- | </ | + | var id = function (o) { return document.getElementById(o) } |
+ | var scroll = function (o) { | ||
+ | var space = id(o).offsetTop; | ||
+ | id(o).style.top = space + 'px'; | ||
+ | void function () { | ||
+ | var goTo = 0; | ||
+ | var roll = setInterval(function () { | ||
+ | var height = document.documentElement.scrollTop + document.body.scrollTop + space; | ||
+ | var top = parseInt(id(o).style.top); | ||
+ | if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 98) { | ||
+ | height = height - 50; | ||
+ | if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 198) { | ||
+ | height = height - 50; | ||
+ | if (parseInt(document.documentElement.scrollTop + document.body.scrollTop) > 298) { | ||
+ | height = height - 50; | ||
+ | } | ||
+ | } | ||
+ | } | ||
+ | if (height != top) { | ||
+ | goTo = height - parseInt((height - top) * 0.9); | ||
+ | id(o).style.top = goTo + 'px'; | ||
+ | } | ||
+ | }, 30); | ||
+ | } () | ||
+ | } | ||
+ | scroll('12SJTU_floatnav'); | ||
+ | </script> | ||
- | < | + | <!------------------------------------End Sidebar-------------------------------------> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | <div id=" | + | <div id="box1" align="justify"> |
- | < | + | <!------------------------------------Context-------------------------------------> |
- | + | <h2><center> UCSF is a graduate institution - so where do UCSF iGEM team members come from? </center></h2> | |
- | </ | + | |
- | </div> | + | <div id="leftcontenttext" style = "width: 750px;height:40px" align="justify"><a name ="content1"> |
+ | <h3>Team Members</h3> | ||
+ | </a></div> | ||
- | <div id=" | + | <div id="leftcontenttext" style = "width: 750px;height:135px" align="justify"> |
- | < | + | <p2>The ALHS Biotechnology Program is a two year pathway developed by George Cachianes and co-taught by Julie Reis: <a href="http://www.lincolnhigh.net/academy/biotech/overview">Lincoln High Biotech Webpage </a></p2> |
- | + | <br><br> | |
- | </ | + | <p2>This year, five members of the UCSF iGEM team were chosen from students who have completed this two-year class. Read more about David, Derrick, Eric, Sherry and Felicity at the <a href="https://2013.igem.org/Team:UCSF/Team"> team members page</a>!</p2> |
- | </ | + | |
</div> | </div> | ||
- | |||
- | |||
- | <div id=" | + | <div id="leftcontenttext" style = "width: 750px;height:40px" align="justify"><a name ="content2"> |
+ | <h3>Peking University and UCSF iGEM Exchange</h3> | ||
+ | </a></div> | ||
- | < | + | <div id="leftcontenttext" style = "width: 750px;height:135px" align="justify"> |
- | + | <p2>Through funding from QB3 and the Center for Systems and Synthetic Biology, we have established an exchange program with Peking University. For the past few years, we have welcomed an undergraduate student from PKU to join our team and vice versa. This summer, we had a student from the 2011 PKU iGEM team, JI Weiyue, join us for three months to work with as a part of our team. We also had a former UCSF iGEM member, Helena Viets, travel to Peking University and join the PKU iGEM team.</p2> | |
+ | </div> | ||
- | |||
- | < | + | <div id="leftcontenttext" style = "width: 750px;height:40px" align="justify"><a name ="content3"> |
- | + | <h3>Returning Team Members</h3> | |
+ | </a></div> | ||
+ | <div id="leftcontenttext" style = "width: 750px;height:75px" align="justify"> | ||
+ | <p2>This year we had two students from our 2012 team join us for a second year. Kendall Kearns and Verna Huang both attended ALHS and just finished their freshman year at UC Irvine and UC Santa Barbara, respectively.</p2> | ||
+ | </div> | ||
+ | <div id="leftcontenttext" style = "width: 750px;height:40px" align="justify"><a name ="content4"> | ||
+ | <h3>UC Berkeley Cal Teach Program</h3> | ||
+ | </a></div> | ||
+ | |||
+ | <div id="leftcontenttext" style = "width: 750px;height:75px" align="justify"> | ||
+ | <p2>Priyanka Dadlani is a member of the Cal Teach program at UC Berkeley and joined us for 10 weeks this summer and worked on computational models to provide predictions that would guide our experimental strategy. To read more about Calteach, <a href="http://calteach.berkeley.edu/">visit the Cal Teach Webpage </a></p2> | ||
</div> | </div> | ||
- | <div id=" | + | <div id="leftcontenttext" style = "width: 750px;height:40px" align="justify"><a name ="content5"> |
- | + | <h3>HHMI EXROP</h3> | |
- | + | </a></div> | |
- | </ | + | |
+ | <div id="leftcontenttext" style = "width: 750px;height:120px" align="justify"> | ||
+ | <p2>an Ergui joined us this summer as part of the Howard Hughes Medical Institute Exceptional Research Opportunities Program (EXROP). This program seeks to link students from disadvantaged backgrounds and students from groups that are underrepresented in the sciences to HHMI investigators from across the country. Students are given the opportunity to conduct research and live at an institution other than their home institution in order to experience science in a new academic setting. </p2> | ||
</div> | </div> | ||
- | <div id=" | + | <div id="leftcontenttext" style = "width: 750px;height:20px" align="justify"> |
- | + | <p2><br></pr> | |
- | + | ||
- | + | ||
</div> | </div> | ||
- | < | + | <!------------------------------------End Context-------------------------------------> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
- | |||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 18:42, 28 October 2013