Team:TP CC-SanDiego/Project

From 2014hs.igem.org

(Difference between revisions)
 
(2 intermediate revisions not shown)
Line 1: Line 1:
-
{{Team:TPHS/Main}}
 
-
{{Team:TPHS/ContentFix}}
 
<html>
<html>
-
 
-
<section id="Content">
 
-
<h1>Our Project</h1>
 
-
<p style="font-size:40px">
 
-
<div align="left">
 
<head>
<head>
-
+
<meta charset="utf-8">
 +
<title>iGEM San Diego - Project</title>
 +
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
 +
<script>
 +
$(function() {
 +
  $('a[href*=#]:not([href=#])').click(function() {
 +
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
 +
      var target = $(this.hash);
 +
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
 +
      if (target.length) {
 +
        $('html,body').animate({
 +
          scrollTop: target.offset().top
 +
        }, 1000);
 +
        return false;
 +
      }
 +
    }
 +
  });
 +
});
 +
</script>
 +
<!--<script>
 +
$(document).ready(function() { 
 +
var stickyNavTop = $('.nav').offset().top; 
 +
 
 +
var stickyNav = function(){ 
 +
var scrollTop = $(window).scrollTop(); 
 +
     
 +
if (scrollTop > stickyNavTop) { 
 +
    $('.nav').addClass('sticky'); 
 +
} else { 
 +
    $('.nav').removeClass('sticky'); 
 +
} 
 +
}; 
 +
 
 +
stickyNav(); 
 +
 
 +
$(window).scroll(function() { 
 +
    stickyNav(); 
 +
}); 
 +
}); 
 +
</script>-->
-
<!-- CSS for Hexagon Presentation -->
+
</script>
-
<style>
+
-
 
+
<!--<script>
-
/* ==========================================================================
+
$(document).ready(function() { 
-
  Base styles: opinionated defaults
+
var stickyNavTop = $('.nav').offset().top;  
-
  ========================================================================== */
+
 
-
 
+
var stickyNav = function(){
-
 
+
var scrollTop = $(window).scrollTop();
-
/*
+
     
-
* Remove text-shadow in selection highlight: h5bp.com/i
+
if (scrollTop > stickyNavTop) {  
-
* These selection declarations have to be separate.
+
    $('.nav').addClass('sticky');
-
* Customize the background color to match your design.
+
} else {  
-
  */
+
    $('.nav').removeClass('sticky');  
-
 
+
} 
-
::-moz-selection {
+
};
-
text-shadow: none;
+
 
-
}
+
stickyNav();
-
 
+
 
-
::selection {
+
$(window).scroll(function() {  
-
text-shadow: none;
+
    stickyNav();  
-
}
+
});
-
 
+
});  
-
/*
+
</script>-->
-
  * A better looking default horizontal rule
+
<style>
-
*/
+
#content{
-
 
+
width: 100%;
-
hr {
+
-
display: block;
+
-
height: 1px;
+
-
border: 0;
+
-
border-top: 1px solid #ccc;
+
-
margin: 1em 0;
+
-
padding: 0;
+
-
}
+
-
 
+
-
/*
+
-
  * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
+
-
  */
+
-
 
+
-
img {
+
-
vertical-align: middle;
+
-
}
+
-
 
+
-
/*
+
-
  * Remove default fieldset styles.
+
-
*/
+
-
 
+
-
fieldset {
+
-
border: 0;
+
margin: 0;
margin: 0;
padding: 0;
padding: 0;
-
}
+
background-color:transparent;
-
 
+
-
/*
+
-
* Allow only vertical resizing of textareas.
+
-
*/
+
-
 
+
-
textarea {
+
-
resize: vertical;
+
-
}
+
-
 
+
-
/* ==========================================================================
+
-
  Chrome Frame prompt
+
-
  ========================================================================== */
+
-
 
+
-
.chromeframe {
+
-
margin: 0.2em 0;
+
-
background: #ccc;
+
-
color: #000;
+
-
padding: 0.2em 0;
+
-
}
+
-
 
+
-
 
+
-
/* ==========================================================================
+
-
  Basic layout
+
-
  ========================================================================== */
+
-
 
+
-
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
+
-
body {
+
-
background-size: 50%;
+
-
}
+
-
}
+
-
 
+
-
.site-header {
+
-
min-width: 280px;
+
-
max-width: 826px;
+
-
margin: 0 auto;
+
-
}
+
-
 
