Difference between revisions of "Biomod/2013/Sendai/design"

From OpenWetWare
Jump to: navigation, search
Line 42: Line 42:
<div id="ttop">
<a href="#top" class="page_top" onfocus="this.blur();" onclick="scrollTo(0,0); return false;" title="Top"></a></div>
  <section role="main">
  <section role="main">

Latest revision as of 22:54, 26 October 2013

<html> <head> <style>

/********************** Hide MediaWiki and init CSS, overwrite by bootstrap.css バルス**********************/



} html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video{

/* font-size:100%; */

} a, a:link, a:visited, a:hover, a:active{



/*訪れたリンクを白くするよ*/ .whiteSendai:visited{



/*左詰め、真ん中、右詰め*/ .leftSendai { text-align: left; } .centerSendai { text-align: center; } .rightSendai { text-align: right; }

.firstHeading {



  1. content{


  1. globalWrapper{


  1. contentSub{


  1. column-one{


  1. footer{


  1. globalWrapper{


  1. bodyContent h1, #bodyContent h2{
 margin-top: 20px;
 margin-bottom: 10px;


  1. bodyContent h3{
 margin-top: 20px;
 margin-bottom: 10px;
 border-bottom-width: medium;
 border-bottom-style: solid;
 border-bottom-color: gray;


  1. bodyContent h4{
 margin-top: 20px;
 margin-bottom: 10px;
 border-bottom-width: thin;
 border-bottom-style: solid;
 border-bottom-color: gray;


  1. bodyContent h5, #bodyContent h6{
 margin-top: 10px;
 margin-bottom: 10px;

/**** border-bottom-width: thin;

 border-bottom-style: solid;
 border-bottom-color: gray;
        • /


/********************************* Hide MediaWiki end *********************************/

/* Structure */ html{ background: #eee; } body {

 padding: 0px;
 background: #fff;
 color: #333;
 margin: 0 auto;
 max-width: 900px;
 font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;

a {

 color: #105672;


header {/****position: fixed; ****/

       /******width: 100%;****/
       height: 90px;
       z-index: 1;

background: #F17F25;

        padding:0.01em 0.5em 1.5em ;

color: #fff; line-height: 1;


header h1{ margin-bottom: 0; }

header h1 span{ display: inline; color: rgba(255,255,255,.4); }

header span{ display: block; color: rgba(255,255,255,.2); font-weight: 300; margin-bottom: 1.6em }

header nav{ float: right; text-align: right } header nav div{ font-size: .8em; } header nav div a { font-weight: 300; padding: .3em .5em } header nav a{ color: #fff; display: inline-block; padding: .3em .8em }

header nav a:hover, header nav a:focus{ color: rgba(255,255,255,.6) }

[role=main]{ padding:1.5em 3em; } article{ padding: 1em 0; text-align: justify; text-justify: inter-ideograph;


footer{ background: #333; color: #fff; padding: 1em 3em;

       clear: both;    /***2段組みの左右のfloatを解除***/


/* Typography */

p{ font: 1em/1.5 Palatino, "Palatino Linotype", Georgia, Times, "Times New Roman", serif; }


       font-size: 150%;
       font-weight: normal;
       font-family: Helvetica;
       background: #bbb;
       padding-left: 1.2em;


img{ max-width: 100%; /***** height: auto; *****/ }

blockquote{ float: left; margin: 1em 3em; } blockquote p{ font-size: 1.4em; line-height: 1.2; font-weight: 700; font-style:italic; } a{ font: 700 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; text-decoration: none } a:hover, a:focus{ color: #000; } a:active{ position: relative; top:1px; }

ol{margin: 1em 0 1em 0; padding-left: 2em; } li{ margin: 0; }

/* Tabs */

  1. tabs

{ /*****position:fixed;****/

      width: 900px; 


.js-on #tabs article { display:none }

  1. tabs, #tabs nav a.active{

background: #FFF; color: #111; }

  1. tabs nav

{ position: relative; overflow: hidden; display: table; background: #bbb; }

  1. tabs nav a

{ width:900px; display:table-cell; padding:1em; text-align:center; color: #333; }

  1. tabs nav a:hover,#tabs nav a:focus

{ background:#eee }

  1. tabs article

{ padding:2em; }

.js-on #tabs article.active { display:block; }

  1. tabs #mobiles{

display:none; border-radius: 0; }

  1. tabs #mobiles a, #tabs #mobiles a:first-child, #tabs #mobiles a:last-child{

width:300px; border-radius: 0; }

/* Media queries */ @media screen and (min-width:900px) { body{font-size: 1.1em;} }

@media screen and (max-width:600px) { #tabs nav{ display: none; position: relative; } #tabs #mobiles{ display:block; } #tabs article { display:block; } } @media screen and (max-width:480px) { blockquote{ float: none; }

header nav a{ padding:.7em .8em } header nav{ float: none; margin: -.5em -3em 0; background: #000; overflow: hidden; text-align: left } header nav a{ border-right: 1px solid #222 } [role=main]{ padding:1.5em 2em; } header nav div{ display: none; }


/*column content*/

  1. content-right {

width:48%; /***段落の横幅***/ float:right; /***右に寄せる(他の要素を左に回り込ませる)***/ margin: 10px; }

  1. content-left {

width:47%; /***サイドの横幅***/ float:left; /***左に寄せる***/ margin: 10px; }


div.caption-left{ float: left; padding: 0 5px 5px 5px; }

.caption-left span{ display: block; text-align: center;

       font-size: smaller;
       font-weight: bold;


div.clear{ clear: both; margin: 0 0 10px 0; }


div.caption-right{ float: right; padding: 0 5px 5px 5px; }

.caption-right span{ display: block; text-align: center;

       font-size: smaller;
       font-weight: bold;


div.clear{ clear: both; margin: 0 0 10px 0; }


.c-both { clear: both; }


        font-style: normal;
        font-weight: bold;
        font-size: 70px;
        line-height: 70px;
        font-family: Helvetica;



       text-align: center;
       font-size: smaller;
       font-weight: bold;



       font-size: smaller;
       font-weight: bold;



  1. ttop {position:fixed;
      left:auto;margin:0 0 0 905px; /* マージン:上 右 下 左 */
      background:url(http://openwetware.org/images/f/f2/%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A-1.png) no-repeat left bottom;}

/* IE6以下用、アスタリスクハックでググれ */

  • html #ttop {margin:0 0 -390px 0;
             position:relative;bottom:490px; /* 上で設定した ttopの高さ390px+下100px */
  1. ttop:hover {background:url(http://openwetware.org/images/b/b9/Top2.png) no-repeat left bottom;/* 画像の高さによって適当に調整 */

a.page_top {display:block;width:100px;height:390px;}

</style> </head> </html> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

   <title>Biomod2013 Sendai ver2.0</title>
   <meta name="viewport" content="width=device-width,initial-scale=1">
   <style type="text/css">
   h1{color: white;}




          <a href="http://openwetware.org/wiki/Biomod/2013/Sendai" class="whiteSendai">Top</a> 
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/project" class="whiteSendai">Project</a>
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/design" class="whiteSendai">Design</a> 
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/calcuation" class="whiteSendai">Calculation</a>
           <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/experiment" class="whiteSendai">Experiment</a>

<a href="http://openwetware.org/wiki/Biomod/2013" class="whiteSendai" style="float:right;"><img src="http://openwetware.org/images/6/6e/Biomod-logo.jpg"

                                              width="75" height="75" alt="Biomod2013" border="0"></a>
<a href="http://openwetware.org/wiki/Biomod/2013/Sendai/protocol" class="whiteSendai">Protocol</a> <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/future" class="whiteSendai">Future</a> <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/member" class="whiteSendai">Member</a> <a href="http://openwetware.org/wiki/Biomod/2013/Sendai/sponsor" class="whiteSendai">Sponsor</a> </nav>
<a href="http://openwetware.org/wiki/Biomod/2013/Sendai">




<a href="#top" class="page_top" onfocus="this.blur();" onclick="scrollTo(0,0); return false;" title="Top"></a>
<section role="main">



  • <a href="#chain"> Project goal</a>
    • <a href="#Flower"> First stage:Sensing system</a>
    • <a href="#sensing"> Second stage:Amplification system</a>
      • <a href="#5"> DNA origami approach</a>
      • <a href="#6"> Flower DNA approach</a>


    Project goal

     In Lipo-HANABI project, we need to develop the following two subsystems.

    i) Sensing system (First stage): liposome disruption by temperature control.

    ii) Amplification system (Second stage): a chain-reactive disruption of the liposomes activated by the First stage.

    First stage: Sensing system

     The purpose of First stage is to detect temperature change and release key molecules for the Second stage. This is achieved by temperature-sensitive liposomes containing  the keys. To make the liposome, we used lipids conjugated with NIPAM polymer.
     This structural change of NIPAM induces stress on the surface of the liposome, and consequently disrupts them.

    Fig.1 Temperature-sensitive liposome

    Second stage: Amplification system

     The purpose of Second stage is to accept the key from the First stage and release a lot of payload molecules in a chain-reaction.
     There are two different approaches to realize the Second stage.

      A) DNA Origami approach
    B) Flower DNA approach

    DNA origami approach

     This approach is inspired by a paper about <a Href="http://www.ncbi.nlm.nih.gov/pubmed/19780639"> Membrane-bending proteins (Prinz WA, Hinshaw JE., Crit Rev Biochem Mol Biol., 2009)</a>. In this approach, we use “Origami-anchor DNA” which connects DNA Origami with liposome membrane.

    A lot of DNA origamis are adsorbed on the surface of liposomes by using Origami-anchor DNA. DNA origami is supposed to be a stiff, straight board compared with liposome membrane, and as a result, liposome surface gets bending stress. At certain level of the absorbance, liposomes will burst. Also, DNA origamis on the surface repel each other because of negative charges on DNA backbones. This effect may add more stress on the membrane.

    Fig.2 Stress on liposome membrane

     From the reference, we learned that efficient structure design for destabilizing membranes should have the following properties:

  • Having rigid scaffolds
  • Having large surface areas to maximize the effect of the scaffold on the membrane
  • </ur>

    <Design of DNA origami>
     DNA origami is known as a designable rigid structure made of DNA. We use DNA origami to make the rigid scaffolds. In order to meet the requirements, we designed a 2D rectangular DNA origami.

    Fig.3 Rectangular origami

    <Img Src="http://openwetware.org/images/a/a7/Lipo5.png" style="padding-left:10mm">Fig.4 DNA origami designed by caDNAno

     We use <a href="http://cadnano.org/">caDNAno2</a> for our DNA origami design. The size of DNA origami is 67.6nm (26 helixes) in width and 127 nm (374 bases) in height. We cut out a smaller rectangle of 10 helixes (161 bases) at one of the corners, so that we could distinguish the two sides with AFM (Atomic Force Microscope) observation. Also, we put 141 staples sticking out from the bottom face of the origami. Those staples hybridize with cholesterol-modified Origami-anchor DNA, which has high affinity with lipid membrane.

    <Img Src="http://openwetware.org/images/a/a0/Outsidefig5rg.png" width="450px" height="350px">

    Fig.5 Unstable liposome

    Flower DNA approach

     This approach is inspired by a paper about <a href="http://pubs.acs.org/doi/ipdf/10.1021/jp104711q">Polymer Flower-micelle (Yukio Tominaga, Mari Mizuse, Akihito Hashidzume, Yotaro Morishima and Takahiro Sato, J. Phys. Chem. B, 2010)</a>. To adapt the Polymer Flower-micelle to our project, the followings are required.

  • Embedding a lot of cholesterol-modified ss DNA on the liposome surface
  • Adding another ssDNA (complementary to the above DNA) which induces a structural change by DNA hybridization
  • The induced structural change on the DNA results in disruption of the liposome

  •  At first, we designed “Flower-anchor DNA”, which is a couple of ss DNAs both having cholesterol modified groups (Fig.6): Flower-anchor1 is 10nt ss DNA and Flower-anchor2 is 50nt ss DNA. Both are cholesterol-modified at their 3’ ends.
     In addition, the 5’ end of the Flower-anchor2 is complementary to Flower-anchor1. When they hybridize, the rest 40nt of Flower-anchor2 remains single-stranded.

    <Img Src="http://openwetware.org/images/3/3d/Flower-newfg.png" width="450px" height="350px" >

    Fig.6 Liposome with Flower-anchor DNA

     The key DNA released from stage 1 liposome is complementary to this single-stranded part. When the key hybridizes on it, a double-stranded section is formed. The length of the section is shorter than its persistence length; therefore it works as a rigid strut. The strut is anchored on the liposome at both ends, thus it extends the membrane. As a consequence, this may lead to drastic conformational change of the liposome, namely, disruption.

    <img src="http://openwetware.org/images/6/65/Flower3new8.png" width="70%" hight="800">

    Fig.7 Process of flower DNA approach

    <Img Src="http://openwetware.org/images/1/17/Flor4.png" width="70%" hight="800" >

    Fig.8 How to disrupt a liposome



    © Copyright Biomod 2013 Team Sendai <a href="http://www.molbot.mech.tohoku.ac.jp/index.html">                   <img src="http://openwetware.org/images/3/36/Murata-nomura-logo.png" width="180" height="50" alt="Molcular Robotics Lab" border="0" align="right">          </a>     

    E-MAIL: <a href="mailto:biomod.teamsendai.2012@gmail.com">biomod.teamsendai.2012@gmail.com </a>

    <a href="?action=edit" align="center">



    </body> </html>

    <html> <head>

           <script type="text/javascript">
         function tabs(a,g,j){document.body.className="js-on";var g=a.getElementsByTagName(g),d=[],c;this.active;this.total=g.length;this.container=a;e=a.insertBefore(document.createElement("nav"),g[0]),change=function(f){if(typeof this.active!=="undefined"){d[this.active].className=g[this.active].className=""}d[f].className=g[f].className="active";this.active=f},clickEvent=function(h,f){h.onclick=function(){change(f);return false}};for(var b=0;b<g.length;b++){d[b]=e.appendChild(document.createElement("a"));d[b].href="#";c=[g[b].getAttribute("data-title"),g[b].getElementsByTagName(j)[0]];d[b].innerHTML=c[0]!==null?c[0]:c[1]?c[1]["innerText"||"textContent"]:b+1;new clickEvent(d[b],b)}change(0)}tabs.prototype.change=function(b){change(b-1)};tabs.prototype.next=function(b){active===this.total-1?change(0):change(active+1)};tabs.prototype.prev=function(b){active===0?change(this.total-1):change(active-1)};tabs.prototype.responsive=function(d,c){nav=document.createElement("nav");nav.id="mobiles";nav.innerHTML='<a href="#" onclick="'+d+'.prev(); return false">'+c.prev+'</a><a href="#" onclick="'+d+'.next(); return false">'+c.next+"</a>";this.container.insertBefore(nav,this.container.firstChild);return this};
           <script type="text/javascript">

    var myTabs = new tabs(document.getElementById("tabs"), "article", "h2").responsive("myTabs", { prev: "Previous", next: "Next" }); </script> </head>