Difference between revisions of "Team:TokyoTech"

Line 1: Line 1:
−
{{TokyoTech/css/reset}}
 
−
{{TokyoTech/css/main}}
 
−
<!DOCTYPE html>
 
 
<html>
 
<html>
−
<title>Coli Sapiens</title>
+
<style type="text/css">
−
<meta charset="UTF-8">
+
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
<link rel="stylesheet" href="main.css">
+
−
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Poppins">
+
−
<style>
+
−
body,h1,h2,h3,h4,h5 {font-family: "Poppins", sans-serif}
+
−
body {font-size:16px;}
+
−
.w3-half img{margin-bottom:-6px;margin-top:16px;opacity:0.8;cursor:pointer}
+
−
.w3-half img:hover{opacity:1}
+
−
</style>
+
−
<body>
+
  
−
<!-- Sidebar/menu -->
+
/* W3.CSS 4.04 Apr 2017 by Jan Egil and Borge Refsnes */
−
<nav class="w3-sidebar w3-red w3-collapse w3-top w3-large w3-padding" style="z-index:3;width:300px;font-weight:bold;" id="mySidebar"><br>
+
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
−
  <a href="javascript:void(0)" onclick="w3_close()" class="w3-button w3-hide-large w3-display-topleft" style="width:100%;font-size:35px">Close Menu</a>
+
/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
−
  <div class="w3-container" style="margin-top: 20px;margin-bottom: 25px">
+
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
−
    <img src="https://static.igem.org/mediawiki/2017/a/a8/T--TokyoTech--logo_white_bright_10211603.png" style="width: 100%">
+
article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}
−
  </div>
+
audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
−
  <div class="w3-bar-block" style="padding-top: 15px; padding-left: 35px">
+
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
−
    <ul id="normal" class="dropmenu">
+
a{background-color:transparent;-webkit-text-decoration-skip:objects}
−
    <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Home</a>  
+
a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
−
    <ul>
+
dfn{font-style:italic}mark{background:#ff0;color:#000}
−
    <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">1</a></li>
+
small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
−
    </ul>
+
sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}svg:not(:root){overflow:hidden}
−
    </li>
+
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
−
    </ul>
+
button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:bold}
 +
button,input{overflow:visible}button,select{text-transform:none}
 +
button,html [type=button],[type=reset],[type=submit]{-webkit-appearance:button}
 +
button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner{border-style:none;padding:0}
 +
button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring{outline:1px dotted ButtonText}
 +
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
 +
legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
 +
[type=checkbox],[type=radio]{padding:0}
 +
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
 +
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
 +
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}
 +
::-webkit-input-placeholder{color:inherit;opacity:0.54}
 +
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
 +
/* End extract */
 +
html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
 +
h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}.w3-serif{font-family:serif}
 +
h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
 +
hr{border:0;border-top:1px solid #eee;margin:20px 0}
 +
.w3-image{max-width:100%;height:auto}img{margin-bottom:-5px}a{color:inherit}
 +
.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
 +
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
 +
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
 +
.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
 +
.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
 +
.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
 +
.w3-btn,.w3-button{border:none;display:inline-block;outline:0;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
 +
.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
 +
.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none} 
 +
.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
 +
.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
 +
.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
 +
.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
 +
.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
 +
.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
 +
.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
 +
.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
 +
.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
 +
.w3-dropdown-hover:hover .w3-dropdown-content{display:block;z-index:1}
 +
.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
 +
.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
 +
.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}
 +
.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
 +
.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
 +
.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
 +
.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
 +
.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
 +
.w3-main,#main{transition:margin-left .4s}
 +
.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
 +
.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
 +
.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
 +
.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;outline:none;display:block;color:#fff;}
 +
.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
 +
.w3-bar .w3-button{white-space:normal}
 +
.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;outline:none;white-space:normal;float:none;color: #fff}
 +
.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
 +
.w3-responsive{overflow-x:auto}
 +
.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
 +
.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
 +
.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
 +
.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
 +
.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
 +
.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
 +
