Difference between revisions of "Team:Exeter/Parts"

 
(111 intermediate revisions by 6 users not shown)
Line 11: Line 11:
 
   
 
   
 
<body>
 
<body>
−
 
 
<style type="text/css">
 
<style type="text/css">
 
   @media (max-width: 920px) {
 
   @media (max-width: 920px) {
Line 48: Line 47:
 
       display:block !important;
 
       display:block !important;
 
   }
 
   }
 +
  #soc{
 +
display:none;
 +
  }
 +
  .subdiv_banner.left img, .subdiv_banner.right img{
 +
width:100%;
 +
position: relative;
 +
top: 32%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 
}
 
}
 
#links{
 
#links{
−
color:#eeeeee;
+
color:#47BCC2;
−
font-size:20px;
+
/*font-size:20px;*/
 +
font-size:1.2vw;
 +
margin:0 0.9vw 0.5vh 0.9vw;
 +
padding:0;
 
line-height:0px;
 
line-height:0px;
 
padding-top:28px;
 
padding-top:28px;
 
}
 
}
−
 
+
/*Fixes font size when nav-bar is collapsed*/
 +
@media (max-width: 920px) {
 +
#links{
 +
font-size:20px;
 +
}
 +
}
 
#links:hover{
 
#links:hover{
−
color:#47BCC2;
+
color:#339499;
 
}
 
}
 
#links:active{
 
#links:active{
−
color:#47BCC2;
+
color:#339499;
 
}
 
}
 
.navbar{
 
.navbar{
−
background-color:#4e4e4e;
+
background-color:#e8e8e8;
 
border-bottom:none;
 
border-bottom:none;
 
min-height:54px;
 
min-height:54px;
−
     margin:0 0 0 0;
+
     margin:4px 0 0 0;
 
}
 
}
 
  .navbar-inverse .navbar-toggle .icon-bar {/*teal toggle */
 
  .navbar-inverse .navbar-toggle .icon-bar {/*teal toggle */
Line 73: Line 91:
 
.navbar-inverse .navbar-toggle { /*Removes toggle bobrder*/
 
.navbar-inverse .navbar-toggle { /*Removes toggle bobrder*/
 
border:none;
 
border:none;
−
background-color:#4e4e4e;
+
background-color:#e8e8e8;
 
}
 
}
 
.navbar-inverse .navbar-toggle{ /*Removes toggle bobrder*/
 
.navbar-inverse .navbar-toggle{ /*Removes toggle bobrder*/
 
border:none;
 
border:none;
−
background-color:#4e4e4e;
+
background-color:#e8e8e8;
 
}
 
}
 
.navbar-inverse .navbar-toggle collapse{ /*Removes toggle bobrder*/
 
.navbar-inverse .navbar-toggle collapse{ /*Removes toggle bobrder*/
 
border:none;
 
border:none;
−
background-color:#4e4e4e;
+
background-color:#e8e8e8;
 
}
 
}
 
.navbar-inverse .navbar-toggle:hover {
 
.navbar-inverse .navbar-toggle:hover {
−
background-color:#4e4e4e;
+
background-color:#47BCC2;
 
}
 
}
 
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
 
.navbar-inverse .navbar-toggle:focus, .navbar-inverse .navbar-toggle:hover {
−
     background-color:#4e4e4e;  
+
     background-color:#47BCC2;  
 
}
 
}
−
.navbar-inverse .navbar-toggle:hover .icon-bar{
+
.navbar-inverse .navbar-toggle:hover .icon-bar, .navbar-inverse .navbar-toggle:focus .icon-bar{
 
background-color:#eeeeee;
 
background-color:#eeeeee;
 
}  
 
}  
−
/*soc classes controll css for media icons*/
 
 
#soc{
 
#soc{
 
margin-top:-12px;
 
margin-top:-12px;
−
+
margin-left:-15px;
 
}
 
}
−
/****Social Media navbar icons****/
+
.soc_1{
−
/*youtube*/
+
−
#soc_1{  
+
 
margin-right:3px;
 
margin-right:3px;
−
height:50px;
 
−
width:48px;
 
 
}
 
}
−
/*facebook*/
+
.soc_2{
−
#soc_2{
+
 
margin-right:3px;
 
margin-right:3px;
−
height:50px;
 
−
width:48px;
 
 
}
 
}
−
/*Twitter*/
+
.soc_3{
−
#soc_3{
+
 
margin-right:3px;
 
margin-right:3px;
−
margin-right:18px;
 
−
height:50px;
 
−
width:48px;
 
 
}
 
}
 +
 
