Loading menubar.....

Difference between revisions of "Team:Tuebingen/test famke2"

Line 2: Line 2:
  
 
<meta charset="UTF-8"/>
 
<meta charset="UTF-8"/>
 +
 +
<style>
 +
        /* Paste this css to your style sheet file or under head tag */
 +
        /* This only works with JavaScript,
 +
        if it's not present, don't show loader */
 +
        .js #loader {
 +
            display: block;
 +
            position: absolute;
 +
            left: 100px;
 +
            top: 0;
 +
        }
 +
 +
        .se-pre-con {
 +
            position: fixed;
 +
            left: 0px;
 +
            top: 0px;
 +
            width: 100%;
 +
            height: 100%;
 +
            z-index: 9999;
 +
            background: #2B2B35;
 +
        }
 +
 +
        .se-pre-con img {
 +
            width: 40%;
 +
            height: 40%;
 +
            margin-left: 30%;
 +
            margin-top: 15%;
 +
        }
 +
 +
        @media screen and (min-width: 1500px ) {
 +
            .se-pre-con img {
 +
                margin-top: 20%;
 +
                width: 25%;
 +
                height: 15%;
 +
                margin-left: 35%;
 +
            }
 +
        }
 +
 +
        @media screen and (max-width: 1100px ) {
 +
            .se-pre-con img {
 +
                margin-top: 20%;
 +
                height: 30%;
 +
                width: 50%;
 +
                margin-left: 25%;
 +
            }
 +
        }
 +
 +
        @media screen and (max-width: 700px ) {
 +
            .se-pre-con img {
 +
                margin-top: 18%;
 +
                height: 20%;
 +
            }
 +
        }
 +
    </style>
 +
</head>
 +
<body>
 +
<div class="se-pre-con">
 +
    <img src="https://2019.igem.org/wiki/images/8/83/T--Tuebingen--preloader.gif">
 +
</div>
 +
<script src="https://2019.igem.org/Team:Tuebingen/jqueryLoadJS?action=raw&ctype=text/javascript"></script>
 +
<script src="https://2019.igem.org/Team:Tuebingen/jmodernizerJS?action=raw&ctype=text/javascript"></script>
 +
<script>
 +
    $(window).load(function () {
 +
        setTimeout(removeLoader, 1000);
 +
    }); //wait for page load PLUS one seconds.
 +
    function removeLoader() {
 +
        $(".se-pre-con").fadeOut(500, function () {
 +
            // fadeOut complete. Remove the loading div
 +
            $(".se-pre-con").remove(); //makes page more lightweight
 +
        });
 +
    }
 +
</script>
 +
</body>
 +
 
<style>
 
<style>
 
     /*!
 
     /*!
Line 89: Line 163:
 
     p {
 
     p {
 
         margin-top: 0;
 
         margin-top: 0;
         margin-bottom: 1rem
+
         margin-bottom: 1rem;
 +
        color: #F4F0DE;
 
     }
 
     }
  
Line 9,220: Line 9,295:
 
     }
 
     }
  
    /*++++++++++++++++++++++++++++++++
+
/*++++++++++++++++++++++++++++++++
 
contents CSS ++++++++++++++++++++++++++++++*/
 
contents CSS ++++++++++++++++++++++++++++++*/
 
     * {
 
     * {
Line 9,262: Line 9,337:
 
         text-transform: uppercase;
 
         text-transform: uppercase;
 
         letter-spacing: 0.125em;
 
         letter-spacing: 0.125em;
         color: #555;
+
         color: #fff;
 
     }
 
     }
  
Line 9,287: Line 9,362:
 
     .post-content h1 {
 
     .post-content h1 {
 
         padding-top: 30px;
 
         padding-top: 30px;
         color: rgba(105, 202, 98, 1.1);
+
         color: #2ecc71;
 
     }
 
     }
  
Line 9,293: Line 9,368:
 
     .post-content h2 {
 
     .post-content h2 {
 
         padding-top: 150px;
 
         padding-top: 150px;
         color: rgba(105, 202, 98, 1.1);
+
         color: #2ecc71;
 
     }
 
     }
  
 
     /* link color */
 
     /* link color */
 
     .post-content a {
 
     .post-content a {
         color: rgba(105, 202, 98, 1.1);
+
         color: #2ecc71;
 
     }
 
     }
  
     #glpreferences a {
+
     .glpreferences a {
         color: rgba(105, 202, 98, 1.1);
+
         color: #F4F0DE;
 
     }
 
     }
 +
   
 +
 +
/* Tell the <li> to not display numbers, but keep track of what the numbers should be */
 +
ol li {
 +
  counter-increment: list;
 +
  list-style-type: none;
 +
  position: relative;
 +
}
 +
/* Outout the numbers using the counter() function, but use a custom color, and position the numbers how we want */
 +
ol li:before {
 +
  color: #F4F0DE;
 +
  content: counter(list) ".";
 +
  left:-32px;
 +
  position: absolute;
 +
  text-align: right;
 +
  width: 26px;
 +
}
 +
 +
  
  
