Team:Heidelberg/Project

From 2014.igem.org

(Difference between revisions)
(Undo revision 243269 by Maexlich (talk))
Line 1: Line 1:
-
{{:Team:Heidelberg/Templates/MainTemplate}}
+
{{:Team:Heidelberg/Templates/MainTemplate|unresponsive=}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstrapcss}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstraptheme}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/bootstraptheme}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/overrides}}
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/overrides}}
-
{{:Team:Heidelberg/Templates/IncludeCSS|:Team:Heidelberg/css/frontpage}}
 
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/jquery}}
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/jquery}}
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/bootstrapjs}}
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/bootstrapjs}}
-
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/scrollTo}}
+
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/wikipage}}
-
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/tweenmax}}
+
-
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/scrollmagic}}
+
-
{{:Team:Heidelberg/Templates/FrontNav}}
+
-
 
+
<html>
<html>
-
<div class="container">
+
<style type="text/css">
-
<a href="https://2014.igem.org" style="position:absolute;z-index:1;"><img src="/wiki/images/5/5d/IGEM_logo_white.png" style="height:70px;" alt="iGEM Logo" /></a>
+
#myContainer {
-
  <img id="ring" style="visibility:hidden;" src="/wiki/images/0/0d/Heidelberg_Firering_red.png" alt="Ring of fire Image"/>
+
padding:0;
-
  <div class="row">
+
background-color: black;
-
    <div class="jumbotron slide epic-background" style="position:relative;">
+
background-image: url(/wiki/images/6/6a/Heidelberg_epic_background.jpg);
-
      <div id="img-placeholder" class="col-lg-6 col-md-6 col-sm-12">
+
background-repeat: no-repeat;
-
        <img id="placeholder" class="img-responsive" src="/wiki/images/0/0d/Heidelberg_Firering_red.png" alt="Ring of fire Image"/>
+
background-size: 100% auto;
-
      </div>
+
}
-
      <div class="col-lg-6 col-md-6 col-sm-12 impressiv">
+
-
        <div class="hidden-sm hidden-xs" style="padding-top:100px;"></div>
+
-
        <h3 style="font-size:30px;">iGEM TEAM <span>HEIDELBERG</span> 2014</h3>
+
-
        <h1 style="font-size:70px;">THE RING<br />OF <span>FIRE</span></h1>
+
-
       
+
-
<p> Click <a href="/Team:Heidelberg/Project#Abstract">here</a> to view our abstract.
+
-
<br/>
+
-
Scroll down to EXPLORE our project.
+
-
      </div>
+
-
      <div class="clearfix"></div>
+
-
      <div class="arrow arrow-right"></div&nbsp;>
+
-
      <div id="scrollNag" class="arrow arrow-right"></div>
+
-
    </div>
+
-
  </div>
+
-
  <div class="row">
+
-
    <div id="second" class="jumbotron slide grey second">
+
-
      <div id="placeholder-2" class="col-lg-3 col-md-3 hidden-sm hidden-xs" >
+
-
      </div>
+
-
      <div class="col-lg-9 col-md-9 col-sm-12" style="text-align: right;">
+
-
        <h1 style="text-align:right;"><span class="red-text" style="font-size:1.1em;">CIRCULAR PROTEINS</span></h1>
+
-
        <p><span class="red-text" style="font-size: 1.5em;">Nature</span> has made many curious inventions. One of these are circular proteins, which are conventional peptides that neither have a beginning, nor an ending</p>
+
-
        <p>Apart from other features, these proteins are extremely stable against
+
-
high temperatures, pH and proteases.</p>
+
-
        <p style="font-weight:normal; font-size:25px">We seeked to apply this principle of circularization in Synthetic Biology and create a way of rendering any protein heatstable.</p>
+
-
      </div>
+
-
      <div class="arrow arrow-left"></div>
+
-
      <div class="clearfix"></div>
+
-
    </div>
+
-
  </div>
+
#light:hover {
 +
color: #FF7E25;
 +
}
-
  <div class="row">
