Widget:新样式：修订间差异

H萌娘，万物皆可H的百科全书！
跳到导航 跳到搜索
imported>=海豚=
（以“ <!-- 檀: Code Start Here (Create at 20201021) --> <html> <link rel="stylesheet" href="https://2020.igem.org/wiki/index.php?title=Template:AHUT-ZJU-China/default.css&amp…”替换内容）
imported>=海豚=
无编辑摘要
第1行： 第1行：
<html>
<link href="http://2017.igem.org/Template:Vilnius-Lithuania/CSSvendor?action=raw&ctype=text/css" rel="stylesheet"/>
<link href="http://2017.igem.org/Template:Vilnius-Lithuania/CSSprod?action=raw&ctype=text/css" rel="stylesheet"/>
</html>


<!-- 檀: Code Start Here (Create at 20201021) -->
{{Vilnius-Lithuania/navbar}}
 


<html>
<html>
<link rel="stylesheet"
  href="https://2020.igem.org/wiki/index.php?title=Template:AHUT-ZJU-China/default.css&amp;action=raw&amp;ctype=text/css">
<link rel="stylesheet"
  href="https://2020.igem.org/wiki/index.php?title=Template:AHUT-ZJU-China/home-fonts.css&amp;action=raw&amp;ctype=text/css">
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">
<style>
#main-header .main-nav nav ul li a {
color: #000;
text-decoration: none;
padding: 0;
transition: all .5s ease-in-out;
}
::selection {
background: rgba(255, 193, 8, 0.7);
color: #ffffff;
}
::-moz-selection {
background: rgba(255, 193, 8, 0.7);
color: #ffffff;
}
::selection {
background: rgba(255, 193, 8, 0.7);
color: #ffffff;
}
::-moz-selection {
background: rgba(255, 193, 8, 0.7);
color: #ffffff;
}
  #globalWrapper,
  #content,
  #HQ_page,
  #bodyContent,
  #mw-content-text {
   height: 100%;
  }
  * {
   font-smoothing: antialiased;
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizeLegibility;
   line-height: 1;
font-family: 'Playfair Display', serif !important;
  }
#video-preload {
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
}
#video-preload video {
height: 0;
width: 0;
opacity: 0;
overflow: hidden;
}
html, body {
padding: 0;
margin: 0;
width: 100%;
   height: 100%;
   font-family: 'Playfair Display', serif !important;
}
.page-section {
position: relative;
width: 100%;
height: 100%;
}
.next-btn {
   padding: 10px 18px;
   color: #fff;
   border: solid 1px #fff;
   display: inline-block;
   cursor: pointer;
   transition: all .3s ease-in-out;
   font-size: 16px;
}
.next-btn:hover {
background-color: #fff;
color: #000;
}
#hero-section video {
position: relative;
width: 100%;
height: 100%;
object-fit: cover;
}
#hero-section .side-bar {
position: absolute;
z-index: 102;
right: 0;
top: 220px;
bottom: 0;
width: 450px;
background-color: #000;
/* background: linear-gradient(135deg, transparent 20px, #000 0); */
}
#hero-section .side-bar.transform {
animation: side-bar-expand-shrink .6s 1;
-moz-animation: side-bar-expand-shrink .6s 1;
-webkit-animation: side-bar-expand-shrink .6s 1;
-o-animation: side-bar-expand-shrink .6s 1;
animation-timing-function: ease;
}
@keyframes side-bar-expand-shrink {
60%{
width: 100%;
top: 0;
}
70%{
width: 100%;
top: 0;
}
100%{
width: 450px;
top: 220px;
}
}
/*
#hero-section .side-bar::before {
content: '';
   position: absolute;
   height: 80px;
   width: 80px;
   left: -80px;
   bottom: 0;
   background-color: #000;
   background: linear-gradient(135deg, transparent 73px, #000 0);
}
*/
#hero-section .side-bar .content {
opacity: 1;
transition: opacity .5s ease-in-out;
}
#hero-section .side-bar .content.hide {
opacity: 0;
}
#hero-section .side-bar .top-title {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 30px 40px 20px 40px;
}
#hero-section .side-bar .bottom-title {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 10px 40px;
border-top: solid 1px #525252;
text-align: right;
}
#hero-section .side-bar .top-title .subtitle {
color: #adadad;
   text-transform: uppercase;
   font-size: 13px;
}
#hero-section .side-bar .top-title h1 {
color: #fff;
   font-size: 25px;
   margin-top: 10px;
   margin-bottom: 0;
   text-transform: uppercase;
}
#hero-section .side-bar .text-content {
padding: 0 40px;
   overflow-y: auto;
   position: absolute;
   top: 100px;
   bottom: 62px;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