Line 9,314: Line 9,408:
 
         bottom: auto;
 
         bottom: auto;
 
         display: none;
 
         display: none;
         stroke: rgba(105, 202, 98, 1.1);
+
         stroke: #2ecc71;
 
         transform: translateY(-50%);
 
         transform: translateY(-50%);
 
     }
 
     }
Line 9,343: Line 9,437:
 
         position: relative;
 
         position: relative;
 
         text-decoration: none;
 
         text-decoration: none;
         color: #333;
+
         color: #fff;
 
         font-weight: bold;
 
         font-weight: bold;
 
     }
 
     }
Line 9,349: Line 9,443:
 
     a.toc-reading,
 
     a.toc-reading,
 
     a.toc-already-read.toc-reading {
 
     a.toc-already-read.toc-reading {
         color: rgba(105, 202, 98, 1.1);
+
         color: #2ecc71;
 
         opacity: 1;
 
         opacity: 1;
 
     }
 
     }
  
 
     a.toc-already-read {
 
     a.toc-already-read {
         opacity: 0.4;
+
         opacity: 0.6;
 
     }
 
     }
  
Line 9,370: Line 9,464:
 
         transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
 
         transition: background-color 0.3s ease 0s, color 0.3s ease 0s;
 
         box-shadow: 0 3px 5px 0 black;
 
         box-shadow: 0 3px 5px 0 black;
         color: #4d4d4d;
+
         color: #fff;
 
     }
 
     }
  
Line 9,641: Line 9,735:
 
     }
 
     }
 
</style>
 
</style>
 
</p>
 
<p>
 
 
 
     <head>
 
     <head>
 
         <title>GLP.exe</title>
 
         <title>GLP.exe</title>
Line 9,650: Line 9,740:
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <meta name="viewport" content="width=device-width, initial-scale=1">
 
         <link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS">
 
         <link rel="stylesheet" href="https://2019.igem.org/Template:Tuebingen/FontAwesomeCSS">
         <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous"/>
+
         <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Righteous" />
 
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
 
         <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" type="text/css"/>
 
         <style>
 
         <style>
Line 10,139: Line 10,229:
  
 
<body style="">
 
<body style="">
    <section id="nav-placeholder">
+
  <section id="nav-placeholder">
        <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
+
    <nav class="shadow navbar navbar-expand-md navbar-dark fixed-top"
            style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
+
        style="background-color: rgba(30, 30, 30, 0.3); z-index: 100;">
            <a class="navbar-brand" href="https://2019.igem.org/Team:Tuebingen">
+
        <a class="navbar-brand" href="https://2019.igem.org/Team:Tuebingen">
                <img src="https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif" alt="logo"
+
            <img src="https://2019.igem.org/wiki/images/2/2a/T--Tuebingen--white_logo_animated.gif" alt="logo"
                    style="width:70px;">
+
                style="width:70px;">
                <h5 class="d-inline ml-3" style="font-family: 'Righteous', cursive; font-weight: normal;">GLP.exe</h5>
+
            <h5 class="d-inline ml-3" style="font-family: 'Righteous', cursive; font-weight: normal;">GLP.exe</h5>
            </a>
+
        </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
+
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
                <span class="navbar-toggler-icon"></span>
+
            <span class="navbar-toggler-icon"></span>
            </button>
+
        </button>
            <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
+
        <div class="collapse navbar-collapse justify-content-around" id="collapsibleNavbar">
                <ul class="navbar-nav">
+
            <ul class="navbar-nav">
                    <li id="ourStoryButton" class="nav-item mx-3">
+
                <li id="ourStoryButton" class="nav-item mx-3">
                        <a class="nav-link" href="/Team:Tuebingen/Story" style="font-family: 'Righteous', cursive; font-weight: normal;">OUR STORY</a>
+
                    <a class="nav-link" href="/Team:Tuebingen/Story"
                    </li>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">OUR STORY</a>
 +
                </li>
  
                    <li class="nav-item dropdown mx-3">
+
                <li class="nav-item dropdown mx-3">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;" >
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                            PROJECT
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
                        </a>
+
                        PROJECT
                        <div class="dropdown-menu">
+
                    </a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Description" style="font-family: 'Righteous', cursive; font-weight: normal;">Description</a>
