Difference between revisions of "Team:Warwick/Description"

m
 
(24 intermediate revisions by 5 users not shown)
Line 1: Line 1:
 
<html>
 
<html>
−
<head>
 
−
<link rel="stylesheet" type="text/css" href="https://2019.igem.org/Team:warwick/CSS/stylesheet.css">
 
−
<link href="https://fonts.googleapis.com/css?family=Simonetta&display=swap" rel="stylesheet">
 
  
−
<style>  
+
<link rel="stylesheet" href="https://2019.igem.org/Template:Warwick/CSS/RotateScriptor?action=raw&ctype=text/css">
 +
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 +
</html>
 +
{{Template:Warwick/Navbar}}
  
−
/* fixing igem custom settings */
+
<html>
−
#top_title{
+
<script>
−
  display:none !important;
+
var amountToTurn = 0;
−
}
+
var previousTeam = 0;
  
−
#HQ_page p{
+
function rotate(newTeam){
−
  padding: 0;
+
dif  = newTeam - previousTeam;
−
  margin: 0;
+
if(dif == 1 || dif == -2){
−
  text-align: inherit !important;
+
amountToTurn += 120;
−
  all:unset;
+
}
 +
else if(dif == -1 || dif == 2){
 +
amountToTurn -= 120;
 +
}
  
−
}
+
    $("#BOIStriangle").css('transform', 'rotate(' + amountToTurn + 'deg)');
 +
    $("#BOISContent").css('transform', 'rotate(' + (-1*amountToTurn) + 'deg)');
 +
    $("#hamIMG").css('transform', 'rotate(' + (-1*amountToTurn) + 'deg)');
 +
$("#dnaIMG").css('transform', 'rotate(' + (-1*amountToTurn) + 'deg)');
 +
    $("#pencilIMG").css('transform', 'rotate('+ (-1*amountToTurn) + 'deg)');
  
−
#content{
+
    h3content = $("#BCTitle");
−
  width: 100% !important;
+
    pcontent = $("#BCText");
−
  margin: 0;
+
 
−
  padding: 0;
+
    switch(newTeam){
−
  background-color: #FFFFFF !important;
+
    case 0:
−
}
+
    h3content.html("Degradation");
−
#bodycontent {
+
    pcontent.html("Utilising the properties of lipase enzymes in bacteria to break down fatbergs into fatty acids and triglycerides to break down solid masses of fatbergs.");
−
background-color: #FFFFFF !important;
+
    break;
 +
    case 1:
 +
h3content.html("Sequencing");
 +
    pcontent.html("Understanding the DNA ecology of organisms inhabiting fatbergs to find lipase genes.");
 +
    break;
 +
    case 2:
 +
h3content.html("Prevention");
 +
    pcontent.html("Ensuring that every level of society is aware that fatberg formation is solely from human activity and can be solved from better waste disposal measures.");
 +
    break;
 +
    }
 +
 
 +
    previousTeam = newTeam;
 
}
 
}
−
/* end of igem custom settings */
 
  
−
body {  
+
function reset(){
−
background-color: #FFFFFF !important;
+
$("#BottNav").hide();
 
}
 
}
 +
                </script>
  
 +
<script>
 +
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
  
−
/* NavBar settings and identifiers */
+
$(document).ready(function() {
−
#navbar {  
+
−
list-style-type: none !important;
+
−
margin: 0 !important;
+
−
padding: 0 !important;
+
−
overflow: hidden !important;
+
−
background-color:#F5B433 !important;
+
−
list-style-image: none !important;
+
−
}
+
  
−
#navbarbutton {
+
//remove the HQ_page id
−
float: left !important;
+
$("#HQ_page").attr('id','');
−
}
+
  
−
#navbarbutton:hover {
+
//highlight current page on the menu
−
  background-color: #3B3838;
+
highlight_current_page_menu();
−
color:white;
+
−
}
+
//accessing submenus
 +
