Difference between revisions of "Team:Stuttgart/Protocols"

Line 1: Line 1:
 
<html>
 
<html>
  
<script>
+
<!--- THIS IS WHERE THE HTML BEGINS --->
  
     // This is the jquery part of your template.
+
<head>
    // Try not modify any of this code too much since it makes your menu work.
+
     <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"
 +
          id="bootstrap-css">
 +
    <style>
  
    $(document).ready(function() {
 
  
         $("#HQ_page").attr('id','');
+
         /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
  
         // call the functions that control the menu
+
         /* Clear the default wiki settings */
        menu_functionality();
+
        hide_show_menu();
+
  
 +
        #home_logo, #sideMenu {
 +
            display: none;
 +
        }
  
 +
        #sideMenu, #top_title, .patrollink {
 +
            display: none;
 +
        }
  
         //this function controls the expand and collapse buttons of the menu and changes the +/- symbols
+
         #content {
         function menu_functionality() {
+
            width: 100%;
 +
            padding: 0px;
 +
            margin-top: -7px;
 +
            margin-left: 0px;
 +
         }
  
            //when clicking on a "menu_button", it will change the "+/-" accordingly and it will show/hide the corresponding submenu
+
        body {
             $(".menu_button").click(function(){
+
             background: white;
 +
        }
  
                // add or remove the class "open" , this class holds the "-"
+
        #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
                $(this).children().toggleClass("open");
+
            margin-bottom: 0;
                // show or hide the submenu
+
            color: #F8CE63;
                $(this).next('.submenu_wrapper').fadeToggle(400);
+
        }
            });
+
  
            // when the screen size is smaller than 800px, the display_menu_control button appears and will show/hide the whole menu
+
        table {;
            $("#display_menu_control").click(function(){
+
        }
                $('#menu_content').fadeToggle(400);
+
            });
+
  
            // call the current page highlight function
+
        /**************************************************************** MENU ***************************************************************/
             highlight_current_page();
+
        /* Wrapper for the menu */
 +
        .igem_2017_menu_wrapper {
 +
            width: 15%;
 +
            height: 100vh;
 +
            position: fixed;
 +
            right: 0;
 +
            padding: 0;
 +
            float: right;
 +
            border-left: 1px solid #F8CE63;
 +
            background-color: white;
 +
            text-align: left;
 +
            font-family: Tahoma, Geneva, sans-serif;
 +
            overflow-y: auto;
 +
             overflow-x: hidden;
 
         }
 
         }
  
 +
        /* this hides the scrollbar to keep view consistency */
 +
        .igem_2017_menu_wrappe::-webkit-scrollbar {
 +
            display: none;
 +
        }
  
         // call the highlight current page function to show it on the menu with a different background color
+
         /* styling for links in the menu, removes the line under text */
         function highlight_current_page() {
+
         .igem_2017_menu_wrapper a {
 +
            text-decoration: none;
 +
        }
  
            // select a page from the menu based on the id assigned to it and the current page name and add the class "current page" to make it change background color
+
        /* styling for the images in the menu */
             $("#"+  wgPageName.substring(wgPageName.lastIndexOf("/")+1, wgPageName.length ) + "_page").addClass("current_page");
+
        .igem_2017_menu_wrapper img {
 +
             width: 100%;
 +
        }
  
            // now that the current_page class has been added to a menu item, make the submenu fade in
+
        /* styling for the menu buttons */
            $(".current_page").parents(".submenu_wrapper").fadeIn(400);
+
        .igem_2017_menu_wrapper .menu_button {
             // change the +/- symbol of the corresponding menu button
+
            width: 100%;
             $(".current_page").parents(".submenu_wrapper").prev().children().toggleClass("open");
+
             padding: 10px 0px 10px 15px;
 +
            float: left;
 +
            border-bottom: 1px solid #F8CE63;
 +
             font-size: 16px;
 +
            font-weight: bold;
 +
            color: #F8CE63;
 +
            cursor: pointer;
 +
        }
  
 +
        .igem_2017_menu_wrapper .menu_bottom_padding {
 +
            width: 100%;
 +
            height: 30px;
 +
            float: left;
 
         }
 
         }
  
 +
        .menu_button.direct_to_page {
 +
            padding-left: 36px;
 +
        }
  
 +
        .igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
 +
            width: 10%;
 +
            float: left;
 +
        }
  
         // allow button on the black menu bar to show/hide the side menu
+
         .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
         function hide_show_menu() {
+
            content: "+";
 +
         }
  
            // in case you preview mode is selected, the menu is hidden for better visibility
+
        /* styling for the menu buttons on hover */
            if (window.location.href.indexOf("submit") >= 0) {
+
        .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover {
                $(".igem_2017_menu_wrapper").hide();
+
            background-color: #F8CE63;
             }
+
             text-decoration: none;
 +
            color: #190707;
 +
        }
  
            // if the black menu bar has been loaded
+
        /* styling for the menu button when it is the current page */
            if (document.getElementById('bars_item')) {
+
        .current_page {
 +
            background-color: white !important;
 +
            color: #F8CE63 !important;
 +
        }
  
                // when the "bars_item" has been clicked
+
        /* styling for the submenu buttons */
                $("#bars_item").click(function() {
+
        .igem_2017_menu_wrapper .submenu_button {
                    $("#sideMenu").hide();
+
            width: 100%;
 +
            padding: 10px 0px 10px 34px;
 +
            float: left;
 +
            background-color: white;
 +
            border-bottom: 1px solid #F8CE63;
 +
            font-size: 15px;
 +
            color: #F8CE63;
 +
            cursor: pointer;
 +
        }
  
                    // show/hide the menu wrapper
+
        /* wrapper for the submenu items, they are hidden by default*/
                    $(".igem_2017_menu_wrapper").fadeToggle("100");
+
        .igem_2017_menu_wrapper .submenu_wrapper {
                });
+
            display: none;
            }
+
        }
  
            // because the black menu bars loads at a different time than the rest of the page, this function is set on a time out so it can run again in case it has not been loaded yet
+
        /* when the page size is bigger than 800px, this show/hide control is hidden by default */
            else {
+
        .igem_2017_menu_wrapper #display_menu_control {
                setTimeout(hide_show_menu, 15);
+
            display: none;
             }
+
             text-align: center;
 
         }
 
         }
  
 +
        /***************************************************** CONTENT OF THE PAGE ****************************************************/
  
    });
+
        /* Wrapper for the content */
 +
        .igem_2017_content_wrapper {
 +
            width: 83%;
 +
            margin: 0;
 +
            display: block;
 +
            float: left;
 +
            background-color: white;
 +
            font-family: Tahoma, Geneva, sans-serif;
 +
        }
  
 +
        /********************************* HTML STYLING  *********************************/
  
</script>
+
        /* styling for the titles h1 h2 */
 +
        .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
 +
            color: #F8CE63;
 +
            padding: 15px 0 25px 0;
 +
            border-bottom: 0;
 +
        }
  
<style>
+
        /* styling for the titles  h3 h4 h5 h6*/
 +
        .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
 +
            padding: 5px 15px;
 +
            border-bottom: 0;
 +
        }
  
 +
        /* font and text */
 +
        .container p,
 +
        #HQ_page p {
 +
            line-height: 24px;
 +
            font-size: 16px;
 +
            color: #333;
 +
        }
  
 +
        .igem_2017_content_wrapper img {
 +
            padding: 15px 0;
 +
        }
  
    /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
+
        /* Links */
 +
        .igem_2017_content_wrapper a {
 +
            font-weight: bold;
 +
            text-decoration: underline;
 +
            text-decoration-color: #190707;
 +
            color: #3399ff;
 +
            -webkit-transition: all 0.4s ease;
 +
            -moz-transition: all 0.4s ease;
 +
            -ms-transition: all 0.4s ease;
 +
            -o-transition: all 0.4s ease;
 +
            transition: all 0.4s ease;
 +
        }
  
    /* Clear the default wiki settings */
+
        /* hover for the links */
 +
        .igem_2017_content_wrapper a:hover {
 +
            text-decoration: none;
 +
            color: #000000;
 +
        }
  
    #home_logo, #sideMenu { display:none; }
+
        /* non numbered lists */
    #sideMenu, #top_title, .patrollink  {display:none;}
+
        .igem_2017_content_wrapper ul {
    #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
+
            padding: 0px 20px;
    body {background:#190707 }
+
            font-size: 15px;
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
            font-family: Tahoma, Geneva, sans-serif;
  table {; }
+
        }
  
 +
        /* numbered lists */
 +
        .igem_2017_content_wrapper ol {
 +
            padding: 0px;
 +
            font-size: 15px;
 +
            font-family: Tahoma, Geneva, sans-serif;
 +
        }
  
 +
        /* Table */
 +
        .igem_2017_content_wrapper table {
 +
            width: 97%;
 +
            margin: 15px 10px;
 +
            border: 2px solid #190707;
 +
            border-collapse: collapse;
 +
        }
  
    /**************************************************************** MENU ***************************************************************/
+
        /* table cells */
    /* Wrapper for the menu */
+
        .igem_2017_content_wrapper td {
    .igem_2017_menu_wrapper {
+
            padding: 10px;
        width: 15%;
+
            vertical-align: text-top;
        height:100vh;
+
            border: 1px solid #190707;
        position:fixed;
+
            border-collapse: collapse;
        right:0;
+
         }
        padding:0;
+
        float:right;
+
        border-left: 1px solid #F8CE63;
+
        background-color:#190707;
+
        text-align:left;
+
         font-family:Tahoma, Geneva, sans-serif;
+
        overflow-y: auto;
+
        overflow-x: hidden;
+
    }
+
  
    /* this hides the scrollbar to keep view consistency */
+
        /* table headers */
    .igem_2017_menu_wrappe::-webkit-scrollbar {
+
        .igem_2017_content_wrapper th {
        display: none;
+
            padding: 10px;
    }
+
            vertical-align: text-top;
 +
            border: 1px solid #190707;
 +
            border-collapse: collapse;
  
 +
        }
  
    /* styling for links in the menu, removes the line under text */
+
        /**********************************LAYOUT CLASSES **********************************/
    .igem_2017_menu_wrapper a {
+
        text-decoration: none;
+
    }
+
  
 +
        /* general class for column divs */
 +
        .igem_2017_content_wrapper .column {
 +
            padding: 10px 0px;
 +
            float: left;
 +
        }
  
    /* styling for the images in the menu */
+
        /* class for a full width column */
    .igem_2017_menu_wrapper img {
+
        .column .full_size {
        width: 100%;
+
            width: 100%;
    }
+
        }
  
    /* styling for the menu buttons */
+
        /* styling for images in a full width column*/
    .igem_2017_menu_wrapper .menu_button {
+
        .column.full_size img {
        width: 100%;
+
            width: 97%;
        padding: 10px 0px 10px 15px;
+
            padding: 10px 15px;
         float:left;
+
         }
        border-bottom: 1px solid #F8CE63;
+
        font-size: 20px;
+
        font-weight: bold;
+
        color: #F8CE63;
+
        cursor: pointer;
+
    }
+
  
 +
        /* class for a half width column */
 +
        .column.half_size {
 +
            width: 50%;
 +
        }
  
    .igem_2017_menu_wrapper .menu_bottom_padding {
+
        /* styling for images in a half width column*/
        width: 100%;
+
        .column.half_size img {
        height: 30px;
+
            width: 94.5%;
         float:left;
+
            padding: 10px 15px;
    }
+
         }
  
    .menu_button.direct_to_page {
+
         /********************************* SUPPORT CLASSES ********************************/
         padding-left: 36px;
+
    }
+
  
 +
        /* class that clears content below*/
 +
        .igem_2017_content_wrapper .clear {
 +
            clear: both;
 +
        }
  
    .igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
+
        /* adds extra spacing when clearing content */
        width:10%;
+
        .igem_2017_content_wrapper .clear.extra_space {
         float:left;
+
            height: 30px;
    }
+
         }
  
    .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
+
        /* highlight class, makes content slightly smaller */
        content: "+";
+
        .igem_2017_content_wrapper .highlight {
    }
+
            margin: 0px 15px;
 +
            padding: 15px 0px;
 +
        }
  
    .open::before {
+
        /* highlight class, adds a gray background */
        content: "-" !important;
+
        .igem_2017_content_wrapper .highlight.gray {
    }
+
            background-color: #190707;
 +
        }
  
 +
        /* highlight with decoration blue line on top */
 +
        .igem_2017_content_wrapper .highlight.blue_top {
 +
            border-top: 4px solid #190707;
 +
        }
  
 +
        /* highlight with a full blue border decoration */
 +
        .igem_2017_content_wrapper .highlight.blue_border {
 +
            border: 4px solid #190707;
 +
        }
  
    /* styling for the menu buttons on hover */
+
        /* button class */
    .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover ,  .submenu_button.current_page:hover {
+
        .igem_2017_content_wrapper .button {
        background-color: #F8CE63;
+
            max-width: 35%;
        text-decoration: none;
+
            margin: 30px auto;
        color:#190707;
+
            padding: 12px 10px;
    }
+
            background-color: #190707;
 +
            text-align: center;
 +
            color: #F8CE63;
 +
            -webkit-transition: all 0.4s ease;
 +
            -moz-transition: all 0.4s ease;
 +
            -ms-transition: all 0.4s ease;
 +
            -o-transition: all 0.4s ease;
 +
            transition: all 0.4s ease;
 +
        }
  
    /* styling for the menu button when it is the current page */
+
        /* styling for button on hover */
    .current_page {
+
        .igem_2017_content_wrapper .button:hover {
        background-color:#190707 !important;
+
            background-color: #190707;
        color:#F8CE63 !important;
+
            color: #F8CE63;
    }
+
        }
  
 +
        /***************************************************** RESPONSIVE STYLING ****************************************************/
  
    /* styling for the submenu buttons */