+
                    <div class="dropdown-menu">
                            <a class="dropdown-item" href="/Team:Tuebingen/Killswitch" style="font-family: 'Righteous', cursive; font-weight: normal;">Kill Switch</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Description"
                            <a class="dropdown-item" href="/Team:Tuebingen/Nissle" style="font-family: 'Righteous', cursive; font-weight: normal;">Nissle</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Description</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Incretin" style="font-family: 'Righteous', cursive; font-weight: normal;">Incretin</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Killswitch"
                            <a class="dropdown-item" href="/Team:Tuebingen/CPP" style="font-family: 'Righteous', cursive; font-weight: normal;">Cell Penetrating Peptides</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Kill Switch</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Results" style="font-family: 'Righteous', cursive; font-weight: normal;">Results</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Nissle"
                            <a class="dropdown-item" href="/Team:Tuebingen/Demonstrate" style="font-family: 'Righteous', cursive; font-weight: normal;">Demonstrate</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Nissle</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Notebook" style="font-family: 'Righteous', cursive; font-weight: normal;">Notebook</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Incretin"
                            <a class="dropdown-item" href="/Team:Tuebingen/Model" style="font-family: 'Righteous', cursive; font-weight: normal;">Model</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Incretin</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Software" style="font-family: 'Righteous', cursive; font-weight: normal;">Software</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/CPP"
                            <a class="dropdown-item" href="/Team:Tuebingen/Outlook" style="font-family: 'Righteous', cursive; font-weight: normal;">Outlook</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Cell Penetrating Peptides</a>
                        </div>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Results"
                    </li>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Results</a>
                    <li class="nav-item dropdown mx-3">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Demonstrate"
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Demonstrate</a>
                            PARTS
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Notebook"
                        </a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Notebook</a>
                        <div class="dropdown-menu">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Model"
                            <a class="dropdown-item" href="/Team:Tuebingen/Parts" style="font-family: 'Righteous', cursive; font-weight: normal;">Parts Overview</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part" style="font-family: 'Righteous', cursive; font-weight: normal;">Basic Parts</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
                            <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part" style="font-family: 'Righteous', cursive; font-weight: normal;">Improved Parts</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part" style="font-family: 'Righteous', cursive; font-weight: normal;">Composite Parts</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Outlook"
                            <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection" style="font-family: 'Righteous', cursive; font-weight: normal;">Part Collection</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Outlook</a>
                        </div>
+
                    </div>
                    </li>
+
                </li>
 +
                <li class="nav-item dropdown mx-3">
 +
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
 +
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
 +
                        PARTS
 +
                    </a>
 +
                    <div class="dropdown-menu">
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Parts"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Parts Overview</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Basic_Part"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Basic Parts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Improved_Part"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Improved Parts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Composite_Part"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Composite Parts</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Part_Collection"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Part Collection</a>
 +
                    </div>
 +
                </li>
  
                    <li class="nav-item dropdown mx-3">
+
                <li class="nav-item dropdown mx-3">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                            PEOPLE
+
                      style="font-family: 'Righteous', cursive; font-weight: normal;color: #2ecc71;">
                        </a>
+
                        PEOPLE
                        <div class="dropdown-menu">
+
                    </a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Team" style="font-family: 'Righteous', cursive; font-weight: normal;">Team</a>
+
                    <div class="dropdown-menu">
                            <a class="dropdown-item" href="/Team:Tuebingen/Collaborations" style="font-family: 'Righteous', cursive; font-weight: normal;">Collaborations</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Team"
                            <a class="dropdown-item" href="/Team:Tuebingen/Attributions" style="font-family: 'Righteous', cursive; font-weight: normal;">Attributions</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Team</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Sponsors" style="font-family: 'Righteous', cursive; font-weight: normal;">Sponsors</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Collaborations"
                            <a class="dropdown-item" href="/Team:Tuebingen/Gallery" style="font-family: 'Righteous', cursive; font-weight: normal;">Gallery</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Collaborations</a>
                        </div>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Attributions"
                    </li>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Attributions</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Sponsors"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sponsors</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Gallery"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Gallery</a>
 +
                    </div>
 +
                </li>
  
                    <li class="nav-item dropdown mx-3">
+
                <li class="nav-item dropdown mx-3">
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                            HUMAN PRACTICES
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
                        </a>
+
                        HUMAN PRACTICES
                        <div class="dropdown-menu">
+
                    </a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices" style="font-family: 'Righteous', cursive; font-weight: normal;">Overview</a>
+
                    <div class="dropdown-menu">
                            <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement" style="font-family: 'Righteous', cursive; font-weight: normal;">Education & Public Engagement</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
                            <a class="dropdown-item" href="/Team:Tuebingen/Experts" style="font-family: 'Righteous', cursive; font-weight: normal;">Experts</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Overview</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship" style="font-family: 'Righteous', cursive; font-weight: normal;">Entrepreneurship</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
                            <a class="dropdown-item" href="/Team:Tuebingen/SDG" style="font-family: 'Righteous', cursive; font-weight: normal;">Sustainable Development Goals</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
                            <a class="dropdown-item" href="/Team:Tuebingen/Experimenta" style="font-family: 'Righteous', cursive; font-weight: normal;">Experimenta Science Center</a>
+
                            Engagement</a>
                        </div>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Experts"
                    </li>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experts</a>
                    <li class="nav-item dropdown mx-3">
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
                        <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown" style="font-family: 'Righteous', cursive; font-weight: normal;">
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Entrepreneurship</a>
                            AWARDS
+
                        <a class="dropdown-item" href="/Team:Tuebingen/SDG"
                        </a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Sustainable Development
                        <div class="dropdown-menu">
+
                            Goals</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices" style="font-family: 'Righteous', cursive; font-weight: normal;">Integrated Human Practise</a>
+
                        <a class="dropdown-item" href="/Team:Tuebingen/Experimenta"
                            <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement" style="font-family: 'Righteous', cursive; font-weight: normal;">Education & Public Engagement</a>
