Difference between revisions of "Team:BNU-China/Project"

Line 1: Line 1:
−
{{BNU-CHINA/partials/header}}
+
/**----------------------------------------------
−
{{BNU-CHINA/partials/nav | PROJECT=focus}}
+
>>> Table of Contents:
−
<html>
+
------------------------------------------------
−
<div class="main-container">
+
0.0 global
−
    <div class="container-fluid page-heading" style="background-image: url(https://static.igem.org/mediawiki/2016/f/f4/T--BNU-China--project.jpg);">
+
1.0 main-container
−
        <h3> BACKGROUND </h3>
+
2.0 page-heading
−
    </div>
+
3.0 navigation
−
    <div>
+
4.0 page-story
−
      <div class="container page-story">
+
5.0 team-page
−
        <article id="project" class="col-lg-10 col-lg-offset-1 col-md-12 col-md-offset-0 col-sm-offset-0 col-sm-12">
+
6.0 achievements-page
−
            <header class="page-header">
+
7.0 attributions
−
                <h1>Background</h1>
+
8.0 practices
−
              <small id="secondary-page-header">Do One Thing</small>
+
9.0 footer
−
            </header>
+
------------------------------------------------
 +
*/
 +
/**
 +
-- 0.0 global
 +
*/
  
−
            <h2>Overview</h2>
+
.header-color {
−
            <p>Cancer is a group of diseases involving abnormal cell growth with the potential to invade or spread to other parts of the body. Cancer is the second most common cause of death worldwide, leading to 14 million new cases and over 8 million deaths per year<sup><a href="https://2016.igem.org/Team:BNU-China/Project#ref-1">[1]</a></sup>.Besides, The financial costs of cancer were estimated at $1.16 trillion US dollars per year as of 2010.It has become one of the great challenges human is facing nowadays.</p>
+
  background: #ffffff;
−
            <figure class="text-center">
+
  color: #646464;
−
                <img src="https://static.igem.org/mediawiki/2016/b/b2/T--BNU-China--cancer.jpg" width="65%">
+
}
−
                <figcaption>
+
−
                    Fig.1 Death from cancer per million persons in 2012
+
−
                </figcaption>
+
−
            </figure>
+
−
            <p>In order to conquer this serious problem, many medical scientists are devoted to exploit medicines that can target cancer cells. In 1962, Paclitaxel was discovered in the bark of the Pacific yew, <i>Taxus brevifolia</i>, giving the name “paclitaxel”. Shortly after its discovery, taxanes have demonstrated a unique ability to palliate the symptoms of many types of advanced cancers, including carcinoma of the ovary, lung, head, neck, bladder, and esophagus. Good efficacy and little side effect quickly made the taxane class a most common addition to the chemotherapy against cancer in the past several decades.</p>
+
  
−
            <figure class="text-center">
+
/**
−
                <img src="https://static.igem.org/mediawiki/2016/7/70/T--BNU-China--taxol2.jpg" width="65%" >
+
-- 1.0 main-container
−
                <figcaption>
+
*/
−
                    Fig.2  Ball-and-stick model of the taxol
+
.main-container {
−
                </figcaption>
+
  top: 0;
−
            </figure>
+
  left: 0;
−
            <p>The great commercial success of Paclitaxel and other anti-microtubule medicines has inspired pharmaceutical companies to extract and test similar compounds, farmers to grow related plants. So an effective method is being needed urgently to discover many other similar compounds. Moreover, testing the concentration of paclitaxel from fermentation broths or plants are in high demand.</p>
+
  right: 0;
−
            <p>How to test the taxol and screen other compounds?<br />We determine to use microtubule for assisting.</p>
+
  margin: 0;
−
            <p>As we all know, the mechanism of taxol is to kill cancer cells by obstructing the function of microtubule and consequently blocking cell division. Microtubules are a kind of important cellular structure composed of two monomers: α-tubulin and β-tubulin. These hollow rod shaped proteins are required for many cellular activities including cell division and transportation.<sup><a href="https://2016.igem.org/Team:BNU-China/Project#ref-2">[2]</a></sup> A dynamic equivalence are found in microtubules, meaning that protein monomers are assembling and disassembling at every moment. The anti-microtubule agents can destroy the dynamic balance in microtubules, hence terminating cell mitosis and inducing the tumor cell apoptosis.</p>
+
  padding: 0;
−
            <p>There are two types of anti-microtubule agents. One type inhibits assembly, such as vinca alkaloids, colchicine, podophyllotoxin and etc. The other type interferes disassembly, like taxanes and epothilones.</p>
+
  background-color: white;
−
            <p>As for the discovery of anti-cancer compounds, we narrow down our sight to the anti-microtubule agents which are of great significance in cancer treatments.</p>
+
  overflow: auto;
−
            <p>As for our project this year, we modified the homo sapiens α-tubulin, ligated it with N/C terminal of the luciferase report gene fragments. Based on the principles of synthetic biology, we aimed to express the fusion proteins with α-tubulin and signaling residues. Then we made a kit containing the fusion α-tubulins and non-fusion β-tubulins  with buffer which has an appropriate condition verified by experiments. We call the kit “taxolight”, and through which we can achieve these things below:</p>
+
  position: absolute;
−
            <h3>Screen with high feasibility</h3>
+
}
−
            <p>Anti-cancer agents especially paclitaxel have showed their powerful ability in clinical application. However, we still need to look for new drugs that are more effective.</p>
+
−
            <p>The existing screening method of anti-microtubule agents needs to purify tubulins coming from mammalian brains. It heavily relies on the turbidity of tubulin solutions when they aggregate or disaggregate under certain temperatures <i>in vitro</i>. Once using this method, we can get a “S”-type standard aggregation curve based on the liquid OD value and the incubation time. Similarly, we can also get a standard disaggregation curve. When added different anti-microtubule agents, the aggregation/disaggregation curve will change correspondingly. Thus we can determine the role of the drug according to the change of curve.</p>
