|
|
| (11 intermediate revisions by 2 users not shown) |
| Line 1: |
Line 1: |
| − | <!DOCTYPE html>
| + | {{Team:Utrecht/MainBody}} |
| − | <html>
| + | |
| − | <head>
| + | |
| − | <link href="https://fonts.googleapis.com/css?family=Nunito+Sans" rel="stylesheet">
| + | |
| − |
| + | |
| − | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.spa.css'>
| + | |
| − | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.common.css'>
| + | |
| − | <link rel='stylesheet prefetch' href='https://cdn3.devexpress.com/jslib/17.1.3/css/dx.light.css'>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | @charset 'UTF-8';
| + | |
| − | /* Slider */
| + | |
| − | .slick-loading .slick-list
| + | |
| − | { | + | |
| − | background: #fff url('./ajax-loader.gif') center center no-repeat;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Icons */
| + | |
| − | @font-face
| + | |
| − | { | + | |
| − | font-family: 'slick';
| + | |
| − | font-weight: normal;
| + | |
| − | font-style: normal;
| + | |
| − | | + | |
| − | src: url('./fonts/slick.eot');
| + | |
| − | src: url('./fonts/slick.eot?#iefix') format('embedded-opentype'), url('./fonts/slick.woff') format('woff'), url('./fonts/slick.ttf') format('truetype'), url('./fonts/slick.svg#slick') format('svg');
| + | |
| − | }
| + | |
| − | /* Arrows */
| + | |
| − | .slick-prev,
| + | |
| − | .slick-next
| + | |
| − | {
| + | |
| − | font-size: 0;
| + | |
| − | line-height: 0;
| + | |
| − | | + | |
| − | position: absolute;
| + | |
| − | top: 50%;
| + | |
| − | | + | |
| − | display: block;
| + | |
| − | | + | |
| − | width: 20px;
| + | |
| − | height: 20px;
| + | |
| − | padding: 0;
| + | |
| − | -webkit-transform: translate(0, -50%);
| + | |
| − | -ms-transform: translate(0, -50%);
| + | |
| − | transform: translate(0, -50%);
| + | |
| − | | + | |
| − | cursor: pointer;
| + | |
| − | | + | |
| − | color: transparent;
| + | |
| − | border: none;
| + | |
| − | outline: none;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | .slick-prev:hover,
| + | |
| − | .slick-prev:focus,
| + | |
| − | .slick-next:hover,
| + | |
| − | .slick-next:focus
| + | |
| − | {
| + | |
| − | color: transparent;
| + | |
| − | outline: none;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | .slick-prev:hover:before,
| + | |
| − | .slick-prev:focus:before,
| + | |
| − | .slick-next:hover:before,
| + | |
| − | .slick-next:focus:before
| + | |
| − | {
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | .slick-prev.slick-disabled:before,
| + | |
| − | .slick-next.slick-disabled:before
| + | |
| − | {
| + | |
| − | opacity: .25;
| + | |
| − | }
| + | |
| − | | + | |
| − | .slick-prev:before,
| + | |
| − | .slick-next:before
| + | |
| − | {
| + | |
| − | font-family: 'slick';
| + | |
| − | font-size: 20px;
| + | |
| − | line-height: 1;
| + | |
| − | | + | |
| − | opacity: .75;
| + | |
| − | color: white;
| + | |
| − | | + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| − | }
| + | |
| − | | + | |
| − | .slick-prev
| + | |
| − | {
| + | |
| − | left: -25px;
| + | |
| − | }
| + | |
| − | [dir='rtl'] .slick-prev
| + | |
| − | {
| + | |
| − | right: -25px;
| + | |
| − | left: auto;
| + | |
| − | }
| + | |
| − | .slick-prev:before
| + | |
| − | {
| + | |
| − | content: '←';
| + | |
| − | }
| + | |
| − | [dir='rtl'] .slick-prev:before
| + | |
| − | {
| + | |
| − | content: '→';
| + | |
| − | }
| + | |
| − | | + | |
| − | .slick-next
| + | |
| − | {
| + | |
| − | right: -25px;
| + | |
| − | }
| + | |
| − | [dir='rtl'] .slick-next
| + | |
| − | {
| + | |
| − | right: auto;
| + | |
| − | left: -25px;
| + | |
| − | }
| + | |
| − | .slick-next:before
| + | |
| − | {
| + | |
| − | content: '→';
| + | |
| − | }
| + | |
| − | [dir='rtl'] .slick-next:before
| + | |
| − | {
| + | |
| − | content: '←';
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Dots */
| + | |
| − | .slick-dotted.slick-slider
| + | |
| − | {
| + | |
| − | margin-bottom: 30px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .slick-dots
| + | |
| − | {
| + | |
| − | position: absolute;
| + | |
| − | bottom: -25px;
| + | |
| − | | + | |
| − | display: block;
| + | |
| − | | + | |
| − | width: 100%;
| + | |
| − | padding: 0;
| + | |
| − | margin: 0;
| + | |
| − | | + | |
| − | list-style: none;
| + | |
| − | | + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − | .slick-dots li
| + | |
| − | {
| + | |
| − | position: relative;
| + | |
| − | | + | |
| − | display: inline-block;
| + | |
| − | | + | |
| − | width: 20px;
| + | |
| − | height: 20px;
| + | |
| − | margin: 0 5px;
| + | |
| − | padding: 0;
| + | |
| − | | + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − | .slick-dots li button
| + | |
| − | {
| + | |
| − | font-size: 0;
| + | |
| − | line-height: 0;
| + | |
| − | | + | |
| − | display: block;
| + | |
| − | | + | |
| − | width: 20px;
| + | |
| − | height: 20px;
| + | |
| − | padding: 5px;
| + | |
| − | | + | |
| − | cursor: pointer;
| + | |
| − | | + | |
| − | color: transparent;
| + | |
| − | border: 0;
| + | |
| − | outline: none;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | .slick-dots li button:hover,
| + | |
| − | .slick-dots li button:focus
| + | |
| − | {
| + | |
| − | outline: none;
| + | |
| − | }
| + | |
| − | .slick-dots li button:hover:before,
| + | |
| − | .slick-dots li button:focus:before
| + | |
| − | {
| + | |
| − | opacity: 1;
| + | |
| − | }
| + | |
| − | .slick-dots li button:before
| + | |
| − | {
| + | |
| − | font-family: 'slick';
| + | |
| − | font-size: 6px;
| + | |
| − | line-height: 20px;
| + | |
| − | | + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | | + | |
| − | width: 20px;
| + | |
| − | height: 20px;
| + | |
| − | | + | |
| − | content: '•';
| + | |
| − | text-align: center;
| + | |
| − | | + | |
| − | opacity: .25;
| + | |
| − | color: black;
| + | |
| − | | + | |
| − | -webkit-font-smoothing: antialiased;
| + | |
| − | -moz-osx-font-smoothing: grayscale;
| + | |
| − | }
| + | |
| − | .slick-dots li.slick-active button:before
| + | |
| − | {
| + | |
| − | opacity: .75;
| + | |
| − | color: black;
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | /* Slider */
| + | |
| − | .slick-slider
| + | |
| − | {
| + | |
| − | position: relative;
| + | |
| − | | + | |
| − | display: block;
| + | |
| − | box-sizing: border-box;
| + | |
| − | | + | |
| − | -webkit-user-select: none;
| + | |
| − | -moz-user-select: none;
| + | |
| − | -ms-user-select: none;
| + | |
| − | user-select: none;
| + | |
| − | | + | |
| − | -webkit-touch-callout: none;
| + | |
| − | -khtml-user-select: none;
| + | |
| − | -ms-touch-action: pan-y;
| + | |
| − | touch-action: pan-y;
| + | |
| − | -webkit-tap-highlight-color: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | .slick-list
| + | |
| − | {
| + | |
| − | position: relative;
| + | |
| − | | + | |
| − | display: block;
| + | |
| − | overflow: hidden;
| + | |
| − | | + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − | .slick-list:focus
| + | |
| − | {
| + | |
| − | outline: none;
| + | |
| − | }
| + | |
| − | .slick-list.dragging
| + | |
| − | {
| + | |
| − | cursor: pointer;
| + | |
| − | cursor: hand;
| + | |
| − | }
| + | |
| − | | + | |
| − | .slick-slider .slick-track,
| + | |
| − | .slick-slider .slick-list
| + | |
| − | {
| + | |
| − | -webkit-transform: translate3d(0, 0, 0);
| + | |
| − | -moz-transform: translate3d(0, 0, 0);
| + | |
| − | -ms-transform: translate3d(0, 0, 0);
| + | |
| − | -o-transform: translate3d(0, 0, 0);
| + | |
| − | transform: translate3d(0, 0, 0);
| + | |
| − | }
| + | |
| − | | + | |
| − | .slick-track
| + | |
| − | {
| + | |
| − | position: relative;
| + | |
| − | top: 0;
| + | |
| − | left: 0;
| + | |
| − | | + | |
| − | display: block;
| + | |
| − | margin-left: auto;
| + | |
| − | margin-right: auto;
| + | |
| − | }
| + | |
| − | .slick-track:before,
| + | |
| − | .slick-track:after
| + | |
| − | {
| + | |
| − | display: table;
| + | |
| − | | + | |
| − | content: '';
| + | |
| − | }
| + | |
| − | .slick-track:after
| + | |
| − | {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | .slick-loading .slick-track
| + | |
| − | {
| + | |
| − | visibility: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | .slick-slide
| + | |
| − | {
| + | |
| − | display: none;
| + | |
| − | float: left;
| + | |
| − | | + | |
| − | height: 100%;
| + | |
| − | min-height: 1px;
| + | |
| − | }
| + | |
| − | [dir='rtl'] .slick-slide
| + | |
| − | {
| + | |
| − | float: right;
| + | |
| − | }
| + | |
| − | .slick-slide img
| + | |
| − | {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | .slick-slide.slick-loading img
| + | |
| − | {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | .slick-slide.dragging img
| + | |
| − | {
| + | |
| − | pointer-events: none;
| + | |
| − | }
| + | |
| − | .slick-initialized .slick-slide
| + | |
| − | {
| + | |
| − | display: block;
| + | |
| − | }
| + | |
| − | .slick-loading .slick-slide
| + | |
| − | {
| + | |
| − | visibility: hidden;
| + | |
| − | }
| + | |
| − | .slick-vertical .slick-slide
| + | |
| − | {
| + | |
| − | display: block;
| + | |
| − | | + | |
| − | height: auto;
| + | |
| − | | + | |
| − | border: 1px solid transparent;
| + | |
| − | }
| + | |
| − | .slick-arrow.slick-hidden {
| + | |
| − | display: none;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | <style>
| + | |
| − | #top_title { display: none !important; }
| + | |
| − | /*Override default CSS*/
| + | |
| − | #sideMenu, #top_title {display:none;}
| + | |
| − | #content { padding:0px; width:100%; margin-top:-7px; margin-left:0px; background-color: transparent;}
| + | |
| − | | + | |
| − | | + | |
| − | /* set all basic objects to neutral formatting*/
| + | |
| − | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border: 0;
| + | |
| − | outline: 0;
| + | |
| − | font-size: 100%;
| + | |
| − | vertical-align: baseline;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | #globalWrapper {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | border: 0;
| + | |
| − | outline: 0;
| + | |
| − | font-size: 100%;
| + | |
| − | vertical-align: baseline;
| + | |
| − | background: transparent;
| + | |
| − | }
| + | |
| − | | + | |
| − | | + | |
| − | /* set page to fill window*/
| + | |
| − | html{
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − | body {
| + | |
| − | min-height: 100%;
| + | |
| − | }
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | body, html {
| + | |
| − | height: 100%;
| + | |
| − | background: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .container {
| + | |
| − | width: 60px;
| + | |
| − | height: 60px;
| + | |
| − | margin: 0 auto 0;
| + | |
| − | -webkit-perspective: 1000;
| + | |
| − | -webkit-backface-visibility: hidden;
| + | |
| − | background: #fff;
| + | |
| − | }
| + | |
| − | | + | |
| − | .tutorial_button {
| + | |
| − | position: relative;
| + | |
| − | display: block;
| + | |
| − | width: 60px;
| + | |
| − | height: 60px;
| + | |
| − | font-size: 2.5em;
| + | |
| − | font-weight: light;
| + | |
| − | font-family: 'Trebuchet MS', sans-serif;
| + | |
| − | text-transform: uppercase;
| + | |
| − | text-align: center;
| + | |
| − | line-height: 60px;
| + | |
| − | letter-spacing: -1px;
| + | |
| − | color: white;
| + | |
| − | border: none;
| + | |
| − | border-radius: 50%;
| + | |
| − | background: #ff8d00;
| + | |
| − | cursor: pointer;
| + | |
| − | border: 5px solid #ffb252;
| + | |
| − | filter: grayscale(100%);
| + | |
| − | transition: all 0.5s ease;
| + | |
| − | }
| + | |
| − | | + | |
| − | .tutorial_button.selected {
| + | |
| − | filter: grayscale(0%);
| + | |
| − | }
| + | |
| − | | + | |
| − | .tutorial_button.pulsing {
| + | |
| − | box-shadow: 0 0 0 0 rgba(255, 212, 0, 0.8);
| + | |
| − | -webkit-animation: pulse 2s infinite;
| + | |
| − | }
| + | |
| − | | + | |
| − | /*.tutorial_button.pulsing:hover {
| + | |
| − | -webkit-animation: none;
| + | |
| − | }*/
| + | |
| − | | + | |
| − | @-webkit-keyframes pulse {
| + | |
| − | 70% {
| + | |
| − | box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
| + | |
| − | }
| + | |
| − | 100% {
| + | |
| − | box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | </style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | body {
| + | |
| − | color: white;
| + | |
| − | font-family: 'Nunito Sans', sans-serif;
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }
| + | |
| − |
| + | |
| − | * {
| + | |
| − | transition: all 0.5s ease;
| + | |
| − | }
| + | |
| − |
| + | |
| − | body[data-page='sponsors'] { transition: none; }
| + | |
| − |
| + | |
| − | .top-menu {
| + | |
| − | position: fixed;
| + | |
| − | top: 18px;
| + | |
| − | left: 0;
| + | |
| − | width: 100%;
| + | |
| − | height: 50px;
| + | |
| − | background: #0096ff;
| + | |
| − | overflow: hidden;
| + | |
| − | z-index: 2;
| + | |
| − | line-height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu .menu-underline { position: absolute; height: 3px; background: white; transition: all 0.3s ease; }
| + | |
| − |
| + | |
| − | .top-menu .quote { opacity: 0; }
| + | |
| − | .top-menu .sections { opacity: 0; pointer-events: none; }
| + | |
| − |
| + | |
| − | .top-menu.active {
| + | |
| − | height: 345px;
| + | |
| − | background: #005b9b;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu.active .quote { opacity: 1; }
| + | |
| − | /*.top-menu.active .sections { opacity: 1; display: block; }*/
| + | |
| − |
| + | |
| − | .top-menu .sections { position: absolute;
| + | |
| − | left: 0;
| + | |
| − | margin: 0;
| + | |
| − | margin-left: 25px;
| + | |
| − | margin-top: 75px;
| + | |
| − | width: 100%;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu .section { width: 200px; display: inline-block; padding: 15px; vertical-align: top; cursor: pointer; }
| + | |
| − | /*.top-menu .section:last-of-type { margin-right: 0; }*/
| + | |
| − | .top-menu .section .thumb { width: 100%; height: 100px; background: #00487a; }
| + | |
| − | .top-menu .section .text { width: 100%; text-align: center; margin-top: 10px; color: white; }
| + | |
| − | .top-menu .section .desc { width: 100%; text-align: center; margin-top: 10px; font-size: 12px; color: white; }
| + | |
| − |
| + | |
| − | .top-menu .section.active { background: #0075c8; }
| + | |
| − |
| + | |
| − | .top-menu[data-key='home'] .sections[data-key='home'] { opacity: 1; pointer-events: all; }
| + | |
| − | .top-menu[data-key='exp'] .sections[data-key='exp'] { opacity: 1; pointer-events: all; }
| + | |
| − | .top-menu[data-key='hp'] .sections[data-key='hp'] { opacity: 1; pointer-events: all; }
| + | |
| − | .top-menu[data-key='team'] .sections[data-key='team'] { opacity: 1; pointer-events: all; }
| + | |
| − |
| + | |
| − | .top-menu ul {
| + | |
| − | position: absolute;
| + | |
| − | left: calc(50% - 290px);
| + | |
| − | margin: 0;
| + | |
| − | margin-top: 15px;
| + | |
| − | list-style-image: none;
| + | |
| − | color: white;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu li {
| + | |
| − | list-style-type: none;
| + | |
| − | float: left;
| + | |
| − | margin-right: 50px;
| + | |
| − | cursor: pointer;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .top-menu ul::after {
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container {
| + | |
| − | position: fixed;
| + | |
| − | top: 125px;
| + | |
| − | left: 25px;
| + | |
| − | line-height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container.active {
| + | |
| − | top: 375px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container>div {
| + | |
| − | height: 25px;
| + | |
| − | margin-bottom: 10px;
| + | |
| − | color: #a2a2a2;
| + | |
| − | font-size: 16px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .active {
| + | |
| − | color: #005b9b;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .text {
| + | |
| − | float: left;
| + | |
| − | padding-left: 10px;
| + | |
| − | height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .marker {
| + | |
| − | float: left;
| + | |
| − | width: 27px;
| + | |
| − | height: 100%;
| + | |
| − | text-align: center;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .marker div {
| + | |
| − | display: inline-block;
| + | |
| − | background: #0096ff;
| + | |
| − | width: 10px;
| + | |
| − | height: 10px;
| + | |
| − | border-radius: 50%;
| + | |
| − | vertical-align: middle;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .menu-container .active .marker div {
| + | |
| − | background: #005b9b;
| + | |
| − | width: 15px;
| + | |
| − | height: 15px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .page-container {
| + | |
| − | position: absolute;
| + | |
| − | top: 120px;
| + | |
| − | left: 400px;
| + | |
| − | line-height: 100%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | body[data-page='sponsors'] .page-container { left: 0; width: 100%; }
| + | |
| − | body[data-page='sponsors'] .page-content { width: 100%; }
| + | |
| − |
| + | |
| − | .page-container .page-heading {
| + | |
| − | font-size: 25px;
| + | |
| − | color: #005b9b;
| + | |
| − | margin-bottom: 25px;
| + | |
| − | }
| + | |
| − |
| + | |
| − | .page-container .page-content {
| + | |
| − | color: black;
| + | |
| − | width: 750px;
| + | |
| − | text-align: justify;
| + | |
| − | line-height: 150%;
| + | |
| − | }
| + | |
| − |
| + | |
| − | /*body[data-key='home'] .menu-container { display: none; }*/
| + | |
| − |
| + | |
| − | .tutorial { height: 511px; }
| + | |
| − |
| + | |
| − | h2 { font-size: 20px; color: #005b9b; margin-bottom: 10px; }
| + | |
| − | </style>
| + | |
| − | </head>
| + | |
| − | <body data-key="home" data-page="">
| + | |
| − | | + | |
| − | <div class="top-menu" data-key="home">
| + | |
| − | <div>
| + | |
| − | <ul class="top-menu-links">
| + | |
| − | <li data-key="home" class="active" data-url="home">Home</li>
| + | |
| − | <li data-key="exp">Experimental</li>
| + | |
| − | <li data-key="hp">Human practices</li>
| + | |
| − | <li data-key="team">Team & Sponsors</li>
| + | |
| − | </ul>
| + | |
| − |
| + | |
| − | <div class="menu-underline"></div>
| + | |
| − |
| + | |
| − | <div class="quote"></div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="home">
| + | |
| − | <br />
| + | |
| − | <br />
| + | |
| − |
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="exp">
| + | |
| − | <div class="section" data-url="secretion">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/a/a2/Utrecht17_extracellular.png"></div>
| + | |
| − | <div class="text">Cas9 & Cpf1 secretion<br/>and activity</div>
| + | |
| − | <div class="desc">Comparison of endonuclease activity for Cas9 and Cpf1 that has been produced in, and excreted by, HEK293 cells.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="mesa-replication">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/b/bc/MESA.png"></div>
| + | |
| − | <div class="text">MESA two-component system replication</div>
| + | |
| − | <div class="desc">Details on the MESA two-component system, explanation of its relation to our design and the results of its reproduction.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="outcasst">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/64/Utrecht17_production.png"></div>
| + | |
| − | <div class="text">OUTCASST system production</div>
| + | |
| − | <div class="desc">Detailed explanation of the OUTCASST mechanism, experimental progress and technical prospects.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="modeling-and-mathematics">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/6b/Modelling.png"></div>
| + | |
| − | <div class="text">Modeling and<br />mathematics</div>
| + | |
| − | <div class="desc">Ordinary differential equations, cellular automaton and an object based model for optimal linker-length estimation.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="interlab-study">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/63/Interlab1.png"></div>
| + | |
| − | <div class="text">InterLab study participation</div>
| + | |
| − | <div class="desc">Results and details of our measurements for the iGEM 2017 InterLab Study.</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="hp">
| + | |
| − | <div class="section" data-url="stakeholders">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/2/22/Utrecht17_stakeholder.png"></div>
| + | |
| − | <div class="text">Stakeholders & opinions</div>
| + | |
| − | <div class="desc">Interviews and dialogues with stakeholders, potential users, third parties and experts relating to pathogen detection or DNA-based diagnostics.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="safety">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/8/8d/Igemutrecht_safety.png"></div>
| + | |
| − | <div class="text">Risks & safety-issues</div>
| + | |
| − | <div class="desc">Implications and design considerations relating to safety in the usage and implementation of OUTCASST as a diagnostics tool.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="product-design">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/60/Utrecht17_design.png"></div>
| + | |
| − | <div class="text">Design & integration</div>
| + | |
| − | <div class="desc">OUTCASST toolkit and product design with factors such as bio-safety and user-friendliness taken into account.</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="sections" data-key="team">
| + | |
| − | <div class="section" data-url="team">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/5/5e/Team_comp.png"></div>
| + | |
| − | <div class="text">Meet our team</div>
| + | |
| − | <div class="desc">About us, our interests and roles in the team and our supervisors.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="sponsors">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/d/db/Utrecht17_Sponsor.png"></div>
| + | |
| − | <div class="text">Sponsors</div>
| + | |
| − | <div class="desc">A listing of our sponsors, how they assisted us and our gratitude for their assistance.</div>
| + | |
| − | </div>
| + | |
| − | <div class="section" data-url="achievements">
| + | |
| − | <div class="thumb"><img height="100" src="https://static.igem.org/mediawiki/2017/6/64/Achievements.png"></div>
| + | |
| − | <div class="text">Achievements</div>
| + | |
| − | <div class="desc">A short description of all that we have achieved during our participation in the iGEM.</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="menu-container">
| + | |
| − | <div style="position: absolute; left: 13px; top: 10px; height: 70px; width: 2px; background: #0096ff; z-index: -1;"></div>
| + | |
| − | <div class="item active" data-key="1">
| + | |
| − | <div class="marker"><div></div></div>
| + | |
| − | <div class="text">Intro</div>
| + | |
| − | </div>
| + | |
| − | <div class="item" data-key="2">
| + | |
| − | <div class="marker"><div></div></div>
| + | |
| − | <div class="text">The problem</div>
| + | |
| − | </div>
| + | |
| − | <div class="item" data-key="3">
| + | |
| − | <div class="marker"><div></div></div>
| + | |
| − | <div class="text">The system</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | <div class="page-container">
| + | |
| − | <div class="page-content">
| + | |
| − | <div class="page-heading">The OUTCASST two-component system</div>
| + | |
| − | This year, Utrecht University participates in the iGEM for the first time. We aim to create a cheap DNA detection kit for disease diagnosis that is easy to use and does not rely on complicated sequencing technologies.
| + | |
| − |
| + | |
| − | <br />
| + | |
| − | <br />
| + | |
| − | <h2 class="subhead" id="subhead-2">The problem</h2>
| + | |
| − | Disease diagnosis is of great importance for healthcare. In developing countries, diagnoses often have to be made based on limited information, even though accurate disease determination based on pathogen specific DNA sequences is possible through sequencing technologies. These technologies, however, require specialised equipment and expertise that simply is not available everywhere. The OUTCASST two-component system and detection kit hopes to alleviate this problem.
| + | |
| − | | + | |
| − | <center>
| + | |
| − | <div class="tutorial" style="position: relative; width: 560px; display: inline-block;">
| + | |
| − | <img id="figure-1" style="position: absolute; top: 0; left: 125px; " src="https://static.igem.org/mediawiki/2017/e/e1/Tutorial_1.png">
| + | |
| − | <img id="figure-2" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/5/5b/Tutorial_2.png">
| + | |
| − | <img id="figure-3" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/e3/Tutorial_3.png">
| + | |
| − | <img id="figure-4" style="position: absolute; top: 0; left: 125px; display: none;" src="https://static.igem.org/mediawiki/2017/e/ec/Tutorial_4.png">
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 50px; left: 0; width: 75px;">
| + | |
| − | <span id="link-1" class="tutorial_button selected pulsing" style="font-size: 17px; width: 75px; height: 75px; line-height: 75px;">Start</span>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 50px; left: 500px;">
| + | |
| − | <span id="link-2" class="tutorial_button">2</span>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 300px; left: 0;">
| + | |
| − | <span id="link-3" class="tutorial_button">3</span>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="container" style="position: absolute; top: 300px; left: 500px;">
| + | |
| − | <span id="link-4" class="tutorial_button">4</span>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </center>
| + | |
| − |
| + | |
| − | <h2 class="subhead" id="subhead-3">The system</h2>
| + | |
| − | The OUTCASST two-component system consists of two proteins, expressed to the membrane of a dryable cell. One of the proteins is a Cas9-fusion and the other contains Cpf1. Both proteins can be given a guide RNA that makes it bind to a specific, user-chosen, complementary sequence. When both proteins bind a DNA fragment from a sample, they co-localize, so that a transcription factor is released intracellularly which then induces an intracellular reporter mechanism such as a dye or fluorescent signal.
| + | |
| − |
| + | |
| − | <div id="popover-1">
| + | |
| − | Binding of components with search-specific gRNA sequences.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="btn blue" id="goto-2" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div id="popover-2">
| + | |
| − | DNA sample fragment binds to one of the components.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="btn blue" id="goto-3" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div id="popover-3">
| + | |
| − | Fragment binding with both components induces co-localization.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <a href="#" class="btn blue" id="goto-4" style="margin: 0; padding: 10px 25px; font-size: 18px;">Next</a>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div id="popover-4">
| + | |
| − | Protease cleaves, transcription factor is released from complex.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <script id="page-home" type="text/template">
| + | |
| − | home
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-secretion" type="text/template">
| + | |
| − | <div class="page-heading">Secreting functional Cas9 and Cpf1</div>
| + | |
| − | In order to realize OUTCASST it is crucial to verify the activity of the two DNA-sensing elements. In our system, these are Cas9 and Cpf1. This experiment is a novelty in itself. To put the gravity of this experiment into perspective, as of today, there is no evidence of catalytically active secreted Cas9 or Cpf1.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Introduction</h2>
| + | |
| − | In this experiment, we aim to secrete the two extracellular protein domains of the OUTCASST two-component fusion-protein system, Cas9 and Cpf1, and subsequently prove their functionality. This is a critical step in the process as the proteins should have the ability to bind DNA when implemented as the extracellular domains of OUTCASST. We conducted this experiment by creating genes for secretable Cas9 and Cpf1, using the same signal tag that is also used for the eventual OUTCASST proteins. These genes were inserted into bacterial plasmids, which were multiplied and transfected to mammalian cells. The protein was collected, purified and tested for functionality. If these products prove to be fully functional, they can be implemented in the final design.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-3">Methods</h2>
| + | |
| − | | + | |
| − | SECTION 1: CREATING THE DNA CONSTRUCTS
| + | |
| − | <br><br>
| + | |
| − | The DNA sequences coding for Cas9 or Cpf1 were modified to contain an N-terminal signal sequence and a C-terminal His-tag. A kozak sequence was placed in front of the protein coding region. This was then placed in a backbone plasmid containing a CMV promotor.
| + | |
| − | <br><br>
| + | |
| − | <b>AsCpf1:</b>
| + | |
| − | <ol>
| + | |
| − | <li>PCR was performed using the following plasmid and primers, to create a fragment containing Cpf1 with a C-terminal Histag and overlap region for the final backbone plasmid.<br>
| + | |
| − | Plasmid: Lenti-AsCpf1-Blast (from Addgene, nr: 84750)<br>
| + | |
| − | Fw primer 5’-3’: TCATCGAGGAGGACAAGGCCC<br>
| + | |
| − | Rv primer 5’-3’: GCCGCTTACTTGTACTTAATGATGATGATGATGATGGCCG CCGCCGTTGCGCAGCTCCTGGATGTAG<br>
| + | |
| − | Protocol: Experimental\Protocols\Wiki ready\Cpf1 PCR protocol.pdf
| + | |
| − | </li>
| + | |
| − | <li>gBlock containing a kozak sequence, signal sequence and overlap regions with the backbone and Cpf1 was ordered from IDT. See snapgene file below for sequence</li>
| + | |
| − | <li>In-Fusion Cloning was then performed using AgeI and BsrGI to linearize the backbone plasmid and the two previously created fragments.<br>
| + | |
| − | Plasmid: pCAGGS_eGFP
| + | |
| − | Protocol: Experimental\Protocols\Wiki ready\InFusion protocol v2.pdf
| + | |
| − | </li>
| + | |
| − | </ol>
| + | |
| − | | + | |
| − | <br>
| + | |
| − | | + | |
| − | <b>Cas9:</b>
| + | |
| − | <ol>
| + | |
| − | <li>PCR was performed using the following plasmid and primers, to create a fragment containing Cas9 with a C-terminal Histag and overlap region for the final backbone plasmid.<br>
| + | |
| − | Plasmid: Lenti-Cas9-Blast (from Addgene, nr: 52962)<br>
| + | |
| − | Fw primer 5’-3’: ATTCAAGGTGCTGGGCAACAC<br>
| + | |
| − | Rv primer 5’-3’: GCCGCTTACTTGTACTTAATGATGATGATGATGATGGCCG CCGCCGTCGCCTCCCAGCTGAGACA<br>
| + | |
| − | Protocol: Experimental\Protocols\Wiki ready\Cas9 PCR protocol.pdf
| + | |
| − | </li>
| + | |
| − | <li>PCR was performed to create a second fragment containing a kozak region, the signal sequence and the first part of Cas9 (without its methionine).<br>
| + | |
| − | Plasmid: Lenti-Cas9-Blast (from Addgene)<br>
| + | |
| − | Fw primer 5’-3’: CCCGGGATCCACCGGTGCCGCCACCATGGCGTGG ACCAGCCTGATTCTGAGCCTGCTGGCGCTGTGCAGCGGCGCGAGCAGCG ACAAGAAGTACAGCATCGGCCTG<br>
| + | |
| − | Rv primer 5’-3’: CCCAGCACCTTGAATTTCTTGCTG<br>
| + | |
| − | Protocol: Experimental\Protocols\Wiki ready\PCR Cas9 gBlock.pdf
| + | |
| − | </li>
| + | |
| − | <li>In-Fusion Cloning was then performed using AgeI and BsrGI to linearize the backbone plasmid and the two previously created fragments.<br>
| + | |
| − | Plasmid: pCAGGS_eGFP<br>
| + | |
| − | Protocol: Experimental\Protocols\Wiki ready\InFusionprococol v2.pdf
| + | |
| − | </li>
| + | |
| − | </ol>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | | + | |
| − | SECTION 2: TRANSFECTION INTO HEK293T CELLS<br>
| + | |
| − | HEK293t cells were cultured according to cell culture protocol [Experimental\Protocols\Wiki ready\Cell culture protocol.pdf]. We transfected the cells with the midiprepped plasmids according to the Lipofectamine 2000 transfection protocol [Experimental\Protocols\Wiki ready\Lipofectamine 2000 transfection protocol.pdf].
| + | |
| − | For protein purification under denaturing conditions, HEK cells in 6 wellplate wells were transfected. For protein purification under native conditions, HEK cells in 10 cm petridishes were cotransfected (9:1 plasmid of interest : plasmid containing GFP).
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | SECTION 3: PROTEIN PURIFICATION UNDER DENATURING CONDITIONS<br>
| + | |
| − | Secreted and His-tagged Cas9 and Cpf1, which will be referred to as sCas9 and sCpf1, respectively, were purified from the medium using Ni-bead purification, according to protocol [Google Drive\iGEM 2017\Experimental\Protocols\Wiki ready\Purification of cells and medium secreted cpf1 and cas9.pdf]. Also, whole-cell lysates were made, following the same protocol, to check for possible accumulation of sCas9 or sCpf1 in HEK293t cells.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | SECTION 4: VERIFYING THE PRESENCE OF HIS-TAGGED PROTEINS IN THE MEDIUM<br>
| + | |
| − | The presence of sCas9 and sCpf1 was verified using SDS-PAGE and Western Blots. Proteins were separated using SDS-PAGE using the following protocol [Google Drive\iGEM 2017\Experimental\Protocols\Wiki ready\General Protocol_ SDS-PAGE & Western Blot.pdf].
| + | |
| − | 10% acrylamide running gels, and stacking gels were made according to the following protocol [Google Drive\iGEM 2017\Experimental\Protocols\Wiki ready\Preparing SDS-PAGE gels.pdf]. Western Blots were carried out according to the same protocol as for the SDS-PAGE.
| + | |
| − | The secreted proteins were incubated with mouse anti-His6x (using dilutions of 1:2000 and 1:5000) and rabbit anti-Cas9 or rabbit anti-Cpf1 (using dilutions of 1:2000). The secondary antibody wa s a goat anti-mouse for the Histag and goat anti-rabbit for both Cas9 and Cpf1, with a horseradish peroxidase (HRP) conjugate to verify the presence of secreted proteins.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | SECTION 5: PROTEIN PURIFICATION UNDER NATIVE CONDITIONS<br>
| + | |
| − | Proteins were purified using Ni-NTA superflow columns, according to the following protocol [Google Drive\iGEM 2017\Experimental\Protocols\Wiki ready\Ni-NTA superflow colums protocol]. No imidazole in the pre- and washing buffers was used. Additionally, 50 ul samples were taken of the pellet, supernatant, filtered supernatant, and the runthrough.
| + | |
| − | Whole cell lysates were made using protocol [Google Drive\iGEM 2017\Experimental\Protocols\Wiki ready\Purification of cells and medium secreted cpf1 and cas9.pdf] to check for possible accumulation of sCas9 or sCpf1 in Hek293t cells.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | SECTION 6: IN VITRO ENDONUCLEASE ACTIVITY ASSAY<br>
| + | |
| − | After successful purification of sCas9-His6x and sCpf1-His6x and subsequent verification of the presence of the aforementioned proteins, an in vitro endonuclease activity assay was carried out. The in vitro endonuclease activity assay was used to assess whether or not our secreted and, in all likelihood, glycosylated sCas9-His6x and sCpf1-His6x would still exhibit sgRNA-binding- and endonuclease activity. The assay was executed according to the protocol [Google Drive\iGEM 2017\Experimental\Protocols\Wiki ready\Nuclease activity assay.pdf]. Linearized plasmid 51-dPAM (823 bp) [Google Drive\iGEM 2017\Experimental\SnapGene\Secreted Cas or Cpf\Endonuclease Activity Assay\1_8_2017\51_dPAM 800bp.dna] was used as the target for sCas9-His6x and His6x-Cpf1. Two sgRNAs were used that were tailored to be bound by either Cas9 or Cpf1: [iGEM 2017\Experimental\SnapGene\Secreted Cas or Cpf\Endonuclease Activity Assay\SpCas9_gRNA1_Tet-luc.dna] and [iGEM 2017\Experimental\SnapGene\Secreted Cas or Cpf\Endonuclease Activity Assay\AsCpf1_sgRNA.dna] , respectively. Both sgRNAs were complementary to roughly the same region of the aforementioned linearized plasmid, which would result in two cut fragments of ~260 bp and ~560 bp for both His6x-Cas9 and His6x-Cpf1. The efficacy of these sgRNAs, both in binding to the target region in the linearized plasmid, and binding to either Cas9 or Cpf1 were also assessed. As positive controls we used unmodified Cas9 and Cpf1 produced by Escherichia coli, coupled with their respective sgRNAs and the linearized target plasmid. The negative controls consisted of the linearized plasmid with either Cas9 or Cpf1 without sgRNA, and a third negative control with the linearized plasmid only. Subsequently, the samples were separated by DNA gel
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-4">Results</h2>
| + | |
| − | | + | |
| − | SECTION 1: CREATING THE DNA CONSTRUCTS<br>
| + | |
| − | As mentioned at the methods, the plasmid sequences and features can be viewed at:<br>
| + | |
| − | <br>
| + | |
| − | <img width="600" src="https://static.igem.org/mediawiki/2017/8/8e/Uuextra_figure1.png">
| + | |
| − | <br>
| + | |
| − | <b>Snapgene file:</b> iGEM 2017\Experimental\SnapGene\Secreted Cas or Cpf\ pCAGGS_sigseq_Cpf1_Histag.dna<br>
| + | |
| − | <br>
| + | |
| − | and<br>
| + | |
| − | <br>
| + | |
| − | <img width="600" src="https://static.igem.org/mediawiki/2017/3/3e/Uuextra_figure2.png"><br>
| + | |
| − | <b>Snapgene file:</b> iGEM 2017\Experimental\SnapGene\Secreted Cas or Cpf\ pCAGGS_sigseq_Cas9_Histag.dna<br>
| + | |
| − | <br>
| + | |
| − | <b>Table 1. Nanodrop results of midiprepped plasmids</b>
| + | |
| − | <table width="450">
| + | |
| − | <tr>
| + | |
| − | <td><b>Plasmid</b></td>
| + | |
| − | <td><b>Concentration (ng/ul)</b></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>pCAGGs_sigseq_Cas9_Histag</td>
| + | |
| − | <td>809,7</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>pCAGGs_sigseq_Cpf1_Histag</td>
| + | |
| − | <td>1322</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>Lenti Cas9</td>
| + | |
| − | <td>2593,9</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>Lenti Cpf1</td>
| + | |
| − | <td>1312,7</td>
| + | |
| − | </tr>
| + | |
| − | </table>
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | SECTION 2: TRANSFECTION INTO HEK293T CELLS
| + | |
| − | Lipofectamine 2000 has a high transfection efficiency and at the time no fluorescent microscope was available. Therefore we did not do a cotransfection of the plasmids with eGFP at the small batch (denaturing conditions). The transfection success was verified by the Western Blot results (See results of section 4?)
| + | |
| − | | + | |
| − | During transfection of the big batch (native conditions) we had a fluorescent microscope available and therefore the plasmids were cotransfected with eGFP (figure xa and xb).
| + | |
| − | | + | |
| − | <br>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/e/e1/Uutransfectionhekcells.png">
| + | |
| − | <br>
| + | |
| − | Figure x. Fluorescent microscope image of HEK293t cells cotransfected with eGFP and pCAGGs_sigseq_Cas9_Histag (a) and pCAGGs_sigseq_Cpf1_Histag (b) (plasmid ratio 1:9). In both cases, eGFP expression is clearly visible, indicating successful cotransfections.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | SECTION 3: PROTEIN PURIFICATION UNDER DENATURING CONDITIONS<br>
| + | |
| − | <br>
| + | |
| − | <img width="600" src="https://static.igem.org/mediawiki/2017/e/e7/Uuwestern.png">
| + | |
| − | <br>
| + | |
| − | figure x: Western blots of Cpf1 and Cas9, using anti-Cas9 and anti-Cpf1 antibodies. In both cases, the purified protein shows a band, suggesting the successful secretion of Cpf1 and Cas9.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | SECTION 4: ACTIVITY ASSAY<br>
| + | |
| − | <br>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/5/54/Uuactivityassay1.png">
| + | |
| − | <br>
| + | |
| − | Figure x. DNA gel electroforesis of the linearized 800bp 51_dPAM plasmid, cut by either normal Cas9 or normal Cpf1. Lanes from left to right are 1. ladder , 2. Cas9 + 0,5 uM gRNA, 3. Cas9 + 1 uM gRNA, 4.Cas9 + 2 uM gRNA, 5. Cas9 // no gRNA, 6. Cpf1 + 1 uM gRNA, 7. Cpf1 + 5 uM gRNA, 8. Cpf1 + 10 uM gRNA, 9. Cpf1 // no gRNA, 10. only plasmid. Concentration of Cas9 and Cpf1 used in the assay were 0,05 and 0,15, respectively. Red in the image is an artefact due to the software. As can be seen in lanes 6-8, normal Cpf1 cleaves
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/3/39/Nocleavagedetected.png">
| + | |
| − | <br>
| + | |
| − | Figure x:
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-5">Discussion</h2>
| + | |
| − | …
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-mesa-replication" type="text/template">
| + | |
| − | <div class="page-heading">MESA construct replication</div>
| + | |
| − | | + | |
| − | The architecture we use for OUTCASST is inspired by the Modular Extracellular Sensor Architecture (MESA) (Daringer, N. M., Dudek, R. M., Schwarz, K. A., & Leonard, J. N., 2014: Modular extracellular sensor architecture for engineering mammalian cell-based devices. ACS synthetic biology, 3(12), 892-902, http://pubs.acs.org/doi/abs/10.1021/sb400128g) (Schwarz, K. A., Daringer, N. M., Dolberg, T. B., & Leonard, J. N. 2017: Rewiring human cellular input-output using modular extracellular sensors. Nature chemical biology, 13(2), 202-209, http://www.nature.com/nchembio/journal/v13/n2/abs/nchembio.2253.html?foxtrotcallback=true). Because of this, MESA first needed to be replicated to verify whether the final product could work as intended. A successful replication will serve as an indication that OUTCASST would work, as well as provide data we can use to compare and correct models of the system.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | The first few weeks, we tried to replicate the MESA construct using Luciferase-GFP fusion protein as the output signal and dsRED as a transfection control. After a Skype Call with the MESA authors we decided to use YFP as the output signal and BFP as a transfection control to prevent signal overlap, equivalent to the ones they used.
| + | |
| − | | + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Introduction</h2>
| + | |
| − | MESA is a protein structure with an extracellular domain, a transmembrane domain and an intracellular domain. It can be used as a sensor by having two different protein chains with, on the extracellular region, an element to cause dimerization and, on the intracellular region, a combination of a protease on one chain and a transcription factor on the other. The transcription factor can be cleaved off by the protease when the two chains dimerize, either through a ligand or randomly. Subsequently, the transcription factor travels to the nucleus where it induces transcription of a reporter (Figure 1).
| + | |
| − | <br>
| + | |
| − | <img src="https://static.igem.org/mediawiki/2017/6/69/Uumesa_figure1.png">
| + | |
| − | <br>
| + | |
| − | <b>Figure 1.</b> The MESA signalling pathway. The MESA cell signalling pathway consists of a target chain (TC), a protease chain (PC) and a ligand which can bind both the extracellular domains. The TC has a transcription factor on the intracellular part of the protein, while the PC has a protease which can cleave off the aforementioned transcription factor. The ligand, in this case VEGF, binds both chains, which allows the protease to be close enough to do this. The released transcription factor subsequently travels to the nucleus to induce a reporter gene. Image modified from:(Daringer, N. M., Dudek, R. M., Schwarz, K. A., & Leonard, J. N., 2014: Modular extracellular sensor architecture for engineering mammalian cell-based devices. ACS synthetic biology, 3(12), 892-902, http://pubs.acs.org/doi/abs/10.1021/sb400128g)
| + | |
| − | <br><br>
| + | |
| − | The MESA constructs that inspired OUTCASST, and therefore need to be verified in this chapter, are V2-MESA-35F-M-tTA and V2-MESA-35F-TEV. These chains have an extracellular domain which binds vascular endothelial growth factor (VEGF) with an intracellular region each. For V2-MESA-35F-M-tTA, the intracellular region is the tetracycline-controlled transactivator (tTA) and a Tobacco Etch Virus (TEV) protease for V2-MESA-35F-TEV. pL3-TRE-LucGFP-2L and pBI-MCS-EYFP were used as reporter plasmids, which express luciferase-GFP fusion protein and yellow fluorescent protein (YFP), respectively.
| + | |
| − | <br><br>
| + | |
| − | A Cre reporter has constituently active dsRED and was used as transfection control. In our later experiments with YFP, blue fluorescent protein (BFP) was used as a transfection control to avoid spectrum overlap.
| + | |
| − | <br><br>
| + | |
| − | Replicating this system is of major importance to our final DNA Biosensor design because we need to verify that the same approach would work for our system as well. Finally, we would compare it to model data and to benchmark output. Unfortunately, we could not reach this stage.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-3">Materials</h2>
| + | |
| − | <ul>
| + | |
| − | <li />V2-MESA-35F-M-tTA (https://www.addgene.org/84502/)
| + | |
| − | <li />V2-MESA-35F-TEV (https://www.addgene.org/84503/)
| + | |
| − | <li />pL3-TRE-LucGFP-2L (https://www.addgene.org/11685/)
| + | |
| − | <li />Cre reporter (https://www.addgene.org/62732/)
| + | |
| − | <li />pBI-MCS-EYFP (http://www.addgene.org/58855/)
| + | |
| − | <li />pSLQ-Set1-BFP (not on addgene)
| + | |
| − | <li />VEGF-164 (cat.: 583102, biolegend)
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-4">Methods</h2>
| + | |
| − | We seeded HEK293T in a 24-well plate with mEF media and 1% penicillin-streptomycin. 24 h post-seeding the cells were transfected according to Table 1 in the supplement. The amounts of the plasmid in ng were the same between the wells for all different plasmids aside from the reporter plasmids and controls. Per well 180 ng of V2-MESA-35F-M-tTA; 15 ng of V2-MESA-35F-TEV and 25 ng of either pSLQ-Set1-BFP or Cre reporter was used. For reporter plasmids pL3-TRE-LucGFP-2L and pSLQ-Set1-BFP, four different amounts were used, namely 250 ng, 275 ng, 300 ng and 350 ng. Wells where the total amount of plasmid was less than 500 ng were supplemented with random DNA up to a total of 500 ng.
| + | |
| − | <br><br>
| + | |
| − | The media was refreshed 24 h post transfection and 250 ng of VEGF was added per mL of media. The results were obtained by FACS (BD FacsAria Fusion machine) approximately 18 h later.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-5">Results</h2>
| + | |
| − | The results of the flow cytometry analysis are shown in table 1. The GFP and YFP reporter plasmid concentrations for transfection were varied between 250 ng and 350 ng per well. After adding VEGF, GFP signal increased in all samples except for the sample containing 250 ng GFP, which showed a decrease. The cells that were transfected with a GFP concentration of 350 ng showed the greatest increase in GFP activity (9.2%). In figure 2 the FACS plots for 350 ng GFP are shown.
| + | |
| − | <br><br>
| + | |
| − | <b>Table 1.</b> Heatmap of the flow cytometry data. The percentages shown is the relative difference of fluorescence compared to control. The colour scale has been set with a minimum of -19.4%, a midpoint of 0% and maximum of 27.1%. Overall, signal induction appears to be more efficient with the YFP plasmid, but the data is inconsistent.
| + | |
| − | <br>
| + | |
| − | <img width="600" src="https://static.igem.org/mediawiki/2017/7/70/Uufacsheatmap.png">
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | | + | |
| − | For the YFP samples, all concentrations showed an increase in YFP activity (including the control samples). The greatest increase was observed in the samples containing 300 ng YFP, with a 27.9% increase. In figure 3 the FACS plots for 300 ng YFP are shown. Furthermore, the samples with 350 ng YFP showed a markedly lower increase in activity (1.2%). In general the YFP samples showed a greater increase in activity than the GFP samples.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2017/1/1c/Uumesafigure2.png"> <img src="https://static.igem.org/mediawiki/2017/d/dc/Uumesafigure2b.png">
| + | |
| − | <br>
| + | |
| − | <b>Figure 2.</b> 350 ng GFP. (Left) Plot before adding VEGF. (Right) Plot after adding VEGF. [GFP] is GFP activity.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2017/7/74/Uumesafigure3a.png"> <img src="https://static.igem.org/mediawiki/2017/e/ed/Uumesafigure3b.png">
| + | |
| − | <br>
| + | |
| − | <b>Figure 3.</b> 300 ng YFP. (Left) Plot before adding VEGF. (Right) Plot after adding VEGF. [Q2] is YFP activity.
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | The experiment was repeated with duplicates of samples with 275 and 300 ng YFP and 350 and 450 ng GFP (table 1). All GFP samples show a decrease except for one which shows a negligible increase in GFP activity after adding VEGF. The duplicates did not give similar results, especially for the 450 GFP samples.
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | YFP samples show a little induction, but there are, again, large differences between duplicates. The first 275 YFP sample can not be included because media was not refreshed prior to transfection, which was done in all the other samples. This could explain the odd result. The second YFP 300 sample showed 10.8% increase in YFP activity after adding VEGF, but the other YFP 300 sample showed hardly any induction.
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | In figure 4 extra controls are shown, comparing 300 ng YFP with target chain but without the protease chain to 300 ng YFP with both the target and protease chain (all without VEGF). The same is shown for 350 ng GFP, in figure 5. There is not much difference in intensity between the sample with protease chain compared to without.
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2017/4/4b/Uumesafigure4a.png"> <img src="https://static.igem.org/mediawiki/2017/2/27/Uumesafigure4b.png">
| + | |
| − | <br>
| + | |
| − | <b>Figure 4.</b> 300 ng YFP. (Left) with protease chain. (Right) without protease chain. [Q2] is YFP activity.
| + | |
| − | | + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | | + | |
| − | <img src="https://static.igem.org/mediawiki/2017/0/0b/Uumesafigure5a.png"> <img src="https://static.igem.org/mediawiki/2017/f/fe/Uumesafigure5b.png">
| + | |
| − | <br>
| + | |
| − | <b>Figure 5.</b> 350 ng GFP. (Left) with protease chain. (Right) without protease chain. [GFP] is GFP activity.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-6">Discussion</h2>
| + | |
| − | | + | |
| − | The goal of these experiments was to verify the MESA system in our own lab. We had little success in the matter. In the original article the authors managed to achieve a doubling of output when the ligand was added, while we only achieved 25% more signal at best. The output also was inconsistent. Any number of reasons can be the cause of this. The most likely explanation is the difference in amount of plasmid we added compared to the original authors. Due to the costs of transfection, less plasmid of each kind was used. Though the absolute amount of plasmid was reduced, the ratio of the TC plasmid and PC plasmid was maintained. The ratio between the TC/PC plasmids and the reporter plasmid were not maintained however. A possible cause for the lack of output might be that too little of reporter plasmid was used. This however seems unlikely, since in our latest experiments the amounts of reporter plasmid were similar to the amounts the original authors used. Rather, it could be that the amount of TC/PC plasmids used was too little compared to reporter plasmid. Another difference is the method of transfection; we used lipofectamine for transfectio n. This, coupled with the differences in plasmid amounts could have some influence on the results.
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | The results were inconsistent. Even between duplicates we found large differences in outcome. Possible explanations include, for example, errors during preparation of the samples and differences in the duration under trypsin. However, the latter can not explain the inconsistency between duplicates.
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | The controls of the MESA system, with only the target chain without the protease chain, showed a similar level of signal as the samples with both chains, as was seen in figure 4 and 5. This could imply that the MESA plasmids that were used are not functional, as it is expected that the target chain on it’s own will show minimal background signalling. Alternatively it could imply that the reporter is very leaky, showing little differences between TC, TC/PC and TC/PC with VEGF. Additionally, we used mEF media for cell culturing, which also contains fetal bovine serum. Fetal bovine serum can contain VEGF, although we would assume this amount is negligible compared to the amount of VEGF we add.
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | In conclusion, the MESA system still needs tuning to function in our lab. The best option would be to use the same transfection method as the original authors did and use the exact same amounts of each plasmid. To be sure, DMEM medium could be used rather than mEF. If it does not work in spite of these changes, it is important to look for other potential reasons.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-7">Supplementary</h2>
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-outcasst" type="text/template">
| + | |
| − | <div class="page-heading">OUTCASST system production</div>
| + | |
| − | After the replication of the MESA construct and testing the activity of secreted Cas9 and Cpf1, we sought to combine these two components into their final form: the OUTCASST system.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Introduction</h2>
| + | |
| − | To produce the OUTCASST system, catalytically inactive Cas9 and Cpf1 need to be expressed on the extracellular domain of the MESA construct instead of the original extracellular VEGF binding domain. The first step in this process is to make dead versions of Cas9 and Cpf1 (dCas9 and dCpf1) by introducing mutations. This way the two proteins won’t be able to cut the DNA strands in separate pieces and are only able to bind the DNA. When our target DNA remains in one pieces it makes co-localization of the two transmembrane proteins possible. For the OUTCASST system, we substituted dCas9 for the extracellular domain of the MESA chain with the Tobacco Etch Virus (TEV) protease and we substituted dCpf1 to the MESA chain with the tetracycline-controlled transactivator (tTA). Lastly, we wanted to test the OUTCASST system for functionality and optimize it. However, we ran into problems while substituting the extracellulair domains of MESA for dCas9 and dCpf1 and therefore we did not test the functionality of the OUTCASST system, unfortunately.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-3">Materials</h2>
| + | |
| − | | + | |
| − | Plasmids
| + | |
| − | <ul>
| + | |
| − | <li />lenti-Cas9-Blast (https://www.addgene.org/52962/)
| + | |
| − | <li />lenti-AsCpf1-Blast (https://www.addgene.org/84750/)
| + | |
| − | <li />V2-MESA-35F-M-tTA (https://www.addgene.org/84502/)
| + | |
| − | <li />V2-MESA-35F-TEV (https://www.addgene.org/84503/)
| + | |
| − | <li />pL3-TRE-LucGFP-2L (https://www.addgene.org/11685/)
| + | |
| − | <li />Cre reporter (https://www.addgene.org/62732/)
| + | |
| − | </ul>
| + | |
| − | <br>
| + | |
| − | Primers for mutagenisis
| + | |
| − | <ul>
| + | |
| − | <li />dCAS9 D10A fw: tacagcatcggcctggcaatcggcaccaactctg
| + | |
| − | <li />dCAS9 D10A rv: cagagttggtgccgattgccaggccgatgctgta
| + | |
| − | <li />dCAS9 H840A fw: cgactacgatgtggacgctatcgtgcctcagagc
| + | |
| − | <li />dCAs9 H840A rv: gctctgaggcacgatagcgtccacatcgtagtcg
| + | |
| − | <li />dCpf1 D908A fw: ctatcatcggcatcgctcggggcgagagaaa
| + | |
| − | <li />dCpf1 D908A rv: tttctctcgccccgagcgatgccgatgatag
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-4">Methods</h2>
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-modeling-and-mathematics" type="text/template">
| + | |
| − | <div class="page-heading">Modeling and Mathematics</div>
| + | |
| − | | + | |
| − | The first thing we did to get a good overview of the system dynamics was to try and graphically represent the chemical interactions of the OUTCASST system as a small reaction network. From this network, we can already see that, if we disregard production and degradation of the proteins (so under conditions of conservation of mass) all target chain proteins will be cleaved over time. For the eventual equilibrium outcome, the cleavage rate does not matter. It only matters for the duration of equilibrium onset. So, if the cleavage speed is of no importance for the end-result, does it affect sensitivity in another way?
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Optimization of the protease cleavage rate</h2>
| + | |
| − | Since the concentration of substrate will be exceedingly low for our sensor, the number of binding events due to substrate will also be small. It would be ideal if each binding event would lead to cleavage while transient meetings between the two proteins only rarely lead to cleavage. This would reduce the chance of false positive signals. Considering the great binding affinities of both Cas9 and Cpf1 for gRNA complementary DNA, binding events are much longer in duration than transient meetings of the two proteins.
| + | |
| − | <br><br>
| + | |
| − | In the image to the side, you can see a schematic illustration of the difference in half-life of the complex formed by transient and substrate-mediated interaction.
| + | |
| − | <br><br>
| + | |
| − | In the image, for clarity, we have taken the half-life of transient complex as 5 arbitrary time units and that of the substrate-mediated complex is set to 100.
| + | |
| − | <br><br>
| + | |
| − | In the real system, these values will be much wider apart, but we took these as a clear illustration of the point we wish to make.
| + | |
| − | <br><br>
| + | |
| − | Consider two different versions of our system: one with a fast-cleaving protease and the second with a slow-cleaving protease. In the image to the left, we plotted the probability distribution of cleavage occurring over time for these two versions of our Protease Chain protein. Note that the probability that it will cleave over time will always be 1, the timespan wherein this happens simply differs.
| + | |
| − | For the mathematicians amongst those who are reading this: These plots are simple lognormal distributions, for the distribution cannot take negative values as it is impossible to cleave before the complex has been formed.
| + | |
| − | <br><br>
| + | |
| − | We can now see that the probability of cleavage for the slow cleaver is much smaller than that of the fast cleaver in the timespan that the transient complex persists. Of course, the concentration of the substrate-mediated complex decreases over time, so the total cleavage decreases when it cleaves later. To investigate how much the transient and substrate-mediated complex contribute to signal development for both Protease Chain variants, we define:
| + | |
| − | <br><br>
| + | |
| − | <b>FORMULA</b>
| + | |
| − | <br><br>
| + | |
| − | Wherein S’ is the increase in signal, given by the probability of cleavage (p_c) for the remaining uncleaved complex. The remaining uncleaved complex is given by the remaining complex fraction (C) and how likely it is that it has not already been cleaved (one minus the integral of p_c from 0 until that timepoint).
| + | |
| − | <br><br>
| + | |
| − | When we solve this for each Protease Chain version and for both the transient and substrate-mediated complex, we end up with time-plots of the resulting signal contribution of a single binding event over time. In these plots, we can see that, for the slow cleaver, shown in the top image to the left, the resulting substrate-mediated complex signal is about half of that for the fast cleaver, as shown in the lower image. The signal is less strong but, in theory, this is not a problem since the signal can be amplified by the cells.
| + | |
| − | <br><br>
| + | |
| − | For the fast cleaver, we can see a much bigger issue. The signal contribution of the transient complex, i.e. the false positive, is ten-fold smaller than the signal contribution of the substrate-mediated complex but, considering that transient encounters will be a lot more frequent than substrate-binding events, the false positive signal can be multiplied many times, making it a lot stronger than the substrate-mediated signal can ever be. This is not the case for the slower cleaver, where the transient complex signal contribution is in the order of 10^-7, and thus falls on the abscissa.
| + | |
| − | <br><br>
| + | |
| − | Using the contributions of a single transient binding event and a single substrate-mediated binding event, we can calculate a proxy for precision by dividing the contribution of the true signal (substrate-mediated) by the contribution of the false signal (transient). For the slow rate, the contribution of a single substrate-mediated event is almost 48 000 times that of the transient occurrence. For the fast cleavage rate, this is only 17 times.
| + | |
| − | <br><br>
| + | |
| − | If we assume that the transient interaction occurs 100 times more frequently than the substrate-binding event, ‘true’ signal strength would only be 0.17 times that of the background for the fast cleaver whereas it would still be 480 times stronger than the background for the slow cleaver.
| + | |
| − | <br><br>
| + | |
| − | In conclusion, for minimization of false positive results, the cleavage rate should result in a cleavage duration that is near the half-life of the uncleaved complex between target-chain, protease-chain and substrate. Increasing the cleavage rate would not contribute to sensitivity and merely decrease precision.
| + | |
| − | <br><br>
| + | |
| − | A full work-out of this demonstration in mathematica notebook can be found <a target=_BLANK href="https://drive.google.com/drive/folders/0B_qbow6tESp8b2FNb3pMa1psLTA">here</a>.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-3">Optimization of protein production rates</h2>
| + | |
| − | …
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-interlab-study" type="text/template">
| + | |
| − | <div class="page-heading">InterLab Study 2017</div>
| + | |
| − | Utrecht 2017 participated in the Fourth International InterLaboratory Measurement Study for the Bronze Medal Requirements. The aim of this year’s study was to produce common, comparable units for measuring green fluorescence protein (GFP) with different plate readers around the world and to see how reliable different RBS test devices are with respect to the reproducibility of their results.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Introduction</h2>
| + | |
| − | It is very important that measurements in all engineering disciplines are reliable and reproducible. However, the compatibility of measurements in different labs around the world has always been difficult. This is why there is a need for robust measurement procedures. The iGEM Measurement Committee has chosen Green Fluorescent Protein as the measurement marker for this study, as it is one of the most commonly used markers in the lifesciences. For this fourth interlab study, fluorescence measurements were performed with E. coli. Six different GFP expression plasmids and additional positive and negative control plasmids were used. The protocols for this study were provided by the iGEM organisation to ensure method uniformity between participating labs.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-3">Materials</h2>
| + | |
| − | <ul>
| + | |
| − | <li />InterLab Parts and Measurement Kit (http://parts.igem.org/Help:2017_DNA_Distribution#Measurement_Kit)
| + | |
| − | <li />Plate reader: Biotek Synergy HT
| + | |
| − | <li />E. coli DH5-alpha cells
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-4">Methods</h2>
| + | |
| − | <ul>
| + | |
| − | <li />Protocol for the transformation of competent E. coli: single tube transformation protocol (http://parts.igem.org/Help:Protocols/Transformation)
| + | |
| − | <li />Protocol for the plate reader (https://static.igem.org/mediawiki/2017/8/85/InterLab_2017_Plate_Reader_Protocol.pdf)
| + | |
| − | </ul>
| + | |
| − | <br>
| + | |
| − | All eight plasmids were transformed in competent E. coli DH5-alpha cells with heat shock. After incubating overnight at 37°C, single colonies were picked and grown in 5mL LB medium with chloramphenicol. These cultures were grown at 37°C while being shaken at 200 rpm (instead of the recommended 220 rpm).
| + | |
| − | <br><br>
| + | |
| − | Ludox-S40 and fluorescein were used to calibrate the OD600 and fluorescence measurements, respectively. To gain a homogeneous bacterial concentration, the OD600 of the overnight cultures were measured and diluted to achieve an OD600 of 0.02.
| + | |
| − | <br><br>
| + | |
| − | The OD600 and the fluorescence were measured with the plate reader for all eight different plasmid samples, for both the undiluted and diluted cultures, at different time intervals. The filter settings for excitation and emission for measuring the fluorescence were 485/20 and 528/20, respectively. The gain was set to 35.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-5">Results</h2>
| + | |
| − | All results were integrated in the Excel template file provided by iGEM. In figure 1 the relative fluorescence expression per cell of the diluted cultures is plotted against the time for all devices i.e. plasmid constructs. Here, it is visible that device 1 has very deviating values relative to the other devices. In figure 2 test device 1 is omitted to get a better view at the other devices. Here it is visible that test devices 3, 5 and 6 follow closer to the negative control, while test devices 2 and 4 follow closer to the positive control.
| + | |
| − | | + | |
| − | <img width="600" src="https://static.igem.org/mediawiki/2017/6/60/Uuinterlab_figure1.png">
| + | |
| − | <br><br>
| + | |
| − | <b>Figure 1.</b> The relative fluorescence per cell over time for the negative and the positive controls and the six test devices of the diluted cultures.
| + | |
| − | <br>
| + | |
| − | <br>
| + | |
| − | <img width="600" src="https://static.igem.org/mediawiki/2017/0/03/Uuinterlab_figure2.png">
| + | |
| − | <br><br>
| + | |
| − | <b>Figure 2.</b> The relative fluorescence per cell over time for the negative and the positive controls and test device 2 till 6 of the diluted cultures.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-6">Discussion</h2>
| + | |
| − | The most notable results are those of test device 1, which deviates most from the other samples. It also has a greater standard deviation in comparison to the rest of the data points, although the standard deviations for all cases are too small to be visible in the graphs. The results of all teams participating in this year’s Interlab Study will be analysed by iGEM to see which plasmid has the most precise and reliable gene expression. The ultimate aim is to improve the reliability of measurements around the world. We hope that the data generated here has helped in this process.
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script src='https://cdn.jsdelivr.net/scrollreveal.js/3.3.1/scrollreveal.min.js'></script>
| + | |
| − | | + | |
| − | <script id="page-stakeholders" type="text/template">
| + | |
| − | <!--
| + | |
| − | We interviewed a panel of world-renowned experts, aliquip inermis deseruisse at sed, populo oporteat efficiantur vim eu, pro prompta salutandi at. Scripta bonorum denique ei usu, inermis nominavi nec ad. Vis ea ignota habemus, numquam veritus antiopam id per. Ne mei posidonium complectitur, pri eu sint epicuri phaedrum, eu solum nullam eos. Pericula intellegam sed an, errem volumus repudiare no cum, vel paulo populo et. Principes dissentiet eos ne.
| + | |
| − | -->
| + | |
| − | We interviewed a panel of world-renowned experts. By listening carefully, our project's direction was shaped and refined.
| + | |
| − | <br>
| + | |
| − | <div class="shuffle-container" style="position: relative; margin-top: 30px; margin-bottom: 50px; width: 900px; margin-left: -75px;">
| + | |
| − | <div style="position: absolute; top: 200px; left: 350px; z-index: 1;">
| + | |
| − | <a href="#" class="btn blue" id="goto-2" style="margin: 0; padding: 10px 25px; font-size: 18px; color: white; font-family: 'Open Sans', 'sans-serif';" onclick="jQuery('html, body').animate({scrollTop: jQuery('.timeline').offset().top - 100}, 500)">Follow our journey</a>
| + | |
| − | </div>
| + | |
| − | <div class="js-grid my-shuffle shuffle" style="height: 520.262px; transition: height 250ms cubic-bezier(0.4, 0, 0.2, 1);">
| + | |
| − | <figure class="js-item column col-span shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity; transform: translate(0px, 0px) scale(1);">
| + | |
| − | <div class="aspect aspect--32x9">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/f/fe/Marit_de_Wit.jpg"></div>
| + | |
| − | <div style="position: absolute; bottom: 5px; left: 5px; right: 5px; color: white; font-size: 13px; line-height: 100%;">
| + | |
| − | Marit de Wit<br>
| + | |
| − | <span style="font-style: italic;">Doctors without borders</span>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(450px, 0px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--9x80">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/f/fc/Bert_Gerrits_van_den_Ende.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(675px, 0px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--9x80">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/6/63/Hans_Bos.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(225px, 129px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--16x9">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/8/8e/Jaap_van_Hellemond.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column col-span shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(225px, 260px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--32x9">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/4/4b/Jet_and_Ruud.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column col-span shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(0px, 389px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--32x9">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/c/cd/Patrick_en_Pieter-Jaap.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(0px, 129px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--9x80">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/5/59/Hugo_Snippert_%282%29.jpg"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <figure class="js-item column shuffle-item shuffle-item--visible" style="position: absolute; top: 0px; left: 0px; visibility: visible; will-change: transform; opacity: 1; transform: translate(675px, 260px) scale(1); transition-duration: 250ms; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-property: transform, opacity;">
| + | |
| − | <div class="aspect aspect--9x80">
| + | |
| − | <div class="aspect__inner"><img src="https://static.igem.org/mediawiki/2017/d/d0/Titia_Sijen.JPG"></div>
| + | |
| − | </div>
| + | |
| − | </figure>
| + | |
| − | <div class="column my-sizer-element"></div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <section class="timeline" style="width: 1000px; margin-left: -100px;">
| + | |
| − | <div class="timeline-container" style="width: 100%;">
| + | |
| − | <div class="timeline-item">
| + | |
| − | | + | |
| − | <div class="timeline-img"></div>
| + | |
| − | | + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <h2>Westerdijk</h2>
| + | |
| − | </div>
| + | |
| − | <div class="date">10 OCT 2017</div>
| + | |
| − | <p>The first person we talked to came from the Westerdijk Fungal Biodiversity Institute in Utrecht. Here, they perform mycological research, wherein they focus on the determination and classification of fungi…</p>
| + | |
| − | <a class="bnt-more" href="javascript:void(0)">More</a>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | <div class="timeline-item">
| + | |
| − | | + | |
| − | <div class="timeline-img"></div>
| + | |
| − | | + | |
| − | <div class="timeline-content timeline-card js--fadeInRight">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <h2>UMCU</h2>
| + | |
| − | </div>
| + | |
| − | <div class="date">10 OCT 2017</div>
| + | |
| − | <p>We used this information and went to two DNA genome diagnostic labs, one in Utrecht and one in Amsterdam. At the University Medical Center of Utrecht we talked about the non-invasive prenatal testing and the use of our system to test for genetic conditions…</p>
| + | |
| − | <a class="bnt-more" href="javascript:void(0)">More</a>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | </section>
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <style type="text/css">
| + | |
| − | .page-container ul, .page-container ol { padding-left: 20px; }
| + | |
| − | .page-container ul, .page-container ol { text-align: left; }
| + | |
| − | </style>
| + | |
| − | | + | |
| − | <script id="page-safety" type="text/template">
| + | |
| − | <div class="page-heading">OUTCASST Safety information</div>
| + | |
| − | | + | |
| − | Since safety is a very important aspect in synthetic biology, we collaborated with the RIVM National Institute for Public Health and Environment of the Netherlands. They encouraged us to think about safety before we act. We came to the conclusion that safety has different meanings for different stakeholders. Here we describe the most important points for these stakeholders. Besides safety, we’ve also thought about the societal impact of our tool and the possible ethical issues involved. The information we gathered was summarized in an infographic, which we used to talk to the general public about synthetic biology and safety at an event organized by the RIVM.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | | + | |
| − | <b>INFOGRAPHIC</b>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Safety</h2>
| + | |
| − | | + | |
| − | <b>1.1 Lab Safety</b><br><br>
| + | |
| − | Since we are working with GMO’s we have to follow several safety regulations to ensure the safety of our team members whilst working on OUTCASST. Our team’s lab management worked closely with drs. Fraukje Bitter-van Asma, the Occupational Health and Safety & Environment Expert of Utrecht University. She helped us determine which safety forms and permits needed to be filled out, filed and requested as well as which university guidelines and emergency measures were in place in case of calamities and to prevent health risks to both team members working on the lab and the environment.
| + | |
| − | <br><br>
| + | |
| − | <b>1.2 User Safety</b><br><br>
| + | |
| − | Since we are going to use OUTCASST for the diagnosis of Chagas disease, our users will be caregivers and medical professionals in rural areas. Safety of our device is of great importance to them. During the interviews to find suitable end users (see the end-users section), we also discussed the safety of HEK293T cells to detect specific DNA regions. All interviewees were unanimous that these cell lines would not be a problem regarding safety issues and that potential risks would lie with the samples applied to the device. Since we are going to use blood from people that are potentially infected with parasites, it is important to point out the risk of contamination of the caregiver or other people. This risk is, however, no different from that of other simple diagnostic procedures.
| + | |
| − | <br><br>
| + | |
| − | Since the HEK293T cells are too fragile to use in the device, we opt to use air-dried cells from the anhydrobiotic insect, Polypedilum vanderplanki. To make the use of these cells as safe as possible, the design of our tool is going to be a closed system, wherein everything is present and only the blood sample will be applied. There will also be several mechanisms and kill-switches incorporated in the detecting cells. This way, the cells are physically separated from both the user and patients and this minimizes the chance of survival of these cells outside of the system.
| + | |
| − | <br><br>
| + | |
| − | <b>1.3 Patient Safety</b><br><br>
| + | |
| − | With our design, early and rapid diagnosis of Chagas disease is possible and thus effective treatment can take place. Our detection method is relatively non-invasive since only a small blood sample of the patients has to be taken. The design is made out of one piece, which reduces risks during use.
| + | |
| − | <br><br>
| + | |
| − | <b>1.4 Public Safety</b><br><br>
| + | |
| − | An essential part of public safety is providing information about Chagas disease and how our device works. The disease is not contagious but is transmitted by a vector. Currently, all efforts for Chagas prevention are directed at vector control. By limiting the carriers of the disease, infection amongst humans is prevented. Although these strategies do not affect the disease or those infected, it does limit the exposure of uninfected individuals to the pathogen. The OUTCASST tool itself can add to these strategies by helping resolve who are and are not infected with the pathogen, increasing public health and safety further.
| + | |
| − | <br><br>
| + | |
| − | Naturally, use of GMO tools needs to be done safely and responsibly, lest it proves a risk to public safety. We have made sure to make our tool robust to handling errors and tried to make it as easy to use as possible. That way, it will be less likely for something to go wrong.
| + | |
| − | <br><br>
| + | |
| − | <b>1.5 Environment</b><br><br>
| + | |
| − | In order to minimize environmental impact of OUTCASST, our closed-box system must be disposed of in a proper manner. Disposing of OUTCASST must adhere to guidelines set for GMO products. These guidelines differ from country to country but since it is best to take clear precautions, we have added a disposal guideline in the toolkit manual.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-3">Societal impact</h2>
| + | |
| − | One of the advantages of our device is that people with an HIV co-infection can now also be tested for infection with Chagas disease. False-negative results, as are common with immune-response detection kits, can be avoided in this and other immunodeficient populations. Another advantage is that the test can be performed immediately when Chagas disease infection is suspected.
| + | |
| − | <br><br>
| + | |
| − | With already existing serological tests, detection can only occur when enough antibodies are present in circulation, which takes some time. In some cases, the amount of antibodies produced is too low to be detected with serological tests, which will also give a false-negative result. With our tool, faster diagnosis and hence more effective treatment will contribute to eradication of Chagas disease.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-4">Ethical issues</h2>
| + | |
| − | There are 2 main ethical considerations of usage of the OUTCASST system:
| + | |
| − | <br>
| + | |
| − | <ul>
| + | |
| − | <li />Issues arising from use of GMO
| + | |
| − | <li />Issues arising from DNA detection
| + | |
| − | </ul>
| + | |
| − | | + | |
| − | <br>
| + | |
| − | | + | |
| − | <b>3.1 Issues arising from use of GMO</b><br><br>
| + | |
| − | Widespread use of GMO is still not widely accepted by the public. Guarantees of safety, efficiency and overall improvement of public health must be provided to achieve mass appeal. Concerns arise over the possibility of allergenicity, gene transfer and outcrossing. For our sensor, the main issue would be horizontal transfer of our genetic system into foreign cellular bodies, thereby releasing a novel biological machine into the ecosystem. However, there is no obvious advantage gained by the incorporation of a DNA detection mechanism as seen in OUTCASST to native organisms. The expenditure of energy and limited resources to maintain this system would in fact, be a disadvantage. Nevertheless, release of the non-native DNA to the ecosystem would allow the normal evolutionary machinery to access this DNA. Random mutations, insertions and deletions could lead to genotypes which would indeed have new novel characteristics, which would else not have been present. Therefore the accidental release of the genetic material could have unforeseen consequences on the ecosystem and raises ethical questions.
| + | |
| − | <br><br>
| + | |
| − | However, the OUTCASST toolkit consists of genetically modified cells stored in a closed box environment. This closed box environment contains the cells in an isolated environment, minimizing the risk of our genetically modified cells escaping into the environment. When disposed of correctly, in line with protocols for disposal of genetically modified material, then there should be no chance of contamination or escape of our gene into the natural environment.
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | | + | |
| − | <b>3.2 Issues arising from DNA detection</b><br><br>
| + | |
| − | OUTCASST is a diagnostic tool which can be programmed to detect specific sequences of DNA. Thus, OUTCASST is susceptible to issues arising from the ownership of the information within the DNA, and the problems arising from the knowledge of this information. In many cases, the predictive value of the DNA is not fully known, and it may lead to undesired consequences for the patient. Indeed, in cases where no treatment or intervention is available it may be in the best interest of the patient not to screen for a certain gene.
| + | |
| − | <br><br>
| + | |
| − | Usage of OUTCASST for detection of pathogen DNA avoids many of the issues arising from the detection of human DNA, notably the issues of information ownership. Because OUTCASST will give a yes / no answer to the presence of pathogenic DNA, it is very much in the interest of all parties to know the answer so as to be able to respond accordingly.
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-product-design" type="text/template">
| + | |
| − | <div class="page-heading">Integrated human practices: design of OUTCASST</div>
| + | |
| − | Altogether, we gathered information from many different fields and perspectives. All of these views help us to optimize our design to use OUTCASST as a tool for diagnosing Chagas disease. Since we want our tool to be easy to use in the field and rural areas, there are different aspects that should be taken into account. Robustness and resistance of the toolkit to temperature fluctuations and humidity are chief among these. In addition, it is important not to rely on material and storage containers such as fridges or freezers (Marit de Wit, Doctors without borders).
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | <b>INTERACTIVE SCREEN</b>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | | + | |
| − | The tool should be cheap to produce and easy to use. To achieve this goal, the tool needs to have a closed box design wherein only the blood sample has to be added and a simple protocol can be followed to perform the test (Jet Bliek and Ruud van den Bogaard, Academical Medical Center Amsterdam: clinical genetics). Disposal of the system also needs to be considered (collaboration RIVM National Insitute for Public Health and the Environment).
| + | |
| − | <br><br>
| + | |
| − | There are also some things in the OUTCASST toolkit that need to be changed in comparison to the experimental approach in order to prepare the system for diagnosing Chagas disease. One of these things is the use of HEK293T cells, which need a very stable environment to stay alive. In the eventual tool, we will need to use cells that are more robust to environment fluctuations yet still cannot survive outside of the device (Patrick van Zon and Pieter-Jaap Krijtenburg, University Medical Center of Utrecht: genome diagnostics.) We also used a fluorescence signal as output in the experiments, which requires a fluorescence microscope to analyse the test results. To avoid the need of these and other equipment, we would ideally use an output signal in the form of visible light or, more promisingly, a change of color that is visible to the naked eye. Another thing we should keep in mind is the time it takes to get the results from our test device (Marit de Wit, Doctors without Borders).
| + | |
| − | <br><br>
| + | |
| − | There are also technical aspects that should be considered, like the method used for lysis of the parasites in the sample. Lysis needs to occur to get free DNA, i.e. a hypotonic solution (Jaap van Hellemond, Erasmus University Medical Center Rotterdam: parasitology). If a colorant is used as reporter mechanism, we need to remove the red color of heme groups from red blood cells, too, as it would interfere with the output signal.
| + | |
| − | <br><br>
| + | |
| − | Lastly, we should consider the target DNA we want to use to detect the parasites. Things that require careful consideration are GC-content, which has influence on binding affinity and specificity of the guide RNA. Specificity needs to be mutation specific as a strand with different base pairs should, ideally, not activate the system (Hans Bos and Hugo Snippert, University Medical Center Utrecht: cancer research).
| + | |
| − | <br><br>
| + | |
| − | The design of OUTCASST is shown below. Here you can click on the different numbers, which will guide you through the use of our tool and the reasons behind each step.
| + | |
| − | <br><br>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Toolkit design solutions</h2>
| + | |
| − | | + | |
| − | The OUTCASST toolkit has a closed box design, wherein all the components to perform the test are present in distinct compartments, separated by seals. These seals can be broken by applying pressure on them.
| + | |
| − | <br><br>
| + | |
| − | As was stated earlier, a lot of variables need to be kept constant to keep the HEK293T cells alive. Because of this, it is not feasible to use these cells in our design. Instead, we opt to use air-dried cells from the anhydrobiotic insect, Polypelidum vanderplanki, which can be stored at room temperature for 251 days and can restart proliferating again after rehydration (Watanabe K, Imanishi S, Akiduki G, Cornette R, Okuda T. Air-dried cells from the anhydrobiotic insect, Polypedilum vanderplanki, can survive long term preservation at room temperature and retain proliferation potential after rehydration. Cryobiology. 2016 Aug 31;73(1):93-8). This way the shelf life of our tool can also be prolonged. To prevent the risk of our GMO getting out in the environment, several mechanisms and kill-switches will be incorporated in the cells, so they can only survive in our closed box system, in their resurgent state. This can be done by manipulating the metabolism, so that the cells can’t produce a crucial substance for survival, which will be added in the toolkit medium. In case the cells get out of the toolkit, they will die because of the absence of the crucial substance.
| + | |
| − | <br><br>
| + | |
| − | Rehydration can be done with a suitable medium. This has to be done one hour before use. The seal between the dried insect cells and the medium can be broken to pump the medium manually to the cells. After rehydration, the medium can be manually pumped to the waste compartment.
| + | |
| − | <br><br>
| + | |
| − | The next step is to add the two guide RNA’s to the revived cells. The gRNA’s are present in the design as dry powder to prevent premature degradation. This time, two seals need to be broken. First, the gRNA needs to be dissolved with the contents of another medium compartment. Then the medium with gRNA can be pumped to the cells where they will bind to dCas9 and dCpf1 on the extracellular cell membrane. This process takes about 10 minutes and after that, the medium with excessive gRNA can also be pumped to the waste compartment.
| + | |
| − | <br><br>
| + | |
| − | These were the preparation steps and the real diagnosis can start now. First off, a blood sample has to be taken from a patient that might be infected with Chagas disease. To prevent the blood from clotting, heparin or EDTA can be added to the sample. The blood sample can then be introduced to the tool, after which the device needs to be sealed. To get access to the parasite DNA, all cells need to be lysed, including the red blood cells. This is done with a lysis buffer, a hypotonic solution.
| + | |
| − | <br><br>
| + | |
| − | The next step is to pump everything to a next compartment, wherein there are heme-binding compounds (such as HEBP) linked to the inside surface to decolorize the sample. Then a hypertonic resetting buffer is added to return the sample to isotonic levels, in order to prevent damage to the detector cells.
| + | |
| − | <br><br>
| + | |
| − | Now, the seal separating the sample from the cells can be broken and the sample can be introduced to the actual sensor. A color signal will appear after about 10 to 12 hours in case the patiënt is infected and will continue to become more visible after that.
| + | |
| − | <br><br>
| + | |
| − | The output signal will be a blue chromoprotein. This way, the sample color will become blue (or purple if there is still a little bit of heme in the sample) upon detection of the targeted DNA sequence.
| + | |
| − | <br><br>
| + | |
| − | After use, the tool should be disposed of in a safe manner preventing it to end up in the environment. Therefore, there will be a disposal guideline added in the toolkit manual. The test can be disposed of in a self-sealing bag, which can be boiled after the test is completed to minimize the risks.
| + | |
| − | | + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-3">Additional considerations</h2>
| + | |
| − | | + | |
| − | There are still a lot of things that should be considered to make the OUTCASST tool optimal for diagnosing Chagas disease.
| + | |
| − | <br><br>
| + | |
| − | The first thing we still need to consider is the blood sample size needed to perform the test. From the patiënts aspect it would be best to take as little as possible. A smaller blood sample would also mean that the device can be made smaller, which in turn also makes the production costs for one test cheaper. However, there needs to be enough pathogen DNA in the blood sample to make sure that the test gives the good results. It would be possible to pretreat a larger sample to concentrate it before applying, increasing the chance of correct diagnosis, but this would again require skilled professionals and materials.
| + | |
| − | <br><br>
| + | |
| − | We have also thought about a question that was raised at the University Medical Center at the Cancer department. The question was why we wanted to express our system on the membrane of eukaryotic cells and not just express it intracellularly in bacteria. Then a blood sample could be added and the bacteria can be heat shocked to get the pathogen DNA intracellular, activating the binding of the two proteins. In this case, there would be a loss of the amplification step, since the transcription factor is then able to activate the reporter gene without a signal or cleavage of the transcription factor. Since we don’t know what the minimum amount of blood needed is, we wanted to design it in the way we can get the most signal, which is to include the amplification step. If it would prove that this amplification step is not needed, we could also just put the proteins in the tool and use a split reporter. On the other hand, the tool would not rely on use of living cells, which would make the use of our tool a whole lot safer
| + | |
| − | <br><br>
| + | |
| − | We should also consider the material that the device is going to be made of. It should be of sturdy quality to prevent contamination of the environment with the device’s content. From the production perspective, the costs to produce it should be as low as possible to make the tool affordable. A main issue with costs, currently, is the production of the gRNA as it is expensive to synthesize.
| + | |
| − | <br><br>
| + | |
| − | We have also heard that the tool should have a low incidence of false positive and negative results and that our device should distinguish DNA strands with one different base pair. We want to take this information into account to decide the target DNA. There are two possibilities from which we can choose. The first option would be to permit certain mutations in the target DNA, to prevent getting a false negative result in some cases. The second option would be to use a very conserved domain as target DNA and don’t allow any mismatches. From our perspective, we think the second option would be more suitable, since the specificity in our system is a very valuable aspect of the design. We have chosen to use the satellite DNA, which is present in the T. cruzi parasite as a 195 base pair repeat with about 100,000 copies (Aldert Bart, Academical Medical Center Amsterdam: Clinical molecular parasitologist).
| + | |
| − | | + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-team" type="text/template"><!--
| + | |
| − | <div style="width: 900px; margin-left: -50px;">
| + | |
| − | <div class="teampicture" style="width: 100%;">
| + | |
| − | <img style="width: 100%;" src="https://static.igem.org/mediawiki/2017/0/08/Uuteampic.png">
| + | |
| − | </div>
| + | |
| − | <div style=""></div>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <div>
| + | |
| − | <h2 class="subhead" id="subhead-1" style="margin-bottom: 0; float: left;">iGEM team members</h2>
| + | |
| − | <div style="float: right; font-size: 13px;">
| + | |
| − | Filter: <span id="filter-none" class="filter filter-selected">None</span> | <span id="filter-awesome" class="filter">Awesome people</span>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div style="clear: both;"></div>
| + | |
| − | | + | |
| − | <div class="team_members">
| + | |
| − | <div class="timeline-item">
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -105px;" src="https://static.igem.org/mediawiki/2017/0/03/Uugiel.jpg">
| + | |
| − | <h2>Giel Scheepers</h2>
| + | |
| − | </div>
| + | |
| − | <div class="date">Team captain</div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/4/43/Uuouafa.jpg">
| + | |
| − | <h2>Ouafa Dahri</h2>
| + | |
| − | </div>
| + | |
| − | <div class="date">Team captain</div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -90px;" src="https://static.igem.org/mediawiki/2017/c/c4/Uulishi.jpg">
| + | |
| − | <h2>Lishi Lin</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft" data-awesome="1">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -80px;" src="https://static.igem.org/mediawiki/2017/6/66/Uusam.jpg">
| + | |
| − | <h2>Sam Hariri</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -90px;" src="https://static.igem.org/mediawiki/2017/b/be/Uumerel.jpg">
| + | |
| − | <h2>Merel Janssen</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> ?<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/1/1e/Uupamela.jpg">
| + | |
| − | <h2>Pamela Capendale</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> ?<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/d/d8/Uuali.jpg">
| + | |
| − | <h2>Ali Amghar</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -95px;" src="https://static.igem.org/mediawiki/2017/b/b4/Uudorien.jpg">
| + | |
| − | <h2>Dorien Vinke</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/5/51/Uuleander.jpg">
| + | |
| − | <h2>Leander Goldbach</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/c/ca/Uuquincy.jpg">
| + | |
| − | <h2>Quincy Holzaphfel</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/8/88/Uustefan.jpg">
| + | |
| − | <h2>Stefan Zaharievski</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/f/f2/Uukewin.jpg">
| + | |
| − | <h2>Kewin Ogink</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/c/cb/Uuteun.jpg">
| + | |
| − | <h2>Theun de Kort</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/6/6d/Uurawan.JPG">
| + | |
| − | <h2>Rawan Shekhani</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -75px;" src="https://static.igem.org/mediawiki/2017/a/ae/Uuglenn.JPG">
| + | |
| − | <h2>Glenn Mulder</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi vestibulum egestas turpis vel pulvinar.<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div style="clear: both;"></div>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Supervisors</h2>
| + | |
| − | | + | |
| − | <div class="team_members">
| + | |
| − | <div class="timeline-item">
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -80px;" src="">
| + | |
| − | <h2>Niels Geijsen</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>…<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -80px;" src="team/roos.JPG">
| + | |
| − | <h2>Roos Masereeuw</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>…<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -80px;" src="">
| + | |
| − | <h2>Guido van den Ackerveken</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>…<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − |
| + | |
| − | <div class="timeline-content timeline-card js--fadeInLeft">
| + | |
| − | <div class="timeline-img-header">
| + | |
| − | <img width="100%" style="margin-top: -80px;" src="">
| + | |
| − | <h2>Clara Martinez Mir</h2>
| + | |
| − | </div>
| + | |
| − | <p>
| + | |
| − | <b>Background</b> …<br>
| + | |
| − | <b>Responsibilities</b> …<br>
| + | |
| − | <b>Bio</b><br>…<br>
| + | |
| − | </p>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | </div>
| + | |
| − | | + | |
| − | <script type="text/javascript">
| + | |
| − | $("filter-none").observe("mouseover", function()
| + | |
| − | {
| + | |
| − | if(!this.hasClassName("filter-selected"))
| + | |
| − | this.addClassName("filter-hover");
| + | |
| − | });
| + | |
| − | | + | |
| − | $("filter-none").observe("mouseout", function()
| + | |
| − | {
| + | |
| − | this.removeClassName("filter-hover");
| + | |
| − | });
| + | |
| − | | + | |
| − | $("filter-awesome").observe("mouseover", function()
| + | |
| − | {
| + | |
| − | if(!this.hasClassName("filter-selected"))
| + | |
| − | this.addClassName("filter-hover");
| + | |
| − | });
| + | |
| − | | + | |
| − | $("filter-awesome").observe("mouseout", function()
| + | |
| − | {
| + | |
| − | this.removeClassName("filter-hover");
| + | |
| − | });
| + | |
| − | | + | |
| − | $("filter-none").observe("click", function()
| + | |
| − | {
| + | |
| − | if(!this.hasClassName("filter-selected"))
| + | |
| − | {
| + | |
| − | $("filter-awesome").removeClassName("filter-selected");
| + | |
| − |
| + | |
| − | this.addClassName("filter-selected");
| + | |
| − | this.removeClassName("filter-hover");
| + | |
| − |
| + | |
| − | $$(".timeline-content").each(function(v, k)
| + | |
| − | {
| + | |
| − | v.show();
| + | |
| − | });
| + | |
| − |
| + | |
| − | $("subhead-2").show();
| + | |
| − | }
| + | |
| − | });
| + | |
| − | | + | |
| − | $("filter-awesome").observe("click", function()
| + | |
| − | {
| + | |
| − | if(!this.hasClassName("filter-selected"))
| + | |
| − | {
| + | |
| − | $("filter-none").removeClassName("filter-selected");
| + | |
| − |
| + | |
| − | this.addClassName("filter-selected");
| + | |
| − | this.removeClassName("filter-hover");
| + | |
| − |
| + | |
| − | $$(".timeline-content").each(function(v, k)
| + | |
| − | {
| + | |
| − | if(v.getAttribute("data-awesome"))
| + | |
| − | v.show();
| + | |
| − | else
| + | |
| − | v.hide();
| + | |
| − | });
| + | |
| − |
| + | |
| − | $("subhead-2").hide();
| + | |
| − | }
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <style type="text/css">
| + | |
| − | .team_members { width: 100%; margin-top: 20px; }
| + | |
| − | .team_members .timeline-content { position: relative; width: 30.8%; margin-right: 2.5%; margin-bottom: 6%; float: left; text-align: left; }
| + | |
| − | .team_members .timeline-img-header { height: 175px; overflow: hidden; }
| + | |
| − | .team_members .timeline-item h2 { font-size: 18px;width: 100%;left: 0;padding-left: 20px;padding-top: 7px;bottom: 0;padding-bottom: 7px;background: rgba(0,0,0,0.5);margin-bottom: 0; }
| + | |
| − | .team_members .date { padding: 5px 10px; font-size: 13px; background: #005b9b; }
| + | |
| − | .team_members p { font-size: 13px; }
| + | |
| − | | + | |
| − | .team_members .timeline-content h2 { margin-bottom: 0 !important; }
| + | |
| − | | + | |
| − | .filter { padding: 3px 6px; border-radius: 5px; cursor: pointer; }
| + | |
| − | .filter-hover { background: rgba(0, 91, 155, 0.2); color: black; }
| + | |
| − | .filter-selected { background: #005b9b; color: white; }
| + | |
| − | </style>-->
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-sponsors" type="text/template">
| + | |
| − | <!--
| + | |
| − | <div style="margin: auto; width: 750px;">
| + | |
| − | <div class="page-heading">Our sponsors</div>
| + | |
| − | For our project, we have had the luck of having generous sponsors who either helped us financially, supplied us with material for our lab-work or helped us with other activities.
| + | |
| − | </div>
| + | |
| − | <br><br>
| + | |
| − | <table class="sponsors" width="100%" border="0" style="display: none;">
| + | |
| − | <tr>
| + | |
| − | <td align="center" valign="middle"><img height="85" src="https://static.igem.org/mediawiki/2017/e/e6/Uurivm.png"></td>
| + | |
| − | <td width="360">RIVM is the National Institute for Public Health and the Environment, which belongs to the Ministry of Health, Welfare and Sport of the Dutch government. They offered a sponsorship to the Dutch iGEM teams based on an assignment titled ‘think before you do’, stimulating us to think about the societal implications that our project could have. We submitted a proposal and the RIVM offered us a €1500 grant to further our project.</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td width="360">DSM is a science-based company focusing on health, nutrition and materials to drive sustainable innovation. DSM is active in many different markets, including medicine, energy and food, so developments in synthetic biology are of major interest to them. For our project, they sponsored us with €1000.</td>
| + | |
| − | <td align="center" valign="middle"><img height="85" src="https://static.igem.org/mediawiki/2017/5/5b/Uudsm.jpeg"></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td align="center" valign="middle"><img height="85" src="https://static.igem.org/mediawiki/2017/3/38/Uusnapgene.png"></td>
| + | |
| − | <td>Snapgene is a software company, providing useful software for molecular biology. Snapgene offers fast and reliable software to visualize and design molecular biology experiments such as cloning and PCR experiments. They sponsored us with full team licenses for the Snapgene software, which we have used extensively during our project.</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>eLabjournal is a product by BIO-ITECH BV, a company providing software as a service for research laboratories. Their eLabjournal product offers a simple and effective software environment to keep our lab notes organized and allows easy access wherever and whenever we need it. eLabjournal sponsored us with full team licenses for their software.</td>
| + | |
| − | <td align="center" valign="middle"><img height="75" src="https://static.igem.org/mediawiki/2017/e/e3/Uuelabjournal.png"></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td align="center" valign="middle"><img height="100" src="https://static.igem.org/mediawiki/2017/9/92/Uutakara.jpg"></td>
| + | |
| − | <td>Takara Bio is the biomedical unit of Takara Holdings Inc. and focuses on revolutionary technologies to improve human health. Takara Bio is composed of three units; the Bioindustry division, the AgriBio division and the Gene Therapy division. Takara Bio Europe has offered us a cloning kit and protein purification kit, both of which were frequently used in our experiments.</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>NTrans Technologies is a company based in Utrecht, specializing in delivery of content into cells using the iTOP technology which was developed in the Geijsen lab of the Hubrecht Institute. NTrans offered us guidance and assistance with our project by facilitating a lab technician experienced in the work we had to do for our project. We thank them for Clara Martinez’ amazing assistance and patience with our silly questions.</td>
| + | |
| − | <td align="center" valign="middle"><img height="75" src="https://static.igem.org/mediawiki/2017/b/bb/Uuntrans.png"></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td align="center" valign="middle"><img height="100" src="https://static.igem.org/mediawiki/2017/5/5c/Uuidt.jpg"></td>
| + | |
| − | <td>Integrated DNA Technologies (IDT) is a company focusing on the development and production of products for life sciences, both for research and diagnostic purposes. They are an important supplier of synthetic DNA & RNA, next generation sequencing services and other tools and products for molecular biology. IDT supports us by offering us 20 kb of free custom DNA.</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>MathWorks is the leading company on mathematical computing software. Their two primary products are MATLAB, for the development of algorithms and data-analysis, and Simulink, for designing and running simulations of dynamic, multidomain models. These products are a staple in innovation and development in life sciences as well as other fields. Furthermore, MathWorks’ tools are used in research and educational settings. MathWorks provided us with licenses for their fantastic software and technical support.</td>
| + | |
| − | <td align="center" valign="middle"><img height="75" src="https://static.igem.org/mediawiki/2017/4/43/Uumathworks.png"></td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td align="center" valign="middle"><img height="85" src="https://static.igem.org/mediawiki/2017/2/2a/Uuspeechrepublic.png"></td>
| + | |
| − | <td>SpeechRepublic offers workshops and programs for the development of communication and presentation skills. There are three elements at the center of their methods: being self-confident, inspiring others and having the courage to bring your message across. They offered our team a free workshop on presenting for four team members. This helps us greatly in preparing for our upcoming presentations, specifically the presentation at the Jamboree in Boston.</td>
| + | |
| − | </tr>
| + | |
| − | <tr>
| + | |
| − | <td>New England BioLabs is a company that develops and produces reagents for life sciences research. They offer a wide range of products for molecular biology. They have been generous to many iGEM teams over the years, and supported our team as well this year with a DNA assembly kit.</td>
| + | |
| − | <td align="center" valign="middle"><img height="85" src="https://static.igem.org/mediawiki/2017/d/db/Uubiolabs.png"></td>
| + | |
| − | </tr>
| + | |
| − | </table>
| + | |
| − | | + | |
| − | <div style="width: 750px; margin: auto;">
| + | |
| − | <div style="width: 175px; float: left; text-align: center; line-height: 100px; font-size: 100px; user-select: none;">
| + | |
| − | <div onclick="jQuery('.sponsors_slider').slick('slickPrev')" style="cursor: pointer;">‹</div>
| + | |
| − | </div>
| + | |
| − | <div class="slider_for" style="float: left; width: 400px;">
| + | |
| − | <div><b>Utrecht University is a Dutch public university with over 50.000 students.</b> As our home university, they were our first sponsor. They have helped us generously with great financial support, meeting space, PR-facilities and the opportunity to use several labspaces on campus.</div>
| + | |
| − | <div><b>RIVM is the National Institute for Public Health and the Environment, which belongs to the Ministry of Health, Welfare and Sport of the Dutch government.</b> They offered a sponsorship to the Dutch iGEM teams based on an assignment titled ‘think before you do’, stimulating us to think about the societal implications that our project could have. We submitted a proposal and the RIVM offered us a €1500 grant to further our project.</div>
| + | |
| − | <div><b>DSM is a science-based company focusing on health, nutrition and materials to drive sustainable innovation.</b> DSM is active in many different markets, including medicine, energy and food, so developments in synthetic biology are of major interest to them. For our project, they sponsored us with €1000.</div>
| + | |
| − | <div><b>Takara Bio is the biomedical unit of Takara Holdings Inc. and focuses on revolutionary technologies to improve human health.</b> Takara Bio is composed of three units; the Bioindustry division, the AgriBio division and the Gene Therapy division. Takara Bio Europe has offered us a cloning kit and protein purification kit, both of which were frequently used in our experiments.</div>
| + | |
| − | <div><b>Snapgene is a software company, providing useful software for molecular biology.</b> Snapgene offers fast and reliable software to visualize and design molecular biology experiments such as cloning and PCR experiments. They sponsored us with full team licenses for the Snapgene software, which we have used extensively during our project.</div>
| + | |
| − | <div><b>eLabjournal is a product by BIO-ITECH BV, a company providing software as a service for research laboratories.</b> Their eLabjournal product offers a simple and effective software environment to keep our lab notes organized and allows easy access wherever and whenever we need it. eLabjournal sponsored us with full team licenses for their software.</div>
| + | |
| − | <div><b>NTrans Technologies specializes in the delivery of content into cells using the iTOP technology which was developed in the Geijsen lab of the Hubrecht Institute.</b> NTrans offered us guidance and assistance with our project by facilitating a lab technician experienced in the work we had to do for our project. We thank them for Clara Martinez’ amazing assistance and patience with our silly questions.</div>
| + | |
| − | <div><b>Integrated DNA Technologies (IDT) is a company focusing on the development and production of products for life sciences, both for research and diagnostic purposes.</b> They are an important supplier of synthetic DNA & RNA, next generation sequencing services and other tools and products for molecular biology. IDT supports us by offering us 20 kb of free custom DNA.</div>
| + | |
| − | <div><b>MathWorks is the leading company on mathematical computing software.</b> Their two primary products are MATLAB, for the development of algorithms and data-analysis, and Simulink, for designing and running simulations of dynamic, multidomain models. These products are a staple in innovation and development in life sciences as well as other fields. Furthermore, MathWorks’ tools are used in research and educational settings. MathWorks provided us with licenses for their fantastic software and technical support.</div>
| + | |
| − | <div><b>SpeechRepublic offers workshops and programs for the development of communication and presentation skills.</b> There are three elements at the center of their methods: being self-confident, inspiring others and having the courage to bring your message across. They offered our team a free workshop on presenting for four team members. This helps us greatly in preparing for our upcoming presentations, specifically the presentation at the Jamboree in Boston.</div>
| + | |
| − | <div><b>New England BioLabs is a company that develops and produces reagents for life sciences research.</b> They offer a wide range of products for molecular biology. They have been generous to many iGEM teams over the years, and supported our team as well this year with a DNA assembly kit.</div>
| + | |
| − | </div>
| + | |
| − | <div style="width: 175px; float: left; text-align: center; line-height: 100px; font-size: 100px; user-select: none;">
| + | |
| − | <div onclick="jQuery('.sponsors_slider').slick('slickNext')" style="cursor: pointer;">›</div>
| + | |
| − | </div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div style="clear: both;"></div>
| + | |
| − | | + | |
| − | <div class="sponsors_slider" style="width: 100%;">
| + | |
| − | <div style="width: 150px;"><img src="https://static.igem.org/mediawiki/2017/e/e0/Uu17logo.png"></div>
| + | |
| − | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/e/e6/Uurivm.png"></div>
| + | |
| − | <div style="width: 250px;"><img src="https://static.igem.org/mediawiki/2017/5/5b/Uudsm.jpeg"></div>
| + | |
| − | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/9/92/Uutakara.jpg"></div>
| + | |
| − | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/3/38/Uusnapgene.png"></div>
| + | |
| − | <div style="width: 275px;"><img src="https://static.igem.org/mediawiki/2017/e/e3/Uuelabjournal.png"></div>
| + | |
| − | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/b/bb/Uuntrans.png"></div>
| + | |
| − | <div style="width: 250px;"><img src="https://static.igem.org/mediawiki/2017/5/5c/Uuidt.jpg"></div>
| + | |
| − | <div style="width: 300px;"><img src="https://static.igem.org/mediawiki/2017/4/43/Uumathworks.png"></div>
| + | |
| − | <div style="width: 150px;"><img src="https://static.igem.org/mediawiki/2017/2/2a/Uuspeechrepublic.png"></div>
| + | |
| − | <div style="width: 275px;"><img src="https://static.igem.org/mediawiki/2017/d/db/Uubiolabs.png"></div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <script type="text/javascript">
| + | |
| − | window.setTimeout(function(){
| + | |
| − | jQuery('.slider_for').slick({
| + | |
| − | infinite: true,
| + | |
| − | slidesToShow: 1,
| + | |
| − | slidesToScroll: 1,
| + | |
| − | arrows: false,
| + | |
| − | fade: true,
| + | |
| − | asNavFor: '.sponsors_slider'
| + | |
| − | });
| + | |
| − | jQuery('.sponsors_slider').slick({
| + | |
| − | infinite: true,
| + | |
| − | slidesToShow: 6,
| + | |
| − | speed: 300,
| + | |
| − | centerMode: true,
| + | |
| − | variableWidth: true,
| + | |
| − | focusOnSelect: true,
| + | |
| − | arrows: false,
| + | |
| − | asNavFor: ".slider_for"
| + | |
| − | });
| + | |
| − | },1);
| + | |
| − | </script>
| + | |
| − | -->
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script id="page-achievements" type="text/template">
| + | |
| − | <div class="page-heading">Achievements</div>
| + | |
| − | | + | |
| − | Blabla
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | | + | |
| − | <h2 class="subhead" id="subhead-2">Bronze medals</h2>
| + | |
| − | <div class="achievements" style="width: 100%;">
| + | |
| − | <div style="float: left; width: 300px;">
| + | |
| − | <b>Register and attend</b><br>
| + | |
| − | We have registered for and will be attending the 2017 iGEM Jamboree in Boston! Our entire team, consisting of 15 students, 4 PIs and 1 supervisor, will be present.
| + | |
| − | </div>
| + | |
| − | <div style="float: left; width: 300px;">
| + | |
| − | <b>Deliverables</b><br>
| + | |
| − | We have delivered all the required items on the iGEM deliverables page.<br>
| + | |
| − | <ul>
| + | |
| − | <li />Team wiki <a href="">URL</a>
| + | |
| − | <li />Project attribution <a href="">URL</a>
| + | |
| − | <li />Team poster <a href="">URL</a>
| + | |
| − | <li />Safety forms <a href="">URL</a>
| + | |
| − | <li />…
| + | |
| − | </ul>
| + | |
| − | </div>
| + | |
| − | <div style="float: left; width: 300px;">a</div>
| + | |
| − | <div style="float: left; width: 300px;">a</div>
| + | |
| − | <div style="float: left; width: 300px;">a</div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div style="clear: both;"></div>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Silver</h2>
| + | |
| − | <div style="width: 100%;">
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div style="clear: both;"></div>
| + | |
| − | | + | |
| − | <br><br>
| + | |
| − | <h2 class="subhead" id="subhead-2">Gold</h2>
| + | |
| − | <div style="width: 100%;">
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | <div style="float: left; width: 200px;">a</div>
| + | |
| − | </div>
| + | |
| − | | + | |
| − | <div style="clear: both;"></div>
| + | |
| − | | + | |
| − | </script>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | .sponsors_slider img { max-height: 85px; max-width: 200px; margin: auto; }
| + | |
| − | .sponsors_slider div { cursor: pointer; }
| + | |
| − |
| + | |
| − | .achievements>div { margin-right: 50px; margin-bottom: 30px; }
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | <style type="text/css">
| + | |
| − | @import url(https://fonts.googleapis.com/css?family=Open+Sans);
| + | |
| − | | + | |
| − | /* set global font to Open Sans */
| + | |
| − | body {
| + | |
| − | font-family: 'Open Sans', 'sans-serif';
| + | |
| − | overflow: scroll;
| + | |
| − | }
| + | |
| − | | + | |
| − | .btn {
| + | |
| − | border-radius: 5px;
| + | |
| − | padding: 15px 25px;
| + | |
| − | font-size: 22px;
| + | |
| − | text-decoration: none;
| + | |
| − | margin: 20px;
| + | |
| − | color: #fff;
| + | |
| − | position: relative;
| + | |
| − | display: inline-block;
| + | |
| − | }
| + | |
| − | | + | |
| − | .btn:active {
| + | |
| − | transform: translate(0px, 5px);
| + | |
| − | -webkit-transform: translate(0px, 5px);
| + | |
| − | box-shadow: 0px 1px 0px 0px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .blue {
| + | |
| − | background-color: #55acee;
| + | |
| − | box-shadow: 0px 5px 0px 0px #3C93D5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .blue:hover {
| + | |
| − | background-color: #6FC6FF;
| + | |
| − | }
| + | |
| − | | + | |
| − | .sponsors img { padding-right: 20px; }
| + | |
| − | .sponsors td { font-size: 13px; border-bottom: 2px solid #f3f3f3; padding-top: 35px; padding-bottom: 35px; }
| + | |
| − | .sponsors tr:last-child td { border-bottom: 0; }
| + | |
| − | </style>
| + | |
| − |
| + | |
| − | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
| + | |
| − | <script src='https://cdn3.devexpress.com/jslib/17.1.3/js/dx.all.js'></script>
| + | |
| − | <script type="text/javascript">
| + | |
| − | $.noConflict();
| + | |
| − | | + | |
| − | function getPos(el)
| + | |
| − | {
| + | |
| − | for (var lx=0, ly=0;
| + | |
| − | el != null;
| + | |
| − | lx += el.offsetLeft, ly += el.offsetTop, el = el.offsetParent);
| + | |
| − | return {x: lx,y: ly};
| + | |
| − | }
| + | |
| − |
| + | |
| − | jQuery( window ).scroll(function() {
| + | |
| − | var sel_subhead = 1;
| + | |
| − |
| + | |
| − | jQuery(".subhead").each(function(k, v)
| + | |
| − | {
| + | |
| − | var key = v.id.split("-")[1];
| + | |
| − |
| + | |
| − | var pos = getPos(v);
| + | |
| − |
| + | |
| − | if(jQuery(window).scrollTop() + 200 >= pos.y)
| + | |
| − | {
| + | |
| − | sel_subhead = key;
| + | |
| − | }
| + | |
| − | else if(Math.ceil(jQuery(window).scrollTop() + jQuery(window).height()) >= jQuery(document).height())
| + | |
| − | {
| + | |
| − | if(key == 3)
| + | |
| − | {
| + | |
| − | sel_subhead = key;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − | jQuery(".menu-container .item").each(function(k, v)
| + | |
| − | {
| + | |
| − | var key = v.getAttribute("data-key");
| + | |
| − |
| + | |
| − | if(key == sel_subhead)
| + | |
| − | jQuery(v).addClass("active");
| + | |
| − | else
| + | |
| − | jQuery(v).removeClass("active");
| + | |
| − | });
| + | |
| − | });
| + | |
| − |
| + | |
| − | jQuery(function(){
| + | |
| − | for(var i = 1; i <= 4; i++)
| + | |
| − | {
| + | |
| − | var position = "left";
| + | |
| − | var showEvent = "";
| + | |
| − |
| + | |
| − | if(i == 2 || i == 4)
| + | |
| − | {
| + | |
| − | position = "right";
| + | |
| − | showEvent = "";
| + | |
| − | }
| + | |
| − |
| + | |
| − | var title;
| + | |
| − |
| + | |
| − | if(i == 1)
| + | |
| − | title = "Guide RNA";
| + | |
| − | else if(i == 2)
| + | |
| − | title = "DNA binding";
| + | |
| − | else if(i == 3)
| + | |
| − | title = "Signal transduction";
| + | |
| − | else if(i == 4)
| + | |
| − | title = "Signal transduction";
| + | |
| − |
| + | |
| − | jQuery("#popover-" + i).dxPopover({
| + | |
| − | target: "#link-" + i,
| + | |
| − | showEvent: showEvent,
| + | |
| − | hideEvent: "",
| + | |
| − | position: position,
| + | |
| − | width: 300,
| + | |
| − | showTitle: true,
| + | |
| − | title: title
| + | |
| − | }).dxPopover("instance");
| + | |
| − | }
| + | |
| − |
| + | |
| − | jQuery("#link-1").click(function()
| + | |
| − | {
| + | |
| − | jQuery("#popover-1").dxPopover("show");
| + | |
| − | jQuery("#link-1").removeClass("pulsing");
| + | |
| − | });
| + | |
| − |
| + | |
| − | jQuery('body').on('click', 'a', function(event) {
| + | |
| − | var id = event.target.id;
| + | |
| − |
| + | |
| − | if(id == "goto-2")
| + | |
| − | {
| + | |
| − | jQuery("#link-1").removeClass("selected");
| + | |
| − | jQuery("#popover-1").dxPopover("hide");
| + | |
| − | jQuery("#popover-2").dxPopover("show");
| + | |
| − | jQuery("#link-2").addClass("selected");
| + | |
| − | jQuery("#figure-1").fadeOut("5");
| + | |
| − | jQuery("#figure-2").fadeIn("5");
| + | |
| − | }
| + | |
| − | else if(id == "goto-3")
| + | |
| − | {
| + | |
| − | jQuery("#link-2").removeClass("selected");
| + | |
| − | jQuery("#popover-2").dxPopover("hide");
| + | |
| − | jQuery("#popover-3").dxPopover("show");
| + | |
| − | jQuery("#link-3").addClass("selected");
| + | |
| − | jQuery("#figure-2").fadeOut("5");
| + | |
| − | jQuery("#figure-3").fadeIn("5");
| + | |
| − | }
| + | |
| − | else if(id == "goto-4")
| + | |
| − | {
| + | |
| − | jQuery("#link-3").removeClass("selected");
| + | |
| − | jQuery("#popover-3").dxPopover("hide");
| + | |
| − | jQuery("#popover-4").dxPopover("show");
| + | |
| − | jQuery("#link-4").addClass("selected");
| + | |
| − | jQuery("#figure-3").fadeOut("5");
| + | |
| − | jQuery("#figure-4").fadeIn("5");
| + | |
| − | }
| + | |
| − | });
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.2.0/prototype.js"></script>
| + | |
| − | <script src="https://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js"></script>
| + | |
| − | | + | |
| − | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
| + | |
| − | | + | |
| − | <script type="text/javascript">
| + | |
| − | var page_menus = {
| + | |
| − | "home" : {
| + | |
| − | 1: "Intro",
| + | |
| − | 2: "The problem",
| + | |
| − | 3: "The system",
| + | |
| − | },
| + | |
| − | "secretion" : {
| + | |
| − | 1: "Secretion",
| + | |
| − | 2: "Introduction",
| + | |
| − | 3: "Methods",
| + | |
| − | 4: "Results",
| + | |
| − | 5: "Discussion"
| + | |
| − | },
| + | |
| − | "mesa-replication" : {
| + | |
| − | 1: "MESA replication",
| + | |
| − | 2: "Introduction",
| + | |
| − | 3: "Materials",
| + | |
| − | 4: "Methods",
| + | |
| − | 5: "Results",
| + | |
| − | 6: "Discussion",
| + | |
| − | 7: "Supplementary",
| + | |
| − | },
| + | |
| − | "outcasst" : {
| + | |
| − | 1: "OUTCASST system production",
| + | |
| − | 2: "Introduction",
| + | |
| − | 3: "Materials",
| + | |
| − | 4: "Methods",
| + | |
| − | 5: "Results",
| + | |
| − | 6: "Discussion"
| + | |
| − | },
| + | |
| − | "modeling-and-mathematics" : {
| + | |
| − | 1: "Modeling and Mathematics",
| + | |
| − | 2: "Optimization of the protease cleavage rate",
| + | |
| − | 3: "Optimization of protein production rates",
| + | |
| − | },
| + | |
| − | "interlab-study" : {
| + | |
| − | 1: "InterLab Study 2017",
| + | |
| − | 2: "Introduction",
| + | |
| − | 3: "Materials",
| + | |
| − | 4: "Methods",
| + | |
| − | 5: "Results",
| + | |
| − | 6: "Discussion",
| + | |
| − | },
| + | |
| − | "stakeholders" : {},
| + | |
| − | "safety" : {
| + | |
| − | 1: "OUTCASST Safety information",
| + | |
| − | 2: "Safety",
| + | |
| − | 3: "Societal impact",
| + | |
| − | 4: "Ethical issues",
| + | |
| − | },
| + | |
| − | "product-design" : {
| + | |
| − | 1: "Integrated human practices: design of…",
| + | |
| − | 2: "Toolkit design solutions",
| + | |
| − | 3: "Additional considerations",
| + | |
| − | },
| + | |
| − | "team" : {
| + | |
| − | 1: "Students",
| + | |
| − | 2: "Supervisors"
| + | |
| − | },
| + | |
| − | "sponsors" : {},
| + | |
| − | "achievements" : {
| + | |
| − | 1: "Bronze medals",
| + | |
| − | 2: "Silver medals",
| + | |
| − | 3: "Gold medals"
| + | |
| − | }
| + | |
| − | };
| + | |
| − | | + | |
| − | function move_underline(element)
| + | |
| − | {
| + | |
| − | var width = element.getWidth();
| + | |
| − | var height = element.getHeight();
| + | |
| − | var offset = element.cumulativeOffset();
| + | |
| − |
| + | |
| − | var line = $$(".menu-underline")[0];
| + | |
| − |
| + | |
| − | line.style.top = (offset.top + height - 19) + "px";
| + | |
| − | line.style.left = offset.left + "px";
| + | |
| − | line.style.width = width + "px";
| + | |
| − | }
| + | |
| − | | + | |
| − | function change_page(page)
| + | |
| − | {
| + | |
| − | if(typeof page_menus[page] !== "undefined")
| + | |
| − | {
| + | |
| − | var menu = page_menus[page];
| + | |
| − |
| + | |
| − | var menu_container = $$(".menu-container")[0];
| + | |
| − |
| + | |
| − | var new_html = "";
| + | |
| − |
| + | |
| − | if(Object.keys(menu).length > 0)
| + | |
| − | {
| + | |
| − | new_html = new_html + "<div style='position: absolute; left: 13px; top: 10px; height: " + (35 * (Object.keys(menu).length - 1)) + "px; width: 2px; background: #0096ff; z-index: -1;'></div>";
| + | |
| − |
| + | |
| − | $H(menu).each(function(pair)
| + | |
| − | {
| + | |
| − | new_html = new_html + "<div class='item' data-key='" + pair.key + "'><div class='marker'><div></div></div><div class='text'>" + pair.value + "</div></div>";
| + | |
| − | });
| + | |
| − | }
| + | |
| − |
| + | |
| − | menu_container.update(new_html);
| + | |
| − | }
| + | |
| − |
| + | |
| − | $$("body")[0].setAttribute("data-page", page);
| + | |
| − |
| + | |
| − | var page_container = $$(".page-content")[0];
| + | |
| − | var page_content = $("page-" + page);
| + | |
| − |
| + | |
| − | page_container.update(page_content.innerHTML.replace("<!--","").replace("-->",""));
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].removeClassName("active");
| + | |
| − | $$(".menu-container")[0].removeClassName("active");
| + | |
| − | }
| + | |
| − | | + | |
| − | document.observe("dom:loaded", function()
| + | |
| − | {
| + | |
| − | move_underline($$(".top-menu-links li")[0]);
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].observe("mouseover", function()
| + | |
| − | {
| + | |
| − | this.addClassName("active");
| + | |
| − | $$(".menu-container")[0].addClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].observe("mouseout", function()
| + | |
| − | {
| + | |
| − | this.removeClassName("active");
| + | |
| − | $$(".menu-container")[0].removeClassName("active");
| + | |
| − | });
| + | |
| − | | + | |
| − | $$(".top-menu")[0].on("click", ".section", function(event, element)
| + | |
| − | {
| + | |
| − | var title = element.select(".text")[0].innerHTML;
| + | |
| − | var page = element.getAttribute("data-url");
| + | |
| − |
| + | |
| − | //history.pushState({}, title, page);
| + | |
| − |
| + | |
| − | change_page(page);
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].on("mouseover", ".section", function(event, element)
| + | |
| − | {
| + | |
| − | element.addClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].on("mouseout", ".section", function(event, element)
| + | |
| − | {
| + | |
| − | element.removeClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu-links")[0].on("click", "li", function(event, element)
| + | |
| − | {
| + | |
| − | var page = element.getAttribute("data-url");
| + | |
| − |
| + | |
| − | if(page != "")
| + | |
| − | {
| + | |
| − | var title = page;
| + | |
| − |
| + | |
| − | change_page(page);
| + | |
| − |
| + | |
| − | if(page == "home")
| + | |
| − | page = "/";
| + | |
| − |
| + | |
| − | //history.pushState({}, title, page);
| + | |
| − | }
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".top-menu-links")[0].on("mouseover", "li", function(event, element)
| + | |
| − | {
| + | |
| − | move_underline(element);
| + | |
| − |
| + | |
| − | $$(".top-menu")[0].setAttribute("data-key", element.getAttribute("data-key"));
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".menu-container")[0].on("mouseover", ".item", function(event, element)
| + | |
| − | {
| + | |
| − | element.addClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | $$(".menu-container")[0].on("mouseout", ".item", function(event, element)
| + | |
| − | {
| + | |
| − | element.removeClassName("active");
| + | |
| − | });
| + | |
| − |
| + | |
| − | Event.observe(window, "scroll", function()
| + | |
| − | {
| + | |
| − | var pos_y = 125 - window.scrollY;
| + | |
| − |
| + | |
| − | if(pos_y < 75)
| + | |
| − | pos_y = 75;
| + | |
| − |
| + | |
| − | //$$(".menu-container")[0].style.top = pos_y + "px";
| + | |
| − | });
| + | |
| − | });
| + | |
| − | </script>
| + | |
| − | | + | |
| − | <style class="cp-pen-styles">
| + | |
| − | .shuffle-container .aspect:hover { opacity: 1; }
| + | |
| − | | + | |
| − | .timeline h1 {
| + | |
| − | font-size: 200%;
| + | |
| − | text-transform: uppercase;
| + | |
| − | letter-spacing: 3px;
| + | |
| − | font-weight: 400;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline header {
| + | |
| − | background: #3F51B5;
| + | |
| − | color: #FFFFFF;
| + | |
| − | padding: 150px 0;
| + | |
| − | }
| + | |
| − | .timeline header p {
| + | |
| − | font-family: 'Allura';
| + | |
| − | color: rgba(255, 255, 255, 0.2);
| + | |
| − | margin-bottom: 0;
| + | |
| − | font-size: 60px;
| + | |
| − | margin-top: -30px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline {
| + | |
| − | position: relative;
| + | |
| − | }
| + | |
| − | .timeline::before {
| + | |
| − | content: '';
| + | |
| − | background: #C5CAE9;
| + | |
| − | width: 5px;
| + | |
| − | height: 95%;
| + | |
| − | position: absolute;
| + | |
| − | left: 50%;
| + | |
| − | transform: translateX(-50%);
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline .timeline-item {
| + | |
| − | width: 100%;
| + | |
| − | margin-bottom: 70px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(even) .timeline-content {
| + | |
| − | float: right;
| + | |
| − | padding: 40px 30px 10px 30px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(even) .timeline-content .date {
| + | |
| − | right: auto;
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(even) .timeline-content::after {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | border-style: solid;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | top: 30px;
| + | |
| − | left: -15px;
| + | |
| − | border-width: 10px 15px 10px 0;
| + | |
| − | border-color: transparent #f5f5f5 transparent transparent;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item::after {
| + | |
| − | content: '';
| + | |
| − | display: block;
| + | |
| − | clear: both;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline .timeline-content {
| + | |
| − | position: relative;
| + | |
| − | width: 45%;
| + | |
| − | padding: 10px 30px;
| + | |
| − | border-radius: 4px;
| + | |
| − | background: #f5f5f5;
| + | |
| − | box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.3);
| + | |
| − | }
| + | |
| − | .timeline .timeline-content::after {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | border-style: solid;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | top: 30px;
| + | |
| − | right: -15px;
| + | |
| − | border-width: 10px 0 10px 15px;
| + | |
| − | border-color: transparent transparent transparent #f5f5f5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline .timeline-img {
| + | |
| − | width: 30px;
| + | |
| − | height: 30px;
| + | |
| − | background: #3F51B5;
| + | |
| − | border-radius: 50%;
| + | |
| − | position: absolute;
| + | |
| − | left: 50%;
| + | |
| − | margin-top: 25px;
| + | |
| − | margin-left: -15px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline a {
| + | |
| − | background: #3F51B5;
| + | |
| − | color: #FFFFFF;
| + | |
| − | padding: 8px 20px;
| + | |
| − | text-transform: uppercase;
| + | |
| − | font-size: 14px;
| + | |
| − | margin-bottom: 20px;
| + | |
| − | margin-top: 10px;
| + | |
| − | display: inline-block;
| + | |
| − | border-radius: 2px;
| + | |
| − | box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
| + | |
| − | }
| + | |
| − | .timeline a:hover, a:active, a:focus {
| + | |
| − | background: #32408f;
| + | |
| − | color: #FFFFFF;
| + | |
| − | text-decoration: none;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline-card {
| + | |
| − | padding: 0 !important;
| + | |
| − | }
| + | |
| − | .timeline-card p {
| + | |
| − | padding: 0 20px;
| + | |
| − | }
| + | |
| − | .timeline-card a {
| + | |
| − | margin-left: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline-item .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1458530970867-aaa3700e966d") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(5) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1444093826349-9ce8c622f4f3") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(6) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1471479917193-f00955256257") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(8) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1466840787022-48e0ec048c8a") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(10) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1447639703758-f525f36456bf") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | .timeline-item:nth-child(11) .timeline-img-header {
| + | |
| − | background: linear-gradient(transparent, rgba(0, 0, 0, 0.4)), url("https://hd.unsplash.com/photo-1469429978400-082eec725ad5") center center no-repeat;
| + | |
| − | background-size: cover;
| + | |
| − | }
| + | |
| − | | + | |
| − | .timeline-img-header {
| + | |
| − | height: 200px;
| + | |
| − | position: relative;
| + | |
| − | margin-bottom: 20px;
| + | |
| − | }
| + | |
| − | .timeline-img-header h2 {
| + | |
| − | color: #FFFFFF;
| + | |
| − | position: absolute;
| + | |
| − | bottom: 5px;
| + | |
| − | left: 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | blockquote {
| + | |
| − | margin-top: 30px;
| + | |
| − | color: #757575;
| + | |
| − | border-left-color: #3F51B5;
| + | |
| − | padding: 0 20px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .date {
| + | |
| − | background: #FF4081;
| + | |
| − | display: inline-block;
| + | |
| − | color: #FFFFFF;
| + | |
| − | padding: 10px;
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | @media screen and (max-width: 768px) {
| + | |
| − | .timeline::before {
| + | |
| − | left: 50px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-img {
| + | |
| − | left: 50px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-content {
| + | |
| − | max-width: 100%;
| + | |
| − | width: auto;
| + | |
| − | margin-left: 70px;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(even) .timeline-content {
| + | |
| − | float: none;
| + | |
| − | }
| + | |
| − | .timeline .timeline-item:nth-child(odd) .timeline-content::after {
| + | |
| − | content: '';
| + | |
| − | position: absolute;
| + | |
| − | border-style: solid;
| + | |
| − | width: 0;
| + | |
| − | height: 0;
| + | |
| − | top: 30px;
| + | |
| − | left: -15px;
| + | |
| − | border-width: 10px 15px 10px 0;
| + | |
| − | border-color: transparent #f5f5f5 transparent transparent;
| + | |
| − | }
| + | |
| − | }
| + | |
| − | | + | |
| − | /* quick grid */
| + | |
| − | .shuffle-container {
| + | |
| − | width: 93%;
| + | |
| − | margin: auto;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Bootstrap-style columns */
| + | |
| − | .shuffle-container .column {
| + | |
| − | position: relative;
| + | |
| − | float: left;
| + | |
| − | min-height: 1px;
| + | |
| − | width: 25%;
| + | |
| − | padding-left: 4px;
| + | |
| − | padding-right: 4px;
| + | |
| − |
| + | |
| − | /* Space between tiles */
| + | |
| − | margin-top: 8px;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .col-span {
| + | |
| − | width: 50%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .my-sizer-element {
| + | |
| − | width: 8.33333%;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* default styles so shuffle doesn't have to set them (it will if they're missing) */
| + | |
| − | .shuffle-container .my-shuffle {
| + | |
| − | position: relative;
| + | |
| − | overflow: hidden;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Ensure images take up the same space when they load */
| + | |
| − | /* https://vestride.github.io/Shuffle/images */
| + | |
| − | .shuffle-container .aspect {
| + | |
| − | position: relative;
| + | |
| − | width: 100%;
| + | |
| − | height: 0;
| + | |
| − | padding-bottom: 100%;
| + | |
| − | overflow: hidden;
| + | |
| − | opacity: 0.5;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .aspect__inner {
| + | |
| − | position: absolute;
| + | |
| − | top: 0;
| + | |
| − | right: 0;
| + | |
| − | bottom: 0;
| + | |
| − | left: 0;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .aspect--16x9 {
| + | |
| − | padding-bottom: 56.25%;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .aspect--9x80 {
| + | |
| − | padding-bottom: calc(112.5% + 8px);
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container .aspect--32x9 {
| + | |
| − | padding-bottom: calc(28.125% - 3px);
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container img {
| + | |
| − | display: block;
| + | |
| − | width: 100%;
| + | |
| − |
| + | |
| − | max-width: none;
| + | |
| − | height: 100%;
| + | |
| − | -o-object-fit: cover;
| + | |
| − | object-fit: cover;
| + | |
| − | }
| + | |
| − | | + | |
| − | /* Small reset */
| + | |
| − | .shuffle-container *,
| + | |
| − | .shuffle-container ::before,
| + | |
| − | .shuffle-container ::after {
| + | |
| − | box-sizing: border-box;
| + | |
| − | }
| + | |
| − | | + | |
| − | .shuffle-container figure {
| + | |
| − | margin: 0;
| + | |
| − | padding: 0;
| + | |
| − | }</style>
| + | |
| − | | + | |
| − | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Shuffle/5.0.2/shuffle.min.js"></script>
| + | |
| − | <script type="text/javascript">
| + | |
| − | /*var Shuffle = window.Shuffle;
| + | |
| − | | + | |
| − | var myShuffle = new Shuffle(document.querySelector('.my-shuffle'), {
| + | |
| − | itemSelector: '.js-item',
| + | |
| − | sizer: '.my-sizer-element',
| + | |
| − | buffer: 1,
| + | |
| − | });*/
| + | |
| − | </script>
| + | |
| − | | + | |
| − | </body>
| + | |
| − | </html>
| + | |
