Difference between revisions of "Team:Macquarie Australia/Description"

Line 1: Line 1:
−
{{Macquarie Australia/CSS}}
+
 
  
 
<html>
 
<html>
  
 +
    <link href="https://2018.igem.org/Team:Macquarie_Australia/CSS_Navbar?action=raw&ctype=text/css" rel="stylesheet">
 +
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  
  
−
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">  
+
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
  
  
  
−
<head>
+
    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">  
−
<meta name="viewport" content="width=device-width, initial-scale=1">
+
−
<style>
+
−
DO NOT REMOVE
+
−
#content {
+
−
    width: 100vw;
+
−
    margin: 0;
+
−
    padding: 0;
+
−
}
+
  
−
/* Clear the default wiki settings */
 
−
 
−
#home_logo, #sideMenu { display:none; }
 
−
#sideMenu, #top_title, .patrollink  {display:none;}
 
−
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 
−
body {background-color: #f2f2f2; }
 
−
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
  
−
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
−
/*FROM STYLESHEET*/
 
−
   
 
−
.dropdown-menu {
 
−
  position: absolute;
 
−
  top: 100%;
 
−
  left: 0;
 
−
  z-index: 1000;
 
−
  display: none;
 
−
  float: left;
 
−
  min-width: 160px;
 
−
  padding: 5px 0;
 
−
  margin: 2px 0 0;
 
−
  font-size: 14px;
 
−
  text-align: left;
 
−
  list-style: none;
 
−
  background-color: #fff;
 
−
  -webkit-background-clip: padding-box;
 
−
          background-clip: padding-box;
 
−
  border: 1px solid #ccc;
 
−
  border: 1px solid rgba(0, 0, 0, .15);
 
−
  border-radius: 4px;
 
−
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 
−
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
 
−
}
 
−
/* Prevents header buttons fron turning dark upon hover */
 
−
    .navbar-default .navbar-nav > li > a:hover,
 
−
.navbar-default .navbar-nav > li > a:focus {
 
−
  color: #333;
 
−
  background-color: transparent;
 
−
}
 
  
−
/* Makes menu buttons stick to right hand side of screen */
+
    <head>
−
@media (min-width: 768px) {
+
        <meta name="viewport" content="width=device-width, initial-scale=1">
−
  .navbar-left {
+
−
    float: left !important;
+
−
  }
+
−
  .navbar-right {
+
−
    float: right !important;
+
−
    margin-right: -5px;
+
−
  }
+
−
  .navbar-right ~ .navbar-right {
+
−
    margin-right: 0;
+
−
  }
+
−
}
+
  
−
/* Makes drop-downs appear left to right instead of up to down */
+
        <style>
−
@media (min-width: 768px) {
+
            DO NOT REMOVE
−
  .navbar-nav {
+
            #content {
−
    float: left;
+
                width: 100vw;
−
    margin: 0;
+
                margin: 0;
−
  }
+
                padding: 0;
−
  .navbar-nav > li {
+
            }
−
    float: left;
+
−
  }
+
−
  .navbar-nav > li > a {
+
−
    padding-top: 15px;
+
−
    padding-bottom: 15px;
+
−
  }
+
−
}
+
  
−
/* Formatting navbar */
+
            /* Clear the default wiki settings */
−
.navbar-fixed-top {
+
            #home_logo, #sideMenu { display:none; }
−
  top: 0;
+
            #sideMenu, #top_title, .patrollink  {display:none;}
−
  border-width: 0 0 1px;
+
            #content { width:100%; padding:0px; margin-top:-7px; margin-left:0px;}
−
}
+
            body {background-color: #f2f2f2; }
−
.navbar-fixed-top,
+
            #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
−
.navbar-fixed-bottom {
+
−
  position: fixed;
+
−
  right: 0;
+
−
  left: 0;
+
−
  z-index: 1030;
+
−
}
+
−
@media (min-width: 768px) {
+
−
  .container > .navbar-header,
+
−
  .container-fluid > .navbar-header,
+
−
  .container > .navbar-collapse,
+
−
  .container-fluid > .navbar-collapse {
+
−
    margin-right: 0;
+
−
    margin-left: 0;
+
−
  }
+
−
}
+
−
a {
+
−
  color: #337ab7;
+
−
  text-decoration: none;
+
−
}
+
−
@media (min-width: 768px) {
+
−
  .navbar-header {
+
−
    float: left;
+
−
  }
+
−
}
+
−
.nav > li > a {
+
−
  position: relative;
+
−
  display: block;
+
−
  padding: 10px 15px;
+
−
}
+
−
.nav {
+
−
  padding-left: 0;
+
−
  margin-bottom: 0;
+
−
  list-style: none;
+
−
}
+
−
.dropdown-menu > li > a {
+
−
  display: block;
+
−
  padding: 3px 20px;
+
−
  clear: both;
+
−
  font-weight: normal;
+
−
  line-height: 1.42857143;
+
−
  color: #333;
+
−
  white-space: nowrap;
+
−
}
+
−
.dropup,
+
−
.dropdown {
+
−
  position: relative;
+
−
}
+
−
.caret {
+
−
  display: inline-block;
+
−
  width: 0;
+
−
  height: 0;
+
−
  margin-left: 2px;
+
−
  vertical-align: middle;
+
−
  border-top: 4px dashed;
+
−
  border-top: 4px solid \9;
+
−
  border-right: 4px solid transparent;
+
−
  border-left: 4px solid transparent;
+
−
}
+
−
.img-responsive,
+
−
.thumbnail > img,
+
−
.thumbnail a > img,
+
−
.carousel-inner > .item > img,
+
−
.carousel-inner > .item > a > img {
+
−
  display: block;
+
−
  max-width: 100%;
+
−
  height: auto;
+
−
}
+
  
  
  
−
/*END FROM SPREADHEET */
+
            /* Unique to page */
 +
            body {
 +
                background-color: #f2f2f2;
 +
                width: 100%;
 +
                z-index: 3;
 +
            }
  
 +
            #bodyContent {
 +
                padding-right: 0px;
 +
                padding-top: 50px;
 +
                width: 100 vw;
 +
                background-color: #f2f2f2;
 +
            }
  
 +
            /* Wrapper for the content */
 +
            .content_wrapper {
 +
                width: 85%%;
 +
                margin-left: 150px;
 +
                padding: 0px;
 +
                float: left;
 +
                background-color: #f2f2f2;
 +
            }
  
  
  