+
−
            <p>The defects of this method are shown below:</p>
+
−
            <ol>
+
−
                <li>The operation of extracting and purifying tubulin from animal brain is very complicated, and the experiment must be done within an hour after killing the animal. At the same time, the price of reagents in this experiment is expensive. The experiment period is long which takes no less than 3 days.</li>
+
−
                <li>The wave length of measuring OD is 350nm, which is between ultraviolet light and visible light and always leads to a huge deviation. Also, the requirement of the testing instruments is high, quartz containers are needed as well, which cost a lot.</li>
+
−
            </ol>
+
−
            <p>Our project avoids these drawbacks, and provides a new insight for the anti-microtubule drug screening. What we need is just a fluorescence microscope by using our kit.</p>
+
−
            <p>Take paclitaxel as a control, we could test the fluorescence intensity of new medicine compared with paclitaxel's. In this way, further research and development of new anti-microtubule agents can be carried out easily than before.</p>
+
  
−
            <h3>Detection in high sensitivity</h3>
+
/**
−
            <p>HPLC/RP-HPLC is one of the most common method to detect paclitaxel now. It relies on pumps to pass the sample through a column filled with solid adsorbent materials. Each component in the sample interacts differently with the adsorbent material, causing different flow rates and leading to the separation of the components as they flow out of the column.</p>
+
-- 2.0 page-heading
−
            <figure class="text-center">
+
*/
−
                <img src="https://static.igem.org/mediawiki/2016/c/c1/T--BNU-China--HPLC.jpg" width="65%">
+
−
                <figcaption>
+
−
                    Fig.3 The process of HPLC
+
−
                </figcaption>
+
−
            </figure>
+
−
            <p>This is a time-consuming process which is very unfavorable to the studies in laboratory. For example, in a laboratory which producing paclitaxel from fungus, detecting the concentration of the product may delay experiment process if there were no paclitaxel at all. So we need to develop an effective method to rapidly detect whether taxanes exist or not before measuring concentration. Our kit can reach the goal in order to accelerate research progresses.</p>
+
−
            <h3>Concentration detectio</h3>
+
−
            <p>Apart from our former achievements, optimization is also needed. An intensity – concentration database of certain medicines (e.g. paclitaxel) are being planned, then we can use our “taxolight” to determine the concentration of this certain medicine conveniently.</p>
+
−
            <p>There is a limited issue that the sample solution must be ensured not containing other anti-microtubule agents. Nevertheless, it is still useful. For example, farmers who plant taxus can apply our kit to detect the concentration of taxanes in there plants. Moreover, factory can use our kit to test the concentration of taxol in their fermentation broth. In conclusion, our product can be popularized in many agent-specific tests.</p>
+
−
           
+
  
−
            <div class="reference">
+
.page-heading {
−
                <ol>
+
  width: 100%;
−
                    <li id="ref-1">World Cancer Report 2014. World Health Organization. 2014. pp. Chapter 1.1. d5ISBN 9283204298.</li>
+
  background-repeat: no-repeat;
−
                    <li id="ref-2">Rowinsky EK, Donehower RC (Oct 1991). "The clinical pharmacology and use of anti-microtubule agents in cancer chemotherapeutics". Pharmacology.& Therapeutics. 52 (1): 35–84. doi:10.1016/0163-7258(91)90086-2. PMID 1687171.</li>
+
  background-attachment: fixed;
−
                </ol>
+
  background-size: 100%;
−
            </div>
+
  text-align: center !important;
−
   
+
  text-transform: uppercase;
−
      </article>
+
  height: 100vh;
−
   
+
}
  
 +
.page-heading h3 {
 +
  margin-top: 62px;
 +
  color: #ffffff;
 +
  font-size: 10vw;
 +
  font-weight: bolder;
 +
  font-family: "Avenir", sans-serif;
 +
  margin: 0;
 +
  padding-top: 35vh;
 +
  padding-bottom: 30vh;
 +
  text-shadow: 0 1px 6px rgba(120, 120, 120, .75);
 +
}
  
−
     </div>
+
@media screen and (min-width: 992px) {
 +
  .page-heading h3 {
 +
     padding-top: 20%;
 +
  }
 +
}
  
−
     </div>
+
@media screen and (min-width: 768px) and (max-width: 992px) {
 +
  .page-heading h3 {
 +
     padding-top: 40%;
 +
  }
 +
}
  
−
<div id="footer">
+
@media screen and (max-width: 768px) {
−
    <div id="footer-div">
+
  .page-heading h3 {
−
        <ul id="footer-ul">
+
    padding-top: 30%;
−
            <li><a href="https://2016.igem.org/Team:BNU-China">Home</a></li>
+
  }
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Project">Project</a></li>
+
}
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Model">Model</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Achievements">Achievements</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Integrated_Practices">Practices</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Safety">Safety</a></li>
+
−
            <li><a href="https://2016.igem.org/Team:BNU-China/Team">Team</a></li>
+
−
        </ul>
+
−
        <span>© 2016 BNU</span>
+
−
    </div>
+
−
</div>
+
−
</div>
+
  
−
</html>
+
/**
 +
--  3.0 navigation
 +
*/
 +
 
 +
@font-face {
 +
  font-family: 'Myriad Set Pro';
 +
  src: url('https://static.igem.org/mediawiki/2016/e/ed/T--BNU-China--MyriadSetPro.ttf') format('truetype');
 +
  font-weight: normal;
 +
  font-style: normal;
 +
}
 +
 
 +
