Difference between revisions of "Team:NYMU-Taipei/Pigments"

Line 49: Line 49:
 
border-radius: 4px;
 
border-radius: 4px;
 
padding:5px;
 
padding:5px;
 +
padding-right:12px;
 +
width:940px;
 +
margin: auto;
 +
margin-top:10px;
 +
}
 +
 +
.pigments_wrapper p {
 +
color: #ecffe8;
 +
padding-left:20px;
 +
}
 +
 +
.mark_description {
 +
font-family: 'Acme', sans-serif;
 +
color: #72e567;
 +
}
 +
 +
.mark_backbone {
 +
font-family: 'Acme', sans-serif;
 +
}
 +
 +
 +
/* Show & hide */
 +
.expandable {
 +
/* overflow set to hidden to hide the expanded text */
 +
overflow: hidden;
 +
/* all style changes will ease-in-out for 1s */
 +
-moz-transition: all 1s ease-in-out;
 +
-ms-transition: all 1s ease-in-out;
 +
-o-transition: all 1s ease-in-out;
 +
-webkit-transition: all 1s ease-in-out;
 +
transition: all 1s;
 +
}
 +
 +
.panel {
 +
background-color: rgba(255, 255, 255, 0.9);
 +
border: 1px solid transparent;
 +
border-radius: 4px;
 +
border-color: #ddd;
 +
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
 +
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
 +
padding:15px;
 +
width:920px;
 +
margin: auto;
 +
margin-top:10px;
 +
}
 +
 +
/* IF THE SCREEN IS LESS THAN 1300PX */
 +
@media only screen and (max-width: 1300px) {
 +
.panel {width:92%}
 +
.pigments_wrapper {width:93%}
 +
}
 +
 +
/* IF THE SCREEN IS LESS THAN 1200PX */
 +
@media only screen and (max-width: 1200px) {
 +
.panel {width:96%}
 +
.pigments_wrapper_wrapper {width:96.5%}
 +
}
 +
 +
 +
/* IF THE SCREEN IS LESS THAN 800PX */
 +
@media only screen and (max-width: 800px) {
 +
.igem_2017_footer_wrapper {width:100%; margin-left:0px;}
 +
.Nitrogen_Starvation {width:96%; margin-left:0px;}
 +
}
 +
 +
</style>
 +
 +
<script>
 +
function toggleHeight1(e, maxHeight) {
 +
e = document.getElementById("s1"); // e = the gray div
 +
   
 +
if(e.style.height != '30px') {
 +
e.style.height = '30px'; // height of one line: 20px
 +
} else {
 +
e.style.height = maxHeight + 'px';
 +
}
 +
}
 +
 +
function toggleHeight2(e, maxHeight) {
 +
e = document.getElementById("s2"); // e = the gray div
 +
   
 +
if(e.style.height != '30px') {
 +
e.style.height = '30px'; // height of one line: 20px
 +
} else {
 +
e.style.height = maxHeight + 'px';
 +
}
 +
}
 +
 +
function toggleHeight3(e, maxHeight) {
 +
e = document.getElementById("s3"); // e = the gray div
 +
   
 +
if(e.style.height != '30px') {
 +
e.style.height = '30px'; // height of one line: 20px
 +
} else {
 +
e.style.height = maxHeight + 'px';
 +
}
 +
}
 +
 +
function toggleHeight4(e, maxHeight) {
 +
e = document.getElementById("s4"); // e = the gray div
 +
   
 +
if(e.style.height != '30px') {
 +
e.style.height = '30px'; // height of one line: 20px
 +
} else {
 +
e.style.height = maxHeight + 'px';
 +
}
 +
}
 +
 +
function toggleHeight5(e, maxHeight) {
 +
e = document.getElementById("s5"); // e = the gray div
 +
   
 +
if(e.style.height != '30px') {
 +
e.style.height = '30px'; // height of one line: 20px
 +
} else {
 +
e.style.height = maxHeight + 'px';
 +
}
 +
}
 +
 +
