Difference between revisions of "Team:Sydney Australia/Design"

Line 3: Line 3:
  
 
<head>
 
<head>
−
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+
 
−
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+
 
   <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 
   <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
 
   <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
 
   <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
−
<style>  
+
<script>
−
body {
+
$(document).ready(function() {
−
   *background-color:#e2e2e2;  
+
    $('.link1').on('click', function() {
−
}
+
$( this ).toggleClass( "selected" );
−
/* our special font */
+
$('.link2').removeClass('selected');
−
@font-face {
+
$('.link3').removeClass('selected');
−
     font-family: 'banaue';
+
        $('.link4').removeClass('selected');     
−
    src: url('https://static.igem.org/mediawiki/2017/b/b0/T--Sydney_Australia--Wiki_Font_Banaue-Regular.Media-File.ogg');
+
        $('.link5').removeClass('selected');    
−
    font-weight: normal;
+
        $(".box1").toggle('slow');
−
    font-style: large;
+
        $(".box1_arrow").toggle('slow');
−
}
+
        $(".box2").hide();
−
 
+
        $(".box3").hide();
−
#please h1 {
+
        $(".box4").hide(); 
−
font-family: "banaue", sans-serif;  
+
        $(".box5").hide();
−
color: #3e3f3f;
+
        $(".box2_arrow").hide();       
−
font-size: 60px;
+
        $(".box3_arrow").hide();         
−
}
+
        $(".box4_arrow").hide();         
−
 
+
        $(".box5_arrow").hide();   
−
#please h4 {
+
});
−
  font-family: 'Quicksand', sans-serif;
+
     $('.link2').on('click', function() {
−
color: #3e3f3f;
+
$( this ).toggleClass( "selected" );
−
  font-size: 16px;
+
$('.link1').removeClass('selected');
−
   LINE-HEIGHT:20px;
+
$('.link3').removeClass('selected');
 +
        $('.link4').removeClass('selected');      
 +
        $('.link5').removeClass('selected');  
 +
        $(".box2").toggle('slow');
 +
        $(".box2_arrow").toggle('slow');
 +
        $(".box1").hide();
 +
        $(".box3").hide();  
 +
        $(".box4").hide();
 +
        $(".box5").hide();  
 +
        $(".box1_arrow").hide();       
 +
        $(".box3_arrow").hide();         
 +
        $(".box4_arrow").hide();         
 +
        $(".box5_arrow").hide();
 +
});
 +
    $('.link3').on('click', function() {
 +
$( this ).toggleClass( "selected" );
 +
$('.link2').removeClass('selected');
 +
$('.link1').removeClass('selected');
 +
        $('.link4').removeClass('selected');     
 +
        $('.link5').removeClass('selected');    
 +
        $(".box3").toggle('slow');
 +
        $(".box3_arrow").toggle('slow');
 +
        $(".box2").hide();
 +
        $(".box1").hide();
 +
        $(".box4").hide(); 
 +
        $(".box5").hide(); 
 +
        $(".box1_arrow").hide(); 
 +
        $(".box2_arrow").hide();                 
 +
        $(".box4_arrow").hide();         
 +
        $(".box5_arrow").hide();          
 
    
 
    
−
}
+
});
 +
    $('.link4').on('click', function() {
 +
$( this ).toggleClass( "selected" );
 +
$('.link2').removeClass('selected');
 +
$('.link3').removeClass('selected');
 +
        $('.link1').removeClass('selected');     
 +
        $('.link5').removeClass('selected'); 
 +
        $(".box4").toggle('slow');
 +
        $(".box4_arrow").toggle('slow');
 +
        $(".box2").hide();
 +
        $(".box3").hide();
 +
        $(".box1").hide(); 
 +
        $(".box5").hide();
 +
        $(".box1_arrow").hide(); 
 +
        $(".box2_arrow").hide();       
 +
        $(".box3_arrow").hide();                     
 +
        $(".box5_arrow").hide();   
 +
});
 +
    $('.link5').on('click', function() {
 +
$( this ).toggleClass( "selected" );
 +
$('.link2').removeClass('selected');
 +
$('.link3').removeClass('selected');
 +
        $('.link4').removeClass('selected');     
 +
        $('.link1').removeClass('selected'); 
 +
        $(".box5").toggle('slow');
 +
        $(".box5_arrow").toggle('slow');
 +
        $(".box2").hide();
 +
        $(".box3").hide();
 +
        $(".box4").hide(); 
 +
        $(".box1").hide();
 +
        $(".box1_arrow").hide(); 
 +
        $(".box2_arrow").hide();       
 +
        $(".box3_arrow").hide();         
 +
        $(".box4_arrow").hide();           
 +
});
 +
    $('.BB-prefix').on('click', function() {
 +
$('.BB-prefix' ).toggleClass( "selected" );
 +
$('.BB-suffix').removeClass('selected');
 +
$('.rbs').removeClass('selected');
 +
        $('.yncm').removeClass('selected');     
 +
        $('.his').removeClass('selected');
 +
$('.tev').removeClass('selected');
 +
        $('.winsulin').removeClass('selected');     
 +
        $('.proinsulin').removeClass('selected');
 +
        $('.arg').removeClass('selected'); 
 +
        $('.ecotin').removeClass('selected');             
 +
        $(".BBprefix_info").fadeToggle('slow');
 +
        $(".RBS_info").hide(); 
 +
        $(".YNCM_info").hide();       
 +
        $(".HIS_info").hide();         
 +
        $(".TEV_info").hide();
 +
        $(".ARG_info").hide();         
 +
        $(".BBsuffix_info").hide(); 
 +
        $(".ecotin_info").hide();                               
 +
});
 +
    $('.BB-suffix').on('click', function() {
 +
$('.BB-suffix' ).toggleClass( "selected" );
 +
$('.BB-prefix').removeClass('selected');
 +
$('.rbs').removeClass('selected');
 +
        $('.yncm').removeClass('selected');     
 +
        $('.his').removeClass('selected');
 +
$('.tev').removeClass('selected');
 +
        $('.winsulin').removeClass('selected');     
 +
        $('.proinsulin').removeClass('selected');
 +
        $('.arg').removeClass('selected'); 
 +
        $('.ecotin').removeClass('selected');             
 +
        $(".BBsuffix_info").fadeToggle('slow');
 +
        $(".RBS_info").hide(); 
 +
        $(".YNCM_info").hide();       
 +
        $(".HIS_info").hide();         
 +
        $(".TEV_info").hide();
 +
        $(".ARG_info").hide();         
 +
        $(".BBprefix_info").hide(); 
 +
        $(".ecotin_info").hide();                               
 +
});
 +
    $('.rbs').on('click', function() {
 +
$('.rbs' ).toggleClass( "selected" );
 +
$('.BB-suffix').removeClass('selected');
 +
$('.BB-prefix').removeClass('selected');
 +
        $('.yncm').removeClass('selected');     
 +
        $('.his').removeClass('selected');
 +
$('.tev').removeClass('selected');
 +
        $('.winsulin').removeClass('selected');     
 +
        $('.proinsulin').removeClass('selected');
 +
        $('.arg').removeClass('selected'); 
 +
        $('.ecotin').removeClass('selected');             
 +
        $(".RBS_info").fadeToggle('slow');
 +
        $(".BBprefix_info").hide(); 
 +
        $(".YNCM_info").hide();       
 +
        $(".HIS_info").hide();         
 +
        $(".TEV_info").hide();
 +
        $(".ARG_info").hide();         
 +
        $(".BBsuffix_info").hide(); 
 +
        $(".ecotin_info").hide();                               
 +
});
 +
    $('.yncm').on('click', function() {
 +
$('.yncm' ).toggleClass( "selected" );
 +
$('.BB-suffix').removeClass('selected');
 +
$('.rbs').removeClass('selected');
 +
        $('.BB-prefix').removeClass('selected');     
 +
        $('.his').removeClass('selected');
 +
$('.tev').removeClass('selected');
 +
        $('.winsulin').removeClass('selected');     
 +
        $('.proinsulin').removeClass('selected');
 +
        $('.arg').removeClass('selected'); 
 +
        $('.ecotin').removeClass('selected');             
 +
        $(".YNCM_info").fadeToggle('slow');
 +
        $(".RBS_info").hide(); 
 +
        $(".BBprefix_info").hide();       
 +
        $(".HIS_info").hide();         
 +
        $(".TEV_info").hide();
 +
        $(".ARG_info").hide(); 
 +
        $(".box2_arrow").hide();       
 +
        $(".BBsuffix_info").hide(); 
 +
        $(".ecotin_info").hide();                               
 +
});
 +
    $('.his').on('click', function() {
 +
$('.his' ).toggleClass( "selected" );
 +
$('.BB-suffix').removeClass('selected');
 +
$('.rbs').removeClass('selected');
 +
        $('.yncm').removeClass('selected');     
 +
        $('.BB-prefix').removeClass('selected');
 +
$('.tev').removeClass('selected');
 +
        $('.winsulin').removeClass('selected');     
 +
        $('.proinsulin').removeClass('selected');
 +
        $('.arg').removeClass('selected'); 
 +
        $('.ecotin').removeClass('selected');             
 +
        $(".HIS_info").fadeToggle('slow');
 +
        $(".RBS_info").hide(); 
 +
        $(".YNCM_info").hide();       
 +
        $(".BBprefix_info").hide();         
 +
        $(".TEV_info").hide();
 +
        $(".ARG_info").hide(); 
 +
        $(".box2_arrow").hide();       
 +
        $(".BBsuffix_info").hide();
 +
        $(".ecotin_info").hide();                                 
 +
});
 +
    $('.tev').on('click', function() {
 +
$('.tev' ).toggleClass( "selected" );
 +
$('.BB-suffix').removeClass('selected');
 +
$('.rbs').removeClass('selected');
 +
        $('.yncm').removeClass('selected');     
 +
        $('.his').removeClass('selected');
 +
$('.BB-prefix').removeClass('selected');
 +
        $('.winsulin').removeClass('selected');     
 +
        $('.proinsulin').removeClass('selected');
 +
        $('.arg').removeClass('selected'); 
 +
        $('.ecotin').removeClass('selected');             
 +
        $(".TEV_info").fadeToggle('slow');
 +
        $(".RBS_info").hide(); 
 +
        $(".YNCM_info").hide();       
 +
        $(".HIS_info").hide();         
 +
        $(".BBprefix_info").hide();
 +
        $(".ARG_info").hide(); 
 +
        $(".box2_arrow").hide();       
 +
        $(".BBsuffix_info").hide(); 
 +
        $(".ecotin_info").hide();                               
 +
});
 +
    $('.arg').on('click', function() {
 +
$('.arg' ).toggleClass( "selected" );
 +
$('.BB-suffix').removeClass('selected');
 +
$('.rbs').removeClass('selected');
 +
        $('.yncm').removeClass('selected');     
 +
        $('.his').removeClass('selected');
 +
$('.tev').removeClass('selected');
 +
        $('.BB-prefix').removeClass('selected');     
 +
        $('.proinsulin').removeClass('selected');
 +
        $('.BB-suffix').removeClass('selected'); 
 +
        $('.ecotin').removeClass('selected');             
 +
        $(".ARG_info").fadeToggle('slow');
 +
        $(".RBS_info").hide(); 
 +
        $(".YNCM_info").hide();       
 +
        $(".HIS_info").hide();         
 +
        $(".TEV_info").hide();
 +
        $(".BBprefix_info").hide(); 
 +
        $(".box2_arrow").hide();       
 +
        $(".BBsuffix_info").hide();
 +
        $(".ecotin_info").hide();                                 
 +
});
 +
    $('.ecotin').on('click', function() {
 +
$('.ecotin' ).toggleClass( "selected" );
 +
$('.BB-suffix').removeClass('selected');
 +
$('.rbs').removeClass('selected');
 +
        $('.yncm').removeClass('selected');     
 +
        $('.his').removeClass('selected');
 +
$('.tev').removeClass('selected');
 +
        $('.winsulin').removeClass('selected');     
 +
        $('.proinsulin').removeClass('selected');
 +
        $('.arg').removeClass('selected'); 
 +
        $('.BB-prefix').removeClass('selected');             
 +
        $(".ecotin_info").fadeToggle('slow');
 +
        $(".RBS_info").hide(); 
 +
        $(".YNCM_info").hide();       
 +
        $(".HIS_info").hide();         
 +
        $(".TEV_info").hide();
 +
        $(".ARG_info").hide(); 
 +
        $(".box2_arrow").hide();       
 +
        $(".BBsuffix_info").hide(); 
 +
        $(".BBprefix_info").hide();                               
 +
});
 +
});
  
