Difference between revisions of "Team:BostonU/Home"

Line 1: Line 1:
−
<html>
+
 
 +
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 +
        "http://www.w3.org/TR/html4/strict.dtd">
 +
<html lang="en">
 
<head>
 
<head>
 +
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 +
    <title>Simple 2 column CSS layout, final layout | 456 Berea Street</title>
 +
    <meta name="description" content="How to create a simple two column CSS layout with full width header and footer.">
 +
    <meta name="copyright" content="Copyright (c) 2004 Roger Johansson">
 +
    <meta name="author" content="Roger Johansson">
 +
    <style type="text/css" media="screen, print, projection">
 +
          body,
 +
          html {
 +
              margin:0;
 +
              padding:0;
 +
              color:#000;
  
−
<title>Boston U</title>
+
        background-image: url("https://static.igem.org/mediawiki/2015/8/89/Boston.jpg");
 +
          background-color: #cccccc;
 +
          }
 +
          #wrap {
 +
              width:100%;
 +
              margin:0 auto;
  
−
<style type="text/css">
+
          }
  
−
#divhome {
+
          h1 {
−
  background-color: transparent;
+
              margin:0;
−
  background-image: url("https://static.igem.org/mediawiki/2015/8/89/Boston.jpg");
+
          }
−
  background-size: cover;
+
          #nav {
−
    width:100%;
+
              padding:5px 10px;
−
  height:100%;
+
−
+
−
}
+
−
#divhomepic {
+
−
  background-color: transparent;
+
−
  background-image: url("https://static.igem.org/mediawiki/2015/6/6d/Bostonhomepic.PNG");
+
−
  background-size: cover;
+
−
  width:30%;
+
−
  height:30%;
+
−
 
+
−
+
−
}
+
  
