Difference between revisions of "Team:Tokyo Tech"

 
(34 intermediate revisions by 8 users not shown)
Line 1: Line 1:
 +
{{Tokyo_Tech}}
 +
 
<html>
 
<html>
 
<head>
 
<head>
Line 5: Line 7:
  
 
<script type="text/javascript">
 
<script type="text/javascript">
function slideSwitch() {
 
  var $active = $('#slideshow img.active');
 
 
  if ( $active.length == 0 ) $active = $('#slideshow img:last');
 
 
  var $next =  $active.next().length ? $active.next()
 
      : $('#slideshow img:first');
 
 
  $active.addClass('last-active');
 
 
  $next.css({opacity: 0.0})
 
      .addClass('active')
 
      .animate({opacity: 1.0}, 1000, function() {
 
          $active.removeClass('active last-active');
 
      });
 
}
 
  
$(function() {
 
  setInterval( "slideSwitch()", 3000 );
 
});
 
 
</script>
 
</script>
  
Line 30: Line 13:
 
<!--
 
<!--
  
 +
p.resizeimage {
 +
position: relative;
 +
width: 90%;
 +
  max-width: 1100px;
 +
  min-width: 240px;
 +
  margin: 0 auto;
 +
}
 
p.resizeimage img { width: 100%; }
 
p.resizeimage img { width: 100%; }
  
#slideshow img {
+
 
  position: absolute;
+
  top: 150;
+
  left:0;
+
  bottom: 500;
+
  z-index: 8;
+
  opacity: 0.0;
+
}
+
#slideshow img.active {
+
  z-index: 10;
+
  opacity: 1.0;
+
}
+
#slideshow img.last-active {
+
  z-index: 9;
+
}
+
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
  
Line 68: Line 44:
  
  
#logo{
 
width: 90%;
 
min-width: 880px;
 
max-width: 1100px;
 
color: #ffffff;
 
// position: absolute;
 
margin: 0 auto;
 
padding: 2px;
 
border: 3px solid #583612;
 
    border-radius: 5px;        /* CSS3 */ 
 
  /* -webkit-border-radius: 5px;    /* for Safari,Google Chrome */ 
 
  /* -moz-border-radius: 5px;  /* for Firefox */ 
 
  
 +
 +
/****************** this page setting ********************/
 +
p#home_sponsors{
 +
    text-align: center;
 
}
 
}
/*
+
p#home_sponsors img{
#inner_logo{
+
    height: 150px;
margin: 0;
+
padding: 0;
+
border: 9px solid #583612;
+
background-color:rgba(255,255,255,0.5)
+
}*/
+
#under_logo{
+
width: 880px;
+
// midth: 90%;
+
// min-width: 880px;
+
// max-width: 1100px;
+
margin: 5px auto 0;
+
 
}
 
}
#under_logo img{
+
p#main_contents p.normal_text{
float: left;
+
font-size: 18px;
}
+
text-indent: 18px;
p#logo_sentence{
+
font-family: "Times New Roman";
+
font-size: 30px;
+
 
text-align: center;
 
text-align: center;
font-style: italic;
+
// padding: 18px;
color: #583612;
+
    font-family: 'Century', serif;
float: left;
+
 
margin-left: 100px;
+
margin-right: 100px;
+
 
}
 
}
p#logo_image_space1{
+
 
width: 30px;
+
/*body{
float: left;
+
    background-image: url("https://static.igem.org/mediawiki/2016/8/83/Tokyo_Tech_Background.png");
 +
    background-repeat: no-repeat;
 +
    background-position: center center;
 +
    background-size: cover;
 +
    background-attachment: fixed;
 
}
 
}
p#logo_image_space2{
+
#globalWrapper, #content{
width: 40px;
+
    background: transparent;
float: left;
+
 
}
 
}
 
+
#content{
 
+
//    background-image: url("https://static.igem.org/mediawiki/2016/8/83/Tokyo_Tech_Background.png");
/****************************** About Menu ************************************/
+
#menu_list_division{
+
width: 90%;
+
min-width: 880px;
+
max-width: 1100px;
+
 
     margin: 0 auto;
 
     margin: 0 auto;
     margin-bottom: 40px;
+
}*/
 +
/**********************************************************************/
 +