#hero-section .side-bar .text-content::-webkit-scrollbar {
  display: none; /* Chrome Safari */
}
#hero-section .side-bar .text-content p {
color: #dedede;
font-size: 16px;
}
#hero-section .video-mask {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgb(0 0 0 / 0);
   z-index: 101;
   transition: all .5s ease-in-out;
}
#hero-section .video-mask.show {
background-color: rgb(0 0 0 / 0.8);
}
#main-header {
position: absolute;
left: 0;
top: 0;
z-index: 102;
padding: 12px 30px;
padding-right: 50px;
background-color: #fff;
transition: all .5s ease-in-out;
background: linear-gradient(315deg, transparent 20px, #fff 0);
margin-top: 19px;
}
#main-header img.logo {
height: 80px;
width: auto;
transition: all .5s ease-in-out;
-webkit-filter: grayscale(0);
   filter: grayscale(0);
}
#main-header .float-left {
float: left;
}
#main-header .float-right {
float: right;
}
#main-header .float-clear {
clear: both;
}
#main-header .main-nav nav ul li {
color: #000;
   font-size: 16px;
   display: inline-block;
   margin: 15px 10px;
   transition: all .5s ease-in-out;
   cursor: pointer;
   border-left: solid 1px #000;
   padding: 0 0 2px 25px;
}
#main-header .main-nav nav ul {
padding-left: 20px;
transition: all .5s ease-in-out;
margin-top: 15px;
   margin-left: 0;
}
#main-header.shrink {
transition: all .5s ease-in-out;
}
#main-header.shrink .main-nav nav ul li {
margin: 2px 5px;
font-size: 13px;
border-left: solid 1px #000;
   padding: 0 0 3px 15px;
}
#main-header.shrink .main-nav nav ul {
padding-left: 15px;
margin: 15px 0 0 0;
}
#main-header.shrink img.logo {
height: 50px;
-webkit-filter: grayscale(100%);
   filter: grayscale(100%);
}
#main-header .sub-nav {
visibility: hidden;
opacity: 0;
transform: scaleY(0);
transition: all .5s ease-in-out;
}
#main-header .sub-nav.show {
visibility: visible;
opacity: 1;
transform: scaleY(1);
}
#main-header .sub-nav nav ul li {
display: block;
   padding: 5px 0 !important;
   border-left: none !important;
}
.fadedNavItem {
   color: #e6e6e6 !important;
   border-color: #e6e6e6 !important;
transition: all .5s ease-in-out;
}
.fadedNavItem a {
color: #e6e6e6 !important;
transition: all .5s ease-in-out;
}
#main-header li {
-webkit-touch-callout: none;
     /* iOS Safari */
     -webkit-user-select: none;
     /* Chrome/Safari/Opera */
     -khtml-user-select: none;
     /* Konqueror */
     -moz-user-select: none;
     /* Firefox */
     -ms-user-select: none;
     /* Internet Explorer/Edge */
     user-select: none;
}
.hero-title {
   position: absolute;
   z-index: 100;
   padding-bottom: 50px;
   padding-left: 50px;
   left: 0;
   bottom: 0;
   right: 0;
   background-image: linear-gradient(to top, black , transparent);
}
.hero-title h1 {
font-size: 40px;
   color: #fff;
   margin-bottom: 0;
}
.hero-title h2 {
   font-size: 14px;
   color: #fff;
   font-weight: 400;
   display: block;
   width: 650px;
   line-height: 1.5;
}
#mw-content-text {
margin-top: 10px;
}
#bodyContent h1 {
   font-weight: 600 !important;
}
#top_menu_14 {
background-color: #000000;
}
#top_menu_inside {
padding-top: 2px;
}
#top_menu_inside {
border: none !important;
margin-left: 3px !important;
}
.loading-cover {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #042104;
animation: animateBg 10s linear infinite;
}
.loading-cover .loader{
position: relative;
width: 120px;
height: 120px;
}
.loading-cover .loader span{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: rotate(calc(18deg * var(--i)));
}
.loading-cover .loader span::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background: #00ff0a;
box-shadow: 0 0 10px #00ff0a,
0 0 20px #00ff0a,
0 0 40px #00ff0a,
0 0 60px #00ff0a,
0 0 70px #00ff0a,
0 0 100px #00ff0a;
animation: animate 2s linear infinite;
animation-delay: calc(0.1s * var(--i));
}
@keyframes animateBg{
0%{filter: hue-rotate(0deg)}
100%{filter: hue-rotate(360deg)}
}
@keyframes animate{
0%{transform: scale(1);}
80%, 100%{transform: scale(0);}
}
#first-screen-loading-cover {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 100000;
}
</style>


 
<div class="wrapper problem-page">
 
   <div class="container">
<div class="floating-nav-btn"></div>
     <h1>Present Challenges of<br/> Experimenting With Plasmid Systems</h1>
<header id="main-header" class="shrink">
     <div class="presentation">
<div class="float-left">
       <div class="left">
<img class="logo" src="https://2020.igem.org/wiki/images/7/74/T--AHUT-ZJU-China--logo%402x.png">
         <div class="left-steps">
</div>
           <div class="left-step is-current" style="display: block">
<div class="float-left main-nav">
             <div class="step">1. 1.</div>
<nav id="main-top-nav">
             <div class="title">Plasmid Replication </div>
<ul>
             <p>Origin of replication (Ori) is a sequence where the plasmid replication begins. Plasmids with similar Ori sites use the same replication machinery. </p>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China">HOME</a></li>
             <h6>Problem #1</h6>
<li>TEAM</li>
           </div>
<li>PROJECT</li>
           <div class="left-step">
<li>EXPERIMENTS</li>
             <div class="step">1. 2.</div>
<li>PARTS</li>
             <div class="title">Unbalanced Replication</div>
<li>HP</li>
             <p> Replication machinery does not discriminate between similar Ori sites, therefore smaller plasmids are replicated faster and rapidly outgrow larger plasmids, which leads to uneven plasmid ratios in a cell.</p>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Model">MODEL</a></li>
             <h6>Problem #1</h6>
<li><a href="https://igem.org/2020_Judging_Form?id=3656">JUDGING FORM</a></li>
           </div>