/*Navbar exgem logo styling*/
 
/*Navbar exgem logo styling*/
−
#logo{
+
#logo, #logo_inverse{
 
margin-top:-12px;
 
margin-top:-12px;
 
vertical-align:middle;
 
vertical-align:middle;
 
width:48px;  
 
width:48px;  
 
height:48px;
 
height:48px;
 +
/*Alligns logo with toggled list on thin screens*/
 +
margin-left:13px;
 +
margin-right:-12px;
 
}
 
}
 +
/*Logo is visable on page load by default*/
 +
#logo{
 +
display:block;
 +
}
 +
/*The inverse logo is not visable by default, but becomes visable*/
 +
/*when #logo_button is hovered over (found in jquery)*/
 +
#logo_inverse{
 +
display:none;
 +
}
 +
 
/*Displays brand inline with ExGem*/
 
/*Displays brand inline with ExGem*/
 
.navbar-brand > img {
 
.navbar-brand > img {
Line 168: Line 188:
 
}  
 
}  
 
.flare{
 
.flare{
−
background-color:#47BCC2;   
+
background-color:#8cd5d9;   
−
padding-top:5px;
+
padding-top:3px;
 
position:relative;
 
position:relative;
 
bottom:0px;
 
bottom:0px;
Line 175: Line 195:
 
}
 
}
 
.footer{
 
.footer{
−
background-color:#4e4e4e;
+
background-color:#e8e8e8;
 
}
 
}
 
/*Hides igm logo and team name*/
 
/*Hides igm logo and team name*/
Line 196: Line 216:
 
}
 
}
 
#pp{
 
#pp{
−
padding-top:3%;
+
padding-top:20px;
−
padding-left:5%;
+
padding-right:40px;
−
padding-right:5%;
+
padding-left:40px;
−
padding-bottom:1%;
+
 
font-size:150%;
 
font-size:150%;
 +
}
 +
.container ul, .container ol{
 +
font-size:140%;
 +
padding-right:40px;
 +
padding-left:60px;
 +
padding-top:10px;
 +
}
 +
/*Heading styles*/
 +
h1, h2, h3, h4, h5{
 +
text-align:center;
 +
color:#339499;
 +
font-weight:500;
 +
    padding-left: 40px;
 +
    padding-right: 40px;
 +
padding-top: 40px;
 +
padding-bottom:0;
 +
}
 +
h1{font-size:340%;}
 +
h2{font-size:320%;}
 +
h3{font-size:290%;}
 +
h4{font-size:260%;}
 +
h5{font-size:220%;}
 +
h6{
 +
color:#339499;
 +
font-weight:500;
 +
font-size:200%;
 +
padding-left:40px;
 +
padding-top: 20px;
 +
padding-bottom:-10px;
 +
}
 +
/*Italics for Quotes using i tag*/
 +
q{
 +
text-align:center;
 +
color:#339499;
 +
padding-left:10%;
 +
padding-right:10%;
 +
font-size:120%;
 +
font-style: italic;
 +
}
 +
/*Styling for links*/
 +
a{
 +
color:#339499;
 +
font-weight:550;
 
}
 
}
 
/**page content styling starts**/
 
/**page content styling starts**/
Line 210: Line 272:
 
         border-style:none;
 
         border-style:none;
 
}
 
}
 +
#Section_Link, #Section_Link:visited{
 +
display:block;
 +
margin:0 auto 10px auto;
 +
width:14px;
 +
}
 +
#Section_Link:hover{
  
−
</style>
+
}
 +
#sectionGap, #sectionGap:focus, #contentTitle{
 +
min-width:100%;
 +
min-height:10vh;
 +
background:#e8e8e8;
 +
display:block;
 +
font-size:400%;
 +
text-align:center;
 +
color:#47BCC2;
 +
text-decoration:none;
 +
border-style:none none solid none;
 +
border-width:3px;
 +
border-color:#8cd5d9;
 +
}
 +
#sectionGap:hover, #sectionGap:active{
 +
color:#339499;
 +
}
 +
.container{
 +
min-width:100%;
 +
padding:0;
 +
}
 +