+
        *, *:before, *:after {
    .igem_2017_menu_wrapper .submenu_button {
+
            -webkit-box-sizing: border-box;
        width: 100%;
+
            -moz-box-sizing: border-box;
        padding: 10px 0px 10px 34px;
+
            box-sizing: border-box;
        float:left;
+
         }
        background-color:#190707;
+
        border-bottom: 1px solid #F8CE63;
+
        font-size: 15px;
+
         color: #F8CE63;
+
        cursor: pointer;
+
    }
+
  
    /* wrapper for the submenu items, they are hidden by default*/
+
        body {
    .igem_2017_menu_wrapper .submenu_wrapper {
+
            overflow-x: hidden;
        display:none;
+
            margin-top: 80px;
    }
+
            letter-spacing: 0.02em;
 +
        }
  
    /* when the page size is bigger than 800px, this show/hide control is hidden by default */
+
        /* IF THE SCREEN IS LESS THAN 1200PX */
    .igem_2017_menu_wrapper #display_menu_control {
+
         @media only screen and (max-width: 1024px) {
         display:none;
+
        text-align:center;
+
    }
+
  
 +
            #content {
 +
                width: 100%;
 +
            }
  
    /***************************************************** CONTENT OF THE PAGE ****************************************************/
+
            .igem_2017_content_wrapper {
 +
                width: 100%;
 +
            }
  
    /* Wrapper for the content */
+
            .igem_2017_menu_wrapper {
    .igem_2017_content_wrapper {
+
                width: 100%;
        width: 81%;
+
                height: 15%;
        margin: 2%;
+
                position: relative;
        display:block;
+
                left: 0;
        float:left;
+
            }
        background-color: #190707;
+
        font-family:Tahoma, Geneva, sans-serif;
+
    }
+
  
 +
            .highlight {
 +
                padding: 10px 0px;
 +
            }
  
    /********************************* HTML STYLING  *********************************/
+
            .igem_2017_menu_wrapper #display_menu_control {
 +
                display: none;
 +
            }
  
    /* styling for the titles h1 h2 */
+
            #menu_content {
    .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
+
                display: block;
        color:#F8CE63;
+
            }
        padding:15px 0 25px 0;
+
        border-bottom: 0;
+
    }
+
  
    /* styling for the titles  h3 h4 h5 h6*/
+
            .menu_button.direct_to_page {
    .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
+
                padding-left: 17px;
        padding:5px 15px;
+
            }
         border-bottom:0;
+
         }
    }
+
  
    /* font and text */
+
        /* IF THE SCREEN IS LESS THAN 800PX */
    .igem_2017_content_wrapper p {
+
         @media only screen and (max-width: 800px) {
         padding: 15px 0;
+
        font-size: 16px;
+
    }
+
    .igem_2017_content_wrapper img {
+
        padding: 15px 0;
+
    }
+
  
    /* Links */
+
            .igem_2017_content_wrapper {
    .igem_2017_content_wrapper a {
+
                width: 100%;
        font-weight: bold;
+
                margin-left: 0;
        text-decoration: underline;
+
            }
        text-decoration-color: #190707;
+
        color:  #3399ff;
+
        -webkit-transition: all 0.4s ease;
+
        -moz-transition: all 0.4s ease;
+
        -ms-transition: all 0.4s ease;
+
        -o-transition: all 0.4s ease;
+
        transition: all 0.4s ease;
+
    }
+
  
    /* hover for the links */
+
            .column.half_size {
    .igem_2017_content_wrapper a:hover {
+
                width: 100%;
        text-decoration:none;
+
            }
        color:#000000;
+
    }
+
  
    /* non numbered lists */
+
            .column.full_size img, .column.half_size img {
    .igem_2017_content_wrapper ul {
+
                width: 100%;
        padding:0px 20px;
+
                padding: 10px 0;
        font-size: 15px;
+
            }
        font-family:Tahoma, Geneva, sans-serif;
+
    }
+
  
    /* numbered lists */
+
            .highlight {
    .igem_2017_content_wrapper ol {
+
                padding: 15px 5px;
        padding:0px;
+
            }
        font-size: 15px;
+
        font-family:Tahoma, Geneva, sans-serif;
+
    }
+
  
    /* Table */
+
            .igem_2017_menu_wrapper #display_menu_control {
    .igem_2017_content_wrapper table {
+
                display: block;
        width: 98%;
+
            }
        margin:15px 10px;
+
        border: 2px solid #190707;
+
        border-collapse: collapse;
+
        background:#F8CE63;  
+
    }
+
  
    /* table cells */
+
            #menu_content {
    .igem_2017_content_wrapper  td {
+
                display: none;
        padding: 10px;
+
            }
        vertical-align: text-top;
+
        border: 1px solid #190707;
+
        border-collapse: collapse;
+
    }
+
  
    /* table headers */
+
            .igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
    .igem_2017_content_wrapper th {
+
                width: 5%;
        padding: 10px;
+
            }
        vertical-align: text-top;
+
        border: 1px solid #190707;
+
        border-collapse: collapse;
+
       
+
    }
+
  
 +
            .menu_bottom_padding {
 +
                display: none;
 +
            }
  
    /**********************************LAYOUT CLASSES **********************************/
+
            .menu_button.direct_to_page {
 +
                padding-left: 36px;
 +
            }
 +
        }
  
    /* general class for column divs */
+
        /* special class that the system uses to make sure the team wants a page to be evaluated */
    .igem_2017_content_wrapper .column  {
+
        .judges-will-not-evaluate {
        padding: 10px 0px;
+
            width: 96.6%;
        float:left;
+
            margin: 5px 15px;
    }
+
            display: block;
 +
            border: 4px solid #3399ff;
 +
            font-weight: bold;
 +
        }
  
    /* class for a full width column */
+
        /* CUSTOM BS NAVBAR STYLES */
    .column .full_size {
+
        .navbar {
        width:100%;
+
            border: 0;
    }
+
        }
  
    /* styling for images in a full width column*/
+
        .navbar-default {
    .column.full_size img {
+
            margin-top: 15px;
        width:97%;
+
            background-color: #333;
        padding: 10px 15px;
+
        }
    }
+
  
    /* class for a half width column */
+
        .navbar-brand {
    .column.half_size {
+
            padding: 0;
        width: 50%;
+
            padding-left: 25px;
    }
+
            padding-right: 25px;
    /* styling for images in a half width column*/
+
        }
    .column.half_size img {
+
        width: 94.5%;
+
        padding: 10px 15px;
+
    }
+
  
 +
        .navbar-brand img {
 +
            height: 49px;
 +
        }
  
 +
        .navbar-default .navbar-nav > li > a {
 +
            color: white;
 +
        }
  
 +
        .navbar-default .navbar-nav > li > a:focus,
 +
        .navbar-default .navbar-nav > li > a:hover,
 +
        .navbar-default .navbar-nav > .dropdown > a .caret:hover {
 +
            color: #F8CE63;
 +
        }
  
    /********************************* SUPPORT CLASSES ********************************/
+
        .navbar-default .navbar-nav > .open > a,
 +
        .navbar-default .navbar-nav > .open > a:hover,
 +
        .navbar-default .navbar-nav > .open > a:focus {
 +
            color: #F8CE63;
 +
            background-color: #444;
 +
        }
  
    /* class that clears content below*/
+
        .navbar-default .navbar-nav > .dropdown > a .caret {
    .igem_2017_content_wrapper .clear {
+
            border-top-color: #eee;
        clear:both;
+
            border-bottom-color: #eee;
    }
+
        }
  
 +
        .dropdown-menu {
 +
            border: 0;
 +
        }
 +
        .dropdown-menu > li > a {
 +
            color: white;
 +
        }
  
    /* adds extra spacing when clearing content */
+
        .dropdown-menu > li > a:hover,
    .igem_2017_content_wrapper  .clear.extra_space {
+
        .dropdown-menu > li > a:focus {
        height: 30px;
+
            color: #111;
    }
+
            text-decoration: none;
 +
            background-color: #F8CE63;
 +
        }
  
 +
        .navbar-default .navbar-nav > .dropdown > a:hover .caret,
 +
        .navbar-default .navbar-nav > .dropdown > a:focus .caret {
 +
            border-top-color: white;
 +
            border-bottom-color: white;
 +
        }
  
    /* highlight class, makes content slightly smaller */
+
        @media (max-width: 767px) {
    .igem_2017_content_wrapper .highlight {
+
            .navbar-default .navbar-nav .open .dropdown-menu>li>a {
        margin: 0px 15px;
+
                color: #ddd;
        padding: 15px 0px;
+
            }
    }
+
            .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
 +
            .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
 +
                color: #F8CE63;
 +
            }
 +
        }
  
 +
        .navbar-nav>li>.dropdown-menu {
 +
            background-color: #444;
 +
        }
  
    /* highlight class, adds a gray background */
+
        .section {
    .igem_2017_content_wrapper .highlight.gray {
+
            margin: 25px 0;
        background-color: #190707;
+
        }
    }
+
  
     /* highlight with decoration blue line on top */
+
     </style>
     .igem_2017_content_wrapper .highlight.blue_top {
+
     <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
        border-top: 4px solid #190707;
+
     <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
     }
+
  
     /* highlight with a full blue border decoration */
+
     <script>
    .igem_2017_content_wrapper .highlight.blue_border {
+
        $(document).ready(function(){
        border: 4px solid  #190707;
+
            $("#mw-content-text").removeClass("mw-content-ltr");
    }
+
        });
 +
    </script>
  
  
     /* button class */
+
     <!-- This tells the browser that your page is responsive -->
    .igem_2017_content_wrapper .button{
+
    <meta name="viewport" content="width=device-width, initial-scale=1">
        max-width: 35%;
+
        margin: 30px auto;
+
        padding: 12px 10px;
+
        background-color: #190707;
+
        text-align: center;
+
        color: #F8CE63;
+
        -webkit-transition: all 0.4s ease;
+
        -moz-transition: all 0.4s ease;
+
        -ms-transition: all 0.4s ease;
+
        -o-transition: all 0.4s ease; transition: all 0.4s ease;
+
    }
+
  
    /* styling for button on hover */
+
</head>
    .igem_2017_content_wrapper .button:hover{
+
<body>
        background-color: #190707;
+
        color: #F8CE63;
+
    }
+
  
 +
<!--MENU-->
 +
<nav class="navbar navbar-default navbar-fixed-top">
 +
    <div class="container-fluid">
 +
        <!-- Brand and toggle get grouped for better mobile display -->
 +
        <div class="navbar-header">
 +
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
 +
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
                <span class="sr-only">Toggle navigation</span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
            </button>
 +
            <a class="navbar-brand" href="https://2017.igem.org/Team:Stuttgart">
 +
                <img alt="Team:Stuttgart"
 +
                    src="https://static.igem.org/mediawiki/2017/1/18/UNISTUTTGARTLOGO.png">
 +
            </a>
 +
        </div>
  
 +
        <!-- Collect the nav links, forms, and other content for toggling -->
 +
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
            <ul class="nav navbar-nav">
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Stuttgart">Home</a>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 +
                      aria-expanded="false">Team <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Team">Team</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Attributions">Attributions</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Sponsoring">Sponoring</a></li>
 +
                        <!--<li role="separator" class="divider"></li>-->
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 +
                      aria-expanded="false">Project <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <!--<li class="navbar-text navbar-left">Dry Lab</li>-->
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Description">Description</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Background-Information">Background
 +
                            Information</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Protocols">Protocols & Experiments</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Notebook">Notebook</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/InterLab">Interlab Study</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Model">Modelling</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Results">Results</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Parts">Parts</a></li>
 +
                        <!--<li role="separator" class="divider"></li>-->
 +
                    </ul>
 +
                </li>
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Stuttgart/Safety">Safety</a>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 +
                      aria-expanded="false">Human Practices <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Engagement">Public Engagement</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/HP/Gold_Integrated">Integrated and Gold</a>
 +
                        </li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/HP/Silver">Silver HP</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Collaborations">Collaborations</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 +
                      aria-expanded="false">Awards <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Applied_Design">Applied Design</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Measurement">Measurement</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li>
 +
                    <a href="https://igem.org/2017_Judging_Form?team=Stuttgart">Judging Form</a>
 +
                </li>
 +
            </ul>
 +
        </div><!-- /.navbar-collapse -->
 +
    </div><!-- /.container-fluid -->
 +
</nav>
  
  
    /***************************************************** RESPONSIVE STYLING ****************************************************/
 
  
    /* IF THE SCREEN IS LESS THAN 1200PX */
 
    @media only screen and (max-width: 1200px) {
 
  
        #content {width:100%; }
 
        .igem_2017_menu_wrapper {width:15%; right:0;}
 
        .highlight {padding:10px 0px;}
 
        .igem_2017_menu_wrapper #display_menu_control { display:none; }
 
        #menu_content { display:block;}
 
        .menu_button.direct_to_page {padding-left: 17px;}
 
  
     }
+
<!-- start of content -->
 +
<h1 align=middle> Project description </h1>
 +
<div class="container">
 +
     <div class="row section">
 +
        <div class="col-xs-12 col-sm-12 col-md-12">
 +
            <h3>What's the problem?</h3>
 +
            <p>Our project deals with an everyday problem described by the following scenario:
 +
You want to enjoy a refreshing shower in the morning, but your hairy roommate clogged the drain again?
 +
You would like to have a relaxed bubble bath after a long day, but there are bad odors coming out of the pipe system?
 +
<br>
 +
<br>
 +