+
-
.site-header {
+
-
padding: 0 0 42px;
+
-
}
+
-
 
+
-
.site-header .tagline {
+
-
margin: 0;
+
-
}
+
-
 
+
-
.sparator {
+
-
width: 100%;
+
-
}
+
-
 
+
-
.site-header, .about-me, .from-my-blog {
+
-
width: 75%;
+
-
}
+
-
 
+
-
@media all and (min-width:601px) and (max-width:1020px) {
+
-
.site-header, .about-me, .from-my-blog {
+
-
width: 82%;
+
-
}
+
-
}
+
-
 
+
-
.works, .works-hex, nav, .blog-excerpts-wrapper {
+
-
background-color: rgba(0,0,0,0.4);
+
-
}
+
-
 
+
-
 
+
-
/* ==========================================================================
+
-
  Navigation
+
-
  ========================================================================== */
+
-
 
+
-
nav {
+
-
height: 78px;
+
-
padding-bottom: 5px;
+
-
}
+
-
 
+
-
.top-ribbon {
+
-
height: 5px;
+
-
}
+
-
 
+
-
nav ul {
+
-
width: 75%;
+
-
min-width: 280px;
+
-
max-width: 826px;
+
-
margin: 0 auto;
+
-
padding: 0;
+
-
}
+
-
 
+
-
nav li {
+
-
float: right;
+
-
display: inline-block;
+
-
padding: 15px 10px 2px;
+
-
margin: 0 6px;
+
-
-webkit-border-radius: 0 0 7px 7px;
+
-
-moz-border-radius: 0 0 7px 7px;
+
-
border-radius: 0 0 7px 7px;
+
-
cursor: pointer;
+
-
}
+
-
 
+
-
.win nav li {
+
-
padding: 12px 10px 5px;
+
-
}
+
-
 
+
-
nav li:hover {
+
-
background-color: rgb(192, 23, 104);
+
-
text-shadow: 1px 1px 3px rgb(0, 0, 0);
+
-
}
+
-
 
+
-
 
+
-
/* ==========================================================================
+
-
  Hexagon shape defaults
+
-
  ========================================================================== */
+
-
 
+
-
.hexagon {
+
-
display: inline-block;
+
-
overflow: hidden;
+
-
visibility: hidden;
+
-
-webkit-transform: rotate(120deg);
+
-
  -moz-transform: rotate(120deg);
+
-
transform: rotate(120deg);
+
-
}
+
-
 
+
-
.hexagon-in1, .hexagon-in2 {
+
-
overflow: hidden;
+
-
display: block;
+
-
width: 100%;
+
-
height: 100%;
+
-
-webkit-transform: rotate(-60deg);
+
-
  -moz-transform: rotate(-60deg);
+
-
transform: rotate(-60deg);
+
-
}
+
-
 
+
-
.hexagon-in2 {
+
-
overflow: hidden;
+
-
visibility: visible;
+
-
background-color: rgba(46, 46, 46, 1);
+
-
}
+
-
 
+
-
 
+
-
/* ==========================================================================
+
-
  Works & Gallery effects
+
-
  ========================================================================== */
+
-
 
+
-
@media all and (min-width:1031px) {
+
-
 
+
-
.thumbnail {
+
-
-webkit-transition: all 0.2s ease-out;
+
-
  -moz-transition: all 0.2s ease-out;
+
-
transition: all 0.2s ease-out;
+
-
}
+
-
 
+
-
.thumbnail:hover {
+
-
-webkit-transition: all 0.2s ease-out;
+
-
  -moz-transition: all 0.2s ease-out;
+
-
transition: all 0.2s ease-out;
+
-
}
+
-
 
+
-
.works-hex .thumbnail:hover, .gallery-hex .thumbnail:hover {
+
-
width: 110%;
+
-
margin: 0 0 0 -5%;
+
-
}
+
-
 
+
-
.works .thumbnail, .gallery .thumbnail {
+
-
-webkit-filter: grayscale(1) sepia(0.03);
+
-
}
+
-
 
+
-
.works .thumbnail:hover , .gallery .thumbnail:hover {
+
-
-webkit-filter: grayscale(0) sepia(0);
+
-
}
+
-
}
+
-
 
+
-
 
+
-
/* ==========================================================================
+
-
  Works
+
-
  ========================================================================== */
+
-
 
