Difference between revisions of "Team:UT-Tokyo"

Line 2: Line 2:
 
{{UT-Tokyo/CSS}}
 
{{UT-Tokyo/CSS}}
 
<html>
 
<html>
−
<link rel="stylesheet" type="text/css"  
+
    <head>
−
href="https://2015.igem.org/Template:UT-Tokyo/CSS?action=raw&ctype=text/css" />
+
      <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>
−
<!--
+
      <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
 +
      <title>The Pattern-Formation Game | HOME</title>
 +
      <link href='http://fonts.googleapis.com/css?family=Homenaje&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
 +
      <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,700,300,400&subset=latin,cyrillic-ext' rel='stylesheet' type='text/css'>
 +
      <link id='css' rel='stylesheet' href='./css/reset.css?v=2' />
 +
      <link id='css' rel='stylesheet' href='./css/style.css?v=2' />
 +
      <script type="text/javascript"
 +
        src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS_HTML">
 +
      </script>
 +
      <script type="text/javascript" src="./js/jaxconfig.js">
 +
      </script>
 +
    </head>
 +
    <body>
 +
      <nav class='menu-panel'>
 +
        <ul>
 +
          <li>PRO
 +
            <ol>
 +
              <a style='background-image:url(./images/project.png)' href='project.html'></a>
 +
              <a href='project.html#introduction'>INTRO</a>
 +
              <a href='project.html#strategy'>STRATEGY</a>
 +
              <a href='project.html#system'>SYSTEM</a>
 +
              <a href='project.html#result'>RESULT</a>
 +
              <a href='project.html#application'>APPLICATION</a>
 +
            </ol>
 +
          </li>
 +
          <li>MOD
 +
            <ol>
 +
              <a style='background-image:url(./images/modeling.png)' href='modeling.html'></a>
 +
              <a href='modeling.html#top'>TOP</a>
 +
              <a href='modeling.html#ahlecoli'>AHL-E.Coli</a>
 +
              <a href='modeling.html#colicin'>COLICIN</a>
 +
              <a href='modeling.html#ahlt7'>AHL-T7</a>
 +
              <a href='modeling.html#parameters'>PARAMS</a>
 +
            </ol>
 +
          </li>
 +
          <li>EXP
 +
            <ol>
 +
              <a style='background-image:url(./images/experiment.png)' href='experiment.html'></a>
 +
              <a href='experiment.html#parts'>PARTS</a>
 +
              <a href='experiment.html#protocol'>PROTOCOL</a>
 +
              <a href='experiment.html#notebook'>NOTEBOOK</a>
 +
              <a href='experiment.html#safety'>SAFETY</a>
 +
            </ol>
 +
          </li>
 +
          <li class='home'>
 +
              <a href='index.html'></a>
 +
          </li>
 +
          <li> PARTS
 +
            <ol>
 +
              <a style='background-image:url(./images/parts.png)' href='parts.html'></a>
 +
            </ol>
 +
          </li>
 +
          <li>P&P
 +
            <ol>
 +
              <a style='background-image:url(./images/policyandpractice.png)' href='policyandpractice.html'></a>
 +
              <a href='policyandpractice.html#problem'>PROBLEM SOLVING</a>
 +
              <a href='policyandpractice.html#communication'>COMM</a>
 +
              <a href='policyandpractice.html#public'>PUBLIC PARTICI<br />PATION</a>
 +
            </ol>
 +
          </li>
 +
          <li>TEAM
 +
            <ol>
 +
              <a style='background-image:url(./images/team.png)' href='team.html'></a>
 +
            </ol>
 +
          </li>
 +
        </ul>
 +
      </nav>
 +
 
 +
      <div class='main'>
 +
        <div class='grid home'>
 +
          <div class="grid-item grid-item--width4 grid-item--height4" >
 +
            <canvas width='296' height='296'></canvas>
 +
            <script src='js/pattern.js'></script>
 +
            <!--div id='debug'></div-->
 +
            <div class='canvas-control'>
 +
              CONTROL
 +
              <div class='toggle-sw' onclick='onoff()'></div>
 +
              <div class='square-sw' onclick='flush()'></div>
 +
              <div class='square-sw' onclick='flush()'></div>
 +
            </div>
 +
          </div>
 +
          <div class="grid-item home">
 +
            <span style='background-image:url(./images/parts.png)'></span>
 +
            <ul>
 +
            <li><a href='project.html#introduction'>Introduction<p>this is overviw. write description here.</p></a></li>
 +
            <li><a href='project.html#system'>System<p>this is system. write description here.</p></a></li>
 +
            <li><a href='project.html#result'>Result<p>this is result. write description here.</p></a></li>
 +
            <li><a href='project.html#application'>Application<p>this is application. write description here.</p></a></li>
 +
            </ul>
 +
          </div>
 +
          <div class="grid-item home">
 +
            <span style='background-image:url(./images/policyandpractice.png)'></span>
 +
            <ul>
 +
            <li><a href='policyandpractice.html#problem'>Problem Solving<p>Have you ever thought about Intellectual Property Rights?</p></a></li>
 +
            <li><a href='policyandpractice.html#communication'>Communication<p>write description here.</p></a></li>
 +
            <li><a href='policyandpractice.html#public'>Public <br /> Participation<p>write description here.</p></a></li>
 +
            </ul>
 +
          </div>
 +
          <div class="grid-item home">
 +
            <span style='background-image:url(./images/team.png)'></span>
 +
            <ul>
 +
            <li><a href='team.html'>Team<p>write description here.</p></a></li>
 +
            </ul>
 +
          </div>
 +
          <div class="grid-item grid-item--width2 grid-item--height2 home">
 +
            <span style='background-image:url(./images/modeling.png)'></span>
 +
            <ul>
 +
            <li><a href='project.html#top'>Top<p>this is overviw. write description here.</p></a></li>
 +
            <li><a href='project.html#ahlecoli'>AHL-E.Coli<p>write description here.</p></a></li>
 +
            <li><a href='project.html#colicin'>Colicin<p>write description here.</p></a></li>
 +
            <li><a href='project.html#ahlt7'>AHL-T7<p>write description here.</p></a></li>
 +
            <li><a href='project.html#parameters'>Parameters<p>write description here.</p></a></li>
 +
            </ul>
 +
          </div>
 +
          <div class="grid-item grid-item--width2 grid-item--height2 home">
 +
            <span style='background-image:url(./images/experiment.png)'></span>
 +
            <ul>
 +
            <li><a href='project.html#parts'>Parts<p>write description here.</p></a></li>
 +
            <li><a href='project.html#protocol'>Protocol<p>write description here.</p></a></li>
 +
            <li><a href='project.html#result'>Result<p>write description here.</p></a></li>
 +
            <li><a href='project.html#safety'>Safety<p>write description here.</p></a></li>
 +
            </ul>
 +
          </div>
 +
          <div class="grid-item grid-item--width3 grid-item--height3 home">
 +
            <span style='background-image:url(./images/project.png)'></span>
 +
            <ul>
 +
            <li><a href='project.html#introduction'>Introduction
 +
              <p>
 +
                Project Overview<br />
 +
                Turing Mechanism<br />
 +
                Advantage Of Synthetic Biological Approach<br />
 +
              </p>
 +
            </a></li>
 +
            <li><a href='project.html#strategy'>Strategy
 +
              <p>
 +
                Strategy 1<br />
 +
                Strategy 2<br />
 +
                Strategy 3<br />
 +
              </p>
 +
            </a></li>
 +
            <li><a href='project.html#system'>System
 +
              <p>
 +
                Motility Cntrol<br />
 +
                Cell-Cell Interaction<br />
 +
                Construction<br />
 +
              </p>
 +
            </a></li>
 +
            <li><a href='project.html#result'>Result<p>this is result. write description here.</p></a></li>
 +
            <li><a href='project.html#application'>Application<p>this is application. write description here.</p></a></li>
 +
            </ul>
 +
          </div>
 +
        </div>
 +
 
 +
        <div class='panel'>
 +
          <h2>PROJECT DESCRIPTION</h2>
 +
          <p>
 +
            How do Zebrafish get their stripes? Why do we have only 5 digits on each hand?
 +
          </p>
 +
          <p>
 +
          Here's one possible answer: Turing Pattern.
 +
          </p>
 +
          <p>
 +
          Turing Pattern is a type of spatial pattern suggested by the British mathematician <span>Alan Turing
 +
            <q>Alan Turing(1912-1954)<br>A British mathetician. Famous for contribution to computer science.</q></span>.
 +
          He proposed that these patterns could be created by the network of two chemicals which have different diffusion rate. These two molecules are called the activator and inhibitor.
 +
          </p>
 +
          <p>
 +
          Because of its simplicity, the theory has attracted scientist in many fields, and thus various research has been carried out in the last 60 years.
 +
          However, it was not easy to prove directly if those patterns are produced by the reaction-diffusion systems or another mechanism.
 +
          Living systems are so complex that most research was exclusively theoretical. Biologists still face a big problem: identification of proper molecules acting as activator and inhibitor.
 +
          </p>
 +
          <p>
 +
          We therefore reconstructed a Turing system using two advantages of synthetic biology; controllability and biological directness.
 +
          By letting whole <i>E. Coli</i> cells, whose motility were controlled, communicate with each other, we succeeded in making the whole system work more identically than any previous researches.
 +
          This project should surely be a great step for understanding more about morphology and some other related fields of science.
 +
          Now, the new door of synthetic biology has opened and awaits you to come in!
 +
          </p>
 +
        </div>
 +
 
 +
        <div class='panel'>
 +
          <h2>WIKI EDITTING</h2>
 +
          <p>
 +
          1. Normal Text<br />
 +
          &ltp>Normal Text&lt/p> : <br />Normal Text<br />
 +
          2. Headline
 +
          <br />
 +
          &lth2>Headline&lt/h2> : </p><h2>Headline</h2>
 +
          <p>
 +
          3. Line Break<br />
 +
          &ltp>Line&ltbr />Break&lt/p> : Line <br /> Break<br />
 +
          4. Additional Information<br />
 +
          &ltp>&ltspan>Addtional information&ltq>THIS IS Additional information!&lt/q>&lt/span>&lt/p> :
 +
          <span>Additional information<q>THIS IS Additional information!</q></span><br />
 +
          Move your cursor over the text and find what happens.<br />
 +
          5. Pictures<br />
 +
          &ltimg src='./images/project.png' width='100' height='100' align='left'> : <img src='./images/project.png' width='100' height='100' align='left'><br />
 +
          <br /><br /><br /><br />
 +
          6. MathJax(LaTeX)<br />
 +
          <q>$\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}$</q> : $ \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6} $ <br />
 +
          <q>$$\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}$$</q> : $$ \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6} $$
 +
          </p>
 +
        </div>
 +
 
 +
      </div>
 +
 
 +
    </body>
 +
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
 +
    <script type='text/javascript' src='./js/isotope.pkgd.js'></script>
 +
    <script type='text/javascript' src='./js/main.js'></script>
 +