+
.main {
-
    <div class="jumbotron slide red red-ring">
+
margin-top: 25px;
-
      <h1 style="text-align: right; font-size: 3em;" >Let us take you to the next level of bioengineering ...</h1>
+
}
-
      <h1 style="text-align: center; margin-top:0; font-size:3em; margin-bottom: 15px; font-weight:normal"><span class="light-red-text">USING THE</span> Mechanism <span class="light-red-text">OF</span> SPLIT-INTEINS</h1>
+
 
-
      <div class="col-lg-6">
+
.middle {
-
        <p>Intein splicing is a natural process that excises one part of a protein and leaves the remaining parts irreversibly attached.</p>
+
font-size: 3em;
-
        <p>When attaching split inteins to the ends of a normal protein, the splicing reaction connects the beginning to the ending and forms a circular protein.</p>
+
}
-
      </div>
+
 
-
      <div class="col-lg-6">
+
.large {
-
        Placeholder
+
font-size: 5em;
-
      </div>
+
font-weight: bold;
-
      <div class="arrow arrow-right"></div>
+
}
-
      <div class="clearfix"></div>
+
 
-
    </div>
+
/* Enlarge Icons on hover */
-
  </div>
+
.toolbox-icon-scale:hover {
-
  <div class="row">
+
transform: scale(1.15);
-
    <div class="jumbotron slide epic-background" style="color:white;">
+
-webkit-transform: scale(1.15);
-
      <div class="col-lg-4 col-md-4 col-xs-12" style="height: 410px; position: relative">
+
-moz-transform: scale(1.15);
-
        <div id="circ-box" class="descr-box">
+
-o-transform: scale(1.15);
-
          <a href="/Team:Heidelberg/Toolbox/Circularization">
+
-ms-transform: scale(1.15);
-
            <img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon">&nbsp;&nbsp;CIRCULARIZATION
+
}
-
          </a>
+
 
-
        </div>
+
.toolbox-icon-scale {
-
        <div id="oligo-box" class="descr-box">
+
transition:transform 0.15s ease;
-
          <a href="/Team:Heidelberg/Toolbox/Oligomerization">
+
-webkit-transition:-webkit-transform 0.15s ease;
-
            <img src="/wiki/images/4/40/Oligomerization.png" id="oligo-icon" class="toolbox-icon">&nbsp;&nbsp;OLIGOMERIZATION
+
-moz-transition:-moz-transform 0.15s ease;
-
          </a>
+
-o-transition:-o-transform 0.15s ease;
-
        </div>
+
}
-
        <div id="fusion-box" class="descr-box">
+
 
-
          <a href="/Team:Heidelberg/Toolbox/Fusion">
+
.ringbox{
-
            <img src="/wiki/images/8/87/Heidelberg_Toolbox_Fusion.png" id="fusion-icon" class="toolbox-icon">&nbsp;&nbsp;FUSION
+
/*
-
          </a>
+
width: 750px;
-
        </div>
+
height: 600px;
-
        <div id="onoff-box" class="descr-box">
+
background-image:url('/wiki/images/d/dc/Ring_Project.png');
-
          <a href="/Team:Heidelberg/Toolbox/OnOff">
+
background-size: 550px;
-
            <img src="/wiki/images/c/c2/Heidelberg_Toolbox_On-Off.png" id="onoff-icon" class="toolbox-icon">&nbsp;&nbsp;ON/OFF
+
background-repeat: no-repeat;
-
          </a>
+
*/
-
        </div>
+
position: absolute;
-
        <div id="purification-box" class="descr-box">
+
top:260px;
-
          <a href="/Team:Heidelberg/Toolbox/Purification">
+
left:140px;
-
            <img src="/wiki/images/0/04/Heidelberg_Toolbox_Purification.png" id="purification-icon" class="toolbox-icon">&nbsp;&nbsp;PURIFICATION
+
height:1000px;
-
          </a>
+
z-index:3;
-
        </div>
+
}
-
      </div>
+
 
-
      <div class="col-lg-8 col-md-8 col-xs-12">
+
.abstract-special {
-
        <h1 style="text-align: right; font-size: 3em;" >... and show you the  WORLD of <br />
+
color: white;
-
          <span class="red-text">post-translational MODIFCATION</span>
+
}
-
        </h1>
+
 
-
        <p>The iGEM Team Heidelberg has developed an intein toolbox for the iGEM community to easily modify your protein in a standarized method.</p>