$(".menu_item").click(function(){
 +
$(".submenu_control_icon", this).toggleClass("open");
 +
$(this).next(".submenu").fadeToggle(400);
 +
});
 +
 +
//mobile menu access
 +
$(".igem_2019_team_mobile_bar").click(function(){
 +
$(this).next().toggleClass("displaying_menu");
 +
});
 +
 +
});
  
−
#navbarbuttontext {
 
−
display: block;
 
−
  color: white;
 
−
font-size:15px;
 
−
  text-align: center;
 
−
  padding: 14px 16px;
 
−
  text-decoration: none;
 
−
  font-family: 'Simonetta', serif !important;
 
−
}
 
  
−
/* end of navbar */
+
function highlight_current_page_menu() {
 +
 +
var page_url="https://2019.igem.org/";
 +
page_url = page_url + wgPageName;
 +
$("a[href$='"+ page_url +"']").children().addClass("current_page");
 +
 +
//if the page is in a submenu, open the submenu and make the appropiate changes
 +
if( $( ".current_page" ).hasClass( "submenu_item" )){
 +
 +
$(".current_page").parent().parent().fadeToggle(400);
 +
$(".current_page").parent().parent().prev().addClass("current_page");
 +
$(".menu_item.current_page > .submenu_control_icon").toggleClass("open");
 +
 +
}
 +
}
  
−
/*Start of first title screen */
 
  
−
#titlescreen {
+
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
−
height:50vh;
+
</script>
−
}
+
  
−
#fattitle {
 
−
color:#F5B433 !important;
 
−
font-size: 100px !important;
 
−
font-family: 'Simonetta', serif !important;
 
−
position: relative;
 
−
left:70px;
 
−
top:100px;
 
−
overflow: visible;
 
−
}
 
  
−
#bottomtitle { 
+
<style>
−
position: relative;
+
/**************************************************************************************************************************************************************************************************/
−
left:70px;
+
−
top:60px;
+
−
color:#A5B994 !important;
+
−
font-family: 'Simonetta', serif !important;
+
−
display: block !important;
+
−
overflow: visible;
+
−
}
+
  
−
/* end of title screen */  
+
/**************************************************************************************************************************************************************************************************/
 +
/* DEFAULT WIKI SETTINGS */
 +
/**************************************************************************************************************************************************************************************************/
  
−
/* start of "body" section */
 
  
−
#bodysectiontitle {
+
#home_logo, #sideMenu { display:none; }
−
color:#F5B433;
+
#sideMenu, #top_title, .patrollink  {display:none;}
−
font-size: 50px;
+
#content { margin-left:0px; margin-top:-7px; padding:0px; width:100%;}
−
font-family: 'Simonetta', serif !important;
+
body {background-color:#fff; }
−
overflow: visible;
+
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
}
+
#bodyContent a[href ^="https://"], .link-https { padding-right:0px;}
  
−
#paragraphtext {
 
−
color:#A5B994 !important;
 
−
font-family: 'Simonetta', serif !important;
 
−
font-size: 20px !important;
 
−
word-wrap: break-word !important;
 
−
text-align: inter-word !important;
 
−
}
 
  
−
#paragraph {
+
/**************************************************************************************************************************************************************************************************/
−
background-color: ;
+
/* MENU */
−
position: relative;
+
/**************************************************************************************************************************************************************************************************/
−
left:10%;
+
 
−
width: 900px;
+
/*wrapping for the menu*/
−
padding-right: 1.5%;
+
.igem_2019_team_menu {  
−
text-align: inter-word !important;
+
background-color:#cecece;
−
}
+
border-left: 1px solid #635d5d;
 +
float:right;
 +
height:100vh;
 +
max-width: 270px;
 +
overflow-y: auto;
 +
overflow-x: hidden;
 +
padding:0px;
 +
position:fixed;  
 +
right:0%;
 +
text-align:left;
 +
width: 15%;
 +
}
 +
 
 +
/*controlling menu visibility*/
 +