</html>
 +
<!--html>
 
<h2> Welcome to iGEM 2015! </h2>
 
<h2> Welcome to iGEM 2015! </h2>
 
<p>Your team has been approved and you are ready to start the iGEM season! </p>
 
<p>Your team has been approved and you are ready to start the iGEM season! </p>
Line 14: Line 224:
 
<li> <a href="https://2015.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
 
<li> <a href="https://2015.igem.org/Wiki_How-To">Wiki Requirements page</a></li>
 
</ul>
 
</ul>
−
-->
+
 
 
<div class="highlightBox">
 
<div class="highlightBox">
 
<h2>PROJECT DISCRIPTION</h2>
 
<h2>PROJECT DISCRIPTION</h2>
Line 27: Line 237:
 
We therefore reconstructed a Turing system using two advantages of synthetic biology; controllability and biological directness. By letting whole E. coli cells, whose motility were controlled, communicate with each other, we succeeded in making the whole system work more identically than any previous researches. This project should surely be a great step for understanding more about morphology and some other related fields of science. Now, the new door of synthetic biology has opened and awaits you to come in!  
 
We therefore reconstructed a Turing system using two advantages of synthetic biology; controllability and biological directness. By letting whole E. coli cells, whose motility were controlled, communicate with each other, we succeeded in making the whole system work more identically than any previous researches. This project should surely be a great step for understanding more about morphology and some other related fields of science. Now, the new door of synthetic biology has opened and awaits you to come in!  
 
