Difference between revisions of "Team:NUS Singapore-A/Description"

Line 1: Line 1:
−
{{NUS_Singapore-A}} {{:Team:NUS_Singapore-A/Templates/Style}}
 
−
 
 
<html>
 
<html>
−
 
 
<head>
 
<head>
−
  <meta charset="utf-8">
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+
<meta charset="utf-8">
−
  <meta name="viewport" content="width=device-width, initial-scale=1">
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
 +
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 +
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,400i">
  
 
</head>
 
</head>
 +
 
<style>
 
<style>
−
</style>
+
/*Remove standard formatting of iGEM HQ */
 +
/* set page to fill window*/
  
−
<body>
+
html {
−
  <div class="inner-border" style="border-top: none;">
+
    height: 100%;
−
     <div class="all-wrapper"><div class="content-wrapper">
+
     padding: 0;
−
      <img src="https://static.igem.org/mediawiki/2018/b/be/T--NUS_Singapore-A--Description_heading_C.png" alt="Project Description Header" style="width: 47.5%;">
+
    margin: 0;
 +
    overflow-y: scroll;
 +
}
  
−
      <div>
+
body {
−
        <h1>Coup Dy’état</h1>
+
    height: 100%;
−
        <br>
+
    padding: 0;
−
        <p>Eco-friendly Biomanufacturing of Flavonoid Dyes in Escherichia coli via Computer-mediated Optogenetic Regulation
+
    margin: 0;
−
        </p>
+
    background-color: white;
−
        <br>
+
}
−
        <p>In this section we describe the problem, our Coup Dy'état project as well as an overview of the synthetic biology.
+
−
        </p>
+
−
        <br>
+
−
        <hr>
+
−
        <br>
+
−
      </div>
+
  
−
          <h2>The Problem</h2>
+
#globalWrapper {
−
      <div class="row">
+
    min-height: 100%;
−
        <div class="column left">
+
    margin: 0;
−
          <p>Water pollution is a key problem in the textile dyeing and dyestuff production industry. In many regions of the world, rivers and water bodies that are sources of drinking water and livelihood are becoming heavily polluted by textile dyeing.
+
    padding: 0!important;
−
            This is largely due to the <b>irresponsible disposal</b> of <b>industrial effluents</b>, <b>hard-to-biodegrade synthetic dyes</b> by <b>textiles and dyestuff producers</b> and <b>ineffective wastewater treatment</b>.
+
    font-size: initial;
−
          </p>
+
}
−
          <br>
+
−
          <figure class="figures">
+
−
            <img src="https://www.straitstimes.com/sites/default/files/articles/2018/01/10/ST_20180110_WYCITARUM10_3678367.jpg">
+
−
            <figcaption><b><i>Image 1. Citarum River. A villager navigates his way through heavily dye-polluted waters. Photo: Iqbal Ksumadireza, The Straits Times,
+
−
2018 </i></b>
+
−
            </figcaption>
+
−
          </figure>
+
−
          <br>
+
−
          <h3>What is Happening</h3>
+
−
          <p>Already, the Citarum River in Indonesia is a clear example of this murky problem. The <b>30 million residents</b> relying on the river as their only water source and livelihood are experiencing adverse skin conditions and increased exposure
+
−
            to infectious diseases<sup>[1]</sup>, while the river has almost no aquatic life left<sup>[2]</sup>. According to a 2015 UN report, in some areas of the river, lead levels at more than <b>1,000 times the USEPA standard</b> in drinking water
+
−
            have been found<sup>[3]</sup>.
+
−
          </p>
+
−
          <br>
+
−
          <figure class="figures">
+
−
            <img src="https://static.igem.org/mediawiki/2018/6/6f/T--NUS_Singapore-A--KC_Hardship.png">
+
−
            <figcaption><b>Image 2</b>. "In some areas of the river, lead levels at more than 1,000 times the USEPA standard in drinking water."
+
−
            </figcaption>
+
−
          </figure>
+
−
          <br>
+
−
        </div>
+
−
        <div class="column right">
+
−
          <p>River water rapidly changing colours from red, to green, yellow, and black due to high concentrations of dye is not an uncommon sight. However, Citarum River is not an isolated case. Similar sights can be seen
+
−
            in Pearl River in China, Buriganga River in Bangladesh, and Bagmati River in India. In Dhaka, Bangladesh, <b>719 factories and textile mills</b> generate close to <b>200 metric tons of wastewater per ton of fabric per year</b><sup>[4]</sup>. According to the World Bank, on the global scale, the textile dyeing and dyestuff production industry is the <b>second most pollutive industry</b>, coming in only after oil, and produces <b>a fifth of the world’s water pollution</b>. It also <b>uses the most water</b> apart from agriculture<sup>[5]</sup>.
+
−
          </p>
+
−
          <br>
+
−
          <figure class="figures">
+
−
            <img src="https://static.igem.org/mediawiki/2018/0/01/T--NUS_Singapore-A--KC_Pollution.png">
