Difference between revisions of "Team:BostonU/Home"

Line 1: Line 1:
<html lang="en">
 
<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">
 
       
 
          #wrap {
 
              width:100%;
 
              margin:0 auto;
 
  
          }
 
 
          h1 {
 
              margin:0;
 
          }
 
          #nav {
 
              padding:5px 10px;
 
 
          }
 
          #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 {
 
           
 
            -webkit-background-size: cover;
 
            -moz-background-size: cover;
 
            -o-background-size: cover;
 
            background-size: cover;
 
background-color: lightblue;
 
            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>
 
 
<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%;">
 
 
 
                <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%;">
 
                <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>
 
                    </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:auto;background-color:#f5f5f5;border-radius:5px;opacity:0.8; vertical-align:central; padding:5px;">
 
             <div style="position:fixed;bottom:2%;left:5%;width:90%;height:auto;background-color:#f5f5f5;border-radius:5px;opacity:0.8; vertical-align:central; padding:5px;">

Revision as of 20:50, 14 July 2015


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.

       </div>



</div>

</div> </body> </html>