.div_vl{
 +
padding-top:2%;
 +
height:35vw;
 +
width:95vw;
 +
display:block;
 +
margin-left:auto;
 +
margin-right:auto;
 +
}
 +
.div_vl.backgroundimage{
 +
background-image: url('https://static.igem.org/mediawiki/2016/9/93/T--Exeter--Home_Background1.png');
 +
background-repeat:no-repeat;
 +
background-size: 100% auto;
 +
width:100%;
 +
height:88vh;
 +
}
 +
#title{
 +
style="font-family: 'Arial';
 +
color:#4e4e4e;
 +
text-align:center;
 +
margin-bottom:20px;
 +
font-size:400%;
 +
}
 +
.div_content{
 +
padding:0;
 +
min-height:100vh;
 +
width:100%;
 +
background:#eeeeee;
 +
}
  
 +
/*div_banner contains to links at the top of each page to link to*/
 +
/*each section of the page*/
 +
.div_banner{
 +
max-width:90vw;
 +
margin:12vh auto 5vh auto;
 +
display:block;
 +
height:8vh;
 +
}
 +
 +
/*Contains styling for the left and right pictures of the banner*/
 +
.subdiv_banner{
 +
height:8vh;
 +
padding:0;
 +
margin:auto;
 +
position:relative;
 +
bottom:0;
 +
right:0;
 +
}
 +
.subdiv_banner.left{
 +
float:left;
 +
display:block;
 +
}
 +
.subdiv_banner.right{
 +
float:right;
 +
display:block;
 +
}
 +
.subdiv_banner.middle{
 +
height:100%;
 +
}
 +
/*Positions the images in correct place in the divs*/
 +
.subdiv_banner.left img, .subdiv_banner.right img{
 +
width:100%;
 +
position: relative;
 +
top: 38%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link,.banner_link:visited{
 +
position: relative;
 +
height:100%;
 +
padding:0, 2px!important;
 +
color:#47BCC2;
 +
text-align:center;
 +
font-size:1.5vw;
 +
/*Max font size where "section" and "1" don't appear on*/
 +
}
 +
.banner_link span.oneline{
 +
position: relative;
 +
top: 34.5%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link span.twoline{
 +
position: relative;
 +
top: 7.5%;
 +
-ms-transform: translateY(-50%) /* IE 9 */
 +
    -webkit-transform: translateY(-50%) /* Chrome, Safari, Opera */
 +
    transform: translateY(-50%);
 +
}
 +
.banner_link:hover{
 +
text-decoration:none;
 +
color:#339499;
 +
}
 +
.link_fix{
 +
display:block;
 +
position:relative;
 +
height:1px;
 +
top:-15px;
 +
}
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.link_fix{
 +
display:none;
 +
}
 +
.div_vl.backgroundimage{
 +
background-image: url('#');
 +
background:#ddd;
 +
}
 +
#title{
 +
font-size:260%;
 +
}
 +
.banner_link{
 +
font-size:22px;
 +
}
 +
.div_banner{
 +
margin-top:20px;
 +
}
 +
/*Makes side pictures on banner invisible on small screens*/
 +
/*as it clutters screen*/
 +
.subdiv_banner.left, .subdiv_banner.right{
 +
display:none;
 +
}
 +
}
 +
#dropdownMenu1{
 +
margin-top:-0.15vw;
 +
background:#e8e8e8;
 +
border-style:none;
 +
}
 +
@media (min-width: 767px){
 +
.dropdown-menu{
 +
margin-top:24px;
 +
left:-19px;
 +
border-radius:0px;
 +
padding:4px;
 +
}
 +
}
 +
/*Mobile and small screen css*/
 +
@media (max-width: 767px){
 +
.div_vl.backgroundimage{
 +
height:37vh;
 +
background-size: auto 200%;
 +
}
 +
.div_l{
 +
display:none;
 +
}
 +
#logo_Banner_Desktop{
 +
display:none;
 +
}
 +
#logo_Banner_Mobile{
 +
display:block;
 +
width:100%;
 +
max-width:200px;
 +
margin:auto;
 +
}
 +
#dropdownMenu1{
 +
padding:2.5% 0 2% 0;
 +
margin:-1.6% auto -1.4% 0.9%;
 +
}
 +
#links{
 +
padding:10px 0;
 +
margin-left:0.85vw;
 +
}
 +
}
 +
#links_drop{
 +
color:#47BCC2;
 +
