Team:UCSF/Materials

From 2013.igem.org

(Difference between revisions)
(Created page with "{{Template:UCSF/MainHeader}}")
 
(9 intermediate revisions not shown)
Line 1: Line 1:
{{Template:UCSF/MainHeader}}
{{Template:UCSF/MainHeader}}
 +
 +
<html>
 +
<head>
 +
<!--CSS styles: global-->
 +
<link rel='stylesheet' type='text/css' href="https://2012.igem.org/Team:Calgary/static/basicpageglobal.css?action=raw&ctype=text/css" />
 +
<style>
 +
/*======
 +
Desktop Styling
 +
======*/
 +
 +
/***Body styling***/
 +
h1{
 +
font-size: 2.2em;
 +
}
 +
h2{
 +
font-size: 1.8em;
 +
}
 +
 +
#box1{
 +
width: 440px;
 +
margin-top: -8px;
 +
background: #fffff;
 +
float: left;
 +
padding-bottom: 10px;
 +
margin-bottom: 5px;
 +
}
 +
#box1 h2{
 +
padding: 4px 4px 4px 4px;
 +
}
 +
#box1 p{
 +
padding: 0px 10px 0px 10px;
 +
font-size: 1.1em;
 +
}
 +
 +
#FredOscarFlag{
 +
display: block;
 +
float: right;
 +
width:450px;
 +
                height: 250px;
 +
background: url('https://static.igem.org/mediawiki/2013/a/a6/Exploratorium_Materials.jpg');
 +
background-position: top;
 +
margin: 0px;
 +
}
 +
 +
 +
#box2{
 +
width: 220px;
 +
background: #fffff;
 +
float: right;
 +
margin-top: -10px;
 +
}
 +
#box2 h2{
 +
padding: 20px 20px 20px 20px;
 +
color: white;
 +
}
 +
#box2 p{
 +
padding: 0px 20px 0px 20px;
 +
font-size: 1.1em;
 +
color: white;
 +
}
 +
#box2 img{
 +
float: right;
 +
margin: 15px;
 +
height: 220px;
 +
}
 +
#box2:hover{
 +
background: #fffff;
 +
}
 +
 +
/***positioning of elements in ZE EPIC BOX***/
 +
#epicbox{
 +
margin-top: 4px;
 +
}
 +
 +
#boximgcontainer{
 +
float: left;
 +
width: 644px;
 +
height: 655px;
 +
}
 +
#boximgcontainer div{
 +
float: left;
 +
position: relative;
 +
}
 +
#orangebox{
 +
margin-bottom: 4px;
 +
}
 +
#orangebox .imgbox{
 +
width: 644px;
 +
height: 215px;
 +
top: 108px;
 +
background: #F6A82D;
 +
margin-bottom: 4px;
 +
}
 +
.oblank{
 +
width: 644px;
 +
height: 104px;
 +
background: #FFE485;
 +
position: relative;
 +
top: -219px;
 +
}
 +
#orangebox:hover .oblank, .oblank:hover{
 +
display: none;
 +
}
 +
#orangebox .iconcontainer{
 +
position: relative;
 +
display: none;
 +
left: auto;
 +
top: -219px;
 +
}
 +
.iconbox div, .iconbox{
 +
width: 104px;
 +
height: 104px;
 +
margin-right: 4px;
 +
}
 +
a.obox1 div{
 +
background: #FFD35A;
 +
}
 +
a.obox2 div{
 +
background: #FECC44;
 +
}
 +
a.obox3 div{
 +
background: #F8C22E;
 +
}
 +
a.obox4 div{
 +
background: #F8B32E;
 +
}
 +
a.obox5 div{
 +
background: #F6A82D;
 +
}
 +
a.obox6 div{
 +
background: #F39808;
 +
margin-right: 0;
 +
}
 +
#orangebox div:hover, #orangebox div.iconbox:hover div{
 +
background: #FFE44F;
 +
}
 +
#orangebox:hover .iconcontainer{
 +
display: block;
 +
background: transparent;
 +
}
 +
 +
 +
#greenbox .imgbox{
 +
width: 320px;
 +
height: 215px;
 +
background: #58CD45;
 +
}
 +
.gblank{
 +
width: 320px;
 +
height: 104px;
 +
background: #B6FFA3;
 +
position: relative;
 +
top: 219px;
 +
left: -320px;
 +
}
 +
#greenbox .iconcontainer{
 +
position: relative;
 +
margin-top: 4px;
 +
left: -999em;
 +
z-index: 1;
 +
}
 +
