Difference between revisions of "Team:UT-Tokyo"

Revision as of 08:44, 15 August 2015

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

h1.firstHeading {

   display: none !important;

}

top_menu_14 .has_submenu{

   height:16px;

}

content{

   width:100%;
   margin:0;
   padding:0;

}

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

preload{

 display:none;

}

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

}

footer h1{

 font-family:'Homenaje';
 background:none;
 padding:0px;
 font-size:1.8em;
 color:white;
 margin-bottom:0;

}

footer img{

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

}

footer img:hover{

 filter: none;
 -webkit-filter: grayscale(0%);
 opacity:1;

}

footer img.sns{

 width:32px;
 height:32px;
 margin:5px;

}

footer .copyright{

 text-align:center;
 font-size:1em;
 line-height:2em;
 color:white;

}

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;

}

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

}

breadcrumbs-one{

 overflow-y: hidden;
 overflow-x: auto;
 white-space: nowrap;
 width:1000px;
 opacity:0.6;

}

breadcrumbs-one a{

 padding: .6em 1em .6em 2em;

font-size:14px;

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

}

breadcrumbs-one .posnav:first-child a{

 padding-left: 1em;
 border-radius: 5px 0 0 5px;

}

breadcrumbs-one a:hover,
breadcrumbs-one a.hover{

 background: yellow !important;
 color:black !important;

}

breadcrumbs-one a.read{

 background: red;
 color:white;

}

breadcrumbs-one a::after,
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;

}

breadcrumbs-one a::after{

 z-index: 2;
 border-left-color: white;

}

breadcrumbs-one a::before{

 border-left-color: white;
 right: -1.1em;
 z-index: 1;

}

breadcrumbs-one a:hover::after,
breadcrumbs-one a.hover::after{

 border-left-color: yellow !important;

}

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 /**********************************************************************/

slide {

 width:100%;
 height:100%;
 margin:0 auto;
 position:relative;

}

slide ul,
slide li{

 width:100%;
 height:100%;

}

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

}

CONTROL

Team
write description here.

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

@@ Line 1: / Line 1: @@
-{{UT-Tokyo}}
 {{UT-Tokyo/CSS}}
 {{UT-Tokyo/Javascript}}
 <html>
+<!--{{UT-Tokyo}}-->
      <head>
        <meta name='viewport' content='width=device-width, initial-scale=1, user-scalable=no'>