function toggleHeight6(e, maxHeight) {
 +
e = document.getElementById("s6"); // e = the gray div
 +
   
 +
if(e.style.height != '30px') {
 +
e.style.height = '30px'; // height of one line: 20px
 +
} else {
 +
e.style.height = maxHeight + 'px';
 +
}
 +
}
 +
 +
function toggleHeight7(e, maxHeight) {
 +
e = document.getElementById("s7"); // e = the gray div
 +
   
 +
if(e.style.height != '30px') {
 +
e.style.height = '30px'; // height of one line: 20px
 +
} else {
 +
e.style.height = maxHeight + 'px';
 +
}
 +
}
 +
</script>
 +
 +
</head>
 +
 +
<body>
 +
 +
<div class="Nitrogen_Starvation">
 +
 +
<center><h1>Pigments</h1></center>
 +
<h5></h5>
 +
 +
<!-- Description -->
 +
<div class='pigments_wrapper'>
 +
<p>  In our project, we transfer five types of <font class='mark_description'>pigment-related gene sequence</font> (Indigoidine, Zeaxanthin, Melanin, Astaxanthin and Lycopene) into our cyanobacteria. We expect to get six different colors of microalgae, so we could see whether changing the original color of microalgae would change wavelength absorbance and have <font class='mark_description'>better photosynthetic efficiencies</font>. Due to better photosynthetic efficiencies, we could elevate oil accumulation in microalgae, which would have great benefit in both industry and scientific usage.
 +
</p>
 +
</div>
 +
 +
<!-- Backbone design-->
 +
<div class='panel'>
 +
<div id="s1" class="expandable" style='height: 30px;padding-top:15px;'>
 +
<a href="#!" onclick="toggleHeight1(this, 840); return false"
 +
style="font-family:'Acme', sans-serif;font-size:30px;color:#205e1a;height: 30px;">
 +
Backbone Design
 +
</a>
 +
<p>  To genetically engineer cyanobacteria, we chose <font class='mark_backbone'><i>Synechococcus elongatus PCC 7942</i></font> as our engineering host.
 +
Our main strategy is to embark on <font class='mark_backbone'><b>gene double-crossover homologous recombination</b></font> in <i>S. elongatus PCC 7942</i> genome, which is the first cyanobacterial strain to be transformed by exogenous DNAs and is reliably transformable through natural uptake of extracellular DNAs.
 +
</p>
 +
<p>  First, we constructed a vector which is able to finish double-crossover homologous gene recombination in <i>S. elongatus PCC 7942</i>.
 +
The vector (pPIGBACK) contains <font class='mark_backbone'>5’- and 3’-ends of the neutral site II (<b>NSII</b>)</font> and an <font class='mark_backbone'>ampicillin resistance gene (<b>AmpR</b>)</font> for antibiotic selection.
 +
Then we fused AmpR with double terminator, <font class='mark_backbone'><b>BBa_B0015</b></font>, which is proved to be functional in cyanobacteria.
 +
Additionally, in order to easily manipulate DNAs for gene cloning and plasmid preparation in <i>E. coli DH5α</i>, the <font class='mark_backbone'>replication origin (<b>ORI</b>)</font> of pBR322 was also introduced to make the plasmid vector replicable in <i>E. coli</i>.
 +
Then, in order to overexpress foreign genes in the cyanobacteria, the <font class='mark_backbone'>intrinsic promoter of Rubisco large subunit (<b>PrbcL</b>)</font> was chosen as the target for vector construction.
 +
PrbcL regulates the expression of the most abundant proteins in photosynthetic species and has been proven to have a high activity to express foreign genes, so we chose PrbcL as the promoter of our pigment gene.
 +
</p>
 +
<p>  The strategy we chose to construct the vector is to fuse B0015 and AmpR together first.
 +