+
-
.thumbnail {
+
-
width: 100%;
+
-
}
+
-
 
+
-
.works, .works-hex {
+
-
text-align: center;
+
-
overflow: hidden;
+
-
}
+
-
 
+
-
.category {
+
border: none;
border: none;
-
display: inline-block;
+
}
-
padding-bottom: 2%;
+
-
}
+
body{
-
 
+
-
.category:hover {
+
-
border: none;
+
-
}
+
-
 
+
-
.works .category {
+
-
width: 23%;
+
-
min-width: 90px;
+
-
max-width: 256px;
+
-
margin: 0 12px;
+
-
}
+
-
 
+
-
.four.works .category {
+
-
width: 17%;
+
-
min-width: 72px;
+
-
max-width: 186px;
+
-
margin: 0 11px;
+
-
}
+
-
 
+
-
.works-hex .category {
+
-
width: 25%;
+
-
min-width: 100px;
+
-
max-width: 270px;
+
-
margin: 0 1px;
+
-
}
+
-
 
+
-
@media all and (max-width:480px) {
+
-
 
+
-
.works-hex .category {
+
-
margin: 0;
+
-
}
+
-
}
+
-
 
+
-
@media all and (min-width:481px) and (max-width:1020px){
+
-
 
+
-
.works .category {
+
-
margin: 0 1.5% 0;
+
-
width: 25%;
+
-
}
+
-
 
+
-
.four.works .category {
+
-
margin: 0 1.5% 0;
+
-
width: 18%;
+
-
}
+
-
}
+
-
 
+
-
@media all and (max-width:480px) {
+
-
 
+
-
.works .category {
+
-
margin: 3% 1.5% 0;
+
-
width: 25%;
+
-
}
+
-
 
+
-
.four.works .category {
+
-
margin: 3% 0.5% 0;
+
-
width: 21%;
+
-
}
+
-
}
+
-
 
+
-
.works .thumbnail, .gallery .thumbnail {
+
-
-webkit-border-radius: 5px;
+
-
-moz-border-radius: 5px;
+
-
border-radius: 5px;
+
-
}
+
-
 
+
-
.wrapper {
+
-
display: inline-block;
+
-
position: relative;
+
-
overflow: hidden;
+
width: 100%;
width: 100%;
-
}
 
-
 
-
.works .wrapper {
 
-
margin: 10% 0 17% 0;
 
-
}
 
-
 
-
.works-hex .wrapper {
 
-
margin: 17% 0;
 
-
}
 
-
 
-
.works-hex .wrapper:after {
 
-
padding-top: 116%; /*ratio*/
 
-
display: block;
 
-
content: '';
 
-
}
 
-
 
-
.works-hex .hexagon {
 
-
position: absolute;
 
-
top: 0;
 
-
bottom: 0;
 
-
right: 0;
 
-
left: 0;
 
-
}
 
-
 
-
.category-name {
 
-
display: inline-block;
 
-
margin-top: -9%;
 
-
}
 
-
 
-
.win .category-name {
 
-
margin-top: -12%;
 
-
}
 
-
 
-
 
-
 
-
/* ==========================================================================
 
-
  Gallery
 
-
  ========================================================================== */
 
-
 
-
.gallery, .gallery-hex {
 
-
width: 85%;
 
-
min-width: 314px;
 
-
}
 
-
 
-
.gallery-hex {
 
-
max-width: 719px;
 
-
margin: 70px auto 90px;
 
-
}
 
-
 
-
.gallery {
 
-
max-width: 800px;
 
-
margin: 0 auto 90px;
 
-
}
 
-
 
-
.gallery .wrapper, .gallery-hex .wrapper {
 
-
display: inline-block;
 
-
position: relative;
 
-
overflow: hidden;
 
-
 
-
}
 
-
 
-
.gallery-hex .wrapper {
 
-
width: 32%;
 
-
margin: -9.3% 0.2% 0;
 
-
}
 
-
 
-
.gallery .wrapper {
 
-
width: 29%;
 
-
min-width: 100px;
 
-
margin: 2%  1.6%;
 
-
}
 
-
 
-
.gallery .hexagon a {
 
-
border: none;
 
margin: 0;
margin: 0;
-
}
+
padding: 0;
-
 
+
background-color:none;
-
@media all and (max-width:800px) {
+
-
 
+
-
.gallery-hex {
+
-
padding: 0 0 100px 1.9%;
+
-
margin-top: 6%;
+
-
}
+
-
}
+
-
 
+
-
@media all and (max-width:320px) {
+
-
 
+
-
.gallery {
+
-
margin-left: 5px;
+
-
}
+
-
 
+
-
.gallery .wrapper {
+
-
margin: 0 0 7px;
+
-
}
+
-
}
+
-
 
+
-
.gallery-hex .wrapper:after {
+
-
padding-top: 116%;
+
-
display: block;
+
-
content: '';
+
-
}
+
-
 
+
-
.gallery-hex .wrapper:hover {
+
-
z-index: 100;
+
-
}
+
-
 
+
-
.gallery-hex .hexagon {
+
-
position: absolute;
+
-
top: 0;
+
-
bottom: 0;
+
-
right: 0;
+
-
left: 0;
+
-
}
+
-
 
+
-
.gallery-hex .wrapper:nth-child(5n+4) {
+
-
margin-left: 16.75%;
+
-
}
+
-
 
+
-
.gallery-hex .hexagon a {
+
border: none;
border: none;
-
margin: 0;
+
}
-
}
+
#globalwrapper{
-
 