+
−
            <figcaption><b>Image 3</b>. "...textile dyeing and dyestuff production industry is the second most pollutive industry."
+
−
            </figcaption>
+
−
          </figure>
+
−
          <br>
+
−
          <p>
+
−
            Addressing this problem through legislation has not been effective and treatment of the waste is expensive. In recent years, some efforts have been put in to <b>revive natural dyes</b> as a more sustainable alternative to the synthetic dyes<sup>[6]</sup>. However, this motion has not been gaining much traction, as traditional natural dye production which extracts dye from plants faces many constraints. Natural dyes produced traditionally often have <b>inconsistent quality</b>, varying from batch to batch of plants used. Furthermore, it is <b>land and labour intensive</b> and <b>competes with food production</b> for land use.
+
−
          </p>
+
−
          <br>
+
−
          <figure class="figures">
+
−
            <img src="https://static.igem.org/mediawiki/2018/8/84/T--NUS_Singapore-A--KC_NatDyes.png">
+
−
            <figcaption><b>Image 4</b>. "...it (natural dye production) is land and labour intensive and competes with food production for land use."
+
−
            </figcaption>
+
−
          </figure>
+
−
          <br>
+
−
        </div>
+
−
      </div>
+
−
      <br>
+
−
      <hr>
+
−
      <br>
+
−
      <div class="row">
+
−
        <div class="column left">
+
−
          <h2>Our Motivation</h2>
+
−
          <br>
+
−
          <p>Our team strongly believes that the current approach of producing synthetic dyes is unsustainable. The world urgently needs a more sustainable and eco-friendly solution. To this end, we have taken the <b>synthetic biology approach to natural dye bioproduction</b> in the hopes of making natural dyes a better substitute for synthetic dyes. What this means is our dyes have to be <b>non-toxic</b>, have <b>reduced use of chemicals in its production</b>, <b>environmentally friendly</b> and still remain <b>appealing to fashion designers and consumers</b>.
+
−
          </p>
+
−
          <br>
+
−
          <p>
+
−
            Our project entitled <b>Coup Dy'état</b> aims to develop a new bio-manufacturing method of producing flavonoids in <i>E. coli</i> for use as natural dyes.
+
−
          </p>
+
−
          <br>
+
−
          <figure class="figures">
+
−
            <img src="https://static.igem.org/mediawiki/2018/9/94/T--NUS_Singapore-A--KC_Consumers.png" style="width:32%;">
+
−
            <img src="https://static.igem.org/mediawiki/2018/0/08/T--NUS_Singapore-A--KC_Application.png"  style="width:32%;">
+
−
            <img src="https://static.igem.org/mediawiki/2018/c/cf/T--NUS_Singapore-A--KC_Experimentation.png"  style="width:32%;">
+
−
            <figcaption><b>Image 5</b>. Our dyes be non-toxic, have reduced use of chemicals in its production, environmentally friendly and still remain <b>appealing to fashion designers and consumers
+
−
            </figcaption>
+
−
          </figure>
+
−
          <br>
+
−
        </div>
+
−
        <div class="column right">
+
−
          <h2>The Challenges</h2>
+
−
          <br>
+
−
          <p>However, in current bio-manufacturing methods, constraints and limitations prevent bio-manufacturing from achieving more of its potential. One limitation is <b>cost</b>, as <b>expensive chemical inducers</b> and <b>feedstock</b> are often required
+
−
            during the bio-manufacturing. Chemical inducers are often used in production to activate gene expression when cells have reached high cell density. The feedstock can make up as much as <b>18% of total production costs</b><sup>[7]</sup>.
+
−
          </p>
+
−
          <br>
+
−
          <p>
+
−
            Although environmental stresses are currently taken into consideration and managed in bioreactors, there is <b>one form of cell stress that is often neglected</b>. <b>Stress induced by the expression of recombinant proteins </b> is present
+
−
            not only in large-scale bioreactor, but also in bench-top laboratory experiments. The depletion of finite cellular resources during the expression of synthetic constructs constitutes an unwanted burden, hampering the growth and expected performance
+
−
            of engineered cells in an unpredictable manner<sup>[8]</sup>. The bio-manufacturing process can consume as much as 25% of all cellular transcriptional resources<sup>[9]</sup>. Unfortunately, there is a lack of monitoring for such cell stress
+
−
            within industrial bioreactors, leading to cell death that is counterproductive to bio-manufacturing.
+
−
          </p>
+
−
          <br>
+
−
        </div>
+
−
      </div>
+
−
      <br>
+
−
      <hr>
+
−
      <br>
+
−
      <h2>Our Solution</h2>
+
−
      <br>
+
  
−
      <figure class="figures">
+
#content {
−
        <img src="https://static.igem.org/mediawiki/2018/3/34/T--NUS_Singapore-A--Description_overview.png">
+
    width:100%;