Secondly, we fused 5’- and 3’-ends of the neutral site II (NSII) with PBR322 replication origin (ORI) together.
 +
At last, we ligated two parts together.
 +
The vector (pPIGBACK) is used to transform into PCC7942 with the inserted pigment gene in our experiments.
 +
After mass reproduction in <i>E. coli DH5α</i>, <i>PCC7942</i> were transformed through the uptake of plasmid DNAs extracted from <i>E. coli DH5α</i>.
 +
The transformed strains (transformants) were usually successfully obtained after 2 to 3 weeks and survived the ampicillin treatment.
 +
</p>
 +
</div>
 +
</div>
 +
 +
<div class='panel' style="background-color:rgba(222, 236, 247, 0.9)">
 +
<div id="s2" class="expandable" style='height: 30px;padding-top:15px;'>
 +
<a href="#!" onclick="toggleHeight2(this, 470); return false"
 +
style="font-family:'Acme', sans-serif;font-size:30px;color:#002384;height: 30px;">
 +
Cyan pigment (Indigoidine)
 +
</a>
 +
<div style="color:#1c3e4f;">
 +
<p>Blue Design</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class='panel' style="background-color:#rgba(253, 255, 221, 0.9)">
 +
<div id="s6" class="expandable" style='height: 30px;padding-top:15px;'>
 +
<a href="#!" onclick="toggleHeight6(this, 470); return false"
 +
style="font-family:'Acme', sans-serif;font-size:30px;color:#f6ff00;height: 30px;text-shadow: 1px 1px 1px #393a1f;">
 +
Zeaxanthin (CrtZ)
 +
</a>
 +
<div style="color:#393a1f;">
 +
<p>Yellow Design</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class='panel' style="background-color:rgba(186, 186, 186, 0.9)">
 +
<div id="s3" class="expandable" style='height: 30px;padding-top:15px;'>
 +
<a href="#!" onclick="toggleHeight3(this, 470); return false"
 +
style="font-family:'Acme', sans-serif;font-size:30px;color:#303030;height: 30px;">
 +
Black
 +
</a>
 +
<div style="color:#000000;">
 +
<p>Black Design</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class='panel' style="background-color:rgba(255, 234, 234, 0.9)">
 +
<div id="s4" class="expandable" style='height: 30px;padding-top:15px;'>
 +
<a href="#!" onclick="toggleHeight4(this, 470); return false"
 +
style="font-family:'Acme', sans-serif;font-size:30px;color:#af0e0e;height: 30px;">
 +
Red
 +
</a>
 +
<div style="color:#722525;">
 +
<p>Red Design</p>
 +
</div>
 +
</div>
 +
</div>
 +
 +
<div class='panel'>
 +
<div id="s5" class="expandable" style='height: 30px;padding-top:15px;'>
 +
<a href="#!" onclick="toggleHeight5(this, 440); return false"
 +
style="font-family:'Acme', sans-serif;font-size:30px;color:#205e1a;height: 30px;">
 +
Conclusion
 +
</a>
 +
<p>Conclusion</p>
 +
</div>
 +
</div>
 +
 +
<div class='panel'>
 +
<div id="s7" class="expandable" style='height: 30px;padding-top:15px;'>
 +
<a href="#!" onclick="toggleHeight7(this, 440); return false"
 +
style="font-family:'Acme', sans-serif;font-size:30px;color:#205e1a;height: 30px;">
 +
Reference
 +
</a>
 +
<p>Reference</p>
 +
</div>
 +
</div>
 +
 +
 +
</div>
 +
 +
</body>
 +
 +
</html>
 
padding-right:12px;
 
padding-right:12px;
 
width:940px;
 
width:940px;

Revision as of 05:44, 9 October 2017

