Difference between revisions of "Template:Freiburg/CSS"

Line 1: Line 1:
{{Freiburg/Javascript}}
+
{{Freiburg/CSS}}
 +
{{Freiburg/Menubar}}
 +
{{Freiburg/wiki_content_start}}
 +
<!-- wiki content goes in here -->
  
 
<html>
 
<html>
  
 
<style>
 
<style>
 
+
/*========= BEGIN: style for navigation bar ==========*/
 
+
#results {
 
+
    background: url(https://static.igem.org/mediawiki/2015/2/2e/Freiburg_icon_results_active_yellow.png) no-repeat;
/* =================== CSS Navigation =================== */
+
/* Resetting css coming from wiki itself
+
/* Clearing DokuWiki elements
+
/* Declare Fonts for non-Windows machines
+
/* CSS for Menubar
+
/* Important Site setup
+
/* Background
+
/* Text Styling
+
/* Full Width Banners
+
/* Footer
+
/* Accordion - Ausklappmenues
+
/* Lightbox
+
/*
+
/* Flipcard-CSS for the members-section: inline in https://2015.igem.org/Team:Freiburg/Team
+
/* CSS-slider: inline for the respective pages. e.g. https://2015.igem.org/wiki/index.php?title=Team:Freiburg/PaP/ScienceFair
+
/* CSS classes and ids for Human Practice
+
/* CSS for back-button
+
/* CSS for the upwards-blob: on wiki_content_start
+
/* CSS for Project Pages
+
/* Horizontal Menu for Paragraphs
+
/* =================== END: CSS Navigation =================== */
+
 
+
 
+
 
+
/* ============= Resetting css coming from wiki itself ============= */
+
body {
+
    font: sans-serif;
+
    color: #000;
+
    margin: 0px;
+
    padding: 0px;
+
    background-color: #FCFCFC;
+
line-height: 1.8;
+
 
}
 
}
  
a {
+
#results a {
     color: #002BB8;
+
     color: #ecdc18;
    text-decoration: none;
+
    background: transparent none repeat scroll 0% 0%;
+
 
}
 
}
  
p {
+
#runningchip {
     margin: 0.4em 0px 0.5em;
+
     left: 52%;
    line-height: 1.5em;
+
 
}
 
}
 +
/*========= END: style for navigation bar ==========*/
  
#globalWrapper {
+
.image_box.left {
     position: absolute;
+
     margin-right: 50px;
    font-size: 150%;
+
    width: 100%;
+
    margin: 0px;
+
    padding: 0px 0px 0px;
+
 
}
 
}
  
#mainContainer {
+
.image_box.right {
     margin: 0;
+
     margin-left: 50px;
    width: 100%;
+
 
}
 
}
  
#top_menu_under {
 
    position: relative;
 
    width: 100%;
 
    height: 16px;
 
    border-bottom: 2px solid #000;
 
}
 
  
#top_menu_14 {
+
/* ========== Style for Details-Boxes ================*/
    position: fixed;
+
    width: 100%;
+
    top: 0px;
+
    left: 0px;
+
    height: 16px;
+
    background-color: #383838;
+
    border-bottom: 2px solid #000;
+
    z-index: 9999;
+
}
+
  
 
+
.closeButton,
#top_menu_inside {
+
.details_box_trigger{
     display: block;
+
     display:inline-block;
     position: relative;
+
     transition:all linear 0.15s;
     width: 900px;
+
     text-decoration: none !important;
     height: 100%;
+
     color: #0051A2;
     margin: 0px auto;
+
     font-weight: 500;
     padding: 0px 10px;
+
     float: right;
     border-left: 1px solid #C8C8C8;
+
     cursor: pointer;
     border-right: 1px solid #C8C8C8;
+
     cursor: hand;
    font-family: "arial",sans-serif;
+
     font-size: 20px;
     font-size: 12px;
+
  font-weight: 300;
    font-weight: 400;
+
    color: #FFF;
+
 
}
 
}
  
  
 
+
.details_box_trigger.active {
#content {
+
    position: relative;
+
    width: 100%;
+
    margin: 0;
+
    padding: 0;
+
    background: #FFF none repeat scroll 0% 0%;
+
    color: #000;
+
    border-left: 0;
+
    border-right: 0;
+
  /* line-height: 0; */
+
    z-index: 2;
+
 
+
 
+
 
}
 
}
  
.visualClear {
+
.details_boxes{
     clear: both;
+
     padding:15px;
 +
    display: none;
 +
    overflow:hidden;
 +
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
 +
    border-radius:20px;
 +
    background:#EEE;
 
}
 
}
  
 
+
.hovertext{
/* removes URL from current site from the top of the window */
+
    visibility: hidden;
.firstHeading{
+
    opacity: 0;
     font-size: 0;
+
    position: absolute;
     border: 0;
+
     font-size: 120%;
     margin-bottom: -8px;
+
     font-weight: 500;
 +
     color: #0051A2;
 +
    transition: opacity 0.5s ease-in;
 
}
 
}
  
/* ============= END: Resetting css coming from wiki itself ============= */
+
#binding{
 
+
  left: 750px;
 
+
  top: 230px;
 
+
 
+
 
+
 
+
 
+
 
+
/* ============= Clearing DokuWiki elements ============= */
+
 
+
.tags{
+
/* remove tags from bottom */
+
    font-size: 0;
+
 
}
 
}
  
acronym{
+
#binding:hover + #binding_label {
/* remove text-decoration from acronyms*/
+
     transform: translateY(-40px);
     border-bottom: none;
+
     opacity: 1;
     text-decoration: none;
+
     visibility: visible;
     cursor: auto;
+
 
}
 
}
  
.urlextern {
+
#cellfree{
    background: none !important;
+
  left: 360px;
 +
  top: 150px; 
 
}
 
}
  
.link-https {
+
#cellfree:hover + #cellfree_label {
     background: none !important;
+
     transform: translateY(-40px);
 +
    opacity: 1;
 +
    visibility: visible;
 
}
 
}
  
 
+
#immobilization{
/* ============= END: Clearing DokuWiki elements ============= */
+
   left: 90px;
 
+
   top: 10px;
 
+
 
+
 
+
 
+
 
+
 
+
 
+
/* ============= Declaring Fonts  ============= */
+
 