</ul>
           <div class="left-step">
</nav>
             <div class="step">1. 3.</div>
<!-- Top Sub-Nav S -->
             <div class="title">Plasmid Loss</div>
<div class="sub-nav" id="sub-nav-team" style="display: none">
             <p> This is even more likely to occur when some plasmids are low copy number. When the cell
<nav>
               divides, low copy plasmids tend to be lost in next generations. </p>
<ul>
             <h6>Problem #1</h6>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Team">TEAM MEMBERS</a></li>
           </div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Attributions">ATTRIBUTION</a></li>
           <div class="left-step">
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Collaborations">COLLABORATION</a></li>
             <div class="step">2. 1.</div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Partnership">PARTNERSHIP</a></li>
             <div class="title">Plasmid Incompatibility </div>
</ul>
             <p>This inability to stably co-maintain different plasmids over a number of generations in the same bacterial cell line is called plasmid incompatibility. One needs to use different types of Ori to avoid this trouble.</p>
</nav>
             <h6>Problem #2</h6>
</div>
           </div>
<div class="sub-nav" id="sub-nav-project" style="display: none">
           <div class="left-step">
<nav>
             <div class="step">2. 2.</div>
<ul>
             <div class="title">Plasmid Incompatibility</div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Description">DESCRIPTION</a></li>
             <p>However, it often causes trouble due to limited Ori selection options or the lack of good combination of Ori and plasmid's copy number. Imagine you require a system consisting of two - low and high copy number  plasmids. Try picking them from the list.</p>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Design">DESIGN</a></li>
             <h6>Problem #2</h6>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Contribution">CONTRIBUTION</a></li>
           </div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Implementation">PROPOSED IMPLEMENTATION</a></li>
           <div class="left-step">
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Proof_Of_Concept">PROOF OF CONCEPT</a></li>
             <div class="step">2. 3.</div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Excellence_in_another_Area">EXCELLENCE IN ANOTHER AREA</a></li>
             <div class="title">Fixed Copy Number</div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Engineering">ENGINEERING</a></li>
             <p>Currently no handy method of changing the copy number of particular plasmid exists. It must be either low, or medium, or high.</p>
</ul>
             <h6>Problem #2</h6>
</nav>
           </div>
</div>
           <div class="left-step">
<div class="sub-nav" id="sub-nav-parts" style="display: none">
             <div class="step">2. 4.</div>
<nav>
             <div class="title">Deficient Responsivity</div>
<ul>
             <p>There is also no mechanism to adjust the copy number when so is required in any specific
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Parts">OVERVIEW</a></li>
               situation, for example: incoming cellular signals or special patterns.</p>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/New_parts">NEW PARTS</a></li>
             <h6>Problem #2</h6>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Improved_parts">IMPROVED PARTS</a></li>
           </div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Characterization">CHARACTERIZATION</a></li>
           <div class="left-step"></div>
</ul>
         </div>
</nav>
       </div>
</div>
       <div class="center">
<div class="sub-nav" id="sub-nav-hp" style="display: none">
         <div class="circle">
<nav>
           <div class="slice is-current">
<ul>
             <div class="dot small-dot"></div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Human_Practices">HP FOR SILVER</a></li>
             <div class="dot small-dot"></div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Human_Practices">INTEGRATED HP FOR GOLD</a></li>
             <div class="dot small-dot"></div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Education">EDUCATION</a></li>
             <div class="dot small-dot"></div>
</ul>
             <div class="dot big-dot"></div>
</nav>
             <div class="content visible">
</div>
               <img id="p11" src="http://2017.igem.org/wiki/images/f/f1/T--Vilnius-Lithuania--step-1-1-center1.gif">
                 <div class="sub-nav" id="sub-nav-experiments" style="display: none">
             </div>
<nav>
           </div>
<ul>
           <div class="slice">
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Protocol">PROTOCOL</a></li>
             <div class="dot small-dot"></div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Results">RESULTS</a></li>
             <div class="dot small-dot"></div>
<li><a href="https://2020.igem.org/Team:AHUT-ZJU-China/Safety">SAFETY</a></li>
             <div class="dot small-dot"></div>
</ul>
             <div class="dot small-dot"></div>
</nav>
             <div class="dot big-dot"></div>
</div>
             <div class="content">
                 <!-- Top Sub-Nav E -->
               <img id="p12" src="http://2017.igem.org/wiki/images/1/1d/T--Vilnius-Lithuania--step-1-2-center1.gif">
</div>
             </div>
<div class="float-clear"></div>
           </div>
</header>
           <div class="slice">
<!-- 檀: Video Preload -->
             <div class="dot small-dot"></div>
<div id="video-preload">
             <div class="dot small-dot"></div>
<video src="https://2020.igem.org/wiki/images/0/0b/T--AHUT-ZJU-China--factory.mp4" id="video-preload-first" autoplay="true" preload="load" muted></video>
             <div class="dot small-dot"></div>
<video src="https://2020.igem.org/wiki/images/4/41/T--AHUT-ZJU-China--lab.mp4" autoplay="true" preload="load" muted></video>
             <div class="dot small-dot"></div>
<video src="https://2020.igem.org/wiki/images/1/14/T--AHUT-ZJU-China--plant.mp4" autoplay="true" preload="load" muted></video>
             <div class="dot big-dot"></div>
</div>
             <div class="content">
<section id="hero-section" class="page-section">
               <img id="p13" src="http://2017.igem.org/wiki/images/5/58/T--Vilnius-Lithuania--step-1-3-center1.gif">