−
        <figcaption><b><i>Figure 1. Solution Overview <br>Top row (from left): Xylose, De Novo Biosynthesis of Naringenin, Luteolin production. <br>Bottom row (from left):Blue light repressible system, RFP cell stress reporter, cell-machine interface </i></b> </figcaption>
+
    min-width: 100%!important;
−
      </figure>
+
    margin: 0;
−
      <div class="row">
+
    padding: 0;
−
        <div class="column left">
+
    top: -10px;
−
          <br>
+
}
−
          <p>To address the challenges, our team decided to develop a computer mediated optogenetic regulation system that serves as a platform for future bio-manufacturing and biosynthesis. The system includes an engineered cell in which its biosynthesis
+
#mw-content-text {
−
            pathway can be rapidly regulated by light and burden-based cellular stress monitored and regulated by a specially designed hardware.
+
    position:relative;
−
          </p>
+
    margin: 0;
−
          <br>
+
    padding: 0;
−
          <p>
+
    left: 0;   
−
            Firstly, to <b>eliminate the use of expensive chemical inducers</b> to switch from growth to the production phase, and we aim to use <b>optogenetic control</b>. <b>To allow dynamic gene regulation in our engineered bacteria, we designed an optogenetic circuit using a blue light repressible promoter for flavonoid biosynthesis.</b>            With proper positioning of blue light LEDs, by switching on and off blue light, we can achieve more precise and effective activating and repressing gene activity. Unlike chemical inducers, light can be easily and quickly removed from the bioreactor
+
    font-size: 100%;
−
            to allow for de-repression of gene activity.
+
    z-index:0;
−
          </p>
+
}
−
          <br>
+
/* set all basic objects to neutral formatting, removes all padding, margins, etc and sets the fontsize to 100%*/
−
          <p>
+
 
−
            We also engineered our cells to <b>promote xylose uptake</b> in order to enable the <b> use of lignocellulosic waste as a much more sustainable feedstock</b> for our cells. Lignocellulosic waste is a renewable source of biomass from which
+
h1,
−
            xylose can be processed from. The use of xylose over glucose is also advantageous, as metabolism of glucose will result in the production of acetic acid, a growth inhibitor<sup>[10]</sup>. This could cause bio-manufacturing to be less efficient,
+
h2,
−
            achieve lower yield and make it less economically viable.
+
h3,
−
          </p>
+
h4
−
          <br>
+
{
−
        </div>
+
    font-family: 'Arial', sans-serif;
−
        <div class="column right">
+
    color: black;
−
          <br>
+
    background: none;
−
          <p>
+
    font-weight: normal;
−
            Secondly, as it is critical to monitor cellular stress induced by the expression of recombinant proteins for efficient production, <b>we introduced a stress-sensing fluorescence reporter</b>. Placed under a burden-responsive promoter, the
+
    margin-bottom: 0;
−
            expression of RFP will increase in proportion with cellular burden, giving us the much-needed feedback in order to take corrective actions to reduce cell stress by decreasing the expression of the synthetic construct.
+
    text-align: left;
−
          </p>
+
    overflow: visible;
−
          <br>
+
    border: none;
−
          <p>
+
}
−
            Lastly, in order to enhance the feedback operation and ensure bio-manufacturing is constantly optimised and at its most optimal state, a <b>computer-aided system</b> was developed to <b>automatically regulate gene expression using light according to the feedback from the stress sensor</b>.
+
/*as a script gets a paragraph, by default, no formatting for p */
−
            This creates a <b>closed-loop system</b> that is devoid of manual inputs. The metabolic burden from the expression of recombinant proteins is dynamic and constantly changing, and the regulation of cell stress can only be made possible through
+
 
−
            the use of a closed-loop feedback system, which is what we have achieved. To demonstrate this approach, we produced Luteolin, a natural yellow dye.
+
 
−
          </p>
+
.caption-justify {
−
          <br>
+
  text-align: justify;
−
        </div>
+
  margin: 0 auto;
−
      </div>
+
  width: 70%;
−
     </div></div>
+
  font-style: italic;
−
   </div>
+
  font-size: 16px;
−
</body>
+
}
 +
 
 +
.reference {
 +
    font-family: Arial;
 +
    font-size: 16px;
 +
    font-weight: 100;
 +
    line-height: 22px;
 +
    text-align: left;
 +
}
 +
 
 +
.all-wrapper{
 +
  max-width: 1200px;
 +
  position: relative;
 +
  margin: auto;
 +
  background-color: rgba(255, 255, 255, 1.00);
 +
}
 +
 
 +
.content-wrapper{
 +
  width: 90%;
 +
  position: relative;
 +
  margin: auto;
 +
}
 +
 
 +
.header{
 +
  width: 55%;
 +
  height: auto;
 +
  margin: auto;
 +
  display: block;
 +
} 
 +
 
 +
 
 +
/********************* Add our own style here ********************************/
 +
 
 +
/****************************BASIC CSS STUFF ****************************************/
 +