−
/* Navbar */
+
            /* non numbered lists */
 +
            .content_wrapper ul {
 +
                padding: 0px 20px;
 +
                font-size: 13px;
 +
                font-family: 'Quicksand', sans-serif;
 +
            }s
  
−
.some-padding {
+
            .bio_paragraph{
−
  padding-top: 20px;
+
                box-sizing: border-box;
−
}
+
                width: 100%;
 +
                float: right;  
 +
            }
  
 +
            .bio_page_grid{
 +
                display: grid;
 +
                grid-template-columns: 50% 50%;
 +
                grid-template-rows: repeat(13, 50%);
 +
            }
  
−
/*adds necessary spacing to the navbar so links display correctly below the black iGEM navbar */
 
  
−
.navbar-default {
 
−
  background-color: white;
 
−
  border-color: rgba(255, 255, 255, 0.3);
 
−
  font-family: 'Quicksand', sans-serif;
 
−
  font-weight: 300;
 
−
  -webkit-transition: all 0.35s;
 
−
  -moz-transition: all 0.35s;
 
−
  transition: all 0.35s;
 
−
}
 
  
−
.navbar-default .navbar-header .navbar-brand {
 
−
  color: #52658F;
 
−
  font-family: 'Quicksand', sans-serif;
 
−
  font-weight: bold;
 
−
  font-size: 22px;
 
−
  display: inline-block;
 
−
}
 
  
 +
            /* For hte rotating image */
 +
            .Landing_image_container {
 +
                width: 50%;
 +
                display: flex;
 +
                position: relative;
 +
                margin: 0 auto;
 +
                align-items: center;
 +
                justify-content: center;
 +
            }
  
−
.navbar-default .navbar-header .navbar-brand:hover,
+
            .Landing_image_container img {
−
.navbar-default .navbar-header .navbar-brand:focus {
+
                width: 100%;
−
  color: #52658F;
+
            }
−
}
+
  
−
.navbar-default .navbar-header .navbar-toggle {
+
            .Landing_image_container img.overlap {
−
  font-family: 'Quicksand', sans-serif;
+
                position: absolute;
−
  font-weight: 400;
+
            }
−
  font-size: 14px;
+
−
  color: #333A56;
+
−
  text-transform: uppercase;
+
−
}
+
  
−
.navbar-default .nav > li > a,
+
        </style>
−
.navbar-default .nav > li > a:focus {
+
−
  text-transform: uppercase;
+
−
  font-family: 'Quicksand', sans-serif;
+
−
  font-weight: 400;
+
−
  font-size: 14px;
+
−
  color: #222222;
+
−
}
+
  
−
.navbar-default .nav > li > a:hover,
 
−
.navbar-default .nav > li > a:focus:hover {
 
−
  color: #333A56;
 
−
}
 
  
−
.navbar-default .nav > li.active > a,
+
    </head>
−
.navbar-default .nav > li.active > a:focus {
+
−
  color: #333A56 !important;
+
−
  background-color: white;
+
−
}
+
  
−
.navbar-default .nav > li.active > a:hover,
 
−
.navbar-default .nav > li.active > a:focus:hover {
 
−
  background-color: white;
 
−
}
 
  
−
.navbar-default .navbar-toggle {
 
−
  border: none;
 
−
}
 
  
−
.navbar-default .dropdown-menu > li > a:hover,
+
    <body>
−
.navbar-default .dropdown-menu > li > a:focus {
+
−
  background-color: #F7F5E6;
+
−
  color: #333A56;
+
−
}
+
  
−
.navbar-default .dropdown-menu {
 
−
  border: none;
 
−
  outline: none;
 
−
  font-family: 'Quicksand', sans-serif;
 
−
  text-transform: uppercase;
 
−
  font-weight: 400 !important;
 
−
  font-size: 13.2px !important;
 
−
  color: #222222;
 
−
}
 
  
−
#sitelinks a {
+
        <nav class="navbar navbar-default navbar-fixed-top" style="padding-top: 20px;">
−
  display: inline-block;
+
            <div class="container-fluid">