<video id="slide-video" src="" autoplay="true" loop="loop" preload="load" muted></video>
             </div>
<div class="hero-title">
           </div>
<h1>Carbon Dioxide Capturer 3.0</h1>
           <div class="slice">
<h2>Presented by Anhui University of Technology (AHUT) and Zhejiang  University (ZJU).</h2>
             <div class="dot small-dot"></div>
</div>
             <div class="dot small-dot"></div>
<div class="video-mask" id="video-mask"></div>
             <div class="dot small-dot"></div>
<div class="side-bar" id="side-bar">
             <div class="dot small-dot"></div>
<div class="content" id="side-bar-content">
             <div class="dot big-dot"></div>
<div class="top-title">
             <div class="content">
<div class="subtitle" id="slide-subtitle"></div>
               <img src="http://2017.igem.org/wiki/images/5/52/T--Vilnius-Lithuania--step-2-1-image1.png" width="381" height="185">
<h1 id="slide-title"></h1>
             </div>
</div>
           </div>
<div class="text-content" id="slide-text-content"></div>
           <div class="slice">
<!-- Hero Sidebar Title -->
             <div class="dot small-dot"></div>
<div class="bottom-title" id="slide-bottom-title">
             <div class="dot small-dot"></div>
<div class="next-btn" id="prev-btn">PREV SLIDE</div>
             <div class="dot small-dot"></div>
<div class="next-btn" id="next-btn">NEXT SLIDE</div>
             <div class="dot small-dot"></div>
</div>
             <div class="dot big-dot"></div>
</div>
             <div class="content">
</div>
               <div class="success-text" style="display: none">Success!</div>
</section>
               <div class="error-text" style="display: none">Error!</div>
 
               <div class="interactive-plasmid suc-err">
<div id="first-screen-loading-cover">
                 <img src="http://2017.igem.org/wiki/images/4/42/T--Vilnius-Lithuania--step-2-2-dna.png" class="dna">
   <div class="loading-cover">
                 <img src="http://2017.igem.org/wiki/images/5/58/T--Vilnius-Lithuania--step-2-2-int1.png" class="int1" width="42"
<div class="loader">
                   height="42">
<span style="--i:1;"></span>
                 <img src="http://2017.igem.org/wiki/images/f/f0/T--Vilnius-Lithuania--step-2-2-int2.png" class="int2" width="42"
<span style="--i:2;"></span>
                   height="42">
<span style="--i:3;"></span>
                 <img src="http://2017.igem.org/wiki/images/8/8a/T--Vilnius-Lithuania--step-2-2-int3.png" class="int3" width="42"
<span style="--i:4;"></span>
                   height="42">
<span style="--i:5;"></span>
                 <img src="http://2017.igem.org/wiki/images/3/35/T--Vilnius-Lithuania--step-2-2-int4.png" class="int4" width="42"
<span style="--i:6;"></span>
                   height="42">
<span style="--i:7;"></span>
                 <img src="http://2017.igem.org/wiki/images/4/44/T--Vilnius-Lithuania--step-2-2-int5.png" class="int5" width="42"
<span style="--i:8;"></span>
                   height="42">
<span style="--i:9;"></span>
               </div>
<span style="--i:10;"></span>
               <div class="success-text-long" style="display: none">
<span style="--i:11;"></span>
                 As you can see from our example, even when one knows what copy number is needed for system, it is hard to find the right combination of compatible replicons and right copy number.
<span style="--i:12;"></span>
               </div>
<span style="--i:13;"></span>
               <div class="error-text-long" style="display: none">
<span style="--i:14;"></span>
                 <div>Plasmids are incompatible, because they use the same replicons.</div>
<span style="--i:15;"></span>
                 <div class="button">Try again</div>
<span style="--i:16;"></span>
               </div>
<span style="--i:17;"></span>
             </div>
<span style="--i:18;"></span>
           </div>
<span style="--i:19;"></span>
           <div class="slice">
<span style="--i:20;"></span>
             <div class="dot small-dot"></div>
</div>
             <div class="dot small-dot"></div>
</div>
             <div class="dot small-dot"></div>
</div>
             <div class="dot small-dot"></div>
 
             <div class="dot big-dot"></div>
 
             <div class="content">
<!-- 檀: HTML TAGS ENDS & SCRIPTS START -->
               <img class="i23center active" src="http://2017.igem.org/wiki/images/7/72/T--Vilnius-Lithuania--step-2-3-centerhigh.png" width="381" height="185">
 
               <img class="i23center" src="http://2017.igem.org/wiki/images/3/3a/T--Vilnius-Lithuania--step-2-3-centermedium.png" width="381" height="185">
 
               <img class="i23center" src="http://2017.igem.org/wiki/images/6/61/T--Vilnius-Lithuania--step-2-3-centerlow.png" width="381" height="185">
<script>
             </div>