+
.abstract-special span {
-
        <p>Our toolbox contains several tools which are PLACEHOLDER. Here you can find out more about our Toolbox.</p>
+
margin-top: 10px;
-
        <p>In addition to that all tools are inducible by light. Using the LOV system we built a solid method for regulation of the intein trans-splicing reaction our toolbox consiting on. Click here to get more informations about Induction.</p>
+
margin-bottom: 10px;
-
      </div>
+
display: block;
-
      <div class="clearfix"></div>
+
}
-
      <div class="arrow arrow-left"></div>
+
 
-
    </div>
+
.abstract-special img {
-
  </div>
+
height: 15px;
-
  <div style="position:relative;" class="row">
+
}
-
    <div class="jumbotron slide grey">
+
 
-
    <div>
+
.toolbox-icon {
-
      <div class="col-md-4 col-md-push-8 col-md-offset-0 col-xs-offset-3 col-xs-6" style="z-index:5;">
+
height: 90px;
-
        <img class="img-responsive" src="/wiki/images/a/a6/Heidelberg_Project_Dnmt1.png" />
+
position: absolute;
-
      </div>
+
right:-43px;
-
      <div class="col-md-8 col-md-pull-4 col-xs-12">
+
bottom:-45px;
-
        <h1 class="dark-grey-text" style="text-align: right;"><span style="font-size: 0.8em;">circular <span class="red-text">heat-stable</span></span><br>DNMT1</h1>
+
}
-
        <p>Wouldn´t it be great to amplify DNA in a normal PCR maintaining the epigenetic information coded in methylation patterns?</p>
+
 
-
        <p>The problem: DNMT 1, an enzyme which is responsible for the establishment and maintenance of the individual methylation pattern of different cell types, is not heat stable.
+
#ring-background {
-
        For iGEM 2014 we therefore create a PCR 2.0 with heat-stable DNMT 1 by circularization.
+
width: 450px;
-
        </p>
+
height: auto;
-
      </div>
+
opacity:0.8;
-
      <div class="clearfix"></div>
+
}
-
      </div>
+
 
-
      <div>
+
.block{
-
      <div class="title-wrapper-dnmt1">
+
display:block;
-
        <span class="title-dnmt1">PCR 2.0</span>
+
text-decoration:none;
-
        <span class="special-span-dnmt1"></span>
+
color: white;
-
      </div>
+
}
-
      </div>
+
 
-
      <div class="arrow arrow-right"></div>
+
.block:hover{
-
    </div>
+
text-decoration: none;
-
  </div>
+
}
-
  <div style="position:relative;" class="row">
+
 
-
    <div class="jumbotron slide red">
+
.box {
-
      <div>
+
background-color: rgba(81,81,81,0.7);
-
        <div class="col-md-4" style="z-index:5;">
+
padding: 15px;
-
          <img style="margin-top:25px;"class="img-responsive" src="/wiki/images/8/82/Heidelberg_Project_Xylanase.png" />
+
position:relative;
-
        </div>
+
}
-
        <div class="col-md-8">
+
 
-
          <h1 style="text-align: right; color: black; padding-right: 130px;" ><span style="font-size: 0.8em;">circular <span style="color:white;">heat-stable</span></span><br><span style="font-size:1.3em;">Xylanase</span></h1>
+
.box:hover {
-
          <p>Xylanase is an important enzyme for the pulp and paper industry.</p>
+
border:solid 2px #DE4230;
-
          <p>Bla bla</p>
+
padding: 13px;
-
          <p>In future Xylanase could be used for the production of biofuel.</p>
+
}
-
        </div>
+
 
-
        <div class="clearfix"></div>
+
 
-
      </div>
+
.descr-box {
-
      <div class="title-wrapper-dnmt1" style="text-align: right; color:white; font-weight:bold;">
+
width: 250px;
-
          <span class="title-dnmt1">INDUSTRY</span>
+
height: 100px;
-
          <span class="special-span-dnmt1"></span>
+
position: absolute;
-
      </div>
+
}
-
      <div class="arrow arrow-left"></div>
+
 
-
    </div>