+
-
 
+
-
/* ==========================================================================
+
-
  Single work
+
-
  ========================================================================== */
+
-
 
+
-
.single-work {
+
-
margin: 60px 0 90px;
+
-
}
+
-
 
+
-
.description, .image {
+
-
display: inline-block;
+
-
vertical-align: top;
+
-
}
+
-
 
+
-
.image {
+
-
width: 67%;
+
-
margin-left: 2em;
+
-
}
+
-
 
+
-
.description {
+
-
width: 29%;
+
-
box-sizing: border-box;
+
-
padding: 0 2em;
+
-
margin-left: -4px;
+
-
}
+
-
 
+
-
.image img {
+
width: 100%;
width: 100%;
-
-webkit-border-radius: 3px;
 
-
-moz-border-radius: 3px;
 
-
border-radius: 3px;
 
-
}
 
-
 
-
.image footer {
 
-
margin-top: 20px;
 
-
text-align: center;
 
-
}
 
-
 
-
@media all and (max-width:1020px) {
 
-
 
-
.single-work {
 
-
margin-top: 56px;
 
-
}
 
-
 
-
.image {
 
-
width: 100%;
 
-
padding: 0;
 
-
margin-left: 0;
 
-
}
 
-
 
-
.description {
 
-
width: 100%;
 
-
padding: 0 2em;
 
-
margin: 45px 0 0 0;
 
-
}
 
-
 
-
.image img {
 
-
-webkit-border-radius: 0px;
 
-
-moz-border-radius: 0px;
 
-
border-radius: 0px;
 
-
}
 
-
}
 
-
 
-
 
-
@media all and (min-width:1601px) {
 
-
 
-
.image {
 
-
width: 73%;
 
-
}
 
-
 
-
.description {
 
-
width: 20%;
 
-
padding: 0 2%;
 
-
}
 
-
}
 
-
 
-
.gallery .wrapper a {
 
-
border: none;
 
-
margin: 0;
 
-
padding: 0;
 
-
}
 
-
 
-
/* ==========================================================================
 
-
  Home button
 
-
  ========================================================================== */
 
-
 
-
.home {
 
-
position: absolute;
 
-
top: 6px;
 
-
left: 10px;
 
-
font-size: 34px;
 
-
}
 
-
 
-
.home a {
 
-
margin: 0;
 
-
border: none;
 
-
 
-
-webkit-transition: all 0.2s ease-out;
 
-
  -moz-transition: all 0.2s ease-out;
 
-
transition: all 0.2s ease-out;
 
-
}
 
-
 
-
.home a:hover {
 
-
-webkit-transition: all 0.2s ease-out;
 
-
  -moz-transition: all 0.2s ease-out;
 
-
transition: all 0.2s ease-out;
 
-
}
 
-
 
-
 
-
/* ==========================================================================
 
-
  Footer
 
-
  ========================================================================== */
 
-
 
-
.contact {
 
-
margin: 45px 15px 15px;
 
-
}
 
-
 
-
.copyright {
 
-
margin: 0 15px 30px;
 
-
}
 
-
 
-
 
-
/* ==========================================================================
 
-
  Helper classes
 
-
  ========================================================================== */
 
-
 
-
/*
 
-
* Image replacement
 
-
*/
 
-
 