var slideContent = [
           </div>
{
           <div class="slice">
"section": "PROJECT DESCRIPTION",
             <div class="dot small-dot"></div>
"title": "abstract",
             <div class="dot small-dot"></div>
"video-url": "https://2020.igem.org/wiki/images/0/0b/T--AHUT-ZJU-China--factory.mp4",
             <div class="dot small-dot"></div>
"content-html": "<p>Carbon dioxide (CO<sub>2</sub>) mainly from the combustion of fossil fuels is primary greenhouse gas associated with global warming and climate change; therefore, reducing the amount of CO<sub>2</sub> emitted into the atmosphere is an urgent need, of which CO<sub>2</sub> capture has become an extensively investigated area of research. In this project, we decided to use the biomimetic method of the enzyme (carbonic anhydrase, CA) for capturing CO<sub>2</sub>, which has the advantages of safety, high catalytic efficiency and environment-friendly compared with other methods. We designed an efficient and stable CA by improving the catalytic performance of CA from the OT3 strain of the hyperthermophilic archeon Pyrococcus horikoshii for capturing CO<sub>2</sub>. We use computer-aided analysis software to predict the ideal mutation site of the OT3-CA for improving its catalytic activity. In conclusion, we constructed a new part OT3-CA-WT and obtained its protein with higher thermostability, which is able to maintain its activity at 45 °C and 70°C. Furthermore, we obtained the mutant OT3-CA via molecular simulation with enhanced catalytic activity. The thermostability and efficiency of OT3-CA make it a potential candidate for CO<sub>2</sub> capture.</p>"
             <div class="dot small-dot"></div>
},
             <div class="dot big-dot"></div>
{
             <div class="content">
"section": "PROJECT DESCRIPTION",
               <div class="interactive-plasmid">
"title": "CARBONIC ANHYDRASE",
                 <div class="wave">
"video-url": "https://2020.igem.org/wiki/images/4/41/T--AHUT-ZJU-China--lab.mp4",
                   <img src="http://2017.igem.org/wiki/images/2/2d/T--Vilnius-Lithuania--step-2-4-wave.png" width="94" height="63">
"content-html": "<p>Carbonic anhydrase is a zinc metalloenzyme that catalyzes the reversible reaction of CO<sub>2</sub> and H<sub>2</sub>O to form HCO3<sup>-</sup> and H<sup>+</sup>. It is widely found in animals, plants and microorganisms, and plays an important role in biological processes such as carbon dioxide transfer, photosynthesis, acid-base balance and ion transport in the body.</p>"
                 </div>
},
                 <img src="http://2017.igem.org/wiki/images/6/66/T--Vilnius-Lithuania--step-2-4-plasmid1.png" class="plasmid" width="48" height="48">
{
                 <img src="http://2017.igem.org/wiki/images/a/a6/T--Vilnius-Lithuania--step-2-4-plasmid2.png" class="plasmid" width="48" height="48">
"section": "PROJECT DESCRIPTION",
                 <img src="http://2017.igem.org/wiki/images/3/39/T--Vilnius-Lithuania--step-2-4-plasmid3.png" class="plasmid" width="50" height="48">
"title": "catalytic mechnism",
                 <img src="http://2017.igem.org/wiki/images/6/66/T--Vilnius-Lithuania--step-2-4-plasmid1.png" class="plasmid" width="48" height="48">
"video-url": "https://2020.igem.org/wiki/images/1/14/T--AHUT-ZJU-China--plant.mp4",
                 <img src="http://2017.igem.org/wiki/images/a/a6/T--Vilnius-Lithuania--step-2-4-plasmid2.png" class="plasmid" width="48" height="48">
"content-html": "<p>The first step in the reaction is for the HYDROXyl group to act as a nucleophile and attack the carbon atoms in the CO<sub>2</sub> molecule. In the presence of water molecules, hydroxyl ions and CO<sub>2</sub> complexes are replaced by water molecules, detach from the active centers, and form bicarbonate ions. The second step is the regeneration of the active center Zn<sup>2+</sup> -OH <sup>-</sup>. When certain amino acids are used as hydrogen ion transport carriers, water molecules spontaneously ionize and dehydrogenate, and hydrogen ions are transported out of the hydrophobic center. The proton transport rate of the active center is the rate-limiting step of the enzyme-catalyzed reaction. The K<sub>at</sub> value of most carbonic anhydrases is >10<sup>6</sup> s<sup>-1</sup>.</p>"
                 <img src="http://2017.igem.org/wiki/images/3/39/T--Vilnius-Lithuania--step-2-4-plasmid3.png" class="plasmid" width="50" height="48">
}
                 <img src="http://2017.igem.org/wiki/images/6/66/T--Vilnius-Lithuania--step-2-4-plasmid1.png" class="plasmid" width="48" height="48">
];
                 <img src="http://2017.igem.org/wiki/images/a/a6/T--Vilnius-Lithuania--step-2-4-plasmid2.png" class="plasmid" width="48" height="48">
</script>
                 <img src="http://2017.igem.org/wiki/images/3/39/T--Vilnius-Lithuania--step-2-4-plasmid3.png" class="plasmid" width="50" height="48">
<script>
                 <img src="http://2017.igem.org/wiki/images/6/66/T--Vilnius-Lithuania--step-2-4-plasmid1.png" class="plasmid" width="48" height="48">
// utility
                 <img src="http://2017.igem.org/wiki/images/4/42/T--Vilnius-Lithuania--step-2-2-dna.png" class="dna">
function hasClass(ele, cls) {
               </div>
  cls = cls || '';
             </div>
  if (cls.replace(/\s/g, '').length == 0) return false;
           </div>
  return new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');
           <div class="slice">
}
             <div class="dot small-dot"></div>
function addClass(ele, cls) {
             <div class="dot small-dot"></div>
  if (!hasClass(ele, cls)) {
             <div class="dot small-dot"></div>
   ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
             <div class="dot small-dot"></div>
  }
             <div class="dot big-dot"></div>
}
             <div class="content">