The general practice now:
 +
<ol><li>You try the ‘hot water method’ to flush the drain…  nothing happens.</li>
 +
<li>You remember what your mother taught you, so you put a fancy mix of vinegar, baking soda and some magic into the drain… a mysterious creature arises, but nothing else happens.</li>
 +
<li>In the end there is just one thing left – you put the nasty chemical mixture of the stinky cleaning agent down the drain. The corrosive cloud disappears and you can finally take your shower… still trying not to breath in the acrid fumes.</li></ol>
 +
</p>
 +
          </div>
 +
        </div>
 +
        <div class="row section">
 +
<div class="col-xs-12 col-sm-12 col-md-12">
 +
    <!--<https://static.igem.org/mediawiki/2017/0/0b/Comicstuttgart.png">-->
 +
    <img src="https://static.igem.org/mediawiki/2017/0/0b/Comicstuttgart.png" class="img-responsive"/>
 +
</div>
 +
</div>
 +
<div class="row section">
 +
    <div class="col-xs-12 col-sm-12 col-md-12">
 +
      <p>Pipe clogging and closure occurs in every household as well as in industry.
 +
        Various components contribute to the pipe closure, such as fat and hair.
 +
        Commercial chemical pipe cleaners contain aggressive substances, which are harmful to the environment and health and also can lead to pipe breaks.
 +
        Biological alternatives (purified enzymes) have been researched for years, without reaching the efficiency of chemical cleaners.
 +
        In addition, the purification of the enzymes is very complex and cost intensive. </p>
 +
<h3>Our solution</h3>
 +
      <p>We pursue a system-biological solution which is based on an intact microbial system.
 +
        Inspired by different interesting projects we decided to develope a keranolytic Escherichia coli.
 +
        The projects of past iGEM-teams were part of our investigation too and we are already co-working with iGEM-team OLS_Canmore 2015/2016 to exchange information.
 +
        We would like to use the knowledge of these groundworks to develop a new type of enzymatic cleaning agent by complementing and combining ideas out of different scientific sources.
 +
        To differ from other projects we are aiming to engineer Escherichia coli to express enzymes like esterases, lipases and keratinases into the medium.
 +
        Due to the extracellular expression expensive and time-consuming purification steps could be avoided and the enzymes could be secreted directly into the drain.As a special feature we want to use the metabolites of the enzymatic degradation to produce a lovely rose-scent to refresh your whole room.
 +
        In addition this reaction could also be used to indicate that the enzymes are working efficiently on your drainage problem.
 +
      </p>
 +
        </div>
 +
    </div>
 +
    <div class="row section">     
 +
      <h2 align=middle>Light up the pipe - 3 parts for a better flow</h2>
 +
        <div class="col-xs-12 col-sm-5 col-md-5">
 +
          <h3>Part 1 - Esterases and Lipases</h3>
 +
            <!--<https://static.igem.org/mediawiki/2017/4/4f/EsteraseCOMIC.png">-->
 +
            <img src="https://static.igem.org/mediawiki/2017/4/4f/EsteraseCOMIC.png" class="img-responsive"/>
 +
        </div>
 +
        <div class="col-xs-12 col-sm-7 col-md-7">
 +
<br>
 +
<br>
 +
          <p>Hair is surrounded by a layer of grease and waxes which first need to be removed to make the hair-keratin available for keratinases.
 +
            For the first degradation step we choose a combination of  esterases and lipases.
 +
We investigated two different esterases for their enzyme activity.
 +
One esterase from the registry (EstCS2 BBa_K1149002) and one esterase (LipB) supplied by Dr. Eggert from Evoxx were compared.
 +
Additionally we choose the lipase TliA to support the esterases at the fat degradation and to accelerate the entire degradation process.
 +
For the extracellular secretion of the enzymes we attached different signal sequences (pelB, OmpA and phoA) that were provided on the iGEM plates.
 +
<br>
 +
  <h4>EstCS2</h4>
 +
<p>EstCS2 from the iGEM Imperial College 2013 was proved to be active.
 +
      In their project the cells expressing these construct were grown and lysed by sonication and were utilized in a colourimetric assay with the substrate analog para-Nitrophenyl butyrate. In our project we didn’t purify the esterases but used the supernatant for the enzyme activity assay.
 +
    </p>
 +
  </div>
 +
</div>
 +
<div class="row section">
 +
<div class="col-xs-12 col-sm-12 col-md-12">
 +
    <h4>LipB</h4>
 +
    <p>LipB showed an enzyme activity of 2,8 U/mL in the supernatant. First, we repeated the enzyme activity assay from the iGEM TU Darmstadt 2012 to determine the esterase with the highest enzyme activity.
 +
      urify the esterases but used the supernatant for the enzyme activity assay.
 +
    </p>
 +
    <br>
 +
    <h4>TliA</h4>
 +
    <p>The lipase that is used for this project is the TliA lipase from Pseudomonas fluorescens. TliA is secreted by the ABC (ATP binding cassette) export system (prtDEF gene cluster) from Dickeya dadantii (formerly known as Erwinia chrysanthemi).
 +
      The LARD secretion tag for the ABC export system is added directly to the TliA gene, which hopefully leads to a good export yield and a high extracellular activity.
 +
In order to control gene expression, the TliA gene is expressed by the pBAD promoter, which can be induced by arabinose. The prtDEF gene cluster is expressed by a constitutive promoter of mediocre strength. So, the ABC export system is always expressed at a certain level and can export the LARD-tagged TliA lipase, if expressed.
 +
Eom et al. have already shown extracellular activity of TliA when secreted with the ABC export system.
 +
So, if the TliA lipase is expressed, it is exported out of the cell and degrades the greasy layer surrounding the hair, which makes the keratin accessible for the keratinases.
 +
</p>
 +
  </div>
 +
    </div>
 +
    <div class="row section">
 +
    <div class="col-xs-12 col-sm-7 col-md-7">
 +
<br>
 +
<br>
 +
<br>
 +
        <p>Keratinases are  promising enzymes that find their applicability in agro-industrial, pharmaceutical and biomedicals fields.
 +
          We want to profit from them by applying them on clugged pipes full of hair that is a common issue in lots of households.
 +
          Keratinases are enzymes that are capable of degrading hair.
 +
          Hair mostly consists of alpha-Keratin. Many different keratinases produced by different Bacilli, Actinobacteria and fungi have been reported.
 +
          All of them vary by having their specific biochemical and biophysical properties e.g. temperature and pH activity range.
 +
          Using their proteolytic capability that destroys hair we want to use them to avoid chemical compounds that are recently mainly applied to cleanse tubes.
 +
          By hydrolization of disulfide bonds keratin degrades. This is due to confirmation changes which leads to an exposure of more sites for keratinase action (Satyanarayana et al. 2013, Vignardes et al. 1999). Previous projects from iGEM Teams such as Sheffield 2014, Team Canmore 2015 and Team Canmore 2016 helped us to tackle this problem as they were regarding similar problems.
 +
</p>
 +
</div>
 +
<div class="col-xs-12 col-sm-5 col-md-5">
 +
  <h3>Part 2 - Keratinases</h3>
 +
    <!--<https://static.igem.org/mediawiki/2017/c/c3/KeratinaseCOMIC.png">-->
 +
    <img src="https://static.igem.org/mediawiki/2017/c/c3/KeratinaseCOMIC.png" class="img-responsive"/>
 +
</div>
 +
</div>
 +
<div class="row section">
 +
<div class="col-xs-12 col-sm-12 col-md-12">
 +
<p>Still there are a lots of things that have to be improved as these Teams were facing different issues.
 +
The Team of Sheffield stumbled over the problem that the keratinase colonies were either not producing or exporting the protein in a functional form. While Canmore accomplished to succeed to show a certain Keratinase activity, due to time limitation they were not able to show quanititative but qualititative observations of keratine degredation.
 +
Based on these already promising results we want to focus on improving the keratinases using different promotors that regulate a successful protein secretations without being toxic to the host organism.
 +
For efficient hair degradation we chose different keratinases (KerUS, KerA, KerBL and KerP). Moreover we combined this keratinases with different anderson-promotors (BBa_K206000, BBa_J23114 and BBaJ23102) and signal sequences (PelB, OmpA and PhoA) for extracellular transport of the keratinases.
 +
</p>
 +
<br>
 +
<h4>KerP</h4>
 +
<p>Keratinase kerP is a 33 kDa monomeric protein. Ker P is a serine protease. Serine proteases are protelytic enzymes, charaterizised by a reactive serine side chain (Kraut 1977). The family contains many diffrent enzymes with wide spread functions. Most of keratinases are serine proteases capable to degrade recalcitrant protein like nails, hair, feathers (Sharma and Gupta 2010b). KS-1 has his optimal activity at pH = 9 and 60 C.
 +
</p>
 +
</div>
 +
</div>
 +
<div class="row section">
 +
<div class="col-xs-12 col-sm-12 col-md-12">
 +
  <h3>Part 3 - a lovely scent of...</h3>
 +
<br>
 +
  <p>The microbial synthesis of natural flavor compounds has become a very attractive alternative to the chemical production (1). In recent years microorganisms such as E.coli and Yeast have been metabolically engineered to produce different flavors like limonene, geraniol or rose (1,2,3).
 +
    For our project we discussed different approaches and choose two different scents: rose and limonene.
 +
  </p>
 +
</div>
 +
</div>
 +
<div class="row section">
 +
  <div class="col-xs-12 col-sm-5 col-md-5">
 +
    <h3>... rose fragrance</h3>
 +
      <!--<https://static.igem.org/mediawiki/2017/d/d7/Rosescent.png">-->
 +
      <img src="https://static.igem.org/mediawiki/2017/d/d7/Rosescent.png" class="img-responsive"/>
 +
  </div>
 +
  <div class="col-xs-12 col-sm-7 col-md-7">
 +
<br>
 +
<br>
 +
      <p>As first special fragrance we want to install a lovely scent of rose in our microbial system. Hair are commonly made of Keratin (98%) and small amounts of amino acids, such as L-phenylalanine. This amino acid can be used as substrate for the production of 2-Phenylethylacetate (2-PEAc), which has a rose-like odor (1).
 +
Therefor this odor can act as an indicator for keratin degradation. In recent studies from Guo et al the 2-PEAc biosynthetic pathway was successfully designed and expressed in E.coli (1). This pathway was used for our project and comprised four steps (Fig.1):
 +
<li> Aminotransferase (ARO 8) for transamination of L-phenylalanine to phenylpyruvate</li>
 +
<li> 2-keto acid decarboxylase KDC for the decarboxylation of the phenylpyruvate to phenylacetaldehyde</li>
 +
<li> Aldehyde reductase YjgB for the reduction of phenylacetaldehyde to 2-Phenylethanol</li>
 +
<li> Alcohol acetyltransferase ATF1 for the esterification of 2-PE to 2-PEAc.</li>
 +
</p>
 +
</div> 
 +
</div>
 +
<div class="row section">
 +
        <div class="col-xs-12 col-sm-9 col-md-9">
 +
  <!--<https://static.igem.org/mediawiki/2017/7/7a/Stuttgartpathwayrose.png">-->
 +
  <img src="https://static.igem.org/mediawiki/2017/7/7a/Stuttgartpathwayrose.png" class="img-responsive"/>
 +
</div>
 +
</div>
 +
<br> 
 +
<div class="row section">
 +
<div class="col-xs-12 col-sm-12 col-md-12">         
 +
<h3>... limonene fragrance</h3>
 +
<p>Limonene is a well-known cyclic monoterpene which can occur in two optical forms (2).
 +
  (D)-Limonene is one of the most important and widespread terpenes in the flavor and fragrance industry, for example in citrus-flavored products such as soft drinks and candy (2). The (L)-Limonene form has a more harsh fir-like odor with a lemon-note (2). For our project we choose an enzyme-cascade, beginning with acetyl-coA and leading to the product (L)-limonene. This biosynthetic pathway was designed and inserted in E.coli (Fig.2).
 +
</p>
 +
</div>
 +
<div class="row section">
 +
<div class="col-xs-12 col-sm-10 col-md-10">
 +
  <!--<https://static.igem.org/mediawiki/2017/8/8a/Limonenepathway.png">-->
 +
  <img src="https://static.igem.org/mediawiki/2017/8/8a/Limonenepathway.png" class="img-responsive"/>
 +
</div>
 +
</div>
 +
<br>
 +
<br>
 +
<br>
 +
<div class="row section">
 +
<div class="col-xs-12 col-sm-12 col-md-12">
 +
  <foot>
 +
  <p>REFERENCES
 +
  <li>(1) Metabolic engineering of Escherichia coli for production of 2-Phenylethylacetate from L-phenylalanine (2017), D. Guo and L. Zhang et. al.</li>
 +
  <li>(2) Biotechnological production of limonene in microorganisms (2016), E. Jongedijk and K. Cankar et. al. </li>
 +
  <li>(3) Utilization of alkaline phosphatase PhoA in the bioproduction of geraniol by metabolically engineered Escherichia coli (2015), W. Liu and R. Zhang et. al. </li>
 +
  <li>(4) Rose Scent: Genomics Approach to Discovering Novel Floral Fragrance–Related Genes (2002), I. Guterman and M. Shalit et. al. </li>
 +
</p>
 +
</foot>
 +
</div>
 +
</div>
 +