@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
 +
.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
 +
.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
 +
@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
 +
.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
 +
.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
 +
.w3-content{max-width:980px;margin:auto}.w3-rest{overflow:hidden}
 +
.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
 +
.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
 +
.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
 +
@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
 +
.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
 +
.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
 +
.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
 +
@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
 +
@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
 +
@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
 +
@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}}
 +
.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
 +
.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
 +
.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
 +
.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
 +
.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
 +
.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
 +
.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
 +
.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
 +
.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
 +
.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
 +
.w3-display-position{position:absolute}
 +
.w3-circle{border-radius:50%}
 +
.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 +
.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
 +
.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
 +
.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 +
.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 +
.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
 +
.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
 +
.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
 +
.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
 +
.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
 +
.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
 +
.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
 +
.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
 +
.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
 +
.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
 +
.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
 +
.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
 +
.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
 +
.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
 +
.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
 +
.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
 +
.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
 +
.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:25px!important}
 +
.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
 +
.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
 +
.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
 +
.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
 +
.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
 +
.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
 +
.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
 +
.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
 +
.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
 +
.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
 +
.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
 +
.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
 +
.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
 +
.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
 +
.w3-left{float:left!important}.w3-right{float:right!important}
 +
.w3-button:hover{color:#000!important;background-color:#ccc!important}
 +
.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 +
.w3-hover-none:hover{box-shadow:none!important}
 +
/* Colors */
 +
.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
 +
.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
 +
.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
 +
.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
 +
.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
 +
.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
 +
.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
 +
.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
 +
.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
 +
.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
 +
.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
 +
.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
 +
.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
 +
.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
 +
.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
 +
.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
 +
.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
 +
.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#a7170f!important}
 +
.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
 +
.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
 +
.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
 +
.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
 +
.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
 +
.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#bbb!important}
 +
.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
 +
.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
 +
.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
 +
.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
 +
.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
 +
.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
 +
.w3-text-red,.w3-hover-text-red:hover{color:#a7170f!important}
 +
.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
 +
.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
 +
.w3-text-yellow,.w3-hover-text-yellow:hover{color:#ffeb3b!important}
 +
.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
 +
.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
 +
.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
 +
.w3-text-amber{color:#ffc107!important}
 +
.w3-text-aqua{color:#00ffff!important}
 +
.w3-text-light-blue{color:#87CEEB!important}
 +
.w3-text-brown{color:#795548!important}
 +
.w3-text-cyan{color:#00bcd4!important}
 +
.w3-text-blue-grey,.w3-text-blue-gray{color:#607d8b!important}
 +
.w3-text-light-green{color:#8bc34a!important}
 +
.w3-text-indigo{color:#3f51b5!important}
 +
.w3-text-khaki{color:#b4aa50!important}
 +
.w3-text-lime{color:#cddc39!important}
 +
.w3-text-orange{color:#ff9800!important}
 +
.w3-text-deep-orange{color:#ff5722!important}
 +
.w3-text-pink{color:#e91e63!important}
 +
.w3-text-purple{color:#9c27b0!important}
 +
.w3-text-deep-purple{color:#673ab7!important}
 +
.w3-text-sand{color:#fdf5e6!important}
 +
.w3-text-teal{color:#009688!important}
 +
.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
 +
.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
 +
.w3-border-red,.w3-hover-border-red:hover{border-color:#a7170f!important}
 +
.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
 +
.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
 +
.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
 +
.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
 +
.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
 +
.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#bbb!important}
  
−
    <ul id="normal" class="dropmenu">
+
.dropmenu{
−
    <li><a href="#project" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Project</a>
+
      *zoom: 1;
−
    <ul>
+
      list-style-type: none;
−
     <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">1</a></li>
+
      width: 960px;
−
    </ul>
+
      margin: 50px auto 30px;
−
    </li>
+
      padding-left: 50px;
−
    </ul>
+
  }
 +
     .dropmenu:before, .dropmenu:after{
 +
          content: "";
 +
          display: table;
 +
  }
 +
  .dropmenu:after{
 +
        clear: both;
 +
  }
 +
  .dropmenu li{
 +
        position: relative;
 +
        width: 20%;
 +
        float: left;
 +
        margin: 0;
 +
        padding: 0px;
 +
        text-align: center;
 +
  }
 +
<!-- padding: 20px-->
  
−
    <ul id="normal" class="dropmenu">
+
  .dropmenu li a{
−
    <li><a href="#modeling" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Modeling</a>
+
        display: block;
−
    <ul>
+
        margin: 0;
−
    <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">1</a></li>
+
        padding: 10px 0 10px;
−
    </ul>
+
        background: #a7170f;
−
    </li>
+
        color: #ffffff;
−
    </ul>
+
        font-size: 40px;
 +
        line-height: 1;
 +
        text-decoration: none;
 +
  }
 +
.dropmenu li ul{
 +
          list-style: none;
 +
          position: absolute;
 +
          z-index: 9999;
 +
          top: 100%;
 +
          left: 0;
 +
          margin: 0;
 +
          padding: 0;
 +
  }
 +
  .dropmenu li ul li{
 +
          width: 100%;
 +
  }
 +
  .dropmenu li ul li a{
 +
        padding: 13px 15px;
 +
        border-top: 1px solid #a7170f;
 +
        background: #a7170f;
 +
        text-align: left;
 +
  }
 +
  .dropmenu li:hover > a{
 +
        background: #a7170f;
 +
  }
 +
  .dropmenu li a:hover{
 +
        background: #a7170f;
 +
  }
  
−
    <ul id="normal" class="dropmenu">
+
#normal li ul{
−
    <li><a href="#modeling" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Modeling</a>
+
        display: none;
−
    <ul>
+
  }
−
    <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">1</a></li>
+
  #normal li:hover ul{
−
    </ul>
+
        display: block;
−
    </li>
+
  }
−
    </ul>
+
  
−
    <ul id="normal" class="dropmenu">
 
−
    <li><a href="#modeling" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Modeling</a>
 
−
    <ul>
 
−
    <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">1</a></li>
 
−
    </ul>
 
−
    </li>
 
−
    </ul>
 
  
−
    <ul id="normal" class="dropmenu">
+
</style>
−
    <li><a href="#modeling" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Modeling</a>
+
−
    <ul>
+
−
    <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">1</a></li>
+
−
    </ul>
+
−
    </li>
+
−
    </ul>
+
−
 
+
−
    <ul id="normal" class="dropmenu">
+
−
    <li><a href="#modeling" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">Modeling</a>
+
−
    <ul>
+
−
    <li><a href="#overview" onclick="w3_close()" class="w3-bar-item w3-button w3-hover-white">1</a></li>
+
−
    </ul>
+
−
    </li>
+
−
    </ul>
+
−
 
+
−
 
+
−
  </div>
+
−
</nav>
+
−
 
+
−
<!-- Top menu on small screens -->
+
−
<header class="w3-container w3-top w3-hide-large w3-red w3-xlarge w3-padding">
+
−
  <a href="javascript:void(0)" class="w3-button w3-red w3-margin-right" onclick="w3_open()"><img src="http://www.adultb2b.biz/wp-content/themes/adultb2b%20-%20new/assets/images/menuBtn.png" style="width: 30px"></a>
+
−
  <span style="padding-top: 5px">iGEM Tokyo Tech</span>
+
−
</header>
+
−
 
+
−
<!-- Overlay effect when opening sidebar on small screens -->
+
−
<div class="w3-overlay w3-hide-large" onclick="w3_close()" style="cursor:pointer" title="close side menu" id="myOverlay"></div>
+
−
 
+
−
<!-- PAGE CONTENT! -->
+
−
<div class="w3-main" style="margin-left:340px;margin-right:40px">
+
−
 
+
−
  <div class="w3-container" id="contact" style="margin-top:30px">
+
−
    <img src="https://static.igem.org/mediawiki/2017/2/2c/T--TokyoTech--logo10011204.jpg" alt="John" style="width:100%">
+
−
  </div>
+
−
 
+
−
  <!-- Overview -->
+
−
  <div class="w3-container" id="overview" style="margin-top:20px">
+
−
    <h1 class="w3-xxxlarge w3-text-red" style="padding-bottom: 10px;padding-top: 10px"><b>Overview</b></h1>
+
−
    <hr style="width:50px;border:5px solid red" class="w3-round">
+
−
    <p style="font-family: Poppins;font-size: 16px">Gene therapy has been expected in cancer therapy for years. An interesting therapy for cancer using anaerobic bacteria as a carrier has been developed, but after the anaerobic cancer region is diminished, the bacteria cannot stay there anymore. If anti-cancer bacteria can stay in affected area, they promptly respond to cancer recurrence. Co-existence of bacteria and host cells should be quite difficult in our body or human cell culture systems, because bacteria grow so fast. It is important to control bacterial proliferation in them. So, we try to establish a new living system that human cells control the population of bacteria by engineering the both cells by creating two signaling pathways of 1) Bacteria-Mammals and 2) Bacteria-Plants. We expect that this system will lead to a new experimental approach and a new medical therapy. Moreover, we imagine about "A boundary between cellular groups and living organisms" with general public.
+
−
    </p>
+
−
  </div>
+
−
 
+
−
<img src="https://static.igem.org/mediawiki/2017/d/da/T--TokyoTech--ribbon_hr.png" alt="John" style="width:95%">
+
−
 
+
−
 
+
−
<!-- Project -->
+
−
    <div class="w3-container" id="project" style="margin-top:20px">
+
−
    <h1 class="w3-xxxlarge w3-text-red" style="padding-bottom: 10px;padding-top: 10px"><b>Project  </b><a href="https://2017.igem.org/Team:TokyoTech/Project"><button class="w3-button w3-red w3-padding-large w3-hover-black" style="font-size: 25px">Read More</button></a></h1>
+
−
    <hr style="width:50px;border:5px solid red" class="w3-round">
+
−
    <p style="font-family: Poppins;font-size: 16px">Gene therapy has been expected in cancer therapy for years. An interesting therapy for cancer using anaerobic bacteria as a carrier has been developed, but after the anaerobic cancer region is diminished, the bacteria cannot stay there anymore. If anti-cancer bacteria can stay in affected area, they promptly respond to cancer recurrence. Co-existence of bacteria and host cells should be quite difficult in our body or human cell culture systems, because bacteria grow so fast. It is important to control bacterial proliferation in them. So, we try to establish a new living system that human cells control the population of bacteria by engineering the both cells by creating two signaling pathways of 1) Bacteria-Mammals and 2) Bacteria-Plants. We expect that this system will lead to a new experimental approach and a new medical therapy. Moreover, we imagine about "A boundary between cellular groups and living organisms" with general public.
+
−
    </p>
+
−
  </div>
+
−
 
+
−
  <hr>
+
−
 
+
−
  <!-- Modeling -->
+
−
    <div class="w3-container" id="modeling" style="margin-top:20px">
+
−
    <h1 class="w3-xxxlarge w3-text-red" style="padding-bottom: 10px;padding-top: 10px"><b>Modeling  </b><a href="https://2017.igem.org/Team:TokyoTech/Modeling"><button class="w3-button w3-red w3-padding-large w3-hover-black" style="font-size: 25px">Read More</button></a></h1>
+
−
    <hr style="width:50px;border:5px solid red" class="w3-round">
+
−
    <p style="font-family: Poppins;font-size: 16px">Gene therapy has been expected in cancer therapy for years. An interesting therapy for cancer using anaerobic bacteria as a carrier has been developed, but after the anaerobic cancer region is diminished, the bacteria cannot stay there anymore. If anti-cancer bacteria can stay in affected area, they promptly respond to cancer recurrence. Co-existence of bacteria and host cells should be quite difficult in our body or human cell culture systems, because bacteria grow so fast. It is important to control bacterial proliferation in them. So, we try to establish a new living system that human cells control the population of bacteria by engineering the both cells by creating two signaling pathways of 1) Bacteria-Mammals and 2) Bacteria-Plants. We expect that this system will lead to a new experimental approach and a new medical therapy. Moreover, we imagine about "A boundary between cellular groups and living organisms" with general public.
+
−
    </p>
+
−
  </div>
+
−
 
+
−
  <hr>
+
−
 
+
−
  <!-- Human Practice -->
+
−
  <div class="w3-container" id="hp" style="margin-top:20px">
+
−
    <h1 class="w3-xxxlarge w3-text-red" style="padding-bottom: 10px;padding-top: 10px"><b>Human Practices  </b><a href="https://2017.igem.org/Team:TokyoTech/Human_Practices"><button class="w3-button w3-red w3-padding-large w3-hover-black" style="font-size: 25px">Read More</button></h1>
+
−
    <hr style="width:50px;border:5px solid red" class="w3-round">
+
−
    <p style="font-family: Poppins;font-size: 16px">Gene therapy has been expected in cancer therapy for years. An interesting therapy for cancer using anaerobic bacteria as a carrier has been developed, but after the anaerobic cancer region is diminished, the bacteria cannot stay there anymore. If anti-cancer bacteria can stay in affected area, they promptly respond to cancer recurrence. Co-existence of bacteria and host cells should be quite difficult in our body or human cell culture systems, because bacteria grow so fast. It is important to control bacterial proliferation in them. So, we try to establish a new living system that human cells control the population of bacteria by engineering the both cells by creating two signaling pathways of 1) Bacteria-Mammals and 2) Bacteria-Plants. We expect that this system will lead to a new experimental approach and a new medical therapy. Moreover, we imagine about "A boundary between cellular groups and living organisms" with general public.
+
−
    </p>
+
−
  </div>
+
−
 
+
−
  <hr>
+
−
 
+
−
  <!-- Notebook -->
+
−
    <div class="w3-container" id="notebook" style="margin-top:20px">
+
−
    <h1 class="w3-xxxlarge w3-text-red" style="padding-bottom: 10px;padding-top: 10px"><b>Notebook  </b><a href="https://2017.igem.org/Team:TokyoTech/Notebook"><button class="w3-button w3-red w3-padding-large w3-hover-black" style="font-size: 25px">Read More</button></a></h1>
+
−
    <hr style="width:50px;border:5px solid red" class="w3-round">
+
−
    <p style="font-family: Poppins;font-size: 16px">Gene therapy has been expected in cancer therapy for years. An interesting therapy for cancer using anaerobic bacteria as a carrier has been developed, but after the anaerobic cancer region is diminished, the bacteria cannot stay there anymore. If anti-cancer bacteria can stay in affected area, they promptly respond to cancer recurrence. Co-existence of bacteria and host cells should be quite difficult in our body or human cell culture systems, because bacteria grow so fast. It is important to control bacterial proliferation in them. So, we try to establish a new living system that human cells control the population of bacteria by engineering the both cells by creating two signaling pathways of 1) Bacteria-Mammals and 2) Bacteria-Plants. We expect that this system will lead to a new experimental approach and a new medical therapy. Moreover, we imagine about "A boundary between cellular groups and living organisms" with general public.
+
−
    </p>
+
−
  </div>
+
−
 
+
−
  <hr>
+
−
 
+
−
  <!-- Team -->
+
−
    <div class="w3-container" id="team" style="margin-top:20px">
+
−
    <h1 class="w3-xxxlarge w3-text-red" style="padding-bottom: 10px;padding-top: 10px"><b>Team  </b><a href="https://2017.igem.org/Team:TokyoTech/Team"><button class="w3-button w3-red w3-padding-large w3-hover-black" style="font-size: 25px">Read More</button></a></h1>
+
−
    <hr style="width:50px;border:5px solid red" class="w3-round">
+
−
    <p style="font-family: Poppins;font-size: 16px">Gene therapy has been expected in cancer therapy for years. An interesting therapy for cancer using anaerobic bacteria as a carrier has been developed, but after the anaerobic cancer region is diminished, the bacteria cannot stay there anymore. If anti-cancer bacteria can stay in affected area, they promptly respond to cancer recurrence. Co-existence of bacteria and host cells should be quite difficult in our body or human cell culture systems, because bacteria grow so fast. It is important to control bacterial proliferation in them. So, we try to establish a new living system that human cells control the population of bacteria by engineering the both cells by creating two signaling pathways of 1) Bacteria-Mammals and 2) Bacteria-Plants. We expect that this system will lead to a new experimental approach and a new medical therapy. Moreover, we imagine about "A boundary between cellular groups and living organisms" with general public.
+
−
    </p>
+
−
  </div>
+
−
 
+
−
  <hr>
+
−
 
+
−
<!-- PAGE CONTENT! -->
+
−
 
+
−
  <div class="w3-container" id="contact" style="margin-top:75px">
+
−
    <img src="https://static.igem.org/mediawiki/2017/2/24/T-TokyoTech--coculture_system.jpg" alt="John" style="width:100%">
+
−
  </div>
+
−
 
+
−
 
+
−
  <!-- Sponsers -->
+
−
  <div class="w3-container" id="sponsers" style="margin-top:75px;">
+
−
    <h1 class="w3-xxxlarge w3-text-red" style="padding-top: 10px;padding-bottom: 10px"><b>Sponsers</b></h1>
+
−
    <hr style="width:50px;border:5px solid red" class="w3-round">
+
−
  </div>
+
−
 
+
−
  <div class="w3-row-padding">
+
−
    <div class="w3-col m4 w3-margin-bottom">
+
−
      <div class="w3-light-grey">
+
−
        <img src="https://static.igem.org/mediawiki/2016/4/47/Tokyo_Tech_JASSO.gif" style="width:100%">
+
−
        <div class="w3-container">
+
−
          <h3>JASSO</h3>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
−
    <div class="w3-col m4 w3-margin-bottom">
+
−
      <div class="w3-light-grey">
+
−
        <img src="http://kuramae-old.tokyo.r-cms.jp/files/user/common/p_images/head_logo.gif" style="width:100%">
+
−
        <div class="w3-container">
+
−
          <h3>Kuramae Kougyoukai</h3>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
−
    <div class="w3-col m4 w3-margin-bottom">
+
−
      <div class="w3-light-grey">
+
−
        <img src="http://www.vmcs.ucdavis.edu/idt/images/idt-logo.jpg" style="width:100%">
+
−
        <div class="w3-container">
+
−
          <h3>IDT</h3>
+
−
        </div>
+
−
      </div>
+
−
    </div>
+
−
  </div>
+
−
 
+
−
<!-- End page content -->
+
−
</div>
+
−
 
+
−
<!-- W3.CSS Container -->
+
−
<div class="w3-light-grey w3-container w3-padding-32" style="margin-top:75px;padding-right:58px"><p class="w3-right">Hajime Fujita:  <a href="96haji.me" title="W3.CSS" target="_blank" class="w3-hover-opacity">All Rights Reserved</a></p></div>
+
−
 
+
−
<script>
+
−
// Script to open and close sidebar
+
−
function w3_open() {
+
−
    document.getElementById("mySidebar").style.display = "block";
+
−
    document.getElementById("myOverlay").style.display = "block";
+
−
}
+
−
+
−
function w3_close() {
+
−
    document.getElementById("mySidebar").style.display = "none";
+
−
    document.getElementById("myOverlay").style.display = "none";
+
−
}
+
−
 
+
−
// Modal Image Gallery
+
−
function onClick(element) {
+
−
  document.getElementById("img01").src = element.src;
+
−
  document.getElementById("modal01").style.display = "block";
+
−
  var captionText = document.getElementById("caption");
+
−
  captionText.innerHTML = element.alt;
+
−
}
+
−
</script>
+
  
−
</body>
 
 
</html>
 
</html>

Revision as of 07:40, 28 October 2017