-
.ir {
 
-
background-color: transparent;
 
-
border: 0;
 
-
overflow: hidden;
 
-
/* IE 6/7 fallback */
 
-
*text-indent: -9999px;
 
-
}
 
-
 
-
.ir:before {
 
-
content: "";
 
-
display: block;
 
-
width: 0;
 
height: 100%;
height: 100%;
 +
background: none;
}
}
-
/*
+
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
-
* Hide from both screenreaders and browsers: h5bp.com/u
+
    display:none;}
-
*/
+
#top-section {
-
 
+
    border: none;
-
.hidden {
+
    height: 0px;}
-
display: none !important;
+
#content {
-
visibility: hidden;
+
    border: none;}
-
}
+
/* Removes "teams" from the menubar */
-
 
+
#menubar > ul > li:last-child {
-
/*
+
    display: none;}
-
* Hide only visually, but have it available for screenreaders: h5bp.com/v
+
/* Resizes the menubar to fik the links (default is 400px) */
-
*/
+
#menubar {
-
 
+
    width: auto;}
-
.visuallyhidden {
+
body {
-
border: 0;
+
    margin: 10px 0 0 0;
-
clip: rect(0 0 0 0);
+
    padding: 0;}
-
height: 1px;
+
#top-section {
-
margin: -1px;
+
    width: 965px;
-
overflow: hidden;
+
    height: 0;
-
padding: 0;
+
    margin: 0 auto;
-
position: absolute;
+
    padding: 0;
-
width: 1px;
+
    border: none;}
-
}
+
#menubar {
-
 
+
    font-size: 65%;
-
/*
+
    top: -14px;}
-
* Extends the .visuallyhidden class to allow the element to be focusable
+
.left-menu:hover {
-
* when navigated to via the keyboard: h5bp.com/p
+
    background-color: transparent;}
-
*/
+
#menubar li a {
-
 
+
    background-color: transparent;}
-
.visuallyhidden.focusable:active,
+
#menubar:hover {
-
.visuallyhidden.focusable:focus {
+
    color: white;}
-
clip: auto;
+
#menubar li a {
-
height: auto;
+
    color: transparent;}
-
margin: 0;
+
#menubar:hover li a {
-
overflow: visible;
+
    color: white;}
-
position: static;
+
-
width: auto;
+
-
}
+
-
 
+
-
/*
+
-
* Hide visually and from screenreaders, but maintain layout
+
-
*/
+
-
 
+
-
.invisible {
+
-
visibility: hidden;
+
-
}
+
-
 
+
-
/*
+
-
* Clearfix: contain floats
+
-
*
+
-
* For modern browsers
+
-
* 1. The space content is one way to avoid an Opera bug when the
+
-
*    `contenteditable` attribute is included anywhere else in the document.
+
-
*    Otherwise it causes space to appear at the top and bottom of elements
+
-
*    that receive the `clearfix` class.
+
-
* 2. The use of `table` rather than `block` is only necessary if using
+
-
*    `:before` to contain the top-margins of child elements.
+
-
*/
+
-
 
+
-
.clearfix:before,
+
-
.clearfix:after {
+
-
content: " "; /* 1 */
+
-
display: table; /* 2 */
+
-
}
+
-
 
+
-
.clearfix:after {
+
-
clear: both;
+
-
}
+
-
 
+
-
/*
+
-
* For IE 6/7 only
+
-
* Include this rule to trigger hasLayout and contain floats.
+
-
*/
+
-
 
+
-
.clearfix {
+
-
*zoom: 1;
+
-
}
+
-
 
+
-
 
+
-
/* ==========================================================================
+
-
  Print styles.
+
-
  Inlined to avoid required HTTP connection: h5bp.com/r
+
-
  ========================================================================== */
+
-
 