+
.descr-box h3 {
-
  </div>
+
margin-top: 10px;
-
  <div class="row">
+
margin-bottom: 0;
-
    <div class="jumbotron slide dark-grey" style="color:white;">
+
text-align: left;
-
      <div>     
+
}
-
        <div class="col-md-4 col-md-push-8 col-md-offset-0 col-xs-offset-3 col-xs-6" style="z-index:5;">
+
 
-
          <img class="img-responsive" src="/wiki/images/a/af/Enzymekinetics.png" />
+
.descr-box h3 span {
-
        </div>
+
font-size: 0.8em;
-
        <div class="col-md-8 col-md-pull-4 col-xs-12">
+
}
-
          <h1 style="text-align: left;" ><span style="font-size:2em;">LINK it!</span></h1>
+
 
-
          <p>Could every protein becomes heat stable by circularization, even if it´s the most complex of all?</p>
+
.descr-box div {
-
          <p>Circularization is a narrow path between gaining heat-stability and loosing function due to deformation. We developed a linker software, which predict the perfect linker depending on the folding structure of every protein.</p>
+
border-right: solid white 2px;
-
        </div>
+
border-top: solid white 2px;
-
        <div class="col-lg-12">
+
padding-right:43px;
-
          <p>In an extensive linker screening our software was improved and calibrated using the lambda phage lysozyme.</p>
+
}
-
        </div>
+
 
-
        <div class="clearfix"></div>
+
.descr-box span {
-
      </div>
+
display: block;
-
      <div class="arrow arrow-left"></div>
+
}
-
    </div>
+
 
-
   </div>
+
#circ-box {
-
   <div class="row">
+
right: 160px;
-
    <div class="jumbotron slide grey">
+
top: -120px;
-
      <div>
+
}
-
        <div>
+
 
-
          <div class="col-md-3 col-md-offset-0 col-xs-6 col-xs-offset-3" style="z-index:5;">
+
#circ-box img {
-
            <img class="img-responsive" src="/wiki/images/e/e5/Heidelberg_Frontpage_igemathome.png" />
+
bottom: -130px;
-
          </div>
+
height: 120px;
-
          <div class="col-md-9 col-xs-12">
+
right: -57px;
-
            <h1 style="text-align: left; color:#DE4230;" ><span style="font-size:1.5em; font-weights:bold;">CALCULATE it!</span></h1>
+
}
-
          </div>
+
 
-
          <div class="clearfix"></div>
+
#circ-box div {
-
        </div>
+
height: 114px;
-
        <div class="col-md-8 col-xs-12">
+
}
-
        <p><br/>After calculating for eleven days and the breakdown of both computational and mental power we decided to spread the modeling of the linkers.</p>
+
 
-
        <p>The iGEM Team Heidelberg developed <a href="/Team:Heidelberg/Software/igemathome">iGEM@home</a>, a software to divide extensive computing task into many packages and to distribute them to many computers. Now over 1,000 volunteers are calculating for us when their computers are idle.</p>
+
#oligo-box {
-
        <p>As a new tool for the iGEM community this system enables every student team to archieve their modeling without access to big server farms.</p>
+
left: -100px;
-
        </div>
+
top: -10px;
-
        <div class="col-md-4 col-md-offset-0 col-sm-offset-3 col-sm-6 col-xs-offset-2 col-xs-8">
+
width: 200px;
-
          <img style="position:relative; top: -35px;" class="img-responsive" src="/wiki/images/5/52/Heidelberg_Frontpage_igemathome_cloud.png" />
+
}
-
        </div>
+
 
-
        <div class="clearfix"></div>
+
#onoff-box {
-
      </div>
+
left: -105px;
-
      <div class="arrow arrow-left"></div>
+
top: 120px;
-
     </div>
+
width: 150px;
-
  </div>
+
}
-
  <div class="row">
+
 
-
    <div class="jumbotron slide dark-grey" style="color:white; position:relative;">
+
#fusion-box {
-
      <div class="col-lg-5 col-md-5 hidden-sm hidden-xs" style="position:relative; bottom:-48px;">
+
left: -100px;
-
        <img class="img-responsive" src="/wiki/images/5/5e/Heidelberg_Frontpage_Team.png" />
+
top: 330px;
-
      </div>
+
width: 190px;
-
      <div class="col-lg-7 col-md-7 col-sm-12 col-xs-12">