h1 {
 +
    font-family: Arial;
 +
    font-size: 36px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 38px;
 +
}
 +
h2 {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 28px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 34px;
 +
}
 +
 
 +
h3 {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 24px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 29px;
 +
}
 +
 
 +
h4 {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 20px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 700;
 +
    line-height: 29px;
 +
}
 +
 
 +
p{
 +
    font-family: Arial;
 +
    font-size: 20px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 100;
 +
    line-height: 29px;
 +
    text-align: justify;
 +
}
 +
 
 +
p~ul li, p~ol li {
 +
    font-family: Arial;
 +
    font-size: 20px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 100;
 +
    line-height: 29px;
 +
    text-align: justify;
 +
}
 +
 
 +
.row ul li, .row ol li {
 +
    font-family: Arial;
 +
    font-size: 20px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 100;
 +
    line-height: 29px;
 +
    text-align: justify;
 +
    margin-left: 2em;
 +
    margin-right: 2em;
 +
}
 +
 
 +
blockquote {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 27px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 400;
 +
    line-height: 36px;
 +
}
 +
pre {
 +
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
 +
    font-size: 18px;
 +
    font-style: normal;
 +
    font-variant: normal;
 +
    font-weight: 400;
 +
    line-height: 36px;
 +
}
 +
 
 +
 
 +
 
 +
/********************** CSS FROM DESIGN *****************************************************/
 +
 
 +
    .figures{
 +
    margin: auto auto;
 +
    max-width: 80%;
 +
    }
 +
    .figures img{
 +
    display: inline-block;
 +
    }
 +
    .figures2{
 +
    margin: auto auto;
 +
    max-width: 80%;
 +
    }
 +
    .figures2 figcaption{
 +
    margin: 12px;
 +
    font-size: 16px;
 +
    text-align: center;
 +
    font-style: italic;
 +
    }
 +
    .figures2{
 +
    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    -webkit-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    -moz-box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
 +
    }
 +
    .figures figcaption{
 +
    margin: 12px;
 +
    font-size: 16px;
 +
    text-align: center;
 +
    font-style: italic;
 +
    }
 +
    .no-italics {
 +
    font-style: normal; 
 +
    }
 +
 
 +
 
 +
 
 +
/****************************THIS IS CSS FROM INTERLAB*******************************/
 +
/* The accordion is the class given to the drop-down menu thingy */
 +
.accordion {
 +
  background-color: #3498db;
 +
  color: #fff;
 +
  cursor: pointer;
 +
  padding: 15px;
 +
  width: 100%;
 +
  text-align: left;
 +
  border: none;
 +
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
 +
  -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
 +
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16), 0px 3px 6px rgba(0, 0, 0, 0.23);
 +
  outline: none;
 +
  /* I wanted to give a gradual change, but it's having some trouble reading the 'transition' property. I'll look into having it javascripted instead. */
 +
  /*  transition: 0.4s linear;    */
 +
  font-family: "Montserrat", sans-serif;
 +
  font-weight: 400;
 +
  font-size: 20px;
 +
  margin-bottom: 6px;
 +
}
 +
 
 +
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 +
.active,
 +
.accordion:hover {
 +
  font: bold 20px "Montserrat", sans-serif;
 +
  background-color: #2980b9;
 +
}
 +
 
 +
/* Style the accordion panel. Note: hidden by default */
 +
.panel {
 +
  background-color: transparent;
 +
  text-align: center;
 +
  margin-top: 0;
 +
  max-height: 0;
 +
  overflow: hidden;
 +
  transition: max-height 0.2s ease-out;
 +
}
 +
.panel-inside{
 +
  display: inline-block;
 +
  text-align: justify;
 +
  max-width: 100%;
 +
}
 +
 
 +
.accordion:after {
 +
  font-family: FontAwesome;
 +
  font-size: 27px;
 +
  font-weight: 800;
 +
  color: #fff;
 +
  content: "\f067";
 +
  float: right;
 +
  margin-left: 5px;
 +
}
 +
.active:after {
 +
  font-family: FontAwesome;
 +
  content: "\f068";
 +
}
 +
.accordion-closer{
 +
  background-color: #ed1144;
 +
  color: #fff;
 +
  cursor: pointer;
 +
  outline: none;
 +
  padding: 8px;
 +
  width: 12.0%;
 +
  border-radius: 25px;
 +
  text-align: left;
 +
  border-color: transparent;
 +
  -webkit-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
 +
  -moz-box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
 +
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.23), 0px 3px 6px rgba(0, 0, 0, 0.32);
 +
  font-family: "Montserrat", sans-serif;
 +
  font-weight: 400;
 +
  font-size: 20px;
 +
  margin: 6px 0px;
 +
}
 +
.accordion-closer:hover {
 +
  font: bold 20px "Montserrat", sans-serif;
 +
  background-color: #a80d31;
 +
}
 +