+
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Experimenta Science
                            <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship" style="font-family: 'Righteous', cursive; font-weight: normal;">Supporting Entrepreneurship</a>
+
                            Center</a>
                            <a class="dropdown-item" href="/Team:Tuebingen/Measurement" style="font-family: 'Righteous', cursive; font-weight: normal;">Measurement</a>
+
                    </div>
                            <a class="dropdown-item" href="/Team:Tuebingen/Model" style="font-family: 'Righteous', cursive; font-weight: normal;">Model</a>
+
                </li>
                            <a class="dropdown-item" href="/Team:Tuebingen/Software" style="font-family: 'Righteous', cursive; font-weight: normal;">Software</a>
+
                <li class="nav-item dropdown mx-3">
                        </div>
+
                    <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"
                    </li>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">
 +
                        AWARDS
 +
                    </a>
 +
                    <div class="dropdown-menu">
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Human_Practices"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Integrated Human Practise</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Public_Engagement"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Education & Public
 +
                            Engagement</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Entrepreneurship"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Supporting
 +
                            Entrepreneurship</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Measurement"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Measurement</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Model"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Model</a>
 +
                        <a class="dropdown-item" href="/Team:Tuebingen/Software"
 +
                          style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">Software</a>
 +
                    </div>
 +
                </li>
  
                    <li class="nav-item mx-3">
+
                <li class="nav-item mx-3">
                            <a class="nav-link" href="/Team:Tuebingen/Safety" style="font-family: 'Righteous', cursive; font-weight: normal;">SAFETY</a>
+
                    <a class="nav-link" href="/Team:Tuebingen/Safety"
                    </li>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">SAFETY</a>
 +
                </li>
  
                    <li class="nav-item mx-3">
+
                <li class="nav-item mx-3">
                        <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank" style="font-family: 'Righteous', cursive; font-weight: normal;">JUDGING
+
                    <a class="nav-link" href="https://igem.org/2019_Judging_Form?team=Tuebingen" target="_blank"
                            FORM ⇗</a>
+
                      style="font-family: 'Righteous', cursive; font-weight: normal; color: #2ecc71;">JUDGING
                    </li>
+
                        FORM ⇗</a>
 +
                </li>
  
                    <li class="nav-item mx-1 pt-2">
+
                <li class="nav-item mx-1 pt-2">
                        <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
+
                    <a href="https://www.facebook.com/igemtuebingen/" class="fa fa-facebook" target="_blank"></a>
                    </li>
+
                </li>
                    <li class="nav-item mx-1 pt-2">
+
                <li class="nav-item mx-1 pt-2">
                        <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
+
                    <a href="https://twitter.com/iGEMTuebingen" class="fa fa-twitter" target="_blank"></a>
                    </li>
+
                </li>
                    <li class="nav-item mx-1 pt-2">
+
                <li class="nav-item mx-1 pt-2">
                        <a href="https://www.instagram.com/igem_tuebingen/" class="fa fa-instagram" target="_blank"></a>
+
                    <a href="https://www.instagram.com/igem_tuebingen/" class="fa fa-instagram" target="_blank"></a>
                    </li>
+
                </li>
  
                </ul>
+
            </ul>
            </div>
+
        </div>
        </nav>
+
    </nav>
    </section>
+
</section>
 
<script>
 
<script>
var url = window.location.href;
+
    var url = window.location.href;
$(function () {
+
    $(function () {
$('.nav-link[href="' + url + '"]').addClass("active");
+
        $('.nav-link[href="' + url + '"]').addClass("active");
$('.dropdown-item[href="' + url + '"]').addClass("active");
+
        $('.dropdown-item[href="' + url + '"]').addClass("active");
$('.dropdown-item[href="' + url + '"]').parent().parent().addClass("active");
+
        $('.dropdown-item[href="' + url + '"]').parent().parent().addClass("active");
});
+
    });
 
</script>
 
</script>
 
<script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/jqueryminjs?action=raw&ctype=text/javascript"></script>
Line 10,263: Line 10,399:
 
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Template:Tuebingen/GLPexeJS?action=raw&ctype=text/javascript"></script>
 
</body>
 
</body>
 +
 
<style>
 
<style>
  
Line 10,407: Line 10,544:
 
     */
 
     */
  
  .header{
+
    .header {
  position:relative;
+
        position: relative;
  overflow:hidden;
+
        overflow: hidden;
  display:flex;
+
        display: flex;
  flex-wrap: wrap;
+
        flex-wrap: wrap;
  justify-content: center;
+
        justify-content: center;
  align-items: flex-start;
+
        align-items: flex-start;
  align-content: flex-start;
+
        align-content: flex-start;
  height:50vh;
+
        height: 50vh;
  max-height: 350px;
+
        max-height: 350px;
  min-width:300px;
+
        min-width: 300px;
  color:#eee;
+
        color: #eee;
}
+
     }