+
}
-
        <h1>Who are we?</h1>
+
 
-
        <p>We are the iGEM Team Heidelberg 2014 consisting of 12 highly motivated bachelor and master students studying at Heidelberg University.</p>
+
#fusion-box img {
-
        <p>For our project we got great feedback and support from our supervisors.</p>
+
top: -16px;
-
        <p>Take a look at our <a href="/Team:Heidelberg/Team">Teampage</a>!</p>
+
}
-
        <h1>Thank you!</h1>
+
 
-
        <p>We want thank all people who helped us and supported our work in the lab.</p>
+
#fusion-box div {
-
      </div>
+
border-right: none;
-
     
+
}
-
      <div class="clearfix"></div>
+
 
-
    </div>
+
#purification-box {
-
  </div>
+
left: 20px;
-
</div>
+
top: 445px;
 +
width: 200px;
 +
}
 +
 
 +
#purification-box img {
 +
top: -70px;
 +
}
 +
 
 +
#purification-box div {
 +
border-top: none;
 +
border-bottom: solid white 2px;
 +
}
 +
 
 +
#abstract-content {
 +
display:none;
 +
}
 +
 
 +
.graphicalAbstract {
 +
  background-image:url('/wiki/images/f/fa/Heidelberg_Project_Background.png');
 +
  background-size: 100% auto;
 +
  background-repeat: no-repeat;
 +
  position:relative;
 +
  z-index: 1;
 +
  height:900px;
 +
}
 +
 
 +
#redOverlay {
 +
  position:absolute;
 +
  width:100%;
 +
  height:100%;
 +
  left:0;
 +
   top:0;
 +
   display:none;
 +
  background-image:url('/wiki/images/5/51/Heidelberg_project_red_overlay.png');
 +
  background-size: 100% auto;
 +
  background-repeat: no-repeat;
 +
  z-index:2;
 +
}
 +
 
 +
#lightning {
 +
z-index: 3;
 +
position:absolute;
 +
top: 610px;
 +
left: 460px;
 +
color:white;
 +
}
 +
 
 +
 
 +
#screened {
 +
z-index: 3;
 +
position:absolute;
 +
left: 0;
 +
top: 0;
 +
color: white;
 +
}
 +
 
 +
#calibrated {
 +
z-index: 3;
 +
position:absolute;
 +
right: 0;
 +
top: 0;
 +
color: white;
 +
}
 +
 
 +
#dnmt1-img {
 +
position: absolute;
 +
height: 155px;
 +
right: 15px;
 +
z-index:4;
 +
}
 +
 
 +
a:hover #dnmt1-img {
 +
right: 13px;
 +
}
 +
 
 +
#dnmt1-box {
 +
right: 40px;
 +
top: 340px;
 +
position: absolute;
 +
}
 +
 
 +
#xylanase-box {
 +
width:250px;
 +
top: 556px;
 +
right:40px;
 +
position:absolute;
 +
}
 +
 
 +
#xylanase-img {
 +
height: 140px;
 +
     position: absolute;
 +
    right: 15px;
 +
}
 +
 
 +
a:hover #xylanase-img {
 +
right: 13px;
 +
}
 +
 
 +
#toolbox-text{
 +
position: absolute;
 +
top: 145px;
 +
right: -135px;
 +
font-size: 5em;
 +
line-height: 70px;
 +
font-weight: bold;
 +
}
 +
 
 +
#linker-links {
 +
position: absolute;
 +
width: 405px;
 +
right: 60px;
 +
top: 35px;
 +
height: 240px;
 +
}
 +
 
 +
#toolbox {
 +
position:absolute;
 +
right: 50px;
 +
bottom: 190px;
 +
}
 +
 
 +
#toolbox:hover > span {
 +
color: white;
 +
}
 +
 
 +
.container {
 +
width: 1170px;
 +
}
 +
 
 +
</style>
 +
<div id="myContainer" class="container">
</html>
</html>
 +
{{:Team:Heidelberg/Templates/BootstrapNav|
 +
red=|
 +
white=true|
 +
red-logo=true|
 +
white-logo=|
 +
header-bg=|
 +
header-img=|
 +
title=
 +
}}
 +
<html>
 +