−
#please p {
+
</script>
−
  font-family: 'Quicksand', sans-serif;
+
−
color: #3e3f3f;
+
  
 +
<style>
 +
h2 {
 +
font-family: "banaue", sans-serif;
 +
color: #3e3f3f;
 +
font-size: 60px;
 +
text-align:center;
 +
 
}
 
}
  
−
#please h3 {
+
.divider1 {
−
  font-family: 'quicksand', sans-serif;
+
width:70%;
−
color: #3e3f3f;
+
height:10px;
−
 
+
background-color: #fad990;
 +
margin-left:15%;
 
}
 
}
−
 
+
.divider2 {
−
#please h2 {
+
width:70%;
−
  font-family: 'Quicksand', sans-serif;
+
height:10px;
−
color: #a2cca3;
+
background-color: #c1808e;
−
font-size: 20.8px;
+
margin-left:15%;
−
 
+
 
}
 
}
−
 
+
h4, ul li {
−
#please h5 {
+
font-family: "Quicksand", sans-serif;
−
  font-family: 'Quicksand', sans-serif;
+
color: #3e3f3f;
−
color: #3e3f3f;
+
font-size: 20px;
−
font-size: 22px;
+
text-align:center;
 +
}
 +
h6 {
 +
font-family: "Quicksand", sans-serif;
 +
color: #3e3f3f;
 +
font-size: 30px;
 +
text-align:center;
 +
}
 +
h5 {
 +
font-family: "Quicksand", sans-serif;  
 +
color: #3e3f3f;
 +
font-size: 20px;
 +
text-align:left;
 +
}
 +
h3 {
 +
font-family: "Quicksand", sans-serif;
 +
color: #3e3f3f;
 +
font-size: 30px;
 +
text-align:center;
 +
}
 +
.para_container {
 +
padding: 0 10% 2% 10%;
 
}
 
}
  