+
-
@media print {
+
-
* {
+
-
background: transparent !important;
+
-
color: #000 !important; /* Black prints faster: h5bp.com/s */
+
-
box-shadow:none !important;
+
-
text-shadow: none !important;
+
-
}
+
-
 
+
-
a,
+
-
a:visited {
+
-
text-decoration: underline;
+
-
}
+
-
 
+
-
a[href]:after {
+
-
content: " (" attr(href) ")";
+
-
}
+
-
 
+
-
abbr[title]:after {
+
-
content: " (" attr(title) ")";
+
-
}
+
-
 
+
-
/*
+
-
* Don't show links for images, or javascript/internal links
+
-
*/
+
-
 
+
-
.ir a:after,
+
-
a[href^="javascript:"]:after,
+
-
a[href^="#"]:after {
+
-
content: "";
+
-
}
+
-
 
+
-
pre,
+
-
blockquote {
+
-
border: 1px solid #999;
+
-
page-break-inside: avoid;
+
-
}
+
-
 
+
-
thead {
+
-
display: table-header-group; /* h5bp.com/t */
+
-
}
+
-
 
+
-
tr,
+
-
img {
+
-
page-break-inside: avoid;
+
-
}
+
-
 
+
-
img {
+
-
max-width: 100% !important;
+
-
}
+
-
 
+
-
@page {
+
-
margin: 0.5cm;
+
-
}
+
-
 
+
-
p,
+
-
h2,
+
-
h3 {
+
-
orphans: 3;
+
-
widows: 3;
+
-
}
+
-
 
+
-
h2,
+
-
h3 {
+
-
page-break-after: avoid;
+
-
}
+
-
}
+
</style>
</style>
 +
<!--<link href="style.css" rel="stylesheet" type="text/css">-->
 +
<link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
 +
<link href="https://e65ae602ef428322892bf5f667f9d51420f9cd4d.googledrive.com/host/0B21Mp8HDTzNfV3llTVVETkdxSjA/style.css" rel="stylesheet" type="text/css">
-
<script>
+
</head>
-
document.cookie='resolution='+Math.max(screen.width,screen.height)+("devicePixelRatio" in window ? ","+devicePixelRatio : ",1")+'; path=/';
+
-
</script><!-- Responsive images -->
+
-
</head>
+
-
<body>
+
-
<!--[if lt IE 7]>
+
-
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
+
-
<![endif]-->
+
-
 
+
-
<div class="top-ribbon"></div>
+
-
<div class="home"><a href="index.html"><i class="icon-home"></i></a></div>
+
-
 
+
-
 
+
-
+
-
 
+
-
<section class="gallery-hex">
+
-
 
+
-
<div class="wrapper">
+
-
<div class="hexagon">
+
-
<div class="hexagon-in1">
+
-
<div class="hexagon-in2">
+
-
<a href="single-image.html">
+
-
<img class="thumbnail" src="https://static.igem.org/mediawiki/2014hs/d/dd/Brandon.png" alt="thumbnail"></a>
+
-
</div>
+
-
</div>
+
-
</div><!--hexagon-->
+
-
</div><!--wrapper-->
+
-
 
+
-
<div class="wrapper">
+
-
<div class="hexagon">
+
-
<div class="hexagon-in1">
+
-
<div class="hexagon-in2">
+
-
<a href="single-image.html">
+
-
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
+
-
</div>
+
-
</div>
+
-
</div><!--hexagon-->
+
-
</div><!--wrapper-->
+
-
 
+
-
<div class="wrapper">
+
-
<div class="hexagon">
+
-
<div class="hexagon-in1">
+
-
<div class="hexagon-in2">
+
-
<a href="single-image.html">
+
-
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
+
-
</div>
+
-
</div>
+
-
</div><!--hexagon-->
+
-
</div><!--wrapper-->
+
-
 
+
-
<div class="wrapper">
+
-
<div class="hexagon">
+
-
<div class="hexagon-in1">
+
-
<div class="hexagon-in2">
+
-
<a href="single-image.html">
+
-
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
+
-
</div>
+
-
</div>
+
-
</div><!--hexagon-->
+
-
</div><!--wrapper-->
+
-
 
+
-
<div class="wrapper">
+
-
<div class="hexagon">
+
-
<div class="hexagon-in1">
+
-
<div class="hexagon-in2">
+
-
<a href="single-image.html">
+
-
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
+
-
</div>
+
-
</div>
+
-
</div><!--hexagon-->
+
-
</div><!--wrapper-->
+
-
<div class="wrapper">
+
<body>
-
<div class="hexagon">
+
<div id="navbar-wrapper" class="nav">
-
<div class="hexagon-in1">
+
<div id="inside-wrapper">
-
<div class="hexagon-in2">
+
    <div id="logo-holder">
-
<a href="single-image.html">
+
          Logo Will Go Here
-
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
+
      </div>
-
</div>
+
        <nav id="navbar">
-
</div>
+
          <a style="padding-left: 0;" href="index.html">Home</a>
