From OpenWetWare
Revision as of 00:56, 25 October 2013 by Koichiro Katayama (talk | contribs)
Jump to: navigation, search

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

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


        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( no-repeat left bottom;}

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

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

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

</style> </head> </html> <html xmlns=""> <head>

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


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



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

--> <br><br>

          <a href="" class="whiteSendai">Top</a> 
           <a href="" class="whiteSendai">Project</a>
           <a href="" class="whiteSendai">Design</a> 
           <a href="" class="whiteSendai">Calculation</a>
           <a href="" class="whiteSendai">Experiment</a>

<a href="" class="whiteSendai" style="float:right;"><img src=""

                                              width="75" height="75" alt="Biomod2013" border="0"></a><br>
           <a href="" class="whiteSendai">Protocol</a>   
           <a href="" class="whiteSendai">Future</a> 
           <a href="" class="whiteSendai">Member</a>
           <a href="" class="whiteSendai">Sponsor</a>
            <a href=""><h1 style="color:white;" ><b>Biomod<span>2013<br>&emsp; Team</span>Sendai</b></h1></a> 
<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">

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

For all living organisms, sensing weak signals in environment and amplifying them are critically important to survive. Various types of signal sensing/ transduction systems have been highly developed in the course of evolution, e.g. immune and neuro-transmission systems. These systems are not only astonishingly sensitive but very effective and efficient. If we could borrow principles from the living systems, we could create a system with novel functionalities. In this way, we decided to create a sensing and signal transduction systems made of designed artificial biomolecules and chemicals.<br><br>


In order to realize a signal transduction system, we need to develop two types of system; a sensing system that detects external signal and a transmitting system that amplifies the signal and releases large amount of output molecules (payloard). We adopt liposomes as a container of the system. <br><br>

<h3>Project: Lipo-HANABI</h3> In our system, stored molecules in liposome are released in chain-reaction triggered by environmental stimuli. The system adopts a two-stage mechanism as follows.<br><br>

<h4>1st stage: Sensing </h4> The 1st stage detects a certain signal in the environment, and release molecules to activate the 2nd stage. In this project, we chose temperature change as an environmental signal that initiated the whole process. Namely, we use a temperature-sensitive liposome for the 1st stage. At a certain triggering temperature, they break and release key molecules for the 2nd stage. The released key molecules attach on the 2nd stage liposomes and induce puncture of them.<br><br>

<h4>2nd stage: Amplification </h4> The 2nd stage liposomes contain both the payload molecules (e.g. drug) and the same key molecules received from 1st stage. Once some of them break, it releases more key molecules, and they break other liposomes in their neighborhood. As a consequence, bursting of the liposomes propagates exponentially in a chain-reactive way and releases a lot of payload molecules<br><br>

The advantage of adopting the two-stage strategy is that we can develop various types of signal amplification system by designing the 1st stage, without changing the 2nd stage.<br><br>

The mechanism of this system is similar to that of HANABI (fireworks in Japanese), therefore, we termed the project "Lipo-HANABI".<br>



       <p>&copy; Copyright Biomod 2013 Team Sendai
               <a href="">

                  <img src=""

                                     width="180" height="50" alt="Molcular Robotics Lab" border="0" align="right">

         </a>      </p>

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

</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.container=a;e=a.insertBefore(document.createElement("nav"),g[0]),change=function(f){if(typeof!=="undefined"){d[].className=g[].className=""}d[f].className=g[f].className="active";},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.prev=function(b){active===0?change(};tabs.prototype.responsive=function(d,c){nav=document.createElement("nav");"mobiles";nav.innerHTML='<a href="#" onclick="'+d+'.prev(); return false">'+c.prev+'</a><a href="#" onclick="'+d+'.next(); return false">'"</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> </html>