@media screen and (min-width: 1024px) {
 +
  .nav-container, .nav-adjust {
 +
    background: #333;
 +
    /*background: black;*/
 +
    position: relative;
 +
    border: 0;
 +
    padding-left: 50px;
 +
    padding-right: 50px;
 +
    padding-bottom: 0;
 +
    transition: all 0.3s ease-in-out;
 +
    height: 44px;
 +
  }
 +
}
 +
 
 +
@media screen and (max-width: 1023px) {
 +
  .nav-container, .nav-adjust {
 +
    background: linear-gradient(to bottom, black, #3b3b3b);
 +
    /*background: black;*/
 +
    opacity: 0.9;
 +
    border: 0;
 +
    transition: all 0.3s ease-in-out;
 +
    /*height: 64px;*/
 +
  }
 +
}
 +
 
 +
#taxolightlogo {
 +
  height: 50px;
 +
  width: 50px;
 +
  float: left;
 +
  /*margin-left: 10px;*/
 +
}
 +
 
 +
#navbar-brand {
 +
  padding-top: 17px;
 +
  /*opacity: 0.8;*/
 +
  color: white;
 +
  font-weight: 400;
 +
  position: absolute;
 +
  font-family: 'Myriad Set Pro', serif;
 +
}
 +
 
 +
#navbar-toggle {
 +
  margin: 15px;
 +
}
 +
 
 +
/*.nav-adjust .scrolled-down {*/
 +
/*background: black;*/
 +
/*border: 0;*/
 +
/*opacity: 0.9;*/
 +
/*transition: all 0.3s ease-in-out;*/
 +
/*}*/
 +
 
 +
/*.nav-adjust .scrolled-top {*/
 +
/*background: black;*/
 +
/*border: 0;*/
 +
/*opacity: 0.8;*/
 +
/*transition: all 0.3s ease-in-out;*/
 +
/*}*/
 +
 
 +
#bs-example-navbar-collapse-1 {
 +
  /*margin: 7px 0;*/
 +
}
 +
 
 +
.nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 +
.navbar-inverse .navbar-nav > li > a:focus {
 +
  font-size: 16px;
 +
  font-weight: 400;
 +
  color: #fff;
 +
  /*opacity: 0.9;*/
 +
  opacity: 1;
 +
  /*transition: all 0.2s ease-in-out;*/
 +
  transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 +
  font-family: 'Myriad Set Pro', serif;
 +
}
 +
 
 +
@media screen and (min-width: 1024px) {
 +
  .nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 +
  .navbar-inverse .navbar-nav > li > a:focus {
 +
    margin: auto 0 auto 15px;
 +
    padding-top: 17px;
 +
  }
 +
}
 +
 
 +
@media screen and (max-width: 1023px) {
 +
  .nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 +
  .navbar-inverse .navbar-nav > li > a:focus {
 +
    margin: auto 0 auto -20px;
 +
    /*background: red;*/
 +
  }
 +
}
 +
 
 +
.nav-adjust > .nav-container div > ul > li.focus > a {
 +
  color: white;
 +
  opacity: 1;
 +
  /*transition: all 0.5s ease-in-out;*/
 +
  font-weight: 400;
 +
}
 +
 
 +
/*.nav-adjust .scrolled-down div > ul > li.focus > a {*/
 +
/*color: white;*/
 +
/*font-weight: 300;*/
 +
/*opacity: 1;*/
 +
/*transition: all 0.2s ease-in-out;*/
 +
/*}*/
 +
 
 +
li.dropdown.open ul {
 +
  background: rgba(0, 0, 0, 0.85);
 +
  color: white;
 +
  transition: all 0.2s ease-in-out;
 +
  /*height: 30px;*/
 +
}
 +
 
 +
li.dropdown.open ul li a {
 +
  color: #b0b0b0;
 +
  transition: all 0.2s ease-in-out;
 +
  font-weight: 300;
 +
  height: 30px;
 +
  font-family: 'Myriad Set Pro', serif;
 +
}
 +
 
 +
li.dropdown.open ul:hover {
 +
  background: #151515;
 +
  transition: all 0.2s ease-in-out;
 +
}
 +
 
 +
li.dropdown.open ul:hover li a {
 +
  filter: blur(1px);
 +
  transition: all 0.5s ease-in-out;
 +
  font-weight: 300;
 +
}
 +
 
 +
li.dropdown.open ul:hover li a {
 +
  filter: blur(1px);
 +
  transition: all 0.5s ease-in-out;
 +
  font-weight: 300;
 +
}
 +
 
 +
li.dropdown.open ul li a:hover {
 +
  background: black;
 +
  color: #e9e9e9;
 +
  text-shadow: none;
 +
  filter: none;
 +
  transition: all 0.2s ease-in-out;
 +
  height: 40px;
 +
}
 +
 
 +
/**
 +
--  4.0 page-story
 +
*/
 +
 
 +
#named-anchor {
 +
  padding-top: 100px;
 +
}
 +
 
 +
#named-anchor {
 +
  color: inherit;
 +
  text-decoration: none;
 +
}
 +
 
 +
.page-story {
 +
  padding-bottom: 30px;
 +
}
 +
 
 +
.page-story > article {
 +
  background-color: white;
 +
  /*box-shadow: 0 4px 6px rgba(75, 75, 75, 0.5);*/
 +
  padding: 32px 0;
 +
}
 +
 
 +
article {
 +
  margin: 40px;
 +
}
 +
 
 +
@media screen and (min-width: 768px) and (max-width: 992px) {
 +
  .page-story > article {
 +
    padding: 32px 64px;
 +
  }
 +
 
 +
  .container-fluid {
 +
    margin-bottom: -620px;
 +
  }
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 768px) and (min-width: 641px) {
 +
  .page-story > article {
 +
    padding: 16px 10px;
 +
  }
 +
 
 +
  .container-fluid {
 +
    margin-bottom: -430px;
 +
  }
 +
 
 +
}
 +
 
 +
