Team:UCSF/Mentors&Instructors1
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;} |
- | # | + | #description{float:right; background-color: #FFFFFF; margin-right:-5px; margin-top:-5px;} |
+ | //#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> | </head> | ||
+ | |||
+ | |||
<body> | <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%"> | ||
- | < | + | <!--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/Advisors1">Advisors</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Memtors</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/Mentors&Instructors1">Mentors & Instructors</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Profile</span> | ||
+ | <a href="https://igem.org/Team.cgi?year=2013&team_name=UCSF">Official Profile</a> | ||
+ | </div> | ||
+ | <div class="collapsed"> | ||
+ | <span>Contact Us</span> | ||
+ | <a href="https://2013.igem.org/Team:UCSF/ContactUs1">Contact Us</a> | ||
+ | </div> | ||
+ | </div> | ||
- | < | + | <!--Span: Advisors--> |
+ | <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[2]); | ||
+ | }; | ||
+ | // ]]> | ||
+ | </script> | ||
- | < | + | </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="box1" align="justify"> |
- | + | <!------------------------------------Context-------------------------------------> | |
+ | <h2><center>Team Advisors</center></h2> | ||
- | <img align="left" style="margin-bottom: | + | <div id="photos" style = "width: 150px" align="justify"> |
- | src=" | + | <img align="left" style="margin-bottom:25px; width:150px; padding:0;" |
+ | src="http://dl.dropbox.com/u/24404809/Veronica%20Lab1.jpg"> | ||
+ | <img align="left" style="margin-bottom:25px; width:150px; padding:0;" src="https://static.igem.org/mediawiki/2013/b/b3/Kara_pic.jpg"> | ||
+ | <img align="left" style="margin-bottom:25px; width:150px; padding:0;" | ||
+ | src="http://i51.tinypic.com/2r4r4oj.jpg"> | ||
+ | <img align="left" style="margin-bottom:35px; width:150px; padding:0;" | ||
+ | src="http://dl.dropbox.com/u/24404809/Connie.jpg"> | ||
+ | |||
+ | <img align="left" style="margin-bottom:25px; width:150px; padding:0;" src="https://static.igem.org/mediawiki/2013/1/11/Suzi-Pic.JPG"> | ||
</div> | </div> | ||
- | <div id="description" style = "width: | + | <div id="description" style = "width:560px; height:120px; margin-bottom:25px"> |
- | < | + | <h4>Veronica Zepeda</h4> |
- | + | <p2> | |
- | </ | + | This is Veronica's third year working with the UCSF iGEM team! She was a graduate student in the Cate Lab at UC Berkeley and has been involved in science education and outreach for many years. |
+ | </p2> | ||
</div> | </div> | ||
- | <div id="description" style = "width: | + | <div id="description" style = "width:560px; height:150px; margin-bottom:25px"> |
- | < | + | <h4>Kara Helmke</h4> |
- | + | <p2> | |
- | + | Kara is a finishing graduate student in the Heald lab at UC Berkeley, and this is her first year, of many to come, working with the iGEM team. As a cell biologist and microscopist, the field of synthetic biology has been both challenging and exciting for her to learn about alongside the students. | |
- | </ | + | </p2> |
</div> | </div> | ||
- | <div id="description" style = "width: | + | <div id="description" style = "width:560px; height:155px; margin-bottom:25px"> |
- | < | + | <h4>Wendell Lim</h4> |
- | + | <p2> | |
- | </ | + | Wendell has had a lab at UCSF for over 15 years and has been an adviser to the UCSF team since it started in 2007. He enjoys working with bright, open-minded young scientists and seeing their ideas develop into scientific projects. |
+ | </p2> | ||
</div> | </div> | ||
- | <div id="description" style = "width: | + | <div id="description" style = "width:560px; height:130px; margin-bottom:22px"> |
- | + | <h4>Connie Lee</h4> | |
- | + | <p2> | |
- | + | Connie is the Associate Director for the Center for Systems and Synthetic Biology. She is a cell biologist by training and has spent the last 11 years working as a scientific editor, most recently as Deputy Editor at Cell. She enjoys being back in an academic environment and interacting with the iGEM team throughout the summer. | |
- | + | </p2> | |
- | + | ||
- | + | ||
- | + | ||
- | </ | + | |
</div> | </div> | ||
- | <div id="description" style = "width: | + | <div id="description" style = "width:560px; height:120px; margin-bottom:15px"> |
- | < | + | <h4>Suzi LeBaron</h4> |
- | + | <p2> | |
- | </ | + | Suzi teaches Anatomy and Physiology and AP Bio at Oakland High School. She helped the team work on their presentation and communications skills this summer as well as advised the team on their Human Practices projects. |
+ | </p2> | ||
</div> | </div> | ||
- | <div id=" | + | <div id="leftcontenttext" style = "width:750px; height:10px"> |
- | < | + | <p3><br><p3> |
- | + | ||
- | + | ||
- | + | ||
- | < | + | |
</div> | </div> | ||
- | < | + | <!------------------------------------End Context-------------------------------------> |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
</div> | </div> | ||
</body> | </body> | ||
</html> | </html> |
Revision as of 19:48, 28 October 2013