Biomod/2012/Potsdam/DnanoPROT

From OpenWetWare
Jump to: navigation, search

<html> <head> <style type="text/css">

html,body {height:100%;margin:0;padding:0;}


body {

      /*background-image: url(http://openwetware.org/images/e/ee/UP12_background.jpg);
       background-repeat:repeat-y repeat-x; */       

} .gradient_golden {

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#0e8cd0, endColorstr=#104871)";
  background-image: -ms-linear-gradient(top, #0e8cd0 0%, #104871 100%);
  background-image: -moz-linear-gradient(top, #0e8cd0 0%, #104871 100%);
  background-image: -o-linear-gradient(top, #0e8cd0 0%, #104871 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0e8cd0), color-stop(1, #104871));
  background-image: -webkit-linear-gradient(top, #0e8cd0 0%, #104871 100%);
  background-image: linear-gradient(to bottom, #0e8cd0 0%, #104871 100%);

}

  1. sidebar-main{
visibility:hidden;

}

  1. content {
   left: 50%;
   margin-left: -480px;
   width: 975px;

}

  1. igem_home {
  font-size: 95%;
  left: 425px;
  position: absolute;
  top: -4px;

}

.gradient_grey{

  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#E6E6E6)";
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: -moz-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: -o-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #E6E6E6)); 
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #E6E6E6 100%);
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #E6E6E6 100%);

}

.white_bg {

 background-color: white;

}

.box_round {

  width: 955px;
  padding: 5px;
  border-radius: 5px;
  box-shadow:5px 5px 5px #666;

}

.box_round p {

  text-align:justify;

}

.no_padding {

  padding: 0px;

}

.nav_menu {

  width: 965px;
  height: 35px;
  box-shadow:5px 5px 5px #666;

}

  1. menu .selected {
  background-color:#B41111;
  height: 27px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;

}

  1. menu {
 display: block;
 margin: 0px;
 padding: 8px;
 position:relative;
 left: 50%;
 text-align: center;

}

  1. menu ul {
 margin: 0px;

}

  1. menu li {
 list-style: none outside none;
 float:left;
 padding-left: 15px;
 padding-right: 15px;
 margin-right:25px;
 margin-left:25px;
 font-weight: 900;

}

  1. menu li ul{
 list-style: none outside none;
 display:none;
 position: absolute; 
 margin : 0px;
 padding: 0px;

}

  1. menu ul ul {
 padding: 0px;

}

  1. menu li ul li{
 margin : 0px;
 width:inherit;
 font-weight: normal;

}

  1. menu li ul li:hover {
 height:auto;
 float:none;
 text-align:left;

}


  1. menu ul li {
 clear: both;

}

  1. menu a {
 display: block;
 color: white;

}

  1. menu a:hover {
  text-decoration:none;

}

  1. menu li:hover {
  background-color:#B41111;
  height: 27px;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;

}


  1. menu li:hover ul {
   display:block;

}

.box_round table {

 background-color: transparent;

}

.block {

display: inline-block;
width : 350px;
height : 200px;

}

table {

 background-color: transparent;

}

table th {

 padding-left: 5px;
 padding-right: 5px;

}

  1. content {
 border: none;
 background-color: transparent;

}

  1. catlinks {
 border:none;
 background-color: transparent;

}


  1. footer-box {
 border:none;
 background-color: transparent;

}

  1. footer {
background-color: transparent;
border: none;

} .center_box {

  text-align: center;

}

  1. p-logo {
 display:none;

}

  1. top-section {
border: none;
height:0px;

}

.firstHeading{

display: none;
padding:0px;

}

  1. banner-wrap {
 padding: 0px;

}

  1. portfolio {
z-index: -200;
height: 280px;

}

  1. portfolio img{
 box-shadow:5px 5px 5px #666;
 width:965px;
 height: 280px;

}

.rollover {

  width: 975px;
  text-align: center;

}

.rollover a{

  display: inline-block;  
  width : 200px;
  margin: 20px;
  height : 200px;
  border-radius : 12px;
  margin: 20px 20px 20px 20px;
  box-shadow:5px 5px 5px #666;

}


  1. rollover-image {
  background-image:url(http://openwetware.org/images/7/77/UP12_Video1.jpg);
  background-position: -0px -0px; 

}

  1. rollover-image:hover {
  background-image:url(http://openwetware.org/images/4/46/UP12_Video2.jpg);
  background-position: 0px -0px;

}

  1. rollover-image-2 {
  background-image:url(http://openwetware.org/images/6/6d/Project1.jpg);
  background-position: 200px -0px;

}

  1. rollover-image-2:hover {
  background-image:url(http://openwetware.org/images/d/d1/Project2.jpg);
  background-position: 200px -0px; 

}

  1. rollover-image-3 {
 background-image:url(http://openwetware.org/images/9/94/UP12_Lab1.jpg);
 background-position: 400px -0px;

}

  1. rollover-image-3:hover {
 background-image:url(http://openwetware.org/images/5/58/Up12_Lab2.jpg);
 background-position: 400px -000px; 

}

  1. rollover-image-8 {
 background-image:url(http://openwetware.org/images/c/cf/UP12_Team1.jpg);
 background-position: 600px -0px;

}

  1. rollover-image-8:hover {
 background-image:url(http://openwetware.org/images/5/5c/UP12_Team2.jpg); */
 background-position: 600px -0px;

}

  1. totop {
 /* background-image:url(http://2012.igem.org/wiki/images/0/0d/Pfeil.png); */
  filter:alpha(opacity=50);
  height: 76px;
  width: 75px;
  position: fixed;
  right: 10px;
  z-index: -20;

}

  1. search-controls {
  width: auto;
  top: -4px;
  right: 200px;
  z-index: 15;

}

input.searchButton {

  color: #ffffff;

}

  1. menu_center {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;

}

input.searchButton:hover {

  color: #B41111;

}

</style> </head> </html> <html> <head> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script type="text/javascript"> (function($) {

   $.fn.innerfade = function(options) {
       return this.each(function() {   
           $.innerfade(this, options);
       });
   };
   $.innerfade = function(container, options) {
       var settings = {
       		'animationtype':    'fade',
           'speed':            'normal',
           'type':             'sequence',
           'timeout':          1000,
           'containerheight':  'auto',
           'runningclass':     'innerfade',
           'children':         null
       };
       if (options)
           $.extend(settings, options);
       if (settings.children === null)
           var elements = $(container).children();
       else
           var elements = $(container).children(settings.children);
       if (elements.length > 1) {
           $(container).css('position', 'relative').css('height', settings.containerheight).addClass(settings.runningclass);
           for (var i = 0; i < elements.length; i++) {
               $(elements[i]).css('z-index', String(elements.length-i)).css('position', 'absolute').hide();
           };
           if (settings.type == "sequence") {
               setTimeout(function() {
                   $.innerfade.next(elements, settings, 1, 0);
               }, settings.timeout);
               $(elements[0]).show();
           } else if (settings.type == "random") {
           		var last = Math.floor ( Math.random () * ( elements.length ) );
               setTimeout(function() {
                   do { 

current = Math.floor ( Math.random ( ) * ( elements.length ) ); } while (last == current ); $.innerfade.next(elements, settings, current, last);

               }, settings.timeout);
               $(elements[last]).show();

} else if ( settings.type == 'random_start' ) { settings.type = 'sequence'; var current = Math.floor ( Math.random () * ( elements.length ) ); setTimeout(function(){ $.innerfade.next(elements, settings, (current + 1) % elements.length, current); }, settings.timeout); $(elements[current]).show(); } else { alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\''); } }

   };
   $.innerfade.next = function(elements, settings, current, last) {
       if (settings.animationtype == 'slide') {
           $(elements[last]).slideUp(settings.speed);
           $(elements[current]).slideDown(settings.speed);
       } else if (settings.animationtype == 'fade') {
           $(elements[last]).fadeOut(settings.speed);
           $(elements[current]).fadeIn(settings.speed, function() {

removeFilter($(this)[0]); });

       } else
           alert('Innerfade-animationtype must either be \'slide\' or \'fade\'');
       if (settings.type == "sequence") {
           if ((current + 1) < elements.length) {
               current = current + 1;
               last = current - 1;
           } else {
               current = 0;
               last = elements.length - 1;
           }
       } else if (settings.type == "random") {
           last = current;
           while (current == last)
               current = Math.floor(Math.random() * elements.length);
       } else
           alert('Innerfade-Type must either be \'sequence\', \'random\' or \'random_start\'');
       setTimeout((function() {
           $.innerfade.next(elements, settings, current, last);
       }), settings.timeout);
   };

})(jQuery);

// **** remove Opacity-Filter in ie **** function removeFilter(element) { if(element.style.removeAttribute){ element.style.removeAttribute('filter'); } }

$(document).ready( function(){

$('#portfolio').innerfade({ speed: 'slow', timeout: 8000, type: 'sequence', containerheight: '280px' });

$('.fade').innerfade({ speed: 'slow', timeout: 1000, type: 'sequence', containerheight: '1.5em' }); } );


</script> </head> </html>


<html> <div id="banner-wrap"> <div id="portfolio"> <a href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT"><img src="http://openwetware.org/images/8/8c/Header3.jpg"/></a> <a href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT"><img src="http://openwetware.org/images/e/e8/Header1.jpg"/></a> <a href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT"><img src="http://openwetware.org/images/2/20/Header2.jpg"/></a> <a href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT"><img src="http://openwetware.org/images/e/e8/Header4.jpg"/></a> <a href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT"><img src="http://openwetware.org/images/0/09/UP12_header.jpg"/></a> </div> </div> <div class="clearfix"> </div> </html> <html> <div class="nav_menu gradient_golden"> <div id="menu_center"> <ul id="menu"> <li><a href="http://openwetware.org/index.php?title=Biomod/2012/Potsdam/DnanoPROT">Home</a></li> <li><a href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT/Overview">Overview</a> <li><a href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT/Project">Project</a> <li><a href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT/Lab">Lab</a> <li><a href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT/Team">Team</a> </ul> </div> </div> </html>


DnanoPROT: Nanostructuring by Combining DNA Origami and Proteins

Project Description

DNA origami are based on rational design principles and provide versatile structures. However, in nature examples of protein structures with diverse shapes and functions are more common. Therefore, we aim at testing and providing methods to combine DNA origami technology with proteins structures. Positioning of chemical modifications at the edges of flat DNA origami recognized by bivalent binding antibodies enabled us link the DNA origami to dimers and in the case of multiple chemical modifications to higher order oligomers. For a more general approach to link proteins in a directed manner to DNA origami we added a tag to recombinantly expressed proteins. This allows for enzymatic linkage of chemical modifications and subsequent click chemistry of proteins with alkyne modified DNA origami. Next to small proteins, we are testing the linkage of DNA origami with virus like particles.

<html> <div class="rollover">

  <div id="first_row">
  <a id="rollover-image" href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT/Overview"></a>
  <a id="rollover-image-2" href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT/Project"></a>
  <a id="rollover-image-3" href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT/Lab"></a>
  <a id="rollover-image-8" href="http://openwetware.org/wiki/Biomod/2012/Potsdam/DnanoPROT/Team"></a>
  </div>

</div> </html>

<html>

<head>

<style type="text/css">

  1. slider {
       border-radius: 5px;

margin: 0px auto; width: 975px; height: 340px; position: relative; overflow: hidden; background: #434343; }

  1. slider [id^='image']:target a {

background: #fff; border: 3px solid #333; width: 10px; height: 10px; }

  1. slider [id^="image"] div{

position: absolute; left: 2000px; border: 0; -moz-transition: 0.5s ease-in; -ms-transition: 0.5s ease-in; -webkit-transition: 0.5s ease-in; -o-transition: 0.5s ease-in; }

  1. slider [id^='image']:target div{

bottom: 0; left: 0; }

.slider-nav { background: #333; width: 16px; z-index: 9999; height: 16px; box-shadow: inset 0px 2px 10px rgba(0,0,0,0.3), 0px 0px 20px rgba(255,255,255,0.4); border-radius: 32px; position: absolute; bottom: 15px; }


  1. image-5 .slider-nav {

right: 80px; }

  1. image-6 .slider-nav {

right: 60px; }

  1. image-7 .slider-nav {

right: 40px; }

  1. image-8 .slider-nav {

right: 20px; }


div.image_description{

   position:absolute; 
   top:50 px;
   bottom: 0 px; 
   height: 40px;
   left:0px;  
   width:100%;  

   background-color:black;  
   font-family: 'tahoma';  
   font-size:15px;  
   color:white;  
   opacity:0.4; 
   filter:alpha(opacity=40); 

} p.image_description_content{

   padding:10px;  
   margin:0px; 

}

div.slider_wrapper {

  float:left; 
  position:relative;
  top: 0;

}

</style> <script type="text/javascript"> $(document).ready(function() {

 window.location.hash = '#image-5'

}) </script> </head>

<div id="slider">

<div id="image-5"> <div class="slider_wrapper">

               <img src="http://openwetware.org/images/a/a5/UP12_slider1.jpg"/>
               <div class="image_description">
                   <p class="image_description_content">
                      <b>On edges biotin modified DNA origamis are bound by anti-biotin antibody forming a nano substructure seen above</b>
                   </p>
               </div>
               </div>

<a class="slider-nav" href="#image-5"></a> </div> <div id="image-6"> <div class="slider_wrapper">

               <img src="http://openwetware.org/images/a/ab/Pr%C3%A4sentation1.jpg"/>
               <div class="image_description">
                   <p class="image_description_content">
                    <b>On the top biotin modified DNA origamis are bound by anti-biotin antibody forming another nano substructure</b>  
                   </p>
               </div>
               </div>

<a class="slider-nav" href="#image-6"></a> </div> <div id="image-7"> <div class="slider_wrapper">

               <img src="http://openwetware.org/images/1/19/UP12_slider5.jpg"/>
               <div class="image_description">
                   <p class="image_description_content">
                      <b>Binding DNA origamis to the virus surface using click chemistry and peptide ligation catalysed by the enzyme sortase</b>
                   </p>
               </div>
               </div>

<a class="slider-nav" href="#image-7"></a> </div> <div id="image-8"> <div class="slider_wrapper">

               <img src="http://openwetware.org/images/9/99/UP12_slider6.jpg"/>
               <div class="image_description">
                   <p class="image_description_content">
                      <b>Protein can be coupled on DNA origamis using click chemistry and sortase catalysed peptide ligation</b>
                   </p>
               </div>
               </div>

<a class="slider-nav" href="#image-8"></a> </div>


</div>

</html>