+
@font-face {
+
    font-family: Roboto;
+
    src: url(https://static.igem.org/mediawiki/2015/e/ee/Freiburg_Roboto-Regular.eot);
+
    src: url(https://static.igem.org/mediawiki/2015/b/bf/Freiburg_Roboto-Regular-webfont.woff) format('woff'),
+
    url(https://static.igem.org/mediawiki/2015/c/c3/Freiburg_Roboto-Regular.ttf) format('truetype'),
+
    url('https://static.igem.org/mediawiki/2015/3/38/Freiburg_Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
+
}
+
@font-face {
+
   font-family: Roboto;
+
   src: url(https://static.igem.org/mediawiki/2015/7/7f/Freiburg_Roboto-Light.eot);
+
  src: url(https://static.igem.org/mediawiki/2015/2/28/Freiburg_Roboto-Light-webfont.woff) format('woff'),
+
  url(https://static.igem.org/mediawiki/2015/6/64/Freiburg_Roboto-Light.ttf)  format('truetype'),
+
  url('https://static.igem.org/mediawiki/2015/8/87/Freiburg_Roboto-Light-webfont.svg#RobotoLight') format('svg');
+
  font-style: normal;
+
  font-weight: 300;
+
 
+
 
}
 
}
  
@font-face {
+
#immobilization:hover + #immobilization_label {
     font-family: Roboto;
+
     transform: translateY(-40px);
    src: url(https://static.igem.org/mediawiki/2015/c/c4/Freiburg_Roboto-LightItalic-webfont.eot);
+
     opacity: 1;
     src: url(https://static.igem.org/mediawiki/2015/4/4b/Freiburg_Roboto-LightItalic-webfont.woff) format('woff'),        url(https://static.igem.org/mediawiki/2015/0/0e/Freiburg_Roboto-LightItalic-webfont.ttf)  format('truetype'),
+
     visibility: visible;
    url('https://static.igem.org/mediawiki/2015/1/1d/Freiburg_Roboto-LightItalic-webfont.svg#RobotoItalic') format('svg');
+
     font-weight: normal;
+
    font-style: italic;
+
 
}
 
}
  
@font-face {
+
#irif{
    font-family: Roboto;
+
  left: 80px;
    src: url(https://static.igem.org/mediawiki/2015/4/40/Freiburg_Roboto-Bold.eot);
+
  top: 290px;
    src: url(https://static.igem.org/mediawiki/2015/e/e4/Freiburg_Roboto-Bold-webfont.woff) format('woff'),
+
    url(https://static.igem.org/mediawiki/2015/b/b9/Freiburg_Roboto-Bold.ttf)  format('truetype'),
+
    url('https://static.igem.org/mediawiki/2015/4/40/Freiburg_Roboto-Bold-webfont.svg#RobotoBold') format('svg');
+
    font-weight: bold;
+
    font-style: normal;
+
 
}
 
}
  
@font-face {
+
#irif:hover + #irif_label {
     font-family: Roboto;
+
     transform: translateY(-40px);
    src: url(https://static.igem.org/mediawiki/2015/c/ce/Freiburg_Roboto-BoldItalic.eot);
+
     opacity: 1;
     src: url(https://static.igem.org/mediawiki/2015/8/89/Freiburg_Roboto-BoldItalic-webfont.woff)  format('woff'),
+
     visibility: visible;
    url(https://static.igem.org/mediawiki/2015/2/2f/Freiburg_Roboto-BoldItalic.ttf)  format('truetype'),
+
    url('https://static.igem.org/mediawiki/2015/a/ac/Freiburg_Roboto-BoldItalic-webfont.svg#RobotoBoldItalic') format('svg');
+
     font-weight: bold;
+
    font-style: italic;
+
 
}
 
}
  
 
+
#multbind{
 
+
  left: 430px;
 
+
   top: 230px;
/* ============= END: Declaring Fonts   ============= */
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
 
+
/* ============= Important Site setup ============= */
+
 
+
 
+
/* avoid dotted outline after clicking on links */
+
a {
+
  outline: 0;
+
 
}
 
}
  
/* properties for central text box */
+
#multbind:hover + #multbind_label {
.bodyContent{
+
     transform: translateY(-40px);
     overflow: hidden;
+
     opacity: 1;
     box-sizing: border-box;
+
     visibility: visible;
/* REMOVE WITH NEW NAVIGATION */
+
/* Avoid layout damage due to old navigation */
+
     clear: both;
+
 
}
 
}
/*adds padding on topside - necessary for attached menubar: mauri*/
 
.content_background_wrapper{
 
padding-top: 100px;
 
}
 
 
  
/* flows around all the content in the center of the screen */
+
#salmonella{
.page_content{
+
  left: 750px;
    margin: 20px 5px;
+
  top: 230px;
    box-sizing: border-box; /* allows for efficient paositioning of the elements within */
+
 
}
 
}
  
/* flows around text in the page_content */
+
#salmonella:hover + #salmonella_label {
.content_box{
+
     transform: translateY(-40px);
     border-radius: 30px 60px;
+
     opacity: 1;
     overflow: hidden;
+
     visibility: visible;
     padding: 4%;
+
    margin: 2em 0;
+
    margin-bottom: 0;
+
 
}
 
}
  
/* ================== FLEXBOXES and IMAGE_BOXES ===================*/
+
.circle:hover{
 
+
    transition: all linear 0.5s;
/* flexbox: contains the whole dokuwiki image part and renders it readable
+
     transform: translate(-25px, -25px);
/* flexbox images are placed in one row and break the text.
+
    width: 150px;
/* allow placing of several images including caption in one row */
+
     height: 150px;
.flexbox .thumb2 .thumbinner .thumbcaption { /*circumvents the iGEM tag thumbcaption*/
+
     border-radius: 100px;
     font-size: 70%;
+
     padding: 0 10px;
+
     text-align: justify;
+
 
}
 
}
  
.image_box .thumb2 .thumbinner img{
+
/* ========== END: Style for Details-Boxes ================*/
    max-width: 100%;
+
}
+
  
/* see: https://css-tricks.com/snippets/css/a-guide-to-flexbox/*/
 
  
.flexbox{
+
/* ========== Style for Circles in animated box ========== */
    display: -moz-box;
+
    display: -ms-flexbox;
+
    display: -webkit-box;
+
    display: flex;
+
    margin: 5% 0;
+
    -moz-justify-content: space-around;
+
    -ms-justify-content: space-around;
+
    -webkit-justify-content: space-around;
+
    justify-content: space-around;
+
    -moz-flex-wrap: wrap;
+
    -ms-flex-wrap: wrap;
+
    -webkit-flex-wrap: wrap;
+
    flex-wrap: wrap;
+
    align-content: center;
+
}
+
  
/* for DokuWiki image boxes this prevents a zickzack positioning of the flexbox childs when wrap occurs */
+
.circle{
a.media{
+
    width: 100px;
  margin: 0 auto;
+
    height: 100px;
 +
    border-radius: 50px;
 +
    border: 3px solid white;
 +
    position: absolute;
 
}
 
}
  
/* contains images where text shall float around */
+
.link_image{
.image_box{
+
     position: relative;
     margin: 0.4em 0;
+
    overflow: hidden;
+
    font-size: 70%;
+
    text-align: justify;
+
 
}
 
}
 
+
.results_headline{
.image_box.left{
+
color: #C5162F;
    float: left;
+
font-size: 40px;
    margin-right: 3%;
+
text-align: right;
 +
margin-bottom: 28px;
 +
margin-top: 20px;
 +
line-height: 45px;
 
}
 
}
 
+
.headline_left{
.image_box.right{
+
  text-align: left;
    float: right;
+
    margin-left: 3%
+
 
}
 
}
 
+
.kommentar{
@media screen and (max-width: 450px){
+
  display:none;
 
+
.image_box{
+
    display: -moz-box;
+
    display: -ms-flexbox;
+
    display: flex;
+
    display: -webkit-box;
+
    -ms-justify-content: space-around;
+
    -moz-justify-content: space-around;
+
    -webkit-justify-content: space-around;
+
    justify-content: space-around;
+
    -moz-flex-wrap: wrap;
+
    -ms-flex-wrap: wrap;
+
    flex-wrap: wrap;
+
    -webkit-flex-wrap: wrap;
+
    align-content: center;
+
    font-size: 70%;
+
    padding: 0;
+
    text-align: justify;
+
    width: 100%;
+
 
}
 
}
 
+
#device_results, #agfp_results, #specific_surfaces,#own_mix{
} /* end media query */
+
   margin-top:100px;
 
+
/* ================== END: FLEXBOXES and IMAGE_BOXES ===================*/
+
 
+
 
+
/* prevents the floating of images out of the DokuWiki-sections */
+
.level1,
+
.level2{
+
   overflow: hidden;
+
 
}
 
}
 
+
#anti_tetanus_results{
 
+
  margin-top:50px;
/* references coming from DokuWiki */
+
.footnotes{
+
    width: 90%;
+
    margin: 2em auto 0 auto;
+
 
}
 
}
  
.fn_top{
+
/* ========== END: Style for Circles in animated box ========== */
  font-size: 70%
+
}
+
  
/* styling tables coming from dokuwiki */
+
/* ========== Remove Explore the DiaCHIP on small devices =================*/
.content_box .table{
+
    margin: 2em 5%;
+
}
+
  
/* the element that can be used to style the table */
+
@media screen and (max-width: 450px){
.content_box .table .inline{
+
     #explore_DiaCHIP{
    font-size: 90%;
+
         display: none;
    width: 100%;
+
    border-collapse: collapse;
+
}
+
 
+
/* grey background for the header line */
+
.content_box .table th{
+
    background-color: #DDD;
+
}
+
 
+
/* greyish background for every second row */
+
.content_box .table tr:nth-child(odd){
+
    background-color: #EEE;
+
}
+
 
+
/* move text away from cell borders */
+
.content_box .table td,
+
.content_box .table th{
+
    padding: 0 10px;
+
}
+
 
+
/* hovering efects */
+
.content_box .table tr:hover{
+
    background-color: #D2D4F3;
+
}
+
 
+
/* === content_box2 for brick layout === */
+
 
+
/* two content boxes in same line (sb) */
+
.content_box2_parent {
+
    text-align: center;
+
}
+
 
+
.content_box2_child {               
+
    border-radius: 30px 60px;
+
    display: inline-block;
+
    background-color: #FFFFFF;
+
    text-align: justify;
+
    vertical-align: middle;
+
    box-shadow: 1px 1px 10px #888;
+
    -webkit-box-shadow: 1px 1px 10px #888;
+
    -moz-box-shadow: 1px 1px 10px #888;
+
    padding: 4%;
+
    min-height: 430px;
+
}
+
 
+
@media screen and (min-width: 601px){
+
     .content_box2_child{
+
         margin: 2em 1em 2em 1em;
+
        width: 35%;
+
 
     }
 
     }
}
 
  
@media screen and (max-width: 600px){
+
     #anti_tetanus_results, #device_results, #agfp_results, #specific_surfaces,#own_mix{
     .content_box2_child{
+
      margin-top:20px;
        margin: 1em 0 0;
+
        width: auto;
+
 
     }
 
     }
}
 
 
/* === Floatboxes for two column layout === */
 
 
.floatbox{
 
    width: 48%; /* 100% - 2*48% = 4% padding*/
 
}
 
  
@media screen and (min-width: 601px){
+
    .results_headline,
     .floatbox.left{
+
     .headline_left{
        float: left;
+
      font-size: 120%;
 +
      text-align: right;
 +
      margin-bottom: 10px;
 +
      margin-top: 20px;
 +
      line-height: inherit;
 
     }
 
     }
  
    .floatbox.right{
 
        float: right;
 
    }
 
 
}
 
}
  
@media screen and (max-width: 600px){
 
    .floatbox{
 
        float: none;
 
        width: auto;
 
    }
 
}
 
  
/* ============= END: Important Site setup ============= */
+
</style>
  
 +
<script type="text/javascript">
  
 +
// JQUERY for Details-Boxes
  
 
+
$(document).ready(function() {
 
+
     function close_accordion_section() {
 
+
        $('.details_box_trigger').removeClass('active');
/* ============= Text Styling ============= */
+
        $('.details_boxes').slideUp(300).removeClass('open');
 
+
.page_content{
+
     color: #666666;
+
    font-family: 'Roboto',sans-serif;
+
    font-style: normal;
+
    font-weight: 300;
+
    font-size: 110%;
+
    text-align: justify;
+
 
     }
 
     }
  
.page_content p{
+
    $('.details_box_trigger').click(function(e) {
    line-height: 1.8em;
+
        // Grab current anchor value
    margin-bottom: 2em; /*move next paragraph away vertically */
+
        var currentAttrValue = $(this).attr('href');
}
+
 +
        if($(e.target).is('.active')) {
 +
            close_accordion_section();
 +
        }else {
 +
            close_accordion_section();
 +
 +
            // Add active class to section title
 +
            $(this).addClass('active');
 +
            // Open up the hidden content panel
 +
            $(currentAttrValue).slideDown(300).addClass('open');
 +
        }
 +
 +
        e.preventDefault();
 +
    });
  
h1, h2, h3{
+
    $('.closeButton').click(function(){
 +
          close_accordion_section();
 +
    });
  
    font-family: "Roboto", sans-serif;
+
});
    color: #C5162F;
+
    clear: both;
+
    font-weight: 400;
+
    line-height: 1.2;
+
    border-bottom: 0;
+
}
+
  
h1 {font-size: 150%;}
+
// Details-Boxes
  
h2 {font-size: 120%;}
+
</script>
  
h3 {font-size: 110%;}
 
  
h4 {font-size: 100%; color: black; font-weight: 400;}
+
<div class="kommentar">
 +
mehr Formulierungen wie: we demonstrated..., we (successfully) tested, we achieved...
 +
</div>
  
.grey_titletext {
+
<div class="content_box">
    text-align: center;
+
    color: #888;
+
    font-size: 300%;
+
    text-shadow: 
+
        1px 0px 1px #ccc, 0px 1px 1px #eee,
+
        2px 1px 1px #ccc, 1px 2px 1px #eee,
+
        3px 2px 1px #ccc, 2px 3px 1px #eee,
+
        4px 3px 1px #ccc, 3px 4px 1px #eee,
+
        5px 4px 1px #ccc, 4px 5px 1px #eee,
+
        6px 5px 1px #ccc, 5px 6px 1px #eee,
+
        7px 6px 1px #ccc;
+
}
+
  
/* flows around text in the page_content */
+
<div class="results_headline">Essential Results</div><p>Our aim was to develop a novel diagnostic tool enabling fast, simultaneous and label-free detection of antibodies in human blood sera. We successfully generated our self-established <a href="#own_mix">cell-free expression system</a> based on an <i>E. coli</i> lysate, which revealed an expression efficiency comparable to a commercial kit. To immobilize the expressed proteins, we established a <a href="#specific_surfaces">surface</a> specifically binding our target proteins.
.content_box{
+
This system was used to produce a protein array that can be flushed with a serum sample. The binding of antibodies is detected in a label-free manner by an interferometric method called iRIf (imaging reflectometric interference) in real-time. Moreover, we <a href="#device_results">rebuilt the detection device</a> in a simplified and cost-efficient manner and thus, made it available for future iGEM Teams.
    background-color: #FFFFFF;
+
Using the DiaCHIP, we did not only show the presence of antibodies in distinct solutions but also verified them in complex samples as human blood serum.
    text-align: justify;
+
</p>
    box-shadow: 1px 1px 10px #888;
+
    -webkit-box-shadow: 1px 1px 10px #888;
+
    -moz-box-shadow: 1px 1px 10px #888;
+
}
+
  
/* properties for central text box */
 
#bodyContent{
 
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#fcfcfc+13,0051a2+100 */
 
background: rgb(252,252,252); /* Old browsers */
 
background: -moz-linear-gradient(-45deg, rgba(252,252,252,1) 13%, rgba(0,81,162,1) 100%); /* FF3.6+ */
 
background: -webkit-gradient(linear, left top, right bottom, color-stop(13%,rgba(252,252,252,1)), color-stop(100%,rgba(0,81,162,1))); /* Chrome,Safari4+ */
 
background: -webkit-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* Chrome10+,Safari5.1+ */
 
background: -o-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* Opera 11.10+ */
 
background: -ms-linear-gradient(-45deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* IE10+ */
 
background: linear-gradient(135deg, rgba(252,252,252,1) 13%,rgba(0,81,162,1) 100%); /* W3C */
 
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfcfc', endColorstr='#0051a2',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
 
}
 
  
/* references coming from DokuWiki */
+
<div id="anti_tetanus_results">
.footnotes{
+
    font-size: 80%;
+
    font-style: italic;
+
}
+
  
/* KOMMENTARFUNKTION */
+
     <div class="image_box right">
.kommentar{
+
        <div class="thumb2 trien" style="width:250px">
     background-color: red;
+
          <div class="thumbinner">
    color: black;
+
            <img src="https://static.igem.org/mediawiki/2015/7/74/Freiburg_labjournal-roi_selection_20150817_429.png"></img>
    border: 2px solid black;
+
       
    width: 100%;
+
            <div class="thumbcaption">
    clear: both;
+
            Video 1: Detection of anti-tetanus antibodies in human serum.
}
+
            </div>
.kommentar_stefan{
+
          </div>
    background-color: #ff1493;
+
        </div>
    color: black;
+
    </div>
    font-size: 14px;
+
    font-family: "Comic Sans MS";
+
    border: 2px solid black;
+
    width: 100%;
+
    clear: both;
+
}
+
  
.todo_box{
 
  background-color: lightblue;
 
  border: 1px dashed;
 
display: table;
 
}
 
  
/* Links */
 
#red_link {
 
  color: #C5162F;
 
}
 
  
/* ============= END: Text Styling ============= */
 
  
 +
  <div class="results_headline headline_left">Detection of Anti-Tetanus Antibodies in Human Blood Serum</div>
 +
    <p>
  
 +
    To test the DiaCHIP under real-life conditions, we analyzed the blood serum of a vaccinated person for the presence of anti-tetanus antibodies. We compared blood samples from before and after vaccination and could directly detect its effect. To capture the antibodies, the <a href="http://parts.igem.org/Part:BBa_K1621003">corresponding antigen</a> was expressed in <i>E. coli</i>, purified by His-tag affinity purification and spotted on a specific Ni-NTA surface. By comparing the spotted pattern with the localization of signal as detected by iRIf, the system's specificity even for complex samples was shown.
  
 +
    <a class="details_box_trigger" href="#details_box-1">▼ Detailed Description.</a>
 +
    </p>
 +
 
  
 +
    <div id="details_box-1" class="details_boxes">
  
 +
    <div class="image_box left">
 +
        <div class="thumb2 trien" style="width:250px"><div class="thumbinner">
 +
            <img src="https://static.igem.org/mediawiki/2015/5/5b/Freiburg_tetanus_westernblot_protpur.png" style="width:230px"></img>
 +
            <div class="thumbcaption">
 +
            <strong>Figure 1: Western Blot analysis of purified tetanus antigen.</strong>
 +
            </div>
 +
        </div>
 +
        </div>
 +
    </div>
  
 +
    <div class="image_box right">
 +
        <div class="thumb2 trien" style="width:250px"><div class="thumbinner">
 +
            <img src="https://static.igem.org/mediawiki/2015/b/b9/Freiburg_tetanus%28-%29_quotion_picture.png" style="width:230px"></img>
 +
            <div class="thumbcaption">
 +
            <strong>Figure 2: Quotient picture of iRIf measurement of human serum sample taken before vaccination.</strong>
 +
            </div>
 +
        </div>
 +
        </div>
 +
    </div>
  
 +
    <p>
 +
        The <a href=”http://parts.igem.org/Part:BBa_K1621003”>antigen</a> used for detection of anti-tetanus antibodies is derived from the tetanus neurotoxin and commonly used for <i>in vitro</i> testing. For preparation of the DiaCHIP, this antigen had to be overexpressed in <i>Escherichia coli</i> and purified from the whole cell lysate. To verify successful purification of the antigen Western Blot analysis was performed (figure 1). The usage of an antibody targeting the N-terminal His-tag revealed a protein with a molecular weight of about 50 kDa. This correlates with the expected molecular weight of the antigen <sup><a class="fn_top" href="#fn__1" id="fnt__1" name="fnt__1">1)</a></sup>. </br>
  
/* ============= Background ============= */
 
  
/* use central position as anchor for the vertical position of the side images */
+
<div class="level3">
.central_position_wrap{
+
<p>
    position: relative;
+
Before we performed an iRIf measurement with the blood of the freshly vaccinated person we checked if we could detect an interaction of antibodies present in the blood with our purified tetanus antigen by an ELISA.
}
+
Therefore, we spotted tetanus antigen and bBSA of the same concentration (12.5&nbsp;µg/mL) and twice PBS as negative controls. The tetanus antigen and one PBS well were incubated with 5&nbsp;mg/mL BSA, blood serum and HRP-labeled anti-human for 1&nbsp;h respectively. The bBSA and the other PBS well were incubated with HRP-labeled Streptavidine (0.5&nbsp;µg/mL) for 1 &nbsp;h (positive control). After each step the wells were washed with PBS. To visualize the binding, Tetramethylbenzidine was added and the absorption at 650&nbsp;nm over time was measured in a plate reader. The graph in figure 3 shows that the signal for tetanus is even higher than the positive control, which illustrates the successful binding of antibodies from the blood to tetanus antigens.
  
/* define width and positioning of side images */
 
.background_image_left,
 
.background_image_right{
 
    width: 150px;
 
    position: absolute;
 
}
 
  
.background_image_left{
+
        <div class="image_box left">
    left:0;
+
            <div class="thumb2 trien" style="width:250px"><div class="thumbinner">
    bottom: -20px;
+
                <img src="https://static.igem.org/mediawiki/2015/f/f0/Freiburg_labjournal-surchem-20150902_elisa.png" style="width:230px"></img>
}
+
                <div class="thumbcaption">
 +
                <strong>Figure 3: ELISA for the tetanus antigen with freshly vaccinated blood. The graph shows the absorption over time for TMB. The red line shows the binding of anti-tetanus antibodies out of the blood serum to purified tetanus antigen and the blue line shows the binding of HRP-Streptavidine to bBSA. The grey lines show the corresponding negative controls.</strong>
 +
                </div>
 +
            </div>
 +
            </div>
 +
        </div>
 +
</p>
 +
<p>
  
.background_image_right{
 
    top: 120px;
 
    right:0;
 
}
 
  
/* float the right image to the right s.t. it fits to the window border */
+
        The purified antigen was immobilized on a Ni-NTA surface that specifically binds His-tagged proteins. Look<a href=”https://2015.igem.org/Team:Freiburg/Results/Binding”> here</a> to read more about the establishment of this surface. As a positive control, self-purified His-tagged GFP was immobilized at another spot. The reliable detection of anti-GFP was shown before (link). No binding event should be detected at the negative control spot that was covered with <strong>bBSA/mCherry (??)</strong>.
.background_image_right img{
+
    </p>
    float: right;
+
<div>
}
+
        <div class="image_box left">
 +
            <div class="thumb2 trien" style="width:250px"><div class="thumbinner">
 +
                <img src="https://static.igem.org/mediawiki/2015/2/26/Freiburg_tetanus%28%2B%29_quotion_picture.png" style="width:230px"></img>
 +
                <div class="thumbcaption">
 +
                <strong>Figure 4: Quotient picture of iRIf measurement of human serum sample taken <b>three????</b> weeks after vaccination.</strong>
 +
                </div>
 +
            </div>
 +
            </div>
 +
        </div>
 +
</div>
  
 +
        <div class="image_box right">
 +
            <div class="thumb2 trien" style="width:250px">
 +
              <div class="thumbinner">
 +
                <img src="https://static.igem.org/mediawiki/2015/1/16/Freiburg_tetanus_binding_curve.png" style="width:230px">
 +
              </img>
 +
                <div class="thumbcaption">
 +
                <strong>PLATZHALTER! Figure 5: Binding curve of the tetanus measurements.</strong>
 +
                </div>
 +
            </div>
 +
            </div>
 +
        </div>
 +
    <p>
 +
        The human serum samples we obtained have been taken before and <strong>three?</strong> weeks after a patient received a vaccination boost against tetanus. Analysis of the samples was performed using the same array set-up. Figures 2 and 4 show quotient pictures representing changes in the thickness of the layer covering the slide while it was flushed with the respective samples. The negative control spots do not indicate any binding events, while the binding of anti-GFP to the positive control spot verifies that both experiments are reliable. The comparison of the antigen spots shows that we specifically detected anti-tetanus antibodies in human serum in response to vaccination. No binding event was detected by flushing the array with the sample assumed to be negative (figure 2), whereas a distinct spot is visible after flushing it with the positive sample (figure 4). Both measurements in real-time are shown in parallel in video 1.</br>
 +
        The increase in relative light intensity at distinct spots over the course of the experiment is visualized in figure 5 and can be correlated with the amount of antibodies binding to the respective antigen spot. This indicates that the DiaCHIP enables quantification of antibody titers in addition to detecting their presence.
  
 +
        <br>
 +
        Besides tetanus, other antigens of immunological relevance were taken into account. See all the results we obtained in terms of <a href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics">diagnostics</a>.
 +
    </p>
  
/* === Background: Responsive Design === */
+
<div class="footnotes">
 +
<div class="fn"><sup><a class="fn_bot" href="#fnt__1" id="fn__1" name="fn__1">1)</a></sup>
 +
<a class="urlextern" href="http://ac.els-cdn.com/S0171298510001567/1-s2.0-S0171298510001567-main.pdf?_tid=05754f9e-4f34-11e5-95a1-00000aacb360&amp;acdnat=1440952235_9b35c0a0389b3dbe95d48a4e8a583234" rel="nofollow" target="_Blank" title="http://ac.els-cdn.com/S0171298510001567/1-s2.0-S0171298510001567-main.pdf?_tid=05754f9e-4f34-11e5-95a1-00000aacb360&amp;acdnat=1440952235_9b35c0a0389b3dbe95d48a4e8a583234">Rui et al., 2011. Enhanced expression of soluble recombinant tetanus neurotoxin Hc in Escherichia coli as a tetanus vaccine candidate. Immunobiology.</a></div>
 +
</div>
  
/* hide side images if screen is too small */
+
        <a class="closeButton" href="#anti_tetanus_results">▲ Close Box</a>
@media only screen and (max-width: 1320px){
+
     </div>
     .background_image_left,
+
</div>
    .background_image_right{
+
        display: none;
+
    }
+
}
+
  
/* adapt box width s.t. it fits the screen but has a maximum width of 1000px --jb*/
+
<div id="agfp_results">
@media only screen and (min-width: 1021px){
+
    <div class="kommentar"> hier noch rein bringen, dass ihr euren eigenen cell-free mix hergestellt habt und mit diesem auch GFP expremieren könnt und es im array erfolgreich nachweisen könnt
    /* style for browsers wider than 1000px */
+
<br>
    /* the 20px come from the scrollbar */
+
Auch, dass euer Mix low-cost ist, und trotzdem auf dem Niveau (oder besser) eines kommerziellen kits liegt - Community gedanke etc.  (ps12092015)</div>
    .page_content{
+
 
        width: 1000px;
+
        margin-left: auto;
+
        margin-right: auto;
+
    }
+
}
+
@media only screen and (max-width: 1020px){
+
    /* style for browsers smaller than 1000px */
+
    .page_content{
+
        width: intrinsic;
+
        width: moz-fit-content;
+
        width: -webkit-fit-content;
+
        width: fit-content;   
+
    }
+
}
+
  
/* === END: Background: Responsive Design === */
+
    <div class="image_box left">
 +
            <div class="thumbinner"style="width:250px;">
 +
      <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
 +
      <video width="250" height="250" poster="https://static.igem.org/mediawiki/2015/9/93/Freiburg_20150819_NiNTA_cellfree_antigfp_preview.png" controls>
 +
        <source src="https://static.igem.org/mediawiki/2015/4/4a/Freiburg_20150819_NiNTA_cellfree_antigfp_WEB.mp4" type="video/mp4">
 +
      Your browser does not support the HTML5 video tag.
 +
      </video>
 +
      <div class="thumbcaption">Video 2: Binding of anti-GFP antibodies to GFP-His on a Ni-NTA surface. Anti-GFP antibodies bind both to purified GFP-His and cell-free expressed GFP-His. Control spots consisting of cell-free expression mix without DNA template show no binding.</div>
 +
      </div>
 +
         
  
/* ============= END: Background ============= */
+
    </div>
 +
    <div class="results_headline">
 +
        Detection of Anti-GFP Antibodies Using Cell-Free Expressed GFP on Ni-NTA
 +
    </div>
 +
    <p>
 +
    Our self-made cell-free expression, the DiaMIX, in combination with specific glass surfaces allows the expression and purification of target proteins in a simple manner. The mix, after expressing His-tagged GFP, was spotted on a Ni-NTA coated glass slide. Even after several washing steps it could be shown that the proteins maintain their antibody binding properties. A GFP antibody solution was flushed over the slide and a specific binding could be detected in iRIf.
 +
    <a class="details_box_trigger" href="#details_box-2">▼ Detailed Description.</a>
 +
    </p>
 +
 
  
 +
    <div id="details_box-2" class="details_boxes">
 +
      <p>
 +
      We could successfully show that the cell-free expression of GFP-His results in functional GFP proteins that are bound by anti-GFP antibodies during an iRIf measurent.
 +
The DNA coding for GFP fused to a 10x His-tag was added to the <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression#diamix" title="DiaMIX">DiaMIX</a> and expression was performed for 2 h. The DiaMIX containing cell-free expressed GFP-His was then spotted on an iRIf slide with a Ni-NTA surface by hand (figure 1).
 +
The spots were incubated on the slide over night.
 +
</p>
  
  
 +
<div class="image_box left">
 +
        <div class="thumb2 trien" style="width:250px"><div class="thumbinner">
 +
            <a href="https://static.igem.org/mediawiki/2015/5/5f/Freiburg_files-20150903_ni-nta_surface.png" class="lightbox_trigger">
 +
            <img src="https://static.igem.org/mediawiki/2015/5/5f/Freiburg_files-20150903_ni-nta_surface.png" style="width:300px">
 +
            </a>
 +
            </img>
 +
            <div class="thumbcaption">
 +
            <strong>Figure 1: Specific Ni-NTA surface on iRIf glass slide.</strong>
 +
            </div>
 +
        </div>
 +
        </div>
 +
    </div>
 +
<p>
 +
This specific surface allows binding of the expressed GFP-His via the His-tag while all the other proteins present in the DiaMIX are not bound to the surface.
 +
This step was followed by the <a href="https://2015.igem.org/Team:Freiburg/Protocols/iRIf_Measurement">blocking and washing protocol</a> to prevent further unspecific binding.
 +
The iRIf slide was then flushed with a anti-GFP antibody solution, to analyze the binding to the cell-free expressed GFP-His. As a positive control we spotted a purified GFP-His onto the surface as well as DiaMIX that did not contain any DNA as negative control (figure 2).
 +
</p>
 +
<div class="image_box right">
 +
        <div class="thumb2 trien" style="width:250px"><div class="thumbinner">
 +
            <img src="" style="width:230px"></img>
 +
            <div class="thumbcaption">
 +
            <strong>Figure 2: The two spots on the right are the cell-free expressed GFP-His proteins spotted onto the Ni-NTA surface. The spot on the left shows the positive control, GFP-His expressed in <i>E. coli</i>, purified and spotted onto the Ni-NTA surface.</strong>
 +
            </div>
 +
        </div>
 +
        </div>
 +
    </div>
 +
    <p>
 +
        The measurement shows a high signal for the cell-free expressed GFP-His and the positive control as can also be seen in the respective binding curve shwown in figure 3.
 +
        <br>
 +
       
 +
    </p>
  
 +
    <div class="image_box left">
 +
        <div class="thumb2 trien" style="width:410px"><div class="thumbinner"><a class="lightbox_trigger" href="https://static.igem.org/mediawiki/2015/6/6d/Freiburg_2015_freiburg_cellfex_gfp_on_ni-nta_binding_curve.png"><img alt="" class="mediabox2" src="https://static.igem.org/mediawiki/2015/6/6d/Freiburg_2015_freiburg_cellfex_gfp_on_ni-nta_binding_curve.png" width="400"/></a><div class="thumbcaption"><div class="magnify"><a class="internal" href="/igem2015/lib/exe/detail.php?id=results_overview&amp;media=2015_freiburg_cellfex_gfp_on_ni-nta_binding_curve.png" title="vergrößern"><img alt="" height="11" src="/igem2015/lib/plugins/imagebox/magnify-clip.png" width="15"/></a></div><strong>Figure 3: Binding curve of anti-GFP binding to cell-free expressed GFP-His on a Ni-NTA surface.</strong> Cell-free expressed GFP-His was spotted onto a specific Ni-NTA surface and flushed with anti-GFP. The binding curve indicated a binding event at the respective spot.</div></div></div>
 +
</div>
 +
</br></br></br></br></br></br></br></br></br></br></br></br></br></br>
 +
    <p>   
 +
Find out more about the <a href="https://2015.igem.org/Team:Freiburg/Results#assembly_pic">preparation</a> of the DiaCHIP by producing a protein microarray from a DNA template using cell-free expression.
 +
    <a class="closeButton" href="#agfp_results">▲ Close Box</a>
 +
    </div>
 +
</div>
 +
<div style="clear:both;"></div>
 +
<div id="device_results">
 +
   
 +
    <div class="image_box right">
 +
        <div class="thumb2 trien" style="width:250px">
 +
          <div class="thumbinner">
 +
              <a href="https://static.igem.org/mediawiki/2015/b/b7/Freiburg_Own_Device_Foto.jpg">
 +
              <img src="https://static.igem.org/mediawiki/2015/2/2e/Freiburg_Own_Device_Foto_preview.jpg"></img>
 +
              </a>
 +
              <div class="thumbcaption">
 +
                  Figure 2: Functional and low-cost variant of the measuring device.
 +
              </div>
 +
          </div>
 +
        </div>
 +
    </div>
 +
    <div class="results_headline headline_left">
 +
        Building Our Low-Cost DiaCHIP Measuring Device
 +
    </div>
 +
    <p>
 +
        Commercial systems using the iRIf technology (imaging reflectomretric interference) are mostly bulky and expensive machines even though the components they are based on are rather simple. So we decided on building our own device consisting of not much more than two lenses, a LED and a camera. With this system we were able to reliably detect the binding of anti-GFP to GFP, thus confirming a detection sensitivity in the range of protein-protein interactions. To enable future iGEM Teams to profit from this device as we did, we provide all plans and parts necessary to rebuild it on this website for everyonbe to download and use.
 +
        <a class="details_box_trigger" href="#details_box-3">▼ Detailed Description.</a>
 +
    </p>
 +
 
  
 +
    <div id="details_box-3" class="details_boxes">
 +
<div class="image_box left">
 +
<div class="thumbinner"style="width:324px;">
 +
            <meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
 +
                <video width="324" height="300" poster="https://static.igem.org/mediawiki/2015/8/80/Freiburg_iRIf_measurement_device_preview.jpg" controls>
 +
                    <source src="https://static.igem.org/mediawiki/2015/7/77/Freiburg_20150911_DEVICE_GFP_RABBIT.mp4" type="video/mp4">
 +
                        Your browser does not support the video tag.
 +
                </video>
 +
            <div class="thumbcaption">Video 1: Demonstration of the capability of our iRIf device at measuring antibody-antigen interaction. GFP was spotted on the left side, rabbit proteins (anti-HCV antibodies from rabbit) on the right.
 +
            </div>
 +
        </div>
 +
</div>
  
/* ============= Full Width Banners  ============= */
+
       
#banner_home{
+
    margin:0;
+
    padding: 0px;
+
    background-image: url("../wiki/images/8/89/Freiburg_frontpage_banner.jpg");
+
    background-repeat: no-repeat;
+
    background-size:  cover;
+
    width: 100%;
+
    height: 400px;
+
}
+
#banner_team{
+
    margin:0;