.accordion-closer:after{
 +
  font-family: FontAwesome;
 +
  font-size: 27px;
 +
  content:"\f00d";
 +
  float: right;
 +
  margin-left: 5px;
 +
}
 +
table,
 +
th,
 +
td {
 +
  border: none;
 +
  border-collapse: collapse;
 +
}
 +
table {
 +
  font-family: "Arial";
 +
  font-size: 18px;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  max-width: 95%;
 +
}
 +
 
 +
th,
 +
td {
 +
  text-align: left;
 +
  padding: 3px;
 +
}
 +
 
 +
img {
 +
  display: block;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  max-width:100%;
 +
}
 +
 
 +
.graph,
 +
.measurement_table {
 +
  width: 70%;
 +
  height: auto;
 +
  margin: auto;
 +
}
 +
 
 +
.interlab-header {
 +
  width: 47.5%;
 +
  height: auto;
 +
  margin: auto;
 +
}
 +
.center-justified {
 +
  text-align: justify;
 +
  margin: 0 auto;
 +
  width: 70%;
 +
}
 +
 
 +
/**********************
 +
    Start of two columns */
 +
* {
 +
  box-sizing: border-box;
 +
}
 +
 
 +
/* Create two columns that floats next to each other */
 +
.column {
 +
  float: left;
 +
  text-align: left;
 +
}
 +
 
 +
.left {
 +
  width: 48%;
 +
  margin-right: 2%;
 +
}
 +
 
 +
.right {
 +
  width: 48%;
 +
  margin-left: 2%;
 +
}
 +
 
 +
/* Clear floats after the columns */
 +
.row:after {
 +
  content: "";
 +
  display: table;
 +
  clear: both;
 +
}
 +
 
 +
/********************
 +
    End of two columns */
 +
 
 +
/*****************************CSS FOR NOTEBOOK*****************************/
 +
 
 +
 
 +
    img {
 +
        display: block;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
    }
 +
 
 +
    .discussion_graph, .measurement_table{
 +
        width: 70%;
 +
        height: auto;
 +
        margin: auto;
 +
    }
 +
 
 +
    .tablinks{
 +
    cursor: pointer;
 +
    }
 +
    .months-container{
 +
    text-align: justify;
 +
    margin:6px 18% 6px 18%;
 +
    }
 +
    .months-container div{
 +
    width: auto;
 +
    margin: 0 2px 2px 0;
 +
    text-align: center;
 +
    font-family: "Montserrat";
 +
    font-size: 18px;
 +
    display:inline-block;
 +
    }
 +
    .months-container:after{
 +
    content: '';
 +
    width: 100%; /* Ensures there are at least 2 lines of text, so justification works */
 +
    display: inline-block;
 +
    }
 +
 
 +
/* Style the main tab content */
 +
.tabcontent {
 +
    display: none;
 +
    border: none;
 +
    margin: none;
 +
    -webkit-animation: fadeEffect 1s;
 +
    animation: fadeEffect 1s;
 +
    min-height: 500px;
 +
}
 +
 
 +
/* Fade in tabs */
 +
@-webkit-keyframes fadeEffect {
 +
    from {opacity: 0;}
 +
    to {opacity: 1;}
 +
}
 +
 
 +
@keyframes fadeEffect {
 +
    from {opacity: 0;}
 +
    to {opacity: 1;}
 +
}
 +
 
 +
/**************************THIS IS CSS FOR SAFETY*************************************/
 +
 
 +
.pictures{
 +
  width: 50px;
 +
  height: 50px;
 +
  background-colour: grey;
 +
}
 +
 
 +
 
 +
/*****************************CSS FROM EXPERT INT *******************************************/
 +
.carousel-3d-slide {
 +
      height: auto !important;
 +
      background-color: rgba(0, 0, 0, 0.25) !important;
 +
}
 +
.carousel-3d-container figure {
 +
  margin:0;
 +
}
 +
.carousel-3d-container figcaption {
 +
  position: absolute;
 +
  background-color: rgba(0, 0, 0, 0.5);
 +
  color: #fff;
 +
  bottom: 0;
 +
  position: absolute;
 +
  bottom: 0;
 +
  padding: 15px;
 +
  font-size: 12px;
 +
  min-width: 100%;
 +
  box-sizing: border-box;
 +
}
 +
/***********************************END OF STYLING FOR CAROUSEL*******************************/
 +
   
 +
    /* Style the tab */
 +
 
 +
/* Style the tab boxes */
 +
.sponsor-boxes{
 +
  vertical-align: 50%;
 +
  outline: none;
 +
  border: none;
 +
  cursor: pointer;
 +
  padding: 0px;
 +
  background-color: inherit;
 +
 
 +
}
 +
 
 +
/* Style the img inside the buttons */
 +
.sponsors-overview-rows button img{
 +
  max-height:100%;
 +
  max-width:100%;
 +
}
 +
 
 +
/* Create an active/current tablink class */
 +
.sponsors-overview-rows button.active {
 +
    background-color: transparent;
 +
}
 +
 
 +