<div class="container main" style="color: white;">
 +
<div id="abstract-dropdown" class="row abstract-special dark-grey">
 +
<div class="col-lg-offset-1 col-lg-2">
 +
<h4><img id="dropdownImg" src="/wiki/images/7/70/Heidelberg_Abstract-dropdown.png"/>&nbsp;Abstract</h4>
 +
</div>
 +
<div class="col-lg-9">
 +
<span>Click to read full abstract</span>
 +
</div>
 +
<div id="abstract-content" class="col-lg-12" >
 +
Placeholder
 +
</div>
 +
</div>
 +
<div class="graphicalAbstract">
 +
    <div id="redOverlay"></div>
 +
    <div style="z-index:3;position:relative; height:100%;">
 +
    <div id="linker-links">
 +
    <a href="#" class="block box" id="calibrated">
 +
<img style="height:60px;display: inline-block;" src="/wiki/images/e/ea/Heidelberg_Project_Computer.png">
 +
<span style="position: relative;top: 10px;display: inline-block;">
 +
calibrated<br>
 +
<span class="red-text">in silico</span></span>
 +
</a>
 +
<a href="#" class="block box" id="screened">
 +
<span style="position: relative;top:10px;display: inline-block;">
 +
screened <span class="red-text">in vitro</span><br>
 +
with lysozyme</span>
 +
<img style="height:60px; display:inline-block;" src="/wiki/images/d/df/Heidelberg_Lysozyme.png" />
 +
</a>
 +
<a href="#" class="block" style="bottom:0; left:0; position:absolute;">
 +
<span class="red-text" >circularize</span> it<br>
 +
with calculated linkers
 +
</a>
 +
    </div>
 +
<div class="ringbox">
 +
<img src="/wiki/images/0/0d/Heidelberg_Firering_red.png" id="ring-background" />
 +
<div id="circ-box" class="descr-box">
 +
<a href="/Team:Heidelberg/Toolbox/Circularization">
 +
<img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" id="circ-icon" class="toolbox-icon toolbox-icon-scale"/>
 +
</a>
 +
<h3>CIRCULARIZATION</h3>
 +
<div><span>Create a linker with our crowd computing <a href="/Team:Heidelberg/Software/Linker-Software">software</a> and make your protein heat stable</span></div>
 +
</div>
 +
<div id="oligo-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Oligomerization"><img src="/wiki/images/4/40/Oligomerization.png" id="oligo-icon" class="toolbox-icon toolbox-icon-scale"/></a><h3>OLIGOMERIZATION</h3><div><span>Fuse multiple Proteins or Domains using Inteins</span></div>
 +
</div>
 +
<div id="fusion-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Fusion"><img src="/wiki/images/8/87/Heidelberg_Toolbox_Fusion.png" id="fusion-icon" class="toolbox-icon toolbox-icon-scale"/></a><h3>FUSION</h3><div><span>Fuse two Proteins or Domains together using Inteins</span></div>
 +
</div>
 +
<div id="onoff-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/OnOff"><img src="/wiki/images/c/c2/Heidelberg_Toolbox_On-Off.png" id="onoff-icon" class="toolbox-icon toolbox-icon-scale"/></a><h3>ON/OFF</h3><div><span>Activate or deactivate Proteins using Inteins</span></div></div>
 +
<div id="purification-box" class="descr-box"><a href="/Team:Heidelberg/Toolbox/Purification"><img src="/wiki/images/0/04/Heidelberg_Toolbox_Purification.png" id="purification-icon" class="toolbox-icon toolbox-icon-scale"/></a><div><h3>PURIFICATION</h3></div><span>Placeholder</span></div>
 +
<div id="toolbox-text">
 +
the intein<br>
 +
<span>toolbox<span>
 +
</div>
 +
</div>
 +
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Induction" class="block" id="lightning">
 +
<img class="toolbox-icon-scale" style="height:110px;display: inline-block;" src="/wiki/images/8/83/Heidelberg_Project_Lightning.png"><span style="position: relative;top: 20px;display: inline-block;">&nbsp;inducible via<br>
 +
<span style="font-weight:bold;position: relative;left: -18px;" class="red-text">light induction</span></span>
 +
</a>
 +