function removeClass(ele, cls) {
               <h2>Did this look smart, easy or convenient?</h2>
  if (hasClass(ele, cls)) {
               <p>We think it is time for a change.</p>
   var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
             </div>
   while (newClass.indexOf(' ' + cls + ' ') >= 0) {
           </div>
    newClass = newClass.replace(' ' + cls + ' ', ' ');
         </div>
   }
         <div class="mob-prev" style="background-image: url('http://2017.igem.org/wiki/images/a/a0/T--Vilnius-Lithuania--step-1-1-arrow.png')"></div>
   ele.className = newClass.replace(/^\s+|\s+$/g, '');
         <div class="mob-next" style="background-image: url('http://2017.igem.org/wiki/images/a/a0/T--Vilnius-Lithuania--step-1-1-arrow.png')"></div>
  }
       </div>
}
       <div class="right">
function loadSlideContent(slideData, index) {
         <div class="right-steps">
var subtitle = document.getElementById('slide-subtitle'),
           <div class="right-step is-current" style="display: block">
title = document.getElementById('slide-title'),
             <div class="box">
content = document.getElementById('slide-text-content'),
               <div class="box-line">
video = document.getElementById('slide-video'),
                 <div class="imgcont">
nextSlideBtn = document.getElementById('next-btn'),
                   <img src="http://2017.igem.org/wiki/images/f/fa/T--Vilnius-Lithuania--step-1-1-boxline1.png" width="42"
prevSlideBtn = document.getElementById('prev-btn');
                     height="42">
subtitle.innerText = 'section: ' + slideData[index]['section'];
                 </div>
title.innerText = slideData[index]['title'];
                 <div class="box-line-name">Plasmid A</div>
content.innerHTML = slideData[index]['content-html'];
               </div>
video.src = slideData[index]['video-url'];
               <div class="box-line">
// Hide Next Slide Btn
                 <div class="imgcont">
if (index == slideData.length - 1) {
                   <img src="http://2017.igem.org/wiki/images/1/1a/T--Vilnius-Lithuania--step-1-1-boxline2.png" width="42"
nextSlideBtn.style.display = 'none';
                     height="42">
} else {
                 </div>
nextSlideBtn.style.display = 'inline-block';
                 <div class="box-line-name">Plasmid B</div>
}
               </div>
// Hide Prev Slide Btn
               <div class="box-line">
if (index == 0) {
                 <div class="imgcont">
prevSlideBtn.style.display = 'none';
                   <img src="http://2017.igem.org/wiki/images/f/f9/T--Vilnius-Lithuania--step-1-1-boxline3.png" width="12"
} else {
                     height="12">
prevSlideBtn.style.display = 'inline-block';
                 </div>
}
                 <div class="box-line-name">Origin of replication</div>
}
               </div>
function goToSlide(slideData, page) {
               <div class="box-line">
// Hide All Inside Elements
                 <div class="imgcont">
addClass(sideBarContent, 'hide');
                   <img src="http://2017.igem.org/wiki/images/3/3d/T--Vilnius-Lithuania--step-1-1-boxline4.png" width="19"
setTimeout(function() {
                     height="19">
// Side Bar Expand-Shrink Animation
                 </div>
addClass(sideBar, 'transform');
                 <div class="box-line-name">Replication machinery</div>
setTimeout(function() {
               </div>
// Load Next Slide Content
             </div>
loadSlideContent(slideData, page);
           </div>
}, 300);
           <div class="right-step">
setTimeout(function() {
             <div class="box">
removeClass(sideBar, 'transform');
               <div class="box-line">
// Show All Inside Elements
                 <div class="imgcont">
removeClass(sideBarContent, 'hide');
                   <img src="http://2017.igem.org/wiki/images/f/fa/T--Vilnius-Lithuania--step-1-1-boxline1.png" width="42"
}, 600);
                     height="42">
}, 500);
                 </div>
}
                 <div class="box-line-name">Plasmid A</div>
// Page Init
               </div>
var currentSlidePage = 0;
               <div class="box-line">
// Load First Slide
                 <div class="imgcont">
loadSlideContent(slideContent, currentSlidePage);
                   <img src="http://2017.igem.org/wiki/images/1/1a/T--Vilnius-Lithuania--step-1-1-boxline2.png" width="42"
// "Next Slide" Button Bind Event
                     height="42">
var nextSlideBtn = document.getElementById('next-btn'),
                 </div>
sideBar = document.getElementById('side-bar'),
                 <div class="box-line-name">Plasmid B</div>
sideBarContent = document.getElementById('side-bar-content');
               </div>