+
    padding: 0px;
+
    background-image: url("../wiki/images/e/e7/FreiburgTeam2015.jpg");
+
    background-repeat: no-repeat;
+
    background-size:  cover;
+
    width: 100%;
+
    height: 400px;
+
}
+
#banner_labjournal{
+
    margin:0;
+
    padding: 0px;
+
    background-image: url("https://static.igem.org/mediawiki/2015/d/dc/Labjournal.jpg");
+
    background-repeat: no-repeat;
+
    background-size:  cover;
+
    width: 100%;
+
    height: 400px;
+
}
+
  
/* ============= END: Full Width Banners  ============= */
+
      <p>
 +
            To test our device we aimed at reproducing measurements that we were previously able to perform in our commercial device. For this reason we focused on using two antibodies: anti-GFP and polyclonal anti-rabbit. GFP and rabbit derived anti-HCV (Hepatitis C Virus) antibodies were used as antigens in this experiment. Note that the anti-HCV antibodies only served as binding partners for the anti-rabbit antibodies, since no HCV proteins were used in this experiment.
 +
            The antigens were spotted onto an iRIf slide whose binding layer consisted of an APTES/PDITC surface. The spots on the slide were produced by pipetting 3.5 µl [1 mg/ml] rabbit-anti-HCV protein and 3.5 µl [1 mg/ml] GFP onto the slide and incubated overnight. After incubation the slide was blocked for 30 min in BSA solution.
  
 +
            A Canon 50D camera was used to record the measurement and was set to take one picture every 5 seconds. The exposure time was set in order for the pixels in the image to be approx. 80% of maximum light saturation before the solution was flushed onto the chip.
  
 +
            The antibody solutions were pipetted into the flow-chamber without the use of any microfluidic device. Instead, a syringe was loaded with 660 µl [5 µg/ml] anti-GFP antibody solution (diluted in PBS) and connected to the input pipe of our device. The content of the syringe was then slowly released via this pipe into the chamber of the device by gently dispensing the solution from the syringe. When the whole volume ran over the chip, the process was repeated with 660 µl [5 µg/ml] anti-rabbit antibody solution in the same way. The injection of both solutions was performed during approximately 45 minutes.
 +
        </p>
  
  