#main_contents{
 +
     margin: 0 auto;
 +
    width: 90%;
 +
    min-width: 880px;
 +
    max-width: 1100px;
 
}
 
}
#menu_list_divison ul.menu_list_class{
+
.container{
*zoom: 1;
+
    margin: 5px auto;
list-style: none;
+
    background: #ffffff;
width: 100%;
+
    border: 1px solid #583612;
min-width: 880px;
+
max-width: 1100px;
+
margin: 0 auto 30px;
+
padding: 0 auto;
+
display: table;
+
box-sizing: border-box;
+
 
}
 
}
.menu_list_class:before, .menu_list_class:after{
+
.container_top h1{
content: "";
+
margin-top: 1px;
display: table;
+
font-size: 36px;
 
}
 
}
.menu_list_class:after{
+
.container_header{
clear: both;
+
    background: #ffffff;
 +
    text-align: center;
 
}
 
}
.menu_list_class li{
+
.container_header span{
// display: table-cell;
+
    border-bottom: 2px solid #583612;
float: left;
+
list-style: none;
+
position: relative;
+
// margin: 0 1.71%;
+
margin: 0;
+
padding: 0;
+
width: 12.5%;
+
text-align: center;
+
vertical-align: middle;
+
 
}
 
}
.menu_list_class li a{
+
.container_contents{
display: block;
+
line-height: 1.5em;
box-sizing: border-box;
+
width: 800px;
height: 48px;
+
margin: 0 auto;
margin: 0;
+
padding-bottom: 10px;
padding: 2px 0;
+
}
color: #583612;
+
#main_contents p.normal_text{
 
font-size: 18px;
 
font-size: 18px;
font-family: "Imprint MT Shadow";
+
text-indent: 18px;
line-height: 1;
+
text-align: justify;
text-decoration: none;
+
// padding: 18px;
border: 3px double #583612;
+
    font-family: 'Century', serif;
background-color: #ffffff;
+
}
+
.menu_list_class li a:hover{
+
background: #583612;
+
color: #ffffff;
+
}
+
.menu_list_class li:hover ul li{
+
overflow: visible;
+
height: 48px;
+
// background: #583612;
+
}
+
/*
+
.menu_list_class li a span{
+
position: absolute;
+
top: 50%;
+
left: 50%;
+
vertical-align: middle;
+
 
}
 
}
*/
 
  
#menu_list_division ul.drop_menu{
+
/************************* Show/Hide setting ***************************/
position: absolute;
+
.on{
list-style: none;
+
width: 200%;
+
// left: -100%;
+
left: -50%;
+
z-index: 9999;
+
// top: 95%;
+
top: 100%;
+
margin: 0;
+
padding: 0;
+
}
+
.drop_menu li{
+
 
display: block;
 
display: block;
width: 100%;
+
-webkit-transiton: all 0.6s ease;
overflow: hidden;
+
transition: all 0.6s ease;
height: 0px;
+
transition: .5s;
+
margin: 0;
+
padding: 0;
+
 
}
 
}
.drop_menu li a{
+
.off{
display: block;
+
display: none;
box-sizing: border-box;
+
-webkit-transiton: all 0.6s ease;
margin: 0;
+
transition: all 0.6s ease;
width: 100%;
+
padding: 5px 15px;
+
// padding: 0 15px;
+
height: 48px;
+
border-top: 1px solid #583612;
+
text-align: left;
+
}
+
.drop_menu li:hover > a{
+
// background: #0d4f78;
+
}
+
.drop_menu li a:hover{
+
background: #583612;
+
color: #ffffff;
+
 
}
 
}
  
.drop_menu li:hover ul li{
+
/************************* This page setting ******************************/
overflow: visible;
+
height: 48px;
+
// background: #186b91;
+
}
+
#menu_list_division ul.second_level_menu{
+
list-style: none;
+
position: absolute;
+
top: 0;
+
/* top: -8%; // for igem page */
+
left: 100%;
+
/* left: 90%; // for igem page */
+
right: 80%;
+
margin: 0;
+
padding: 0;
+
// background: #0d4f78;
+
-webkit-transition: all .5s ease;
+
transition: all .5s ease;
+
}
+
.second_level_menu li{
+
display: inline-block;
+
position: relative;
+
transition: .2s;
+
margin: 0;
+
padding: 0;
+
}
+
.second_level_menu li a{
+
display: inline-block;
+
box-sizing: border-box;
+
// width: 100%;
+
margin: 0;
+
padding: 5px 15px;
+
height: 48px;
+
border-top: 1px solid #583612;
+
// background: #0d4f78;
+
text-align: left;
+
text-decoration: none;
+
}
+
  