@media screen and (max-width: 640px) {
 +
  .page-story > article {
 +
    padding: 16px 5px;
 +
    margin: -15px;
 +
  }
 +
 
 +
  .container-fluid {
 +
    margin-bottom: -300px;
 +
  }
 +
 
 +
}
 +
 
 +
article > header.page-header {
 +
  text-align: center !important;
 +
  border: none;
 +
}
 +
 
 +
.page-header {
 +
  margin: 40px 0;
 +
}
 +
 
 +
article[id="achievement"] a {
 +
  color: #278A75;
 +
}
 +
 
 +
article[id="achievement"] h2,
 +
article[id="achievement"] h3,
 +
article[id="achievement"] h4,
 +
article[id="achievement"] h5 {
 +
  color: #D3853D
 +
}
 +
 
 +
article[id="project"] a,
 +
article[id="project"] h2,
 +
article[id="project"] h3,
 +
article[id="project"] h4,
 +
article[id="project"] h5 {
 +
  color: #8c7e01;
 +
}
 +
 
 +
article[id='modeling'] a,
 +
article[id='modeling'] h2,
 +
article[id='modeling'] h3,
 +
article[id='modeling'] h4,
 +
article[id='modeling'] h5 {
 +
  color: #278f45;
 +
}
 +
 
 +
article[id='practices'] a,
 +
article[id='practices'] h2,
 +
article[id='practices'] h3,
 +
article[id='practices'] h4,
 +
article[id='practices'] h5 {
 +
  color: #308276;
 +
}
 +
 
 +
article[id='safety'] a,
 +
article[id='safety'] h2,
 +
article[id='safety'] h3,
 +
article[id='safety'] h4,
 +
article[id='safety'] h5 {
 +
  color: #308276;
 +
}
 +
 
 +
article[id="modeling"] a,
 +
article[id="modeling"] h2,
 +
article[id="modeling"] h3,
 +
article[id="modeling"] h4,
 +
article[id="modeling"] h5 {
 +
  color: #278f45;
 +
}
 +
 
 +
article h2,
 +
article h3,
 +
article h4,
 +
article h5 {
 +
  font-weight: 500;
 +
}
 +
 
 +
article > header.page-header h1 {
 +
  font-weight: bolder;
 +
  font-size: 6vw;
 +
  text-transform: uppercase;
 +
}
 +
 
 +
#secondary-page-header {
 +
  display: block;
 +
  margin: 12px 0;
 +
  font-size: 24px;
 +
  color: #777777;
 +
}
 +
 
 +
article a {
 +
  text-decoration: none;
 +
}
 +
 
 +
article a:visited:hover {
 +
  color: #D3853D;
 +
}
 +
 
 +
article a:visited {
 +
  color: #278A75;
 +
}
 +
 
 +
article a:hover {
 +
  color: #D3853D;
 +
  text-decoration: none;
 +
}
 +
 
 +
article h2 {
 +
  font-size: 40px;
 +
  margin-bottom: 2px !important;
 +
  /* border-bottom: 1px solid #eee;*/
 +
}
 +
 
 +
article h3 {
 +
  font-size: 24px;
 +
}
 +
 
 +
article p,
 +
article blockquote {
 +
  font-size: 16px;
 +
  line-height: 22px;
 +
  margin-bottom: 16px;
 +
  font-weight: 500;
 +
}
 +
 
 +
article ol {
 +
  font-weight: normal;
 +
  margin: 0 0 16px 1.5em;
 +
  list-style: decimal outside;
 +
}
 +
 
 +
article ol li {
 +
  font-weight: normal;
 +
}
 +
 
 +
figcaption {
 +
  font-size: 18px;
 +
}
 +
 
 +
article figure {
 +
  padding: 16px 0;
 +
}
 +
 
 +
article figure {
 +
  max-width: 100%;;
 +
}
 +
 
 +
article figure figcaption {
 +
  text-align: center;
 +
  color: #278A75;
 +
  padding: 8px;
 +
}
 +
 
 +
article video {
 +
  max-width: 100% !important;
 +
  height: auto !important;
 +
  background-color: #000;
 +
  background-size: 100% 100%;
 +
  display: block;
 +
  margin: 25px auto;
 +
}
 +
 
 +
.reference {
 +
  padding: 12px 0 0 0;
 +
  border-top: 1px solid #eee;
 +
}
 +
 
 +
div.reference:before {
 +
  color: #278A75;
 +
  font-size: 18px;
 +
  content: "Reference:";
 +
  line-height: 16px;
 +
 
 +
}
 +
 
 +
#globalWrapper .reference > ol, .reference > ol {
 +
  margin: 0;
 +
  padding: 0;
 +
  list-style-type: none;
 +
  counter-reset: counter;
 +
}
 +
 
 +
div.reference > ol li {
 +
  font-style: 12px;
 +
  line-height: 16px;
 +
  color: rgb(102, 102, 102);
 +
  margin: 6px 0;
 +
}
 +
 
 +
div.reference > ol li:before {
 +
  content: '[' counter(counter) ']';
 +
  counter-increment: counter;
 +
  display: inline-block;
 +
  margin-right: 4px;
 +
}
 +
 
 +
/**
 +
--  5.0 team-page
 +
*/
 +
 
 +
.self-introduction .info-sec {
 +
  font-size: 22px !important;
 +
}
 +
 
 +
#team {
 +
  /*margin: 30px auto;*/
 +
  padding-top: 30px;
 +
  padding-bottom: 30px;
 +
  background: #ffffff;
 +
}
 +
 
 +
.team-header h3 {
 +
  margin: 20px auto 20px auto;
 +
  text-align: center !important;
 +
  font-weight: 100;
 +
  font-size: 6vw;
 +
}
 +
 
 +