/*font-size:20px;*/
 +
font-size:1.2vw;
 +
margin:8px 0.9vw 0.5vh 0.9vw;
 +
padding:0.06vw 0 0 0;
 +
line-height:0px;
 +
}
 +
@media (max-width: 920px){
 +
#links_drop{
 +
margin-left:0;
 +
padding-top:9px;
 +
margin-top:-4px;
 +
font-size:20px;
 +
}
 +
}
 +
button.dropdown-toggle{
 +
padding-top:21px; !important
 +
}
 +
@media (max-width: 767px){
 +
button.dropdown-toggle{
 +
padding-top:5px;
 +
}
 +
}
 +
#links_drop:hover span{
 +
color:#339499;
 +
}
 +
</style>
 +
<div id="top_page" class="link_fix"></div>
 
<nav id="Top" class="navbar navbar-inverse navbar-static-top">
 
<nav id="Top" class="navbar navbar-inverse navbar-static-top">
 
   <div class="container-fluid">
 
   <div class="container-fluid">
Line 221: Line 501:
 
           <span class="icon-bar"></span>                         
 
           <span class="icon-bar"></span>                         
 
</button>
 
</button>
−
       <a class="navbar-brand" href="https://2016.igem.org/Team:Exeter">
+
       <a id="logo_button" class="navbar-brand" href="https://2016.igem.org/Team:Exeter">
 
<img id="logo" src="https://static.igem.org/mediawiki/2016/7/75/T--Exeter--Template--Logo2.png"/>
 
<img id="logo" src="https://static.igem.org/mediawiki/2016/7/75/T--Exeter--Template--Logo2.png"/>
 +
<img id="logo_inverse" src="https://static.igem.org/mediawiki/2016/2/23/T--Exeter--Template_Logo2_inverse.png"/>
 
  </a>
 
  </a>
 
   
 
   
Line 228: Line 509:
 
     <div>
 
     <div>
 
         <div class="collapse navbar-collapse" id="myNavbar">
 
         <div class="collapse navbar-collapse" id="myNavbar">
−
<ul class="nav navbar-nav">
+
<ul class="nav navbar-nav">
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter">Project</a></li>
+
<li><div id="links_drop" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Lab</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
 +
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Project">Lab Project</a></li>
 +
    <li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Labbook">Lab Book</a></li>
 +
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Safety">Safety</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Parts">Parts</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Team">Team</a></li>
−
<li ><a id="links" href="https://2016.igem.org/Team:Exeter/Human_Practices">Human Practices</a></li>
+
<li><a id="links" href="https://2016.igem.org/Team:Exeter/Interlab">InterLab</a></li>
 +
<li><div id="links_drop" class="dropdown">
 +
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 +
    <span style="margin-bottom:4px;">Human Practices</span>
 +
    <span class="caret"></span>
 +
  </button>
 +
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1"> 
 +
    <li><a id="links" style="margin:10px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Integrated_Practices">Integrated</a></li>
 +
<li><a id="links" style="background:none;line-height:0.7vh;margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Engagement">Public Engagement<br /><br /><br /> & Education</a></li><li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Log">Log</a></li>
 +
 
 +
  </ul>
 +
</div></li>
 +
 
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
 
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Attributions">Attributions</a></li>
−
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
+
 
−
</ul>
+
<li><div id="links_drop" class="dropdown">
−
<ul class="nav navbar-nav navbar-right" >
+
  <button class="dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
−
<li class="media_icon" id="soc_1">
+
    <span style="margin-bottom:4px;">Awards</span>
−
<a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
+
    <span class="caret"></span>
−
<img id = "soc" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/>
+
  </button>
−
</a>
+
  <ul class="dropdown-menu" style="background:#e8e8e8;margin-left:25px;" aria-labelledby="dropdownMenu1">
−
</li>
+
 
−
    <li class="media_icon" id="soc_2">
+
<li><a id="links" style="margin:10px 0 30px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/Awards">Awards</a></li>
−
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
+
<li><span style="margin:10px 0 30px 2px;padding:0;"><u>Special pages</u></span></li>
−
<img id = "soc" src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/>
+
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Silver">HP Silver</a></li>
−
</a>
+
<li><a id="links" style="margin:30px 0 10px 2px;padding:0;font-size:1.8vh;" href="https://2016.igem.org/Team:Exeter/HP/Gold">HP Gold</a></li>
−
</li>
+
 