.tabcontent-wrapper{
 +
  text-align: center;
 +
  max-width: 100%;
 +
  background-color: rgba(255, 255, 255, 0.6);
 +
}
 +
/* Style the tab content */
 +
.tabcontent {
 +
    display: none;
 +
    max-width: 85%;
 +
    margin: auto auto;
 +
    padding: 6px 12px;
 +
/*
 +
    border-radius: 12px;
 +
    background-color: rgba(255, 255, 255, 0.6);
 +
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    -moz-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
*/
 +
    flex-direction: row;
 +
    justify-content: flex-start;
 +
    align-items: center;
 +
}
 +
.sponsor-pic{
 +
  display: flex;
 +
  width: 235px;
 +
  max-width: 235px;
 +
  min-width: 235px;
 +
  height: auto;
 +
}
 +
.sponsor-description{
 +
  display: flex;
 +
  margin-left: 24px;
 +
  font-family: "Lora", sans-serif;
 +
  font-weight: 400;
 +
  font-size: 1.25em;
 +
  line-height: normal;
 +
  text-align: justify;
 +
}
 +
 
 +
/*************************************CSS FOR COLLAB *********************************/
 +
 
 +
.tabcontent p{
 +
font-size: 1.25em;
 +
}
 +
.collab-content{
 +
  text-align: justify;
 +
}
 +
.collab-img-center{
 +
  display: block;
 +
  max-width: 60%;
 +
  height: auto;
 +
  margin: 12px auto 3px auto;
 +
}
 +
 
 +
/*********************************CSS FOR PUBLIC ENGAGEMENT*****************************/
 +
 
 +
 
 +
    .button-things{
 +
    vertical-align: -50%;
 +
    height: 100%;
 +
    background: none;
 +
    color: inherit;
 +
    border: none;
 +
    padding: 0;
 +
    font: inherit;
 +
    cursor: pointer;
 +
    outline: inherit;
 +
    }
 +
 
 +
    .column {
 +
 
 +
        background-color: inherit;
 +
    }
 +
    .column h1{
 +
    border-bottom:none;
 +
    padding-left: 0px;
 +
    }
 +
 
 +
/************************************CSS FOR TEAM *******************************************/
 +
 
 +
.members-gallery{
 +
  max-width: 80%;
 +
  position: relative;
 +
  margin: auto;
 +
  padding: 10px;
 +
}
 +
.members-gallery img{
 +
  max-width: 100%;
 +
}
 +
.overlay{
 +
  position: absolute;
 +
}
 +