.team-header p {
 +
  margin-top: 10px;
 +
  margin-bottom: 30px;
 +
  text-align: center !important;
 +
  color: #adbabb;
 +
}
 +
 
 +
#team-secondary {
 +
  font-size: 28px !important;
 +
}
 +
 
 +
#myTab {
 +
  margin-bottom: 30px;
 +
}
 +
 
 +
#team .team-figure {
 +
  cursor: pointer;
 +
  margin: 0;
 +
  padding: 0 !important;
 +
  z-index: 90 !important;
 +
}
 +
 
 +
.team-figure .pic {
 +
  background-size: cover;
 +
  min-height: 438px;
 +
  transition: all 1.5s;
 +
 
 +
  -webkit-animation-fill-mode: both;
 +
  -moz-animation-fill-mode: both;
 +
  -ms-animation-fill-mode: both;
 +
  -o-animation-fill-mode: both;
 +
  animation-fill-mode: both;
 +
  -webkit-animation-duration: 0s;
 +
  -moz-animation-duration: 0s;
 +
  -ms-animation-duration: 0s;
 +
  -o-animation-duration: 0s;
 +
  animation-duration: 0s;
 +
  -webkit-animation-duration: 0.7s;
 +
  -moz-animation-duration: 0.7s;
 +
  -ms-animation-duration: 0.7s;
 +
  -o-animation-duration: 0.7s;
 +
  animation-duration: 0.7s;
 +
  display: block;
 +
  /*margin:5px 0 7px 5px;*/
 +
  /*padding:3px;*/
 +
}
 +
 
 +
.team-intro {
 +
  min-height: 438px;
 +
}
 +
 
 +
.self-introduction {
 +
  margin-top: 15px;
 +
  margin-bottom: 30px;
 +
}
 +
 
 +
.right {
 +
  padding-right: 30px;
 +
  text-align: left !important;
 +
}
 +
 
 +
.right > p {
 +
  text-align: left !important;
 +
 
 +
}
 +
 
 +
.left {
 +
  padding-left: 30px;
 +
  text-align: right !important;
 +
}
 +
 
 +
.left > p {
 +
  text-align: right !important;
 +
}
 +
 
 +
.self-introduction h3 {
 +
  margin: 10px auto;
 +
  font-weight: 100;
 +
  font-size: 32px;
 +
}
 +
 
 +
.self-introduction h3 > p {
 +
  font-size: 26px;
 +
}
 +
 
 +
.self-introduction p {
 +
  margin: 10px auto;
 +
  color: #adbabb;
 +
  font-size: 16px !important;
 +
}
 +
 
 +
@keyframes swing {
 +
  20% {
 +
    transform: rotate(15deg);
 +
  }
 +
  40% {
 +
    transform: rotate(-10deg);
 +
  }
 +
  60% {
 +
    transform: rotate(5deg);
 +
  }
 +
  80% {
 +
    transform: rotate(-5deg);
 +
  }
 +
  100% {
 +
    transform: rotate(0deg);
 +
  }
 +
}
 +
 
 +
.team-figure .pic:hover,
 +
.team-figure:hover > .pic {
 +
  -webkit-transform-origin: top center;
 +
  -moz-transform-origin: top center;
 +
  -o-transform-origin: top center;
 +
  transform-origin: top center;
 +
  -webkit-animation-name: swing;
 +
  -moz-animation-name: swing;
 +
  -o-animation-name: swing;
 +
  animation-name: swing;
 +
}
 +
 
 +
/**
 +
--  6.0 Achievements-page
 +
*/
 +
 
 +
.panel-info {
 +
  border-radius: 0;
 +
  border-color: #dedede;
 +
}
 +
 
 +
.panel-info .panel-heading {
 +
  border-color: #dedede;
 +
  background-color: #dedede;
 +
  border-radius: 0;
 +
}
 +
 
 +
.panel-info.bronze {
 +
  border-color: #DA8D41;
 +
}
 +
 
 +
.panel-info.bronze > .panel-heading {
 +
  background-color: #DA8D41;
 +
  border-color: #DA8D41;
 +
}
 +
 
 +
.panel-info.sliver {
 +
  border-color: #dedede;
 +
}
 +
 
 +
.panel-info.sliver > .panel-heading {
 +
  background-color: #dedede;
 +
  border-color: #dedede;
 +
}
 +
 
 +
.panel-info.gold {
 +
  border-color: #ffdb76;
 +
}
 +
 
 +
.panel-info.gold > .panel-heading {
 +
  background-color: #ffdb76;
 +
  border-color: #ffdb76;
 +
}
 +
 
 +
span.medal {
 +
  font-weight: 700;
 +
  color: #ffffff;
 +
  font-size: 1.5em;
 +
}
 +
 
 +
/**
 +
--  7.0 attributions
 +
*/
 +
 
 +
.panel-group .panel {
 +
  border-radius: 0;
 +
  margin: 0 0 16px 0;
 +
  line-height: 24px;
 +
}
 +
 
 +
.panel-info.attributions {
 +
  border-color: #f0d5ae;
 +
}
 +
 
 +
.panel-info.attributions > .panel-heading {
 +
  background-color: #f0d5ae;
 +
  border-color: #f0d5ae;
 +
}
 +
 
 +
/**
 +
--  8.0 practice
 +
*/
 +
div#practice {
 +
  background-size: 100%;
 +
  background-repeat: no-repeat;
 +
  width: 100%;
 +
  height: 100vh;
 +
  background-image: url(https://static.igem.org/mediawiki/2016/3/39/T--BNU-China--sky.jpg);
 +
}
 +
 
 +
#practice img {
 +
  height: 62%;
 +
  width: 100%;
 +
}
 +
 
 +