−
  border: 3px solid #fff;
+
                <div class="navbar-header">
−
  color: #fff;
+
−
  padding: 10px 20px;
+
−
  margin: 10px
+
−
}
+
  
−
#footer {
+
                    <a class="navbar-logo" href="https://2018.igem.org/Team:Macquarie_Australia">
−
  background: #333;
+
                        <image class="img-responsive" src="https://static.igem.org/mediawiki/2018/8/8a/T--Macquarie_Australia--Header_Circle.png" height="80" width="80" style = "position: absolute; left: 10px; top: 30px;">
−
  text-align: center;
+
                        </image>
−
  color: #fff;
+
                    </a>
−
  line-height: 50px;
+
−
}
+
  
−
#footer a {
+
                </div>
−
  color: #fff;
+
                <div class="navbar-header" style="padding-top: 15px; padding-left: 100px;">
−
}
+
                    <a class="navbar-logo" href="https://2018.igem.org/Team:Macquarie_Australia">
 +
                        <image class="img-responsive" src="https://static.igem.org/mediawiki/2018/2/25/T--Macquarie_Australia--Logo_onlyText.png" height="120" width="120">
 +
                        </image>
 +
                    </a>
 +
                </div>
  
 +
                <div id="navbar" class="navbar-collapse collapse">
 +
                    <ul class="nav navbar-nav navbar-right" style="margin-top: 15px;">
 +
                        <li class="dropdown">
 +
                            <a class="dropdown-toggle active" style = "font-family: 'Raleway', sans-serif;">Project<span class="caret"></span></a>
 +
                            <ul class="dropdown-menu" style="left:0;">
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Description">Description</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Design">Design</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Experiments">Experiments</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Results">Results</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/ProjectSafety">Safety</a></li>
 +
                            </ul>
 +
                        </li>
  
  
−
   
+
                        <li class="dropdown">
−
/*END FROM STYLESHEET*/
+
                            <a class="dropdown-toggle active" style = "font-family: 'Raleway', sans-serif;" >Notebook<span class="caret"></span></a>
 +
                            <ul class="dropdown-menu" style="left:0;">
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;"  href="https://2018.igem.org/Team:Macquarie_Australia/Notebook">Notebook</a></li>
 +
                            </ul>
 +
                        </li>
  
−
body {
+
                        <li class="dropdown">
−
  background-color: #f2f2f2;
+
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Parts<span class="caret"></span></a>
−
  width: 100%;
+
                            <ul class="dropdown-menu" style="left:0;">
−
  z-index: 3;
+
                                <li><a style = "font-family: 'Raleway', sans-serif;"  href="https://2018.igem.org/Team:Macquarie_Australia/Parts">Summary</a></li>
−
}
+
                                <li><a style = "font-family: 'Raleway', sans-serif;"  href="https://2018.igem.org/Team:Macquarie_Australia/CompositeParts">Composite parts</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;"  href="https://2018.igem.org/Team:Macquarie_Australia/PartsValidation">Validation</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;"  href="https://2018.igem.org/Team:Macquarie_Australia/ImprovedParts">Improved Parts</a></li>
  
 +
                            </ul>
 +
                        </li>
  
−
#bodyContent {
+
                        <li class="dropdown">
−
  padding-right: 0px;
+
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Interlab<span class="caret"></span></a>
−
  padding-top: 50px;
+
                            <ul class="dropdown-menu" style="left:0;">
−
  width: 100 vw;
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Interlab">Interlab Overview</a></li>
−
  background-color: #f2f2f2;
+
                            </ul>
−
}
+
                        </li>
  
−
#globalWrapper {
+
                        <li class="dropdown">
−
  font-size: 100%;
+
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Human Practices<span class="caret"></span></a>
−
  padding: 0px;
+
                            <ul class="dropdown-menu">
−
  margin: -10px -20px -20px -20px;
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Human_Practices">Overview</a></li>
−
}
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Interviews">Interviews</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/PublicEngagement">Public Engagement</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/IntergratedHumanPractices">Intergrated Human Practices</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Toolkit">Toolkit</a></li>
 +
                            </ul>
 +
                        </li>
 +
                        <li class="dropdown">
 +
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Team<span class="caret"></span></a>
 +
                            <ul class="dropdown-menu">
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Team">Meet The Team</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Staff">Staff</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Attributions">Attributions</a></li>
 +
                            </ul>
 +
                        </li>
  
−
.navbar-collapse {
+
                        <li class="dropdown">
−
  padding-left: 0px;
+
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Modelling<span class="caret"></span></a>
−
}
+
                            <ul class="dropdown-menu">
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Model">Our Model</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/ModelExperimentation">Experimental Data</a></li>
 +
                            </ul>
 +
                        </li>
  
−
#banner {
+
                        <li class="dropdown">
−
  margin-top: 50px;
+
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Collaboration<span class="caret"></span></a>
−
}
+
                            <ul class="dropdown-menu">
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Collaboration">Overview</a></li>
 +
                            </ul>
 +
                        </li>
  
−
#sideMenu {
 
−
  margin-top: 10px;
 