.igem_2019_team_menu.displaying_menu{
 +
display:block;
 +
}
 +
 
 +
/*links in the menu*/
 +
.igem_2019_team_menu  a {
 +
color: #484848;
 +
text-decoration:none;
 +
}
 +
 
 +
/*images in the menu*/
 +
.igem_2019_team_menu img {
 +
width:100%;
 +
}
 +
 
 +
/*level 1 menu items*/
 +
.igem_2019_team_menu .menu_item {
 +
    background-color: #cecece;
 +
    border-bottom: 1px solid #635d5d;
 +
    clear: both;
 +
color: #484848;
 +
    cursor: pointer;
 +
float: left;
 +
    font-size: 120%;
 +
    font-weight: bold;
 +
    padding: 15px 0px 15px 5%;
 +
  width: 100%;
 +
}
 +
 
 +
/*level 1 menu items without submenus*/
 +
.igem_2019_team_menu .menu_item.direct_link {
 +
color: #484848;
 +
padding-left: 15%;
 +
}
 +
 +
/*level 1 menu items on hover*/
 +
.igem_2019_team_menu .menu_item:hover {
 +
background-color: #ecb656 !important;
 +
}
 +
 
 +
/*icon for expanding and collapsing level 1 menut items*/
 +
.igem_2019_team_menu .menu_item .submenu_control_icon {
 +
color: #484848;
 +
float: left;
 +
width: 10%;
 +
}
 +
 
 +
/* submenu icon  "-"*/
 +
.igem_2019_team_menu .menu_item .submenu_control_icon::before {
 +
content: "+";
 +
}
 +
 
 +
/* submenu icon  "-"*/
 +
.igem_2019_team_menu .menu_item .submenu_control_icon.open::before {
 +
content: "-";
 +
}
 +
 
 +
 +
/*level 2 menu (submenu) wrapper*/
 +
.igem_2019_team_menu .submenu{
 +
background-color: #ececec;
 +
clear:both;
 +
display:none;
 +
float: left; 
 +
width:100%;
 +
}
 +
 
 +
/*level 2 menu (submenu) item*/
 +
.igem_2019_team_menu .submenu .submenu_item {
 +
border-bottom: 1px solid #cecece;
 +
  color: #635d5d;
 +
    height: 30px;
 +
  float: left;
 +
    font-size: 110%;
 +
font-weight: bold;
 +
    padding: 12px 0px 0px 15%;
 +
    width: 100%;
 +
}
 +
 
 +
/*level 2 menu (submenu) items on hover*/
 +
.igem_2019_team_menu .submenu .submenu_item:hover {
 +
background-color: #ecb656 !important;
 +
}
 +
 
 +
/*color for highlighting current page on the wiki*/
 +
.igem_2019_team_menu .submenu .submenu_item.current_page,
 +
.igem_2019_team_menu .menu_item.current_page,
 +
.igem_2019_team_menu .menu_item.direct_link.current_page {
 +
background-color:#a2d3d0;
 +
}
 +
 
 +
 
 +
/*mobile menu bar styling*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*mobile bar that controls the menu*/
 +
.igem_2019_team_mobile_bar {
 +
background-color:#ececec;
 +
border-bottom: 1px solid #cecece;
 +
cursor:pointer;
 +
display:none;
 +
float:left;
 +
margin-top: 0;
 +
padding: 5px 0;
 +
position:fixed;
 +
width:100%;
 +
}
 +
 +
/*mobile logo*/
 +
.igem_logo_mobile {
 +
float:left;
 +
padding-left: 5%;
 +
width: 30%;
 +
}
 +
 
 +
/*image within the mobile logo*/
 +
.igem_logo_mobile img {
 +
width:70px;
 +
}
 +
 +
/*mobile expand collapse button*/
 +
.igem_menu_control_mobile {
 +
float:right;
 +
padding-right:5%;
 +
padding-top:5px;
 +
text-align:right;
 +
width: 30%;
 +
}
 +
 
 +