.header:after{
+
  content:"";
+
  width:100%;
+
  height:100%;
+
  position:absolute;
+
  bottom:0;
+
  left:0;
+
  z-index:-1;
+
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 40%,rgba(27,32,48,1) 100%);
+
}
+
.header:before{
+
  content:"";
+
  width:100%;
+
  height:100%;
+
  position:absolute;
+
  top:0;
+
  left:0;
+
     -webkit-backface-visibility: hidden;
+
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
+
    transform: translateZ(0);
+
  background:#1B2030 url(https://2019.igem.org/wiki/images/d/d4/T--Tuebingen--Model-banner.png) center no-repeat;
+
  background-size:100%,80%;
+
  animation: grow 60s  linear 10ms infinite;
+
  transition:all 0.2s ease-in-out;
+
  z-index:-2
+
}
+
.header a{
+
  color:#eee
+
}
+
  
.info{
+
    .header:after {
  width:100%;
+
        content: "";
  padding:15% 10% 0 10%;
+
        width: 100%;
  text-align:center;
+
        height: 100%;
  text-shadow:0 2px 3px rgba(0,0,0,0.2)
+
        position: absolute;
}
+
        bottom: 0;
 +
        left: 0;
 +
        z-index: -1;
 +
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 40%, rgba(27, 32, 48, 1) 100%);
 +
    }
  
.info h4, .meta{
+
    .header:before {
  font-size:0.7em
+
        content: "";
}
+
        width: 100%;
 +
        height: 100%;
 +
        position: absolute;
 +
        top: 0;
 +
        left: 0;
 +
        -webkit-backface-visibility: hidden;
 +
        -webkit-transform: translateZ(0) scale(1.0, 1.0);
 +
        transform: translateZ(0);
 +
        background: #1B2030 url(https://2019.igem.org/wiki/images/e/e1/T--Tuebingen--attributions-banner.jpg) center no-repeat;
 +
        background-size: 100%, 100%;
 +
        animation: grow 30s linear 10ms infinite;
 +
        transition: all 0.2s ease-in-out;
 +
        z-index: -2
 +
    }
  
@media only screen and (max-width: 800px) {
+
    .header a {
.info h1 {
+
        color: #eee
    margin-top: 15%;
+
     }
     font-size: 1.7em;
+
    text-align: center;
+
}
+
}
+
  
@media only screen and (max-width: 660px) {
+
     .info {
     .info h1 {
+
         width: 100%;
         margin-top: 20%;
+
         padding: 15% 10% 0 10%;
         font-size: 1.5em;
+
        text-align: center;
 +
        text-shadow: 0 2px 3px rgba(0, 0, 0, 0.2)
 
     }
 
     }
}
 
  
@media only screen and (max-width: 560px) {
+
     .info h1{
     .info h1 {
+
         font-size:3.0em;
         margin-top: 25%;
+
 
     }
 
     }
}
 
  
@media only screen and (max-width: 470px) {
+
     .info h4, .meta {
     .info h1 {
+
         font-size: 0.7em
         margin-top: 30%;
+
 
     }
 
     }
}
 
  
@keyframes grow{
+
    @media only screen and (min-width: 2250px) {
  0% { transform:scale(1)}
+
        .info h1 {
  50% { transform:scale(1.2)}
+
            margin-top: -50%;
}
+
        }
 +
    }
  
/*  ======================
+
    @media only screen and (min-width: 2000px) {
    HEADER BANNER STYLE END
+
        .info h1 {
    ==========================
+
            margin-top: -10%;
    */