#practice-heading {
 +
  padding-bottom: 50vh;
 +
}
 +
 
 +
div.practice-link-left {
 +
  position: absolute;
 +
  font-size: 2vw;
 +
  left: 26%;
 +
  top: 60%;
 +
}
 +
 
 +
div.practice-link-right {
 +
  position: absolute;
 +
  font-size: 2vw;
 +
  left: 51%;
 +
  top: 60%;
 +
}
 +
 
 +
div.practice-link-left > a,
 +
div.practice-link-right > a {
 +
  text-decoration: none;
 +
  color: white;
 +
}
 +
 
 +
#practice div.practice-main {
 +
  display: inline-block;
 +
  position: relative;
 +
}
 +
 
 +
.wrapper img {
 +
  width: 100%;
 +
}
 +
 
 +
/**
 +
--  9.0 footer
 +
*/
 +
 
 +
#footer,
 +
#footer a {
 +
  color: #999;
 +
  text-decoration: none;
 +
}
 +
 
 +
#footer {
 +
  clear: both;
 +
  text-align: right;
 +
}
 +
 
 +
#footer-div {
 +
  padding: 20px 15px;
 +
  border-top: 1px solid #ccc;
 +
  width: 80%;
 +
  margin: 0 auto;
 +
  clear: both;
 +
}
 +
 
 +
#footer-div:before,
 +
#footer-div:after {
 +
  display: table;
 +
  content: "";
 +
}
 +
 
 +
#footer-ul,
 +
#footer li {
 +
  display: inline;
 +
}
 +
 
 +
#footer li {
 +
  list-style: none;
 +
}
 +
 
 +
#footer-div span {
 +
  float: left;
 +
}
 +
 
 +
#footer-div li + li::before {
 +
  color: rgb(187, 187, 187);
 +
  padding: 0 3px;
 +
}

Revision as of 19:36, 18 October 2016

/**---------------------------------------------- 

>>> Table of Contents:
------------------------------------------------
0.0 global
1.0 main-container
2.0 page-heading
3.0 navigation
4.0 page-story
5.0 team-page
6.0 achievements-page
7.0 attributions
8.0 practices
9.0 footer
------------------------------------------------
  • /

/** -- 0.0 global

  • /

.header-color { 

 background: #ffffff;
 color: #646464;

}

/** -- 1.0 main-container

  • /

.main-container { 

 top: 0;
 left: 0;
 right: 0;
 margin: 0;
 padding: 0;
 background-color: white;
 overflow: auto;
 position: absolute;

}

/** -- 2.0 page-heading

  • /

.page-heading { 

 width: 100%;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size: 100%;
 text-align: center !important;
 text-transform: uppercase;
 height: 100vh;

}

.page-heading h3 { 

 margin-top: 62px;
 color: #ffffff;
 font-size: 10vw;
 font-weight: bolder;
 font-family: "Avenir", sans-serif;
 margin: 0;
 padding-top: 35vh;
 padding-bottom: 30vh;
 text-shadow: 0 1px 6px rgba(120, 120, 120, .75);

}

@media screen and (min-width: 992px) { 

 .page-heading h3 {
   padding-top: 20%;
 }

}

@media screen and (min-width: 768px) and (max-width: 992px) { 

 .page-heading h3 {
   padding-top: 40%;
 }

}

@media screen and (max-width: 768px) { 

 .page-heading h3 {
   padding-top: 30%;
 }

}

/** -- 3.0 navigation

  • /

@font-face { 

 font-family: 'Myriad Set Pro';
 src: url('https://static.igem.org/mediawiki/2016/e/ed/T--BNU-China--MyriadSetPro.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;

}

@media screen and (min-width: 1024px) { 

 .nav-container, .nav-adjust {
   background: #333;
   /*background: black;*/
   position: relative;
   border: 0;
   padding-left: 50px;
   padding-right: 50px;
   padding-bottom: 0;
   transition: all 0.3s ease-in-out;
   height: 44px;
 }

}