a.gbox1 div{
 +
background: #72E85B;
 +
}
 +
a.gbox2 div{
 +
background: #5BCD45;
 +
}
 +
a.gbox3 div{
 +
background: #4CC035;
 +
}
 +
a.gbox4 div{
 +
background: #44AF2F;
 +
}
 +
#greenbox div:hover, #greenbox div.iconbox:hover div{
 +
background: #94FF7D;
 +
z-index: 99; /*hovers are not overridden by OSCAR boxes*/
 +
}
 +
#greenbox:hover .gblank, .gblank:hover{
 +
display: none;
 +
}
 +
#greenbox:hover .iconcontainer{
 +
left: auto;
 +
background: transparent;
 +
}
 +
 +
#bluebox{
 +
position: relative;
 +
top: -323px;
 +
left: 320px;
 +
}
 +
#bluebox .imgbox{
 +
width: 320px;
 +
height: 215px;
 +
background: #5BB5E8;
 +
margin-left: 4px;
 +
}
 +
.bblank{
 +
width: 320px;
 +
height: 104px;
 +
background: #C5F0F0;
 +
position: relative;
 +
top: 219px;
 +
left: -320px;
 +
z-index: 0;
 +
}
 +
#bluebox .iconcontainer{
 +
position: relative;
 +
margin-top: 4px;
 +
left: -999em;
 +
z-index: 0;
 +
}
 +
a.bbox1 div{
 +
background: #1574AA;
 +
}
 +
a.bbox2 div{
 +
background: #2580B3;
 +
}
 +
a.bbox3 div{
 +
background: #3285B4;
 +
}
 +
a.bbox4 div{
 +
background: #4292BF;
 +
}
 +
a.bbox5 div{
 +
background: #50A2D0;
 +
}
 +
a.bbox6 div{
 +
background: #5BB5E8;
 +
margin: 0;
 +
}
 +
#bluebox div:hover, #bluebox .iconbox:hover div{
 +
background: #7DD7FF;
 +
z-index: 99; /*hovers are not overridden by FRED boxes*/
 +
}
 +
#bluebox:hover .bblank, .bblank:hover{
 +
display: none;
 +
}
 +
#bluebox:hover .iconcontainer{
 +
left: -212px;
 +
background: transparent;
 +
}
 +
 +
#boxinfo{
 +
float: right;
 +
position: relative;
 +
width: 320px;
 +
left: 3px;
 +
background: #555555;
 +
height: 650px;
 +
margin-bottom: 12px;
 +
}
 +
#boxinfo h2{
 +
color: white;
 +
padding: 20px 20px 0px;
 +
}
 +
#boxinfo p{
 +
color: white;
 +
padding: 10px 20px 20px;
 +
font-size: 1.2em;
 +
}
 +
/*initial boxinfo appearance settings*/
 +
#boxinfo div.orangebox, #boxinfo div.obox1, #boxinfo div.obox2, #boxinfo div.obox3, #boxinfo div.obox4, #boxinfo div.obox5, #boxinfo div.obox6{
 +
display: none;
 +
}
 +
#boxinfo div.greenbox, #boxinfo div.gbox1, #boxinfo div.gbox2, #boxinfo div.gbox3, #boxinfo div.gbox4,
 +
#boxinfo div.bluebox, #boxinfo div.bbox1, #boxinfo div.bbox2, #boxinfo div.bbox3, #boxinfo div.bbox4, #boxinfo div.bbox5{
 +
position: relative;
 +
padding-top: 320px;
 +
display: none;
 +
}
 +
/*bold colours for FRED and OSCAR*/
 +
#boxinfo div.greenbox b{
 +
color: #72E85B;
 +
}
 +
#boxinfo div.bluebox b{
 +
color: #5EB7F0;
 +
}
 +
.threeboxes{
 +
clear: both;
 +
position: relative;
 +
width: 968px;
 +
margin-bottom: 12px;
 +
}
 +
.threeboxes a, .threeboxes a div{
 +
width: 320px;
 +
height: 155px;
 +
float: left;
 +
margin-bottom: 12px;
 +
}
 +
.threeboxes div h2{
 +
padding: 20px 20px 0px;
 +
position: relative;
 +
top: -155px;
 +
}
 +
.threeboxes div p{
 +
padding: 0px 20px;
 +
position: relative;
 +
top: -155px;
 +
}
 +
#greybox1, #greybox6{
 +
margin-right: 4px;
 +
background: #58CD45;
 +
}
 +
#greybox1:hover, #greybox6:hover{
 +
background: #94FF7D;
 +
}
 +
#greybox2, #greybox5{
 +