<a href="https://2014.igem.org/Team:Heidelberg/Project/PCR_2.0" class="block box" style="width:250px;" id="dnmt1-box">
 +
<img id="dnmt1-img" src="/wiki/images/a/a6/Heidelberg_Project_Dnmt1.png">
 +
<span style="position:relative; z-index:5;" class="block">
 +
<span style="font-size:1.5em;">
 +
<span class="red-text">Heat-stable</span><br>  circular <br><span style="font-weight:bold;">DNA-<br/>Methyltransferase</span>
 +
</span><br>
 +
<span style="font-weight:bold;font-size: 2.5em; text-align:right;line-height: 35px;">
 +
<span class="red-text">PCR 2.0</span>
 +
</span>
 +
</span>
 +
</a>
 +
<a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Induction" class="block" id="toolbox">
 +
<span style="position:relative; display: inline-block;height:110px; width:110px; vertical-align: middle;">
 +
<img style="height:100%; position:absolute; top:0; left:0;" id="toolbox-img" src="/wiki/images/2/24/Heidelberg_Project_Toolbox_guide.png" />
 +
<img style="height:100%; position:absolute; top:0; left:0;" id="toolbox-img-hover" src="/wiki/images/4/4c/Heidelberg_Toolbox_guide_highlighted.png" />
 +
</span>
 +
<span style="position: relative;top: 20px;display: inline-block; vertical-align:middle;">
 +
<span style="font-weight:bold;" class="red-text">modify your protein</span><br/>
 +
using the toolbox guide
 +
</span>
 +
</a>
 +
<div class="clearfix"></div>
 +
</div>
 +
</div>
 +
</div>
 +
</div>
 +
<script type="text/javascript">
 +
$(document).ready(function(){
 +
if(window.location.hash) {
 +
  var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
 +
  if(hash == "Abstract")
 +
      $('#abstract-content').slideDown(400, function() {$('#dropdownImg').attr("src", "/wiki/images/f/f2/Heidelberg-Abstract-dropup.png");});
 +
}
 +
$('#abstract-dropdown').click(function() {
 +
if($('#abstract-content').css("display") == 'none'){
 +
$('#abstract-content').slideDown(400, function() {$('#dropdownImg').attr("src", "/wiki/images/f/f2/Heidelberg-Abstract-dropup.png");});
 +
}
 +
else{
 +
$('#abstract-content').slideUp(400, function() {$('#dropdownImg').attr("src", "/wiki/images/7/70/Heidelberg_Abstract-dropdown.png");});
 +
}
 +
});
-
{{:Team:Heidelberg/Templates/IncludeJS|:Team:Heidelberg/js/frontpage}}
+
$('#linker-links').mouseenter(function(){
 +
$('#redOverlay').stop(true);
 +
$('#redOverlay').fadeIn();
 +
});
 +
 
 +
$('#linker-links').mouseleave(function(){
 +
$('#redOverlay').stop(true);
 +
$('#redOverlay').fadeOut();
 +
});
 +
 
 +
$('.descr-box span').css("opacity", 0);
 +
$('.descr-box h3, .descr-box > a')
 +
.mouseenter(function(){
 +
var $element;
 +
if($(this).siblings().length == 0)
 +
// we're inside the warpping div, break out first
 +
$element = $(this).parent().parent()
 +
else
 +
$element = $(this).parent();
 +
 
 +
$element.find('span').stop(true).animate({opacity: 1}, 800);
 +
})
 +
.mouseleave(function() {
 +
var $element;
 +
if($(this).siblings().length == 0)
 +
// we're inside the warpping div, break out first
 +
$element = $(this).parent().parent();
 +
else
 +
$element = $(this).parent();
 +
 
 +
$element.find('span').stop(true).animate({opacity: 0}, 800);
 +
});
 +
 
 +
$('#toolbox')
 +
.mouseover(function() {
 +
$('#toolbox-img-hover').fadeIn();
 +
})
 +
.mouseleave(function() {
 +
$('#toolbox-img-hover').fadeOut();
 +
});
 +
 
 +
});
 +
 
 +
</script>
 +
</html>

Revision as of 11:50, 15 October 2014

Retrieved from "http://2014.igem.org/Team:Heidelberg/Project"