−
    <li class="media_icon" id="soc_3">
+
  </ul>
−
<a  href="https://twitter.com/exeter_igem">
+
</div></li>
−
<img id = "soc" src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/>
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Model">Models</a></li>
−
</a>
+
<li ><a id="links"href="https://2016.igem.org/Team:Exeter/Collaborations">Collaborations</a></li>
−
</li>
+
 
 +
 
 +
 
 
</ul>
 
</ul>
 +
<ul class="nav navbar-nav navbar-right">
 +
<li style="height:50px;width:48px;"class="soc_1">
 +
<a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/></a>
 +
</li>
 +
<li style="height:50px;width:48px;"class="soc_2">
 +
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/5/51/Fb.png"/></a>
 +
</li>
 +
<li style="height:50px;width:48px;"class="soc_3">
 +
<a href="https://twitter.com/exeter_igem">
 +
<img id = "soc" src="https://static.igem.org/mediawiki/2016/7/76/Twit.jpg"/></a>
 +
</li>
 +
</ul>
 
    </div>
 
    </div>
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 
</nav>
 
</nav>
−
<div style="height:6px; background-color:#828282; margin-top:0px;" ></div>
+
<div style="height:3px; background-color:#8cd5d9; margin-top:0px;" ></div>
 
<!--div below contains a rolling counter for scrolling position-->
 
<!--div below contains a rolling counter for scrolling position-->
 
<div id="scrollPosition" style="display:none;">0</div>
 
<div id="scrollPosition" style="display:none;">0</div>
 
<script>
 
<script>
−
$(document).ready(function(){
+
$(document).ready(function(){
 
//topnav script
 
//topnav script
 
var width = document.documentElement.clientWidth;
 
var width = document.documentElement.clientWidth;
Line 287: Line 607:
 
})
 
})
 
}
 
}
 +
//Causes the navbar logo to switch between the default and
 +
//inverse versions when the <a> with #logo_button is hovered over
 +
$('#logo_button').hover(function(){
 +
$('#logo').toggle();
 +
$('#logo_inverse').toggle();
 +
});
 
});
 
});
 
</script>  
 
</script>  
 
<!--Counter and topnav ends-->
 
<!--Counter and topnav ends-->
 
<!--Content begins-->
 
<!--Content begins-->
 +
<div class="container">
 +
<div class="div_vl backgroundimage">
 +
<h1 id="title">Parts</h1>
 +
<!--Contains links to sections on page-->
 +
<div class="div_banner">
 +
<!--Right picture (the teal line on right)-->
 +
<div class="col-sm-2 subdiv_banner left">
 +
<img src="https://static.igem.org/mediawiki/2016/8/8a/T--Exeter--Template_Banner_left.png">
 +
</div>
 +
<!--Contains all information of banner in the middle-->
 +
<!--of the two outer images-->
 +
<div class="col-xs-12  col-sm-8 subdiv_banner middle">
 +
<!--Use bootstrap to add links using all 12 columns-->
 +
<!--For each link please give double the coloumns for when-->
 +
<!--the screen is xs compared to when it is sm-->
 +
 +
<!--Give span class "oneline" or "twoline" depending on how llong the section text is-->
 +
<a href="#section_1" class="banner_link col-xs-6 col-sm-3"><span class="oneline">KillerRed</span></a>
 +
<a href="#section_2" class="banner_link col-xs-6 col-sm-3"><span class="oneline">KillerOrange</span></a>
 +
<a href="#section_3" class="banner_link col-xs-6 col-sm-3"><span class="oneline">Lysozyme</span></a>
 +
                                <a href="#section_4" class="banner_link col-xs-6 col-sm-3"><span class="oneline">DNase</span></a>
 +
</div>
 +
 +
<!--Left picture (the teal line on left)-->
 +
<div class="col-sm-2 subdiv_banner right">
 +
<img src="https://static.igem.org/mediawiki/2016/5/56/T--Exeter--Template_Banner_right.png">
 +
</div>
 +
</div>
 +
<div>
 +
 +
</div>
 +
</div>
 +
<div class="col-xs-12 div_content">
 +
<div id="section_1" class="link_fix"></div>
 +
<div id="contentTitle">
 +
KillerRed
 +