−
</style>
+
          }
 +
          #nav ul {
 +
              margin:0;
 +
              padding:0;
 +
              list-style:none;
 +
          }
 +
          #nav li {
 +
              display:inline;
 +
              margin:0;
 +
              padding:0;
 +
          }
 +
              #main {
 +
                  float: left;
 +
                  max-width: 100%;
 +
                  padding: 10px;
 +
 
 +
              }
 +
              #im {
 +
                  text-align:center;
 +
                  position: absolute;
 +
                  top: 0;
 +
                  left: 0;
 +
                  right: 0;
 +
                  bottom: 0;
 +
                  background-image: url("https://static.igem.org/mediawiki/2015/a/ad/Bostonhomepicf.PNG");
 +
                  background-repeat: no-repeat;
 +
                  background-size: contain;
 +
              }
 +
 
 +
 
 +
          #footer {
 +
              clear:both;
 +
              padding:5px 10px;
 +
 
 +
          }
 +
          #footer p {
 +
              margin:0;
 +
          }
 +
          * html #footer {
 +
              height:1px;
 +
          }
 +
    </style>
 +
 
 +
    <style type="text/css">
 +
        @import url(http://fonts.googleapis.com/css?family=PT+Serif|Open+Sans:300italic,400,300);
 +
 
 +
        html, body {
 +
            max-width: 100%;
 +
            overflow-x: hidden;
 +
        }
 +
 
 +
        body {
 +
            background: url(https://static.igem.org/mediawiki/2015/8/89/Boston.jpg) no-repeat center center fixed;
 +
            -webkit-background-size: cover;
 +
            -moz-background-size: cover;
 +
            -o-background-size: cover;
 +
            background-size: cover;
 +
            background-position: center top;
 +
            margin: 0px;
 +
            padding: 0;
 +
            border: 0;
 +
            vertical-align: baseline;
 +
            font-family: 'Open Sans', 'helvetica', sans-serif;
 +
            font-size: 11px;
 +
            font-weight: 300;
 +
        }
 +
 
 +
        #content {
 +
            border: none;
 +
            width: 100%;
 +
            margin: 0;
 +
            padding: 0;
 +
            background: none;
 +
        }
 +
 
 +
        #catlinks {
 +
            display: none;
 +
        }
 +
 
 +
        #contentSub {
 +
            display: none;
 +
        }
 +
 
 +
        #menubar {
 +
            width: auto;
 +
            margin-top: 1%;
 +
        }
 +
 
 +
        .left-menu:hover {
 +
            background-color: transparent;
 +
        }
 +
 
 +
        #menubar li a {
 +
            background-color: transparent;
 +
        }
 +
 
 +
        #menubar:hover {
 +
            color: gray;
 +
        }
 +
 
 +
        #menubar li a {
 +
            color: gray;
 +
        }
 +
 
 +
        #menubar:hover li a {
 +
            color: #CCC;
 +
        }
 +
 
 +
        #menubar.left-menu.noprint ul li:last-child {
 +
            display: none;
 +
        }
 +
 
 +
        #search-controls {
 +
            display: none;
 +
        }
 +
 
 +
        #top-section {
 +
            height: 0px;
 +
            width: 100%;
 +
            border: none;
 +
        }
 +
 
 +
        #footer-box {
 +
            border: none;
 +
            display: none;
 +
            width: 100%;
 +
        }
 +
 
 +
        #p-logo {
 +
            display: none;
 +
        }
 +
 
 +
        .firstHeading {
 +
            display: none;
 +
        }
 +
 
 +
        #bodyContent p {
 +
            display: none;
 +
        }
 +
 
 +
        html, div, span, applet, object, iframe,
 +
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
 +
        a, abbr, acronym, address, big, cite, code,
 +
        del, dfn, em, img, ins, kbd, q, s, samp,
 +
        small, strike, strong, sub, sup, tt, var,
 +
        b, u, i, center,
 +
        dl, dt, dd, ol, ul, li,
 +
        fieldset, form, label, legend,
 +
        table, caption, tbody, tfoot, thead, tr, th, td,
 +
        article, aside, canvas, details, embed,
 +
        figure, figcaption, footer, header, hgroup,
 +
        menu, nav, output, ruby, section, summary,
 +
        time, mark, audio, video {
 +
            margin: 0;
 +
            padding: 0;
 +
            border: 0;
 +
            font-size: 100%;
 +
            font: inherit;
 +
            vertical-align: baseline;
 +
        }
 +
 
 +
        #top-section {
 +
            width: 965px;
 +
            height: 0;
 +
            margin: 0 auto;
 +
            padding: 0;
 +
            border: none;
 +
        }
 +
 
 +
        .left-menu:hover {
 +
            background-color: transparent;
 +
        }
 +
 
 +
        #menubar li a {
 +
            background-color: transparent;
 +
        }
 +
 
 +
        .outer {
 +
            width: 100%;
 +
            height: 100%;
 +
            padding-top: 7%;
 +
        }
 +
 
 +
        .inner {
 +
            position: relative;
 +
            width: 100%;
 +
        }
 +
 
 +
        img.supercoil {
 +
            width: 65%;
 +
            display: block;
 +
            margin-left: auto;
 +
            margin-right: auto;
 +
        }
 +
 
 +
        .Heading {
 +
            position: absolute;
 +
            display: block;
 +
        }
 +
 
 +
        img.zero {
 +
            opacity: 0.9;
 +
        }
 +
 
 +
            img.zero:hover {
 +
                opacity: 1;
 +
            }
 +
 
 +
        img.one {
 +
            opacity: 0.9;
 +
        }
 +
 
 +
            img.one:hover {
 +
                opacity: 1;
 +
            }
 +
 
 +
        img.two {
 +
            opacity: 0.9;
 +
        }
 +
 
 +
            img.two:hover {
 +
                opacity: 1;
 +
            }
 +
 
 +
        img.three {
 +
            opacity: 0.9;
 +
        }
 +
 
 +
            img.three:hover {
 +
                opacity: 1;
 +
            }
 +
    </style>
 +
 
 +
    <script type="text/javascript">
 +
        function iconleft(x) {
 +
            x.style.left="6%";
 +
        }
 +
        function iconnormal(x) {
 +
            x.style.left="9%";
 +
        }
 +
        function DCMationbig(x) {
 +
            x.style.height="12.5%";
 +
            x.style.width="12.5%";
 +
            document.getElementById('DCMationblue').style.opacity = "1";
 +
        }
 +
        function DCMationnormal(x) {
 +
            x.style.height="11%";
 +
            x.style.width="11%";
 +
        }
 +
        function Achievementsbig(x) {
 +
            x.style.height="12%";
 +
            x.style.width="12%";
 +
            document.getElementById('achievementsblue').style.opacity = "1";
 +
        }
 +
        function Achievementsnormal(x) {
 +
            x.style.height="11.1%";
 +
            x.style.width="11.1%";
 +
        }
 +
        function Modellingbig(x) {
 +
            x.style.height="9%";
 +
            x.style.width="9%";
 +
            document.getElementById('Modellingblue').style.opacity = "1";
 +
        }
 +
        function Modellingnormal(x) {
 +
            x.style.height="8.5%";
 +
            x.style.width="8.5%";
 +
        }
 +
        function Policybig(x) {
 +
            x.style.height="7.9%";
 +
            x.style.width="7.9%";
 +
            document.getElementById('Policyblue').style.opacity = "1";
 +
        }
 +
        function Policynormal(x) {
 +
            x.style.height="7.3%";
 +
            x.style.width="7.3%";
 +
        }
 +
        function iGEMcommbig(x) {
 +
            x.style.height="9.4%";
 +
            x.style.width="9.4%";
 +
            document.getElementById('iGEMcommblue').style.opacity = "1";
 +
        }
 +
        function iGEMcommnormal(x) {
 +
            x.style.height="8.8%";
 +
            x.style.width="8.8%";
 +
        }
 +
        function Interlabbig(x) {
 +
            x.style.height="7%";
 +
            x.style.width="7%";
 +
            document.getElementById('interlabblue').style.opacity = "1";
 +
        }
 +
        function Interlabnormal(x) {
 +
            x.style.height="6.5%";
 +
            x.style.width="6.5%";
 +
        }
 +
        function Safetybig(x) {
 +
            x.style.height="5.6%";
 +
            x.style.width="5.6%";
 +
            document.getElementById('Safetyblue').style.opacity = "1";
 +
        }
 +
        function Safetynormal(x) {
 +
            x.style.height="5%";
 +
            x.style.width="5%";
 +
        }
 +
        function Teambig(x) {
 +
            x.style.height="4.8%";
 +
            x.style.width="4.8%";
 +
            document.getElementById('Teamblue').style.opacity = "1";
 +
        }
 +
        function Teamnormal(x) {
 +
            x.style.height="4.4%";
 +
            x.style.width="4.4%";
 +
        }
 +
        function Partsbig(x) {
 +
            x.style.height="41%";
 +
            x.style.width="41%";
 +
        }
 +
        function Partsnormal(x) {
 +
            x.style.height="40%";
 +
            x.style.width="40%";
 +
        }
 +
        function Resultsbig(x) {
 +
            x.style.height="27%";
 +
            x.style.width="27%";
 +
        }
 +
        function Resultsnormal(x) {
 +
            x.style.height="26%";
 +
            x.style.width="26%";
 +
        }
 +
        function Medalsbig(x) {
 +
            x.style.height="35%";
 +
            x.style.width="35%";
 +
        }
 +
        function Medalsnormal(x) {
 +
            x.style.height="33.5%";
 +
            x.style.width="33.5%";
 +
        }
 +
        function IMeasurementbig(x) {
 +
            x.style.height="22.5%";
 +
            x.style.width="22.5%";
 +
        }
 +
        function IMeasurementnormal(x) {
 +
            x.style.height="20.5%";
 +
            x.style.width="20.5%";
 +
        }
 +
        function IResultsbig(x) {
 +
            x.style.height="36%";
 +
            x.style.width="36%";
 +
        }
 +
        function IResultsnormal(x) {
 +
            x.style.height="34%";
 +
            x.style.width="34%";
 +
        }
 +
        function Subheadingbig(x) {
 +
            x.style.height="40%";
 +
            x.style.width="40%";
 +
        }
 +
        function Subheadingnormal(x) {
 +
            x.style.height="38%";
 +
            x.style.width="38%";
 +
        }
 +
        function Eventsbig(x) {
 +
            x.style.height="31.5%";
 +
            x.style.width="31.5%";
 +
        }
 +
        function Eventsnormal(x) {
 +
            x.style.height="29.5%";
 +
            x.style.width="29.5%";
 +
        }
 +
        function iGEMEuropebig(x) {
 +
            x.style.height="19%";
 +
            x.style.width="19%";
 +
        }
 +
        function iGEMEuropenormal(x) {
 +
            x.style.height="17%";
 +
            x.style.width="17%";
 +
        }
 +
        function Collabbig(x) {
 +
            x.style.height="48%";
 +
            x.style.width="48%";
 +
        }
 +
        function Collabnormal(x) {
 +
            x.style.height="46%";
 +
            x.style.width="46%";
 +
        }
 +
        function DCMation() {
 +
            document.getElementById('DCMationwrap').style.display = "block";
 +
        }
 +
        function DCMationHide(x) {
 +
            document.getElementById('DCMationwrap').style.display = "none";
 +
        }
 +
        function Achievements() {
 +
            document.getElementById('Achievementswrap').style.display = "block";
 +
        }
 +
        function AchievementsHide(x) {
 +
            document.getElementById('Achievementswrap').style.display = "none";
 +
        }
 +
        function Interlab() {
 +
            document.getElementById('Interlabwrap').style.display = "block";
 +
        }
 +
        function InterlabHide(x) {
 +
            document.getElementById('Interlabwrap').style.display = "none";
 +
        }
 +
        function iGEMcomm() {
 +
            document.getElementById('iGEMcommwrap').style.display = "block";
 +
        }
 +
        function iGEMcommHide(x) {
 +
            document.getElementById('iGEMcommwrap').style.display = "none";
 +
        }
 +
        $(document).ready(function(){
 +
            $("#DCMationheading").mouseleave(function(){
 +
                $("#DCMationblue").animate({opacity:'0'});
 +
            });
 +
            $("#achievementsheading").mouseleave(function(){
 +
                $("#achievementsblue").animate({opacity:'0'});
 +
            });
 +
            $("#Modellingheading").mouseleave(function(){
 +
                $("#Modellingblue").animate({opacity:'0'});
 +
            });
 +
            $("#Policyheading").mouseleave(function(){
 +
                $("#Policyblue").animate({opacity:'0'});
 +
            });
 +
            $("#iGEMcommheading").mouseleave(function(){
 +
                $("#iGEMcommblue").animate({opacity:'0'});
 +
            });
 +
            $("#interlabheading").mouseleave(function(){
 +
                $("#interlabblue").animate({opacity:'0'});
 +
            });
 +
            $("#Safetyheading").mouseleave(function(){
 +
                $("#Safetyblue").animate({opacity:'0'});
 +
            });
 +
            $("#Teamheading").mouseleave(function(){
 +
                $("#Teamblue").animate({opacity:'0'});
 +
            });
 +
            $("#arrowr").click(function(){
 +
                $("#grey").animate({right:'-13%'}, "fast");
 +
            });
 +
            $("#arrowl").click(function(){
 +
                $("#grey").animate({right:'-9%'}, "fast");
 +
            });
 +
            $("#split").click(function(){
 +
                $("#right").animate({left:'85%'});
 +
                $("#left").animate({left:'3.1%'});
 +
                $("#abstract").animate({width:'69.9%', left:'15.1%'});
 +
            });
 +
            $("#openabstract").click(function(){
 +
                $("#right").animate({left:'85%'});
 +
                $("#left").animate({left:'3.1%'});
 +
                $("#abstract").animate({width:'69.9%', left:'15.1%'});
 +
            });
 +
            $("#x").click(function(){
 +
                $("#right").animate({left:'50%'});
 +
                $("#left").animate({left:'38.1%'});
 +
                $("#abstract").animate({width:'0%', left:'50%'});
 +
            });
 +
            $("#openmenu1").click(function(){
 +
                $("#right").animate({left:'85%'});
 +
                $("#left").animate({left:'3.1%'});
 +
                $("#abstract").animate({width:'69.9%', left:'15.1%'});
 +
            });
 +
            $("#openmenu2").click(function(){
 +
                $("#right").animate({left:'85%'});
 +
                $("#left").animate({left:'3.1%'});
 +
                $("#abstract").animate({width:'69.9%', left:'15.1%'});
 +
            });
 +
            $("#openmenu3").click(function(){
 +
                $("#right").animate({left:'85%'});
 +
                $("#left").animate({left:'3.1%'});
 +
                $("#abstract").animate({width:'69.9%', left:'15.1%'});
 +
            });
 +
            $("#achievementsheading").click(function(){
 +
                $("#Achievementspopup").animate({width:'26%', left:'37%', marginTop:'12.5%'}, "fast");
 +
                $("#Achievementswrap").animate({backgroundColor: 'rgba(0,0,0,0.3)'});
 +
            });
 +
            $("#Achievementswrap").click(function(){
 +
                $("#Achievementspopup").animate({width:'0%', left:'59%', marginTop:'38%'}, "fast");
 +
            });
 +
            $("#DCMationheading").click(function(){
 +
                $("#DCMationpopup").animate({width:'26%', left:'37%', marginTop:'12.5%'}, "fast");
 +
                $("#DCMationwrap").animate({backgroundColor: 'rgba(0,0,0,0.3)'});
 +
            });
 +
            $("#DCMationwrap").click(function(){
 +
                $("#DCMationpopup").animate({width:'0%', left:'39%', marginTop:'38%'}, "fast");
 +
            });
 +
            $("#interlabheading").click(function(){
 +
                $("#Interlabpopup").animate({width:'26%', left:'37%', marginTop:'12.5%'}, "fast");
 +
                $("#Interlabwrap").animate({backgroundColor: 'rgba(0,0,0,0.3)'});
 +
            });
 +
            $("#Interlabwrap").click(function(){
 +
                $("#Interlabpopup").animate({width:'0%', left:'72%', marginTop:'19%'}, "fast");
 +
            });
 +
            $("#iGEMcommheading").click(function(){
 +
                $("#iGEMcommpopup").animate({width:'26%', left:'37%', marginTop:'12.5%'}, "fast");
 +
                $("#iGEMcommwrap").animate({backgroundColor: 'rgba(0,0,0,0.3)'});
 +
            });
 +
            $("#iGEMcommwrap").click(function(){
 +
                $("#iGEMcommpopup").animate({width:'0%', left:'25%', marginTop:'19%'}, "fast");
 +
            });
 +
            $("#next1").click(function(){
 +
                $("#menu1").css({display:'none'});
 +
                $("#menu2").css({display:'inline'});
 +
            });
 +
            $("#next2").click(function(){
 +
                $("#menu2").css({display:'none'});
 +
                $("#menu3").css({display:'inline'});
 +
            });
 +
            $("#back1").click(function(){
 +
                $("#menu2").css({display:'none'});
 +
                $("#menu1").css({display:'inline'});
 +
            });
 +
            $("#back2").click(function(){
 +
                $("#menu3").css({display:'none'});
 +
                $("#menu2").css({display:'inline'});
 +
            });
 +
        });
 +
        function hideabstract(x) {
 +
            document.getElementById('abstract2').style.display = "none";
 +
            document.getElementById('menu1').style.display = "none";
 +
            document.getElementById('menu2').style.display = "none";
 +
            document.getElementById('menu3').style.display = "none";
 +
            document.getElementById('x').style.display = "none";
 +
        }
 +
        function showabstract(x) {
 +
            document.getElementById('abstract2').style.display = "inline";
 +
            document.getElementById('x').style.display = "inline";
 +
            document.getElementById('DCMationwrap').style.display = "none";
 +
        }
 +
        function showmenu1(x) {
 +
            document.getElementById('menu1').style.display = "inline";
 +
            document.getElementById('x').style.display = "inline";
 +
            document.getElementById('DCMationwrap').style.display = "none";
 +
        }
 +
        function showmenu2(x) {
 +
            document.getElementById('menu2').style.display = "inline";
 +
            document.getElementById('x').style.display = "inline";
 +
            document.getElementById('DCMationwrap').style.display = "none";
 +
        }
 +
        function showmenu3(x) {
 +
            document.getElementById('menu3').style.display = "inline";
 +
            document.getElementById('x').style.display = "inline";
 +
            document.getElementById('DCMationwrap').style.display = "none";
 +
        }
 +
    </script>
  
 