−
}
 
  
−
.dropdown-menu li:hover .sub-menu {
 
−
  visibility: visible;
 
−
}
 
  
−
.dropdown:hover .dropdown-menu {
+
                    </ul>
−
  display: block;
+
                </div>
−
}
+
                <!-- /.navbar-collapse -->
 +
            </div>
 +
            <!-- /.container-fluid -->
 +
        </nav>
  
−
.navbar-nav .dropdown-menu,
 
−
.navbar .dropdown-menu {
 
−
  margin-top: 0;
 
−
}
 
  
 +
        <!-- NEW CODE -->
  
−
/********************************* CONTENT OF THE PAGE ********************************/
 
  
 +
<html>
  
−
/* Wrapper for the content */
+
    <link href="https://2018.igem.org/Team:Macquarie_Australia/CSS_Navbar?action=raw&ctype=text/css" rel="stylesheet">
−
 
+
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
−
.content_wrapper {
+
−
  width: 85%%;
+
−
  margin-left: 150px;
+
−
  padding: 0px;
+
−
  float: left;
+
−
  background-color: #f2f2f2;
+
−
}
+
−
 
+
−
 
+
−
/*LAYOUT */
+
−
 
+
−
 
+
−
.full_size {
+
−
  width: 100%;
+
−
}
+
−
 
+
−
.full_size img {
+
−
  padding: 10px 15px;
+
−
  width: 96.5%;
+
−
}
+
−
 
+
−
.half_size {
+
−
  width: 50%;
+
−
}
+
−
 
+
−
.half_size img {
+
−
  padding: 10px 15px;
+
−
  width: 93%;
+
−
}
+
−
 
+
−
.img:hover {
+
−
  opacity: 1.0 !important;
+
−
}
+
−
 
+
−
 
+
−
 
+
−
/*STYLING */
+
−
 
+
−
 
+
−
/* styling for the titles */
+
−
 
+
−
.content_wrapper h1,
+
−
.content_wrapper h2 {
+
−
  padding: 5px 15px;
+
−
  border-bottom: 0px;
+
−
  color: #72c9b6;
+
−
}
+
−
 
+
−
.content_wrapper h3,
+
−
.content_wrapper h4,
+
−
.content_wrapper h5,
+
−
.content_wrapper h6 {
+
−
  padding: 5px 15px;
+
−
  border-bottom: 0px;
+
−
  color: #000000;
+
−
}
+
−
 
+
−
 
+
−
/* font and text */
+
−
 
+
−
.content_wrapper p {
+
−
  padding: 0px 15px;
+
−
  font-size: 13px;
+
−
  font-family: 'Roboto', sans-serif;
+
−
}
+
−
 
+
−
 
+
−
/* Links */
+
−
 
+
−
.content_wrapper a {
+
−
  font-weight: bold;
+
−
  text-decoration: underline;
+
−
  text-decoration-color: #72c9b6;
+
−
  color: #72c9b6;
+
−
  -webkit-transition: all 0.4s ease;
+
−
  -moz-transition: all 0.4s ease;
+
−
  -ms-transition: all 0.4s ease;
+
−
  -o-transition: all 0.4s ease;
+
−
  transition: all 0.4s ease;
+
−
}
+
−
 
+
−
 
+
−
/* hover for the links */
+
−
 
+
−
.content_wrapper a:hover {
+
−
  text-decoration: none;
+
−
  color: #000000;
+
−
}
+
−
 
+
−
 
+
−
/* non numbered lists */
+
−
 
+
−
.content_wrapper ul {
+
−
  padding: 0px 20px;
+
−
  font-size: 13px;
+
−
  font-family: 'Quicksand', sans-serif;
+
−
}
+
−
 
+
  
−
/* numbered lists */
 
  
−
.content_wrapper ol {
+
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
−
  padding: 0px;
+
−
  font-size: 13px;
+
−
  font-family: 'Quicksand', sans-serif;
+
−
}
+
  
  
−
/* Table */
 
  
−
.content_wrapper table {
+
    <link href="https://fonts.googleapis.com/css?family=Quicksand:300,400|Roboto:400,400i" rel="stylesheet">
−
  width: 97%;
+
−
  margin: 15px 10px;
+
−
  border: 1px solid #d3d3d3;
+
−
  border-collapse: collapse;
+
−
}
+
  
  
−
/* table cells */
 
  
−
.content_wrapper td {
+
    <head>
−
  padding: 10px;
+
        <meta name="viewport" content="width=device-width, initial-scale=1">
−
  vertical-align: text-top;
+
−
  border: 1px solid #d3d3d3;
+
−
  border-collapse: collapse;
+
−
}
+
  
 +
        <style>
 +
            DO NOT REMOVE
 +
            #content {
 +
                width: 100vw;
 +
                margin: 0;
 +
                padding: 0;
 +
            }
  