/* =================== Footer =================== */
+
            <div class="image_box left">
 +
                <div class="thumb2 trien" style="width:250px">
 +
                    <div class="thumbinner">
 +
                        <a href="https://static.igem.org/mediawiki/2015/2/24/Freiburg_20150908_Device_03_GFP_Rabbit_LUT_0985_1003.png">
 +
                            <img src="https://static.igem.org/mediawiki/2015/7/71/Freiburg_20150908_Device_03_GFP_Rabbit_LUT_0985_1003_preview.png"></img>
 +
                        </a>
 +
                    </div>
 +
                <strong>Figure 3: Quotient picture of the same measurement with favourable light conditions.</strong>
 +
                </div>
 +
            </div>
  
.content_footer{
+
        <p>
     background: #0051A2 scroll;
+
            Video 1 shows the results of the measurement. Both, binding of anti-GFP and anti-rabbit to the corresponding antigen spots, could be observed. Due to the fact that the experiment was performed on our demonstration device which was built with a transparent casing, fluctuations in surrounding light had a strong, detrimental influence on the measurement quality. To minimize the influence of the unstable surrounding light, the resulting pictures had to be averaged over 10 pictures each. This in turn lead to a more stable light situation, however the signal strengh dropped as a consequence. Figure XY shows a quotient picture of the measurement where the light situation was temporarily appropriate. The problem of surrounding light scattering into the device can of course be overcome using a non-transparent casing.      
    width: 100%;
+
    height: 75px;
+
}
+
  