</head>
 
</head>
  
 
<body>
 
<body>
 +
<div id="wrap">
 +
 +
<div id="nav">
 +
<ul>
 +
<li><a href="/">Option 1</a></li>
 +
<li><a href="/">Option 2</a></li>
 +
<li><a href="/">Option 3</a></li>
 +
<li><a href="/">Option 4</a></li>
 +
<li><a href="/">Option 5</a></li>
 +
</ul>
 +
</div>
 +
<div id="main">
 +
        <div class="inner">
 +
            <div style="position: relative; width:65% left: 0; top: 0;">
 +
                <img id="Teamblue" src="https://static.igem.org/mediawiki/2014/3/35/OxigemTeamblue.png" style="opacity: 0; position: absolute; width: 14.679%; left: 50%; top: 3.35%;">
 +
                <img id="Safetyblue" src="https://static.igem.org/mediawiki/2014/8/84/OxigemSafetyblue.png" style="opacity: 0; position: absolute; width: 14.9668%; left: 35.3%; top: 1.2%;">
 +
                <img id="iGEMcommblue" src="https://static.igem.org/mediawiki/2014/c/cb/OxigemIGEMcommblue.png" style="opacity:0;position:absolute; width:17.41328%; left: 18.7%; top: 15%;">
 +
                <img id="interlabblue" src="https://static.igem.org/mediawiki/2014/2/24/OxigemInterlabblue.png" style="opacity: 0; position: absolute; width: 16.5498%; left: 64.05%; top: 14.3%;">
 +
                <img src="https://static.igem.org/mediawiki/2014/9/97/OxigemUp.png" style="position: relative; width:65%; left: 17%; top: 0;">
  
 +
                <img id="left" src="https://static.igem.org/mediawiki/2015/2/2a/Bostonlogoleft.png" style="position: absolute; width: 12%; top: 18%; left: 38.1%;">
 +
                <img id="right" src="https://static.igem.org/mediawiki/2015/7/7d/Bostonlogorigh.png" style="position: absolute; width: 12%; top: 18%; left: 50%;">
  