/*image for mobile expand collapse button*/
 +
.igem_menu_control_mobile img {
 +
width:25px;
 +
}
 +
 
 +
 
 +
/*add extra padding to the menu to improve mobile scrolling*/
 +
.menu_padding{
 +
float:left;
 +
height:100px;
 +
}
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
/* CONTENT OF THE PAGE */
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/* general wrapper for the content */
 +
.igem_2019_team_content {
 +
background-color:#393939;
 +
display:block;
 +
width: 87%;
 +
}
 +
 
 +
/* subwrapper to center content */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper {
 +
margin:auto;
 +
max-width: 1400px;
 +
width:90%;
 +
}
 +
 
 +
 
 +
 
 +
/*general styling*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*size for title h tags*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h1 { font-size: 210%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h2 { font-size: 190%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h3 { font-size: 170%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h4 { font-size: 150%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h5 { font-size: 140%;}
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h6 { font-size: 130%;}
 +
 
 +
 
 +
/*titles h1, h2*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h1, .igem_2019_team_content .igem_2019_team_column_wrapper h2 {
 +
border-bottom:0px;
 +
color: #635d5d;
 +
font-family: "Arial Black", Gadget, sans-serif;
 +
padding: 10px 0px;
 +
}
 +
 
 +
/*titles h3, h3, h5, h6 */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h3,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h4,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h5,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper h6 {
 +
border-bottom:0px;
 +
color: #635d5d; 
 +
font-family: "Arial Black", Gadget, sans-serif;
 +
padding: 5px 0px;
 +
}
 +
 
 +
/* text p tag*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper p {
 +
font-size: 130%;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding: 5px 0px;
 +
text-align: left;
 +
color: #484848;
 +
}
 +
 
 +
/* Links a tag*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper a {
 +
color: #00a19b;
 +
font-weight: bold;
 +
text-decoration: underline;
 +
text-decoration-color:#00a19b;
 +
transition: all 0.4s ease;
 +
-webkit-transition: all 0.4s ease;
 +
-moz-transition: all 0.4s ease;
 +
-ms-transition: all 0.4s ease;
 +
-o-transition: all 0.4s ease;
 +
}
 +
 
 +
/* hover for the links */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper a:hover {
 +
color: #085156;
 +
text-decoration:none;
 +
}
 +
 
 +
 
 +
/* Table tag*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper table {
 +
border: 1px solid #635d5d;
 +
border-collapse: collapse;
 +
font-size: 130%;
 +
width: 100%;
 +
}
 +
 
 +
/* table cells */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper td {
 +
border: 1px solid #cecece;
 +
border-collapse: collapse;
 +
font-size: 105%;
 +
padding: 10px;
 +
vertical-align: text-top;
 +
}
 +
 
 +
/* table headers */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper th {
 +
background-color:#cecece;
 +
border: 1px solid #635d5d;
 +
border-collapse: collapse;
 +
font-size: 110%;
 +
padding: 10px;
 +
vertical-align: text-top;
 +
}
 +
 
 +
 
 +
 
 +
/* non numbered lists */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ul, .igem_2019_team_content .igem_2019_team_column_wrapper ol {
 +
font-size: 130%;
 +
font-family: Arial, Helvetica, sans-serif;
 +
padding:0px 20px;
 +
}
 +
 
 +
 
 +
/*font sizing within list nesting*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ul li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ul ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ul ol li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ul li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ul ol ol li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ul ul li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ol ul li,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper ol ol ol li, .igem_2019_team_content .igem_2019_team_column_wrapper ol ul ol li{ font-size: 76%; }
 +
 
 +
 
 +
 
 +
/*layout classes*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
/*main layout class */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column  {
 +
float:left;
 +
margin: 1% 2%;
 +
padding: 0px;
 +
}
 +
 
 +
/* 100% */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size { width:96%; }
 +
 
 +