</div>
  
    /* IF THE SCREEN IS LESS THAN 800PX */
 
    @media only screen and (max-width: 800px) {
 
  
        .igem_2017_menu_wrapper { width:100%; height: 15%; position:relative; left:0%;}
 
        .igem_2017_content_wrapper {width:100%; margin-left:0px;}
 
        .column.half_size  {width:100%; }
 
        .column.full_size img, .column.half_size img {  width: 100%; padding: 10px 0px;}
 
        .highlight {padding:15px 5px;}
 
        .igem_2017_menu_wrapper #display_menu_control { display:block; }
 
        #menu_content { display:none;}
 
        .igem_2017_menu_wrapper .menu_button .expand_collapse_icon { width: 5%; }
 
        .menu_bottom_padding {display:none;}
 
        .menu_button.direct_to_page { padding-left: 36px; }
 
    }
 
  
  
  
 +
</body>
 +
</html><html>
  
    /* special class that the system uses to make sure the team wants a page to be evaluated */
+
<!--- THIS IS WHERE THE HTML BEGINS --->
    .judges-will-not-evaluate {
+
        width: 96.6%;
+
        margin: 5px 15px;
+
        display: block;
+
        border: 4px solid #3399ff;
+
        font-weight: bold;
+
    }
+
  
</style>
+
<head>
 +
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"
 +
          id="bootstrap-css">
 +
    <style>
  
  
<!--- THIS IS WHERE THE HTML BEGINS --->
+
        /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
  
<head>
+
        /* Clear the default wiki settings */
  
    <!-- This tells the browser that your page is responsive -->
+
        #home_logo, #sideMenu {
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
            display: none;
 +
        }
  
</head>
+
        #sideMenu, #top_title, .patrollink {
 +
            display: none;
 +
        }
  
 +
        #content {
 +
            width: 100%;
 +
            padding: 0px;
 +
            margin-top: -7px;
 +
            margin-left: 0px;
 +
        }
  
<!--MENU-->
+
        body {
<div class="igem_2017_menu_wrapper" >
+
            background: white;
 +
        }
  
 +
        #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 {
 +
            margin-bottom: 0;
 +
            color: #F8CE63;
 +
        }
  
 +
        table {;
 +
        }
  
    <a href="https://2017.igem.org/Team:Stuttgart">
+
        /**************************************************************** MENU ***************************************************************/
         <img src="https://static.igem.org/mediawiki/2017/4/45/Bildschirmfoto_2017-10-17_um_14.23.20.png">
+
         /* Wrapper for the menu */
    </a>
+
        .igem_2017_menu_wrapper {
 +
            width: 15%;
 +
            height: 100vh;
 +
            position: fixed;
 +
            right: 0;
 +
            padding: 0;
 +
            float: right;
 +
            border-left: 1px solid #F8CE63;
 +
            background-color: white;
 +
            text-align: left;
 +
            font-family: Tahoma, Geneva, sans-serif;
 +
            overflow-y: auto;
 +
            overflow-x: hidden;
 +
        }
  
 +
        /* this hides the scrollbar to keep view consistency */
 +
        .igem_2017_menu_wrappe::-webkit-scrollbar {
 +
            display: none;
 +
        }
  
    <!-- this div is hidden by default and will only be displayed if the screen size is too small -->
+
        /* styling for links in the menu, removes the line under text */
    <div class="menu_button" id="display_menu_control">
+
         .igem_2017_menu_wrapper a {
         MENU
+
            text-decoration: none;
    </div>
+
        }
  
    <div id="menu_content">
+
        /* styling for the images in the menu */
 +
        .igem_2017_menu_wrapper img {
 +
            width: 100%;
 +
        }
  
 +
        /* styling for the menu buttons */
 +
        .igem_2017_menu_wrapper .menu_button {
 +
            width: 100%;
 +
            padding: 10px 0px 10px 15px;
 +
            float: left;
 +
            border-bottom: 1px solid #F8CE63;
 +
            font-size: 16px;
 +
            font-weight: bold;
 +
            color: #F8CE63;
 +
            cursor: pointer;
 +
        }
  
 +
        .igem_2017_menu_wrapper .menu_bottom_padding {
 +
            width: 100%;
 +
            height: 30px;
 +
            float: left;
 +
        }
  
 +
        .menu_button.direct_to_page {
 +
            padding-left: 36px;
 +
        }
  
         <a href="https://2017.igem.org/Team:Stuttgart">
+
         .igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
             <div class="menu_button direct_to_page">
+
             width: 10%;
                HOME
+
             float: left;
             </div>
+
         }
         </a>
+
  
 +
        .igem_2017_menu_wrapper .menu_button .expand_collapse_icon::before {
 +
            content: "+";
 +
        }
  
 +
        /* styling for the menu buttons on hover */
 +
        .igem_2017_menu_wrapper .menu_button:hover, .igem_2017_menu_wrapper .submenu_button:hover, .submenu_button.current_page:hover {
 +
            background-color: #F8CE63;
 +
            text-decoration: none;
 +
            color: #190707;
 +
        }
  
         <div class="menu_button">
+
         /* styling for the menu button when it is the current page */
             <div class="expand_collapse_icon">  </div> TEAM
+
        .current_page {
         </div>
+
             background-color: white !important;
 +
            color: #F8CE63 !important;
 +
         }
  
         <div class="submenu_wrapper" id="team_submenu">
+
         /* styling for the submenu buttons */
 +
        .igem_2017_menu_wrapper .submenu_button {
 +
            width: 100%;
 +
            padding: 10px 0px 10px 34px;
 +
            float: left;
 +
            background-color: white;
 +
            border-bottom: 1px solid #F8CE63;
 +
            font-size: 15px;
 +
            color: #F8CE63;
 +
            cursor: pointer;
 +
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Team">
+
        /* wrapper for the submenu items, they are hidden by default*/
                <div class="submenu_button" id="Team_page">
+
        .igem_2017_menu_wrapper .submenu_wrapper {
                    Team
+
            display: none;
                </div>
+
        }
            </a>
+
  
            <a href="https://2017.igem.org/Team:Stuttgart/Collaborations">
+
        /* when the page size is bigger than 800px, this show/hide control is hidden by default */
                <div class="submenu_button"  id="Collaborations_page">
+
        .igem_2017_menu_wrapper #display_menu_control {
                    Collaborations
+
            display: none;
                </div>
+
            text-align: center;
            </a>
+
        }
  
 +
        /***************************************************** CONTENT OF THE PAGE ****************************************************/
  
         </div>
+
         /* Wrapper for the content */
 +
        .igem_2017_content_wrapper {
 +
            width: 83%;
 +
            margin: 0;
 +
            display: block;
 +
            float: left;
 +
            background-color: white;
 +
            font-family: Tahoma, Geneva, sans-serif;
 +
        }
  
 +
        /********************************* HTML STYLING  *********************************/
  
 +
        /* styling for the titles h1 h2 */
 +
        .igem_2017_content_wrapper h1, .igem_2017_content_wrapper h2 {
 +
            color: #F8CE63;
 +
            padding: 15px 0 25px 0;
 +
            border-bottom: 0;
 +
        }
  
 +
        /* styling for the titles  h3 h4 h5 h6*/
 +
        .igem_2017_content_wrapper h3, .igem_2017_content_wrapper h4, .igem_2017_content_wrapper h5, .igem_2017_content_wrapper h6 {
 +
            padding: 5px 15px;
 +
            border-bottom: 0;
 +
        }
  
 +
        /* font and text */
 +
        .container p,
 +
        #HQ_page p {
 +
            line-height: 24px;
 +
            font-size: 16px;
 +
            color: #333;
 +
        }
  
         <div class="menu_button">
+
         .igem_2017_content_wrapper img {
             <div class="expand_collapse_icon">  </div> PROJECT
+
             padding: 15px 0;
         </div>
+
         }
  
         <!-- project submenu -->
+
         /* Links */
         <div class="submenu_wrapper">
+
        .igem_2017_content_wrapper a {
 +
            font-weight: bold;
 +
            text-decoration: underline;
 +
            text-decoration-color: #190707;
 +
            color: #3399ff;
 +
            -webkit-transition: all 0.4s ease;
 +
            -moz-transition: all 0.4s ease;
 +
            -ms-transition: all 0.4s ease;
 +
            -o-transition: all 0.4s ease;
 +
            transition: all 0.4s ease;
 +
         }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Description">
+
        /* hover for the links */
                <div class="submenu_button"  id="Description_page">
+
        .igem_2017_content_wrapper a:hover {
                    Description
+
            text-decoration: none;
                </div>
+
            color: #000000;
            </a>
+
        }
  
   