.menu_list_class li:hover ul li ul{
 
overflow: hidden;
 
width: 0%;
 
}
 
.menu_list_class li ul li:hover ul{
 
overflow: visible;
 
width: 100%;
 
}
 
.menu_list_class li ul li:hover ul li{
 
overflow: visible;
 
width: 100%;
 
height: 48px;
 
// background: #186b91;
 
}
 
ul#experiment_list{
 
width: 200%;
 
left: -100%;
 
}
 
#menu_list_division ul#promoter_list{
 
position: absolute;
 
top: -100%;
 
  
  
 
}
 
}
  
 +
--></style>
 +
</head>
 +
<body>
  
.logo_sponsors {
 
bottom: 20px;
 
  
}
+
 +
 +
 +
<br>
 +
<br>     
 +
                <div id="ID" class="container">
 +
        <div id="ID_header" class="container_header">
 +
<h2><span>Our story</span></h2>
 +
</div><!-- /_header -->
  
/********************************* For smart phone ***********************************/
+
<div id="ID_contents" class="container_contents">
/*
+
        <p class="normal_text">In this iGEM competition, iGEM 2016 team Tokyo_Tech planned to tell the public about synthetic biology, <span style="font-style : italic">Escherichia coli</span>
@media screen and (max-width: 360px){
+
, and bacterial Toxin &#8208; Antitoxin system (TA system), as well as enjoyed our activity for iGEM. We participated in the school festival (a poster session), gave classes to high school students, and collected feedback from the public as Human Practices. As a consequence of these activities, we noticed that, through the familiar story in everyone’s childhood, the public more easily gets interested in unfamiliar things such as TA system. Therefore, we decided to employ Snow White as the topic of our project this year.<span style="font-style : italic">E.coli</span> was used to recreate the Snow White story, and based on the simulation, the Snow White story with the prospective of the real beauty was also evaluated. Moreover, in order to respond further to the feedback that we received, the software was developed which enables selective protein production. <p class="caption" style="font-size: 16px;"><a href ="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices" align="center"> (See the Human Practices page) </a>
#menu_list_division{
+
</p></div>
//overflow: hidden;
+
width: 300px;
+
height: 350px;
+
margin: 0 auto;
+
}
+
.menu_list_class{
+
list-style: none;
+
width: 108px;
+
}
+
.menu_list_class li{
+
display: inline;
+
position: relative;
+
width: 108px;
+
height: 40px;
+
                both: clear;
+
}
+
.menu_list_class > li{
+
border-bottom: 1px solid #052d5d;
+
}
+
.menu li:last-child{
+
border-bottom: none;
+
}
+
.drop_menu > li{
+
border-bottom: 1px solid #052d5d;
+
}
+
.drop_menu > li:last-child{
+
border-bottom: none;
+
}
+
menu_list_class li a{
+
display: block;
+
width: 100px;
+
height: 40px;
+
color: #ffffff;
+
font-size: 12px;
+
padding-left: 5px;
+
background: #0d4f78;
+
}
+
menu_list li a:hover{
+
background: #186b91;
+
}
+
menu_list_class > li:hover > a{
+
background: #186b91;
+
}
+
meun_list_class > li:hover li:hover> a{
+
background: #186b91;
+
}
+
.drop_menu > li{
+
overflow: visible;
+
top: -40px;
+
left: 108px;
+
height: 40px;
+
}
+
.drop_menu li{
+
overflow: hidden;
+
height: 0;
+
left: 108px;
+
}
+
.drop_menu li a{
+
background: #0d4f78;
+
}
+
}
+
*/
+
  