−
<div id="divhome">
 
  
−
<h1>header</h1>
+
                <img id="Policyblue" src="https://static.igem.org/mediawiki/2014/6/67/OxigemPolicyblue.png" style="opacity: 0; position: absolute; width: 15.2546%; left: 66.33%; top: 39.75%;">
−
<div id="divhomepic">
+
                <img id="Modellingblue" src="https://static.igem.org/mediawiki/2014/6/67/OxigemModellingblue.png" style="opacity: 0; position: absolute; width: 15.6863%; left: 17.517%; top: 38.75%;">
 +
                <img id="achievementsblue" src="https://static.igem.org/mediawiki/2014/9/9e/OxigemAchievementsblue.png" style="opacity: 0; position: absolute; width: 17.4133%; left: 49.5%; top: 61%;">
 +
                <img id="DCMationblue" src="https://static.igem.org/mediawiki/2014/2/2f/OxigemDCMationblue.png" style="opacity:0;position:absolute; width:17.94096%; left: 31.95%; top: 60.6%;">
 +
                <div id="abstract" style="position: absolute; width: 0%; height: 100%; top: 0%; left: 50%; background-color: rgb(245, 245, 245); z-index: 10; border-radius: 15px; display: block;">
 +
                    <a href="#"><img id="x" src="https://static.igem.org/mediawiki/2014/7/7f/Oxigemx.png" onclick="hideabstract()" style="position: absolute; opacity: 0.6; right: 0.9%; top: 1.5%; display: none;"></a>
 +
                    <div id="abstract2" style="position: absolute; display: none; width: 90%; height: 92%; margin-left: 5%; margin-right: 5%; margin-top: 2%; overflow-y: scroll; overflow-x: visible;">
 +
                        <div class="inner" style="width:100%;margin-left:auto;margin-right:auto;height:100%;position:absolute;">
 +
                            <img class="DCMationgif" style="margin-left:5%;" src="https://static.igem.org/mediawiki/2014/8/81/DCMation1.png" alt="" onclick="javascript:(this.src==&quot;https://static.igem.org/mediawiki/2014/8/81/DCMation1.png&quot;?this.src=&quot;https://static.igem.org/mediawiki/2014/e/e2/OxigemDCMationgif.gif&quot;:&quot;&quot;)" width="90%" align="middle">
  