.contacts{
+
        </p>
    width: 320px;
+
    <a class="closeButton" href="#device_results">▲ Close Box</a>
    margin: 0 auto;
+
     </div>
    display: flex;
+
    justify-content: space-around;
+
    display: -webkit-flex; /*Safari*/
+
     -webkit-justify-content: space-around; /* Safari 6.1+ */
+
}
+
  
#uni a img,
+
</div>
#bioss a img,
+
#facebook a img,
+
#email a img,
+
#zbsa a img{
+
    max-height: 40px
+
}
+
  
#uni,
+
<div id="specific_surfaces">
#bioss,
+
#facebook,
+
#email,
+
#zbsa{
+
    padding-top: 15px;
+
    padding-right:10px;
+
}
+
  
/* gap between social links and uni links */
+
<div class="image_box left">
#facebook{
+
      <div class="thumb2 trien" style="width:310px">
    padding-right: 40px;
+
          <div class="thumbinner">
}
+
              <a href="https://static.igem.org/mediawiki/2015/0/0b/Freiburg_GFP_CF_NiNTA.png" class="lightbox_trigger">
 +
              <img src="https://static.igem.org/mediawiki/2015/0/0b/Freiburg_GFP_CF_NiNTA.png" width="300px">
 +
              </a>
 +
              <div class="thumbcaption">
 +
                  <p>Figure 1: Cell-free expressed GFP-His spotted on a Ni-NTA slide. Cell-free expression was performed for 2 hours at 37°C. The positive control was purified GFP-His, the negative control was a sample of cell-free expression mix not containing DNA. </p>
 +
              </div>
 +
          </div>
 +
      </div>
 +
  </div>
  
@media screen and (max-width:400px){
 
    #uni,
 
    #zbsa{
 
        display: none;
 
    }
 
}
 
  
/* The html for the footer is included in wiki_content-end! */
+
    <div class="results_headline">
 +
        Establishing a Highly Specific Ni-NTA Surface
 +
    </div>
 +
           
 +
<p>
 +
        Since there is a variety of proteins present in the cell-free mix a specific surface on the future protein array is essential. That is why we established our Ni-NTA surface for the immobilization of the antigens on the chip. All expression constructs contain a His-tag fused to the coding sequence, resulting in antigens that can bind specifically to our Ni-NTA surface. Compared to an unspecific surface (PDITC) we could show that this Ni-NTA surface allows efficient binding of the target protein and prevents unspecific binding of other proteins that are present in the cell-free mix.
 +
        <a class="details_box_trigger" href="#details_box-4">▼ Detailed description.</a>
 +
    </p>
  
/* =================== END: Footer =================== */
 
  
/* =================== Accordion =====================*/
+
    <div id="details_box-4" class="details_boxes">