nextSlideBtn.addEventListener('click', function() {
               <div class="box-line">
goToSlide(slideContent, ++currentSlidePage);
                 <div class="imgcont">
});
// "Prev Slide" Button Bind Event
var prevSlideBtn = document.getElementById('prev-btn');
prevSlideBtn.addEventListener('click', function() {
goToSlide(slideContent, --currentSlidePage);
});
// Header Expand Animation
var mainHeader = document.getElementById('main-header'),
videoMask = document.getElementById('video-mask');
mainHeader.addEventListener('mouseover', function() {
removeClass(mainHeader, 'shrink');
videoMask.style.display = 'block';
addClass(videoMask, 'show');
});
mainHeader.addEventListener('mouseout', function() {
addClass(mainHeader, 'shrink');
removeClass(videoMask, 'show');
setTimeout(function() {
videoMask.style.display = 'block';
videoMask.style.zIndex = 0;
}, 500);
});
// Nav Action
function showSubNavMenu(name) {
var subNavMenu = document.getElementById('sub-nav-' + name);
subNavMenu.style.display = 'block';
setTimeout(function() {
addClass(subNavMenu, 'show');
}, 1);
// Fade Other Nav Item
var allLis = document.querySelectorAll('#main-top-nav ul li');
for (var i = 0; i < allLis.length; i++) {
if (allLis[i].innerText.toLocaleLowerCase() != name) {
addClass(allLis[i], 'fadedNavItem');
}
}
isInSubMenu = true;
}
function hideAllSubNavMenu() {
// Disable Current Active Item
var allSubNavs = document.querySelectorAll('#main-header .sub-nav');
for (var i = 0; i < allSubNavs.length; i++) {
if (hasClass(allSubNavs[i], 'show')) {
removeClass(allSubNavs[i], 'show');
allSubNavs[i].style.display = 'none';
}
}
// Unfade Other Nav Item
var allLis = document.querySelectorAll('#main-top-nav ul li');
for (var i = 0; i < allLis.length; i++) {
removeClass(allLis[i], 'fadedNavItem');
}
isInSubMenu = false;
}
var mainTopNav = document.getElementById('main-top-nav');
var isInSubMenu = false;
   mainTopNav.onclick = function (ev) {
     var ev = ev || window.event;
     var target = ev.target || ev.srcElement;
     var name = target.innerText.toLocaleLowerCase();
     if (isInSubMenu) {
if (!hasClass(target, 'fadedNavItem')) {
hideAllSubNavMenu();
     return;
} else {
     hideAllSubNavMenu();
}
     } else {
     hideAllSubNavMenu();
     }
     if (target.nodeName.toLocaleLowerCase() == 'li'){
       switch(name){
         case 'team':
         case 'project':
         case 'experiment':
         case 'parts':
         case 'hp':
         case 'experiments':
           showSubNavMenu(name);
           break;
       }
     }
   }
 
 
 
// TPC: Additional Customize
 
var _tpc_giugiJGUI = document.querySelector('#mw-content-text p');
_tpc_giugiJGUI.parentNode.removeChild(_tpc_giugiJGUI);
 
 
var _tpc_uigGIUgkg23s = document.getElementById('top_menu_under');
_tpc_uigGIUgkg23s.parentNode.removeChild(_tpc_uigGIUgkg23s);
 
 
// C Favicon
var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
   link.rel = 'shortcut icon';
   link.href = 'https://2020.igem.org/wiki/images/7/74/T--AHUT-ZJU-China--logo%402x.png';
   document.getElementsByTagName('head')[0].appendChild(link);
 
var isFPLoaded = false;
 
 
// 主页加载动画
var fvc = document.getElementById('video-preload-first');
fvc.addEventListener("canplay", function () {
  isFPLoaded = true;
  // 首屏视频预加载完成
  setTimeout(function() {
   $('#first-screen-loading-cover').fadeOut(800);
   setTimeout(function(){
    $('#first-screen-loading-cover').remove();
   }, 801);
  }, 1500);
});
// a timeout
setTimeout(function(){
if(!isFPLoaded){
  isFPLoaded = true;
  // 首屏视频预加载超时，直接显示
  setTimeout(function() {
   $('#first-screen-loading-cover').fadeOut(800);
   setTimeout(function(){
    $('#first-screen-loading-cover').remove();
   }, 801);
  }, 1500);
}
}, 6500);
 
 
</script>
 
 
 
 
</html>

2021年4月23日 (五) 23:00的版本

<html> <link href="http://2017.igem.org/Template:Vilnius-Lithuania/CSSvendor?action=raw&ctype=text/css" rel="stylesheet"/> <link href="http://2017.igem.org/Template:Vilnius-Lithuania/CSSprod?action=raw&ctype=text/css" rel="stylesheet"/> </html>

Template:Vilnius-Lithuania/navbar

<html>

Present Challenges of
Experimenting With Plasmid Systems

1. 1.
Plasmid Replication

Origin of replication (Ori) is a sequence where the plasmid replication begins. Plasmids with similar Ori sites use the same replication machinery.

Problem #1
1. 2.
Unbalanced Replication

Replication machinery does not discriminate between similar Ori sites, therefore smaller plasmids are replicated faster and rapidly outgrow larger plasmids, which leads to uneven plasmid ratios in a cell.

Problem #1
1. 3.
Plasmid Loss

This is even more likely to occur when some plasmids are low copy number. When the cell divides, low copy plasmids tend to be lost in next generations.

Problem #1
2. 1.
Plasmid Incompatibility

This inability to stably co-maintain different plasmids over a number of generations in the same bacterial cell line is called plasmid incompatibility. One needs to use different types of Ori to avoid this trouble.

Problem #2
2. 2.
Plasmid Incompatibility

However, it often causes trouble due to limited Ori selection options or the lack of good combination of Ori and plasmid's copy number. Imagine you require a system consisting of two - low and high copy number plasmids. Try picking them from the list.

Problem #2
2. 3.
Fixed Copy Number

Currently no handy method of changing the copy number of particular plasmid exists. It must be either low, or medium, or high.

Problem #2
2. 4.
Deficient Responsivity

There is also no mechanism to adjust the copy number when so is required in any specific situation, for example: incoming cellular signals or special patterns.