Pigments

  In our project, we transfer five types of pigment-related gene sequence (Indigoidine, Zeaxanthin, Melanin, Astaxanthin and Lycopene) into our cyanobacteria. We expect to get six different colors of microalgae, so we could see whether changing the original color of microalgae would change wavelength absorbance and have better photosynthetic efficiencies. Due to better photosynthetic efficiencies, we could elevate oil accumulation in microalgae, which would have great benefit in both industry and scientific usage.

padding-right:12px; width:940px; margin: auto; margin-top:10px; }

.pigments_wrapper p { color: #ecffe8; padding-left:20px; }

.mark_description { font-family: 'Acme', sans-serif; color: #72e567; }

.mark_backbone { font-family: 'Acme', sans-serif; }


/* Show & hide */ .expandable { /* overflow set to hidden to hide the expanded text */ overflow: hidden; /* all style changes will ease-in-out for 1s */ -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -webkit-transition: all 1s ease-in-out; transition: all 1s; }

.panel { background-color: rgba(255, 255, 255, 0.9); border: 1px solid transparent; border-radius: 4px; border-color: #ddd; -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); padding:15px; width:920px; margin: auto; margin-top:10px; }

/* IF THE SCREEN IS LESS THAN 1300PX */ @media only screen and (max-width: 1300px) { .panel {width:92%} .pigments_wrapper {width:93%} }

/* IF THE SCREEN IS LESS THAN 1200PX */ @media only screen and (max-width: 1200px) { .panel {width:96%} .pigments_wrapper_wrapper {width:96.5%} }


/* IF THE SCREEN IS LESS THAN 800PX */ @media only screen and (max-width: 800px) { .igem_2017_footer_wrapper {width:100%; margin-left:0px;} .Nitrogen_Starvation {width:96%; margin-left:0px;} }

</style>

<script> function toggleHeight1(e, maxHeight) { e = document.getElementById("s1"); // e = the gray div

if(e.style.height != '30px') { e.style.height = '30px'; // height of one line: 20px } else { e.style.height = maxHeight + 'px'; } }

function toggleHeight2(e, maxHeight) { e = document.getElementById("s2"); // e = the gray div

if(e.style.height != '30px') { e.style.height = '30px'; // height of one line: 20px } else { e.style.height = maxHeight + 'px'; } }

function toggleHeight3(e, maxHeight) { e = document.getElementById("s3"); // e = the gray div

if(e.style.height != '30px') { e.style.height = '30px'; // height of one line: 20px } else { e.style.height = maxHeight + 'px'; } }

function toggleHeight4(e, maxHeight) { e = document.getElementById("s4"); // e = the gray div

if(e.style.height != '30px') { e.style.height = '30px'; // height of one line: 20px } else { e.style.height = maxHeight + 'px'; } }

function toggleHeight5(e, maxHeight) { e = document.getElementById("s5"); // e = the gray div

if(e.style.height != '30px') { e.style.height = '30px'; // height of one line: 20px } else { e.style.height = maxHeight + 'px'; } }

function toggleHeight6(e, maxHeight) { e = document.getElementById("s6"); // e = the gray div

if(e.style.height != '30px') { e.style.height = '30px'; // height of one line: 20px } else { e.style.height = maxHeight + 'px'; } }

function toggleHeight7(e, maxHeight) { e = document.getElementById("s7"); // e = the gray div

if(e.style.height != '30px') { e.style.height = '30px'; // height of one line: 20px } else { e.style.height = maxHeight + 'px'; } } </script>

</head>

<body>

Pigments

  In our project, we transfer five types of pigment-related gene sequence (Indigoidine, Zeaxanthin, Melanin, Astaxanthin and Lycopene) into our cyanobacteria. We expect to get six different colors of microalgae, so we could see whether changing the original color of microalgae would change wavelength absorbance and have better photosynthetic efficiencies. Due to better photosynthetic efficiencies, we could elevate oil accumulation in microalgae, which would have great benefit in both industry and scientific usage.


</body>

</html>