</div>
 +
 +
                <h6>Name</h6>
 +
 +
                <p id="pp">pT7- <i>E. coli</i> optimised - KillerRed (EOKR)</p>
 +
 +
                <h6>Description</h6>
 +
 +
                <p id="pp">KillerRed is a red fluorescent protein that generates reactive oxygen species after illumination with light between the wavelengths of 540-580 nm[1].</p>
 +
 +
                <p id="pp">We further characterised this kill switch by illuminating induced cultures 24 hours after induction with IPTG as well as uninduced cultures. After 6 hours in the light box CFU’s were counted to determine if the kill switch was successful. This was also reproduced on cultures grown in a ministat for 120 and 168 hours to test how long the kill switch remains functional. The full protocol can be found <a href="https://2016.igem.org/Team:Exeter/Project#section_4">here</a> and the results can be found <a href="https://2016.igem.org/Team:Exeter/Project#section_2">here</a>. </p>
 +
 +
                <p id="pp">The mechanism by which KillerRed kills cells isn’t fully understood yet</p>
 +
 +
                <p id="pp">Here we are submitting KillerRed as a composite part under a T7 promoter (BBa_I712074), an Elowitz ribosome binding site (BBa_B0034) and a double terminator (BBa_B0015).</p>
 +
 +
                <p id="pp">The sequence for KillerRed protein coding region can be found here <a href="http://parts.igem.org/Part:BBa_K1914002">(BBa_K1141002)</a></p>
 +
 +
                <h6>Biobrick Code</h6>
 +
 +
                <p id="pp"><a href="http://parts.igem.org/Part:BBa_K1914003">BBa_K1914003</a></p>
 +
 +
<br>
 +
<br>
 +
 +
                <div class="col-xs-12" style="padding:0;margin:0;">
 +
                    <img src="https://static.igem.org/mediawiki/2016/1/1a/T--Exeter--parts-KR_png.png" style="max-width:50%;margin:auto;display:block;">
 +
<br>
 +
<br>
 +
 +
<div>
 +
 +
<a id="Section_link" href="#section_2" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
 +
<div class="col-xs-12 div_content">
 +
<div id="section_2" class="link_fix"></div>
 +
<div id="contentTitle">
 +
KillerOrange
 +
</div>
 +
<h6>Name:</h6>
 +
 +
                <p id="pp">pT7- <i>E. coli</i> optimised - KillerOrange (EOKO)</p>
 +
 +
                <h6>Description:</h6>
 +
 +
                <p id="pp">KillerOrange is a mutant of the fluorescent protein KillerRed (BBa_K1141002, BBa_K1491015) activated by blue and green light. It carries a tryptophan-based chromophore that is novel for photosensitizers [2]. </p>
 +
 +
                <p id="pp">KillerOrange has an excitation maximum of 512 nm and emission maximum at 555 nm and its absorbance spectrum has two peaks, at 455 and 514 nm. <p>
 +
 +
                <p id="pp">The mechanism by which KillerOrange kills cells isn’t fully understood yet. However, it is believed that KillerOrange's ability to generate reactive oxygen species depends on a water-filler channel reaching the chromophore area from the end cap of the ß-barrel [3].</p>
 +
 +
               
 +
                <p id="pp">We characterised this part in the same way as KillerRed (<a href="https://2016.igem.org/Team:Exeter/Project#section_4">protocol</a>), and the results of which can be found <a href="https://2016.igem.org/Team:Exeter/Project#section_2">here</a></p>
 +
 +
                <p id="pp">Here we are submitting KillerOrange as a composite part under a T7 promoter (BBa_I712074), an Elowitz ribosome binding site (BBa_B0034) and a double terminator (BBa_B0015).</p>
 +
 +
                <p id="pp">The sequence for KillerOrange protein coding region can be found here <a href="http://parts.igem.org/Part:BBa_K1914000">(BBa_K1914000)</a></p>
 +
 +
                <h6> Biobrick Code </h6>
 +
                <p id="pp"><a href="http://parts.igem.org/Part:BBa_K1914001">BBa_K1914001</a></p>
 +
 +
<br>
 +
<br>
 +
 +
                <div class="col-xs-12" style="padding:0;margin:0;">
 +
                    <img src="https://static.igem.org/mediawiki/2016/2/21/T--Exeter--parts-KO_png.png" style="max-width:50%;margin:auto;display:block;">
 +
<br>
 +
<br>
 +
               
 +
                </div>
 +
 +
 +
<div>
 +
