|
|
(35 intermediate revisions not shown) |
Line 1: |
Line 1: |
- | {{:Team:Heidelberg/Templates/MainTemplate|unresponsive=}} | + | {{:Team:Heidelberg/Templates/MainTemplate}} |
| {{: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}} |
Line 34: |
Line 34: |
| | | |
| /* Enlarge Icons on hover */ | | /* Enlarge Icons on hover */ |
- | .toolbox-icon-scale:hover { | + | .toolbox-icons-bar a:hover img { |
| transform: scale(1.15); | | transform: scale(1.15); |
| -webkit-transform: scale(1.15); | | -webkit-transform: scale(1.15); |
Line 42: |
Line 42: |
| } | | } |
| | | |
- | .toolbox-icon-scale { | + | .toolbox-icons-bar a img { |
| transition:transform 0.15s ease; | | transition:transform 0.15s ease; |
| -webkit-transition:-webkit-transform 0.15s ease; | | -webkit-transition:-webkit-transform 0.15s ease; |
Line 49: |
Line 49: |
| } | | } |
| | | |
- | .ringbox{
| |
- | /*
| |
- | width: 750px;
| |
- | height: 600px;
| |
- | background-image:url('/wiki/images/d/dc/Ring_Project.png');
| |
- | background-size: 550px;
| |
- | background-repeat: no-repeat;
| |
- | */
| |
- | position: absolute;
| |
- | top:260px;
| |
- | left:140px;
| |
- | height:1000px;
| |
- | z-index:3;
| |
- | }
| |
- |
| |
- | .abstract-special {
| |
- | color: white;
| |
- | }
| |
- |
| |
- | .abstract-special span {
| |
- | margin-top: 10px;
| |
- | margin-bottom: 10px;
| |
- | display: block;
| |
- | }
| |
- |
| |
- | .abstract-special img {
| |
- | height: 15px;
| |
- | }
| |
- |
| |
- | .toolbox-icon {
| |
- | height: 90px;
| |
- | position: absolute;
| |
- | right:-43px;
| |
- | bottom:-45px;
| |
- | }
| |
- |
| |
- | #ring-background {
| |
- | width: 450px;
| |
- | height: auto;
| |
- | opacity:0.8;
| |
- | }
| |
- |
| |
- | .block{
| |
- | display:block;
| |
- | text-decoration:none;
| |
- | color: white;
| |
- | }
| |
- |
| |
- | .block:hover{
| |
- | text-decoration: none;
| |
- | }
| |
- |
| |
- | .box {
| |
- | background-color: rgba(81,81,81,0.7);
| |
- | padding: 15px;
| |
- | position:relative;
| |
- | }
| |
- |
| |
- | .box:hover {
| |
- | border:solid 2px #DE4230;
| |
- | padding: 13px;
| |
- | }
| |
- |
| |
- |
| |
- | .descr-box {
| |
- | width: 250px;
| |
- | height: 100px;
| |
- | position: absolute;
| |
- | }
| |
- |
| |
- | .descr-box h3 {
| |
- | margin-top: 10px;
| |
- | margin-bottom: 0;
| |
- | text-align: left;
| |
- | }
| |
- |
| |
- | .descr-box h3 span {
| |
- | font-size: 0.8em;
| |
- | }
| |
- |
| |
- | .descr-box div {
| |
- | border-right: solid white 2px;
| |
- | border-top: solid white 2px;
| |
- | padding-right:43px;
| |
- | }
| |
- |
| |
- | .descr-box span {
| |
- | display: block;
| |
- | }
| |
- |
| |
- | #circ-box {
| |
- | right: 160px;
| |
- | top: -120px;
| |
- | }
| |
- |
| |
- | #circ-box img {
| |
- | bottom: -130px;
| |
- | height: 120px;
| |
- | right: -57px;
| |
- | }
| |
- |
| |
- | #circ-box div {
| |
- | height: 114px;
| |
- | }
| |
- |
| |
- | #oligo-box {
| |
- | left: -100px;
| |
- | top: -10px;
| |
- | width: 200px;
| |
- | }
| |
- |
| |
- | #onoff-box {
| |
- | left: -105px;
| |
- | top: 120px;
| |
- | width: 150px;
| |
- | }
| |
- |
| |
- | #fusion-box {
| |
- | left: -100px;
| |
- | top: 330px;
| |
- | width: 190px;
| |
- | }
| |
- |
| |
- | #fusion-box img {
| |
- | top: -16px;
| |
- | }
| |
- |
| |
- | #fusion-box div {
| |
- | border-right: none;
| |
- | }
| |
- |
| |
- | #purification-box {
| |
- | left: 20px;
| |
- | 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> | | </style> |
Line 325: |
Line 64: |
| <html> | | <html> |
| <div class="container main" style="color: white;"> | | <div class="container main" style="color: white;"> |
- | <div id="abstract-dropdown" class="row abstract-special dark-grey"> | + | <div class="row"> |
- | <div class="col-lg-offset-1 col-lg-2"> | + | <div class="col-lg-12"> |
- | <h4><img id="dropdownImg" src="/wiki/images/7/70/Heidelberg_Abstract-dropdown.png"/> Abstract</h4> | + | <span class="middle">use the <span class="red-text">intein</span></span> |
| + | </div> |
| + | </div> |
| + | <div class="row"> |
| + | <div class="col-lg-12" style="position: relative; top: -20px;"> |
| + | <span class="large">TOOLBOX </span><span class="middle" >to</span> |
| + | </div> |
| + | </div> |
| + | <div class="row toolbox-icons-bar"> |
| + | <div class="col-lg-2 col-lg-offset-1 col-md-offset-1 col-md-2 col-sm-4 col-xs-6"> |
| + | <a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Circularization"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/5/58/Heidelberg_Toolbox_Circularization.png" class="img-responsive" /></span>CIRCULARIZE</a> |
| </div> | | </div> |
- | <div class="col-lg-9"> | + | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> |
- | <span>Click to read full abstract</span> | + | <a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Localization"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/3/3a/Heidelberg_Localize_button.png" class="img-responsive" /></span>LOCALIZE</a> |
| </div> | | </div> |
- | <div id="abstract-content" class="col-lg-12" > | + | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> |
- | Placeholder
| + | <a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Fusion"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/8/87/Heidelberg_Toolbox_Fusion.png" class="img-responsive" /></span>ATTACH</a> |
| </div> | | </div> |
- | </div>
| + | <div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> |
- | <div class="graphicalAbstract">
| + | <a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/Purification"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/0/04/Heidelberg_Toolbox_Purification.png" class="img-responsive" /></span>PURIFY</a> |
- | <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> | | </div> |
- | <a href="https://2014.igem.org/Team:Heidelberg/Toolbox/Induction" class="block" id="lightning"> | + | <!--<div class="col-lg-2 col-md-2 col-sm-4 col-xs-6"> |
- | <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;"> inducible via<br>
| + | <a href="https://2014.igem.org/Team:Heidelberg/Toolbox_Guide/OnOff"><span class="col-lg-offset-3 col-lg-6 col-md-offset-2 col-md-8 col-sm-12 nopadding nofloat"><img src="/wiki/images/c/c2/Heidelberg_Toolbox_On-Off.png" class="img-responsive" /></span>ACTIVATE &<br />DEACTIVATE</a> |
- | <span style="font-weight:bold;position: relative;left: -18px;" class="red-text">light induction</span></span>
| + | </div>--> |
- | </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="/Team:Heidelberg/Toolbox_Guide" 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; display:none;" 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> |
- | </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");});
| |
- | }
| |
- | });
| |
- |
| |
- | $('#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> | | </html> |