margin-right: 4px;
 +
background: #5BB5E8;
 +
}
 +
#greybox2:hover, #greybox5:hover{
 +
background: #7DD7FF;
 +
}
 +
#greybox3, #greybox4{
 +
margin: 0;
 +
background: #F6A82D;
 +
}
 +
#greybox3:hover, #greybox4:hover{
 +
background: #FFE44F;
 +
}
 +
 +
#sponsorsbox{
 +
clear: both;
 +
position: relative;
 +
width: 968px;
 +
margin: 4px 0px;
 +
background: #EEEEEE;
 +
}
 +
#sponsorsbox h2{
 +
padding: 20px 20px 0px 20px;
 +
}
 +
#sponsorsbox p{
 +
padding: 0px 20px;
 +
}
 +
#sponsorsbox table{
 +
width: 950px;
 +
margin-left: auto;
 +
margin-right: auto;
 +
background: #EEEEEE;
 +
}
 +
#sponsorsbox td{
 +
padding: 15px 0px;
 +
width: 300px;
 +
}
 +
#sponsorsbox img{
 +
display: block;
 +
margin-right: auto;
 +
margin-left: auto;
 +
}
 +
 +
</style>
 +
</head>
 +
<body>
 +
 +
<h1><center><FONT COLOR="#008000">Human Practices Materials</FONT COLOR="#008000"></center></h1>
 +
 +
<center>
 +
<h3>In the process of putting together our two human practices projects, we produced a variety of materials that we believe can be useful to other scientists who would like to talk to the public about synthetic biology. These materials are available for download and we plan to use them again in November to present at events for the <a href="http://www.bayareascience.org/" target="_blank">Bay Area Science Festival.</a><span> </h3></center>
 +
 +
<br><br>
 +
 +
 +
<div id="box1" align="justify">
 +
 +
 +
<center>
 +
<h2>
 +
<u>Outreach  Event at SF Exploratorium</u><br><br>
 +
 +
<a href="https://static.igem.org/mediawiki/2013/8/84/Exploratorium_slides_.ppt" target="_blank">Exploratorium Presentation</a><span>
 +
<br><br>
 +
<a href="https://static.igem.org/mediawiki/2013/d/d3/Central_Dogma.pdf" target="_blank">Central Dogma of Biology Elevator Talk</a><span>
 +
 +
 +
<br><br>
 +
<a href="https://static.igem.org/mediawiki/2013/b/b9/MicroTransformation.pdf" target="_blank">Transformations Elevator Talk</a><span>
 +
 +
<br><br>
 +
<a href="https://static.igem.org/mediawiki/2013/1/10/Book_Mark_Handouts_Exploratorium.pdf" target="_blank">Synthetic Biology Bookmarks</a><span></center>
 +
 +
 +
<br><br><br><br>
 +
<center>
 +
<h2>
 +
<u>Outreach  at Lincoln High School</u><br><br>
 +
 +
<a href="https://static.igem.org/mediawiki/2013/1/18/LincolnPoster_FINAL.pdf" target="_blank">ALHS Summary Poster</a><span>
 +
<br><br>
 +
 +
<a href="https://static.igem.org/mediawiki/2013/a/a2/GMO_ALHS.pdf" target="_blank">Presentation on GMOs</a><span>
 +
<br><br>
 +
 +
 +
<a href="https://static.igem.org/mediawiki/2013/f/f1/GMO_PCR_Student_Guide_2012.pdf" target="_blank">GMO PCR Lab</a><span>
 +
<br>
 +
<font face="arial" size = "3">
 +
(provided as a free resource by the <a href="http://www.babec.org" target="_blank">Bay Area Biotechnology Education Consortium</a><span>)</font>
 +
<br><br>
 +
 +
</div>
 +
 +
<div id="box2">
 +
<img style = "width:425px; height:255px" src="https://static.igem.org/mediawiki/2013/a/a6/Exploratorium_Materials.jpg">
 +
 +
<br><br>
 +
<img style = "width:425px; height:325px" src="https://static.igem.org/mediawiki/2013/e/e6/Lincoln_Poster_Icon.png">
 +
 +
 +
</div>
 +
 +
<br><br><br>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
</div>

Latest revision as of 20:06, 28 October 2013

Human Practices Materials

In the process of putting together our two human practices projects, we produced a variety of materials that we believe can be useful to other scientists who would like to talk to the public about synthetic biology. These materials are available for download and we plan to use them again in November to present at events for the Bay Area Science Festival.








Retrieved from "http://2013.igem.org/Team:UCSF/Materials"