<a id="Section_link" href="#section_3" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
 +
<div class="col-xs-12 div_content">
 +
<div id="section_3" class="link_fix"></div>
 +
<div id="contentTitle">
 +
Lysozyme
 +
</div>
 +
<h6>Name:</h6>
 +
 +
                <p id="pp">pT7 Lysozyme  <i>E. coli</i> codon optimised, signal peptide, flag tag</p>
 +
 +
                <h6>Description:</h6>
 +
 +
                <p id="pp">Lysozyme  from chicken egg white, attacks the cell wall in bacteria by hydrolysing the ß-1,4 linkages between N-acetylmuramic acid and N-acetylglucosamine of peptidoglycan [4].</p>
 +
 +
                <p id="pp"> </p>
 +
                <p id="pp">Characterisation of this part involved using the Enzcheck assay kit which detects lysozyme activity as a measure of fluorescence as well as using the same protocol we used to characterise KillerRed (<a href="https://2016.igem.org/Team:Exeter/Project#section_4">protocol</a>)and the results of which can be found <a href="https://2016.igem.org/Team:Exeter/Project#section_2">here</a></p>
 +
 +
                <p id="pp">Here we are submitting lysozyme as a composite part under a T7 promoter (BBa_I712074), an Elowitz ribosome binding site (BBa_B0034) and a double terminator (BBa_B0015).</p>
 +
 +
                <p id="pp">We have codon optimised the protein coding region, added a FLAG tag and exchanged the native signal peptide for one which is <i>E. coli</i> specific and directs Lysozyme to the periplasm [5]. The sequence for Lysozyme protein coding region can be found here <a href="http://parts.igem.org/Part:BBa_K1914004">(BBa_K1914004)</a></p>
 +
 +
                <h6> Biobrick Code </h6>
 +
 +
                <p id="pp"><a href="http://parts.igem.org/Part:BBa_K1914005">BBa_K1914005</a></p>
 +
 +
<br>
 +
<br>
 +
 +
<div class="col-xs-12" style="padding:0;margin:0;">
 +
                    <img src="https://static.igem.org/mediawiki/2016/c/c5/T--Exeter--parts-LYSO_png.png" style="max-width:50%;margin:auto;display:block;">
 +
 +
 +
<br>
 +
<br>
 +
 +
<div>
 +
 +
<a id="Section_link" href="#section_4" style="display:block;margin:20px auto 0 auto;width:14px;"><span style="color:#47BCC2;font-size: 25px;" class="glyphicon glyphicon-menu-down" aria-hidden="true"></span></a>
 +
</div>
 +
 +
<div class="col-xs-12 div_content">
 +
<div id="section_4" class="link_fix"></div>
 +
<div id="contentTitle">
 +
DNase
 +
</div>
 +
<h6>Name:</h6>
 +
 +
                <p id="pp">DNase</p>
 +
 +
                <h6>Description:</h6>
 +
 +
                <p id="pp"> DNase was designed [6] as a DNA degrading kill switch aiming to prevent cross contamination of DNA</p>
 +
 +
               
 +
                <p id="pp"> A composite part containing DNase could not be created. This could be due to the need for a tightly regulating promoter to prevent DNase protein being produced before induction and destroying DNA.</p>
 +
 +
<br>
 +
<br>
 +
 +
<div class="col-xs-12" style="padding:0;margin:0;">
 +
                    <img src="https://static.igem.org/mediawiki/2016/0/06/T--Exeter--parts-DNase_png.png" style="max-width:50%;margin:auto;display:block;">
 +
<br>
 +
<br>
 +
 +
<style>
 +
ul{
 +
list-style-image:none;
 +
}
 +
.wrap ul{
 +
padding-top:20px;
 +
padding-right:40px;
 +
padding-left:80px;
 +
font-size:150%;
 +
}
 +
.wrap ul li {
 +
    /* Text color */
 +
    color: #333;
 +
    list-style-type: none;
 +
}
 +
 +
.wrap ul li:before {
 +
    /* Unicode bullet symbol */
 +
    content: '\25AA';
 +
    /* Bullet color */
 +
    color: #47BCC2;
 +
    padding-right: 0.5em;
 +
}
 +
ol{
 +
padding-top:20px;
 +
padding-right:40px;
 +
padding-left:80px;
 +
font-size:150%;
 +
}
 +