@media screen and (max-width: 1023px) { 

 .nav-container, .nav-adjust {
   background: linear-gradient(to bottom, black, #3b3b3b);
   /*background: black;*/
   opacity: 0.9;
   border: 0;
   transition: all 0.3s ease-in-out;
   /*height: 64px;*/
 }

}

  1. taxolightlogo {
 height: 50px;
 width: 50px;
 float: left;
 /*margin-left: 10px;*/

}

  1. navbar-brand {
 padding-top: 17px;
 /*opacity: 0.8;*/
 color: white;
 font-weight: 400;
 position: absolute;
 font-family: 'Myriad Set Pro', serif;

}

  1. navbar-toggle {
 margin: 15px;

}

/*.nav-adjust .scrolled-down {*/ /*background: black;*/ /*border: 0;*/ /*opacity: 0.9;*/ /*transition: all 0.3s ease-in-out;*/ /*}*/

/*.nav-adjust .scrolled-top {*/ /*background: black;*/ /*border: 0;*/ /*opacity: 0.8;*/ /*transition: all 0.3s ease-in-out;*/ /*}*/

  1. bs-example-navbar-collapse-1 {
 /*margin: 7px 0;*/

}

.nav-adjust > .nav-container div > ul > li > a, .navbar-brand a, .navbar-inverse .navbar-nav > li > a:focus { 

 font-size: 16px;
 font-weight: 400;
 color: #fff;
 /*opacity: 0.9;*/
 opacity: 1;
 /*transition: all 0.2s ease-in-out;*/
 transition: opacity 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
 font-family: 'Myriad Set Pro', serif;

}

@media screen and (min-width: 1024px) { 

 .nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 .navbar-inverse .navbar-nav > li > a:focus {
   margin: auto 0 auto 15px;
   padding-top: 17px;
 }

}

@media screen and (max-width: 1023px) { 

 .nav-adjust > .nav-container div > ul > li > a, .navbar-brand a,
 .navbar-inverse .navbar-nav > li > a:focus {
   margin: auto 0 auto -20px;
   /*background: red;*/
 }

}

.nav-adjust > .nav-container div > ul > li.focus > a { 

 color: white;
 opacity: 1;
 /*transition: all 0.5s ease-in-out;*/
 font-weight: 400;

}

/*.nav-adjust .scrolled-down div > ul > li.focus > a {*/ /*color: white;*/ /*font-weight: 300;*/ /*opacity: 1;*/ /*transition: all 0.2s ease-in-out;*/ /*}*/

li.dropdown.open ul { 

 background: rgba(0, 0, 0, 0.85);
 color: white;
 transition: all 0.2s ease-in-out;
 /*height: 30px;*/

}

li.dropdown.open ul li a { 

 color: #b0b0b0;
 transition: all 0.2s ease-in-out;
 font-weight: 300;
 height: 30px;
 font-family: 'Myriad Set Pro', serif;

}

li.dropdown.open ul:hover { 

 background: #151515;
 transition: all 0.2s ease-in-out;

}

li.dropdown.open ul:hover li a { 

 filter: blur(1px);
 transition: all 0.5s ease-in-out;
 font-weight: 300;

}

li.dropdown.open ul:hover li a { 

 filter: blur(1px);
 transition: all 0.5s ease-in-out;
 font-weight: 300;

}

li.dropdown.open ul li a:hover { 

 background: black;
 color: #e9e9e9;
 text-shadow: none;
 filter: none;
 transition: all 0.2s ease-in-out;
 height: 40px;

}

/** -- 4.0 page-story

  • /
  1. named-anchor {
 padding-top: 100px;

}

  1. named-anchor {
 color: inherit;
 text-decoration: none;

}

.page-story { 

 padding-bottom: 30px;

}

.page-story > article { 

 background-color: white;
 /*box-shadow: 0 4px 6px rgba(75, 75, 75, 0.5);*/
 padding: 32px 0;

}

article { 

 margin: 40px;

}

@media screen and (min-width: 768px) and (max-width: 992px) { 

 .page-story > article {
   padding: 32px 64px;
 }

 .container-fluid {
   margin-bottom: -620px;
 }

}

@media screen and (max-width: 768px) and (min-width: 641px) { 

 .page-story > article {
   padding: 16px 10px;
 }

 .container-fluid {
   margin-bottom: -430px;
 }

}

@media screen and (max-width: 640px) { 

 .page-story > article {
   padding: 16px 5px;
   margin: -15px;
 }

 .container-fluid {
   margin-bottom: -300px;
 }

}

article > header.page-header { 

 text-align: center !important;
 border: none;

}

.page-header { 

 margin: 40px 0;

}

article[id="achievement"] a { 

 color: #278A75;

}

article[id="achievement"] h2, article[id="achievement"] h3, article[id="achievement"] h4, article[id="achievement"] h5 { 

 color: #D3853D

}

article[id="project"] a, article[id="project"] h2, article[id="project"] h3, article[id="project"] h4, article[id="project"] h5 { 

 color: #8c7e01;

}

article[id='modeling'] a, article[id='modeling'] h2, article[id='modeling'] h3, article[id='modeling'] h4, article[id='modeling'] h5 { 

 color: #278f45;

}

article[id='practices'] a, article[id='practices'] h2, article[id='practices'] h3, article[id='practices'] h4, article[id='practices'] h5 { 

 color: #308276;

}

article[id='safety'] a, article[id='safety'] h2, article[id='safety'] h3, article[id='safety'] h4, article[id='safety'] h5 { 

 color: #308276;

}

article[id="modeling"] a, article[id="modeling"] h2, article[id="modeling"] h3, article[id="modeling"] h4, article[id="modeling"] h5 { 

 color: #278f45;

}

article h2, article h3, article h4, article h5 { 

 font-weight: 500;

}

article > header.page-header h1 { 

 font-weight: bolder;
 font-size: 6vw;
 text-transform: uppercase;

}

  1. secondary-page-header {
 display: block;
 margin: 12px 0;
 font-size: 24px;
 color: #777777;

}

article a { 

 text-decoration: none;

}

article a:visited:hover { 

 color: #D3853D;

}

article a:visited { 

 color: #278A75;

}

article a:hover { 

 color: #D3853D;
 text-decoration: none;

}

article h2 { 

 font-size: 40px;
 margin-bottom: 2px !important;
 /* border-bottom: 1px solid #eee;*/

}

article h3 { 

 font-size: 24px;

}

article p, article blockquote { 

 font-size: 16px;
 line-height: 22px;
 margin-bottom: 16px;
 font-weight: 500;

}

article ol { 

 font-weight: normal;
 margin: 0 0 16px 1.5em;
 list-style: decimal outside;

}

article ol li { 

 font-weight: normal;

}

figcaption { 

 font-size: 18px;

}

article figure { 

 padding: 16px 0;

}

article figure { 

 max-width: 100%;;

}

article figure figcaption { 

 text-align: center;
 color: #278A75;
 padding: 8px;

}

article video { 

 max-width: 100% !important;
 height: auto !important;
 background-color: #000;
 background-size: 100% 100%;
 display: block;
 margin: 25px auto;

}

.reference { 

 padding: 12px 0 0 0;
 border-top: 1px solid #eee;

}

div.reference:before { 

 color: #278A75;
 font-size: 18px;
 content: "Reference:";
 line-height: 16px;

}

  1. globalWrapper .reference > ol, .reference > ol {
 margin: 0;
 padding: 0;
 list-style-type: none;
 counter-reset: counter;

}