-
</div><!--hexagon-->
+
            <a href="Team:TP_CC-SanDiego/Project.html" style="border-bottom: 1px solid #e8e8e8;">Project</a>
-
</div><!--wrapper-->
+
                <a href="Team:TP_CC-SanDiego/Results.html">Results</a>
 +
            <a href="Team:TP_CC-SanDiego/TheTeam.html">The Team</a>
 +
            <a href="Team:TP_CC-SanDiego/Journal.html">Journal</a>
 +
                <a href="Team:TP_CC-SanDiego/Outreach.html">Outreach</a>
 +
            <a href="Team:TP_CC-SanDiego/Safety.html">Safety</a>
 +
            <a href="igem.org" style="padding-right: 0;">iGEM</a>
 +
    </nav>
 +
    </div>
 +
    <div id="inside-wrapper-second">
 +
    <div id="secondnav">
 +
          <a href="#header-holder">Background</a>
 +
          <a href="#linkheadertwo">Idea</a>
 +
        <a href="#linkheaderthree">How</a>
 +
        </div>
 +
    </div>
 +
</div>
 +
   
 +
<!--<div id="phase-wrapper">
 +
  <div id="first-phase">
 +
      <img src="images/front page diagram white 3.png" width="400px" height="400px"/><br />
 +
<a href="#header-text">See Statistics</a>
 +
    </div>
 +
</div>-->
 +
 
 +
<div id="header-holder">
 +
<div id="header-text">
 +
        Background<br />
 +
    <span style="font-family: 'HelveticaNeueLT Pro 25 UltLt'; font-size: 18px;">The Project Background and Explanation</span>
 +
    </div>
 +
</div>
 +
   
 +
<div id="second-phase-wrapper">
 +
  <div id="second-phase">
 +
  <div id="first-statistic">
 +
      <img src="images/600px-White_Globe_Icon.png" width="150px" height="150px" /><br />
 +
            AflatoxinB1-Detoxifizyme is produced by <a style="text-decoration:underline; color:black; font-size: 18px; background: none; padding:0px;" href="http://www.ncbi.nlm.nih.gov/pubmed/21239152">Armillariella Tabescens</a> intracellularly. Its gene is analyzed to have no introns and has been recombined into a plasmid <a style="text-decoration:underline; color:black; font-size: 18px; background: none; padding:0px;" href="https://www.legionpatent.com/patents/7695751/">before</a>. Extraction is rather difficult and commercialization has not been able to be done yet.
 +
      </div>
 +
<div id="second-statistic">
 +
      <img src="images/600px-White_Globe_Icon.png" width="150px" height="150px" /><br />
 +
            Zearalenone Hydorlase is produced by Clonostachys Rosea. Its gene is also analyzed to have no introns and has been recombined into a plasmid <a style="text-decoration:underline; color:black; font-size: 18px; background: none; padding:0px;" href="http://www.ncbi.nlm.nih.gov/pmc/articles/PMC1222652/">before</a>. Similar to ADTZ, commercialization has not been done yet.
 +
        <div id="third-phase-button"><br /></div>
 +
        </div>
 +
    <div id="third-statistic">
 +
      <img src="images/600px-White_Globe_Icon.png" width="150px" height="150px" /><br />
 +
            Natural E. coli secretes various proteins by signal peptides that recognize translocons. We focus on the SEC pathway that lets the protein fold in the periplasm first, as it usually results in more correct folding, correct formation of disulfide bridges, minimizes degradation, and is less likely to result in accumulation.
 +
    </div>
 +
    </div>
 +
</div>
-
<div class="wrapper">
+
<div id="header-holder">
-
<div class="hexagon">
+
<div id="linkheadertwo"></div>
-
<div class="hexagon-in1">
+
<div id="header-text">
-
<div class="hexagon-in2">
+
        Idea<br />
-
<a href="single-image.html">
+
    <span style="font-family: 'HelveticaNeueLT Pro 25 UltLt'; font-size: 18px;">E. Coli Capable of Extracelluar Secretion of Mycotoxin Detoxifying Enzymes</span>
-
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
+
    </div>
-
</div>
+
</div>
-
</div>
+
-
</div><!--hexagon-->
+
-
</div><!--wrapper-->
+
-
<div class="wrapper">
+
<div id="phase-wrapper" style="background:url(images/blue-blue.png);">
-
<div class="hexagon">
+
  <div id="third-phase">