/*----- Accordion -----*/
+
.accordion, .accordion * {
+
    -webkit-box-sizing:border-box;
+
    -moz-box-sizing:border-box;
+
    box-sizing:border-box;
+
}
+
+
.accordion {
+
    overflow:hidden;
+
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
+
    border-radius:20px;
+
    background:#EEE;
+
}
+
+
/*----- Section Titles -----*/
+
.accordion-section-title {
+
    width:100%;
+
    padding:15px;
+
    display:inline-block;
+
    border-bottom:1px solid #1a1a1a;
+
    background: rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px 15px;
+
    transition:all linear 0.15s;
+
    /* Type */
+
    font-size:1.200em;
+
    text-shadow:0px 1px 0px #1a1a1a;
+
    color:#fff;
+
    text-decoration: none;
+
    padding-left: 50px;
+
}
+
+
.accordion-section-title.active, .accordion-section-title:hover {
+
    background:rgb(0, 81, 162) url("https://static.igem.org/mediawiki/2015/2/20/Freiburg_arrow_sprite.png") no-repeat scroll 20px -25px;
+
    /* Type */
+
    text-decoration:none;
+
}
+
+
.accordion-section:last-child .accordion-section-title {
+
    border-bottom:none;
+
}
+
}
+
+
/*----- Section Content -----*/
+
.accordion-section-content {
+
    padding:15px;
+
    display:none;
+
}
+
  
/* ================= END: Accordion =================*/
+
            <div class="image_box right">
 +
                <div class="thumb2 trien" style="width:310px">
 +
                <div class="thumbinner">
 +
                    <a href="https://static.igem.org/mediawiki/2015/1/1b/Freiburg_GFP_CF_PDITC.png" class="lightbox_trigger">
 +
                    <img src="https://static.igem.org/mediawiki/2015/1/1b/Freiburg_GFP_CF_PDITC.png" width="300px"> 
 +
                    <div class="thumbcaption">
 +
                    </a>
 +
                        <p>Figure 2: Cell-free expressed GFP-His spotted on a PDITC slide. Cell-free expression was performed for 2 hours at 37°C. The positive control was purified GFP-His, the negative control was a sample of cell-free expression mix not containing DNA. </p>
 +
                    </div>
 +
                </div>
 +
                </div>
 +
            </div>
  
/* =============== LIghtbox =========================*/
+
         
 +
            <p>
 +
                For cell-free protein expression lots of different proteins, like RNA-polymerases, ribosomes and other <i>E. coli</i> proteins, are essential. So during the process of cell-free expression all these proteins are, besides the target protein, also present in the microfluidic chamber. To have a sufficient amount of target protein immobilized on the chip we established a specific surface chemistry on the glass slide. After testing several <a href="https://2015.igem.org/Team:Freiburg/Results/Surface">tag systems</a> we established a Ni-NTA surface because it worked best for us. Using a Ni-NTA covered glass slide (figure 1) we could increase the amount of bound cell-free expressed GFP-His compared to an unspecific surface (figure 2). In both experiments ____2.5 µg?!?____ of self purified GFP-His was used as positive control. The cell-free expression mix without DNA is supposed to result in no target protein and served as negative control. The cell-free reactions were performed for 2 hours at 37°C. The samples were pipetted by hand onto the surfaces and incubated on the slide overnight. In the iRIf device, the optical detection method we used, the slides were blocked with BSA and then flushed with anti-GFP antibodies. An increase in light intensity on the slide where the spotted protein was located represents a binding event. Due to less unspecific binding of proteins to the surface, the interaction of anti-GFP antibodies with cell-free expressed GFP-His is higher on the Ni-NTA surface.
 +
            </p>
 +
      <a class="closeButton" href="#specific_surfaces">▲ Close Box</a>
 +
    </div>
 +
 
 +
</div>
  
/* from http://webdesign.tutsplus.com/articles/super-simple-lightbox-with-css-and-jquery--webdesign-3528 */
+
<div id="own_mix">
  
#lightbox {
 
    position:fixed; /* keeps the lightbox window in the current viewport */
 
    top:0;
 
    left:0;
 
    width:100%;
 
    height:100%;
 
    background: rgba(0,0,0,.7);
 
    text-align:center;
 
    z-index: 9999;
 
}
 
  
#lightbox p {
+
     <div class="results_headline">
     text-align:right;
+
        Producing Our Cell-free Expression Mix
     color:#fff;
+
     </div>
     margin-right:20px;
+
           
    font-size:12px;
+
     <p>
}
+
        The mechanism we are using to copy a DNA array template into a protein array on demand is based on cell-free expression. During our project we successfully established our cell-free expression system, the DiaMIX, from scratch, starting with an <i>E. coli</i> lysate. With this mix we succeeded in expressing correctly folded GFP and luciferase. Comparison of the DiaMIX with a commercial cell-free expression kit revealed the great potential of our system!
 +
        <a class="details_box_trigger" href="#details_box-5">▼ Detailed Description.</a>
 +
    </p>
  
#lightbox img {
 
    box-shadow:0 0 25px #111;
 
    -webkit-box-shadow:0 0 25px #111;
 
    -moz-box-shadow:0 0 25px #111;
 
    max-width: 95vw;
 
    max-height: 95vh;
 
    background-color: white;
 
}
 
  
/* =============== END: Lightbox =========================*/
+
    <div id="details_box-5" class="details_boxes">
 +
        <p>
 +
            Our DiaMIX was prepared based on a protocol of <div class="todo_box">??? (Ref.)</div>.
 +
<p>
 +
It is a very complex system containing many different enzymes and chemicals for special purposes. An overview of cell-free expression systems and its components can be found on the<a class=”wikilink1” href=https://2015.igem.org/Team:Freiburg/Project/Cellfree_Expression>methodology page</a>. <br/>
 +
To investigate the efficiency of our self-prepared expression system we performed an experiment comparing it to a commercially available kit. In order to obtain reliable results we used the exact same vector, containing a sequence encoding GFP. Like this we were able to trace the amount of expressed GFP using a plate reader over a period of two hours. As a negative control, both mixes were treated equally in a second sample but did not contain any DNA. <br/>
 +
The evaluation is shown in figure 1 and is based on triplicates. <b>The data was normalized to the mean value of the measurement of air. The uncertainty was calculated using the standard deviation. ÜBERARBEITEN JE NACH GRAPH</b> <br/>
  
#head {
+
picture; Figure 1: <b>Cell-free expression of GFP using the DiaMIX and a commercial kit.</b> The reaction was performed in a volume of 50 µl each and monitored every minute at 37°C over a period of two hours. Excitation at 480 nm, emission at 520 nm. <br/>
    height: 0px;
+
}
+
  
/* ============== BEGIN:CSS classes and ids for Human Practice =============*/
+
Both expression systems were shown to successfully express the applied vector. There is a clear enhancement of light emission observable at 520nm for both mixes in comparison to the respective negative control. The expression of GFP using the DiaMIX seems to be slightly better than by using the commercial kit. Still, one has to mention the actual purpose of the commercial kit to express linear templates. However, as the basis protocol for our mix was optimized for circular templates, we used a circular vector for the experiment. <br/>
#recipe {
+
Furthermore, as already shown above, we successfully verified the expression of GFP with our cell-free mix in an <a class="wikilink1" href="https://2015.igem.org/Team:Freiburg/Results#agfp_results" title="agfp_results">iRIf measurement</a>. <br/>
    width: 80%;
+
To obtain these final results, a lot of optimization and testing had to be done. If you want to know more about how we established the DiaMIX for the DiaCHIP, you can find detailed information about the most important experiments on the <a class=”wikilink1” href="https://2015.igem.org/Team:Freiburg/Results/Cellfree">cell-free expression results page</a>. <br/>
}
+
        </p>
/* ============== END:CSS classes and ids for Human Practice =============*/
+
            <a class="closeButton" href="#own_mix">▲ Close Box</a>
 +
    </div>
  
 +
</div>
 +
</div>
 +
</div>
  
/* ============== BEGIN:CSS for back-button =============*/
+
<div class="content_box" id="explore_DiaCHIP">
.button_back {
+
<h1>Explore the DiaCHIP</h1>
    margin-left: -14%;
+
<p>For establishing our device, we optimized all steps from the immobilization of DNA on the silicone of the flow-chamber to the specific binding of the target proteins on the glass slide. This way, we generated protein arrays we could use to detect different antibodies in human and rabbit serum with the iRIf detection method. <br> Click on the images below to explore our experiments from expression to detection!</p>
    margin-top: 5%;
+
    padding: 3px 5px 5px 0px;
+
    width: 10%;
+
    line-height: 1.5em;
+
    text-align: center;
+
    background-color: #0051A2;
+
    border-radius: 30px 15px 15px 30px;
+
    border: 1px groove #004081;
+
    float: left;
+
}
+
  
.white_link {
+
<h2 id="assembly_pic">Assembling the DiaCHIP</h1>
    color: #FFF;
+
}
+
/* ============== END:CSS for back-button =============*/
+
  
</style>
+
<div class="flexbox">
 +
    <div id="Assembling" class="link_image">
 +
        <a href="https://2015.igem.org/Team:Freiburg/Results/Immobilization" id="immobilization" class="circle"></a>
 +
        <div class="hovertext" id="immobilization_label">DNA Immobilization</div>
 +
        <a href="https://2015.igem.org/Team:Freiburg/Results/Cellfree" id="cellfree" class="circle"></a>
 +
        <div class="hovertext" id="cellfree_label">Cell-free Expression</div>
 +
        <a href="https://2015.igem.org/Team:Freiburg/Results/Surface" id="binding" class="circle"></a>
 +
        <div class="hovertext" id="binding_label">Binding on Surface</div>
 +
        <img src="https://static.igem.org/mediawiki/2015/f/f9/Freiburg_150912_Resultsoverviewgrafik_quer_DNAonPDMS_CF_Surface_RJ.png" width="100%">
 +
    </div>
 +
</div>
  
<!-- INITIALIZE UPWARDS BLOB, SO ITS TOP REFERENCES TO DOCUMENT TOP -->
+
<h2>Diagnosis of Antigens</h2>
  
<style>
+
<div class="flexbox">
 +
    <div id="Diagnosis" class="link_image">
 +
        <a href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics" id="multbind" class="circle"></a>
 +
        <div class="hovertext" id="multbind_label">Specific Detection of Multiple Binding Events</div>
 +
        <a href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics" id="salmonella" class="circle"></a>
 +
        <div class="hovertext" id="salmonella_label">Detection of Salmonella Single Chain Antibodies</div>
 +
        <a href="https://2015.igem.org/Team:Freiburg/Results/Diagnostics" id="irif" class="circle"></a>
 +
        <div class="hovertext" id="irif_label">Imaging Reflectometric Interference</div>
 +
        <img src="https://static.igem.org/mediawiki/2015/5/55/Freiburg_150912_Resultsoverviewgrafik_Tet_Sal_GFP_RJ.png" width="100%">
 +
    </div>
 +