Problem #2
                           <img id="p11" src="http://2017.igem.org/wiki/images/f/f1/T--Vilnius-Lithuania--step-1-1-center1.gif">

                           <img id="p12" src="http://2017.igem.org/wiki/images/1/1d/T--Vilnius-Lithuania--step-1-2-center1.gif">

                           <img id="p13" src="http://2017.igem.org/wiki/images/5/58/T--Vilnius-Lithuania--step-1-3-center1.gif">

                           <img src="http://2017.igem.org/wiki/images/5/52/T--Vilnius-Lithuania--step-2-1-image1.png" width="381" height="185">

                               <img src="http://2017.igem.org/wiki/images/4/42/T--Vilnius-Lithuania--step-2-2-dna.png" class="dna">
                               <img src="http://2017.igem.org/wiki/images/5/58/T--Vilnius-Lithuania--step-2-2-int1.png" class="int1" width="42"
                                    height="42">
                               <img src="http://2017.igem.org/wiki/images/f/f0/T--Vilnius-Lithuania--step-2-2-int2.png" class="int2" width="42"
                                    height="42">
                               <img src="http://2017.igem.org/wiki/images/8/8a/T--Vilnius-Lithuania--step-2-2-int3.png" class="int3" width="42"
                                    height="42">
                               <img src="http://2017.igem.org/wiki/images/3/35/T--Vilnius-Lithuania--step-2-2-int4.png" class="int4" width="42"
                                    height="42">
                               <img src="http://2017.igem.org/wiki/images/4/44/T--Vilnius-Lithuania--step-2-2-int5.png" class="int5" width="42"
                                    height="42">

                           <img class="i23center active" src="http://2017.igem.org/wiki/images/7/72/T--Vilnius-Lithuania--step-2-3-centerhigh.png" width="381" height="185">
                           <img class="i23center" src="http://2017.igem.org/wiki/images/3/3a/T--Vilnius-Lithuania--step-2-3-centermedium.png" width="381" height="185">
                           <img class="i23center" src="http://2017.igem.org/wiki/images/6/61/T--Vilnius-Lithuania--step-2-3-centerlow.png" width="381" height="185">

                                   <img src="http://2017.igem.org/wiki/images/2/2d/T--Vilnius-Lithuania--step-2-4-wave.png" width="94" height="63">

                               <img src="http://2017.igem.org/wiki/images/6/66/T--Vilnius-Lithuania--step-2-4-plasmid1.png" class="plasmid" width="48" height="48">
                               <img src="http://2017.igem.org/wiki/images/a/a6/T--Vilnius-Lithuania--step-2-4-plasmid2.png" class="plasmid" width="48" height="48">
                               <img src="http://2017.igem.org/wiki/images/3/39/T--Vilnius-Lithuania--step-2-4-plasmid3.png" class="plasmid" width="50" height="48">
                               <img src="http://2017.igem.org/wiki/images/6/66/T--Vilnius-Lithuania--step-2-4-plasmid1.png" class="plasmid" width="48" height="48">
                               <img src="http://2017.igem.org/wiki/images/a/a6/T--Vilnius-Lithuania--step-2-4-plasmid2.png" class="plasmid" width="48" height="48">
                               <img src="http://2017.igem.org/wiki/images/3/39/T--Vilnius-Lithuania--step-2-4-plasmid3.png" class="plasmid" width="50" height="48">
                               <img src="http://2017.igem.org/wiki/images/6/66/T--Vilnius-Lithuania--step-2-4-plasmid1.png" class="plasmid" width="48" height="48">
                               <img src="http://2017.igem.org/wiki/images/a/a6/T--Vilnius-Lithuania--step-2-4-plasmid2.png" class="plasmid" width="48" height="48">
                               <img src="http://2017.igem.org/wiki/images/3/39/T--Vilnius-Lithuania--step-2-4-plasmid3.png" class="plasmid" width="50" height="48">
                               <img src="http://2017.igem.org/wiki/images/6/66/T--Vilnius-Lithuania--step-2-4-plasmid1.png" class="plasmid" width="48" height="48">
                               <img src="http://2017.igem.org/wiki/images/4/42/T--Vilnius-Lithuania--step-2-2-dna.png" class="dna">

Did this look smart, easy or convenient?

We think it is time for a change.

                                   <img src="http://2017.igem.org/wiki/images/f/fa/T--Vilnius-Lithuania--step-1-1-boxline1.png" width="42"
                                        height="42">
Plasmid A
                                   <img src="http://2017.igem.org/wiki/images/1/1a/T--Vilnius-Lithuania--step-1-1-boxline2.png" width="42"
                                        height="42">
Plasmid B
                                   <img src="http://2017.igem.org/wiki/images/f/f9/T--Vilnius-Lithuania--step-1-1-boxline3.png" width="12"
                                        height="12">
Origin of replication
                                   <img src="http://2017.igem.org/wiki/images/3/3d/T--Vilnius-Lithuania--step-1-1-boxline4.png" width="19"
                                        height="19">
Replication machinery
                                   <img src="http://2017.igem.org/wiki/images/f/fa/T--Vilnius-Lithuania--step-1-1-boxline1.png" width="42"
                                        height="42">
Plasmid A
                                   <img src="http://2017.igem.org/wiki/images/1/1a/T--Vilnius-Lithuania--step-1-1-boxline2.png" width="42"
                                        height="42">
Plasmid B
取自“https://hmoegirl.com/index.php?title=Widget:新样式&oldid=59191”