-
<div class="hexagon-in1">
+
    <img src="images/image.png" width="1070" height="292"/>
-
<div class="hexagon-in2">
+
    <div id="third-text"> Our idea is to attach signal peptides to the N-terminus of the detoxifying enzymes. We use alpha amylase <a href="http://www.signalpeptide.com/index.php?sess=&m=listspdb_bacteria&s=details&id=37&listname=">signal peptides</a> and
-
<a href="single-image.html">
+
    beta-lactamase <a href="http://www.signalpeptide.com/index.php?sess=&m=listspdb_bacteria&s=details&id=34&listname=">signal peptides</a>. The original proteins for these signal peptides are secreted out naturally by E. Coli, especially in strain K that we use for our project. They both follow sec-dependent pathways. In the case of beta-lactamase signal protein, cases have been shown of successful fusion proteins secreted by the beta-lactamase signal protein (link to: http://www.ncbi.nlm.nih.gov/pubmed/6607473). Successful continual excretion of the mycotoxin degradation enzymes can be purified in mass amounts periodically, or the chimeric E. Coli can be placed directly on crops to prevent </div>
-
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
+
</div>
-
</div>
+
</div>
-
</div>
+
-
</div><!--hexagon-->
+
-
</div><!--wrapper-->
+
-
<div class="wrapper">
+
<div id="header-holder">
-
<div class="hexagon">
+
<div id="linkheaderthree"></div>
-
<div class="hexagon-in1">
+
<div id="header-text">
-
<div class="hexagon-in2">
+
        How<br />
-
<a href="single-image.html">
+
    <span style="font-family: 'HelveticaNeueLT Pro 25 UltLt'; font-size: 18px;">The Process to Complete our Project</span>
-
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
+
    </div>
-
</div>
+
</div>
-
</div>
+
-
</div><!--hexagon-->
+
-
</div><!--wrapper-->
+
-
<div class="wrapper">
+
<div id="phase-wrapper" style="background:url(images/blue-blue.png);">
-
<div class="hexagon">
+
  <div id="third-phase">
-
<div class="hexagon-in1">
+
    Project 1 - 9
-
<div class="hexagon-in2">
+
    </div>
-
<a href="single-image.html">
+
</div>
-
<img class="thumbnail" src="img/placeholder.jpg" alt="thumbnail"></a>
+
-
</div>
+
-
</div>
+
-
</div><!--hexagon-->
+
-
</div><!--wrapper-->
+
-
</section><!--works-->
+
<div id="sponsor-footer-wrapper">
 +
<div id="sponsor-footer">
 +
    SPONSORS
 +
    </div>
 +
</div>
-
+
</body>
-
+
-
</body>
+
</html>
</html>

Latest revision as of 21:45, 19 June 2014

iGEM San Diego - Project

Background
The Project Background and Explanation

AflatoxinB1-Detoxifizyme is produced by Armillariella Tabescens intracellularly. Its gene is analyzed to have no introns and has been recombined into a plasmid before. Extraction is rather difficult and commercialization has not been able to be done yet.

Zearalenone Hydorlase is produced by Clonostachys Rosea. Its gene is also analyzed to have no introns and has been recombined into a plasmid before. Similar to ADTZ, commercialization has not been done yet.


Natural E. coli secretes various proteins by signal peptides that recognize translocons. We focus on the SEC pathway that lets the protein fold in the periplasm first, as it usually results in more correct folding, correct formation of disulfide bridges, minimizes degradation, and is less likely to result in accumulation.
Idea
E. Coli Capable of Extracelluar Secretion of Mycotoxin Detoxifying Enzymes
Our idea is to attach signal peptides to the N-terminus of the detoxifying enzymes. We use alpha amylase signal peptides and beta-lactamase signal peptides. The original proteins for these signal peptides are secreted out naturally by E. Coli, especially in strain K that we use for our project. They both follow sec-dependent pathways. In the case of beta-lactamase signal protein, cases have been shown of successful fusion proteins secreted by the beta-lactamase signal protein (link to: http://www.ncbi.nlm.nih.gov/pubmed/6607473). Successful continual excretion of the mycotoxin degradation enzymes can be purified in mass amounts periodically, or the chimeric E. Coli can be placed directly on crops to prevent
How
The Process to Complete our Project
Project 1 - 9

Retrieved from "http://2014hs.igem.org/Team:TP_CC-SanDiego/Project"