ol li {
 +
    /* Text color */
 +
    color: #333;
 +
    list-style-type: none;
 +
}
 +
ol li {
 +
    list-style-type: none;
 +
    counter-increment: list;
 +
    position: relative;
 +
}
 +
 +
ol li:before {
 +
    content: counter(list) ".";
 +
    position: absolute;
 +
    left: -2.5em;
 +
    width: 2em;
 +
    text-align: right;
 +
    color: #47BCC2;
 +
}
 +
</style>
 +
 +
                <h5>References</h5>
 +
 +
<ol style="font-size:100%;">
 +
                    <li>Takemoto, K., Matsuda, T., Sakai, N., Fu, D., Noda, M., Uchiyama, S., Kotera, I., Arai, Y., Horiuchi, M., Fukui, K. and Ayabe, T., 2013. SuperNova, a monomeric photosensitizing fluorescent protein for chromophore-assisted light inactivation. Scientific reports, 3.
 +
</li>
 +
                    <li>Sarkisyan, K.S., Zlobovskaya, O.A., Gorbachev, D.A., Bozhanova, N.G., Sharonov, G.V., Staroverov, D.B., Egorov, E.S., Ryabova, A.V., Solntsev, K.M., Mishin, A.S. and Lukyanov, K.A., 2015. KillerOrange, a Genetically Encoded Photosensitizer Activated by Blue and Green Light. PloS one,10(12), p.e0145287.
 +
</li>
 +
                    <li>Pletnev, S., Gurskaya, N.G., Pletneva, N.V., Lukyanov, K.A., Chudakov, D.M., Martynov, V.I., Popov, V.O., Kovalchuk, M.V., Wlodawer, A., Dauter, Z. and Pletnev, V., 2009. Structural basis for phototoxicity of the genetically encoded photosensitizer KillerRed. Journal of Biological Chemistry, 284(46), pp.32028-32039.
 +
</li>
 +
                    <li>Blake, C.C.F., Koenig, D.F., Mair, G.A., North, A.C.T., Phillips, D.C. and Sarma, V.R., 1965. Structure of hen egg-white lysozyme: a three-dimensional Fourier synthesis at 2 Å resolution. Nature, 206(4986), pp.757-761.
 +
</li>
 +
                    <li>Fischer, B., Perry, B., Phillips, G., Sumner, I. and Goodenough, P., 1993. Physiological consequence of expression of soluble and active hen egg white lysozyme in Escherichia coli. Applied Microbiology and Biotechnology, 39, pp.537–540.
 +
</li>
 +
                    <li>Chen, C.Y., Lu, S.C. and Liao, T.H.,1998. Cloning, sequencing and expression of a cDNA encoding bovine pancreatic deoxyribonuclease I in Escherichia coli: purification and characterization of the recombinant enzyme. Gene, 206, pp.181–184.
 +
</li>
 +
                </ol>
 +
 +
 +
  
−
<p id="text" ></p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
−
<p >Lorem ipsum dolor sit amet, consectetur adipiscing elit,
 
−
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
−
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
−
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 
−
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
  
 
<!--Content Ends-->
 
<!--Content Ends-->
Line 353: Line 868:
 
   <div class="container-fluid">
 
   <div class="container-fluid">
 
     <div class="navbar-header">
 
     <div class="navbar-header">
−
       <a class="navbar-brand" id="Top_link" href="#Top">
+
       <a class="navbar-brand" id="Top_link" href="#top_page">
 
<span class="glyphicon glyphicon-menu-up" aria-hidden="true" style="max-width:1%;"></span>
 
<span class="glyphicon glyphicon-menu-up" aria-hidden="true" style="max-width:1%;"></span>
 
  </a>
 
  </a>
Line 361: Line 876:
 
<div class="flare"></div>
 
<div class="flare"></div>
 
<footer class="footer">
 
<footer class="footer">
−
<a href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
+
<a style="margin-left:3%" href="https://www.youtube.com/channel/UC31qfG4hnm8gRHDCkrBtAiQ">
−
<img style="padding-left:3%" src="https://static.igem.org/mediawiki/2016/2/23/You.png"/>
+
<img src="https://static.igem.org/mediawiki/2016/2/23/You.png"/>
 
</a>
 
</a>
 
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">
 
<a href="https://www.facebook.com/ExeteriGEM2016/?ref=aymt_homepage_panel">

Latest revision as of 20:24, 19 October 2016