body {
+
<br><br>
  /* 画像ファイルの指定 */
+
        </p>
  background-image: url(https://static.igem.org/mediawiki/2016/8/83/Tokyo_Tech_Background.png);
+
   
+
  /* 画像を常に天地左右の中央に配置 */
+
  background-position: center center;
+
   
+
  /* 画像をタイル状に繰り返し表示しない */
+
  background-repeat: no-repeat;
+
   
+
  /* コンテンツの高さが画像の高さより大きい時、動かないように固定 */
+
  background-attachment: fixed;
+
   
+
  /* 表示するコンテナの大きさに基づいて、背景画像を調整 */
+
  background-size: cover;
+
   
+
  /* 背景画像が読み込まれる前に表示される背景のカラー */
+
  background-color: #464646;
+
}
+
  
--></style>
+
        <div id="ID_header" class="container_header">
</head>
+
<h2><span>Sponsors</span></h2>
<body>
+
</div><!-- /_header -->
<div id="logo">
+
<div id="inner_logo" align="center">
+
<a href="https://2016.igem.org/Team:Tokyo_Tech">
+
<img src="https://static.igem.org/mediawiki/2016/7/7c/T--Tokyo_Tech--Topnew.png" height="300px" />
+
</a>
+
</div><!-- /inner_logo -->
+
</div><!-- /logo -->
+
+
<div class="clear"></div><!-- /clear -->
+
<div id="menu_list_division">
+
<ul id="menu_list1" class="menu_list_class">
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Project">Project</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Medal">Achievements</a></li>
+
<li><a href="javascript:void(0);">Experiment</a>
+
<ul id="experiment_list" class="drop_menu">
+
<li><a>1. Toxin Assay</a>
+
<ul id="toxin_list" class="second_level_menu assay_menu">
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/Overview" >1.0. Overview</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/Adjustment_of_Expression_of_MazF" style="font-size: 14px">1.1. Adjustment of Expression of MazF</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/mazEF_System_Assay">1.2. <span style="font-style : italic">mazEF</span> System Assay</a></li>
+
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Toxin_Assay/Queens_capricious">1.3. <span style="font-style : italic">yafNO</span> System Assay</a></li>
+
</ul><!-- /toxin_list -->
+
</li>
+
<li><a>2. AHL Assay</a>
+
<ul id="ahl_list" class="second_level_menu assay_menu">
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/AHL_Assay/AHL_Reporter_Assay">2.1. AHL Reporter Assay</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/AHL_Assay/Only_Assay">2.2. Only Assay</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/AHL_Assay/Rhl_System_Assay">2.3. Rhl System Assay</a></li>
+
</ul><!-- /ahl_list -->
+
</li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/AmiE_Assay">3. AmiE Assay</a></li>
+
<li><a style="font-size: 14px; height: 60px;">4. Temperature Dependent Promoter Assay</a>
+
<ul id="promoter_list" class="second_level_menu assay_men">
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Promoter_Assay/Pcold">4.1. Pcold</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Promoter_Assay/Pheat">4.2. Pheat</a></li>
+
</ul><!-- /promoter_list -->
+
</li>
+
</ul><!-- /experiment_list -->
+
</li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Model">Model</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices">Human Practices</a>
+
<ul id="human_practices_list" class="drop_menu">
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#overview">Human Practices Overview</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#3E">HP 3E</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#Policy_and_Practices">HP Policy and Practices</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Human_Practices#Snow_White_Varieties">HP Snow White Varieties</a></li>
+
</ul><!-- /human_practices_list -->
+
</li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Parts">Parts</a>
+
<ul id="parts_list" class="drop_menu">
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Parts_Overview">Overview</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Basic_Part">Basic Parts</a></li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Composite_Part">Composite Parts</a></li>
+
</ul><!-- /parts_list -->
+
</li>
+
<li><a href="https://2016.igem.org/Team:Tokyo_Tech/Collaborations">Collaborations</a>
+
</li>
+
<li><a href="javascript:void(0);">About us</a>
+
<ul id="about_ts_list" class="drop_menu">
+
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Description">Description</a></li>
+
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Team">Team</a></li>
+
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Attributions">Attribution and Contribution</a></li>
+
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Safety">Safety</a></li>
+
<li class="drop_list"><a href="https://2016.igem.org/Team:Tokyo_Tech/Sponsors">Sponsors</a></li>
+
<li class="drop_list"><a href="https://igem.org/Team.cgi?team_id=1949">Official Team Page</a></li>
+
</ul><!-- /about_us_list -->
+
</li>
+
</ul><!-- /menu_list -->
+
</div><!-- /menu_list_division -->
+
  
</div>
 
  
<p id="slideshow" class="resizeimage">
 
    <img src="https://static.igem.org/mediawiki/2016/1/14/T--Tokyo_Tech--slide1.png" alt="" class="active" />
 
    <img src="https://static.igem.org/mediawiki/2016/7/72/T--Tokyo_Tech--slide2.png" alt="" />
 
    <img src="https://static.igem.org/mediawiki/2016/5/5a/T--Tokyo_Tech--slide3.png" alt="" />
 
    <img src="https://static.igem.org/mediawiki/2016/9/95/T--Tokyo_Tech--slide4.png" alt="" />
 
    <img src="https://static.igem.org/mediawiki/2016/a/ad/T--Tokyo_Tech--slide5.png" alt="" />
 
    <img src="https://static.igem.org/mediawiki/2016/5/52/T--Tokyo_Tech--slide6.png" alt="" />
 
    <img src="https://static.igem.org/mediawiki/2016/f/ff/T--Tokyo_Tech--slide7.png" alt="" />
 
    <img src="https://static.igem.org/mediawiki/2016/c/c9/T--Tokyo_Tech--slide8.png" alt="" />
 
</p>
 
  
 +
<p align="center" class="" id="home_sponsors"><img src="https://static.igem.org/mediawiki/2016/c/c7/Tokyo_Tech_kurame_logo.gif" ><img src="https://static.igem.org/mediawiki/2016/c/c2/Tokyo_Tech_Saitama.JPG
 +
"> <br /><img src="https://static.igem.org/mediawiki/2016/9/93/Tokyo_Tech_Fund.jpg" ><img src="https://static.igem.org/mediawiki/2016/4/47/Tokyo_Tech_JASSO.gif
 +
"> <br /><img src="https://static.igem.org/mediawiki/2016/0/07/Tokyo_Tech_Promega.jpg
 +
"><img src="https://static.igem.org/mediawiki/2016/f/f6/Tokyo_Tech_cosmo_bio.png
 +
"><br /><img src="https://static.igem.org/mediawiki/2016/a/a2/Tokyo_Tech_IDT.png" /></p><!-- /home_sponsors -->
  
<p align="center" class="logo_sponsors"><img src="https://static.igem.org/mediawiki/2016/c/c7/Tokyo_Tech_kurame_logo.gif" height="150"><img src="https://static.igem.org/mediawiki/2016/c/c2/Tokyo_Tech_Saitama.JPG
+
</div>
" height="150"><img src="https://static.igem.org/mediawiki/2016/9/93/Tokyo_Tech_Fund.jpg" height="150"><img src="https://static.igem.org/mediawiki/2016/4/47/Tokyo_Tech_JASSO.gif
+
</div></div>
" height="150"><img src="https://static.igem.org/mediawiki/2016/0/07/Tokyo_Tech_Promega.jpg
+
" height="150"><img src="https://static.igem.org/mediawiki/2016/f/f6/Tokyo_Tech_cosmo_bio.png
+
" height="150"></p>
+
 
+
  
  
Line 487: Line 175:
 
var width = document.body.clientWidth;
 
var width = document.body.clientWidth;
  
var menu = document.getElementById('logo_sponsors');
+
var menu = document.getElementsByClassName('logo_sponsors')[0];
  
var menuMarginTop = width * 3 / 5;
+
var menuMarginTop = width * 3 / 5 + 150;
  
console.log (width);
 
  
menu.style.marginTop = menuMarginTop;
+
menu.style.marginTop = menuMarginTop + 'px';
  
 
}
 
}
Line 501: Line 188:
 
</html>
 
</html>
 
{{Team:Tokyo_Tech/template2016}}
 
{{Team:Tokyo_Tech/template2016}}
 +
{{Tokyo_Tech/Footer}}

Latest revision as of 05:47, 30 November 2016



    

Our story

In this iGEM competition, iGEM 2016 team Tokyo_Tech planned to tell the public about synthetic biology, Escherichia coli , and bacterial Toxin ‐ Antitoxin system (TA system), as well as enjoyed our activity for iGEM. We participated in the school festival (a poster session), gave classes to high school students, and collected feedback from the public as Human Practices. As a consequence of these activities, we noticed that, through the familiar story in everyone’s childhood, the public more easily gets interested in unfamiliar things such as TA system. Therefore, we decided to employ Snow White as the topic of our project this year.E.coli was used to recreate the Snow White story, and based on the simulation, the Snow White story with the prospective of the real beauty was also evaluated. Moreover, in order to respond further to the feedback that we received, the software was developed which enables selective protein production.

(See the Human Practices page)



Sponsors