div.reference > ol li { 

 font-style: 12px;
 line-height: 16px;
 color: rgb(102, 102, 102);
 margin: 6px 0;

}

div.reference > ol li:before { 

 content: '[' counter(counter) ']';
 counter-increment: counter;
 display: inline-block;
 margin-right: 4px;

}

/** -- 5.0 team-page

  • /

.self-introduction .info-sec { 

 font-size: 22px !important;

}

  1. team {
 /*margin: 30px auto;*/
 padding-top: 30px;
 padding-bottom: 30px;
 background: #ffffff;

}

.team-header h3 { 

 margin: 20px auto 20px auto;
 text-align: center !important;
 font-weight: 100;
 font-size: 6vw;

}

.team-header p { 

 margin-top: 10px;
 margin-bottom: 30px;
 text-align: center !important;
 color: #adbabb;

}

  1. team-secondary {
 font-size: 28px !important;

}

  1. myTab {
 margin-bottom: 30px;

}

  1. team .team-figure {
 cursor: pointer;
 margin: 0;
 padding: 0 !important;
 z-index: 90 !important;

}

.team-figure .pic { 

 background-size: cover;
 min-height: 438px;
 transition: all 1.5s;

 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -ms-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
 -webkit-animation-duration: 0s;
 -moz-animation-duration: 0s;
 -ms-animation-duration: 0s;
 -o-animation-duration: 0s;
 animation-duration: 0s;
 -webkit-animation-duration: 0.7s;
 -moz-animation-duration: 0.7s;
 -ms-animation-duration: 0.7s;
 -o-animation-duration: 0.7s;
 animation-duration: 0.7s;
 display: block;
 /*margin:5px 0 7px 5px;*/
 /*padding:3px;*/

}

.team-intro { 

 min-height: 438px;

}

.self-introduction { 

 margin-top: 15px;
 margin-bottom: 30px;

}

.right { 

 padding-right: 30px;
 text-align: left !important;

}

.right > p { 

 text-align: left !important;

}

.left { 

 padding-left: 30px;
 text-align: right !important;

}

.left > p { 

 text-align: right !important;

}

.self-introduction h3 { 

 margin: 10px auto;
 font-weight: 100;
 font-size: 32px;

}

.self-introduction h3 > p { 

 font-size: 26px;

}

.self-introduction p { 

 margin: 10px auto;
 color: #adbabb;
 font-size: 16px !important;

}

@keyframes swing { 

 20% {
   transform: rotate(15deg);
 }
 40% {
   transform: rotate(-10deg);
 }
 60% {
   transform: rotate(5deg);
 }
 80% {
   transform: rotate(-5deg);
 }
 100% {
   transform: rotate(0deg);
 }

}

.team-figure .pic:hover, .team-figure:hover > .pic { 

 -webkit-transform-origin: top center;
 -moz-transform-origin: top center;
 -o-transform-origin: top center;
 transform-origin: top center;
 -webkit-animation-name: swing;
 -moz-animation-name: swing;
 -o-animation-name: swing;
 animation-name: swing;

}

/** -- 6.0 Achievements-page

  • /

.panel-info { 

 border-radius: 0;
 border-color: #dedede;

}

.panel-info .panel-heading { 

 border-color: #dedede;
 background-color: #dedede;
 border-radius: 0;

}

.panel-info.bronze { 

 border-color: #DA8D41;

}

.panel-info.bronze > .panel-heading { 

 background-color: #DA8D41;
 border-color: #DA8D41;

}

.panel-info.sliver { 

 border-color: #dedede;

}

.panel-info.sliver > .panel-heading { 

 background-color: #dedede;
 border-color: #dedede;

}

.panel-info.gold { 

 border-color: #ffdb76;

}

.panel-info.gold > .panel-heading { 

 background-color: #ffdb76;
 border-color: #ffdb76;

}

span.medal { 

 font-weight: 700;
 color: #ffffff;
 font-size: 1.5em;

}

/** -- 7.0 attributions

  • /

.panel-group .panel { 

 border-radius: 0;
 margin: 0 0 16px 0;
 line-height: 24px;

}

.panel-info.attributions { 

 border-color: #f0d5ae;

}

.panel-info.attributions > .panel-heading { 

 background-color: #f0d5ae;
 border-color: #f0d5ae;

}

/** -- 8.0 practice

  • /

div#practice { 

 background-size: 100%;
 background-repeat: no-repeat;
 width: 100%;
 height: 100vh;
 background-image: url(T--BNU-China--sky.jpg);

}

  1. practice img {
 height: 62%;
 width: 100%;

}

  1. practice-heading {
 padding-bottom: 50vh;

}

div.practice-link-left { 

 position: absolute;
 font-size: 2vw;
 left: 26%;
 top: 60%;

}

div.practice-link-right { 

 position: absolute;
 font-size: 2vw;
 left: 51%;
 top: 60%;

}

div.practice-link-left > a, div.practice-link-right > a { 

 text-decoration: none;
 color: white;

}

  1. practice div.practice-main {
 display: inline-block;
 position: relative;

}

.wrapper img { 

 width: 100%;

}

/** -- 9.0 footer

  • /
  1. footer,
  2. footer a {
 color: #999;
 text-decoration: none;

}

  1. footer {
 clear: both;
 text-align: right;

}

  1. footer-div {
 padding: 20px 15px;
 border-top: 1px solid #ccc;
 width: 80%;
 margin: 0 auto;
 clear: both;

}

  1. footer-div:before,
  2. footer-div:after {
 display: table;
 content: "";

}

  1. footer-ul,
  2. footer li {
 display: inline;

}

  1. footer li {
 list-style: none;

}

  1. footer-div span {
 float: left;

}

  1. footer-div li + li::before {
 color: rgb(187, 187, 187);
 padding: 0 3px;

}