</p>
 
</p>
−
<!--
+
 
 
<h4> Styling your wiki </h4>
 
<h4> Styling your wiki </h4>
 
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
 
<p>You may style this page as you like or you can simply leave the style as it is. You can easily keep the styling and edit the content of these default wiki pages with your project information and completely fulfill the requirement to document your project.</p>
Line 75: Line 285:
  
  
−
-->
+
</div></div>  
−
</div></div> <!--These are the closing tags for div id="mainContainer" and div id="contentContainer". The corresponding opening tags appear in the template that is {{included}} at the top of this page.-->
+
  
−
</html>
+
</html-->

Revision as of 08:40, 15 August 2015



Add a banner to your wiki!

You can make the image 980px by 200px

Remember to call the file: "Team_UT-Tokyo_banner.jpg"

/*********************************************************************** / WIKI INITIALIZATION /**********************************************************************/

h1.firstHeading { 

   display: none !important;

}

  1. top_menu_14 .has_submenu{
   height:16px;

}

  1. content{
   width:100%;
   margin:0;
   padding:0;

}

  1. content a{
 font-size:20px;
 line-height:1.2em;

}

.panel p, .panel a{ 

 font-size:16px;
 line-height:1.3em;

}

/*********************************************************************** / GENERAL /**********************************************************************/ @font-face{ 

   font-family:'Homenaje';
   src: url("https://static.igem.org/mediawiki/2015/f/f1/UT_TOKYO_Homenaje-Regular.ttf");

} @font-face{ 

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/8/83/UT_TOKYO_OpenSans-Regular.ttf");

} @font-face{ 

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/a/a5/UT_TOKYO_OpenSans-Bold.ttf");
   font-weight:bold;

} @font-face{ 

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/9/95/UT_TOKYO_OpenSans-Italic.ttf");
   font-style:italic;

} @font-face{ 

   font-family:'Open Sans';
   src: url("https://static.igem.org/mediawiki/2015/6/6b/UT_TOKYO_OpenSans-BoldItalic.ttf");
   font-weight: bold;
   font-style: italic;

}

  • {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
         box-sizing: border-box;

}