−
/* table headers */
+
            /* Clear the default wiki settings */
 +
            #home_logo, #sideMenu { display:none; }
 +
            #sideMenu, #top_title, .patrollink  {display:none;}
 +
            #content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
            body {background-color: #f2f2f2; }
 +
            #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
  
−
.content_wrapper th {
 
−
  padding: 10px;
 
−
  vertical-align: text-top;
 
−
  border: 1px solid #d3d3d3;
 
−
  border-collapse: collapse;
 
−
  background-color: #f2f2f2;
 
−
}
 
  
  
−
/* Button class */
+
            /* Unique to page */
 +
            body {
 +
                background-color: #f2f2f2;
 +
                width: 100%;
 +
                z-index: 3;
 +
            }
  
−
.button_click {
+
            #bodyContent {
−
  margin: 10px auto;
+
                padding-right: 0px;
−
  padding: 15px;
+
                padding-top: 50px;
−
  width: 12%;
+
                width: 100 vw;
−
  text-align: center;
+
                background-color: #f2f2f2;
−
  font-weight: bold;
+
            }
−
  background-color: #72c9b6;
+
−
  cursor: pointer;
+
−
  -webkit-transition: all 0.4s ease;
+
−
  -moz-transition: all 0.4s ease;
+
−
  -ms-transition: all 0.4s ease;
+
−
  -o-transition: all 0.4s ease;
+
−
  transition: all 0.4s ease;
+
−
}
+
  
 +
            /* Wrapper for the content */
 +
            .content_wrapper {
 +
                width: 85%%;
 +
                margin-left: 150px;
 +
                padding: 0px;
 +
                float: left;
 +
                background-color: #f2f2f2;
 +
            }
  
−
/* button class on hover */
 
  
−
.button_click:hover {
 
−
  background-color: #000000;
 
−
  color: #72c9b6;
 
−
}
 
  
−
.top-pad {
+
            /* non numbered lists */
−
  padding: 35px;
+
            .content_wrapper ul {
−
}
+
                padding: 0px 20px;
 +
                font-size: 13px;
 +
                font-family: 'Quicksand', sans-serif;
 +
            }s
  
−
   