</div>
 +
<p> Click on one of the images to get a further insight on how we build our DiaCHIP </p>
  
/* upwards navigation blob */
+
</div>
  
#upwards_blob{
+
</html>
    display: none;
+
}
+
  
 
+
<!-- wiki content ends here -->
/* min-width is chosen so the blob does just not interfere with the content box */
+
{{Freiburg/wiki_content_end}}
/* 1021 content_box-width + 46 blob-width + 20 scrollbar + some buffer space */
+
@media screen and (min-width: 1144px){
+
    #upwards_blob{
+
        transition: transform 0.5s ease;
+
        display: inline;
+
        position: absolute;
+
        top: 900px;
+
        right: 30px;
+
        z-index: 1000;
+
        transform: translateY(130px);
+
    }
+
}
+
 
+
</style>
+
 
+
<div id="upwards_blob"><a href="#globalWrapper"><img src="https://static.igem.org/mediawiki/2015/9/93/Freiburg_upwards_blob.png"></a></div>
+
 
+
<style>
+
/* ============= BEGIN: CSS for Project Pages ================ */
+
.content_text {
+
    border-radius: 30px 60px;
+
    overflow: hidden;
+
    padding: 4%;
+
    margin: 2em 0;
+
    margin-bottom: 0;
+
    text-align: justify;
+
    color: #000;
+
    width: 50%;
+
}
+
 
+
.header_box {
+
    overflow: hidden;
+
    padding: 2% 0%;
+
    margin: auto;
+
    width: 70%;
+
    text-align: center;
+
    /*background-color: #FFF;
+
    border-radius: 30px 60px;
+
    box-shadow: 1px 1px 10px #888;
+
    -webkit-box-shadow: 1px 1px 10px #888;
+
    -moz-box-shadow: 1px 1px 10px #888;*/
+
}
+
 
+
.rightshift {
+
    margin-right: -5%;
+
    margin-left: 8%;
+
}
+
 
+
.leftshift {
+
    margin-left: -5%;
+
    margin-right: 8%;
+
}
+
 
+
.reference_box {
+
    overflow: hidden;
+
    border: 1px solid rgb(0, 0, 0);
+
    border-radius: 10px;
+
    background-color: #EEE;
+
    text-align: justify;
+
    box-shadow: 1px 1px 10px #888;
+
    padding: 1% 2% 3%;
+
    margin-top: 2em;
+
    margin-right: auto;
+
    margin-left: auto;
+
    width: 80%;
+
}
+
 
+
.h1_fancy {
+
    text-align: center;
+
    color: #888;
+
    font-size: 300%;
+
    text-shadow: 
+
        1px 0px 1px #ccc, 0px 1px 1px #eee,
+
        2px 1px 1px #ccc, 1px 2px 1px #eee,
+
        3px 2px 1px #ccc, 2px 3px 1px #eee,
+
        4px 3px 1px #ccc, 3px 4px 1px #eee,
+
        5px 4px 1px #ccc, 4px 5px 1px #eee,
+
        6px 5px 1px #ccc, 5px 6px 1px #eee,
+
        7px 6px 1px #ccc;
+
}
+
/* ============= END: CSS for Project Pages ================ */
+
 
+
 
+
/* ============= BEGIN: Horizontal Menu for Paragraphs ================ */
+
.horizontal_menu {
+
    margin: 0px auto;
+
}
+
 
+
.horizontal_menu ul{
+
    margin: 0px auto;
+
    padding: 0px;
+
    list-style: none;
+
    text-align: center;
+
}
+
 
+
.horizontal_menu li {
+
    margin: 0px 5px auto;
+
    padding: 1%;
+
    display: inline;
+
    text-align: center;
+
    border: 2px groove #0051A2;
+
    border-radius: 10px;
+
    background-color: #0051A2;
+
}
+
 
+
.horizontal_menu a {
+
    color: #FFF;
+
}
+
/* ============= END: Horizontal Menu for Paragraphs ================ */
+
 
+
/* ============= Added: Styling for results pages ================ */
+
 
+
.results_headline{
+
color: #C5162F;
+
font-size: 40px;
+
text-align: right;
+
margin-bottom: 28px;
+
margin-top: 20px;
+
line-height: 45px;
+
}
+
.headline_left{
+
  text-align: left;
+
}
+
 
+
</style>
+
 
+
 
+
</html>
+

Revision as of 20:20, 16 September 2015

""

mehr Formulierungen wie: we demonstrated..., we (successfully) tested, we achieved...
Essential Results

Our aim was to develop a novel diagnostic tool enabling fast, simultaneous and label-free detection of antibodies in human blood sera. We successfully generated our self-established cell-free expression system based on an E. coli lysate, which revealed an expression efficiency comparable to a commercial kit. To immobilize the expressed proteins, we established a surface specifically binding our target proteins. This system was used to produce a protein array that can be flushed with a serum sample. The binding of antibodies is detected in a label-free manner by an interferometric method called iRIf (imaging reflectometric interference) in real-time. Moreover, we rebuilt the detection device in a simplified and cost-efficient manner and thus, made it available for future iGEM Teams. Using the DiaCHIP, we did not only show the presence of antibodies in distinct solutions but also verified them in complex samples as human blood serum.

Video 1: Detection of anti-tetanus antibodies in human serum.
Detection of Anti-Tetanus Antibodies in Human Blood Serum

To test the DiaCHIP under real-life conditions, we analyzed the blood serum of a vaccinated person for the presence of anti-tetanus antibodies. We compared blood samples from before and after vaccination and could directly detect its effect. To capture the antibodies, the corresponding antigen was expressed in E. coli, purified by His-tag affinity purification and spotted on a specific Ni-NTA surface. By comparing the spotted pattern with the localization of signal as detected by iRIf, the system's specificity even for complex samples was shown. ▼ Detailed Description.

Figure 1: Western Blot analysis of purified tetanus antigen.
Figure 2: Quotient picture of iRIf measurement of human serum sample taken before vaccination.

The antigen used for detection of anti-tetanus antibodies is derived from the tetanus neurotoxin and commonly used for in vitro testing. For preparation of the DiaCHIP, this antigen had to be overexpressed in Escherichia coli and purified from the whole cell lysate. To verify successful purification of the antigen Western Blot analysis was performed (figure 1). The usage of an antibody targeting the N-terminal His-tag revealed a protein with a molecular weight of about 50 kDa. This correlates with the expected molecular weight of the antigen 1).

Before we performed an iRIf measurement with the blood of the freshly vaccinated person we checked if we could detect an interaction of antibodies present in the blood with our purified tetanus antigen by an ELISA. Therefore, we spotted tetanus antigen and bBSA of the same concentration (12.5 µg/mL) and twice PBS as negative controls. The tetanus antigen and one PBS well were incubated with 5 mg/mL BSA, blood serum and HRP-labeled anti-human for 1 h respectively. The bBSA and the other PBS well were incubated with HRP-labeled Streptavidine (0.5 µg/mL) for 1  h (positive control). After each step the wells were washed with PBS. To visualize the binding, Tetramethylbenzidine was added and the absorption at 650 nm over time was measured in a plate reader. The graph in figure 3 shows that the signal for tetanus is even higher than the positive control, which illustrates the successful binding of antibodies from the blood to tetanus antigens.

Figure 3: ELISA for the tetanus antigen with freshly vaccinated blood. The graph shows the absorption over time for TMB. The red line shows the binding of anti-tetanus antibodies out of the blood serum to purified tetanus antigen and the blue line shows the binding of HRP-Streptavidine to bBSA. The grey lines show the corresponding negative controls.

The purified antigen was immobilized on a Ni-NTA surface that specifically binds His-tagged proteins. Look here to read more about the establishment of this surface. As a positive control, self-purified His-tagged GFP was immobilized at another spot. The reliable detection of anti-GFP was shown before (link). No binding event should be detected at the negative control spot that was covered with bBSA/mCherry (??).

Figure 4: Quotient picture of iRIf measurement of human serum sample taken three???? weeks after vaccination.
PLATZHALTER! Figure 5: Binding curve of the tetanus measurements.

The human serum samples we obtained have been taken before and three? weeks after a patient received a vaccination boost against tetanus. Analysis of the samples was performed using the same array set-up. Figures 2 and 4 show quotient pictures representing changes in the thickness of the layer covering the slide while it was flushed with the respective samples. The negative control spots do not indicate any binding events, while the binding of anti-GFP to the positive control spot verifies that both experiments are reliable. The comparison of the antigen spots shows that we specifically detected anti-tetanus antibodies in human serum in response to vaccination. No binding event was detected by flushing the array with the sample assumed to be negative (figure 2), whereas a distinct spot is visible after flushing it with the positive sample (figure 4). Both measurements in real-time are shown in parallel in video 1.
The increase in relative light intensity at distinct spots over the course of the experiment is visualized in figure 5 and can be correlated with the amount of antibodies binding to the respective antigen spot. This indicates that the DiaCHIP enables quantification of antibody titers in addition to detecting their presence.
Besides tetanus, other antigens of immunological relevance were taken into account. See all the results we obtained in terms of diagnostics.

▲ Close Box
hier noch rein bringen, dass ihr euren eigenen cell-free mix hergestellt habt und mit diesem auch GFP expremieren könnt und es im array erfolgreich nachweisen könnt
Auch, dass euer Mix low-cost ist, und trotzdem auf dem Niveau (oder besser) eines kommerziellen kits liegt - Community gedanke etc. (ps12092015)
Video 2: Binding of anti-GFP antibodies to GFP-His on a Ni-NTA surface. Anti-GFP antibodies bind both to purified GFP-His and cell-free expressed GFP-His. Control spots consisting of cell-free expression mix without DNA template show no binding.
Detection of Anti-GFP Antibodies Using Cell-Free Expressed GFP on Ni-NTA