.nanda{
 +
  position: absolute;
 +
  top: 4.5%;
 +
  left: 42.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.ting2{
 +
  position: absolute;
 +
  top: 21%;
 +
  left: 29%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.marcus{
 +
  position: absolute;
 +
  top: 21%;
 +
  left: 56.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.rita{
 +
  position: absolute;
 +
  top: 28.5%;
 +
  left: 14%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.walter{
 +
  position: absolute;
 +
  top: 28.5%;
 +
  left: 72%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.liyana{
 +
  position: absolute;
 +
  top: 37%;
 +
  left: 42.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.aaronl{
 +
  position: absolute;
 +
  top: 49%;
 +
  left: 26.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.russell{
 +
  position: absolute;
 +
  top: 49%;
 +
  left: 58.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.hyhy{
 +
  position: absolute;
 +
  top: 54.5%;
 +
  left: 9.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.ryan{
 +
  position: absolute;
 +
  top: 54.5%;
 +
  left: 76%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.beatrix{
 +
  position: absolute;
 +
  top: 65%;
 +
  left: 42.5%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.jiacheng{
 +
  position: absolute;
 +
  top: 75%;
 +
  left: 27%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
.me{
 +
  position: absolute;
 +
  top: 75%;
 +
  left: 59%;
 +
  width: 12%;
 +
  height: 21.5%;
 +
  cursor: pointer;
 +
}
 +
 
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    left: 0;
 +
    top: 0;
 +
    width: 100%; /* Full width */
 +
    height: 100%; /* Full height */
 +
    overflow: auto; /* Enable scroll if needed */
 +
    background-color: rgb(0,0,0); /* Fallback color */
 +
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
 +
}
 +
 
 +
/* Modal Content/Box */
 +
.profile-content {
 +
    margin: 5% auto; /* 10% from the top and centered */
 +
    padding: 2.5%;
 +
    border: 2px solid
 +
      rgba(133,133,133,.15);
 +
    background-color: #fff;
 +
    -moz-box-shadow: 0 0 8px rgba(0,0,0,.09);
 +
    -webkit-box-shadow: 0 0 8px rgba(0,0,0,.09);
 +
    box-shadow: 0 0 8px rgba(0,0,0,.09);
 +
    width: 100%; /* Could be more or less, depending on screen size */
 +
}
 +
.the-middle {
 +
  height:1px;
 +
  position: relative;
 +
}
 +
/* The Close Button */
 +
.close {
 +
    color: #aaa;
 +
    float: right;
 +
    font-size: 28px;
 +
    font-weight: bold;
 +
}
 +
 
 +
.close:hover,
 +
.close:focus {
 +
    color: black;
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
}
 +
.profile{
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: center;
 +
  align-items: flex-start;
 +
  justify-content: space-evenly;
 +
 
 +
}
 +
.profile-description{
 +
  display: flex;
 +
  flex-wrap: no-wrap;
 +
  flex-grow: 3;
 +
  flex-direction: column;
 +
  justify-content: space-between;
 +
  text-align: justify;
 +
  max-width: 80%;
 +
}
 +
.profile-description h2{
 +
  font-family: 'Montserrat';
 +
  font-weight: 600;
 +
}
 +
.profile-title{
 +
  margin: auto auto 10px -15px;
 +
  padding-right:35px;
 +
  border-bottom: 1px solid black;
 +
}
 +
.profile-description-item{
 +
  display:flex;
 +
  padding: 0px;
 +
  margin: 0px;
 +
}
 +
.profile-picture{
 +
  margin-right: 15px;
 +
  position: relative;
 +
  text-align: center;
 +
  color: #fff;
 +
  display: flex;
 +
  flex-grow: 1;
 +
  flex-basis: 0;
 +
}
 +
.namecard{
 +
  line-height: 80%;
 +
  padding: none;
 +
}
 +
.namecard h1{
 +
  font-family: 'Montserrat';
 +
  font-weight: 600;
 +
  border: none;
 +
}
 +
.namecard p{
 +
  font-family: 'lora';
 +
  font-weight: 700;
 +
  font-style: italic;
 +
}
 +
.portrait1{
 +
  height: 360px;
 +
  width: 250px;
 +
  border: 1px solid #aaa;
 +
  border-radius: .5%;
 +
  background-size: cover;
 +
  background-repeat: no-repeat;
 +
  background-position: center;
 +
}
 +
.portrait_jc{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/18/T--NUS_Singapore-A--Jiacheng_formal.jpg");
 +
}
 +
.portrait_jc:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/12/T--NUS_Singapore-A--Jiacheng_informal.jpg");
 +
}
 +
.portrait_nanda{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/7/74/T--NUS_Singapore-A--Nanda_formal.jpg");
 +
}
 +
.portrait_nanda:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/f/fc/T--NUS_Singapore-A--Nanda_informal.jpg");
 +
}
 +
.portrait_ting2{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/0/07/T--NUS_Singapore-A--Tingting_formal.jpg");
 +
}
 +
.portrait_ting2:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/c/c2/T--NUS_Singapore-A--Tingting_informal.jpg");
 +
}
 +
.portrait_marcus{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/7/7c/T--NUS_Singapore-A--Marcus_formal.jpg");
 +
}
 +
.portrait_marcus:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/5/56/T--NUS_Singapore-A--Marcus_informal.jpg");
 +
}
 +
.portrait_rita{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/b/be/T--NUS_Singapore-A--Rita_formal.jpg");
 +
}
 +
.portrait_rita:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/a/a5/T--NUS_Singapore-A--Rita_informal.jpg");
 +
}
 +
.portrait_walter{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/0/02/T--NUS_Singapore-A--Walter_formal.jpg");
 +
}
 +
.portrait_walter:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/6/6a/T--NUS_Singapore-A--Walter_informal.jpg");
 +
}
 +
.portrait_liyana{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/3/3d/T--NUS_Singapore-A--Liyana_formal.jpg");
 +
}
 +
.portrait_liyana:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/9/91/T--NUS_Singapore-A--Liyana_informal.jpg");
 +
}
 +
.portrait_aaronl{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/2/2f/T--NUS_Singapore-A--AaronL_formal.jpg");
 +
}
 +
.portrait_aaronl:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/7/71/T--NUS_Singapore-A--AaronL_informal.jpg");
 +
}
 +
.portrait_russell{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/0/08/T--NUS_Singapore-A--Russell_formal.jpg");
 +
}
 +
.portrait_russell:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/2/2b/T--NUS_Singapore-A--Russell_informal.jpg");
 +
}
 +
.portrait_hyhy{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/1b/T--NUS_Singapore-A--Haoyuan_formal.jpg");
 +
}
 +
.portrait_hyhy:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/5/52/T--NUS_Singapore-A--Haoyuan_informal.jpg");
 +
}
 +
.portrait_beatrix{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/8/87/T--NUS_Singapore-A--Beatrix2.jpg");
 +
}
 +
.portrait_beatrix:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/f/f4/T--NUS_Singapore-A--Beatrix_informal.jpg");
 +
}
 +
.portrait_me{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/9/9f/T--NUS_Singapore-A--Me_formal.jpg");
 +
}
 +
.portrait_me:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/f/fd/T--NUS_Singapore-A--Me_informal.jpg");
 +
}
 +