−
#please h6 {
+
.link {
−
   font-family: 'Quicksand', sans-serif;
+
   border-radius: 50%;
−
color: #3e3f3f;
+
  width: 100%;
−
font-size: 20px;
+
  padding-bottom: 100%;
−
 
+
  background-repeat: no-repeat;
 +
  background-position: center;
 +
  background-color:#e2e2e2;
 +
  background-size: 95%;
 +
  box-shadow: -5px 5px  rgba(175,175,175,0.9);
 +
  -moz-box-shadow: -5px 5px  rgba(175,175,175,0.9);
 +
  -webkit-box-shadow: -5px 5px  rgba(175,175,175,0.9);
 +
  -o-box-shadow: -5px 5px  rgba(175,175,175,0.9);
 +
  }
 +
 
 +
 
 +
   
 +
.link1 {
 +
  background-image: url("https://static.igem.org/mediawiki/2017/6/67/T--Sydney_Australia--design_button1.png");
 
}
 
}
−
 
+
.link4 {
−
 
+
  background-image: url("https://static.igem.org/mediawiki/2017/b/bd/T--Sydney_Australia--design_button2.png");
−
.insert2 {
+
−
  height: 100px;
+
−
  width: 100%
+
−
  background-color:#fff;
+
 
}
 
}
−
 
+
.link2 {
−
 
+
  background-image: url("https://static.igem.org/mediawiki/2017/4/4e/T--Sydney_Australia--design_button3.png");
−
.insert3 {
+
−
  height: 20px;
+
−
  width: 100%
+
−
  background-color:#fff;
+
 
}
 
}
−
 
+
.link3 {
−
 
+
   background-image: url("https://static.igem.org/mediawiki/2017/a/a6/T--Sydney_Australia--design_button4.png");
−
 
+
−
.container {
+
−
   border:4px dotted;
+
−
  border-color:#e2e2e2;
+
 
}
 
}
−
 
+
.link5 {
−
.boxes1 {
+
   background-image: url("https://static.igem.org/mediawiki/2017/2/2e/T--Sydney_Australia--design_button5.png");
−
   background:#fff;
+
−
  border:4px solid;
+
−
  border-color: #0098a8;
+
−
  margin-top: 10px;
+
−
  box-sizing: border-box;
+
−
  border-radius: 5px;
+
−
  background-clip: padding-box;
+
−
  padding:0 10px 10px 10px;
+
−
  min-height:300px;
+
−
  width:500px
+
 
}
 
}
  
−
.boxes2 {
+
.link.selected {
−
   background:#fff;
+
   box-shadow: 0px 0px  rgba(157,138,46,0.9);
−
   border:4px dotted;
+
   -moz-box-shadow: 0px 0px  rgba(157,138,46,0.9);
−
  border-color: #0098a8;
+
   -webkit-box-shadow: 0px 0px  rgba(157,138,46,0.9);
−
   margin-top: 10px;
+
   -o-box-shadow: 0px 0px  rgba(157,138,46,0.9);
−
   box-sizing: border-box;
+
   margin-top: 5px;
−
   border-radius: 5px;
+
   margin-left:-5px;
−
   background-clip: padding-box;
+
   margin-bottom:-5px;
−
   padding:0 10px 10px 10px;
+
−
  min-height:300px;
+
−
  width:500px
+
 
}
 
}
  