+
        /* non numbered lists */
 +
        .igem_2017_content_wrapper ul {
 +
            padding: 0px 20px;
 +
            font-size: 15px;
 +
            font-family: Tahoma, Geneva, sans-serif;
 +
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Experiments">
+
        /* numbered lists */
                <div class="submenu_button"  id="Experiments_page">
+
        .igem_2017_content_wrapper ol {
                    Experiments
+
            padding: 0px;
                </div>
+
            font-size: 15px;
            </a>
+
            font-family: Tahoma, Geneva, sans-serif;
 +
        }
  
 +
        /* Table */
 +
        .igem_2017_content_wrapper table {
 +
            width: 97%;
 +
            margin: 15px 10px;
 +
            border: 2px solid #190707;
 +
            border-collapse: collapse;
 +
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Notebook">
+
        /* table cells */
                <div class="submenu_button"  id="Notebook_page">
+
        .igem_2017_content_wrapper td {
                    Notebook
+
            padding: 10px;
                </div>
+
            vertical-align: text-top;
             </a>
+
            border: 1px solid #190707;
 +
             border-collapse: collapse;
 +
        }
  
<a href="https://2017.igem.org/Team:Stuttgart/Protocols">
+
        /* table headers */
                <div class="submenu_button"  id="Protocols_page">
+
        .igem_2017_content_wrapper th {
                    Protocols
+
            padding: 10px;
                </div>
+
            vertical-align: text-top;
             </a>
+
            border: 1px solid #190707;
 +
             border-collapse: collapse;
  
 +
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/InterLab">
+
        /**********************************LAYOUT CLASSES **********************************/
                <div class="submenu_button"  id="InterLab_page">
+
                    InterLab
+
                </div>
+
            </a>
+
  
            <a href="https://2017.igem.org/Team:Stuttgart/Contribution">
+
        /* general class for column divs */
                <div class="submenu_button"  id="Contribution_page">
+
        .igem_2017_content_wrapper .column {
                    Contribution
+
            padding: 10px 0px;
                </div>
+
            float: left;
            </a>
+
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Model">
+
        /* class for a full width column */
                <div class="submenu_button"  id="Model_page">
+
        .column .full_size {
                    Model
+
            width: 100%;
                </div>
+
        }
            </a>
+
  
            <a href="https://2017.igem.org/Team:Stuttgart/Results">
+
        /* styling for images in a full width column*/
                <div class="submenu_button"  id="Results_page">
+
        .column.full_size img {
                    Results
+
            width: 97%;
                </div>
+
            padding: 10px 15px;
            </a>
+
        }
  
 +
        /* class for a half width column */
 +
        .column.half_size {
 +
            width: 50%;
 +
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Improve">
+
        /* styling for images in a half width column*/
                <div class="submenu_button"  id="Improve_page">
+
        .column.half_size img {
                    Improve
+
            width: 94.5%;
                </div>
+
            padding: 10px 15px;
            </a>
+
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Attributions">
+
        /********************************* SUPPORT CLASSES ********************************/
                <div class="submenu_button"  id="Attributions_page">
+
                    Attributions
+
                </div>
+
            </a>
+
  
         </div>
+
         /* class that clears content below*/
 +
        .igem_2017_content_wrapper .clear {
 +
            clear: both;
 +
        }
  
 +
        /* adds extra spacing when clearing content */
 +
        .igem_2017_content_wrapper .clear.extra_space {
 +
            height: 30px;
 +
        }
  
 +
        /* highlight class, makes content slightly smaller */
 +
        .igem_2017_content_wrapper .highlight {
 +
            margin: 0px 15px;
 +
            padding: 15px 0px;
 +
        }
  
 +
        /* highlight class, adds a gray background */
 +
        .igem_2017_content_wrapper .highlight.gray {
 +
            background-color: #190707;
 +
        }
  
 +
        /* highlight with decoration blue line on top */
 +
        .igem_2017_content_wrapper .highlight.blue_top {
 +
            border-top: 4px solid #190707;
 +
        }
  
 +
        /* highlight with a full blue border decoration */
 +
        .igem_2017_content_wrapper .highlight.blue_border {
 +
            border: 4px solid #190707;
 +
        }
  
         <div class="menu_button">
+
         /* button class */
             <div class="expand_collapse_icon">  </div> PARTS
+
        .igem_2017_content_wrapper .button {
         </div>
+
             max-width: 35%;
 +
            margin: 30px auto;
 +
            padding: 12px 10px;
 +
            background-color: #190707;
 +
            text-align: center;
 +
            color: #F8CE63;
 +
            -webkit-transition: all 0.4s ease;
 +
            -moz-transition: all 0.4s ease;
 +
            -ms-transition: all 0.4s ease;
 +
            -o-transition: all 0.4s ease;
 +
            transition: all 0.4s ease;
 +
         }
  
         <!-- parts submenu -->
+
         /* styling for button on hover */
         <div class="submenu_wrapper">
+
        .igem_2017_content_wrapper .button:hover {
 +
            background-color: #190707;
 +
            color: #F8CE63;
 +
         }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Parts">
+
        /***************************************************** RESPONSIVE STYLING ****************************************************/
                <div class="submenu_button"  id="Parts_page">
+
                    Parts
+
                </div>
+
            </a>
+
  
            <a href="https://2017.igem.org/Team:Stuttgart/Basic_Part">
+
        *, *:before, *:after {
                <div class="submenu_button"  id="Basic_Part_page">
+
            -webkit-box-sizing: border-box;
                    Basic Parts
+
            -moz-box-sizing: border-box;
                </div>
+
             box-sizing: border-box;
             </a>
+
        }
  
             <a href="https://2017.igem.org/Team:Stuttgart/Composite_Part">
+
        body {
                <div class="submenu_button"  id="Composite_Part_page">
+
             overflow-x: hidden;
                    Composite Parts
+
            margin-top: 80px;
                </div>
+
             letter-spacing: 0.02em;
             </a>
+
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Part_Collection">
+
        /* IF THE SCREEN IS LESS THAN 1200PX */
                <div class="submenu_button"  id="Part_Collection_page">
+
         @media only screen and (max-width: 1024px) {
                    Part Collection
+
                </div>
+
            </a>
+
         </div>
+
  
 +
            #content {
 +
                width: 100%;
 +
            }
  
 +
            .igem_2017_content_wrapper {
 +
                width: 100%;
 +
            }
  
 +
            .igem_2017_menu_wrapper {
 +
                width: 100%;
 +
                height: 15%;
 +
                position: relative;
 +
                left: 0;
 +
            }
  
 +
            .highlight {
 +
                padding: 10px 0px;
 +
            }
  
 +
            .igem_2017_menu_wrapper #display_menu_control {
 +
                display: none;
 +
            }
  
        <a href="https://2017.igem.org/Team:Stuttgart/Safety">
+
             #menu_content {
             <div class="menu_button direct_to_page">
+
                 display: block;
                 SAFETY
+
             }
             </div>
+
        </a>
+
  
 +
            .menu_button.direct_to_page {
 +
                padding-left: 17px;
 +
            }
 +
        }
  
 +
        /* IF THE SCREEN IS LESS THAN 800PX */
 +
        @media only screen and (max-width: 800px) {
  
 +
            .igem_2017_content_wrapper {
 +
                width: 100%;
 +
                margin-left: 0;
 +
            }
  
 +
            .column.half_size {
 +
                width: 100%;
 +
            }
  
 +
            .column.full_size img, .column.half_size img {
 +
                width: 100%;
 +
                padding: 10px 0;
 +
            }
  
 +
            .highlight {
 +
                padding: 15px 5px;
 +
            }
  
        <div class="menu_button" >
+
             .igem_2017_menu_wrapper #display_menu_control {
             <div class="expand_collapse_icon">  </div> HUMAN PRACTICES
+
                display: block;
        </div>
+
            }
  
        <!-- human practices submenu -->
+
            #menu_content {
        <div class="submenu_wrapper">
+
                display: none;
 +
            }
  
             <a href="https://2017.igem.org/Team:Stuttgart/HP/Silver">
+
             .igem_2017_menu_wrapper .menu_button .expand_collapse_icon {
                 <div class="submenu_button"  id="Silver_page">
+
                 width: 5%;
                    Silver HP
+
             }
                </div>
+
             </a>
+
  
             <a href="https://2017.igem.org/Team:Stuttgart/HP/Gold_Integrated">
+
             .menu_bottom_padding {
                 <div class="submenu_button" id="Gold_Integrated_page">
+
                 display: none;
                    Integrated and Gold
+
             }
                </div>
+
             </a>
+
  
 +
            .menu_button.direct_to_page {
 +
                padding-left: 36px;
 +
            }
 +
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Engagement">
+
        /* special class that the system uses to make sure the team wants a page to be evaluated */
                <div class="submenu_button"  id="Engagement_page">
+
        .judges-will-not-evaluate {
                    Public Engagement
+
            width: 96.6%;
                </div>
+
            margin: 5px 15px;
             </a>
+
            display: block;
 +
            border: 4px solid #3399ff;
 +
             font-weight: bold;
 +
        }
  
         </div>
+
         /* CUSTOM BS NAVBAR STYLES */
 +
        .navbar {
 +
            border: 0;
 +
        }
  
 +
        .navbar-default {
 +
            margin-top: 15px;
 +
            background-color: #333;
 +
        }
  
         <div class="menu_button">
+
         .navbar-brand {
             <div class="expand_collapse_icon">  </div> AWARDS
+
             padding: 0;
         </div>
+
            padding-left: 25px;
 +
            padding-right: 25px;
 +
         }
  
         <!-- awards submenu -->
+
         .navbar-brand img {
         <div class="submenu_wrapper">
+
            height: 49px;
 +
         }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Applied_Design">
+
        .navbar-default .navbar-nav > li > a {
                <div class="submenu_button"  id="Applied_Design_page">
+
            color: white;
                    Applied Design
+
        }
                </div>
+
            </a>
+
  
            <a href="https://2017.igem.org/Team:Stuttgart/Entrepreneurship">
+
        .navbar-default .navbar-nav > li > a:focus,
                <div class="submenu_button"  id="Entrepreneurship_page">
+
        .navbar-default .navbar-nav > li > a:hover,
                    Entrepreneurship
+
        .navbar-default .navbar-nav > .dropdown > a .caret:hover {
                </div>
+
             color: #F8CE63;
             </a>
+
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Hardware">
+
        .navbar-default .navbar-nav > .open > a,
                <div class="submenu_button"  id="Hardware_page">
+
        .navbar-default .navbar-nav > .open > a:hover,
                    Hardware
+
        .navbar-default .navbar-nav > .open > a:focus {
                </div>
+
             color: #F8CE63;
             </a>
+
            background-color: #444;
 +
        }
  
            <a href="https://2017.igem.org/Team:Stuttgart/Measurement">
+
        .navbar-default .navbar-nav > .dropdown > a .caret {
                <div class="submenu_button"  id="Measurement_page">
+
            border-top-color: #eee;
                    Measurement
+
            border-bottom-color: #eee;
                </div>
+
        }
            </a>
+
  
             <a href="https://2017.igem.org/Team:Stuttgart/Model">
+
        .dropdown-menu {
                <div class="submenu_button"  id="Model_page">
+
             border: 0;
                    Model
+
        }
                </div>
+
        .dropdown-menu > li > a {
            </a>
+
            color: white;
 +
        }
  
         
+
        .dropdown-menu > li > a:hover,
 +
        .dropdown-menu > li > a:focus {
 +
            color: #111;
 +
            text-decoration: none;
 +
            background-color: #F8CE63;
 +
        }
  
         </div>
+
         .navbar-default .navbar-nav > .dropdown > a:hover .caret,
 +
        .navbar-default .navbar-nav > .dropdown > a:focus .caret {
 +
            border-top-color: white;
 +
            border-bottom-color: white;
 +
        }
  
         <a href="https://igem.org/2017_Judging_Form?team=Stuttgart">
+
         @media (max-width: 767px) {
             <div class="menu_button direct_to_page">
+
            .navbar-default .navbar-nav .open .dropdown-menu>li>a {
                 JUDGING FORM
+
                color: #ddd;
             </div>
+
            }
         </a>
+
            .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus,
 +
             .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
 +
                 color: #F8CE63;
 +
             }
 +
         }
  
 +
        .navbar-nav>li>.dropdown-menu {
 +
            background-color: #444;
 +
        }
  
 +
        .section {
 +
            margin: 25px 0;
 +
        }
  
        <div class="menu_bottom_padding" >
+
    </style>
        </div>
+
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
 +
    <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
  
     </div>
+
    <script>
 +
        $(document).ready(function(){
 +
            $("#mw-content-text").removeClass("mw-content-ltr");
 +
        });
 +
     </script>
  
 +
 +
    <!-- This tells the browser that your page is responsive -->
 +
    <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 +
</head>
 +
<body>
 +
 +
<!--MENU-->
 +
<nav class="navbar navbar-default navbar-fixed-top">
 +
    <div class="container-fluid">
 +
        <!-- Brand and toggle get grouped for better mobile display -->
 +
        <div class="navbar-header">
 +
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
 +
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
 +
                <span class="sr-only">Toggle navigation</span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
                <span class="icon-bar"></span>
 +
            </button>
 +
            <a class="navbar-brand" href="https://2017.igem.org/Team:Stuttgart">
 +
                <img alt="Team:Stuttgart"
 +
                    src="https://static.igem.org/mediawiki/2017/1/18/UNISTUTTGARTLOGO.png">
 +
            </a>
 +
        </div>
 +
 +
        <!-- Collect the nav links, forms, and other content for toggling -->
 +
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
            <ul class="nav navbar-nav">
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Stuttgart">Home</a>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 +
                      aria-expanded="false">Team <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Team">Team</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Attributions">Attributions</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Sponsoring">Sponoring</a></li>
 +
                        <!--<li role="separator" class="divider"></li>-->
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 +
                      aria-expanded="false">Project <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <!--<li class="navbar-text navbar-left">Dry Lab</li>-->
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Description">Description</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Background-Information">Background
 +
                            Information</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Protocols">Protocols & Experiments</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Notebook">Notebook</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/InterLab">Interlab Study</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Model">Modelling</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Results">Results</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Parts">Parts</a></li>
 +
                        <!--<li role="separator" class="divider"></li>-->
 +
                    </ul>
 +
                </li>
 +
                <li>
 +
                    <a href="https://2017.igem.org/Team:Stuttgart/Safety">Safety</a>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 +
                      aria-expanded="false">Human Practices <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Engagement">Public Engagement</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/HP/Gold_Integrated">Integrated and Gold</a>
 +
                        </li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/HP/Silver">Silver HP</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Collaborations">Collaborations</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li class="dropdown">
 +
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
 +
                      aria-expanded="false">Awards <span class="caret"></span></a>
 +
                    <ul class="dropdown-menu">
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Applied_Design">Applied Design</a></li>
 +
                        <li><a href="https://2017.igem.org/Team:Stuttgart/Measurement">Measurement</a></li>
 +
                    </ul>
 +
                </li>
 +
                <li>
 +
                    <a href="https://igem.org/2017_Judging_Form?team=Stuttgart">Judging Form</a>
 +
                </li>
 +
            </ul>
 +
        </div><!-- /.navbar-collapse -->
 +
    </div><!-- /.container-fluid -->
 +
</nav>
  
  
  
</div>
 
  
  
 
<!-- start of content -->
 
<!-- start of content -->
<div class="igem_2017_content_wrapper">
+
<h1 align=middle> Protocols & Experiments </h1>
<h1 align=middle>Protocols</h1>
+
<div class="container">
 
+
    <div class="row section">
<table>
+
        <div class="col-xs-12 col-sm-12 col-md-12">
<td bgcolor=#F8CE63>
+
            <h3>Preparation of chemically competent DH5alpha E. coli cells</h3>
<h3>Preparation of chemically competent DH5alpha E. coli cells</h3>
+
            <br>
<br>
+
            <h4>Material:</h4>
Material:
+
<p><ul><li>LB media</li>
<br>
+
<ul><li>LB media</li>
+
 
<li>TSS buffer </li>
 
<li>TSS buffer </li>
<li>DH5alpha E. coli cells (o/n colonies on agar plates)</li></ul>
+
<li>DH5alpha E. coli cells (o/n colonies on agar plates)</li></ul></p>
<br>
+
Method:
+
 
<br>
 
<br>
<ol><li>Pick one colony of the plate and transfer into 5 mL of LB media. Grow the culture over night for 16-18 hours at 37 deg. celsius. </li>
+
<h4>Method:</h4>
 +
<p><ol><li>Pick one colony of the plate and transfer into 5 mL of LB media. Grow the culture over night for 16-18 hours at 37 deg. celsius. </li>
 
<li>Transfer 1 mL of the overnight culture into a shaking flask with 99 mL of LB media. Measure optical density (OD) at 600 nm and incubate culture at 37 deg. celsius (shaking) to an OD of 0,5. </li>
 
<li>Transfer 1 mL of the overnight culture into a shaking flask with 99 mL of LB media. Measure optical density (OD) at 600 nm and incubate culture at 37 deg. celsius (shaking) to an OD of 0,5. </li>
 
<li>Divide the 100 mL into two 50 mL tubes and incubate 10 min on ice. </li>
 
<li>Divide the 100 mL into two 50 mL tubes and incubate 10 min on ice. </li>
Line 748: Line 1,407:
 
<li>Resuspend the pellet of competent cells with 10 % TSS buffer (5 mL). </li>
 
<li>Resuspend the pellet of competent cells with 10 % TSS buffer (5 mL). </li>
 
<li>Aliquot 100 µL of the cell solution into 1.5 mL microtubes (all steps on ice!). </li>
 
<li>Aliquot 100 µL of the cell solution into 1.5 mL microtubes (all steps on ice!). </li>
<li>Store the competent cells at -80 deg. celsius.</li>  </ol>
+
<li>Store the competent cells at -80 deg. celsius.</li>  </ol></p>   
<br>
+
          </div>
<h3>Heat-shock Transformation of E. coli cells</h3>
+
        </div>
<br>
+
        <div class="row section">
Material:
+
            <div class="col-xs-12 col-sm-12 col-md-12">
<br>
+
                <h3>Heat-shock Transformation of E. coli cells</h3>
<ul><li>SOC media </li>
+
                <br>
<li>Agar plates with appropriate antibiotic</li></ul>
+
                <h4>Material:</h4>
<br>
+
    <p><ul><li>SOC media </li>
Method:
+
<li>Agar plates with appropriate antibiotic</li></ul></p>
<br>
+
    <br>
<ol><li>Thaw chemically competent cells on ice. </li>
+
    <h4>Method:</h4>
 +
    <p><ol><li>Thaw chemically competent cells on ice. </li>
 
<li>Transfer 50 µL of the cells into a 1.5 mL microtube, add 1 µL of the desired DNA and incubate on ice for 30 minutes.  </li>
 
<li>Transfer 50 µL of the cells into a 1.5 mL microtube, add 1 µL of the desired DNA and incubate on ice for 30 minutes.  </li>
 
<li>Place the tube in a 42 deg. celsius water bath for 60 seconds. </li>
 
<li>Place the tube in a 42 deg. celsius water bath for 60 seconds. </li>
 
<li>After heat shock leave cells on ice for 5 minutes. </li>
 
<li>After heat shock leave cells on ice for 5 minutes. </li>
 
<li>Add 950 µL of SOC media and shake cells for 2 hours at 37 deg. celsius. </li>
 
<li>Add 950 µL of SOC media and shake cells for 2 hours at 37 deg. celsius. </li>
<li>Pipet 100 µL of the cells onto an appropriate plate and spread them using sterile glass beads. Incubate overnight at 37 deg. Celsius and hope for colonies in the morning to prove a successful transformation. </li></ol>
+
<li>Pipet 100 µL of the cells onto an appropriate plate and spread them using sterile glass beads.  
<br>
+
  Incubate overnight at 37 deg. Celsius and hope for colonies in the morning to prove a successful transformation. </li></ol>
+
</p>  
<h3>Preparation of LB media</h3>
+
              </div>
<br>
+
            </div>
Material:
+
            <div class="row section">
<br>
+
                <div class="col-xs-12 col-sm-12 col-md-12">
<ul><li>Tryptone</li>
+
                    <h3>Preparation of LB media</h3>
<li>NaCl</li>
+
                    <br>
<li>Yeast extract</li></ul>
+
                    <h4>Material:</h4>
<br>
+
            <p><ul><li>Tryptone</li>
Method:
+
            <li>NaCl</li>
<br>
+
            <li>Yeast extract</li></ul></p>
<ol><li>Fill a container (bottle) to about 60/70 % its volume with destilled water. </li>
+
            <br>
 +
            <h4>Method:</h4>
 +
            <p><ol><li>Fill a container (bottle) to about 60/70 % its volume with destilled water. </li>
 
<li>Add 10 g/L Tryptone, 10 g/L NaCl and 5 g/L of yeast extract. </li>
 
<li>Add 10 g/L Tryptone, 10 g/L NaCl and 5 g/L of yeast extract. </li>
 
<li>Stir properly and fill up the remaining volume with distilled water. </li>
 
<li>Stir properly and fill up the remaining volume with distilled water. </li>
 
<li>Treat LB media by autoclave. </li></ol>
 
<li>Treat LB media by autoclave. </li></ol>
<br>
+
            </p>  
 
+
                  </div>
<h3>Preparation of LB agar</h3>
+
                </div>
<br>
+
                <div class="row section">
Material:
+
                    <div class="col-xs-12 col-sm-12 col-md-12">
<br>
+
                        <h3>Preparation of LB agar</h3>
<ul><li>Tryptone</li>
+
                        <br>
 +
                        <h4>Material:</h4>
 +
                <p><ul><li>Tryptone</li>
 
<li>NaCl</li>
 
<li>NaCl</li>
 
<li>Yeast extract</li>
 
<li>Yeast extract</li>
<li>Agar</li></ul>
+
<li>Agar</li></ul></p>
<br>
+
                <br>
Method:
+
                <h4>Method:</h4>
<br>
+
                <p><ol><li>Fill a container (bottle) to about 60/70 % its volume with destilled water. </li>
<ol><li>Fill a container (bottle) to about 60/70 % its volume with destilled water. </li>
+
 
<li>Add 10 g/L Tryptone, 10 g/L NaCl, 5 g/L of yeast extract and 20 g/L agar. </li>
 
<li>Add 10 g/L Tryptone, 10 g/L NaCl, 5 g/L of yeast extract and 20 g/L agar. </li>
 
<li>Stir properly and fill up the remaining volume with distilled water. </li>
 
<li>Stir properly and fill up the remaining volume with distilled water. </li>
 
<li>Treat by autoclave. </li></ol>
 
<li>Treat by autoclave. </li></ol>
<br>
+
                </p>   
<h3>Glycerol stocks – storage of bacterial strains</h3>
+
                      </div>
<br>
+
                    </div>
Material:
+
                    <div class="row section">
<br>
+
                        <div class="col-xs-12 col-sm-12 col-md-12">
<ul><li>Glycerol</li></ul>
+
                            <h3>Preparation of M9 media</h3>
<br>
+
                            <br>
Method:
+
                            <h4>Salt solution:</h4>
<br>
+
                    <p><ul><li>3g Na2HPO4  </li>
<ol><li>Mix 700 µL of overnight culture with 300 µL glycerol. </li>
+
                    <li> 1,5g KH2PO4</li>
<li>Store at -80 deg. Celsius. </li></ol>
+
                    <li>0,5g NH4Cl</li>
<br>
+
                    <li>0,25g NaCl</li>
<h3>Polymerase chain reaction (PCR)</h3>
+
                    <li>1ml MgSO4</li>
<br>
+
                    <li>50µl CaCl2</li></ul></p>
Material:
+
                    <br>
<br>
+
                    <h4>Sugar solution:</h4>
<ul><li>Primer</li>
+
            <p><ul><li>20g/l Glycerol</li>
<li>Template DNA</li>
+
            <li>5g/l Yeast </li>
<li>NEB Q5® High-Fidelity 2X Master Mix (dNTPs + Polymerase)</li>
+
            <li>10mg Thiamine</li>
<li> distilled water</li>
+
            <li>1ml Micronutrients</li></ul></p>
<li>PCR-Cycler</li></ul>
+
            <br>
<br>
+
                    <div class="row section">
Method:
+
                        <div class="col-xs-12 col-sm-12 col-md-12">
<br>
+
                            <h3>Glycerol stocks – storage of bacterial strains</h3>
<ol><li>All steps have to be performed on ice.</li>
+
                            <br>
<li>50 µL approach (mix well):</li>
+
                            <h4>Material:</h4>
<br>
+
                    <p><<ul><li>Glycerol</li></ul></p>
<table align=middle hspace=80>
+
                    <br>
<tr><th>components</th><th>volume</th><th>concentration</th> </tr>  
+
                    <h4>Method:</h4>
<tr> <td>Q5 Master Mix</td> <td>25 µL</td> <td>1x</td> </tr>
+
                    <p><ol><li>Mix 700 µL of overnight culture with 300 µL glycerol. </li>
<tr> <td> 10 µM fw primer</td> <td>2,5 µL</td> <td>0,5 µM</td></tr>
+
                    <li>Store at -80 deg. Celsius. </li></ol>
<tr> <td> 10 µM rv primer</td> <td> 2,5 µL </td> <td>0,5 µM</td> </tr>
+
                    </p>   
<tr> <td> template DNA</td> <td></td> <td><1000 ng</td> </tr>
+
                          </div>
<tr> <td> water</td> <td>remaining volume to 50 µL</td><td></td></tr>
+
                        </div>
</table>
+
                        <div class="row section">
<br>
+
                            <div class="col-xs-12 col-sm-12 col-md-12">
<li>PCR-cycler conditions:</li>
+
                                <h3>Polymerase chain reaction (PCR)</h3>
<br>
+
                                <br>
<table align=middle> <tr> <th>step</th> <th>cycles</th><th>temperature</th> <th>time</th></tr>
+
                                <h4>Material:</h4>
<tr><td>Denaturation</td><td>1</td><td>98°C</td><td>30 sec</td></tr>
+
                        <p><ul><li>Primer</li>
<tr><td>Annealing</td><td>25-35</td><td>98°C</td><td>5-10 sec</td></tr>
+
                              <li>Template DNA</li>
<tr><td>Elongation</td><td></td><td>72°C</td><td>20-30sec/kb</td></tr>
+
                              <li>NEB Q5® High-Fidelity 2X Master Mix (dNTPs + Polymerase)</li>
<tr><td>final extension</td><td>1</td><td>72°C</td><td>2 min</td></tr>
+
                              <li> distilled water</li>
<tr><td>hold</td><td></td><td>4-10°C</td><td></td></tr>
+
                              <li>PCR-Cycler</li></ul></p>
</table>
+
                        <br>
<br>
+
                        <h4>Method:</h4>
<h3>Determination of DNA concentration</h3>
+
                        <p><ol><li>All steps have to be performed on ice.</li>
<br>
+
                              <li>50 µL approach (mix well):</li></ol>
<ul><li>DNA concentration is determined by using a Nanodrop ()</li>
+
                        </p>  
<li>The absorbance at 260 nm is converted to concentration using the Lambert – Beer Equation by the program </li>
+
                            <table align=middle hspace=10>
<li>The purity of the sample is confirmed by the 260/280 ratio (contamination with proteins) and the 260/230 ratio (presence of co-purified contaminants)</li>  
+
                            <tr><th>components</th><th>volume</th><th>concentration</th> </tr>  
<li>For pure DNA the 260/280 ratio should be around 1.8 and the 260/280 ratio should be around 1.8 – 2.2. (ND-1000-v3.4-users-manual, Thermo Scientific) </li></ul>
+
                            <tr> <td>Q5 Master Mix</td> <td>25 µL</td> <td>1x</td> </tr>
<br>
+
                            <tr> <td> 10 µM fw primer</td> <td>2,5 µL</td> <td>0,5 µM</td></tr>
<br>
+
                            <tr> <td> 10 µM rv primer</td> <td> 2,5 µL </td> <td>0,5 µM</td> </tr>
<h3>Mini-Prep (based on Fast-n-Easy Plasmid Mini-Prep Kit Jena Bioscience)</h3>
+
                            <tr> <td> template DNA</td> <td></td> <td><1000 ng</td> </tr>
<br>
+
                            <tr> <td> water</td> <td>remaining volume to 50 µL</td><td></td></tr>
Material:
+
                            </table>
<br>
+
                            <br>
<ul><li>Lysis buffer</li>
+
                            <li>PCR-cycler conditions:</li>
<li>Neutralization buffer</li>
+
                            <table align=middle hspace=10>  
<li>Column-Activation buffer</li>
+
                            <tr> <th>step</th> <th>cycles</th><th>temperature</th> <th>time</th></tr>
<li>Wash buffer</li>
+
                            <tr><td>Denaturation</td><td>1</td><td>98°C</td><td>30 sec</td></tr>
<li>Elution buffer</li>
+
                            <tr><td>Annealing</td><td>25-35</td><td>98°C</td><td>5-10 sec</td></tr>
<li>Binding column</li></ul>
+
                            <tr><td>Elongation</td><td></td><td>72°C</td><td>20-30sec/kb</td></tr>
<br>
+
                            <tr><td>final extension</td><td>1</td><td>72°C</td><td>2 min</td></tr>
Method:
+
                            <tr><td>hold</td><td></td><td>4-10°C</td><td></td></tr>
<br>
+
                            </table>
<ol><li>Harvest the over-night culture by centrifugation (3000 g for 10 minutes.)</li>
+
                          </div>
 +
                        </div>
 +
                        <div class="row section">
 +
                            <div class="col-xs-12 col-sm-12 col-md-12">
 +
                                <h3>Determination of DNA concentration</h3>
 +
                                <br>
 +
                                <p><ul><li>DNA concentration is determined by using a Nanodrop ()</li>
 +
                              <li>The absorbance at 260 nm is converted to concentration using the Lambert – Beer Equation by the program </li>
 +
                              <li>The purity of the sample is confirmed by the 260/280 ratio (contamination with proteins) and the 260/230 ratio (presence of co-purified contaminants)</li>  
 +
                              <li>For pure DNA the 260/280 ratio should be around 1.8 and the 260/280 ratio should be around 1.8 – 2.2. (ND-1000-v3.4-users-manual, Thermo Scientific) </li></ul>
 +
                        </p>  
 +
                              </div>
 +
                            </div> 
 +
                            <div class="row section">
 +
                                <div class="col-xs-12 col-sm-12 col-md-12">
 +
                                    <h3>Mini-Prep (based on Fast-n-Easy Plasmid Mini-Prep Kit Jena Bioscience)</h3>
 +
                                    <br>
 +
                                    <h4>Material:</h4>
 +
                            <p><ul><li>Lysis buffer</li>
 +
                                  <li>Neutralization buffer</li>
 +
                                  <li>Column-Activation buffer</li>
 +
                                  <li>Wash buffer</li>
 +
                                  <li>Elution buffer</li>
 +
                                  <li>Binding column</li></ul></p>
 +
                            <br>
 +
                            <h4>Method:</h4>
 +
                            <p><ol><li>Harvest the over-night culture by centrifugation (3000 g for 10 minutes.)</li>
 
<li>Activate the Binding Column by adding 100 µl of Activation buffer and centrifugation at 10000 g for 30 seconds. </li>
 
<li>Activate the Binding Column by adding 100 µl of Activation buffer and centrifugation at 10000 g for 30 seconds. </li>
 
<li>For cell lysis resuspend the cell pellet in 300 µl Lysis buffer (pipetting or vortexing).</li>
 
<li>For cell lysis resuspend the cell pellet in 300 µl Lysis buffer (pipetting or vortexing).</li>
Line 875: Line 1,564:
 
<li>Place the Binding Column into a clean microtube an add 30 µl Elution buffer.</li>
 
<li>Place the Binding Column into a clean microtube an add 30 µl Elution buffer.</li>
 
<li>Incubate for 1 minute and centrifuge at 10000 g for 1 minute to elute DNA.</li>
 
<li>Incubate for 1 minute and centrifuge at 10000 g for 1 minute to elute DNA.</li>
<li>The eluted DNA could be used directly or should be stored at -20°C.</li> </ol>
+
<li>The eluted DNA could be used directly or should be stored at -20°C.</li> </ol></p>
<br>
+
</div>
<br>
+
</div>
<h3>Restriction digest</h3>
+
<div class="row section">
<br>
+
    <div class="col-xs-12 col-sm-12 col-md-12">
Materials:
+
        <h3>Restriction digest</h3>
<br>
+
        <br>
<ul><li>Plasmid DNA</li>
+
        <h4>Material:</h4>
 +
<p><ul><li>Plasmid DNA</li>
 
<li>Restriction Enzymes</li>
 
<li>Restriction Enzymes</li>
 
<li>Restriction buffer</li>
 
<li>Restriction buffer</li>
 
<li>H2O</li>
 
<li>H2O</li>
<li>Ice</li></ul>
+
<li>Ice</li></ul></p>
 
<br>
 
<br>
Method:
+
<h4>Method:</h4>
<br>
+
<p><ol><li>All steps must be performed on ice.</li>
<ol><li>All steps must be performed on ice.</li>
+
 
<li>For a 20 µl double digest approach following amount are needed:</li>
 
<li>For a 20 µl double digest approach following amount are needed:</li>
 
<br>
 
<br>
Line 900: Line 1,589:
 
<tr><td>H2O</td><td>add to 20 µL</td><td></td></tr>
 
<tr><td>H2O</td><td>add to 20 µL</td><td></td></tr>
 
</table>
 
</table>
<br>
 
 
<li>Digest the approach for 1h at 37 °C.</li>
 
<li>Digest the approach for 1h at 37 °C.</li>
 
<li>To stop the reaction, incubate the reaction for 20 minutes at 80 °C.</li></ol>
 
<li>To stop the reaction, incubate the reaction for 20 minutes at 80 °C.</li></ol>
<br>
+
</div>
<br>
+
</div>
<h3>Gel-Extraction (based on Gel DNA Recovery Kit from Zymo Research)</h3>
+
<div class="row section">
<br>
+
    <div class="col-xs-12 col-sm-12 col-md-12">
Material:
+
        <h3>Gel-Extraction (based on Gel DNA Recovery Kit from Zymo Research)</h3>
<br>
+
        <br>
<ul><li>Extraction buffer (ADB buffer)<(li>
+
        <h4>Material:</h4>
 +
<p><ul><li>Extraction buffer (ADB buffer)<(li>
 
<li>Washing buffer</li>
 
<li>Washing buffer</li>
 
<li>Elution buffer</li>
 
<li>Elution buffer</li>
<li>Spin column</li>
+
<li>Spin column</li></ul></p>
 
<br>
 
<br>
Method:
+
<h4>Method:</h4>
<br>
+
<p><ol><li>Cut out the area of the gel containing the DNA fragment of interest. </li>
<ol><li>Cut out the area of the gel containing the DNA fragment of interest. </li>
+
 
<li>Add ADB buffer (3 volumes to 1 volume gel).</li>
 
<li>Add ADB buffer (3 volumes to 1 volume gel).</li>
 
<li>Dissolve the gel by incubation at 37 – 55 °C for 5 – 10 minutes.</li>
 
<li>Dissolve the gel by incubation at 37 – 55 °C for 5 – 10 minutes.</li>
Line 923: Line 1,611:
 
<li>Repeat the wash step.</li>
 
<li>Repeat the wash step.</li>
 
<li>Place the column in a clean microtube and add more than 6 µl Elution buffer. Centrifuge for 1 minute to elute DNA.</li></ol>
 
<li>Place the column in a clean microtube and add more than 6 µl Elution buffer. Centrifuge for 1 minute to elute DNA.</li></ol>
 +
</p>
 +
</div>
 +
</div>
 +
<div class="row section">
 +
    <div class="col-xs-12 col-sm-12 col-md-12">
 +
        <h3>Semi-quantitative hair degradation assay for keratinases</h3>
 +
        <br>
 +
        <p>To prove any enzyme activity a semi-quantitative hair degradation assay was performed.
 +
First, cultures of E. coli containing kerA, kerUS, kerP plasmid and one wild-type E. coli were grown at 37°C in sterile LB broth. Chloramphenicol (final concentration 35 µg/mL) was added to the cultures containing kerA and kerUS. Kanamycin (final concentration 50 µg/mL) was added to the cultures containing the kerP. After incubation OD600 was measured before inducing cultures containing kerA and kerUS with IPTG with a final concentration of 1mM.
 +
Human hair was reduced to smaller pieces and then dried for 1 hour at 65°C. Afterwards the hair was distributed in 0.05 g aliquots and the full amount of each culture was added.
 +
The cultures + hair were incubated 120 hours at 37°C with slightly shaking.</p>
 
<br>
 
<br>
 +
<h3>Skim milk plate assay for keratinases</h3>
 
<br>
 
<br>
 
+
<p>This assay was performed to show qualitative enzyme activity.
 +
The different keratinases (kerA, kerUS and kerP) should degrade the casein in the milk, seen as clear zones around the cultures itself or the supernatant of the cells.
 
</p>
 
</p>
 
</td>
 
</table>
 
 
 
<h1 align=middle>Experiments</h1>
 
 
<table>
 
<td align="left" height=0 bgcolor="#F8CE63"> 
 
<h3><span style="color:#2E9AFE">PART I - ESTERASES and LIPASES</span style="color:#2E9AFE"></h3><br>
 
<img src="https://static.igem.org/mediawiki/2017/d/dc/Esterase.png" width=100% height="auto">
 
</td>
 
</table>
 
 
 
<table>
 
<td align="left" height=0 bgcolor="#F8CE63"> 
 
<h3><span style="color:#2E9AFE">PART II - KERATINASES</span style="color:#2E9AFE"></h3><br>
 
 
<br>
 
<br>
 
+
<h4>Preparation of skim milk plates</h4>
<img src="https://static.igem.org/mediawiki/2017/6/65/Keratinase.png" width=100% height="auto">
+
<p>First 100 mL LB/agar and 5 g skim milk powder in 125 mL distilled water was prepared. Both solutions were autoclaved and mixed after cooling down.  
 
+
For the plates used for kerA and kerUS cultures chloramphenicol (35 µg/mL) was added – in case of kerP kanamycin (50 µg/mL) was used to prepare plates.  
 
+
The plates were poured and stored at 4°C.</p>
<h3>Semi-quantitative hair degradation assay</h3>
+
 
<br>
 
<br>
<h4>To prove any enzyme activity a semi-quantitative hair degradation assay was performed.
+
<h4>Assay</h4>
First, cultures of E. coli containing kerA, kerUS, kerP plasmid and one wild-type E. coli were grown at 37°C in sterile LB broth. Chloramphenicol (final concentration 35 µg/mL) was added to the cultures containing kerA and kerUS. Kanamycin (final concentration 50 µg/mL) was added to the cultures containing the kerP. After incubation OD600 was measured before inducing cultures containing kerA and kerUS with IPTG with a final concentration of 1mM.</h4>
+
<p><ul><li>kerA/kerUS: Before spreading both keratinases on the plates, cells were induced with 1mM IPTG o/n at 37°C.  
<br> 
+
  After incubation 10 µL of the induced cell cultures and supernatant, cell culture without IPTG induction and a wild-type E. coli control was spread on skim milk plates containing chloramphenicol.  
<h4>Human hair was reduced to smaller pieces and then dried for 1 hour at 65°C. Afterwards the hair was distributed in 0.05 g aliquots and the full amount of each culture was added. The cultures + hair were incubated 120 hours at 37°C with slightly shaking.</h4>
+
  The plates were incubated at room temperature for four days.
 
<br>
 
<br>
<br>
+
<li>kerP: 10 µL of cell culture, supernatant and a wild-type E. coli control was spread on skim milk plates containing kanamycin.  
<h3>Skim milk plate assay</h3>
+
  The plates were incubated at room temperature for four days.</li></ul>
<br>
+
<h4>This assay was performed to show qualitative enzyme activity.
+
The different keratinases (kerA, kerUS and kerP) should degrade the casein in the milk, seen as clear zones around the cultures itself or the supernatant of the cells.</h4>
+
<br>
+
<ol><li>Preparation of skim milk plates
+
<br>
+
First 100 mL LB/agar (see <a href="https://2017.igem.org/Team:Stuttgart/Protocols">protocols</a>) and 5 g skim milk powder in 125 mL distilled water was prepared. Both solutions were autoclaved and mixed after cooling down. For the plates used for kerA and kerUS cultures chloramphenicol (35 µg/mL) was added – in case of kerP kanamycin (50 µg/mL) was used to prepare plates. The plates were poured and stored at 4°C.</li>
+
<br>
+
<li>Assay
+
<br>
+
kerA/kerUS: Before spreading both keratinases on the plates, cells were induced with 1mM IPTG o/n at 37°C. After incubation 10 µL of the induced cell cultures and supernatant, cell culture without IPTG induction and a wild-type E. coli control was spread on skim milk plates containing chloramphenicol. The plates were incubated at room temperature for four days.
+
<br>
+
kerP: 10 µL of cell culture, supernatant and a wild-type E. coli control was spread on skim milk plates containing kanamycin. The plates were incubated at room temperature for four days.</li></ol>
+
 
+
 
</p>
 
</p>
 +
</div>
 +
</div>
  
</td>
 
</table>
 
  
<table>
 
<td align="left" height=0 bgcolor="#F8CE63"> 
 
<h3><span style="color:#2E9AFE">PART III - A LOVELY SCENT OF... </span style="color:#2E9AFE"></h3><br>
 
 
 
 
<img src="https://static.igem.org/mediawiki/2017/d/d3/Rosenduftcomic.png" width=100% height="auto"><h4> ...ROSE FRAGRANCE</h4>
 
<p></p>
 
 
 
<h4> ...LIMONENE FRAGRANCE</h4>
 
<p></p>
 
 
</td>
 
</table>
 
 
 
 
 
 
 
 
</div>
 
  
  
  
 +
</body>
 
</html>
 
</html>

Revision as of 10:27, 29 October 2017

Project description

What's the problem?

Our project deals with an everyday problem described by the following scenario: You want to enjoy a refreshing shower in the morning, but your hairy roommate clogged the drain again? You would like to have a relaxed bubble bath after a long day, but there are bad odors coming out of the pipe system?

The general practice now:

  1. You try the ‘hot water method’ to flush the drain… nothing happens.
  2. You remember what your mother taught you, so you put a fancy mix of vinegar, baking soda and some magic into the drain… a mysterious creature arises, but nothing else happens.
  3. In the end there is just one thing left – you put the nasty chemical mixture of the stinky cleaning agent down the drain. The corrosive cloud disappears and you can finally take your shower… still trying not to breath in the acrid fumes.

Pipe clogging and closure occurs in every household as well as in industry. Various components contribute to the pipe closure, such as fat and hair. Commercial chemical pipe cleaners contain aggressive substances, which are harmful to the environment and health and also can lead to pipe breaks. Biological alternatives (purified enzymes) have been researched for years, without reaching the efficiency of chemical cleaners. In addition, the purification of the enzymes is very complex and cost intensive.

Our solution

We pursue a system-biological solution which is based on an intact microbial system. Inspired by different interesting projects we decided to develope a keranolytic Escherichia coli. The projects of past iGEM-teams were part of our investigation too and we are already co-working with iGEM-team OLS_Canmore 2015/2016 to exchange information. We would like to use the knowledge of these groundworks to develop a new type of enzymatic cleaning agent by complementing and combining ideas out of different scientific sources. To differ from other projects we are aiming to engineer Escherichia coli to express enzymes like esterases, lipases and keratinases into the medium. Due to the extracellular expression expensive and time-consuming purification steps could be avoided and the enzymes could be secreted directly into the drain.As a special feature we want to use the metabolites of the enzymatic degradation to produce a lovely rose-scent to refresh your whole room. In addition this reaction could also be used to indicate that the enzymes are working efficiently on your drainage problem.

Light up the pipe - 3 parts for a better flow

Part 1 - Esterases and Lipases



Hair is surrounded by a layer of grease and waxes which first need to be removed to make the hair-keratin available for keratinases. For the first degradation step we choose a combination of esterases and lipases. We investigated two different esterases for their enzyme activity. One esterase from the registry (EstCS2 BBa_K1149002) and one esterase (LipB) supplied by Dr. Eggert from Evoxx were compared. Additionally we choose the lipase TliA to support the esterases at the fat degradation and to accelerate the entire degradation process. For the extracellular secretion of the enzymes we attached different signal sequences (pelB, OmpA and phoA) that were provided on the iGEM plates.

EstCS2

EstCS2 from the iGEM Imperial College 2013 was proved to be active. In their project the cells expressing these construct were grown and lysed by sonication and were utilized in a colourimetric assay with the substrate analog para-Nitrophenyl butyrate. In our project we didn’t purify the esterases but used the supernatant for the enzyme activity assay.

LipB

LipB showed an enzyme activity of 2,8 U/mL in the supernatant. First, we repeated the enzyme activity assay from the iGEM TU Darmstadt 2012 to determine the esterase with the highest enzyme activity. urify the esterases but used the supernatant for the enzyme activity assay.


TliA

The lipase that is used for this project is the TliA lipase from Pseudomonas fluorescens. TliA is secreted by the ABC (ATP binding cassette) export system (prtDEF gene cluster) from Dickeya dadantii (formerly known as Erwinia chrysanthemi). The LARD secretion tag for the ABC export system is added directly to the TliA gene, which hopefully leads to a good export yield and a high extracellular activity. In order to control gene expression, the TliA gene is expressed by the pBAD promoter, which can be induced by arabinose. The prtDEF gene cluster is expressed by a constitutive promoter of mediocre strength. So, the ABC export system is always expressed at a certain level and can export the LARD-tagged TliA lipase, if expressed. Eom et al. have already shown extracellular activity of TliA when secreted with the ABC export system. So, if the TliA lipase is expressed, it is exported out of the cell and degrades the greasy layer surrounding the hair, which makes the keratin accessible for the keratinases.




Keratinases are promising enzymes that find their applicability in agro-industrial, pharmaceutical and biomedicals fields. We want to profit from them by applying them on clugged pipes full of hair that is a common issue in lots of households. Keratinases are enzymes that are capable of degrading hair. Hair mostly consists of alpha-Keratin. Many different keratinases produced by different Bacilli, Actinobacteria and fungi have been reported. All of them vary by having their specific biochemical and biophysical properties e.g. temperature and pH activity range. Using their proteolytic capability that destroys hair we want to use them to avoid chemical compounds that are recently mainly applied to cleanse tubes. By hydrolization of disulfide bonds keratin degrades. This is due to confirmation changes which leads to an exposure of more sites for keratinase action (Satyanarayana et al. 2013, Vignardes et al. 1999). Previous projects from iGEM Teams such as Sheffield 2014, Team Canmore 2015 and Team Canmore 2016 helped us to tackle this problem as they were regarding similar problems.

Part 2 - Keratinases

Still there are a lots of things that have to be improved as these Teams were facing different issues. The Team of Sheffield stumbled over the problem that the keratinase colonies were either not producing or exporting the protein in a functional form. While Canmore accomplished to succeed to show a certain Keratinase activity, due to time limitation they were not able to show quanititative but qualititative observations of keratine degredation. Based on these already promising results we want to focus on improving the keratinases using different promotors that regulate a successful protein secretations without being toxic to the host organism. For efficient hair degradation we chose different keratinases (KerUS, KerA, KerBL and KerP). Moreover we combined this keratinases with different anderson-promotors (BBa_K206000, BBa_J23114 and BBaJ23102) and signal sequences (PelB, OmpA and PhoA) for extracellular transport of the keratinases.


KerP

Keratinase kerP is a 33 kDa monomeric protein. Ker P is a serine protease. Serine proteases are protelytic enzymes, charaterizised by a reactive serine side chain (Kraut 1977). The family contains many diffrent enzymes with wide spread functions. Most of keratinases are serine proteases capable to degrade recalcitrant protein like nails, hair, feathers (Sharma and Gupta 2010b). KS-1 has his optimal activity at pH = 9 and 60 C.

Part 3 - a lovely scent of...


The microbial synthesis of natural flavor compounds has become a very attractive alternative to the chemical production (1). In recent years microorganisms such as E.coli and Yeast have been metabolically engineered to produce different flavors like limonene, geraniol or rose (1,2,3). For our project we discussed different approaches and choose two different scents: rose and limonene.

... rose fragrance



As first special fragrance we want to install a lovely scent of rose in our microbial system. Hair are commonly made of Keratin (98%) and small amounts of amino acids, such as L-phenylalanine. This amino acid can be used as substrate for the production of 2-Phenylethylacetate (2-PEAc), which has a rose-like odor (1). Therefor this odor can act as an indicator for keratin degradation. In recent studies from Guo et al the 2-PEAc biosynthetic pathway was successfully designed and expressed in E.coli (1). This pathway was used for our project and comprised four steps (Fig.1):

  • Aminotransferase (ARO 8) for transamination of L-phenylalanine to phenylpyruvate
  • 2-keto acid decarboxylase KDC for the decarboxylation of the phenylpyruvate to phenylacetaldehyde
  • Aldehyde reductase YjgB for the reduction of phenylacetaldehyde to 2-Phenylethanol
  • Alcohol acetyltransferase ATF1 for the esterification of 2-PE to 2-PEAc.

  • ... limonene fragrance

    Limonene is a well-known cyclic monoterpene which can occur in two optical forms (2). (D)-Limonene is one of the most important and widespread terpenes in the flavor and fragrance industry, for example in citrus-flavored products such as soft drinks and candy (2). The (L)-Limonene form has a more harsh fir-like odor with a lemon-note (2). For our project we choose an enzyme-cascade, beginning with acetyl-coA and leading to the product (L)-limonene. This biosynthetic pathway was designed and inserted in E.coli (Fig.2).




    REFERENCES

  • (1) Metabolic engineering of Escherichia coli for production of 2-Phenylethylacetate from L-phenylalanine (2017), D. Guo and L. Zhang et. al.
  • (2) Biotechnological production of limonene in microorganisms (2016), E. Jongedijk and K. Cankar et. al.
  • (3) Utilization of alkaline phosphatase PhoA in the bioproduction of geraniol by metabolically engineered Escherichia coli (2015), W. Liu and R. Zhang et. al.
  • (4) Rose Scent: Genomics Approach to Discovering Novel Floral Fragrance–Related Genes (2002), I. Guterman and M. Shalit et. al.
  • Protocols & Experiments

    Preparation of chemically competent DH5alpha E. coli cells


    Material:

    • LB media
    • TSS buffer
    • DH5alpha E. coli cells (o/n colonies on agar plates)


    Method:

    1. Pick one colony of the plate and transfer into 5 mL of LB media. Grow the culture over night for 16-18 hours at 37 deg. celsius.
    2. Transfer 1 mL of the overnight culture into a shaking flask with 99 mL of LB media. Measure optical density (OD) at 600 nm and incubate culture at 37 deg. celsius (shaking) to an OD of 0,5.
    3. Divide the 100 mL into two 50 mL tubes and incubate 10 min on ice.
    4. Spin the tubes at 3000 rpm for 10 minutes at 4 deg. celsius.
    5. Resuspend the pellet of competent cells with 10 % TSS buffer (5 mL).
    6. Aliquot 100 µL of the cell solution into 1.5 mL microtubes (all steps on ice!).
    7. Store the competent cells at -80 deg. celsius.

    Heat-shock Transformation of E. coli cells


    Material:

    • SOC media
    • Agar plates with appropriate antibiotic


    Method:

    1. Thaw chemically competent cells on ice.
    2. Transfer 50 µL of the cells into a 1.5 mL microtube, add 1 µL of the desired DNA and incubate on ice for 30 minutes.
    3. Place the tube in a 42 deg. celsius water bath for 60 seconds.
    4. After heat shock leave cells on ice for 5 minutes.
    5. Add 950 µL of SOC media and shake cells for 2 hours at 37 deg. celsius.
    6. Pipet 100 µL of the cells onto an appropriate plate and spread them using sterile glass beads. Incubate overnight at 37 deg. Celsius and hope for colonies in the morning to prove a successful transformation.

    Preparation of LB media


    Material:

    • Tryptone
    • NaCl
    • Yeast extract


    Method:

    1. Fill a container (bottle) to about 60/70 % its volume with destilled water.
    2. Add 10 g/L Tryptone, 10 g/L NaCl and 5 g/L of yeast extract.
    3. Stir properly and fill up the remaining volume with distilled water.
    4. Treat LB media by autoclave.

    Preparation of LB agar


    Material:

    • Tryptone
    • NaCl
    • Yeast extract
    • Agar


    Method:

    1. Fill a container (bottle) to about 60/70 % its volume with destilled water.
    2. Add 10 g/L Tryptone, 10 g/L NaCl, 5 g/L of yeast extract and 20 g/L agar.
    3. Stir properly and fill up the remaining volume with distilled water.
    4. Treat by autoclave.

    Preparation of M9 media


    Salt solution:

    • 3g Na2HPO4
    • 1,5g KH2PO4
    • 0,5g NH4Cl
    • 0,25g NaCl
    • 1ml MgSO4
    • 50µl CaCl2


    Sugar solution:

    • 20g/l Glycerol
    • 5g/l Yeast
    • 10mg Thiamine
    • 1ml Micronutrients


    Glycerol stocks – storage of bacterial strains


    Material:

    <

    • Glycerol


    Method:

    1. Mix 700 µL of overnight culture with 300 µL glycerol.
    2. Store at -80 deg. Celsius.

    Polymerase chain reaction (PCR)


    Material:

    • Primer
    • Template DNA
    • NEB Q5® High-Fidelity 2X Master Mix (dNTPs + Polymerase)
    • distilled water
    • PCR-Cycler


    Method:

    1. All steps have to be performed on ice.
    2. 50 µL approach (mix well):

    componentsvolumeconcentration
    Q5 Master Mix 25 µL 1x
    10 µM fw primer 2,5 µL 0,5 µM
    10 µM rv primer 2,5 µL 0,5 µM
    template DNA <1000 ng
    water remaining volume to 50 µL

  • PCR-cycler conditions:
  • step cyclestemperature time
    Denaturation198°C30 sec
    Annealing25-3598°C5-10 sec
    Elongation72°C20-30sec/kb
    final extension172°C2 min
    hold4-10°C

    Determination of DNA concentration


    • DNA concentration is determined by using a Nanodrop ()
    • The absorbance at 260 nm is converted to concentration using the Lambert – Beer Equation by the program
    • The purity of the sample is confirmed by the 260/280 ratio (contamination with proteins) and the 260/230 ratio (presence of co-purified contaminants)
    • For pure DNA the 260/280 ratio should be around 1.8 and the 260/280 ratio should be around 1.8 – 2.2. (ND-1000-v3.4-users-manual, Thermo Scientific)

    Mini-Prep (based on Fast-n-Easy Plasmid Mini-Prep Kit Jena Bioscience)


    Material:

    • Lysis buffer
    • Neutralization buffer
    • Column-Activation buffer
    • Wash buffer
    • Elution buffer
    • Binding column


    Method:

    1. Harvest the over-night culture by centrifugation (3000 g for 10 minutes.)
    2. Activate the Binding Column by adding 100 µl of Activation buffer and centrifugation at 10000 g for 30 seconds.
    3. For cell lysis resuspend the cell pellet in 300 µl Lysis buffer (pipetting or vortexing).
    4. Add 300 µl of Neutralization buffer and mix by inverting the tube (4 – 6 times).
    5. Centrifuge at 10000 g for 5 minutes.
    6. The colour of the supernatant should be yellow.
    7. Transfer the supernatant into the Binding Column and centrifuge at 10000 g for 30 seconds. Discard the flow-through.
    8. Add 500 µl Washing buffer to the column and centrifuge at 10000 g for 30 seconds. Discard the flow-through.
    9. Place the Binding Column into a clean microtube an add 30 µl Elution buffer.
    10. Incubate for 1 minute and centrifuge at 10000 g for 1 minute to elute DNA.
    11. The eluted DNA could be used directly or should be stored at -20°C.

    Restriction digest


    Material:

    • Plasmid DNA
    • Restriction Enzymes
    • Restriction buffer
    • H2O
    • Ice


    Method:

    1. All steps must be performed on ice.
    2. For a 20 µl double digest approach following amount are needed:

    3. components volumeconcentration
      restriction buffer (10X)2 µL1X
      restriction enzyme 11 µL
      restriction enzyme 21 µL
      plasmid DNAx µL1 µg total
      H2Oadd to 20 µL
    4. Digest the approach for 1h at 37 °C.
    5. To stop the reaction, incubate the reaction for 20 minutes at 80 °C.

    Gel-Extraction (based on Gel DNA Recovery Kit from Zymo Research)


    Material:

    • Extraction buffer (ADB buffer)<(li>
    • Washing buffer
    • Elution buffer
    • Spin column


    Method:

    1. Cut out the area of the gel containing the DNA fragment of interest.
    2. Add ADB buffer (3 volumes to 1 volume gel).
    3. Dissolve the gel by incubation at 37 – 55 °C for 5 – 10 minutes.
    4. Transfer the solution to a spin column and centrifuge for 30 seconds. Discard the flow-through.
    5. Add 200 µl Washing buffer and centrifuge for 30 seconds. Discard the flow-through.
    6. Repeat the wash step.
    7. Place the column in a clean microtube and add more than 6 µl Elution buffer. Centrifuge for 1 minute to elute DNA.

    Semi-quantitative hair degradation assay for keratinases


    To prove any enzyme activity a semi-quantitative hair degradation assay was performed. First, cultures of E. coli containing kerA, kerUS, kerP plasmid and one wild-type E. coli were grown at 37°C in sterile LB broth. Chloramphenicol (final concentration 35 µg/mL) was added to the cultures containing kerA and kerUS. Kanamycin (final concentration 50 µg/mL) was added to the cultures containing the kerP. After incubation OD600 was measured before inducing cultures containing kerA and kerUS with IPTG with a final concentration of 1mM. Human hair was reduced to smaller pieces and then dried for 1 hour at 65°C. Afterwards the hair was distributed in 0.05 g aliquots and the full amount of each culture was added. The cultures + hair were incubated 120 hours at 37°C with slightly shaking.


    Skim milk plate assay for keratinases


    This assay was performed to show qualitative enzyme activity. The different keratinases (kerA, kerUS and kerP) should degrade the casein in the milk, seen as clear zones around the cultures itself or the supernatant of the cells.


    Preparation of skim milk plates

    First 100 mL LB/agar and 5 g skim milk powder in 125 mL distilled water was prepared. Both solutions were autoclaved and mixed after cooling down. For the plates used for kerA and kerUS cultures chloramphenicol (35 µg/mL) was added – in case of kerP kanamycin (50 µg/mL) was used to prepare plates. The plates were poured and stored at 4°C.


    Assay

    • kerA/kerUS: Before spreading both keratinases on the plates, cells were induced with 1mM IPTG o/n at 37°C. After incubation 10 µL of the induced cell cultures and supernatant, cell culture without IPTG induction and a wild-type E. coli control was spread on skim milk plates containing chloramphenicol. The plates were incubated at room temperature for four days.
    • kerP: 10 µL of cell culture, supernatant and a wild-type E. coli control was spread on skim milk plates containing kanamycin. The plates were incubated at room temperature for four days.