−
</div>
+
                            University of Oxford’s first iGEM team presents: DCMation, a novel bioremediation approach whose applications are limited only by the versatility of bacterial metabolism. OxiGEM are tackling environmental pollution by developing a user-friendly device for the detection &amp; degradation of the hazardous yet indispensable solvent dichloromethane (DCM), to illustrate.
 +
                            <br>
 +
                            Inspired by the DCM degradation pathway of <font style="font-style: italic;">M. extorquens</font> DM4, our project is driven and refined by the dialogue between modelling simulations and experimental data. Bioremediation is optimised by expressing the DCM degrading system in host strains, along with microcompartments to accelerate the reaction and minimise toxic intermediates. Our biosensor is tuned to our characterisation and improvements of the catalytic efficiency of the system, while incorporation of the bacteria into novel diffusion-limiting biopolymeric beads ensures safe and rapid degradation.
 +
                            <br>
 +
                            This all-round modular design and scalability make DCMation ideal for extension to the disposal of many harmful substances. Explore our wiki for more!
  
−
</div>
 
  
−
<h2>Our Project</h2>
+
                        </div>
−
<p>The goal of our team this summer is to create an efficient and widely applicable workflow for splitting proteins. By splitting proteins and fusing each half to a drug-inducible domain, scientists can gain temporal control over protein expression. Using our workflow, the proteins will be translated into two inert halves that are each fused to domains that bind in the presence of an inducer drug. By introducing the drug into the system, the two inert protein halves will come together and for a fully functioning protein. In this way, scientists can further increase their control over protein function. The two types of proteins we will be testing our workflow on are the large serine integrase family and saCAS9. These proteins harness powerful mechanisms that have significant applications in the future of synthetic biology. By using our workflow, we hope to increase scientists understanding of these proteins and also provide a mechanism for increasing temporal control.</p>
+
                    </div>
  
 +
                    <div id="menu1" style="position:absolute; display:none; colour:white; width:90%;height:92%;margin-left:5%;margin-right:5%;margin-top:2%;overflow-y:visible;overflow-x:visible;">
 +
                        <img src="https://static.igem.org/mediawiki/2014/7/78/OxigemBiosensor1.png" style="position:absolute; width:106%;margin-left:-3%;margin-top:-10%;">
 +
                        <a href="#"><img id="next1" src="https://static.igem.org/mediawiki/2014/7/73/OxigemNext.png" style="position:absolute;width:3%;margin-left:101.5%;margin-top:27%;"></a>
 +
 +
                        <a href="https://2014.igem.org/Team:Oxford/biosensor"><img class="zero" src="https://static.igem.org/mediawiki/2014/a/af/Oxigem1.0.jpg" style="width:90%;margin-left:5%;margin-top:28%;"></a>
 +
                        <a href="https://2014.igem.org/Team:Oxford/biosensor_characterisation"><img class="one" src="https://static.igem.org/mediawiki/2014/f/f8/Oxigem1.1.jpg" style="width:90%;margin-left:5%;margin-top:0.2%;"></a>
 +
                        <a href="https://2014.igem.org/Team:Oxford/biosensor_construction"><img class="two" src="https://static.igem.org/mediawiki/2014/8/84/Oxigem1.2.jpg" style="width:90%;margin-left:5%;margin-top:0.2%;"></a>
 +
                        <a href="https://2014.igem.org/Team:Oxford/biosensor_optimisation"><img class="three" src="https://static.igem.org/mediawiki/2014/d/df/Oxigem1.3.jpg" style="width:90%;margin-left:5%;margin-top:0.2%;"></a>
 +
                    </div>
 +
 +
                    <div id="menu2" style="position:absolute; display:none; colour:white; width:90%;height:92%;margin-left:5%;margin-right:5%;margin-top:2%;overflow-y:visible;overflow-x:visible;">
 +
                        <img src="https://static.igem.org/mediawiki/2014/e/e8/OxigemBioremediation1.png" style="position:absolute; width:106%;margin-left:-3%;margin-top:-10%;">
 +
                        <a href="#"><img id="next2" src="https://static.igem.org/mediawiki/2014/7/73/OxigemNext.png" style="position:absolute;width:3%;margin-left:101.5%;margin-top:27%;"></a>
 +
                        <a href="#"><img id="back1" src="https://static.igem.org/mediawiki/2014/0/0c/OxigemBack.png" style="position:absolute;width:3%;margin-left:-4.5%;margin-top:27%;"></a>
 +
                        <a href="https://2014.igem.org/Team:Oxford/bioremediation"><img class="one" src="https://static.igem.org/mediawiki/2014/d/d3/Oxigem2.0.jpg" style="width:90%;margin-left:5%;margin-top:28%;"></a>
 +
                        <a href="https://2014.igem.org/Team:Oxford/how_much_can_we_degrade?"><img class="two" src="https://static.igem.org/mediawiki/2014/2/21/Oxigem2.1.jpg" style="width:90%;margin-left:5%;margin-top:0.2%;"></a>
 +
                        <a href="https://2014.igem.org/Team:Oxford/what_are_microcompartments?"><img class="two" src="https://static.igem.org/mediawiki/2014/b/bb/Oxigem2.2.jpg" style="width:90%;margin-left:5%;margin-top:0.2%;"></a>
 +
                    </div>
 +
 +
                    <div id="menu3" style="position:absolute; display:none; colour:white; width:90%;height:92%;margin-left:5%;margin-right:5%;margin-top:2%;overflow-y:visible;overflow-x:visible;">
 +
                        <img src="https://static.igem.org/mediawiki/2014/1/1b/OxigemRealisation1.png" style="position:absolute; width:106%;margin-left:-3%;margin-top:-10%;">
 +
                        <a href="#"><img id="back2" src="https://static.igem.org/mediawiki/2014/0/0c/OxigemBack.png" style="position:absolute;width:3%;margin-left:-4.5%;margin-top:27%;"></a>
 +
                        <a href="https://2014.igem.org/Team:Oxford/biosensor_realisation"><img class="one" src="https://static.igem.org/mediawiki/2014/f/f6/Oxigem3.1.jpg" style="width:90%;margin-left:5%;margin-top:28%;"></a>
 +
                        <a href="https://2014.igem.org/Team:Oxford/realisation_bioremediation"><img class="two" src="https://static.igem.org/mediawiki/2014/1/1b/Oxigem3.2.jpg" style="width:90%;margin-left:5%;margin-top:0.2%;"></a>
 +
                        <a href="https://2014.igem.org/Team:Oxford/biopolymer_containment"><img class="three" src="https://static.igem.org/mediawiki/2014/9/91/Oxigem3.3.jpg" style="width:90%;margin-left:5%;margin-top:0.2%;"></a>
 +
                    </div>
 +
                </div>
 +
                <img id="down" src="https://static.igem.org/mediawiki/2014/1/1c/OxigemDown.png" style="position: absolute; width:65%; top: 0; left: 17%;">
 +
                <a href="#"><img id="split" src="https://static.igem.org/mediawiki/2014/2/21/OxigemBlank.png" onclick="showabstract()" style="position: absolute; width:24%; top:35%; left: 38%;"></a>
 +
            </div>
 +
 +
            <div class="Heading" id="DCMationheading" style="top: 72.2%; left: 34.8%; width:11%;" onclick="DCMation()" onmouseover="DCMationbig(this)" onmouseout="DCMationnormal(this)" border="0">
 +
                <a href="#"><img src="https://static.igem.org/mediawiki/2014/2/22/OxigemDCMationheading.png" style="width: 100%;"></a>
 +
            </div>
 +
            <div class="Heading" id="achievementsheading" style="top: 77.8%; left: 53%; width: 11.1%; height: 11.1%;" onclick="Achievements()" onmouseover="Achievementsbig(this)" onmouseout="Achievementsnormal(this)" border="0">
 +
                <a href="#"><img src="https://static.igem.org/mediawiki/2014/d/db/OxigemAchievements.png" style="width: 100%;"></a>
 +
            </div>
 +
            <div class="Heading" id="Modellingheading" style="top: 57%; left: 21%; width: 8.5%; height: 8.5%;" onmouseover="Modellingbig(this)" onmouseout="Modellingnormal(this)" border="0">
 +
                <a href="https://2014.igem.org/Team:Oxford/Modelling"><img src="https://static.igem.org/mediawiki/2014/c/cd/OxigemModelling.png" style="width: 100%;"></a>
 +
            </div>
 +
            <div class="Heading" id="Policyheading" style="top: 56%; left: 70.5%; width: 7.3%; height: 7.3%;" onmouseover="Policybig(this)" onmouseout="Policynormal(this)" border="0">
 +
                <a href="https://2014.igem.org/Team:Oxford/policy_and_practices"><img src="https://static.igem.org/mediawiki/2014/0/0a/OxigemP%26P.png" style="width: 100%;"></a>
 +
            </div>
 +
            <div class="Heading" id="iGEMcommheading" style="top: 27%; left: 24.5%; width:8.8%;" onclick="iGEMcomm()" onmouseover="iGEMcommbig(this)" onmouseout="iGEMcommnormal(this)" border="0">
 +
                <a href="#"><img src="https://static.igem.org/mediawiki/2014/6/66/OxigemIGEMcomm.png" style="width: 100%;"></a>
 +
            </div>
 +
            <div class="Heading" id="interlabheading" style="top: 27.5%; left: 68%; width: 6.5%; height: 6.5%;" onclick="Interlab()" onmouseover="Interlabbig(this)" onmouseout="Interlabnormal(this)" border="0">
 +
                <a href="#"><img src="https://static.igem.org/mediawiki/2014/2/27/OxigemInterlab.png" style="width: 100%;"></a>
 +
            </div>
 +
            <div class="Heading" id="Safetyheading" style="top: 15.3%; left: 40%; width: 5%; height: 5%;" onmouseover="Safetybig(this)" onmouseout="Safetynormal(this)" border="0">
 +
                <a href="https://2014.igem.org/Team:Oxford/safety"><img src="https://static.igem.org/mediawiki/2014/e/ef/OxigemSafety.png" style="width: 100%;"></a>
 +
            </div>
 +
            <div class="Heading" id="Teamheading" style="top: 16.5%; left: 55.5%; width: 4.4%; height: 4.4%;" onmouseover="Teambig(this)" onmouseout="Teamnormal(this)" border="0">
 +
                <a href="https://2014.igem.org/Team:Oxford/team"><img src="https://static.igem.org/mediawiki/2014/c/c1/OxigemTeam.png" style="width: 100%;"></a>
 +
            </div>
 +
 +
            <div id="DCMationwrap" onclick="DCMationHide()" style="background-color: rgba(0,0,0,0.1); position: fixed; top:0; left: 0; right: 0; bottom: 0; display:none">
 +
                <div class="Heading" id="DCMationpopup" style="left: 39%; width:0%; position:absolute; margin-top:38%;">
 +
                    <img src="https://static.igem.org/mediawiki/2014/3/32/OxigemDcmationbg.png" style="width: 100%;">
 +
                    <div class="Heading" style="top: 14.2%; left: 31%; width:38%;" onmouseover="Subheadingbig(this)" onmouseout="Subheadingnormal(this)" border="0">
 +
                        <a href="#"><img id="openabstract" onclick="showabstract()" src="https://static.igem.org/mediawiki/2014/1/1f/OxigemAbstract.png" style="width: 100%;"></a>
 +
                    </div>
 +
                    <div class="Heading" style="top: 33%; left: 30.9%; width:38.2%;" onmouseover="Subheadingbig(this)" onmouseout="Subheadingnormal(this)" border="0">
 +
                        <a href="#"><img id="openmenu1" src="https://static.igem.org/mediawiki/2014/0/0c/OxigemBiosensor.png" onclick="showmenu1()" style="width: 100%;"></a>
 +
                    </div>
 +
                    <div class="Heading" style="top: 51.3%; left: 31%; width:38%;" onmouseover="Subheadingbig(this)" onmouseout="Subheadingnormal(this)" border="0">
 +
                        <a href="#"><img id="openmenu2" src="https://static.igem.org/mediawiki/2014/8/80/OxigemBioremediation.png" onclick="showmenu2()" style="width: 100%;"></a>
 +
                    </div>
 +
                    <div class="Heading" style="top: 70.2%; left: 30%; width:37.8%;" onmouseover="Subheadingbig(this)" onmouseout="Subheadingnormal(this)" border="0">
 +
                        <a href="#"><img id="openmenu3" src="https://static.igem.org/mediawiki/2014/f/f7/OxigemRealisation.png" onclick="showmenu3()" style="width: 100%;"></a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
 +
            <div id="Achievementswrap" onclick="AchievementsHide()" style="background-color: rgba(0,0,0,0.1); position: fixed; top:0; left: 0; right: 0; bottom: 0; display:none">
 +
                <div class="Heading" id="Achievementspopup" style="left:59%; width:0%; position:absolute; margin-top:38%;">
 +
                    <img src="https://static.igem.org/mediawiki/2014/b/be/OxigemAchievementsBg.png" style="width: 100%;">
 +
                    <div class="Heading" style="top: 43%; left: 57%; width:26%;" onmouseover="Resultsbig(this)" onmouseout="Resultsnormal(this)" border="0">
 +
                        <a href="https://2014.igem.org/Team:Oxford/Results"><img src="https://static.igem.org/mediawiki/2014/b/b8/OxigemResults.png" style="width: 100%;"></a>
 +
                    </div>
 +
                    <div class="Heading" style="top: 17%; left: 27%; width:40%;" onmouseover="Partsbig(this)" onmouseout="Partsnormal(this)" border="0">
 +
                        <a href="https://2014.igem.org/Team:Oxford/Parts"><img src="https://static.igem.org/mediawiki/2014/f/fa/OxigemParts.png" style="width: 100%;"></a>
 +
                    </div>
 +
                    <div class="Heading" style="top: 45%; left: 14%; width:33.5%;" onmouseover="Medalsbig(this)" onmouseout="Medalsnormal(this)" border="0">
 +
                        <a href="https://2014.igem.org/Team:Oxford/MedalFulfilment"><img src="https://static.igem.org/mediawiki/2014/5/5e/OxigemMedalFulfillment.png" style="width: 100%;"></a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
 +
            <div id="Interlabwrap" onclick="InterlabHide()" style="background-color: rgba(0,0,0,0.1); position: fixed; top:0; left: 0; right: 0; bottom: 0; display:none">
 +
                <div class="Heading" id="Interlabpopup" style="left:72%; width:0%; position:absolute; margin-top:19%;">
 +
                    <img src="https://static.igem.org/mediawiki/2014/d/df/OxigemInterlabbg.png" style="width: 100%;">
 +
                    <div class="Heading" style="top: 63.5%; left: 39%; width:38%;" onmouseover="Subheadingbig(this)" onmouseout="Subheadingnormal(this)" border="0">
 +
                        <a href="https://2014.igem.org/Team:Oxford/devices"><img src="https://static.igem.org/mediawiki/2014/1/11/OxigemIDevices.png" style="width: 100%;"></a>
 +
                    </div>
 +
                    <div class="Heading" style="top: 22.5%; left: 17.3%; width:20.5%;" onmouseover="IMeasurementbig(this)" onmouseout="IMeasurementnormal(this)" border="0">
 +
                        <a href="https://2014.igem.org/Team:Oxford/measurement"><img src="https://static.igem.org/mediawiki/2014/6/6d/OxigemIMeasurement.png" style="width: 100%;"></a>
 +
                    </div>
 +
                    <div class="Heading" style="top: 17%; left: 49.5%; width:34%;" onmouseover="IResultsbig(this)" onmouseout="IResultsnormal(this)" border="0">
 +
                        <a href="https://2014.igem.org/Team:Oxford/InterlabResults"><img src="https://static.igem.org/mediawiki/2014/3/3a/OxigemIResults.png" style="width: 100%;"></a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
 +
            <div id="iGEMcommwrap" onclick="iGEMcommHide()" style="background-color: rgba(0,0,0,0.1); position: fixed; top:0; left: 0; right: 0; bottom: 0; display:none">
 +
                <div class="Heading" id="iGEMcommpopup" style="left:25%; width:0%; position:absolute; margin-top:19%;">
 +
                    <img src="https://static.igem.org/mediawiki/2014/e/e9/OxigemiGEMcommbg.png" style="width: 100%;">
 +
                    <div class="Heading" style="top: 61.1%; left: 34.3%; width:43%;" onmouseover="Collabbig(this)" onmouseout="Collabnormal(this)" border="0">
 +
                        <a href="https://2014.igem.org/Team:Oxford/alternatives_to_microcompartments"><img src="https://static.igem.org/mediawiki/2014/0/0c/OxigemCollaboration.png" style="width: 100%;"></a>
 +
                    </div>
 +
                    <div class="Heading" style="top: 17.5%; left: 54.5%; width:29.5%;" onmouseover="Eventsbig(this)" onmouseout="Eventsnormal(this)" border="0">
 +
                        <a href="https://2014.igem.org/Team:Oxford/Events"><img src="https://static.igem.org/mediawiki/2014/a/af/OxigemEvents.png" style="width: 100%;"></a>
 +
                    </div>
 +
                    <div class="Heading" style="top: 24.5%; left: 16.5%; width:17%;" onmouseover="iGEMEuropebig(this)" onmouseout="iGEMEuropenormal(this)" border="0">
 +
                        <a href="https://2014.igem.org/Team:Oxford/P&amp;P_igem_europe"><img src="https://static.igem.org/mediawiki/2014/4/49/OxigemiGEMEurope.png" style="width: 100%;"></a>
 +
                    </div>
 +
                </div>
 +
            </div>
 +
 +
            <div style="position:fixed;bottom:2%;left:5%;width:90%;height:7%;background-color:#f5f5f5;border-radius:25px;opacity:10; vertical-align:central;">
 +
 +
                <h2>Our Project</h2>
 +
                <p>The goal of our team this summer is to create an efficient and widely applicable workflow for splitting proteins. By splitting proteins and fusing each half to a drug-inducible domain, scientists can gain temporal control over protein expression. Using our workflow, the proteins will be translated into two inert halves that are each fused to domains that bind in the presence of an inducer drug. By introducing the drug into the system, the two inert protein halves will come together and for a fully functioning protein. In this way, scientists can further increase their control over protein function. The two types of proteins we will be testing our workflow on are the large serine integrase family and saCAS9. These proteins harness powerful mechanisms that have significant applications in the future of synthetic biology. By using our workflow, we hope to increase scientists understanding of these proteins and also provide a mechanism for increasing temporal control.</p>
 +
                <!--<div class="Heading" style="position:fixed;bottom:3.8%; left: 7%; width:7%;max-height:6%;">
 +
                    <a href="http://www.bbsrc.ac.uk/home/home.aspx" target="_blank"><img src="https://static.igem.org/mediawiki/2014/3/3e/BBSRC.png" style="width: 110%;"></a>
 +
                </div>
 +
                <div class="Heading" style="position:fixed;bottom:3.8%; left: 16.5%; width:10%;max-height:6%;">
 +
                    <a href="http://www.biochemistry.org" target="_blank"><img src="https://static.igem.org/mediawiki/2014/7/75/BS.png" style="width: 110%;"></a>
 +
                </div>
 +
                <div class="Heading" style="position:fixed;bottom:3.4%; left: 29%; width:9%;max-height:6%;">
 +
                    <a href="http://www.sgm.ac.uk" target="_blank"><img src="https://static.igem.org/mediawiki/2014/2/20/SGM.png" style="width: 110%;"></a>
 +
                </div>
 +
                <div class="Heading" style="position:fixed;bottom:4.4%; left: 40.4%; width:10%;max-height:6%;">
 +
                    <a href="http://www.wellcome.ac.uk" target="_blank"><img src="https://static.igem.org/mediawiki/2014/4/4c/WT.png" style="width: 110%;"></a>
 +
                </div>
 +
                <div class="Heading" style="position:fixed;bottom:2.7%; left: 53.5%; width:6.5%;max-height:6%;">
 +
                    <a href="http://www.deskgen.com/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/6/65/Oxfordigem_deskgen.png" style="width: 110%;"></a>
 +
                </div>
 +
                <div class="Heading" style="position:fixed;bottom:2.5%; left: 62.7%; width:9.5%;max-height:6%;">
 +
                    <a href="http://www.bioch.ox.ac.uk/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/2/20/Oxfordigem_dept.png" style="width: 110%;"></a>
 +
                </div>
 +
                <div class="Heading" style="position:fixed;bottom:3%; left: 75%; width:7%;max-height:6%;">
 +
                    <a href="http://www.neb.com/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/b/b1/OxigemNeb_logo.png" style="width: 110%;"></a>
 +
                </div>
 +
                <div class="Heading" style="position:fixed;bottom:3%; left: 84%; width:8%;max-height:6%;">
 +
                    <a href="http://www.snapgene.com/" target="_blank"><img src="https://static.igem.org/mediawiki/2014/f/ff/Oxfordigem_snapgene.png" style="width: 110%;"></a>
 +
                </div>-->
 +
            </div>
 +
 +
        </div>
 +
 +
 +
       
 +
 +
</div>
 +
 +
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 00:08, 14 July 2015

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 

       "http://www.w3.org/TR/html4/strict.dtd">

Simple 2 column CSS layout, final layout | 456 Berea Street

Our Project

The goal of our team this summer is to create an efficient and widely applicable workflow for splitting proteins. By splitting proteins and fusing each half to a drug-inducible domain, scientists can gain temporal control over protein expression. Using our workflow, the proteins will be translated into two inert halves that are each fused to domains that bind in the presence of an inducer drug. By introducing the drug into the system, the two inert protein halves will come together and for a fully functioning protein. In this way, scientists can further increase their control over protein function. The two types of proteins we will be testing our workflow on are the large serine integrase family and saCAS9. These proteins harness powerful mechanisms that have significant applications in the future of synthetic biology. By using our workflow, we hope to increase scientists understanding of these proteins and also provide a mechanism for increasing temporal control.