Our self-made cell-free expression, the DiaMIX, in combination with specific glass surfaces allows the expression and purification of target proteins in a simple manner. The mix, after expressing His-tagged GFP, was spotted on a Ni-NTA coated glass slide. Even after several washing steps it could be shown that the proteins maintain their antibody binding properties. A GFP antibody solution was flushed over the slide and a specific binding could be detected in iRIf. ▼ Detailed Description.

We could successfully show that the cell-free expression of GFP-His results in functional GFP proteins that are bound by anti-GFP antibodies during an iRIf measurent. The DNA coding for GFP fused to a 10x His-tag was added to the DiaMIX and expression was performed for 2 h. The DiaMIX containing cell-free expressed GFP-His was then spotted on an iRIf slide with a Ni-NTA surface by hand (figure 1). The spots were incubated on the slide over night.

Figure 1: Specific Ni-NTA surface on iRIf glass slide.

This specific surface allows binding of the expressed GFP-His via the His-tag while all the other proteins present in the DiaMIX are not bound to the surface. This step was followed by the blocking and washing protocol to prevent further unspecific binding. The iRIf slide was then flushed with a anti-GFP antibody solution, to analyze the binding to the cell-free expressed GFP-His. As a positive control we spotted a purified GFP-His onto the surface as well as DiaMIX that did not contain any DNA as negative control (figure 2).

Figure 2: The two spots on the right are the cell-free expressed GFP-His proteins spotted onto the Ni-NTA surface. The spot on the left shows the positive control, GFP-His expressed in E. coli, purified and spotted onto the Ni-NTA surface.

The measurement shows a high signal for the cell-free expressed GFP-His and the positive control as can also be seen in the respective binding curve shwown in figure 3.

Figure 3: Binding curve of anti-GFP binding to cell-free expressed GFP-His on a Ni-NTA surface. Cell-free expressed GFP-His was spotted onto a specific Ni-NTA surface and flushed with anti-GFP. The binding curve indicated a binding event at the respective spot.














Find out more about the preparation of the DiaCHIP by producing a protein microarray from a DNA template using cell-free expression. ▲ Close Box

Figure 2: Functional and low-cost variant of the measuring device.
Building Our Low-Cost DiaCHIP Measuring Device

Commercial systems using the iRIf technology (imaging reflectomretric interference) are mostly bulky and expensive machines even though the components they are based on are rather simple. So we decided on building our own device consisting of not much more than two lenses, a LED and a camera. With this system we were able to reliably detect the binding of anti-GFP to GFP, thus confirming a detection sensitivity in the range of protein-protein interactions. To enable future iGEM Teams to profit from this device as we did, we provide all plans and parts necessary to rebuild it on this website for everyonbe to download and use. ▼ Detailed Description.

Video 1: Demonstration of the capability of our iRIf device at measuring antibody-antigen interaction. GFP was spotted on the left side, rabbit proteins (anti-HCV antibodies from rabbit) on the right.

To test our device we aimed at reproducing measurements that we were previously able to perform in our commercial device. For this reason we focused on using two antibodies: anti-GFP and polyclonal anti-rabbit. GFP and rabbit derived anti-HCV (Hepatitis C Virus) antibodies were used as antigens in this experiment. Note that the anti-HCV antibodies only served as binding partners for the anti-rabbit antibodies, since no HCV proteins were used in this experiment. The antigens were spotted onto an iRIf slide whose binding layer consisted of an APTES/PDITC surface. The spots on the slide were produced by pipetting 3.5 µl [1 mg/ml] rabbit-anti-HCV protein and 3.5 µl [1 mg/ml] GFP onto the slide and incubated overnight. After incubation the slide was blocked for 30 min in BSA solution. A Canon 50D camera was used to record the measurement and was set to take one picture every 5 seconds. The exposure time was set in order for the pixels in the image to be approx. 80% of maximum light saturation before the solution was flushed onto the chip. The antibody solutions were pipetted into the flow-chamber without the use of any microfluidic device. Instead, a syringe was loaded with 660 µl [5 µg/ml] anti-GFP antibody solution (diluted in PBS) and connected to the input pipe of our device. The content of the syringe was then slowly released via this pipe into the chamber of the device by gently dispensing the solution from the syringe. When the whole volume ran over the chip, the process was repeated with 660 µl [5 µg/ml] anti-rabbit antibody solution in the same way. The injection of both solutions was performed during approximately 45 minutes.

Figure 3: Quotient picture of the same measurement with favourable light conditions.

Video 1 shows the results of the measurement. Both, binding of anti-GFP and anti-rabbit to the corresponding antigen spots, could be observed. Due to the fact that the experiment was performed on our demonstration device which was built with a transparent casing, fluctuations in surrounding light had a strong, detrimental influence on the measurement quality. To minimize the influence of the unstable surrounding light, the resulting pictures had to be averaged over 10 pictures each. This in turn lead to a more stable light situation, however the signal strengh dropped as a consequence. Figure XY shows a quotient picture of the measurement where the light situation was temporarily appropriate. The problem of surrounding light scattering into the device can of course be overcome using a non-transparent casing.

▲ Close Box

Figure 1: Cell-free expressed GFP-His spotted on a Ni-NTA slide. Cell-free expression was performed for 2 hours at 37°C. The positive control was purified GFP-His, the negative control was a sample of cell-free expression mix not containing DNA.

Establishing a Highly Specific Ni-NTA Surface

Since there is a variety of proteins present in the cell-free mix a specific surface on the future protein array is essential. That is why we established our Ni-NTA surface for the immobilization of the antigens on the chip. All expression constructs contain a His-tag fused to the coding sequence, resulting in antigens that can bind specifically to our Ni-NTA surface. Compared to an unspecific surface (PDITC) we could show that this Ni-NTA surface allows efficient binding of the target protein and prevents unspecific binding of other proteins that are present in the cell-free mix. ▼ Detailed description.

Figure 2: Cell-free expressed GFP-His spotted on a PDITC slide. Cell-free expression was performed for 2 hours at 37°C. The positive control was purified GFP-His, the negative control was a sample of cell-free expression mix not containing DNA.

For cell-free protein expression lots of different proteins, like RNA-polymerases, ribosomes and other E. coli proteins, are essential. So during the process of cell-free expression all these proteins are, besides the target protein, also present in the microfluidic chamber. To have a sufficient amount of target protein immobilized on the chip we established a specific surface chemistry on the glass slide. After testing several tag systems we established a Ni-NTA surface because it worked best for us. Using a Ni-NTA covered glass slide (figure 1) we could increase the amount of bound cell-free expressed GFP-His compared to an unspecific surface (figure 2). In both experiments ____2.5 µg?!?____ of self purified GFP-His was used as positive control. The cell-free expression mix without DNA is supposed to result in no target protein and served as negative control. The cell-free reactions were performed for 2 hours at 37°C. The samples were pipetted by hand onto the surfaces and incubated on the slide overnight. In the iRIf device, the optical detection method we used, the slides were blocked with BSA and then flushed with anti-GFP antibodies. An increase in light intensity on the slide where the spotted protein was located represents a binding event. Due to less unspecific binding of proteins to the surface, the interaction of anti-GFP antibodies with cell-free expressed GFP-His is higher on the Ni-NTA surface.

▲ Close Box
Producing Our Cell-free Expression Mix

The mechanism we are using to copy a DNA array template into a protein array on demand is based on cell-free expression. During our project we successfully established our cell-free expression system, the DiaMIX, from scratch, starting with an E. coli lysate. With this mix we succeeded in expressing correctly folded GFP and luciferase. Comparison of the DiaMIX with a commercial cell-free expression kit revealed the great potential of our system! ▼ Detailed Description.

Our DiaMIX was prepared based on a protocol of

??? (Ref.)
.

It is a very complex system containing many different enzymes and chemicals for special purposes. An overview of cell-free expression systems and its components can be found on themethodology page.
To investigate the efficiency of our self-prepared expression system we performed an experiment comparing it to a commercially available kit. In order to obtain reliable results we used the exact same vector, containing a sequence encoding GFP. Like this we were able to trace the amount of expressed GFP using a plate reader over a period of two hours. As a negative control, both mixes were treated equally in a second sample but did not contain any DNA.
The evaluation is shown in figure 1 and is based on triplicates. The data was normalized to the mean value of the measurement of air. The uncertainty was calculated using the standard deviation. ÜBERARBEITEN JE NACH GRAPH
picture; Figure 1: Cell-free expression of GFP using the DiaMIX and a commercial kit. The reaction was performed in a volume of 50 µl each and monitored every minute at 37°C over a period of two hours. Excitation at 480 nm, emission at 520 nm.
Both expression systems were shown to successfully express the applied vector. There is a clear enhancement of light emission observable at 520nm for both mixes in comparison to the respective negative control. The expression of GFP using the DiaMIX seems to be slightly better than by using the commercial kit. Still, one has to mention the actual purpose of the commercial kit to express linear templates. However, as the basis protocol for our mix was optimized for circular templates, we used a circular vector for the experiment.
Furthermore, as already shown above, we successfully verified the expression of GFP with our cell-free mix in an iRIf measurement.
To obtain these final results, a lot of optimization and testing had to be done. If you want to know more about how we established the DiaMIX for the DiaCHIP, you can find detailed information about the most important experiments on the cell-free expression results page.

▲ Close Box

Explore the DiaCHIP

For establishing our device, we optimized all steps from the immobilization of DNA on the silicone of the flow-chamber to the specific binding of the target proteins on the glass slide. This way, we generated protein arrays we could use to detect different antibodies in human and rabbit serum with the iRIf detection method.
Click on the images below to explore our experiments from expression to detection!

Assembling the DiaCHIP

Diagnosis of Antigens

Click on one of the images to get a further insight on how we build our DiaCHIP