.portrait_ryan{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/d/db/T--NUS_Singapore-A--Ryan_formal.jpg");
 +
}
 +
.portrait_ryan:hover{
 +
  background-image: url("https://static.igem.org/mediawiki/2018/1/1e/T--NUS_Singapore-A--Ryan_informal.jpg");
 +
}
 +
 
 +
/***************************** CSS FOR SUPERVISORS *********************************************/
 +
 
 +
.namecard_column {
 +
  max-width: 98%;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-bottom: 30px;
 +
  padding: 20px;
 +
}
 +
 
 +
 
 +
#card-left {
 +
  margin-left:12.5%;
 +
}
 +
 
 +
#card-right {
 +
  margin-right:12.5%;
 +
}
 +
 
 +
 
 +
@media (max-width: 650px) {
 +
  .namecard_column {
 +
    width: 100%;
 +
    display: block;
 +
  }
 +
}
 +
 
 +
.card {
 +
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
}
 +
 
 +
.intro_container {
 +
  display: flex;
 +
  flex-direction: row;
 +
  justify-content: space-between;
 +
  align-items: flex-start;
 +
  margin-top: 16px;
 +
  padding: 0 5px;
 +
}
 +
.intro-item{
 +
  display: flex;
 +
  flex: 1;
 +
  flex-direction: column;
 +
}
 +
.intro-item h2, .intro-item p{
 +
  text-align: center;
 +
  margin-right: 0px;
 +
  margin-left: 0px;
 +
}
 +
 
 +
.intro_container::after, .row::after {
 +
  content: "";
 +
  clear: both;
 +
  display: table;
 +
}
 +
 
 +
.title {
 +
  color: grey;
 +
}
 +
 
 +
img.social_link {
 +
    margin:2%;
 +
    position:relative;
 +
    float:left;
 +
    width:15%;
 +
    height:15%;
 +
    padding-bottom: 10px;
 +
}
 +
 
 +
/*******************************************CSS FOR SPONSORS ******************************/
 +
 
 +
.sponsors-wrapper{
 +
  width: 80%;
 +
}
 +
.sponsors-overview{
 +
  display: block;
 +
  border-bottom: 1px solid black;
 +
  text-align: center;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  padding: 5px 15px;
 +
}
 +
.sponsors-overview-title{
 +
  display: block;
 +
  font-family: "Montserrat" ,serif;
 +
  font-size: 30px;
 +
  font-weight: 600;
 +
  margin-left: auto;
 +
  margin-right: auto;
 +
  margin-top: 15px;
 +
  margin-bottom: 15px;
 +
  text-align: center
 +
}
 +
.sponsors-overview-rows{
 +
  display: inline-block;
 +
  margin: 15px 0px 15px 0px;
 +
  text-align: center;
 +
}
 +
.sponsors-overview-rows button{
 +
display: inline-block;
 +
vertical-align:middle;
 +
}
 +
/* Style the tab */
 +
 
 +
/* Style the tab boxes */
 +
.sponsor-boxes1,.sponsor-boxes2,.sponsor-boxes3{
 +
  display: inline-block;
 +
  margin: 15px;
 +
  color: #fff;
 +
  text-align: center;
 +
  vertical-align: 0%;
 +
  outline: none;
 +
  border: none;
 +
  cursor: pointer;
 +
  background-color: inherit;
 +
}
 +
.sponsor-boxes1{
 +
  max-width:50%;
 +
  height:auto;
 +
}
 +
.sponsor-boxes2{
 +
  max-width:40%;
 +
  height:auto;
 +
}
 +
.sponsor-boxes3{
 +
  max-width:30%;
 +
  height:auto;
 +
}
 +
/* Change background color of buttons on hover */
 +
/* How about no
 +
.sponsors-overview-rows button:hover {
 +
    background-color: #ddd;
 +
*/
 +
}
 +
 
 +
/* Create an active/current tablink class */
 +
.sponsors-overview-rows button.active {
 +
     background-color: #ccc;
 +
}
 +
 
 +
/***********************************CSS For Medals ***************************************/
 +
 
 +
.checklist {
 +
   margin: auto 5%;
 +
  padding: 12px;
 +
  font-family: "Lora", serif;
 +
}
 +
.checklist table{
 +
  margin: 6px auto auto auto;
 +
}
 +
.checklist table th, .checklist table td{
 +
  float:left;
 +
  margin: 3px;
 +
}
 +
.checklist table th{
 +
  font-family: "Montserrat", sans-serif;
 +
  font-weight: 800;
 +
  font size: 20px;
 +
}
 +
.tick {
 +
  font-size: 64px;
 +
  color: #228b22;
 +
}
 +
.description{
 +
  width: 70%;
 +
  text-align: justify;
 +
}
 +
 
 +
 
 +
</style>
  
 
</html>
 
</html>
−
{{:Team:NUS_Singapore-A/Templates/Footer}}
 

Revision as of 18:31, 12 October 2018