-
Notifications
You must be signed in to change notification settings - Fork 2
/
interlab.html
275 lines (274 loc) · 11.7 KB
/
interlab.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
{{BU17_template_global}}
{{BU17_template_menubar}}
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700|Roboto:400,900" rel="stylesheet">
<style>
#top_menu_inside ul li > a { /* RECOLORS IGEM MENU */
color: #a9a9a9 !important;
}
.menu-type {
font-family: 'Roboto Condensed', sans-serif;
letter-spacing: 5 pt !important;
font-size: 14pt !important;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
font-weight: 700;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.wide-heading-type {
font-family: 'Roboto', sans-serif;
font-size: 24pt !important;
letter-spacing: 5pt !important;
text-align: center;
text-decoration: none !important;
text-transform: uppercase;
font-weight: bold;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.body-type {
font-family: 'Roboto', sans-serif;
font-size: 16pt !important;
text-decoration: none !important;
line-height: 2;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.caption-type {
font-family: 'Roboto', sans-serif;
font-size: 18pt !important;
text-decoration: none !important;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.inline-heading-type {
font-family: 'Roboto', sans-serif !important;
font-size: 20pt !important;
font-weight: bold !important;
text-decoration: none !important;
line-height: 2 pt !important;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.float-left {
float: left !important;
}
.float-right {
float: right !important;
}
.align-right {
text-align: right !important;
}
.align-center {
text-align: center !important;
}
.indented {
text-indent: 80px;
}
.mainwrap {
width: 90%;
max-width: 960px;
min-width: 360px;
margin: 0 auto;
top:0;
display: none;
}
body {
background-image: url("http://2017.igem.org/wiki/images/f/ff/T--BostonU--CircadiaSynthetica.png");
background-repeat: no-repeat;
background-attachment: fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
}
#backgroundimage1 {
margin-top: -85px;
background-image: url("#");
background-repeat: no-repeat;
background-attachment: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
height: 360px;
width: 100%;
align-content:center;
text-align:center
vertical-align:middle;
}
#backgroundimage1 p {
top: 40%;
color: #FEFEFE;
position: relative;
}
.background-gradient-down {
height: 360px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&0+0,1+100 */
background: -moz-linear-gradient(top, rgba(239,239,238,0) 0%, rgba(239,239,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(239,239,238,0) 0%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */
}
.background-gradient-up {
height: 360px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+100&1+0,0+100 */
background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#00efefee',GradientType=0 ); /* IE6-9 */
}
.background-gradient-both {
height: 360px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efefee+0,efefee+50,efefee+100&1+0,0+50,1+100 */
background: -moz-linear-gradient(top, rgba(239,239,238,1) 0%, rgba(239,239,238,0) 50%, rgba(239,239,238,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(239,239,238,1) 0%,rgba(239,239,238,0) 50%,rgba(239,239,238,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efefee', endColorstr='#efefee',GradientType=0 ); /* IE6-9 */
}
#panel1 {
background: #EFEFEE;
width: 100%;
color: #1d1d1d;
z-index: 1;
}
#backgroundimage2 {
background-image: url("#");
background-repeat: no-repeat;
background-attachment: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover !important;
height: 360px;
width: 100%;
position: relative;
}
#backgroundimage2 p {
top: 40%;
color: #FEFEFE;
}
#protocol-accordion .ui-accordion-content {
background: #FFFFFF;
color: #A9A9A9;
border-radius: 20px;
}
#protocol-accordion .ui-accordion-content > * {
margin: 0;
padding: 40px;
}
.link-slideup {
position: relative;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.link-slideup a {
position: relative;
display: inline-block;
outline: none;
color: #D45B5C;
vertical-align: bottom;
text-decoration: none;
white-space: nowrap;
}
.link-slideup a::before, .link-slideup a::after {
pointer-events: none;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.link-slideup a {
overflow: hidden;
font-weight: 500;
}
.link-slideup a::before {
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 100%;
height: 100%;
background-color: #A9A9A9;
opacity: 1;
content: '';
-webkit-transition: -webkit-transform 0.2s;
transition: transform 0.2s;
-webkit-transform: translateY(95%);
transform: translateY(95%);
opacity: 0.3;
}
.link-slideup a:hover::before, .link-slideup a:focus::before {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.figwrap {
background: #FFFFFF;
width: 80%;
border-radius: 5pt;
align-content:center;
}
.figwrap img {
height: 500px;
padding: 0 5%;
}
.figwrap p {
padding: 0 5%;
}
</style>
</head>
<body>
<div id="backgroundimage1"><div class="background-gradient-down">
<p class="wide-heading-type mainwrap align-center">CONTRIBUTION TO THE INTERLAB STUDY</p>
</div></div>
<div id="panel1" class="link-slideup">
<p class="body-type mainwrap">Fluorescence measurements are difficult to standardize across labs because different methods and units are used to measure fluorescence. In an effort to standardize fluorescence measurements from Green Fluorescent Protein (GFP), one of the most commonly used marker proteins, iGEM has implemented the InterLab Study in order to provide protocols for users to generate absolute units for measuring GFP. This is the fourth year iGEM has done the <a href="http://2017.igem.org/Competition/InterLab_Study">InterLab Study.</a></p>
<p class="body-type mainwrap"> </p>
<p class="body-type mainwrap">This year, iGEM is addressing this question: How close can the numbers be when fluorescence is measured all around the world? Parts from the iGEM InterLab Kit were transformed into competent E. coli DH5-alpha cells. Eight plasmids in total were transformed, including a Negative Control, a Positive Control, and six test devices.Their iGEM IDs are listed below. All measurements were made in a SpectraMax plate reader from a CoStar black clear bottom 96-well plate. </p>
<p class="body-type mainwrap"> </p>
<section class="body-type mainwrap link-slideup">
<p class="body-type mainwrap">▪ Positive Control (<a href="http://parts.igem.org/Part:BBa_I20270">BBa_I20270</a>)</p>
<p class="body-type mainwrap">▪ Negative Control (<a href="http://parts.igem.org/Part:BBa_R0040">BBa_R0040</a>)</p>
<p class="body-type mainwrap">▪ Test Device 1 (<a href="http://parts.igem.org/Part:BBa_J364000">BBa_J364000</a>)</p>
<p class="body-type mainwrap">▪ Test Device 2 (<a href="http://parts.igem.org/Part:BBa_J364001">BBa_J364001</a>)</p>
<p class="body-type mainwrap">▪ Test Device 3 (<a href="http://parts.igem.org/Part:BBa_J364002">BBa_J364002</a>)</p>
<p class="body-type mainwrap">▪ Test Device 4 (<a href="http://parts.igem.org/Part:BBa_J364003">BBa_J364003</a>)</p>
<p class="body-type mainwrap">▪ Test Device 5 (<a href="http://parts.igem.org/Part:BBa_J364004">BBa_J364004</a>)</p>
<p class="body-type mainwrap">▪ Test Device 6 (<a href="http://parts.igem.org/Part:BBa_J364005">BBa_J364005</a>) </p>
<p class="body-type mainwrap"> </p>
</section>
<p class="body-type mainwrap">Baseline OD measurements were made using LUDOX-S40. These measurements allow for conversion from absorbance at 600 nm to OD. Our conversion factor was determined to be 0.01275.</p>
<p class="body-type mainwrap"> </p>
<p class="body-type mainwrap">A standard fluorescence curve was generated using serial dilutions of fluorescein. This allowed for correction of the measured fluorescence against standard fluorescein measurements. We ran into issues with generating the standard curve because even after adjusting the settings, the fluorescence from the two highest fluorescein concentrations saturated our plate reader. The following are the graphs generated based on the data we were able to collect. </p>
<p class="body-type mainwrap"> </p>
<div class="figwrap mainwrap body-type">
<img src="http://2017.igem.org/wiki/images/7/7d/T--BostonU--InterLabSC.png"></img>
<p class="body-type"><strong>Figure 1.</strong> This figure shows the standard curve generated from our fluoroscein measurements during the InterLab Study. </p>
</div>
<p class="body-type mainwrap"> </p>
<div class="figwrap mainwrap body-type">
<img src="http://2017.igem.org/wiki/images/e/ed/T--BostonU--InterLabSClog.png"></img>
<p class="body-type"><strong>Figure 2.</strong> This figure shows the same standard curve as Figure 1 except graphed with a logarithmic scale. </p>
</div>
<p class="body-type mainwrap"> </p>
<p class="body-type mainwrap">Finally, we were able to measure the fluorescence from the InterLab parts. The eight parts were rehydrated from Plate 6 from the Distribution Kit. They were transformed according to the provided protocols into DH5-alpha cells and plated on LB+chloramphenicol plates. Two colonies were picked from each plate and liquid cultured for 16 hours. The next day, the cultures were diluted to an absorbance at 600nm of approximately 0.02. 500 μl from each culture were taken at 0, 2, 4, and 6 hours after dilution. The fluorescence and absorbance at 600nm were measured from these samples via the plate reader. The following graph shows time series for the corrected fluorescence from each curve, with colony 1 shown as solid lines and colony 2 shown as dashed lines. </p>
<p class="body-type mainwrap"> </p>
<div class="figwrap mainwrap body-type">
<img src="http://2017.igem.org/wiki/images/8/8d/T--BostonU--InterLabPlot1Best.png"></img>
<p class="body-type"><strong>Figure 2.</strong> Caption for figure. This figure shows a time course for the average fluorescence from each colony at each time point. Two colonies, labelled C1 and C2 in the legend, were measured for each device. </p>
</div>
<p class="body-type mainwrap"> </p>
<p class="body-type mainwrap"> </p>
</div>
<div id="backgroundimage2"><div class="background-gradient-up">
</div></div>
<script> /* THIS MAKES ANY WRAPPED ELEMENT ON THE PAGE FADE IN */
$(document).ready(function () {
$('.mainwrap').fadeIn(1000);
});
</script>
</body>
</html>