canvas{ 

   display: block;
   margin: auto;

}

body{ 

   width:100%;

background: #CCC; -webkit-font-smoothing: antialiased; }

body.is-loading *{ 

 -moz-transition: none !important;
 -webkit-transition: none !important;
 -o-transition: none !important;
 -ms-transition: none !important;
 transition: none !important;
 -moz-animation: none !important;
 -webkit-animation: none !important;
 -o-animation: none !important;
 -ms-animation: none !important;
 animation: none !important;

}

p, h1, h2, h3, h4, h5, h6{ 

 font-size:20pt;
 color:black;
 line-height:1.5em;

}

h1, h2{ 

 font-family: 'Homenaje', 'Open Sans', "Century Gothic", sans-serif;
 background-image:url('https://static.igem.org/mediawiki/2015/4/45/UT_TOKYO_Head.png');
 background-size:contain;
 background-repeat: no-repeat;
 padding-left:2em;
 text-align: center;
 font-size:2em;
 font-weight: Normal;
 margin:0.5em;

} h2{ 

 text-align: left;

}

h3, h4, h5{ 

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 text-align: left;
 font-size:1.5em;
 font-weight: bold;
 margin:0.5em;

} h4{ 

 text-align:center;
 font-size:1em;

} h5{ 

 font-size:1.2em;

}

h4 span{ 

 font-weight:normal;

}

p{ 

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:1em;
 margin:1em;

}

p i{ 

   font-style:italic;

}

p span{ 

 text-decoration: underline;
 color: #222;

}

p span q{ 

 display: none;

}

p span:hover q, p span.hover q{ 

 position:absolute;
 display: inline;
 margin-top:2em;
 margin-left:-100px;
 width:200px;
 height:auto;
 padding:5px;
 color:white;
 background:rgba(0,0,0,0.6);

}

.panel ul li{ 

   border-left:solid 2px rgb(255,109,60);

}

.panel ul li p{ 

 line-height:1.2em;
 margin:5px;

}

img.figure{ 

 display: block;
 margin:0 auto;
 max-width:90%;
 max-height:500px;

}

.table{ 

 display:block;
 margin:0 auto;
 max-width:90%;
 text-align:center;

}

.table img.figure{ 

 display: inline;
 max-height:200px;

}

table{ 

 margin:1em auto;

}

table tr.top{ 

 border-top:solid 1px black;

}

table tr{ 

 border-bottom:solid 1px black;

}

table td{ 

 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:16px;
 line-height:2em;
 text-align:left;
 padding-left:10px;
 padding-right:10px;

}

hr{ 

 border: 0;
 height: 1px;
 background: #333;
 background-image: linear-gradient(to right, #ccc, #333, #ccc);

}

u{ }

  1. preload{
 display:none;

}

  1. loader{
 width:100%;
 position: fixed;
 top:40%;
 text-align: center;

}

.main{ 

 position:absolute;
 transition: all 0.6s;
 width:100%;
 top:60px;
 margin:auto;
 overflow-x:hidden;
 overflow-y:auto;

}

.panel{ 

 position:relative;
 width:90%;
 padding:20px;
 margin:50px auto;
 height:auto;
 background:rgba(255,255,255,0.6);

}

.panel img{ 

 visibility: visible;

}

.panel-black{ 

 background-color:rgba(0,0,0,0.6);
 width:100%;
 padding-top:10px;
 padding-bottom:10px;
 -webkit-box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8);
 box-shadow:inset 0px 0px 15px 1px rgba(0,0,0,0.8);

}

  1. footer h1{
 font-family:'Homenaje';
 background:none;
 padding:0px;
 font-size:1.8em;
 color:white;
 margin-bottom:0;

}

  1. footer img{
 display:inline-block;
 margin:10px;
 width:200px;
 max-height:60px;
 filter: gray;
 -webkit-filter: grayscale(100%);
 opacity:0.5;

}

  1. footer img:hover{
 filter: none;
 -webkit-filter: grayscale(0%);
 opacity:1;

}

  1. footer img.sns{
 width:32px;
 height:32px;
 margin:5px;

}

  1. footer .copyright{
 text-align:center;
 font-size:1em;
 line-height:2em;
 color:white;

}

  1. footer .sns{

} /*********************************************************************** / SWITCHS and BUTTONS /**********************************************************************/ .toggle-sw{ 

 display:inline-block;
 height:40px;
 width:100px;
 position:relative;
 font-family: 'Homenaje';
 font-size:18px;
 background:#888;
 -webkit-transition: all .2s ease;
 transition: all .2s ease;

} .toggle-sw:after{ 

 content:;
 display:inline-block;
 height:30px;
 width:40px;
 background:#fff;
 position:absolute;
 top:5px;
 left:5px;
 -webkit-transition: all .2s ease;
 transition: all .2s ease;
 }

.toggle-sw:before{ 

 content:'OFF';
 position:absolute;
 right:11px;
 top:12px;
 color:#fff;

} .toggle-sw:hover:after{ 

 left:10px;

} .toggle-sw.on:before{ 

 content:'ON';
 right:60px;

} .toggle-sw.on{ 

 background:rgb(255, 109, 64);

} .toggle-sw.on:after{ 

 left:55px;

} .toggle-sw.on:hover:after{ 

 left:50px;

} .toggle-sw.mine:after{ 

 background-size:cover;
 background-image:url('https://static.igem.org/mediawiki/2015/e/ee/UT_TOKYO_Mine.png')

}

.check{ position:relative; padding-left:30px; font-weight: bold; } .check::after{ 

 content:"";
 background-image:url('https://static.igem.org/mediawiki/2015/1/17/UT_TOKYO_Check.png');
 background-size:contain;
 position:absolute;
 top:0;
 left:0;
 width:1.5em;
 height:1.5em;

}

/*********************************************************************** / PATTERN /**********************************************************************/ .canvas-control{ 

 display:block;
 position:absolute;
 top:1px;
 left:1px;
 width:298px;
 height:298px;
 background-color:rgba(255,255,255,0.3);

}

.canvas-control p{ 

 line-height:300px !important;
 margin:0 auto;
 font-family: 'Homenaje';
 font-size:24px;
 color: white;
 text-align:center;
 vertical-align: middle;

}

.canvas-control:hover{ 

 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.canvas-stats{ 

 display:none;
 position:absolute;
 width:300px;
 padding:2px;
 z-index:500;

}

.canvas-stats:hover{ 

 display:block !important;

}

.canvas-stats .onoff{ 

 display:inline-block;

}

.canvas-stats .reset{ 

 display:inline-block;
 width:40px;
 height:40px;
 background-size:cover;
 background-image:url('https://static.igem.org/mediawiki/2015/9/9c/UT_TOKYO_Reset.png');

}

.canvas-stats .reset:hover{ 

 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.canvas-stats .msonoff{ 

 display:inline-block;

}

  1. debug{
   position:absolute;
   width:300px;
   right:0px;
   top:0px;
   font-family: "Century Gothic", sans-serif;
   background-color: black;
   opacity: 0.5;
   color: white;

}


/********************************************************************** / MENU /**********************************************************************/ .logo{ 

 position: fixed;
 top:16px;
 margin:0;
 width:auto;
 height:60px;

}

.menu-panel{ 

 font-family:'Homenaje', "Century Gothic", sans-serif;
 position:fixed;
 z-index: 500;
 left:0px;
 top:16px;
 width:100%;
 height:60px;
 margin:0px;
 background-color:rgba(255,255,255,0.6);

}

.menu-panel ul{ 

 position:fixed;
 text-align:center;
 padding:0px;
 margin:0px;
 width:100%;
 height:60px;

}

.menu-panel li{ 

 position:relative;
 display: inline-block;
 text-align:center;
 vertical-align:top;
 background-size:cover;
 width:120px;
 height:60px;
 font-size:20px;
 padding-top:10px;
 transition:border 0.3s;

} .menu-panel li:hover, .menu-panel li.hover{ 

 border-bottom:solid 5px gray;
 color:gray;

} .menu-panel li.active{ 

 border-bottom:solid 5px rgb(255,109,64);
 color:rgb(255,109,64);

}

.menu-panel li.home{ 

 height:50px;
 width:50px;
 margin:5px;
 background-size:cover;
 background-image:url('https://static.igem.org/mediawiki/2015/8/8b/UT_TOKYO_home.png');
 border:0;
 filter: gray;
 -webkit-filter: grayscale(100%);
 opacity:0.5;
 transition:all 0.3s;

} .menu-panel li.home:hover{ 

 border:0;
 /*
 -webkit-animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite;
 animation:spin 3s cubic-bezier(0.8,0,1,0.2) infinite;
 */
 filter: none;
 -webkit-filter: grayscale(0%);
 opacity:1;

} .menu-panel li.home.active{ 

 border:0;

} .menu-panel li.home a{ 

 display:block;
 margin-top:-10px;
 height:50px;
 width:50px;

} .menu-panel li.home a p{ 

 display:none;

} .menu-panel li.home:hover a p{ 

 display:block;
 position:absolute;
 width:50px;
 background-color:rgba(0,0,0,0.5);
 color:white;
 font-size:14px;
 text-decoration: none;
 margin:0;
 top:50px;
 left:0px;

}

.menu-panel li ol{ 

 z-index:1000;
 position:fixed;
 display:block;
 text-align:center;
 padding:10px;
 background:rgba(255,255,255,0.8);
 top:-200px;
 left:0px;
 width:100%;
 height:auto;
 opacity:0;
 transition:opacity 0.3s;
 margin:0;

}

.menu-panel li:hover ol, .menu-panel li.hover ol{ 

 top:76px;
 opacity:1;

}

.menu-panel li ol a{ 

 font-family: 'Homenaje', 'Open Sans',"Century Gothic", sans-serif;
 display: inline-block;
 vertical-align:bottom;
 text-align:right;

 width:120px;
 height:80px;
 margin:10px auto;

 color:black;
 font-size:22px;
 opacity:0.7;
 padding:5px;
 background-size: contain;

 text-decoration: none;

}

.menu-panel li ol a.big{ 

 height:120px;
 margin-left:30px;
 opacity:1;

}

.menu-panel li.project ol a{ 

 background:rgba(89,160,185,1);
 background-size:cover;
 color:white;

} .menu-panel li.modeling ol a{ 

 background:rgba(22,79,207,1);
 background-size:cover;
 color:white;

} .menu-panel li.experiment ol a{ 

 background:rgba(119,114,233,1);
 background-size:cover;
 color:white;

} .menu-panel li.achivement ol a{ 

 background:rgba(183,183,183,1);
 background-size:cover;

} .menu-panel li.pp ol a{ 

 background:rgba(1,0,216,1);
 background-size:cover;
 color:white;

} .menu-panel li.team ol a{ 

 background:rgba(89,160,185,1);
 background-size:cover;
 color:white;

}

.menu-panel li ol a:hover{ 

 color:rgb(255,109,64);
 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.menu-panel li ol a.active{ 

 opacity:1;

}

/********************************************************************** / NAVIGATION /**********************************************************************/ .posnav{ 

 font-family:'Homenaje', "Century Gothic", sans-serif;
 position: fixed;
 top:76px;
 left:100%;
 display: block;
 -webkit-transform-origin:left top;
 transform-origin:left top;
 -webkit-transform:rotate(90deg);
 transform:rotate(90deg);

}

  1. breadcrumbs-one{
 overflow-y: hidden;
 overflow-x: auto;
 white-space: nowrap;
 width:1000px;
 opacity:0.6;

}

  1. breadcrumbs-one a{
 padding: .6em 1em .6em 2em;

font-size:14px; 

 display:inline-block;
 text-decoration: none;
 color: black;
 position: relative;
 background:white;

}

  1. breadcrumbs-one .posnav:first-child a{
 padding-left: 1em;
 border-radius: 5px 0 0 5px;

}

  1. breadcrumbs-one a:hover,
  2. breadcrumbs-one a.hover{
 background: yellow !important;
 color:black !important;

}

  1. breadcrumbs-one a.read{
 background: red;
 color:white;

}

  1. breadcrumbs-one a::after,
  2. breadcrumbs-one a::before{
 content: "";
 position: absolute;
 top: 50%;
 margin-top: -1.5em;
 border-top: 1.5em solid transparent;
 border-bottom: 1.5em solid transparent;
 border-left: 1em solid;
 right: -1em;

}

  1. breadcrumbs-one a::after{
 z-index: 2;
 border-left-color: white;

}

  1. breadcrumbs-one a::before{
 border-left-color: white;
 right: -1.1em;
 z-index: 1;

}

  1. breadcrumbs-one a:hover::after,
  2. breadcrumbs-one a.hover::after{
 border-left-color: yellow !important;

}

  1. breadcrumbs-one a.read::after{
 border-left-color: red;

}

/********************************************************************** / ANIMATION /**********************************************************************/ @-webkit-keyframes blink{ 

 0% {opacity:1;}
 100% {opacity:0.7;}

} @keyframes blink{ 

 0% {opacity:1;}
 100% {opacity:0.7;}

}

@-webkit-keyframes iblink{ 

 0% {opacity:0.1;}
 100% {opacity:1;}

} @keyframes iblink{ 

 0% {opacity:0.1;}
 100% {opacity:1;}

}

@-webkit-keyframes spin { 0% {-webkit-transform: rotate(0deg);} 

 25% {-webkit-transform: rotate(90deg);}
 50% {-webkit-transform: rotate(180deg);}
 75% {-webkit-transform: rotate(270deg);}

100% {-webkit-transform: rotate(360deg);} }

@keyframes spin { 0% {transform: rotate(0deg);} 

 25% {transform: rotate(90deg);}

50% {transform: rotate(180deg);} 

 75% {transform: rotate(270deg);}

100% {transform: rotate(360deg);} }

/********************************************************************** / GRID /**********************************************************************/ /* ---- grid ---- */ .grid.team{ 

 display:block;
 margin:auto;
 max-width: 1500px;

} .grid.home{ 

 display:block;
 margin:auto;
 max-width: 1300px;

}

/* clear fix */ .grid:after{ 

 content: ;
 display: block;
 clear: both;

}

/* ---- .grid-item ---- */

.grid-item{ 

 font-family:'Homenaje', "Century Gothic", sans-serif;
 float: left;
 width: 200px;
 height: 200px;
 overflow:hidden;
 background-repeat:no-repeat;
 background-size:cover;
 padding:2px;

}

.grid-item img{ 

 visibility:hidden;

}

.grid-item span{ 

 display: block;
 width:100%;
 height:100%;
 background-repeat:no-repeat;
 background-size:cover;

}

.grid-item--size2{ 

 width: 300px;
 height: 300px;

} .grid-item--size3{ 

 width: 400px;
 height: 400px;

} .grid-item--size4{ 

  width: 300px;
  height: 300px;

} .grid-item--title{ 

  width: 100%;
  height: 50px;

} .grid-item--slide{ 

  width: 600px;
  height: 300px;

} .grid-item--slide ul{ 

 margin:0;

} .grid-item--small{ 

 width: 100px;
 height: 100px;

}

/* HOME PAGE */ .grid-item.pattern{ 

 overflow: visible;

}

.grid-item.link span:hover::after{ 

 content: url('https://static.igem.org/mediawiki/2015/5/5c/UT_TOKYO_External.png');
 position: absolute;
 right: 0;
 top: 0;
 opacity:0.6;
 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;

}

.grid-item.home span:hover{ 

 animation:blink 0.3s ease-in-out infinite alternate;
 -webkit-animation:blink 0.3s ease-in-out infinite alternate;
 cursor: pointer;

}

.grid-item.home ul{ 

   margin-top:5px;

} .grid-item.opened.home{ 

 width:396px;
 height:396px;
 margin:2px;
 background-color:rgba(255,255,255,0.2);

} .grid-item.opened.home span{ 

 position:absolute;
 top:0;
 left:0;
 margin:10px;
 background-size: 180px auto;
 height:180px;
 width:180px;

}

.grid-item.opened.home ul{ 

 position:absolute;
 display:inline-block;
 top:200px;
 left:0;
 margin:10px;
 padding:0;
 width:180px;
 height:180px;

}

.grid-item.opened.home ul li{ 

 width:180px;
 background-color:rgba(0,0,0,0.5);
 margin-bottom:2px;
 padding:5px;

}

.grid-item.opened.home ul li:hover{ 

 background-color:black;

}

.grid-item.opened.home ul li a{ 

 display: block;
 font-family: 'Open Sans', "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
 font-size:1.3em;
 color:white;
 text-decoration: none;
 width:180px;

}

.grid-item.opened.home ul li:hover a{ 

 color:rgb(255,109,64);

}

.grid-item.opened.home ul li a p{ 

 position:absolute;
 top:-200px;
 left:200px;
 width:180px;
 margin:0;
 visibility:hidden;
 font-size:0.7em;
 color:white;
 padding:5px;

}

.grid-item.opened.home ul li a:hover p{ 

 visibility:visible;

}

/* TEAM PAGE */ .grid-item.team h1{ 

 position:absolute;
 background:none;
 padding:0;
 top:0;
 font-size: 24px;
 font-weight:normal;
 visibility: hidden;

}

.grid-item.team span{ 

 display: block;
 width:100%;
 height:100%;
 background:url('../images/team_r.png');
 background-repeat:no-repeat;
 background-size:cover;

}

.grid-item.team span:hover{ 

 animation:blink 0.4s ease-in-out infinite alternate;
 -webkit-animation:blink 0.4s ease-in-out infinite alternate;

}

.grid-item.opened.team{ 

 width: 396px;
 height: 396px;
 margin: 2px;
 background: rgba(255, 255, 255, 0.6);

}

.grid-item.opened.team span{ 

 display: none;

}

.grid-item.opened.team h1{ 

 max-width:25%;
 font-size:1.2em;
 border-bottom:solid 1px white;
 visibility: visible;

}

.grid-item.opened.team img{ 

 visibility:visible;
 position:absolute;

}

.grid-item.opened.team img.topright{ 

 width:67%;
 height:67%;
 top:0px;
 left:33%;

}

.grid-item.opened.team img.bottomleft{ 

 width:33%;
 height:33%;
 top:67%;
 left:0;

}

.grid-item.opened.team p.jobs{ 

 position:absolute;
 bottom:33%;
 left:0;
 margin-left:10px;
 text-align:left;
 font-size: 16px;
 font-weight:normal;

}

.grid-item.opened.team p.description{ 

 /*clear:right;*/
 position:absolute;
 top:67%;
 left:33%;
 width:62%;
 margin-left:10px;
 text-align:left;
 font-size: 16px;
 font-weight:normal;

} /********************************************************************** / Slide Show /**********************************************************************/

  1. slide {
 width:100%;
 height:100%;
 margin:0 auto;
 position:relative;

}

  1. slide ul,
  2. slide li{
 width:100%;
 height:100%;

}

  1. slide img {
 position:absolute;
 left:0;
 top:0;
 height:100%;
 width:100%;
 visibility: visible;

}

/********************************************************************** / For mobile /**********************************************************************/ @media only screen and (max-width: 1024px){ 

 h1, h2, h3{
   font-size:1.2em;
 }

 p, h4{
   font-size:0.8em;
 }

 img.figure{
   max-width:90%;
 }

 .panel{
   width:90%;
 }

 .logo{
   display:none;
 }

 .menu-panel ul{
   width:auto;
   text-align:left;
   left:60px;
 }

 .menu-panel li{
   width:80px;
 }

 .menu-panel ul li.home{
   position:fixed;
   top:16px;
   left:0px;
 }

 .menu-panel ul li ol a{
   font-size:0.8em;
   height:60px;
   width:80px;
 }
 .menu-panel ul li ol a.big{
   height:100px;
   width:100px;
 }

 .grid-item.opened.team{
   width:300px;
   height:300px;
 }

 .grid-item.opened.team p{
   font-size:0.8em;
 }

 .posnav{
   font-size:14px;
 }

 .grid-item--size3{
   width: 300px;
   height: 300px;
 }

}

@media only screen and (max-width: 640px){ 

 h1, h2{
   text-align:right;
 }

 .panel{
   padding:10px;
 }

 .menu-panel ul li{
   padding:5px;
   font-size:15px;
   width:70px;
   height:30px;
 }

 .menu-panel ul li ol a{
   font-size:14px;
   height:40px;
   width:80px;
   margin:1px;
 }

 .menu-panel ul li ol a.big{
   margin-left:0;
   margin-right:80px;
   width:80px;
   height:80px;
 }
.menu-panel li ol{
   display:none;
 }
 .menu-panel li:hover ol{
   display:block;
   background:none;
   position:relative;
   margin-top:-75px;
   margin-left:-20px;
   width:100px;
 }

 .grid-item.opened.home{
   width:296px;
   height:296px;
 }

 .grid-item.opened.home span{
   background-size: 130px auto;
   width:130px;
 }

 .grid-item.opened.home ul{
   top:140px;
 }

 .grid-item.opened.home ul li{
   width:130px;
 }

 .grid-item.opened.home ul li a{
   font-size:0.8em;
 }

 .grid-item.opened.home ul li a p{
   font-size:1em;
   width:130px;
   top:-140px;
   left:140px;
 }

 .grid-item--size2{
   width: 100px;
   height: 100px;
 }
 .grid-item--size3{
   width: 200px;
   height: 200px;
 }
 .grid-item--size4{
   width: 300px;
   height: 300px;
 }
 .grid-item--size5{
   height: 40px;
 }
 .grid-item--slide{
    width: 300px;
    height: 150px;
   padding:0;
 }

 .grid-item.team{
   width:96px;
   height:96px;
   margin:2px;
 }

 .grid-item.opened.team{
   width:296px;
   height:296px;
   margin:2px;
 }

 .grid-item.team h1,
 .grid-item.opened.team h1{
   font-size:1em;
 }

 .grid-item.opened.team p.jobs,
 .grid-item.opened.team p.description{
   font-size:0.8em;
 }

 #footer h1{
   font-size:1.5em;
   text-align:center;
 }

 #footer img{
   width:100px;
   max-height:50px;
 }

} The Pattern-Formation Game | HOME

CONTROL

PROJECT DESCRIPTION

How do Zebrafish get their stripes? Why do we have only 5 digits on each hand?

Here's one possible answer: Turing Pattern.

Turing Pattern is a type of spatial pattern suggested by the British mathematician Alan Turing Alan Turing(1912-1954)
A British mathetician. Famous for contribution to computer science.. He proposed that these patterns could be created by the network of two chemicals which have different diffusion rate. These two molecules are called the activator and inhibitor.

Because of its simplicity, the theory has attracted scientist in many fields, and thus various research has been carried out in the last 60 years. However, it was not easy to prove directly if those patterns are produced by the reaction-diffusion systems or another mechanism. Living systems are so complex that most research was exclusively theoretical. Biologists still face a big problem: identification of proper molecules acting as activator and inhibitor.

We therefore reconstructed a Turing system using two advantages of synthetic biology; controllability and biological directness. By letting whole E. Coli cells, whose motility were controlled, communicate with each other, we succeeded in making the whole system work more identically than any previous researches. This project should surely be a great step for understanding more about morphology and some other related fields of science. Now, the new door of synthetic biology has opened and awaits you to come in!

WIKI EDITTING

1. Normal Text
&ltp>Normal Text&lt/p> :
Normal Text
2. Headline
&lth2>Headline&lt/h2> :

Headline

3. Line Break
&ltp>Line&ltbr />Break&lt/p> : Line
Break
4. Additional Information
&ltp>&ltspan>Addtional information&ltq>THIS IS Additional information!&lt/q>&lt/span>&lt/p> : Additional informationTHIS IS Additional information!
Move your cursor over the text and find what happens.
5. Pictures
&ltimg src='./images/project.png' width='100' height='100' align='left'> :




6. MathJax(LaTeX)
$\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}$ : $ \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6} $
$$\sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6}$$ : $$ \sum_{n=1}^\infty \frac{1}{n^2} = \frac{\pi^2}{6} $$