−
.boxes3 {
+
.box1, .box2,.box3,.box4,.box5, .box1_arrow, .box2_arrow, .box3_arrow, .box4_arrow, .box5_arrow {display:none;}
−
  background:#fff;
+
.box1 {width:80%;min-height:10vh;padding:2%; background-color:#fada92;margin-left:10%;border-radius:5px;}
−
  border:4px solid;
+
.box2 {width:80%;min-height:10vh;padding:5%; background-color:#c1808e;margin-left:10%;border-radius:5px;}
−
  border-color: #c1808e;
+
.box3 {width:80%;min-height:10vh;padding:5%; background-color:#93bcc1;margin-left:10%;border-radius:5px;}
−
  margin-top: 10px;
+
.box4 {width:80%;min-height:10vh;padding:5%; background-color:#afe0b2;margin-left:10%;border-radius:5px;}
−
  box-sizing: border-box;
+
.box5 {width:80%;min-height:10vh;padding:5%; background-color:#a696ea;margin-left:10%;border-radius:5px;}
−
  border-radius: 5px;
+
−
  background-clip: padding-box;
+
−
  padding:0 10px 10px 10px;
+
−
  min-height:300px;
+
−
  width:500px
+
−
}
+
  
−
.boxes4 {
+
.box1_arrow {
−
   background:#fff;
+
   width: 0;  
−
   border:4px dotted;
+
   height: 0;  
−
   border-color: #c1808e;
+
   border-left: 10px solid transparent;
−
   margin-top: 10px;
+
   border-right: 10px solid transparent;
−
   box-sizing: border-box;
+
   border-bottom: 20px solid #fada92;
−
  border-radius: 5px;
+
   margin-left:15%;
−
   background-clip: padding-box;
+
−
  padding:0 10px 10px 10px;
+
−
  min-height:300px;
+
−
  width:500px
+
 
}
 
}
−
 
+
.box2_arrow {
−
.boxes5 {
+
   width: 0;  
−
   background:#fff;
+
   height: 0;  
−
   border:4px solid;
+
   border-left: 10px solid transparent;
−
   border-color: #afe0b2;
+
   border-right: 10px solid transparent;
−
   margin-top: 10px;
+
   border-bottom: 20px solid #c1808e;
−
   box-sizing: border-box;
+
   margin-left:31.5%;
−
  border-radius: 5px;
+
−
   background-clip: padding-box;
+
−
  padding:0 10px 10px 10px;
+
−
  min-height:300px;
+
−
  width:500px
+
 
}
 
}
−
 
+
.box3_arrow {
−
 
+
  width: 0;  
−
hr {  
+
  height: 0;  
−
    display: block;
+
  border-left: 10px solid transparent;
−
    margin-top: 0.5em;
+
  border-right: 10px solid transparent;
−
    margin-bottom: 0.5em;
+
  border-bottom: 20px solid #93bcc1;
−
    margin-left: auto;
+
  margin-left:48%;
−
    margin-right: auto;
+
−
    border-style: inset;
+
−
    border-width: 4px;
+
−
    border:2px solid red;
+
 
}
 
}
−
 
+
.box4_arrow {
−
.insert {
+
  width: 0;
−
  height: 68px;
+
  height: 0;  
−
  width: 100%
+
  border-left: 10px solid transparent;
−
  background-color:#e2e2e2;
+
  border-right: 10px solid transparent;
 +
  border-bottom: 20px solid #afe0b2;
 +
  margin-left:65%;
 
}
 
}
−
 
+
.box5_arrow {
−
.insert2 {
+
  width: 0;
−
  height: 150px;
+
  height: 0;  
−
  width: 100%
+
  border-left: 10px solid transparent;
−
  background-color:#fff;
+
  border-right: 10px solid transparent;
 +
  border-bottom: 20px solid #a696ea;
 +
  margin-left:82%;
 
}
 
}
  
 +
.construct_container {padding:5%;}
  
−
.snip1506, .snip1507, .snip1508, .snip1509 {
+
.BB-prefix, .BB-suffix { width:90px;background-color:#e7e6e6;}
−
  font-family: Quicksand, sans-serif;
+
.rbs {width:90px;background-color:#eaa1a8;}
−
  position: relative;
+
.yncm {width:220px; background-color:#fadda2;}
−
  float: left;
+
.his {width:90px;background-color:#a396c6;}
−
  margin: 10px 1%;
+
.tev {width:70px;background-color:#f1ccf0;}
−
  max-width: 1200px;
+
.winsulin {width:220px;background-color:#b0dfb3;}
−
  width: 100%;
+
.divider {width:20px;}
−
  text-align: left;
+
.proinsulin {width:260px;background-color:#c1faff;}
−
  line-height: 1.4em;
+
.arg {width:30px;background-color:#96c6ca;}
−
  font-size: 20px;
+
.ecotin {width:220px; background-color:#ffae7b;}
−
  box-shadow: none !important;
+
.element {
 +
height:30px;
 +
display:inline-block;
 +
text-align: center;
 +
vertical-align: middle;
 +
line-height: 30px;  
 +
font-family:'Quicksand' ;
 +
font-size:16px;
 +
color:#3e3f3f;
 +
overflow:hidden;
 
}
 
}
−
 
+
.BB-prefix.selected, .BB-suffix.selected, .rbs.selected, .yncm.selected, .his.selected, .tev.selected, .winsulin.selected, .proinsulin.selected, .arg.selected, .ecotin.selected {text-decoration:underline;}
−
.sni<h4 style="color:#3e3f3f;" p1506 * {
+
.construct_1, .construct_2 {
−
  -webkit-box-sizing: border-box;
+
width:95%;
−
  box-sizing: border-box;
+
display:flex;
 +
flex-direction:row;
 +
flex-wrap:nowrap;
 +
justify-content:space-evenly
 +
align-items:center;
 +
align-content:stretch;
 +
position:relative;
 
}
 
}
  
−
.snip1507 * {
 
−
  -webkit-box-sizing: border-box;
 
−
  box-sizing: border-box;
 
−
}
 
  
−
.snip1508 * {
+
.construct_3, .construct_4 {
−
  -webkit-box-sizing: border-box;
+
width:100%;
−
  box-sizing: border-box;
+
display:flex;
 +
flex-direction:row;
 +
flex-wrap:nowrap;
 +
justify-content:space-evenly
 +
align-items:center;
 +
align-content:stretch;
 +
position:relative;
 
}
 
}
  
−
.snip1509 * {
+
.construct_5, .construct_6 {
−
  -webkit-box-sizing: border-box;
+
width:70%;
−
  box-sizing: border-box;
+
display:flex;
 +
flex-direction:row;
 +
flex-wrap:nowrap;
 +
justify-content:space-evenly
 +
align-items:center;
 +
align-content:stretch;
 +
position:relative;
 
}
 
}
  
−
.snip1506 .profile-image, .snip1507 .profile-image, .snip1508 .profile-image, .snip1509 .profile-image {
+
/*.construct_1:after {
−
  width: 26%;
+
margin-top:5%;margin-left:10%;margin-right:10%;
 +
position: absolute; 
 +
display: inline-block;
 +
left:0;
 +
right:0;
 +
height: 3px;
 +
content: '';
 +
background-color: #3e3f3f;
 +
z-index:-1;
 +
}*/
 +
.construct_1_line, .construct_2_line {
 +
width:85%;
 +
height:3px;
 +
background-color: #3e3f3f;
 +
margin-left:5%;
 +
margin-top:-42.5px;
 +
z-index:1;
 
}
 
}
−
 
+
.construct_3_line, .construct_4_line {
−
.snip1506 .profile-image img, .snip1507 .profile-image img, .snip1508 .profile-image img, .snip1509 .profile-image img {
+
width:90%;
−
  border-radius: 5px;
+
height:3px;
−
  max-width: 100%;
+
background-color: #3e3f3f;
−
  vertical-align: top;
+
margin-left:5%;
 +
margin-top:-42.5px;
 +
z-index:1;
 
}
 
}
−
.snip1506 .profile-image,
+
.construct_5_line, .construct_6_line  {
−
.snip1506 figcaption, .snip1507 .profile-image,
+
width:60%;
−
.snip1507 figcaption, .snip1508 .profile-image,
+
height:3px;
−
.snip1508 figcaption, .snip1509 .profile-image,
+
background-color: #3e3f3f;
−
.snip1509 figcaption {
+
margin-left:5%;
−
  float: left;
+
margin-top:-42.5px;
−
}
+
z-index:1;
−
.snip1506 figcaption, .snip1507 figcaption, .snip1508 figcaption {
+
−
  width: 70%;
+
−
  background-color: #fada92;
+
−
  color: #fff;
+
−
  padding: 20px;
+
−
  display: inline-block;
+
−
  margin-left: 4%;
+
−
  border-radius: 5px;
+
 
}
 
}
  
−
.snip1507 figcaption {
+
.arrow-right {
−
   background-color: #c1808e;
+
   width: 0;
 +
  height: 0;
 +
  border-top: 28px solid transparent;
 +
  border-bottom: 28px solid transparent;
 +
  position:relative;
 +
  bottom:13px;
 +
 
 +
 
 
}
 
}
−
 
+
.yncm-arrow {border-left: 22.5px solid #fadda2;}
−
.snip1508 figcaption {
+
.his-arrow {border-left: 22.5px solid #a396c6;}
−
  width: 70%;
+
.tev-arrow {border-left: 22.5px solid #f1ccf0;}
−
  background-color: #93bcc1;
+
.winsulin-arrow {border-left: 22.5px solid #b0dfb3;}
−
  color: #fff;
+
.arg-arrow {border-left: 22.5px solid #96c6ca;}
−
  padding: 25px;
+
.proinsulin-arrow {border-left: 22.5px solid #c1faff;}
−
  display: inline-block;
+
.ecotin-arrow {border-left: 22.5px solid #ffae7b;}
−
  margin-left: 4%;
+
.element_text:hover {
−
  border-radius: 5px;
+
   text-decoration:underline;
−
}
+
−
+
−
.snip1509 figcaption {
+
−
  width: 70%;
+
−
  background-color: #afe0b2;
+
−
  color: #fff;
+
−
  padding: 25px;
+
−
  display: inline-block;
+
−
  margin-left: 4%;
+
−
   border-radius: 5px;
+
 
}
 
}
 +
.filler {height:30px;}
  
−
.snip1506 figcaption:after, .snip1507 figcaption:after, .snip1508 figcaption:after, .snip1509 figcaption:after {
+
.element_info_box_container {
−
  content: '';
+
width:95%;
−
  position: absolute;
+
height:90vh;
−
  right: 70%;
+
overflow:scroll;
−
  top: 30px;
+
background-color:#e2e2e2;
−
  width: 0;
+
border-radius:20px;
−
  height: 0;
+
margin-top:55px;
−
  border-style: solid;
+
−
  border-width: 10px 10px 10px 0;
+
−
  border-color: transparent #fada92 transparent transparent;
+
−
}
+
−
 
+
−
.snip1507 figcaption:after {
+
−
  border-color: transparent #c1808e
+
−
    transparent transparent;
+
−
}
+
−
 
+
−
.snip1508 figcaption:after {
+
−
  border-color: transparent #93bcc1
+
−
    transparent transparent;
+
−
}
+
−
 
+
−
.snip1509 figcaption:after {
+
−
  border-color: transparent #afe0b2
+
−
    transparent transparent;
+
−
}
+
−
 
+
−
.snip1510 {
+
−
  font-family: Quicksand, sans-serif;
+
−
  position: relative;
+
−
  float: left;
+
−
  margin: 10px 1%;
+
−
  max-width: 1200px;
+
−
  width: 100%;
+
−
  text-align: left;
+
−
  line-height: 1.4em;
+
−
  font-size: 20px;
+
−
  box-shadow: none !important;
+
−
}
+
−
.snip1510 * {
+
−
  -webkit-box-sizing: border-box;
+
−
  box-sizing: border-box;
+
−
}
+
−
.snip1510 .profile-image {
+
−
  width: 26%;
+
 
}
 
}
−
.snip1510 .profile-image img {
+
.info_box {padding:10%;display:none;}
−
  border-radius: 5px;
+
−
  max-width: 100%;
+
−
  vertical-align: top;
+
−
}
+
−
.snip1510 .profile-image,
+
−
.snip1510 figcaption {
+
−
  float: left;
+
−
}
+
−
.snip1510 figcaption {
+
−
  width: 70%;
+
−
  background-color: #a696ea;
+
−
  color: #fff;
+
−
  padding: 25px;
+
−
  display: inline-block;
+
−
  margin-left: 4%;
+
−
  border-radius: 5px;
+
−
}
+
−
.snip1510 figcaption:after {
+
−
  content: '';
+
−
  position: absolute;
+
−
  right: 70%;
+
−
  top: 30px;
+
−
  width: 0;
+
−
  height: 0;
+
−
  border-style: solid;
+
−
  border-width: 10px 10px 10px 0;
+
−
  border-color: transparent #a696ea transparent transparent;
+
−
}
+
−
.banner {
+
−
  width: 80%;
+
−
image-rendering: -moz-crisp-edges;
+
−
image-rendering: -o-crisp-edges;
+
−
image-rendering: -webkit-optimize-contrast;
+
−
-ms-interpolation-mode: nearest-neighbor;
+
−
}
+
−
 
+
−
.content {
+
−
  padding:0px;
+
−
  width:80%;
+
−
  margin-top: 0px;
+
−
  margin-left:10%;  
+
−
  margin-right:10%;
+
−
}
+
−
 
+
−
.box1, .box2, .box3, .box4, .box5 {
+
−
  background:#fad990;
+
−
  border:0px solid;
+
−
  border-color: #fad990;
+
−
  margin-top: 10px;
+
−
  box-sizing: border-box;
+
−
  background-clip: padding-box;
+
−
  padding:0 10px 10px 10px;
+
−
  max-height:2px;
+
−
  min-width:800px;
+
−
}
+
−
 
+
−
.box2 {
+
−
  background:#e8939c;
+
−
  border-color: #e8939c;
+
−
}
+
−
 
+
−
.box3 {
+
−
  background:#93bcc0;
+
−
  border-color: #93bcc0;
+
−
}
+
−
 
+
−
.box4 {
+
−
  background:#bf9ae2;
+
−
  border-color: #bf9ae2;
+
−
}
+
−
 
+
−
.box5 {
+
−
  background:#9bbb46;
+
−
  border-color: #9bbb46;
+
−
}
+
−
 
+
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
 
+
<div class="container-fluid">
−
<div class = "insert">
+
<div class= "row" style="background-color:#e2e2e2;margin-top:63px;">
 +
      <img class="img-center center-block"src="https://static.igem.org/mediawiki/2017/a/af/T--Sydney_Australia--ProjectDesignBanner.gif" width = "65%" class = "banner">
 
</div>
 
</div>
  
−
<!-- Banner-->
+
<div class = "row" >
−
 
+
<div class="para_container">
 +
<h2>Our Key Goals</h2>
 +
<div class = "divider1"></div>
 +
<br>
  
−
<div class= "row" style="background-color:#e2e2e2">
+
<h4>The aim of the USYD iGEM 2017 team was to address the problem of insulin inaccessibility. The design of our insulin, and its means of expression, needed to look at five key characteristics:</h4>
−
<div class = "content">
+
−
      <center><img src="https://static.igem.org/mediawiki/2017/a/af/T--Sydney_Australia--ProjectDesignBanner.gif" width = "80%" class = "banner"></center>
+
 
</div>
 
</div>
 
</div>
 
</div>
  
−
<div class = "row goals" id="please">
+
<div class="row" style="padding: 0 0 25px 0;" id="buttons">
−
<div class = "content">
+
<div class="col-xs-1">
−
<center><h1>Our Key Goals</h1></center>  
+
</div>
−
<div class = "box1"></div>
+
<div class="col-xs-2">
−
<br>
+
<div class="link link1">
−
 
+
</div>
−
<center><h4>The aim of the USYD iGEM 2017 team was to address the problem of insulin inaccessibility. The design of our insulin, and its means of expression, needed to look at five key characteristics:</h4></center>  
+
</div>
−
 
+
<div class="col-xs-2">
 +
<div class="link link2">
 +
</div>
 +
</div>
 +
<div class="col-xs-2">
 +
<div class="link link3">
 +
</div>
 +
</div>
 +
<div class="col-xs-2">
 +
<div class="link link4">
 +
</div>
 +
</div>
 +
<div class="col-xs-2">
 +
<div class="link link5">
 +
</div>
 +
</div>
 +
<div class="col-xs-1">
 
</div>
 
</div>
 
</div>
 
</div>
  
−
<div class="row" id = "please">
+
<div class="row" id="boxes">
−
<div class = "content">
+
<div class="box_container">
−
<figure class="snip1506">
+
<div class="box1_arrow">
−
  <div class="profile-image"><img class = "banner" src="https://static.igem.org/mediawiki/2017/e/e9/T--Sydney_Australia--PDFire.gif"/>
+
</div>
−
  </div>
+
<div class="box1">
−
  <figcaption>
+
 
     <h3>Stability</h3>
 
     <h3>Stability</h3>
−
     <h5>For our project to work effectively, we must have a supply chain that’s not a cold chain, so that costs can be reduced. This will ultimately mean that the cost of these cold chains will not be passed onto the consumer. To achieve this, we hope to design an insulin that will not lose efficacy after being exposed to room temperature for long periods of time.
+
     <h4>For our project to work effectively, we must have a supply chain that’s not a cold chain, so that costs can be reduced. This will ultimately mean that the cost of these cold chains will not be passed onto the consumer. To achieve this, we hope to design an insulin that will not lose efficacy after being exposed to room temperature for long periods of time.</h4>
−
</h5>
+
 
−
  </figcaption>
+
</div>
−
</figure>
+
<div class="box2_arrow">
−
<figure class="snip1507">
+
</div>
−
  <div class="profile-image"><img class = "banner" src="https://static.igem.org/mediawiki/2017/4/4c/T--Sydney_Australia--PDSingleStrand.gif"/>
+
<div class="box2">
−
  </div>
+
−
  <figcaption>
+
 
     <h3>Single Chained</h3>
 
     <h3>Single Chained</h3>
−
     <h5>As a result of the difficult purification methods, Single Chain Insulins, or SCIs for short, have been developed with a small, C-peptide chain linker. This linker connects the A and B chains in such a way that the di-sulfide bonds form more favorably. We aim to develop our own single chain insulin to compare it’s simplicity.
+
     <h4>As a result of the difficult purification methods, Single Chain Insulins, or SCIs for short, have been developed with a small, C-peptide chain linker. This linker connects the A and B chains in such a way that the di-sulfide bonds form more favorably. We aim to develop our own single chain insulin to compare it’s simplicity.
−
</h5>
+
</h4>
−
  </figcaption>
+
 
−
</figure>
+
</div>
−
<figure class="snip1508">
+
<div class="box3_arrow">
−
  <div class="profile-image"><img class = "banner" src="https://static.igem.org/mediawiki/2017/a/a0/T--Sydney_Australia--PDMoney.gif"/>
+
 
−
  </div>
+
</div>
−
  <figcaption>
+
<div class="box3">
 
     <h3>Ease of Purification and Affordaility</h3>
 
     <h3>Ease of Purification and Affordaility</h3>
−
     <h5>We must also consider the impact of a difficult, costly manufacturing process on small scale manufacturing companies. This impact is too great to impose on this grass-roots organisations, so we have pursued to find a cheap, simple purification method which is able to produce high yields from a recombinant system.   
+
     <h4>We must also consider the impact of a difficult, costly manufacturing process on small scale manufacturing companies. This impact is too great to impose on this grass-roots organisations, so we have pursued to find a cheap, simple purification method which is able to produce high yields from a recombinant system.   
−
</h5>
+
</h4>
−
  </figcaption>
+
 
−
</figure>
+
</div>
−
<figure class="snip1509">
+
<div class="box4_arrow">
−
  <div class="profile-image"><img class = "banner" src="https://static.igem.org/mediawiki/2017/0/06/T--Sydney_Australia--PDWeighs.gif"/>
+
</div>
−
  </div>
+
<div class="box4">
−
  <figcaption>
+
 
     <h3>Intellectual Property Issues</h3>
 
     <h3>Intellectual Property Issues</h3>
−
     <h5>As a result of the way drugs are currently developed, all new inventions for therapies are protected by Intellectual Property Law through patents. These patents surrounding all currently prescribed and newly invented insulins has inspired our team to pursue a completely open source project.  
+
     <h4>As a result of the way drugs are currently developed, all new inventions for therapies are protected by Intellectual Property Law through patents. These patents surrounding all currently prescribed and newly invented insulins has inspired our team to pursue a completely open source project.  
−
</h5>
+
</h4>
−
  </figcaption>
+
 
−
</figure>
+
</div>
−
<figure class="snip1510">
+
<div class="box5_arrow">
−
  <div class="profile-image"><img class = "banner" src="https://static.igem.org/mediawiki/2017/2/22/T--Sydney_Australia--PDSafety.gif"/>
+
</div>
−
  </div>
+
<div class="box5">
−
  <figcaption>
+
 
     <h3>Safety and Efficacy</h3>
 
     <h3>Safety and Efficacy</h3>
−
     <h5>Our insulin products must be of certifiable medical grade such that it can be approved for human use after stage IV clinical trials, or biosimilar clinical trials. Furthermore, it must also be at least as effective as the other insulins on the market.  
+
     <h4>Our insulin products must be of certifiable medical grade such that it can be approved for human use after stage IV clinical trials, or biosimilar clinical trials. Furthermore, it must also be at least as effective as the other insulins on the market.  
−
</h5>
+
</h4>
−
  </figcaption>
+
</div>
−
</figure>
+
 
</div>
 
</div>
 
</div>
 
</div>
  
−
 
+
<div class = "row" id="constructs-intro">
−
<div class= "row">  
+
<div class="para_container">
−
<div class= "content" id = "please">
+
<h2>Our Constructs</h2>
−
<center><h1> Our Constructs</h1></center>
+
<div class = "divider2"></div>
−
<div class = "box2"></div>
+
<br>
 +
<h4>We designed our expression constructs in order to meet these goals. Click on each element of the construct to learn more about <b>why</b> we chose them:</h4>
 
</div>
 
</div>
 
</div>
 
</div>
  
 +
<div class = "row" id="constructs" >
 +
<div class="col-xs-8">
 +
<div class="construct_container">
  
−
<div class= "row">  
+
<div class="construct_1_caption">
−
<div class= "content" id = "please">
+
<h5> Winsulin secreted by B. subtilis </h5>
−
<center><h1> Our Expression Systems:</h1></center>
+
−
<div class = "box3"></div>
+
−
</div>
+
 
</div>
 
</div>
 +
<div class="construct_1">
 +
 +
<div class="BB-prefix element"><p class="element_text"> BB prefix</p></div><div class="divider"></div>
 +
 +
<div class="rbs element"><p class="element_text">RBS</p></div><div class="divider"></div>
 +
 +
<div class="yncm element"><p class="element_text">YNCM Tag</p></div><div class="yncm-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="his element"><p class="element_text">His Tag</p></div><div class="his-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="tev element"><p class="element_text">TEV</p></div><div class="tev-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="winsulin element"><p class="element_text">Winsulin</p></div><div class="winsulin-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="BB-suffix element"><p class="element_text">BB suffix</p></div>
  
−
<div class = "row insert2" id="please">
 
−
<div class = "content">
 
−
<center><h4>In order to maximise the yield of our insulin, while also reducing the post-expression purification methods currently undertaken by manufactuers, we will be trialling both of these constructs in three different expression systems. Two of these expression systems will be in BL21 <i>E. coli</i>, and the other will be in <i>Bacillus subtilis.</i></h4></center>
 
 
</div>
 
</div>
 +
<div class="construct_1_line"></div>
 +
<div class="filler"></div>
 +
<div class="construct_2_caption">
 +
<h5> Proinsulin secreted by B. subtilis </h5>
 
</div>
 
</div>
 +
<div class="construct_2">
 +
 +
<div class="BB-prefix element"><p class="element_text"> BB prefix</p></div><div class="divider"></div>
 +
 +
<div class="rbs element"><p class="element_text">RBS</p></div><div class="divider"></div>
 +
 +
<div class="yncm element"><p class="element_text">YNCM Tag</p></div><div class="yncm-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="his element"><p class="element_text">His Tag</p></div><div class="his-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="arg element"><p class="element_text">R</p></div><div class="arg-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="proinsulin element"><p class="element_text">Proinsulin</p></div><div class="proinsulin-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="BB-suffix element"><p class="element_text">BB suffix</p></div>
  
−
<div class= "row insert3">
 
 
</div>
 
</div>
 +
<div class="construct_2_line"></div>
  
−
<div class = "row" id="please">
+
<div class="filler"></div>
−
<div class = "content">
+
<div class="construct_3_caption">
−
<div class = "col-xs-6">
+
<h5> Winsulin targeted to the periplasm of E. coli </h5>
−
<center><h4><i>E. coli</i> Cytoplasmic Expression</h4></center>
+
 
</div>
 
</div>
−
<div class = "col-xs-6">
+
<div class="construct_3">
−
<center><h4><i>E. coli</i> Periplasmic Expression</h4></center>
+
 
 +
<div class="BB-prefix element"><p class="element_text"> BB prefix</p></div><div class="divider"></div>
 +
 
 +
<div class="rbs element"><p class="element_text">RBS</p></div><div class="divider"></div>
 +
 
 +
<div class="ecotin element"><p class="element_text">Ecotin Tag</p></div><div class="ecotin-arrow arrow-right"></div><div class="divider"></div>
 +
 
 +
<div class="his element"><p class="element_text">His Tag</p></div><div class="his-arrow arrow-right"></div><div class="divider"></div>
 +
 
 +
<div class="tev element"><p class="element_text">TEV</p></div><div class="tev-arrow arrow-right"></div><div class="divider"></div>
 +
 
 +
<div class="winsulin element"><p class="element_text">Winsulin</p></div><div class="winsulin-arrow arrow-right"></div><div class="divider"></div>
 +
 
 +
<div class="BB-suffix element"><p class="element_text">BB suffix</p></div>
 +
 
 
</div>
 
</div>
 +
<div class="construct_3_line"></div>
 +
 +
<div class="filler"></div>
 +
<div class="construct_4_caption">
 +
<h5> Proinsulin targeted to the periplasm of E. coli </h5>
 
</div>
 
</div>
 +
<div class="construct_4">
 +
 +
<div class="BB-prefix element"><p class="element_text"> BB prefix</p></div><div class="divider"></div>
 +
 +
<div class="rbs element"><p class="element_text">RBS</p></div><div class="divider"></div>
 +
 +
<div class="ecotin element"><p class="element_text">Ecotin Tag</p></div><div class="ecotin-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="his element"><p class="element_text">His Tag</p></div><div class="his-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="arg element"><p class="element_text">R</p></div><div class="arg-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="proinsulin element"><p class="element_text">Proinsulin</p></div><div class="proinsulin-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="BB-suffix element"><p class="element_text">BB suffix</p></div>
 +
 
</div>
 
</div>
 +
<div class="construct_4_line"></div>
  
−
<div class= "row">
+
<div class="filler"></div>
−
<div class = "content">
+
<div class="construct_5_caption">
−
<div class = "col-xs-6">
+
<h5> Winsulin targeted to the cytoplasm of E. coli </h5>
−
<img src="https://static.igem.org/mediawiki/2017/8/8c/T--Sydney_Australia--ExpressionSystemEColiCyto.gif">
+
 
</div>
 
</div>
−
<div class = "col-xs-6">
+
<div class="construct_5">
−
<img src="https://static.igem.org/mediawiki/2017/a/aa/T--Sydney_Australia--ExpressionSystemEColiPeri.gif">
+
 
 +
<div class="BB-prefix element"><p class="element_text"> BB prefix</p></div><div class="divider"></div>
 +
 
 +
<div class="rbs element"><p class="element_text">RBS</p></div><div class="divider"></div>
 +
 
 +
<div class="his element"><p class="element_text">His Tag</p></div><div class="his-arrow arrow-right"></div><div class="divider"></div>
 +
 
 +
<div class="tev element"><p class="element_text">TEV</p></div><div class="tev-arrow arrow-right"></div><div class="divider"></div>
 +
 
 +
<div class="winsulin element"><p class="element_text">Winsulin</p></div><div class="winsulin-arrow arrow-right"></div><div class="divider"></div>
 +
 
 +
<div class="BB-suffix element"><p class="element_text">BB suffix</p></div>
 
</div>
 
</div>
 +
<div class="construct_5_line"></div>
 +
 +
<div class="filler"></div>
 +
<div class="construct_6_caption">
 +
<h5> Proinsulin targeted to the cytoplasm of E. coli </h5>
 
</div>
 
</div>
 +
<div class="construct_6">
 +
 +
<div class="BB-prefix element"><p class="element_text"> BB prefix</p></div><div class="divider"></div>
 +
 +
<div class="rbs element"><p class="element_text">RBS</p></div><div class="divider"></div>
 +
 +
<div class="his element"><p class="element_text">His Tag</p></div><div class="his-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="arg element"><p class="element_text">R</p></div><div class="arg-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="proinsulin element"><p class="element_text">Proinsulin</p></div><div class="proinsulin-arrow arrow-right"></div><div class="divider"></div>
 +
 +
<div class="BB-suffix element"><p class="element_text">BB suffix</p></div>
 +
 
</div>
 
</div>
 +
<div class="construct_6_line"></div>
  
−
<div class = "row" id = "please">
+
</div></div>
−
<div class = "content">
+
<div class="col-xs-4">
−
<div class= "col-xs-6">
+
<div class="element_info_box_container">
−
<div class = "boxes1">
+
<div class="info_box BBprefix_info">
−
<center><h4>Insulin accumulates in the cytoplasm under normal conditions within inclusion bodies, however will require downstream refolding in several chemical processes. </h4></ceneter>
+
<h6>iGEM BioBrick Prefix</h6>
 +
<br>
 +
<h4>Contains the restriction sites that are necessary for BioBrick compatibility including EcoRI, NotI & XbaI.</h4>
 
</div>
 
</div>
 +
<div class="info_box RBS_info">
 +
<h6>E. coli Extended Ribosome Binding Site</h6>
 +
<br>
 +
<h4>A derivative of the RBS found in gene 10 of the T7 bacteriophage, this 23 base pair sequence rich in A’s & T’s enhances ribosome binding to boost expression.
 +
</h4>
 
</div>
 
</div>
−
<div class= "col-xs-6">
+
<div class="info_box YNCM_info">
−
<div class = "boxes5">
+
<h6>YncM Tag</h6>
−
<center><h4>For this expression system, our gblocks will require an Ecotin fusion tag to redirect the protein to the bacterial periplasm for correct disulphide bond formation and folding. This, we hope, will reduce the number of chemical refolding steps that will be required for the Cytoplasmic Expression of insulin. </h4></center>
+
<br>
 +
<h4>The YNCM tag is a 12 amino acid sequence whose presence on the N-terminus of the protein targets it for secretion out of the cell into the surrounding media via the Sec pathway in Bacillus subtilis. YNCM was chosen because it was recently shown to be massively successful in targeting recombinant protein for secretion compared to a library of other signal peptides. Additionally, this was shown in B. subtilis strain WB600, which is the bacteria that our WB800 strain was derived from. So we expect that it should give us similar success in secretion of our constructs. (Guan et. al. 2016)</h4>
 +
 
 
</div>
 
</div>
 +
<div class="info_box HIS_info">
 +
<h6>His Tag</h6>
 +
<br>
 +
<h4>We have included a tag comprised of 6 sequential histidines that form a vital aspect of our purification technique using affinity chromatography. Histidine’s high attraction to metal ions will cause the entire protein, insulin and all, to bind to a nickel column and separate it from the other proteins of the cell.</h4>
 +
 
</div>
 
</div>
 +
<div class="info_box TEV_info">
 +
<h6>TEV Protease Cleavage Site</h6>
 +
<br>
 +
<h4>TEV is a sequence-specific cysteine protease derived from Tobacco Etch Virus. Because of its high specificity, it is commonly used for deliberate protein cleavage. In our project, we will use it to exclusively detach Winsulin from the nickel column, leaving the his tag and Ecotin/YNCM tags behind. This should provide us with a pure elution of Winsulin.</h4>
 +
 
</div>
 
</div>
 +
<div class="info_box ARG_info">
 +
<h6>“R” Arginine Cleavage Site</h6>
 +
<br>
 +
<h4>Arginine acts as a recognition site for Trypsin Protease which we will use to specifically remove Proinsulin from the his tag and YNCM/Ecotin tag in a similar way to TEV. We have chosen to use Trypsin in these constructs because it allows us to further simplify the processing of proinsulin. Trypsin naturally cleaves the C-peptide from proinsulin which, following disulfide bond formation, leaves the active form of insulin. This is the way it works in our body, so we are confident that it will work here too. </h4>
 +
 
</div>
 
</div>
 +
<div class="info_box BBsuffix_info">
 +
<h6>iGEM BioBrick Suffix</h6>
 +
<br>
 +
<h4>Contains the restriction sites that are necessary for BioBrick compatibility including SpeI, NotI & PstI. We have also added an additional BamHI site at the terminus of our E. coli expressed constructs for ligation into pET-15b.</h4>
  
−
<div class = "row" id="please">
 
−
<div class = "content">
 
−
<div class = "col-xs-3">
 
 
</div>
 
</div>
−
<div class = "col-xs-6">
+
<div class="info_box ecotin_info">
−
<center><h4><i>B. subtilis</i> Excretory Expression</h4></center>
+
<h6>Ecotin Tag</h6>
−
<img src="https://static.igem.org/mediawiki/2017/1/18/T--Sydney_Australia--ExpressionSystemBacillus.gif">
+
<br>
−
<div class = "boxes3">
+
<h4>Ecotin acts as a signal sequence to target the translated protein to the periplasm of the cell. There are a number of advantages that make it a good choice over other tags.
−
<h4>This expression system contains a YNCM fusion molecule that directs the protein to the extracellular space. We hope that this system will remove all of the cell lysis steps required with the <i>E coli</i> systems, and could potentially be optimised into a fed-batch system by Biofoundry and/or Open Insulin. </h4>
+
</h4>
 +
<ul>  
 +
<li>Relatively low metabolic burden due to its small size
 +
</li>
 +
<li>No interaction with other proteins within the periplasm</li>
 +
 
 +
<li>Is native in E. coli and contains a disulfide bond meaning it undergoes through an oxidative compartment that may assist in the formation of the disulfides in Proinsulin and Winsulin.</li>
 +
 
 +
<li>It has already been shown to successfully target proinsulin to the periplasm (Malik et. al. 2007)
 +
</li>
 +
</ul>
 
</div>
 
</div>
−
</div>
+
 
−
<div class = "col-xs-3">
+
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
 
</div>
  
−
 
+
<div class="row" style="height:10vh;"></div>
−
<div class="row" style="height:10vw;">
+
−
</div>
+
 
</div>
 
</div>
−
 
−
 
 
</body>
 
</body>
 
</html>
 
</html>
−
{{:Team:Sydney_Australia/templates/Footer}}
 

Revision as of 13:26, 30 October 2017

Our Key Goals


The aim of the USYD iGEM 2017 team was to address the problem of insulin inaccessibility. The design of our insulin, and its means of expression, needed to look at five key characteristics:

Stability

For our project to work effectively, we must have a supply chain that’s not a cold chain, so that costs can be reduced. This will ultimately mean that the cost of these cold chains will not be passed onto the consumer. To achieve this, we hope to design an insulin that will not lose efficacy after being exposed to room temperature for long periods of time.

Single Chained

As a result of the difficult purification methods, Single Chain Insulins, or SCIs for short, have been developed with a small, C-peptide chain linker. This linker connects the A and B chains in such a way that the di-sulfide bonds form more favorably. We aim to develop our own single chain insulin to compare it’s simplicity.

Ease of Purification and Affordaility

We must also consider the impact of a difficult, costly manufacturing process on small scale manufacturing companies. This impact is too great to impose on this grass-roots organisations, so we have pursued to find a cheap, simple purification method which is able to produce high yields from a recombinant system.

Intellectual Property Issues

As a result of the way drugs are currently developed, all new inventions for therapies are protected by Intellectual Property Law through patents. These patents surrounding all currently prescribed and newly invented insulins has inspired our team to pursue a completely open source project.

Safety and Efficacy

Our insulin products must be of certifiable medical grade such that it can be approved for human use after stage IV clinical trials, or biosimilar clinical trials. Furthermore, it must also be at least as effective as the other insulins on the market.

Our Constructs


We designed our expression constructs in order to meet these goals. Click on each element of the construct to learn more about why we chose them:

Winsulin secreted by B. subtilis

BB prefix

RBS

YNCM Tag

His Tag

TEV

Winsulin

BB suffix

Proinsulin secreted by B. subtilis

BB prefix

RBS

YNCM Tag

His Tag

R

Proinsulin

BB suffix

Winsulin targeted to the periplasm of E. coli

BB prefix

RBS

Ecotin Tag

His Tag

TEV

Winsulin

BB suffix

Proinsulin targeted to the periplasm of E. coli

BB prefix

RBS

Ecotin Tag

His Tag

R

Proinsulin

BB suffix

Winsulin targeted to the cytoplasm of E. coli

BB prefix

RBS

His Tag

TEV

Winsulin

BB suffix

Proinsulin targeted to the cytoplasm of E. coli

BB prefix

RBS

His Tag

R

Proinsulin

BB suffix

iGEM BioBrick Prefix

Contains the restriction sites that are necessary for BioBrick compatibility including EcoRI, NotI & XbaI.

E. coli Extended Ribosome Binding Site

A derivative of the RBS found in gene 10 of the T7 bacteriophage, this 23 base pair sequence rich in A’s & T’s enhances ribosome binding to boost expression.

YncM Tag

The YNCM tag is a 12 amino acid sequence whose presence on the N-terminus of the protein targets it for secretion out of the cell into the surrounding media via the Sec pathway in Bacillus subtilis. YNCM was chosen because it was recently shown to be massively successful in targeting recombinant protein for secretion compared to a library of other signal peptides. Additionally, this was shown in B. subtilis strain WB600, which is the bacteria that our WB800 strain was derived from. So we expect that it should give us similar success in secretion of our constructs. (Guan et. al. 2016)

His Tag

We have included a tag comprised of 6 sequential histidines that form a vital aspect of our purification technique using affinity chromatography. Histidine’s high attraction to metal ions will cause the entire protein, insulin and all, to bind to a nickel column and separate it from the other proteins of the cell.

TEV Protease Cleavage Site

TEV is a sequence-specific cysteine protease derived from Tobacco Etch Virus. Because of its high specificity, it is commonly used for deliberate protein cleavage. In our project, we will use it to exclusively detach Winsulin from the nickel column, leaving the his tag and Ecotin/YNCM tags behind. This should provide us with a pure elution of Winsulin.

“R” Arginine Cleavage Site

Arginine acts as a recognition site for Trypsin Protease which we will use to specifically remove Proinsulin from the his tag and YNCM/Ecotin tag in a similar way to TEV. We have chosen to use Trypsin in these constructs because it allows us to further simplify the processing of proinsulin. Trypsin naturally cleaves the C-peptide from proinsulin which, following disulfide bond formation, leaves the active form of insulin. This is the way it works in our body, so we are confident that it will work here too.

iGEM BioBrick Suffix

Contains the restriction sites that are necessary for BioBrick compatibility including SpeI, NotI & PstI. We have also added an additional BamHI site at the terminus of our E. coli expressed constructs for ligation into pET-15b.

Ecotin Tag

Ecotin acts as a signal sequence to target the translated protein to the periplasm of the cell. There are a number of advantages that make it a good choice over other tags.

  • Relatively low metabolic burden due to its small size
  • No interaction with other proteins within the periplasm
  • Is native in E. coli and contains a disulfide bond meaning it undergoes through an oxidative compartment that may assist in the formation of the disulfides in Proinsulin and Winsulin.
  • It has already been shown to successfully target proinsulin to the periplasm (Malik et. al. 2007)