/* 66% */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size { width: 62.6%; }
 +
 
 +
/* 33% */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size { width: 29.3%; }
 +
 
 +
 
 +
 
 +
 
 +
/*all images*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size img,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size img,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size img {
 +
margin-bottom: 15px;
 +
width: 100%;
 +
}
 +
 
 +
 
 +
/* page break */
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .clear {
 +
clear:both;
 +
}
 +
/*add extra space to page break with clear class*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .clear.extra_space {
 +
height: 30px;
 +
}
 +
 
 +
/* horizontal line to divide the page*/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .line_divider {
 +
    border-top: 1px solid #cecece;
 +
  margin: auto;
 +
  width: 98%;
 +
}
 +
 
 +
 
 +
 
 +
 +
/*support classes*/
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
 
 +
/*Button  */
 +
/************************************************/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link {
 +
font-size: 130%;
 +
margin: 30px auto;
 +
text-align: center;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a  {
 +
background-color: #00a19bad !important;
 +
color: #000 !important;
 +
font-weight: bold;
 +
margin: auto;
 +
text-decoration: none !important;
 +
padding: 10px 15px !important;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .button_link a:hover {
 +
background-color: #ffb819 !important; 
 +
}
 +
 
 +
 +
 
 +
/*highlight */
 +
/************************************************/
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight {
 +
padding: 15px 20px;
 +
}
 +
 
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight p,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h1,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h2,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h3,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h4,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h5,
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight h6 {
 +
padding: 5px 15px;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_background {
 +
background-color: #ececec;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_top {
 +
    border-top: 4px solid #00a19bad;
 +
}
 +
 
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_A_full {
 +
    border: 4px solid #00a19bad;
 +
}
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_top {
 +
    border-top: 4px solid #ffb819
 +
}
 +
 
 +
 
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .highlight.decoration_B_full {
 +
    border: 4px solid #ffb819;
 +
}
 +
 
 +
 
 +
 
 +
 
 +
/*mobile*/
 +
/**************************************************************************************************************************************************************************************************/
  
  
−
#imagebox {
+
/* 1800px  */
−
background-color: ;
+
/************************************************/
−
position: relative;
+
@media only screen and (max-width: 1800px) {
−
left:0%;
+
.igem_2019_team_content { width: 85%;}
−
padding-right: 1.5%;
+
.igem_2019_team_menu {display:block;}
−
border: 5px white;
+
 
}
 
}
  
−
#button {
+
/* 1400px */
−
background-color: #A5B994 !important;
+
/************************************************/
−
height:20vh !important;
+
@media only screen and (max-width: 1400px) {
−
width:20% !important;
+
.igem_2019_team_menu .menu_item { font-size:100%;}
−
float:left !important;
+
.igem_2019_team_menu .submenu .submenu_item { font-size:90%;}
−
position: relative;
+
.igem_2019_team_menu {display:block;}
−
left: 20%;
+
}
 +
 
 +
 
 +
/* 1100px  */
 +
/************************************************/
 +
@media only screen and (max-width: 1100px) {
 +
.igem_2019_team_content {width:100%; margin-left:0px;}
 +
 +
.igem_2019_team_menu {display:none;float:right;margin-top:47px;max-width:100%;position:fixed;width:25%;}
 +
 +
.igem_2019_team_mobile_bar {display:block;}
 +
 +
.igem_2019_team_content .igem_2019_team_column_wrapper .column.full_size, .igem_2019_team_content .igem_2019_team_column_wrapper .column.two_thirds_size,.igem_2019_team_content .igem_2019_team_column_wrapper .column.third_size {width:96%; }
 +
 
 +
}
 +
 
 +
/* 850px  */
 +
/************************************************/
 +
@media only screen and (max-width: 850px) {
 +
.igem_2019_team_menu {width:40%;}
 +
}
 +
 
 +
/*500px  */
 +
/************************************************/
 +
@media only screen and (max-width: 500px) {
 +
.igem_2019_team_menu {min-width:100%;width:100%;}
 +
}
 +
 
 +
 
 +
/**************************************************************************************************************************************************************************************************/
 +
 
 +
.members-title {{
 +
    color: black;
 +
    font-size: 32px;}
 
}
 
}
  
−
/*end of body section */
+
 
  
 
</style>
 
</style>
 +
 +
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- THIS IS WHERE THE HTML BEGINS --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<head>
 +
 +
  <!-- This tells the browser that your page is responsive -->
 +
  <meta name="viewport" content="width=device-width, initial-scale=1">
 +
 +
  <link rel="stylesheet" type="text/css" href="https://2019.igem.org/wiki/index.php?title=Template:Warwick/CSS&action=raw&ctype=text/css" />
 +
  <script type="text/javascript" src="https://2019.igem.org/wiki/index.php?title=Template:Warwick/JS&action=raw&ctype=text/javascript"></script>
 +
 +
 +
<!-- Bootstrap CSS. TODO: not allowed to use 3rd party hosting apparently -->
 +
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 +
 +
<!-- Bootstrap JS -->
 +
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 
</head>
 
</head>
 +
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- Menu --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
 +
<!--- Content of the page  --->
 +
<!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------->
  
 
<body>
 
<body>
 +
    <div class="text-center">
 +
        <h1 class="d-inline-block header-yellow-dots"> <b> Project Description </b> </h1>
 +
    </div>
  
−
<div id="titlescreen">
+
<section class="bg-ww-yellow text-center text-black my-5 py-4">
−
<div>
+
        <div class="container">
−
<ul id="navbar">
+
            <div class="row">
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="https://2019.igem.org/Team:Warwick/Overview">Home</a></li>
+
                <div class="col-12 col-md-6 align-self-center">
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="news.asp">Team</a></li>
+
                    <h3 class="text-center text-black"> <b> A Greasy Nightmare... </b> </h3>
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="contact.asp">Design</a></li>
+
                   
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Experiments</a></li>
+
                    <p align="justify">Despite being under your feet and out of sight, sewers are extremely important components of urban infrastructure that help to keep the area safe from flooding and minimize the spread of water-borne disease. Nowadays existing sewer networks are under increasing strain... mainly as a result of population growth, increasing urbanization and climate change. But it’s not just an increased usage of sewers which are beginning to challenge these infrastructural wonders. Human activity can, as per usual, be blamed. Life is like a sewer. You get out what you put into it and, sometimes, it stinks. We have created monsters. We have created fatbergs.</p>  
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="default.asp">Notebook</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="news.asp">Results</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="contact.asp">Parts</a></li>
+
−
  <li id="navbarbutton"><a id="navbarbuttontext" href="https://2019.igem.org/wiki/index.php?title=Team:Warwick/Safety">Safety</a></li>
+
−
                        <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Human Practices</a></li>
+
−
                        <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Attributions</a></li>
+
−
                        <li id="navbarbutton"><a id="navbarbuttontext" href="about.asp">Description</a></li>
+
−
        </ul>
+
−
</div>
+
  
−
<div style="height:100px;"></div>
+
<p align="justify"> These large congealed masses composed of fat, oil, grease and non-biodegradable materials like wet wipes are beginning to wreck infrastructural havoc, causing thousands of blockages, which the UK government spend millions clearing each year. Though the fatberg issue could be solved by simply changing everyday habits, we - the Warwick iGEM team - have begun to lay the foundations for a biological solution toward this growing problem. </p>
 +
<p> </p>
 +
                </div>
 +
                <div class="col-12 col-md-6 align-self-center">
 +
                    <img class="img-fluid" src="https://static.igem.org/mediawiki/2019/0/06/T--Warwick--2019-FatbergPipe.png" height="150%" width="150%"></div>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
  
−
<div id="paragraph">
+
<section class="bg-ww-grey text-center text-white my-5 py-4">
−
    <h1 id="bodysectiontitle">Safety</h1>
+
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-12 col-lg-8 offset-lg-2">
 +
                    <h3 class="text-center text-white"> <b> Inspiration</b> </h3>  
  
−
<p id="paragraphtext"> Safety and biosafety are important aspects of any genetic engineering project. </p>
+
 +
                  <p align="justify"> After several brainstorming sessions we came up with a strategy for our mission. After researching more, we found out that fatbergs are made up of several major components like calcium soap, wet wipes and triglycerides. We hypothesised that by breaking down the main component of fatbergs - fat molecules, also known as triglycerides we can break the whole structure to remove the solid mass. </p>
  
−
<p id="paragraphtext"> Biosafety is the prevention of accidental release of GMOs into the environment, this was particularly important to us, since unlike other projects, our target organism was to survive very harsh conditions and was to be in contact with potentially highly virulent organisms. This is because the organism was designed with survival in the sewers in mind, where high tolerance to various pH changes and other physical factors was key to success. Because of this, the release of a GMO of this caliber in the environment would quickly create havok in sewer systems, as it would take over the natural ecosystem present in sewage water. In addition, horizontal gene transfer is also a great concern. This is because of the nature of plasmid DNA, which can be exchanged between bacterial species. This is expecially troubling, as the presence of virulent bacterial strains (E.Coli O160H7 and Salmonella) could potentially give rise to virulent strains uptaking our plasmid, creating an augumented virulent strains. Because of these risks, great care has been put into the sterilization of equipment, treatment of lab waste and in sterile technique.  
+
<p class="aligncenter">
 +
    <img src="https://static.igem.org/mediawiki/2019/f/f5/T--Warwick--2019-LipaseAction1.png" height="50%" width="50%"/>
 
</p>
 
</p>
 +
<p> <b> Figure 1 </b> Hydrolysis of a triglyceride molecule into glycerol and three free fatty acid molecules </p>
  
−
<h1 id="bodysectiontitle">Lab Safety</h1>
 
  
−
<p id="paragraphtext">In terms of our project, safety tackles the minimization of risks taken by our researchers during the project. Safety is mainly established by the use of proper techniques and equipment. Because of this, all members of the project, including non-researchers, where asked to undergo rigorous lab induction sessions. This created a safe working environment and prevented both injury and damage to equipment. In addition, various risk assessements detailing each experiment conducted were made, this allowed for a more structured and methodical approach to lab safety, which ultimately leads to a safer working environment and reduced risk of accidental exposure to GMOs both in respect to the environment and the researchers.</p>
+
<p align= "justify"> We were further inspired by the work carried out by the 2014 Sheffield iGEM team, who worked on the fatberg problem. We decided to build upon their foundational research and carry it forward to benefit society by using specific lipases suited to an environment like the sewage system. This includes Thermostable lipase A, as seen below in figure 2 (TliA, an enzyme derived from <i> Pseudomonas fluorescens; </i> a previous iGEM part utilised by Sheffield, as well as the Stuttgart and KAIST iGEM teams. </p>
  
−
<h1 id="bodysectiontitle">Ethics</h1>
+
<p class="aligncenter">
 +
    <img src="https://static.igem.org/mediawiki/2019/3/3b/T--Warwick--2019-TliA3D.png" height="40%" width="40%"/>
 +
</p>
  
−
<p id="paragraphtext">GMOs gave rise to several ethical issues, some of which have been tackled by our project. The most pressing one is the one of release into the environment, iGem (and all but some institutions) agree that release of GMOs is not possible.  
+
<p> <b> Figure 2. </b> Three dimensional structure of TliA isolated from <i> Pseudomonas fluorescens </i> as used by the 2014 Sheffield iGEM team. </p>
 +
</section>
  
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
  
−
</p>
+
    <section class="bg-ww-yellow text-center text-black my-5 py-4">
−
 
+
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-12 col-lg-8 offset-lg-2">
 +
                <h3 class="text-center text-black"> <b> Infatuation -The Guardians of the Sewers...  </b> </h3>
 +
               
 +
                    <p align="justify">Our mission as Warwick iGEM 2019 is to attempt to tackle the growing fatberg crisis. We have implemented two key strategies to do this: preventing their formation through the education of the general public to increase awareness of these monstrous masses, explaining how simple changes in human behaviour can significantly reduce their formation. </p>
  
−
</div>
+
<p align="justify">Secondly, we will utilise the power of synthetic biology to clone candidate lipases, derived from microorganisms living within fatbergs or sewers, into our E. coli carrier cells. The lipase activity of our clones will then be characterised using both a qualitative and quantitative assay of our own design, alongside experiments to establish the viability of our engineered bacteria in oil. </p>
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
  
−
<div style="height:100px;"></div>
 
  
 +
<section class="bg-white text-center text-black my-5 py-4">
 +
        <div class="container">
 +
            <div class="row">
 +
                <div class="col-12 col-lg-8 offset-lg-2">
 +
                      <div class='' id='BOIStriangle'>
 +
<div id='BOISContent'>
 +
<h1 id='BCTitle'>Click one</h3>
 +
<p id='BCText'></p>
 +
</div>
 +
<img src='https://static.igem.org/mediawiki/2019/a/a4/T--Warwick--2019-Hammer-Sign.png' id='hamIMG' onclick="rotate(0)">
 +
<img src='https://static.igem.org/mediawiki/2019/8/8a/T--Warwick--2019-DNA-sign.png' id='dnaIMG'  onclick="rotate(1)">
 +
<img src='https://static.igem.org/mediawiki/2019/e/eb/T--Warwick--2019-Pencil-Sign.png' id='pencilIMG'  onclick="rotate(2)">
 +
      </div>               
 +
                </div>
 +
            </div>
 +
        </div>
 +
    </section>
  
  
 +
   
  
  
 
</body>
 
</body>
 
</html>
 
</html>
 +
{{Template:Warwick/Footer}}

Latest revision as of 01:10, 22 October 2019

Project Description

A Greasy Nightmare...

Despite being under your feet and out of sight, sewers are extremely important components of urban infrastructure that help to keep the area safe from flooding and minimize the spread of water-borne disease. Nowadays existing sewer networks are under increasing strain... mainly as a result of population growth, increasing urbanization and climate change. But it’s not just an increased usage of sewers which are beginning to challenge these infrastructural wonders. Human activity can, as per usual, be blamed. Life is like a sewer. You get out what you put into it and, sometimes, it stinks. We have created monsters. We have created fatbergs.

These large congealed masses composed of fat, oil, grease and non-biodegradable materials like wet wipes are beginning to wreck infrastructural havoc, causing thousands of blockages, which the UK government spend millions clearing each year. Though the fatberg issue could be solved by simply changing everyday habits, we - the Warwick iGEM team - have begun to lay the foundations for a biological solution toward this growing problem.

Inspiration

After several brainstorming sessions we came up with a strategy for our mission. After researching more, we found out that fatbergs are made up of several major components like calcium soap, wet wipes and triglycerides. We hypothesised that by breaking down the main component of fatbergs - fat molecules, also known as triglycerides we can break the whole structure to remove the solid mass.

Figure 1 Hydrolysis of a triglyceride molecule into glycerol and three free fatty acid molecules

We were further inspired by the work carried out by the 2014 Sheffield iGEM team, who worked on the fatberg problem. We decided to build upon their foundational research and carry it forward to benefit society by using specific lipases suited to an environment like the sewage system. This includes Thermostable lipase A, as seen below in figure 2 (TliA, an enzyme derived from Pseudomonas fluorescens; a previous iGEM part utilised by Sheffield, as well as the Stuttgart and KAIST iGEM teams.

Figure 2. Three dimensional structure of TliA isolated from Pseudomonas fluorescens as used by the 2014 Sheffield iGEM team.