+
        }
 +
    }
 +
 
 +
    @media only screen and (min-width: 1500px) {
 +
        .info h1 {
 +
            margin-top: -5%;
 +
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 800px) {
 +
        .info h1 {
 +
            margin-top: 9%;
 +
            font-size: 2.3em;
 +
            text-align: center;
 +
        }
 +
 
 +
        .header {
 +
            height: 45vh;
 +
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 660px) {
 +
        .info h1 {
 +
            margin-top: 10%;
 +
            font-size: 2.3em;
 +
        }
 +
 
 +
        .header {
 +
            height:40vh
 +
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 600px) {
 +
        .header {
 +
            height:35vh
 +
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 560px) {
 +
        .info h1 {
 +
            margin-top: 15%;
 +
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 500px) {
 +
        .header {
 +
            height:30vh
 +
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 470px) {
 +
        .info h1 {
 +
            margin-top: 10%;
 +
            font-size: 1.9em;
 +
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 450px) {
 +
        .header {
 +
            height:25vh
 +
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 400px) {
 +
        .info h1 {
 +
            margin-top: 15%;
 +
        }
 +
    }
 +
 
 +
    @media only screen and (max-width: 350px) {
 +
        .info h1 {
 +
            margin-top: 18%;
 +
        }
 +
    }
 +
 
 +
    @keyframes grow {
 +
        0% {
 +
            transform: scale(1)
 +
        }
 +
        50% {
 +
            transform: scale(1.2)
 +
        }
 +
    }
 +
 
 +
    /*  ======================
 +
        HEADER BANNER STYLE END
 +
        ==========================
 +
        */
  
 
</style>
 
</style>
Line 10,503: Line 10,708:
 
<div class="header">
 
<div class="header">
 
   <div class="info">
 
   <div class="info">
     <h1 style="font-family: 'Righteous', cursive; font-weight: normal;">GENERAL HEADER</h1>
+
     <h1 style="font-family: 'Righteous', cursive; font-weight: normal; color:#2ecc71;">GENERAL HEADER</h1>
 
   </div>
 
   </div>
 
</div>
 
</div>
 
<!-- Header Banner End-->
 
<!-- Header Banner End-->
 +
 +
<div style="background-color: #232323;">
  
 
<div class="glpContainer">
 
<div class="glpContainer">
Line 10,517: Line 10,724:
 
     <main class="post-content">
 
     <main class="post-content">
  
         <h3>The Problem</h3>
+
         <h3 style="font-family:'Righteous'; color:#2ecc71;">The Problem</h3>
 
         <div class="row">
 
         <div class="row">
 
             <div class="col-12">
 
             <div class="col-12">
Line 10,545: Line 10,752:
 
                 </p>
 
                 </p>
 
             </div>
 
             </div>
             <h3>The Solution: Phactory</h3>
+
             <h3 style="font-family:'Righteous'; color:#2ecc71;">The Solution: Phactory</h3>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
Line 10,572: Line 10,779:
 
             </div>
 
             </div>
  
             <h2>Preparation of Cell Extract</h2>
+
             <h2 style="font-family:'Righteous';">Preparation of Cell Extract</h2>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
Line 10,604: Line 10,811:
  
  
             <h2>Synthetic Phage Manufacturing</h2>
+
             <h2 style="font-family:'Righteous';">Synthetic Phage Manufacturing</h2>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
Line 10,618: Line 10,825:
 
             </div>
 
             </div>
  
             <h2>Modular Phage Composition</h2>
+
             <h2 style="font-family:'Righteous';">Modular Phage Composition</h2>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
Line 10,636: Line 10,843:
 
             </div>
 
             </div>
  
             <h2>Quality Control</h2>
+
             <h2 style="font-family:'Righteous'; color:#2ecc71;">Quality Control</h2>
  
  
Line 10,665: Line 10,872:
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
                     <h3>Quantifying the Level of DNA Contamination</h3>
+
                     <h3 style="font-family:'Righteous'; color:#2ecc71;">Quantifying the Level of DNA Contamination</h3>
 
                     <p>
 
                     <p>
 
                         While gels and absorption can be used to detect the presence of the desired phage genomes, they
 
                         While gels and absorption can be used to detect the presence of the desired phage genomes, they
Line 10,695: Line 10,902:
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
                     <h3>Verifying the Function of the Phage Product</h3>
+
                     <h3 style="font-family:'Righteous';">Verifying the Function of the Phage Product</h3>
  
 
                     <p>
 
                     <p>
Line 10,703: Line 10,910:
 
                         could be assessed by reverse transcriptase qPCR.
 
                         could be assessed by reverse transcriptase qPCR.
 
                     </p>
 
                     </p>
                     <h3>Reducing Toxin Levels</h3>
+
                     <h3 style="font-family:'Righteous';">Reducing Toxin Levels</h3>
  
 
                     <p>
 
                     <p>
Line 10,755: Line 10,962:
  
  
             <h2>Encapsulation</h2>
+
             <h2 style="font-family:'Righteous';">Encapsulation</h2>
 
             <div class="row">
 
             <div class="row">
 
                 <div class="col-12">
 
                 <div class="col-12">
Line 10,789: Line 10,996:
  
 
             <div id="glpreferences" class="row">
 
             <div id="glpreferences" class="row">
                 <h3>References</h3>
+
                 <h3 style="font-family:'Righteous'; color: #2ecc71;">References</h3>
 
                 <div class="col-12">
 
                 <div class="col-12">
 
                     <ol>
 
                     <ol>
Line 10,815: Line 11,022:
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
 
+
        </div>
 
     </main>
 
     </main>
 
</div>
 
</div>
<!-- BUTTON LINK ANIMATION: CAVE: THIS MAY NOT WORK IN ALL CONTAINERS / <div> etc!!!!!-->
+
</div>
<style>
+
    .wrapper{
+
  position: fixed; /* Change this for absolute positioning  */
+
  top: 50%;
+
  left: 50%;
+
  transform: translate(-50%, -50%);
+
}
+
 
+
.link_wrapper{
+
  position: relative;
+
}
+
 
+
.link_wrapper a{
+
  display: block;
+
  width: 250px;
+
  height: 50px;
+
  line-height: 50px;
+
  font-weight: bold;
+
  text-decoration: none;
+
  background: #333;
+
  text-align: center;
+
  color: #fff;
+
  text-transform: uppercase;
+
  letter-spacing: 1px;
+
  border: 3px solid #333;
+
  transition: all .35s;
+
}
+
 
+
.icon{
+
  width: 50px;
+
  height: 50px;
+
  border: 3px solid transparent;
+
  position: absolute;
+
  transform: rotate(45deg);
+
  right: 0;
+
  top: 0;
+
  z-index: -1;
+
  transition: all .35s;
+
}
+
 
+
.icon svg{
+
  width: 30px;
+
  position: absolute;
+
  top: calc(50% - 15px);
+
  left: calc(50% - 15px);
+
  transform: rotate(-45deg);
+
  fill: #2ecc71;
+
  transition: all .35s;
+
}
+
 
+
.link_wrapper a:hover{
+
  width: 200px;
+
  border: 3px solid #2ecc71;
+
  background: transparent;
+
  color: #2ecc71;
+
}
+
 
+
.link_wrapper a:hover + .icon{
+
  border: 3px solid #2ecc71;
+
  right: -25%;
+
}
+
 
+
@media only screen and (max-width: 767.98px) {
+
 
+
.link_wrapper a{
+
  width: 100px;
+
  height: 20px;
+
  line-height: 20px;
+
  font-weight: normal;
+
    font-size:smaller;
+
    letter-spacing: 0.05px;
+
}
+
 
+
.icon {
+
    width: 20px;
+
    height: 20px;
+
}
+
  
.icon svg {
 
    width: 12px;
 
    top: calc(50% - 6px);
 
    left: calc(50% - 6px);
 
}
 
 
.link_wrapper a:hover {
 
    width: 90px;
 
}
 
}
 
</style>
 
 
<div class="wrapper">
 
  <div class="link_wrapper">
 
    <a href="#">Hover Me!</a>
 
    <div class="icon">
 
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 268.832 268.832">
 
        <path d="M265.17 125.577l-80-80c-4.88-4.88-12.796-4.88-17.677 0-4.882 4.882-4.882 12.796 0 17.678l58.66 58.66H12.5c-6.903 0-12.5 5.598-12.5 12.5 0 6.903 5.597 12.5 12.5 12.5h213.654l-58.66 58.662c-4.88 4.882-4.88 12.796 0 17.678 2.44 2.44 5.64 3.66 8.84 3.66s6.398-1.22 8.84-3.66l79.997-80c4.883-4.882 4.883-12.796 0-17.678z"/>
 
      </svg>
 
    </div>
 
  </div>
 
</div>
 
<!-- BUTTON LINK ANIMATION: CAVE: THIS MAY NOT WORK IN ALL CONTAINERS / <div> etc!!!!! END-->
 
  
 
<script src="https://2019.igem.org/Team:Tuebingen/sidebarJS?action=raw&ctype=text/javascript"></script>
 
<script src="https://2019.igem.org/Team:Tuebingen/sidebarJS?action=raw&ctype=text/javascript"></script>
  
 +
<script src="https://2019.igem.org/Team:Tuebingen/smoothScrollJS?action=raw&ctype=text/javascript"></script>
 +
<script>
 +
var scroll = new SmoothScroll('a[href*="#"]');
 +
</script>
  
</p><p>
+
         <div class='container-fluid p-3' style="background-color: #919191;">
 
+
         <div class='container-fluid p-3' style="background-color: rgba(255, 255, 255, 0.3);">
+
 
                 <hr>
 
                 <hr>
 
                 <div class='row align-items-center'>
 
                 <div class='row align-items-center'>
Line 11,055: Line 11,164:
 
                     </div>
 
                     </div>
 
                 </div>
 
                 </div>
 +
</div>
 
</p>
 
</p>
  

Revision as of 09:41, 16 October 2019

GLP.exe

GENERAL HEADER

The Problem

Antimicrobial resistance is on the rise and the death toll from bacterial infections will continue to increase if no alternative solutions are developed. The threat of antimicrobial resistance has been known for a long time - Alexander Fleming, the discoverer of penicillin, predicted in 1945 that “exposing […] microbes to nonlethal quantities of the drug makes them resistant”. Even though efforts for development of novel antimicrobial compounds have been stepped up in recent years, there is still a lack of safe and effective substitutes for antibiotics1. A promising alternative – phage therapy – has an extensive history of successful application in countries with limited access to antibiotics. Although phage therapy has been known for almost a century, widespread application of phage therapy still has to become reality.2 This was the overarching problem our project needed to tackle.

In order to design an impactful project for this year’s iGEM season, we deemed it important to precisely understand and define the problem we wanted to work on.

Through extensive research into the factors impeding phage therapy, we identified the production process to be one of the most striking problems. In particular, the current methods are inefficient, lead to high impurities and contamination, require the cultivation of human pathogens in large quantities and causes regulatory problems due to imprecise manufacturing standards and a lack of adequate quality controls.

The Solution: Phactory

We contemplated ways to use synthetic biology to overcome these challenges and found that using cell extract as the central component of a manufacturing pipeline for phages might allow us to overcome these issues. With the central piece of our project in place, we were able to define the individual modules of our manufacturing pipeline. The modular approach allowed us to break down the overall problem into several isolated, solvable sub-problems that could be worked on in parallel. For each module we defined the requirements we wanted to fulfill and brainstormed potential solutions for reaching these requirements. The individual modules were designed in such a way that they are truly independent of one another and that issues in one module would not impede progress in another module. We defined quantitative criteria to measure progress in achieving the identified requirements during the build-test cycle. To maximize our chances of success and the robustness of our designs, we chose the simplest solutions we could come up with. We defined additional goals when multiple solutions fulfilling these criteria were available: accessibility, portability, affordability, and safety.

Phactory was designed to be an accessible manufacturing pipeline that produces pure, precisely defined bacteriophages at medically relevant concentrations using highly portable, affordable and modular components.

Preparation of Cell Extract

Commercially available cell extract is highly expensive, while home-made alternatives are time-consuming to produce and lack reliability. Furthermore, the presence of DNases in cell extract complicates the production of phages from linear genomes. This module therefore had two separate goals:

The first goal was to produce high-quality, affordable cell extract and to establish quality control mechanisms to quantify its performance. The preparation protocols described in previous publications were analysed to identify optimization goals. 3 To achieve these goals every step of the preparation process was assessed and improved, with a particular focus on cell cultivation and cell lysis. To enable easy distribution and storage, we decided to improve the overall durability and storage time of our cell extract by lyophilization. After resuspension of the dried cell extract, assembly of any given bacteriophage can be performed.

The second goal was to optimize cell extract for the expression from linear DNA. To accomplish that, we identified the intracellular DNAse RecBCD as our main target. This enzyme - in cooperation with RecA - is an essential component maintaining the integrity of the bacterial genome4. Furthermore it is the protein causing degradation of linear DNA within cell extract. Therefore, the inactivation of this endonuclease was defined as a crucial step to ensure efficient phage production within the cell extract.

Synthetic Phage Manufacturing

Our goal was to use cell extract as a host-independent platform for phage assembly from a linear DNA template. To demonstrate the universal applicability of our manufacturing platform, we attempted to express a variety of structurally different phages at titers suitable for therapeutic application. In order to generate maximal phage titers, we identified the parameters that potentially impact phage production. These included incubation time, influence of dNTP addition and optimal DNA template concentration.

Modular Phage Composition

When thinking about a release into the environment in the course of a therapeutic application, it is important to avoid using genetically engineered phages. We postulated that in our cell free system it should be possible to modify phages without altering their genome. In a modular approach, we aimed at adding both natural phage DNA and engineered proteins to an assembly reaction. To test our hypothesis, we chose to externally express an edited HOC (highly immunogenic outer capsid) protein and incorporate it in the assembly reaction. Thinking about the possible applications of fluorescent and bioluminescent phages in medical imaging, we designed expression constructs encoding for YFP or the NanoLuc luciferase. Additionally, we needed to consider first the isolation of the desired protein and then later the purification of the phages out of a heterogeneous solution. Therefore, we added a histidine-tag.

Quality Control

Clinical applications require highly pure samples of functional bacteriophages, free of bacterial endotoxins and contaminations. The purpose of this module is to implement quality control mechanisms to ensure a safe and effective application.

Quantifying the Level of DNA Contamination

While gels and absorption can be used to detect the presence of the desired phage genomes, they do not prove the absence of contaminating DNA. In fact, we found that more than 50% of isolated phage genome purified from common E. coli phages using traditional protocols is instead E. coli genomic DNA. To precisely quantify the amount of contamination, we used third generation sequencing. Nanopore sequencing was chosen because of its affordability and small size that makes the device highly portable. Its long-read lengths allows for unambiguous identification of the source of contaminations.

As a submodule, we decided to construct a software suite called Sequ-Into that allows the user to easily determine the amount of DNA contamination in the first few minutes of sequencing, thereby providing access to this aspect of phage manufacturing without requiring specialized knowledge in bioinformatics.

3D printed low-cost devices to overcome these challenges independently. The hardware was designed to be compatible with existing laboratory equipment or open source solutions.

Verifying the Function of the Phage Product

To assess the antimicrobial action of our phage product, we combined two methods. We chose a plaque assay as a cheap and simple way to confirm the presence of functional phages and to quantify the phage titer. Reproduction and transcriptional capability of our phages however could be assessed by reverse transcriptase qPCR.

Reducing Toxin Levels

In an attempt to push our purity towards enabling intravenous administration, we decided to perform fractionation in a pressure-driven size-exclusion filter system. Suitability of the phage product for intravenous application could then be assessed with an additional endotoxin test.

After these steps, our phages would be ready for animal testing, which we did not plan to attempt in the context of the iGEM competition

Encapsulation

The transport within the body often poses problems for the activity and integrity of phages, which can be addressed by packaging of the phages in a protective layer5. For oral application of our phage product, sufficient stability for gastric passage has to be guaranteed. The highly acidic environment, as well as the presence of proteases composed the major challenges. Our packaging method thus needed to provide resistance to low pH. At the same time, phages needed to be released from their protection upon reaching intestinal fluid. These characteristics are provided by calcium-alginate microspheres6. Lacking suitable encapsulation hardware, we decided to build our own nozzle to encapsulate the phages in monodisperse microcapsules.

The methods most suitable for quantification of size and assessment of monodispersity of the alginate capsules were brightfield and epifluorescence microscopy. To determine whether our encapsulation method fulfills our requirements of survival and release of phages in simulated gastric and intestinal fluid, respectively, we subsequently performed plaque assays.