+
            .bio_paragraph{
−
   
+
                box-sizing: border-box;
−
   
+
                width: 100%;
−
/* NEW STUFF FROM CURRENT PAGE
+
                float: right;   
−
   
+
            }
  
 +
            .bio_page_grid{
 +
                display: grid;
 +
                grid-template-columns: 50% 50%;
 +
                grid-template-rows: repeat(13, 50%);
 +
            }
  
−
/* side columns */
 
−
.column.side.left {
 
−
width: 20%;
 
−
}
 
  
−
.column.side.right {
 
−
width: 20%;
 
−
}
 
  
−
/* main content */
 
−
.column.middle {
 
−
Width: 60%;
 
−
min-height: 850px;
 
  
−
/* change the background image of the main column */
+
            /* For hte rotating image */
−
background-size: contain;
+
            .Landing_image_container {
−
background-position: center;
+
                width: 50%;
−
background-repeat: no-repeat;
+
                display: flex;
−
}
+
                position: relative;
 +
                margin: 0 auto;
 +
                align-items: center;
 +
                justify-content: center;
 +
            }
  
−
/* Clear floats after the columns */
+
            .Landing_image_container img {
−
.row:after {
+
                width: 100%;
−
    content: "";
+
            }
−
    display: table;
+
−
    clear: both;
+
−
}
+
  
−
/* footer*/
+
            .Landing_image_container img.overlap {
−
.footer {
+
                position: absolute;
−
    background-color: #f2f2f2;
+
            }
−
    text-align: center;
+
−
    padding: 35px;
+
  
−
}
+
        </style>
  
−
.bio_paragraph{
 
−
    box-sizing: border-box;
 
−
    width: 100%;
 
−
    float: right;   
 
−
}
 
  
−
.bio_page_grid{
+
     </head>
−
     display: grid;
+
−
    grid-template-columns: 50% 50%;
+
−
    grid-template-rows: repeat(13, 50%);
+
−
}
+
  
−
/********************************* RESPONSIVE STYLING ********************************/
 
  
  
−
      
+
     <body>
−
/*ROTATING SCRIPT */
+
−
.rotate {
+
−
    -webkit-animation: spin .8s infinite linear;
+
−
    animation: spin 20s infinite linear;
+
−
}
+
−
@-webkit-keyframes spin {
+
−
    100% { -webkit-transform: rotate(360deg); }
+
−
}
+
−
@-moz-keyframes spin {
+
−
    100% { -moz-transform: rotate(360deg); }
+
−
}
+
−
@keyframes spin {
+
−
    100% {
+
−
        -moz-transform:rotate(360deg);
+
−
        -o-transform:rotate(360deg);
+
−
        transform:rotate(360deg);
+
−
    }
+
−
}
+
  
−
   
 
−
   
 
−
</style>
 
  
 +
        <nav class="navbar navbar-default navbar-fixed-top" style="padding-top: 20px;">
 +
            <div class="container-fluid">
 +
                <div class="navbar-header">
  
−
</head>
+
                    <a class="navbar-logo" href="https://2018.igem.org/Team:Macquarie_Australia">
 +
                        <image class="img-responsive" src="https://static.igem.org/mediawiki/2018/8/8a/T--Macquarie_Australia--Header_Circle.png" height="80" width="80" style = "position: absolute; left: 10px; top: 30px;">
 +
                        </image>
 +
                    </a>
  
 +
                </div>
 +
                <div class="navbar-header" style="padding-top: 15px; padding-left: 100px;">
 +
                    <a class="navbar-logo" href="https://2018.igem.org/Team:Macquarie_Australia">
 +
                        <image class="img-responsive" src="https://static.igem.org/mediawiki/2018/2/25/T--Macquarie_Australia--Logo_onlyText.png" height="120" width="120">
 +
                        </image>
 +
                    </a>
 +
                </div>
  
 +
                <div id="navbar" class="navbar-collapse collapse">
 +
                    <ul class="nav navbar-nav navbar-right" style="margin-top: 15px;">
 +
                        <li class="dropdown">
 +
                            <a class="dropdown-toggle active" style = "font-family: 'Raleway', sans-serif;">Project<span class="caret"></span></a>
 +
                            <ul class="dropdown-menu" style="left:0;">
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Description">Description</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Design">Design</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Experiments">Experiments</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Results">Results</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/ProjectSafety">Safety</a></li>
 +
                            </ul>
 +
                        </li>
  
−
<body>
 
−
 
−
 
−
  <nav class="navbar navbar-default navbar-fixed-top" style=" padding-top: 20px;">
 
−
    <div class="container-fluid">
 
−
      <div class="navbar-header">
 
  
−
        <a class="navbar-logo" href="https://2018.igem.org/Team:Macquarie_Australia">
+
                        <li class="dropdown">
−
          <image class="img-responsive, rotate" src="https://static.igem.org/mediawiki/2018/3/3f/T--Macquarie_Australia--Logo_onlyMembrane.png" height="80" width="80">
+
                            <a class="dropdown-toggle active" style = "font-family: 'Raleway', sans-serif;" >Notebook<span class="caret"></span></a>
−
            </image>
+
                            <ul class="dropdown-menu" style="left:0;">
−
        </a>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Notebook">Notebook</a></li>
 +
                            </ul>
 +
                        </li>
  
−
      </div>
+
                        <li class="dropdown">
−
      <div class="navbar-header" style="padding-top: 15px; padding-left: 15px;">
+
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Parts<span class="caret"></span></a>
−
        <a class="navbar-logo" href="https://2018.igem.org/Team:Macquarie_Australia">
+
                            <ul class="dropdown-menu" style="left:0;">
−
          <image class="img-responsive" src="https://static.igem.org/mediawiki/2018/2/25/T--Macquarie_Australia--Logo_onlyText.png" height="120" width="120">
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Parts">Summary</a></li>
−
            </image>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/CompositeParts">Composite parts</a></li>
−
        </a>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/PartsValidation">Validation</a></li>
−
      </div>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;"  href="https://2018.igem.org/Team:Macquarie_Australia/ImprovedParts">Improved Parts</a></li>
  
−
      <div id="navbar" class="navbar-collapse collapse">
+
                            </ul>
−
        <ul class="nav navbar-nav navbar-right" style="margin-top: 15px;">
+
                        </li>
−
          <li class="dropdown">
+
−
            <a class="dropdown-toggle active" href="https://2018.igem.org/Team:Macquarie_Australia/Team">Team<span class="caret"></span></a>
+
−
            <ul class="dropdown-menu" style="left:0;">
+
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Collaborations">Collaborations</a></li>
+
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Attributions">Attributions</a></li>
+
−
            </ul>
+
−
          </li>
+
  
 +
                        <li class="dropdown">
 +
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Interlab<span class="caret"></span></a>
 +
                            <ul class="dropdown-menu" style="left:0;">
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Interlab">Interlab Overview</a></li>
 +
                            </ul>
 +
                        </li>
  
−
        <li class="dropdown">
+
                        <li class="dropdown">
−
            <a class="dropdown-toggle active" href="https://2018.igem.org/Team:Macquarie_Australia/Project">Project<span class="caret"></span></a>
+
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Human Practices<span class="caret"></span></a>
−
            <ul class="dropdown-menu" style="left:0;">
+
                            <ul class="dropdown-menu">
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Description">Description</a></li>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Human_Practices">Overview</a></li>
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Results">Results</a></li>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Interviews">Interviews</a></li>
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Demonstrate">Demonstrate</a></li>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/PublicEngagement">Public Engagement</a></li>
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Improve">Improve</a></li>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/IntergratedHumanPractices">Intergrated Human Practices</a></li>
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Safety">Saftey</a></li>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Toolkit">Toolkit</a></li>
−
            </ul>
+
                            </ul>
−
          </li>
+
                        </li>
 +
                        <li class="dropdown">
 +
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Team<span class="caret"></span></a>
 +
                            <ul class="dropdown-menu">
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Team">Meet The Team</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Staff">Staff</a></li>
 +
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Attributions">Attributions</a></li>
 +
                            </ul>
 +
                        </li>
  
−
        <li class="dropdown">
+
                        <li class="dropdown">
−
            <a class="dropdown-toggle active" href="https://2018.igem.org/Team:Macquarie_Australia/Notebook">Notebook<span class="caret"></span></a>
+
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Modelling<span class="caret"></span></a>
−
            <ul class="dropdown-menu" style="left:0;">
+
                            <ul class="dropdown-menu">
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Experiment">Experiment</a></li>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Model">Our Model</a></li>
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Interlab">Interlab</a></li>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/ModelExperimentation">Experimental Data</a></li>
−
            </ul>
+
                            </ul>
−
          </li>
+
                        </li>
  
−
        <li class="dropdown">
+
                        <li class="dropdown">
−
            <a class="dropdown-toggle active" href="https://2018.igem.org/Team:Macquarie_Australia/Parts">Parts<span class="caret"></span></a>
+
                            <a style = "font-family: 'Raleway', sans-serif;" class="dropdown-toggle active">Collaboration<span class="caret"></span></a>
−
            <ul class="dropdown-menu" style="left:0;">
+
                            <ul class="dropdown-menu">
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Parts">Parts Summary</a></li>
+
                                <li><a style = "font-family: 'Raleway', sans-serif;" href="https://2018.igem.org/Team:Macquarie_Australia/Collaboration">Overview</a></li>
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Composite_Parts">Composite Parts</a></li>
+
                            </ul>
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/Validation">Validation</a></li>
+
                        </li>
−
            </ul>
+
−
          </li>
+
  
−
          <li class="dropdown">
 
−
            <a class="dropdown-toggle active" href="https://2018.igem.org/Team:Macquarie_Australia/Human_practices">Human Practices <span class="caret"></span></a>
 
−
            <ul class="dropdown-menu">
 
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/human_practices">Human Practices</a></li>
 
−
              <li><a href="https://2018.igem.org/Team:Macquarie_Australia/human_practices">Integrated Practices</a></li>
 
−
            </ul>
 
−
          </li>
 
  
−
          <li class="dropdown">
 
−
            <a class="dropdown-toggle active" href="https://2018.igem.org/Team:Macquarie_Australia/safety">Saftey </a>
 
−
          </li>
 
−
        </ul>
 
−
      </div>
 
−
      <!-- /.navbar-collapse -->
 
−
    </div>
 
−
    <!-- /.container-fluid -->
 
−
    </nav>
 
  
 +
                    </ul>
 +
                </div>
 +
                <!-- /.navbar-collapse -->
 +
            </div>
 +
            <!-- /.container-fluid -->
 +
        </nav>
  
−
<!-- NEW CODE -->
 
  
 +
        <!-- NEW CODE -->
  
  
−
<div>
 
  
−
</div>
+
        <div>
  
−
<div>
+
        </div>
−
<img src = "https://static.igem.org/mediawiki/2018/4/41/T--Macquarie_Australia--Logo_transperant.png" style="width: 50%; margin-left: auto; margin-right: auto; display: block;">
+
−
</div>
+
  
−
<!-- COPY AND PASTE THESE 3 LINES FOR A NEW HEADING -->
+
        <div class="Landing_image_container">
 +
            <img  class="rotate" src="https://static.igem.org/mediawiki/2018/3/3f/T--Macquarie_Australia--Logo_onlyMembrane.png">
 +
            <img class="overlap" src="https://static.igem.org/mediawiki/2018/b/be/T--Macquarie_Australia--Logo_onlyText_Square.png">
 +
        </div>
  
−
<div style="width: 50%; margin-left: auto; margin-right: auto; display: block;">
+
        <div style="width: 50%; margin-left: auto; margin-right: auto; display: block;">
−
    <h style= "font-size: 20px; font-weight: bold;">Abstract</h>
+
            <h style= "font-size: 20px; font-weight: bold;">This year - a new frontier! </h>
−
    <p style="text-align: justify">
+
            <p style="text-align: justify;">
 +
                This year Team Macquarie is working on a modified strain of Escherichia coli to produce Chives — no, not the herb! — Chives is actually an acronym for Chlorophyll-Induced Vesicles. Previous reports have indicated that during the chlorophyll biosynthesis pathway, crystalline structures amass when cells are grown in the dark. When light is shone onto them, they form vesicles — a completely isolated environment in the cell! This opens up whole new avenues for the medical field, food, and other industries as these vesicles provide a segregated space to produce cytotoxic products, or products which the cell would ordinarily metabolise. This novel system of artificial compartmentalisation is certain to revolutionize the world! As such, we will first incorporate chlorophyll a into E. coli and aim to produce these biomolecular compartments (which we have dubbed Chives) — the first of their kind!
 +
            </p>
  
−
<!-- ENTER TEXT FOR THE PAGE HERE -->
 
  
−
poteins need to be synthesised and purified for use in therapeutic and industrial applications.  At present, this process is costly, time-consuming and operationally difficult.  We aim to address these challenges through the formation of vesicles within a familiar and ubiquitous expression vector, Escherichia coli.  These vesicles allow for the sequestration of desired proteins and hence enable simplified, bulk purification via chromatography or centrifugation.  Similarly, enzymes and small molecules also present the opportunity to produce or process natural products and refine typically cytotoxic compounds.  To address these issues, the chlorophyll biosynthesis genes will be introduced into E. coli, and it is these genes that have been identified as the source of prolamellar bodies (PLB) in photosynthetic organisms.  The formation of vesicles within E. coli is novel research, never attempted in prokaryotes before and would act as a toolkit to address the multitude of issues mentioned above.
+
        </div>
  
−
</p>
+
        <!--INVISIBLE BOX, MAYBE USE TO HOST CONTENT? -->
 +
        <div class="row" style="background-color: #f2f2f2;">
 +
            <div class="column side left" style="background-color: #f2f2f2;">
 +
            </div>
  
−
<br>
+
            <div class="column middle"style="background-color: #f2f2f2;">
  
−
<div style="width: auto; margin-left: auto; margin-right: auto; display: block;">
+
            </div>
−
    <h style= "font-size: 20px; font-weight: bold;">Hypothesis</h>
+
−
    <p style="text-align: justify">
+
  
 +
            <div class="column side right"style="background-color: #f2f2f2;">
  
−
Expression of the chlorophyll biosynthesis pathway in E. coli will lead to PLB formation, when grown in the dark.  When exposed to light, the PLB will dissociate and leave behind the lipid structure.
+
            </div>
 +
        </div>
  
−
</p>
 
  
−
<br>
+
        <!--INVISIBLE BOX, MAYBE USE TO HOST CONTENT? -->
 +
        <div class="row" style="background-color: #f2f2f2;">
 +
            <div class="column side left" style="background-color: #f2f2f2;">
 +
            </div>
  
−
<div style="width: auto; margin-left: auto; margin-right: auto; display: block;">
+
            <div class="column middle"style="background-color: #f2f2f2;">
−
    <h style= "font-size: 20px; font-weight: bold;">Approach</h>
+
−
    <p style="text-align: justify">
+
  
 +
            </div>
  
−
Previous research has demonstrated that E. coli produces protoporphyrin as a natural metabolite and we will be using this as a starting point for chlorophyll biosynthesis in E. coli.  To do this, we will be using the genes from the chlorophyll biosynthesis pathway in Chlamydomonas reinhardtii, a well studied alga used as a model in laboratories.  In support of this, we have carried out literature searches to identify the expression level necessary for each gene and optimised this through computer modelling.  Based on this research, several operons have been designed, each with the optimal expression levels necessary.  Once complete, each of these operons will be assembled into one plasmid designed around a standardised biobrick design.  This allows for vesicle formation to be introduced into any E. coli culture via a single transformation.
+
            <div class="column side right"style="background-color: #f2f2f2;">
  
−
<br>
+
            </div>
 +
        </div>
 +
        <!-- END OF BOX -->
  
−
These cells, when grown in the absence of light, cause protochlorophyllide (pchlide) to accumulate into semi-crystalline aggregates with phospholipids and key enzymes, forming PLBs, the foundation of our vesicles.  The cells are subsequently exposed to light, activating the POR (protochlorophyllide oxide reductase) enzyme, resulting in the production of chlorophyll 𝛼 from pchlide.  This conversion has been experimentally demonstrated to result in the spontaneous formation of phospholipid vesicles from the PLBs.  Thus, we will enable E. coli to produce vesicles, generating a tool that can be used in research and industry with profound implications.
 
  
−
</p>
+
        <!-- FOOTER CODE DO NOT TOUCH -->
 +
        <div class="footerContainer">
 +
            <div class="footerItemSponsor"  >
 +
                <img style = "height: auto; width: 70%; float: left;" src="https://static.igem.org/mediawiki/2018/d/de/T--Macquarie_Australia--Footer_Sponsor.png">
 +
            </div>
 +
            <div class="footerItem" >
 +
                <img style = "width: 4%; float: left;padding-top: 5%;padding-right: 2%; padding-left: 5%;" src="https://static.igem.org/mediawiki/2018/d/d3/T--Macquarie_Australia--Footer_Email.png">
 +
            </div>
 +
            <div class="footerItem" >
 +
                <img style = "width: 4%;float: left; padding-top: 5%;padding-right: 2%; " src="https://static.igem.org/mediawiki/2018/1/1a/T--Macquarie_Australia--Footer_Facebook.png">
 +
            </div>
 +
            <div class="footerItem" >
 +
                <img style = "width: 4%;float: left;padding-top: 5%;padding-right: 2%;" src="https://static.igem.org/mediawiki/2018/1/11/T--Macquarie_Australia--Footer_Instagram.png">
 +
            </div>
 +
            <div class="footerItem">
 +
                <img style = "width: 4%;float: left; padding-top: 5.5%; padding-right: 2%;" src="https://static.igem.org/mediawiki/2018/4/4c/T--Macquarie_Australia--Footer_Twitter.png">
 +
            </div>
 +
        </div>
 +
        <!--END OF FOOTER CODE -->
  
−
<div class="row">
 
−
<div class="column side left">
 
−
</div>
 
−
 
−
<div class="column middle">
 
  
−
</div>
 
−
 
−
<div class="column side right">
 
  
−
</div>
 
−
</div>
 
  
−
   
 
−
   
 
−
   
 
−
   
 
  
−
   
 
  
  
 
     </body>
 
     </body>
 
</html>
 
</html>

Revision as of 05:37, 4 October 2018


This year - a new frontier!

This year Team Macquarie is working on a modified strain of Escherichia coli to produce Chives — no, not the herb! — Chives is actually an acronym for Chlorophyll-Induced Vesicles. Previous reports have indicated that during the chlorophyll biosynthesis pathway, crystalline structures amass when cells are grown in the dark. When light is shone onto them, they form vesicles — a completely isolated environment in the cell! This opens up whole new avenues for the medical field, food, and other industries as these vesicles provide a segregated space to produce cytotoxic products, or products which the cell would ordinarily metabolise. This novel system of artificial compartmentalisation is certain to revolutionize the world! As such, we will first incorporate chlorophyll a into E. coli and aim to produce these biomolecular compartments (which we have dubbed Chives) — the first of their kind!