Biomod/2013/Sendai/project

From OpenWetWare
Revision as of 01:49, 24 October 2013 by Kazuki Hirahara (talk | contribs)
Jump to: navigation, search

<html> <head> <style>


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

body{

background:none;

} 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{

margin:0;
padding:0;
/* font-size:100%; */
 border:0;
outline:0;

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

text-decoration:none

}

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

color:#FFFFFF!important;

}

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


.firstHeading {

display:none;

}

  1. content{
border-style:none;
margin:0;
padding:0;

}

  1. globalWrapper{
font-size:100%;

}

  1. contentSub{
display:none;

}

  1. column-one{
display:none;

}

  1. footer{
display:none;

}

  1. globalWrapper{
font-size:100%;

}

  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; }

p.sukima{

       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; }

/***floatの影響を絶つ。<div class="c-both"></div> のように使う***/

.c-both { clear: both; }

div.title{

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

}

div.caption{

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

}

div.captiontable{

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

}

/*topに戻る*/

  1. ttop {position:fixed;
      bottom:140px;
      left:auto;margin:0 0 0 905px; /* マージン:上 右 下 左 */
      width:100px;
      height:390px;
      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 */
             left:960px;}
  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;}
   </style>

</head>

<body><!-- <div style="max-width:900px; position:fixed;">****/ -->

   <header>
        <nav>      
          <div>

<!--

               <a href="#"  class="whiteSendai">Blog</a> 
               <a href="#"  class="whiteSendai">Twitter</a>
               <a href="#"  class="whiteSendai">Facebook</a>

--> <br><br>

           </div> 
          <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><br>
           <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"><h1 style="color:white;" ><b>Biomod<span>2013<br>&emsp; Team</span>Sendai</b></h1></a> 
   </header>

 <section role="main">
       <article>

<h2>Project</h2> <h3>Background</h3>

Sensing and amplifying weak signals are critical for life things to adapt to the severe environment. These sensing and signal transduction systems have been highly developed to play the role in the course of evolution. For example, we can raise immune and neurotransmission systems. These systems work very effectively, however application usages of those are limited because they only work in living cells. Sensing and signal transduction systems made of purified biomolecules and/or chemicals will overcome the situation.<br

<h3>Motivation</h3>


Signal transduction with defined biomolecules and chemicals needs two system; sensing systems to external signals and transmit systems to amplify the signals. Liposomes have high responsibility to environment and have been used to release molecules out from the inside. DNA is beneficial for specific-action and transmission, because of its high selective-specificity and flexibility. If above system is made of DNA and liposomes, we can realize the nano-scaled flexible amplifier. Thus, we aim at creating molecular-releasing systems using DNA and liposomes.<br

<!-- Is it possible to create similar one to the biological signal transduction system? If it is possible, we can design more effective molecular amplification. We can expect new applications. For instance, the molecular amplification can be used in a smart drug delivery system. Such mechanism may also allow us to artificially develop our nerve system. -->

<h3>Project: Lipo-HANABI</h3> As our summer project, we decided to construt a signal amplification system by using Liposomes and DNA nanotechnology.

The system has two stages: "Initiation by senseing environment" and "Amplification of signals by chain-reactive burst of liposomes".

<!--

Our project goal is to design molecular-releasing systems that amplify and transmit small signals. Here, Lipo means liposome, in which we store the payload molecules, and Hanabi is fireworks in Japanese. <br> <br><br> -->

<h4>First stage : Initiation by senseing environment</h4> The first stage senses environmental changes, and release secondary signals into the amplifier in the sexcond stage. In this project, we chose temperature as an environmental initiator because of controllability. Increasing temperature induces disruption of initial liposomes. Key DNA inside the liposomes is released and transmit signals into the second-stage amplifier<br>


<h4>Second stage: Amplification by chain-reactive burst of liposomes</br> The second stage recieve the signals from the first stage, and then amplify them by a chain reactive liposome destruction. The liposomes in the second stage encapsulate key DNAs and payload moleclules (like drugs). Once a liposome is disrupted, neighbor liposomes are also disrputed by the key DNA. This happens continuously, and then, the number of disrupted liposomes increases exponentially. Since the second-stage liposome also encapsulate payload molecules as a response to signals, the response initiated by the first signals is amplified in this stage.<br><br>

The advantage of the two-stage strategy is that we can make various types of signal amplification system without changing the 2nd stage. <br><br>

This system works like a HANABI (Japanese fireworks), because HANABI is resulted from chain-reactive bursts initiated by fire (first signal). Thus, we termed the project as "Lipo-HANABI" (we should note Lipo means liposomes).<br>




       </article>
       	
      
   </section>

</p>


   <footer>
       <p>&copy; 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>      </p>

       <p>E-MAIL:
           <a href="mailto:biomod.teamsendai.2012@gmail.com">biomod.teamsendai.2012@gmail.com
           </a>
       </p>
       <br>
       <a href="?action=edit" align="center"><p>edit</p></a>
   </footer>
   

</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>
       <script type="text/javascript">

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