Difference between revisions of "Team:Oxford/Assets/stylesheet.css"

Line 1: Line 1:
−
{{:Team:Oxford/Templates/Nav}}
+
#contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
 +
    display:none;
 +
}
 +
#top-section {
 +
    border: none;
 +
    height: 0px;
 +
}
  
−
<html>
+
#content {
−
<head>
+
     width:100%;
−
</head>
+
}
−
<body>
+
−
     <div class="container-fluid page-heading">
+
−
        <div class="bg"  style="background-image: url(https://static.igem.org/mediawiki/2015/8/88/Ox_Testall.jpg)"></div>
+
−
        <h3>Design</h3>
+
−
    </div>
+
−
    <div class="container-fluid">
+
−
        <div class="row">
+
−
            <div class="col-md-9">
+
−
                <div class="slim">
+
−
                    <div class="section" id="introduction">
+
−
                        <h2>Introduction</h2>
+
−
                        <p>
+
−
                            Following on from all of the safety research we conducted we put that knowledge into designing a catheter in order to get our proteins  (DNase and DispB) into the urinary track where we want them.
+
−
                        </p>
+
−
                        <p>
+
−
                            Designing a novel method of getting our bacteria into the urinary tract was a big consideration during the beginning stages of our project. The approach of delivering our bacteria directly through the catheter into the bladder would probably be the most effective. However we found that the biofilm also forms on the outside of the catheter so in our design we attempted to tackle the biofilm from outside and in.
+
−
                        </p>
+
−
                        <p>
+
−
                            While our bacteria could potentially be used to a large range of different pipes to tackle a growing world problem with biofilms we decide to focus on a medical application for them. We focused on the problem of urinary tract infections as a member of our team, George Driscoll, had seen first hand the extreme impact it can have on people’s, especially women’s lives.
+
−
                        </p>
+
  
−
                        <p>
+
body {
−
                            Our catheter would have a three-pronged attack on the biofilm. First the biofilm forming in the lining of the bladder, then the biofilm beginning to form on the outside of the catheter itself, and finally attacking the biofilm trying to form on the inside walls of the catheter.
+
    position: relative;
−
                        </p>
+
}
−
                        <p>
+
−
                            Our initial research into the current designs of catheter began online, where we started to get a better understanding of the size that we were working with. We looked into the problems with insertion, removal and general life with having a catheter in place. Through out the design process we attempted to keep these constantly in our mind in order to create something that would not only help with infection but was practical for the patient, doctor and manufacturer.
+
−
                        </p>
+
−
                        <p>
+
−
                            To get some more first hand experience of how small a catheter is we purchased a catheter. This made us realise how small our containment method would have to be. As UTIs mainly affect women we decided to buy a 14F female Foley catheter. This gave us a much better idea of the size we were working with i.e. very small. Knowing this leads us to adjust the chemical that we were hoping to use to make the beads that will contain our bacteria.
+
−
                        </p>
+
−
                        <p>
+
−
                            The idea of having a containment method as part of our project was first realised during the safety research as it would be dangerous to allow free bacteria into the human body. This could lead to possible fatal consequence as the bacteria could mutate and you don’t know what will happen in several generations.
+
−
                        </p>
+
−
                        <p>
+
−
                            However to reduce the risk of infect we would not be able to access the beads for the duration on the catheter being in place, as this could allow for foreign bacteria to get into the urinary tract and cause greater infection. Therefore any nutrients that the bacteria would need have to be present in the beads, or be available from the urine running through the catheter.
+
−
                        </p>
+
−
                        <p>
+
−
                            The bacteria would have to be able to survive for 3 months so in an ideal world we would have been able to test the bacteria in the beads, for 3 months, however the time scale of the project did not allow us to do that as the concept of the beds was not realised until the later stages of the project. We would have also liked to tested whether or not the bead would remain in tack out of the CaCl2 for 3 months, and potential storage methods for the beads. Freezing the beads was however tested and found to be unsuccessful.
+
−
                        </p>
+
−
                        <p>
+
−
                            The gel must not be toxic to humans that we would have to make sure of, relates to the safety of the catheter. If we use a silicone polymer either as a sheet or in fibres then many medical devices are made from silicone due to its inert characteristics and the fact that it doesn’t cause any unwanted side effects. Therefore this fits in with the safety side of the project. Catheters themselves are made from silicon so it shows that they are safe to put into the body.
+
−
                        </p>
+
−
                    </div>
+
−
                    <div class="section" id="beads">
+
−
                        <h2>Beads containing Bacteria</h2>
+
−
                        <div id="beads-intro">
+
−
                            <h3>Introduction</h3>
+
−
                            <p>
+
−
                                In order to stop the biofilm forming on the inside of the catheter it will contain beads that have our bacteria encapsulated inside of them however the protein is still able to diffuse out. This is needed as a way to contain the bacteria so they won’t be free in the urinary tract and therefore cause potential health problems for the patient.
+
−
                            </p>
+
−
                            <p>
+
−
                                These beads could also be contained outside the body inside a bag of sterile water; this bag would then be plugged into a 3-way Foley catheter. This solution would then be washed through the catheter and into the bladder, therefore tackling any infection that may be present in the lining of the bladder.
+
−
                            </p>
+
−
                            <div class="image image-right">
+
−
                                <img src="https://static.igem.org/mediawiki/2015/6/66/Ox_Beads_design.JPG" />
+
−
                                <p>First attempt at making the beads using Sodium Algniate</p>
+
−
                            </div>
+
−
                            <p>
+
−
                                To see our process of designing and making the beads, look <a href="#">here.</a>
+
−
                            </p>
+
−
                            <p>
+
−
                                One problem with using an alginate to encapsulate the bacteria is that they are only structurally sound over a short period of time and break down over longer periods. This poses a problem, as the beads could therefore not be used to treat urinary tract infections were the catheter is to remain in place for up to 3 months.
+
−
                            </p>
+
−
                        </div>
+
−
                        <div id="beads-proof">
+
−
                            <h3>Proof of Principle</h3>
+
−
                            <p>
+
−
                                Our first aim was to be able to make beads that would be small enough to fit inside of a catheter.
+
−
                            </p>
+
−
                            <p>
+
−
                                To do this we got several catheters from the local hospital and cut one open.
+
−
                            </p>
+
−
                            <p>
+
−
                                We then wanted to show that we could get the bacteria inside of the beads. To do this we created beads that contained fluorescent bacteria. The bacteria we used were from the interlab study, 20K MG, 20K deltaF, 20K DH5 and as a negative control we used MG(-).
+
−
                            </p>
+
−
                            <p>
+
−
                                Sets of the beads were made up for 3 days and the fluorescence was measured using the GFP protocol on the Flurostar machine.
+
−
                            </p>
+
−
                            <p>
+
−
                                From the data it can be shown that the wells that contain a beads made with fluorescent bacteria encapsulated have a much higher fluorescence than the beads made without any bacteria and the beads made with the negative control bacteria. Therefore we can conclude that the bacteria are encapsulated inside of the beads.
+
−
                            </p>
+
−
                        </div>
+
−
                    </div>
+
−
                    <div class="section" id="semi">
+
−
                        <h2>Semi-Permeable Membrane</h2>
+
−
                        <p>
+
−
                            A selectively permeable would be used inside the catheter to contain the beads in a compartment. This membrane would supply a second physical defence against the bacteria getting into the urinary tract as well as a method for containing the beads. The membrane would be similar to the membrane used in a dialysis machine, therefore the urine and protein could diffuse through it but the bacteria would remain contained. Our largest protein is roughly 40 kDa so therefore the membrane that we use would have to have pores with a large enough diameter to allow it through. Membranes for dialysis tubing is made of several different materials, for example, polysulfone, polyethersulfone (PES), etched polycarbonate, or collagen. The pores would also have to be large enough to allow through all the components on the urine otherwise you would get a build up in the catheter and therefore could cause potential problems.
+
−
                        </p>
+
−
                        <p>
+
−
                            For our catheter a polysulfone would be best for our membrane as it is most commonly used in the medical profession and in dialysis machines. You can therefore control the size of the pores in the synthesis and so be able to form the pores size that was required.
+
−
                        </p>
+
−
                    </div>
+
−
                    <div class="section" id="coating">
+
−
                        <h2>Coating</h2>
+
−
                        <p>
+
−
                            To stop the biofilm forming on the outside of the catheter the idea would to immobilize it into a gel that would be attached to the outer surface of the catheter. One idea would be to form the gel into fibres and therefore could then be wrapped around the outside of the catheter that would adhere with some kind of medical grade adhesive. These fibres would therefore have a large surface area to volume ratio ensuring that there was greater diffusion of the DNase and DispB out of the gel therefore tackling the infection as quickly as possible.
+
−
                        </p>
+
−
                        <p>
+
−
                            This idea has been used in previous catheters that are currently on the market. These coatings have, and do, contain silver nanoparticles, antibiotics etc etc
+
−
                        </p>
+
−
                        <p>
+
−
                            Idea would be to encase our bacteria in a thin sol-gel film, which would keep it contained on the catheter but be able to maintain its activity from inside the gel. The properties of the gel could be selected so that it would be hydrophilic, this would aid in the insertion of the catheter and comfort for the patient when the catheter was in place. This would contain the bacteria but it would still be able to produce the protein and it would still be able to diffuse out. This is where our kill switch design would be particularly useful as if the bacteria were to escape the matrix then the kill switch would be able to cause the bacteria to die. In the time that we have in order to complete our project, synthesising these isn’t something we could attempt however there are papers that have shown it to work.
+
−
                        </p>
+
−
                        <p>
+
−
                            Coatings seem to be hydrophilic polymers, e.g. hydrogels. This is because when the coating comes in contact with water the gel swells slightly and the surface becomes smooth and slipper therefore easing insertion.
+
−
                        </p>
+
−
                        <p>
+
−
                            Another potential for a coating would be to make the fibres out of the Sodium Alginate. This would need testing.
+
  
−
                        </p>
+
.row {
−
                    </div>
+
    background-color: #fff;
−
                    <div class="section" id="man">
+
}
−
                        <h2>Manufacturing</h2>
+
.navbar  {
−
                        <p>
+
    margin-top: 16px;
−
                            Currently catheters are very cheap to produce, find out how much, therefore as part of our project we decided to look into how we could introduce the beads into the pipe during the manufacturing process. We spoken to a mechanical engineer, Steven Dinsdale, and he help us with a design for a machine that could do this. The machine would use the technique of extrusion to make the tube and then a second cooled inflow tube would introduce the beads. This would hopefully keep the bacteria cool enough so they are not killed yet the polymer would be hot enough to melt and then form the tube.
+
    position: fixed;
−
                        </p>
+
    font-size: 13px;
−
                        <div class="image image-full">
+
    background-color: #fff;
−
                            <img src="https://static.igem.org/mediawiki/2015/b/b5/Ox_Steve.PNG" />
+
    margin-bottom: 0;
−
                            <p>Manufacturing idea from mechanical engineer Steven Dinsdale</p>
+
}
−
                        </div>
+
−
                        <p>
+
−
                            Potential problems:
+
−
                        </p>
+
−
                        <ul>
+
−
                            <li>If this design were used for catheter production the bacteria would potentially not survive the sterilisation process at the end of the manufacturing.</li>
+
−
                            <li>Steps further down in the manufacturing process could harm out bacteria.</li>
+
−
                            <li>The bacteria may not survive in storage due to the length of time stored, temperature, etc</li>
+
−
                        </ul>
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
            <div class="col-md-3 contents-sidebar">
+
−
                <ul id="sidebar" class="nav nav-stacked" data-spy="affix">
+
−
                    <li><a href="#introduction">Introduction</a></li>
+
−
                    <li>
+
−
                        <a href="#beads">Beads</a>
+
−
                        <ul class="nav nav-stacked">
+
−
                            <li><a href="#beads-intro">Introduction</a></li>
+
−
                            <li><a href="#beads-proof">Proof of Principle</a></li>
+
−
                        </ul>
+
−
                    </li>
+
−
                    <li><a href="#semi">Semi-Permeable Membrane</a></li>
+
−
                    <li><a href="#coating">Coating</a></li>
+
−
                    <li><a href="#man">Manufacturing</a></li>
+
−
                </ul>
+
−
            </div>
+
−
        </div>
+
−
    </div>
+
−
</body>
+
−
</html>
+
  
−
{{:Team:Oxford/Templates/Foot}}
+
.navbar-right li {
 +
    font-family: "Avenir",sans-serif;
 +
    color: #2b00f7;
 +
}
 +
 
 +
.navbar-nav > li > a {
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
}
 +
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover {
 +
    background-color: #fff;
 +
    color:#2b00f7;
 +
}
 +
 
 +
.navbar-default .navbar-nav > .active {
 +
    background-color: #fff;
 +
 
 +
}
 +
 
 +
.navbar-default .navbar-brand {
 +
    font-weight: bold;
 +
    color: #2b00f7;
 +
    /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;*/
 +
}
 +
 
 +
.navbar-default .navbar-brand:hover {
 +
    font-weight: bold;
 +
    color: #fa1e64;
 +
    /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;*/
 +
}
 +
 
 +
#main-container {
 +
    top:0;
 +
    left:0;
 +
    right:0;
 +
    margin:51.3px 0 0 0;
 +
    padding:0;
 +
    background-color:#fff;
 +
    overflow:auto;
 +
    position:absolute;
 +
}
 +
 
 +
#sidebar.affix {
 +
    top: 80px;
 +
}
 +
 
 +
.contents-sidebar {
 +
    padding-left: 20px;
 +
    margin-top: 20px;
 +
    margin-bottom: 20px;
 +
    background-color: white;
 +
}
 +
 
 +
.contents-sidebar .nav>li>a {
 +
    color: #999;
 +
    padding: 4px 20px;
 +
    font-size: 13px;
 +
    font-weight: 400;
 +
    line-height: 1.4em;
 +
    margin-bottom: 10px;
 +
}
 +
 
 +
.contents-sidebar .nav .nav>li>a {
 +
    padding-top: 1px;
 +
    padding-bottom: 1px;
 +
    padding-left: 20px;
 +
    font-size: 12px;
 +
}
 +
 
 +
.contents-sidebar .nav .nav .nav>li>a {
 +
    padding-top: 1px;
 +
    padding-bottom: 1px;
 +
    padding-left: 20px;
 +
    font-size: 11px;
 +
}
 +
 
 +
.contents-sidebar .nav>.active>a {
 +
    color: #2b00f7;
 +
}
 +
 
 +
.contents-sidebar .nav>li>a {
 +
    border-left: 2px solid transparent;
 +
}
 +
.contents-sidebar .nav>.active>a,
 +
.contents-sidebar .nav>li>a:hover,
 +
.contents-sidebar .nav>li>a:focus {
 +
    color: #2b00f7;
 +
    text-decoration: none;
 +
    background-color: transparent;
 +
    border-left: 2px solid #2b00f7;
 +
    font-weight: 700;
 +
}
 +
 
 +
.contents-sidebar .nav .nav>.active>a,
 +
.contents-sidebar .nav .nav>li>a:hover,
 +
.contents-sidebar .nav .nav>li>a:focus {
 +
    font-weight: 500;
 +
}
 +
 
 +
.contents-sidebar .nav ul.nav {
 +
    display: none;
 +
}
 +
 
 +
.contents-sidebar .nav>.active>ul.nav {
 +
    display: block;
 +
}
 +
 
 +
 
 +
#sidebar {
 +
    background-color: white;
 +
}
 +
 
 +
#title {
 +
    width: 100%;
 +
    background-image: url(https://static.igem.org/mediawiki/2015/f/fd/Ox_Biochem_Dept.jpg);
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
    background-size: cover;
 +
    border-radius: 0;
 +
    margin-top: -10px;
 +
}
 +
 
 +
#title div {
 +
    width: 100%;
 +
}
 +
 
 +
#solution {
 +
    padding-top: 4em;
 +
    padding-bottom: 4em;
 +
}
 +
 
 +
#solution-byline {
 +
    margin: auto;
 +
}
 +
 
 +
#solution-byline h3 {
 +
    vertical-align: bottom;
 +
}
 +
 
 +
#title img {
 +
    width:80%;
 +
    display: block;
 +
    margin: auto auto;
 +
    max-width: 800px;
 +
}
 +
 
 +
#title p {
 +
    margin: 0;
 +
}
 +
 
 +
#logo img {
 +
    margin:auto;
 +
    width: 6em;
 +
}
 +
 
 +
#title h3 {
 +
    color: #fff;
 +
    text-align: center;
 +
    font-family: "Avenir", sans-serif;
 +
    font-weight: lighter;
 +
    font-size: 1em;
 +
    margin-bottom: 1em;
 +
    margin-right: auto;
 +
    margin-left: auto;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
#title a {
 +
    color: #fff;
 +
    padding: 0.2em;
 +
    border: 3px solid white;
 +
}
 +
 
 +
#title a:hover {
 +
    background-color: white;
 +
    color: #8E54E9;
 +
    text-decoration: none;
 +
}
 +
 
 +
.page-content {
 +
    background-color: #fff;
 +
    z-index: 10;
 +
}
 +
 
 +
.quote {
 +
    font-family: "Avenir", sans-serif;
 +
    color: #2b00f7;
 +
    /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;*/
 +
    margin: 1em;
 +
}
 +
 
 +
.quote-right, .quote-left {
 +
    max-width: 350px;
 +
}
 +
 
 +
.quote p {
 +
    text-align: justify;
 +
    text-transform: uppercase;
 +
    font-size: 1em;
 +
    font-weight: lighter;
 +
    margin-bottom: 0;
 +
}
 +
 
 +
.quote h3 {
 +
    text-align: right;
 +
    font-size: 1em;
 +
    text-transform: uppercase;
 +
    color: #2b00f7;
 +
    margin-top: 5px;
 +
    padding-top: 0;
 +
}
 +
 
 +
.quote-full {
 +
    width: 100%;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    clear: both;
 +
    padding: 15px 0;
 +
    max-width: 810px;
 +
}
 +
 
 +
.quote-right {
 +
    width: 50%;
 +
    font-size: 1em;
 +
    float: right;
 +
    padding-left: 15px;
 +
    padding-right: 0;
 +
}
 +
 
 +
.quote-left {
 +
    width:50%;
 +
    font-size: 1em;
 +
    float: left;
 +
    padding-right: 15px;
 +
    padding-left: 0;
 +
}
 +
 
 +
.table>thead>tr>th {
 +
    color:  #2b00f7;
 +
}
 +
 
 +
#foot {
 +
    background-color: #6C7A89;
 +
    color: white;
 +
    font-family: "Avenir",sans-serif;
 +
    text-align: center;
 +
    padding-top: 1em;
 +
    z-index: -10;
 +
    text-transform: uppercase;
 +
    vertical-align: middle;
 +
}
 +
 
 +
h2, h1 {
 +
    font-size: 3em;
 +
    font-family: "Avenir", sans-serif;
 +
    /*text-transform: uppercase;*/
 +
    font-weight: 900;
 +
    color: #2b00f7;
 +
    /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;*/
 +
    border: none;
 +
    clear: both;
 +
    margin-bottom: 0em;
 +
}
 +
 
 +
h1 {
 +
    font-size: 2em;
 +
}
 +
 
 +
 
 +
 
 +
p {
 +
    text-align: justify;
 +
    font-family: "Avenir", sans-serif;
 +
}
 +
 
 +
 
 +
h3 {
 +
    clear: both;
 +
    font-weight: 700;
 +
    font-family: "Avenir", sans-serif;
 +
    color: #2D2D35;
 +
    font-size: 1.5em;
 +
}
 +
 
 +
h2, h3 {
 +
    padding-top: 80px;
 +
    margin-top: -50px;
 +
}
 +
 
 +
h4, h5 {
 +
    padding-top: 70px;
 +
    margin-top: -50px;
 +
    font-weight: bold;
 +
}
 +
 
 +
h5 {
 +
    font-family: "Avenir", sans-serif;
 +
    font-weight: 900;
 +
    font-size: 2em;
 +
    color: #777;
 +
}
 +
 
 +
h6 {
 +
    font-size: 1em;
 +
}
 +
 
 +
ol {
 +
    list-style-type: none;
 +
    /*padding-top: 15px;
 +
    margin-top: 30px;
 +
    margin-bottom: 30px;
 +
    border-top: 1px solid #cccccc;
 +
    border-bottom: 1px solid #cccccc;
 +
    padding-left: 15px;*/
 +
}
 +
 
 +
ol li {
 +
    counter-increment: step-counter;
 +
    /* margin-bottom: 20px; */
 +
    font-family: "Avenir", sans-serif;
 +
    text-align: left;
 +
    padding-left: 25px;
 +
    position: relative;
 +
}
 +
 
 +
ol li::before {
 +
    content: counter(step-counter) ".";
 +
    font-size: 1em;
 +
    font-family: "Avenir",sans-serif;
 +
    font-weight: lighter;
 +
    margin-right: 15px;
 +
    color: #2b00f7;
 +
    display: inline-block;
 +
    position: absolute;
 +
    left:0;
 +
}
 +
 
 +
ol li p{
 +
    overflow: hidden;
 +
}
 +
 
 +
.slim ul li {
 +
    /* margin-bottom: 20px; */
 +
    font-family: "Avenir", sans-serif;
 +
    /* vertical-align: middle; */
 +
    text-align: left;
 +
    padding-left: 25px;
 +
    position: relative;
 +
}
 +
 
 +
.slim ul li:before {
 +
    content: "•";
 +
    font-size: 1.2em;
 +
    color: #2b00f7;
 +
    margin-right: 15px;
 +
    display: block;
 +
    position: absolute;
 +
    left:0;
 +
}
 +
 
 +
 
 +
.slim ul {
 +
    list-style:none;
 +
}
 +
 
 +
.slim {
 +
    max-width: 720px;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    padding-left: 15px;
 +
    padding-right: 15px;
 +
}
 +
 
 +
.section {
 +
    clear: both;
 +
}
 +
 
 +
.section h2 {
 +
    margin-bottom: 0;
 +
}
 +
 
 +
.image-full img {
 +
    margin-left: -15px;
 +
    margin-right: -15px;
 +
    width: 100%;
 +
}
 +
 
 +
.image p {
 +
    color: #777;
 +
    text-align: center;
 +
    font-weight: lighter;
 +
    font-family: "Avenir",sans-serif;
 +
    /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
 +
    -webkit-background-clip: text;
 +
    -webkit-text-fill-color: transparent;
 +
    text-transform: uppercase;*/
 +
}
 +
 
 +
.image-right {
 +
    width: 40%;
 +
    float: right;
 +
    padding-left: 15px;
 +
    padding-right: 0;
 +
    margin-right:0;
 +
}
 +
 
 +
.image-right img {
 +
    width: 100%;
 +
}
 +
 
 +
.image-left {
 +
    width:40%;
 +
    float: left;
 +
    padding-right: 15px;
 +
    padding-left: 0;
 +
    margin-left: 0;
 +
}
 +
 
 +
.image-left img {
 +
    width: 100%;
 +
}
 +
 
 +
#foot {
 +
    margin-top: -10px;
 +
}
 +
 
 +
#foot ul {
 +
    list-style-type: none;
 +
    list-style-image: none;
 +
    margin-left: 0;
 +
}
 +
 
 +
#foot li {
 +
    display: inline;
 +
    text-align: center;
 +
}
 +
 
 +
#foot a {
 +
    color: white;
 +
    font-size: 1em;
 +
    padding-right: 0px;
 +
}
 +
 
 +
#foot a[href ^="https://"] {
 +
    padding-right: 5px;
 +
    padding-left: 5px;
 +
}
 +
 
 +
#foot p {
 +
    font-size: 0.5em;
 +
    text-align: center;
 +
}
 +
 
 +
 
 +
.page-heading {
 +
    width: 100%;
 +
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
 +
    background: -moz-linear-gradient(left, #fa1e64,#2b00f7);
 +
    background: -webkit-linear-gradient(left, #fa1e64,#2b00f7);
 +
    background: linear-gradient(to right, #fa1e64,#2b00f7);
 +
    background-repeat: no-repeat;
 +
    background-position: center;
 +
    background-size: cover;
 +
    text-align: center;
 +
    margin-top: -10px;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
.page-heading h3 {
 +
    color: white;
 +
    font-size: 10vw;
 +
    font-weight: bolder;
 +
    font-family: "Avenir",sans-serif;
 +
    margin: 0;
 +
    padding-top: 60px;
 +
    padding-bottom: 50px;
 +
}
 +
 
 +
#bodyContent .page-heading h3 {
 +
    margin: 30px;
 +
}
 +
 
 +
/*.page-heading h3::before {
 +
    content: "[";
 +
    font-size: 15vw;
 +
}
 +
 
 +
.page-heading h3::after {
 +
    content: "]";
 +
    font-size: 15vw;
 +
}*/
 +
 
 +
 
 +
.team-member {
 +
    border-bottom: 1px solid #cccccc;
 +
    margin-bottom: 15px;
 +
    text-align: center;
 +
    margin-top: 5px;
 +
}
 +
 
 +
.team-member img {
 +
    width:100%;
 +
    max-width: 250px;
 +
    margin-left: auto;
 +
    margin-right:auto;
 +
    display: block;
 +
 
 +
}
 +
 
 +
.team-member h2{
 +
    font-size: 1em;
 +
    margin-bottom: 0;
 +
    text-transform: none;
 +
    font-weight: 600;
 +
}
 +
 
 +
 
 +
#bodyContent .team-member h3 {
 +
    margin-bottom: 15px;
 +
    padding-bottom: 0;
 +
}
 +
 
 +
 
 +
#bodyContent .advisor h2 {
 +
    margin-top: 0;
 +
    padding-top: 0;
 +
}
 +
 
 +
.team-member h3 {
 +
    font-size: 0.8em;
 +
    margin-top: 0;
 +
    padding-top: 0px;
 +
    font-weight: 200;
 +
}
 +
 
 +
#bodyContent h2 {
 +
    margin-bottom: 10px;
 +
    padding-bottom: 0px;
 +
    border-bottom: 1px solid;
 +
}
 +
 
 +
#bodyContent h5 {
 +
    margin-bottom: -80px;
 +
}
 +
 
 +
#support {
 +
    text-align: center;
 +
}
 +
 
 +
.sponsor-logo img{
 +
    width: 100%;
 +
    max-width: 200px;
 +
    display: block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    border-bottom: 1px solid #cccccc;
 +
    padding: 0;
 +
}
 +
 
 +
.sponsor-logo img:hover{
 +
    border-bottom: 1px solid #4776E6;
 +
}
 +
 
 +
.section-spacer {
 +
    width: 100%;
 +
    max-width: 720px;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    display: block;
 +
    height: 15px;
 +
    background-color: #2b00f7;
 +
    /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
 +
    background: -moz-linear-gradient(left, #fa1e64,#2b00f7);
 +
    background: -webkit-linear-gradient(left, #fa1e64,#2b00f7);
 +
    background: linear-gradient(to right, #fa1e64,#2b00f7);*/
 +
    margin-top: 80px;
 +
    clear: both;
 +
    display: none;
 +
}
 +
 
 +
#references {
 +
    border-top: 1px solid #cccccc;
 +
    font-size: 0.7em;
 +
}
 +
 
 +
#references h2 {
 +
    border: none;
 +
}
 +
.references {
 +
    padding-left: 0px;
 +
    border: none;
 +
    margin-top: 15px;
 +
}
 +
 
 +
@media (max-width: 768px) {
 +
    .quote-left, .quote-right {
 +
        width: 100%;
 +
        margin-left: auto;
 +
        margin-right: auto;
 +
        clear: both;
 +
        padding: 15px 0;
 +
        float: none;
 +
        border: none;
 +
    }
 +
    .image-left, .image-right {
 +
        margin-left: -15px;
 +
        margin-right: -15px;
 +
        width: 100%;
 +
        width: calc(100% + 30px);
 +
        float:none;
 +
    }
 +
 
 +
    h2 {
 +
        font-size: 2em;
 +
    }
 +
}
 +
 
 +
 
 +
 
 +
.algorithm>ol {
 +
    border: none;
 +
    padding-top: 15px;
 +
    margin-top: 10px;
 +
    margin-bottom: 15px;
 +
    text-align: left;
 +
    margin-left: 0;
 +
}
 +
 
 +
.algorithm>ol>li {
 +
 
 +
    text-align: left;
 +
    padding-left: 50px;
 +
    position: relative;
 +
    margin-bottom: 40px;
 +
}
 +
 
 +
.algorithm>h3 {
 +
    padding-top: 0px;
 +
    margin-top: -31px;
 +
    margin-left: 30px;
 +
    margin-right:30px;
 +
    background-color: white;
 +
    display: inline-block;
 +
    text-transform: none;
 +
    padding-left: 30px;
 +
    padding-right: 15px;
 +
    color: #fa1e64;
 +
    font-weight: 700;
 +
    font-size: 2em;
 +
}
 +
 
 +
.algorithm {
 +
    border: 15px solid #fa1e64;
 +
    margin-top: 30px;
 +
    margin-bottom: 30px;
 +
    margin-left: -30px;
 +
    margin-right: -30px;
 +
    padding-left: 30px;
 +
    padding-right: 30px;
 +
    text-align: center;
 +
}
 +
 
 +
.algorithm ol li::before {
 +
    content: counter(step-counter);
 +
    font-size: 4em;
 +
    font-family: "Avenir",sans-serif;
 +
    font-weight: 700;
 +
    color: #2b00f7;
 +
    display: block;
 +
    position: absolute;
 +
    left:0;
 +
    top: 50%;
 +
    transform: translateY(-50%);
 +
}
 +
 
 +
.image.lightbox {
 +
    position: fixed;
 +
    top: 66px;
 +
    bottom: 0px;
 +
    left: 0;
 +
    width: 100%;
 +
    height: 100%;
 +
    background-color: #2b00f7;
 +
    /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
 +
    background: -moz-linear-gradient(left, #fa1e64,#2b00f7);
 +
    background: -webkit-linear-gradient(left, #fa1e64,#2b00f7);
 +
    background: linear-gradient(to right, #fa1e64,#2b00f7);*/
 +
    z-index: 10000000;
 +
    float: none;
 +
}
 +
 
 +
.image.lightbox>img {
 +
    width: auto;
 +
    max-height: 60%;
 +
    max-width: 90%;
 +
    opacity: 1;
 +
    margin: auto;
 +
    display: block;
 +
    margin-top: 15px;
 +
}
 +
 
 +
.image.lightbox>p {
 +
    color: white;
 +
    background: none;
 +
    -webkit-text-fill-color: white;
 +
}
 +
 
 +
.interview-response {
 +
    color: #777;
 +
    padding-left: 15px;
 +
}
 +
 
 +
.definition {
 +
    text-decoration: none;
 +
    border-bottom: 1px dotted #00B9E7;
 +
    color: black;
 +
}
 +
 
 +
.definition:hover, .definition:focus {
 +
    text-decoration: none;
 +
    color: #00B9E7
 +
}
 +
 
 +
.popover {
 +
    background-image: url(https://static.igem.org/mediawiki/2015/8/89/Ox_bluedots.jpg);
 +
    background-size: 3px 21px;
 +
    background-repeat: repeat;
 +
    border-radius: 0;
 +
    margin: 0;
 +
    padding: 0;
 +
}
 +
 
 +
.popover-title {
 +
    background-color: #00B9E7;
 +
    border-radius: 0;
 +
    color: white;
 +
    padding-bottom: 30px;
 +
    width: 100%;
 +
    font-size: 2em;
 +
}
 +
 
 +
.popover-content {
 +
    background-color: white;
 +
    margin-left: 10px;
 +
    margin-right: 10px;
 +
    margin-top: -30px;
 +
    font-family: "Avenir", sans-serif;
 +
    font-size: 1em;
 +
}
 +
 
 +
.popover.right>.arrow::after{
 +
    border-right-color: #00B9E7;
 +
}
 +
 
 +
.popover.bottom>.arrow::after {
 +
    border-bottom-color: #00B9E7;
 +
}
 +
 
 +
.popover.left>.arrow::after {
 +
    border-left-color: #00B9E7;
 +
}
 +
 
 +
#notebook-key-button {
 +
    position: fixed;
 +
    right: 25%;
 +
    bottom: 0;
 +
    background-color: #2800D7;
 +
    margin-bottom: 15px;
 +
    height: 35px;
 +
}
 +
 
 +
#notebook-key-button.affix-bottom {
 +
    position: absolute;
 +
    right:0;
 +
    bottom:0;
 +
    margin-right: 0;
 +
}
 +
 
 +
#notebook-key-button.active {
 +
    background-color: #14006C;
 +
}
 +
 
 +
#notebook-key-button h3 {
 +
    font-size: 15px;
 +
    margin-top: 10px;
 +
    margin-bottom: 10px;
 +
    padding: 0;
 +
    padding-right: 25px;
 +
    padding-left: 25px;
 +
    display: block;
 +
    color: white;
 +
    font-weight: 200;
 +
 
 +
}
 +
 
 +
#notebook-key {
 +
    color: white;
 +
    background-color: #14006C;
 +
    position: fixed;
 +
    width: 500px;
 +
    height: 70vh;
 +
    z-index: 1000000;
 +
    right: 25%;
 +
    bottom: 50px;
 +
    margin-bottom: 5px;
 +
    overflow: auto;
 +
    display: none;
 +
}
 +
 
 +
#notebook-key.active {
 +
    display: block;
 +
}
 +
 
 +
#notebook-key h2 {
 +
    color: white;
 +
    margin: 0;
 +
    padding-top: 10px;
 +
    padding-right: 90px;
 +
    border-bottom: 2px solid white;
 +
    display: inline-block;
 +
    font-size: 1.5em;
 +
    font-weight: 800;
 +
    margin-bottom: 15px;
 +
}
 +
 
 +
#notebook-key p {
 +
    margin-bottom: 5px;
 +
    font-size: 0.8em;
 +
    color: #6488FF;
 +
}
 +
 
 +
.next-section-btn {
 +
}
 +
 
 +
.info-container {
 +
    height: 200px;
 +
    border: 2px solid #cccccc;
 +
    margin-bottom: 200px;
 +
}
 +
 
 +
@media (max-width: 992px) {
 +
    .contents-sidebar {
 +
        display: none;
 +
    }
 +
 
 +
    #notebook-key-button {
 +
        right: 15px;
 +
        bottom: 0px;
 +
    }
 +
 
 +
    #notebook-key-button.affix-bottom {
 +
        right:15px;
 +
    }
 +
 
 +
    #notebook-key {
 +
        right:0px;
 +
    }
 +
}
 +
 
 +
@media (max-width: 480px) {
 +
    #notebook-key {
 +
        top: 67.3px;
 +
        right: 0px;
 +
        left: 0px;
 +
        width: 100vw;
 +
        border-radius: 0;
 +
        bottom: 50px;
 +
        height: auto;
 +
    }
 +
}
 +
 
 +
@media (min-width: 1225px) {
 +
    .image-left, .quote-left {
 +
        width: 33vw;
 +
        margin-left: -50px;
 +
    }
 +
 
 +
    .image-right, .quote-right {
 +
        width: 33vw;
 +
        margin-right: -50px;
 +
    }
 +
 
 +
    .image.image-right.lightbox, .image.image-left.lightbox {
 +
        margin: 0;
 +
    }
 +
 
 +
    .quote-left, .quote-right {
 +
        max-width: 200px;
 +
    }
 +
}
 +
 
 +
@media (min-width: 1500px) {
 +
    .image-left, .quote-left {
 +
        margin-left: -50px;
 +
    }
 +
    .image-right, .quote-right {
 +
        margin-right: -50px;
 +
    }
 +
    .image.image-right.lightbox, .image.image-left.lightbox {
 +
        margin: 0;
 +
    }
 +
    .quote-left, .quote-right {
 +
        max-width: 200px;
 +
    }
 +
}

Revision as of 09:32, 7 September 2015

  1. contentSub, #search-controls, .firstHeading, #footer-box, #catlinks, #p-logo {
   display:none;

}

  1. top-section {
   border: none;
   height: 0px;

}

  1. content {
   width:100%;

}

body { 

   position: relative;

}

.row { 

   background-color: #fff;

} .navbar { 

   margin-top: 16px;
   position: fixed;
   font-size: 13px;
   background-color: #fff;
   margin-bottom: 0;

}

.navbar-right li { 

   font-family: "Avenir",sans-serif;
   color: #2b00f7;

}

.navbar-nav > li > a { 

   padding-left: 10px;
   padding-right: 10px;

} .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav> .active > a:hover { 

   background-color: #fff;
   color:#2b00f7;

}

.navbar-default .navbar-nav > .active { 

   background-color: #fff;

}

.navbar-default .navbar-brand { 

   font-weight: bold;
   color: #2b00f7;
   /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;*/

}

.navbar-default .navbar-brand:hover { 

   font-weight: bold;
   color: #fa1e64;
   /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;*/

}

  1. main-container {
   top:0;
   left:0;
   right:0;
   margin:51.3px 0 0 0;
   padding:0;
   background-color:#fff;
   overflow:auto;
   position:absolute;

}

  1. sidebar.affix {
   top: 80px;

}

.contents-sidebar { 

   padding-left: 20px;
   margin-top: 20px;
   margin-bottom: 20px;
   background-color: white;

}

.contents-sidebar .nav>li>a { 

   color: #999;
   padding: 4px 20px;
   font-size: 13px;
   font-weight: 400;
   line-height: 1.4em;
   margin-bottom: 10px;

}

.contents-sidebar .nav .nav>li>a { 

   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 20px;
   font-size: 12px;

}

.contents-sidebar .nav .nav .nav>li>a { 

   padding-top: 1px;
   padding-bottom: 1px;
   padding-left: 20px;
   font-size: 11px;

}

.contents-sidebar .nav>.active>a { 

   color: #2b00f7;

}

.contents-sidebar .nav>li>a { 

   border-left: 2px solid transparent;

} .contents-sidebar .nav>.active>a, .contents-sidebar .nav>li>a:hover, .contents-sidebar .nav>li>a:focus { 

   color: #2b00f7;
   text-decoration: none;
   background-color: transparent;
   border-left: 2px solid #2b00f7;
   font-weight: 700;

}

.contents-sidebar .nav .nav>.active>a, .contents-sidebar .nav .nav>li>a:hover, .contents-sidebar .nav .nav>li>a:focus { 

   font-weight: 500;

}

.contents-sidebar .nav ul.nav { 

   display: none;

}

.contents-sidebar .nav>.active>ul.nav { 

   display: block;

}


  1. sidebar {
   background-color: white;

}

  1. title {
   width: 100%;
   background-image: url(Ox_Biochem_Dept.jpg);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   border-radius: 0;
   margin-top: -10px;

}

  1. title div {
   width: 100%;

}

  1. solution {
   padding-top: 4em;
   padding-bottom: 4em;

}

  1. solution-byline {
   margin: auto;

}

  1. solution-byline h3 {
   vertical-align: bottom;

}

  1. title img {
   width:80%;
   display: block;
   margin: auto auto;
   max-width: 800px;

}

  1. title p {
   margin: 0;

}

  1. logo img {
   margin:auto;
   width: 6em;

}

  1. title h3 {
   color: #fff;
   text-align: center;
   font-family: "Avenir", sans-serif;
   font-weight: lighter;
   font-size: 1em;
   margin-bottom: 1em;
   margin-right: auto;
   margin-left: auto;
   text-transform: uppercase;

}

  1. title a {
   color: #fff;
   padding: 0.2em;
   border: 3px solid white;

}

  1. title a:hover {
   background-color: white;
   color: #8E54E9;
   text-decoration: none;

}

.page-content { 

   background-color: #fff;
   z-index: 10;

}

.quote { 

   font-family: "Avenir", sans-serif;
   color: #2b00f7;
   /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;*/
   margin: 1em;

}

.quote-right, .quote-left { 

   max-width: 350px;

}

.quote p { 

   text-align: justify;
   text-transform: uppercase;
   font-size: 1em;
   font-weight: lighter;
   margin-bottom: 0;

}

.quote h3 { 

   text-align: right;
   font-size: 1em;
   text-transform: uppercase;
   color: #2b00f7;
   margin-top: 5px;
   padding-top: 0;

}

.quote-full { 

   width: 100%;
   margin-left: auto;
   margin-right: auto;
   clear: both;
   padding: 15px 0;
   max-width: 810px;

}

.quote-right { 

   width: 50%;
   font-size: 1em;
   float: right;
   padding-left: 15px;
   padding-right: 0;

}

.quote-left { 

   width:50%;
   font-size: 1em;
   float: left;
   padding-right: 15px;
   padding-left: 0;

}

.table>thead>tr>th { 

   color:  #2b00f7;

}

  1. foot {
   background-color: #6C7A89;
   color: white;
   font-family: "Avenir",sans-serif;
   text-align: center;
   padding-top: 1em;
   z-index: -10;
   text-transform: uppercase;
   vertical-align: middle;

}

h2, h1 { 

   font-size: 3em;
   font-family: "Avenir", sans-serif;
   /*text-transform: uppercase;*/
   font-weight: 900;
   color: #2b00f7;
   /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;*/
   border: none;
   clear: both;
   margin-bottom: 0em;

}

h1 { 

   font-size: 2em;

}


p { 

   text-align: justify;
   font-family: "Avenir", sans-serif;

}


h3 { 

   clear: both;
   font-weight: 700;
   font-family: "Avenir", sans-serif;
   color: #2D2D35;
   font-size: 1.5em;

}

h2, h3 { 

   padding-top: 80px;
   margin-top: -50px;

}

h4, h5 { 

   padding-top: 70px;
   margin-top: -50px;
   font-weight: bold;

}

h5 { 

   font-family: "Avenir", sans-serif;
   font-weight: 900;
   font-size: 2em;
   color: #777;

}

h6 { 

   font-size: 1em;

}

ol { 

   list-style-type: none;
   /*padding-top: 15px;
   margin-top: 30px;
   margin-bottom: 30px;
   border-top: 1px solid #cccccc;
   border-bottom: 1px solid #cccccc;
   padding-left: 15px;*/

}

ol li { 

   counter-increment: step-counter;
   /* margin-bottom: 20px; */
   font-family: "Avenir", sans-serif;
   text-align: left;
   padding-left: 25px;
   position: relative;

}

ol li::before { 

   content: counter(step-counter) ".";
   font-size: 1em;
   font-family: "Avenir",sans-serif;
   font-weight: lighter;
   margin-right: 15px;
   color: #2b00f7;
   display: inline-block;
   position: absolute;
   left:0;

}

ol li p{ 

   overflow: hidden;

}

.slim ul li { 

   /* margin-bottom: 20px; */
   font-family: "Avenir", sans-serif;
   /* vertical-align: middle; */
   text-align: left;
   padding-left: 25px;
   position: relative;

}

.slim ul li:before { 

   content: "•";
   font-size: 1.2em;
   color: #2b00f7;
   margin-right: 15px;
   display: block;
   position: absolute;
   left:0;

}


.slim ul { 

   list-style:none;

}

.slim { 

   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
   padding-left: 15px;
   padding-right: 15px;

}

.section { 

   clear: both;

}

.section h2 { 

   margin-bottom: 0;

}

.image-full img { 

   margin-left: -15px;
   margin-right: -15px;
   width: 100%;

}

.image p { 

   color: #777;
   text-align: center;
   font-weight: lighter;
   font-family: "Avenir",sans-serif;
   /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   text-transform: uppercase;*/

}

.image-right { 

   width: 40%;
   float: right;
   padding-left: 15px;
   padding-right: 0;
   margin-right:0;

}

.image-right img { 

   width: 100%;

}

.image-left { 

   width:40%;
   float: left;
   padding-right: 15px;
   padding-left: 0;
   margin-left: 0;

}

.image-left img { 

   width: 100%;

}

  1. foot {
   margin-top: -10px;

}

  1. foot ul {
   list-style-type: none;
   list-style-image: none;
   margin-left: 0;

}

  1. foot li {
   display: inline;
   text-align: center;

}

  1. foot a {
   color: white;
   font-size: 1em;
   padding-right: 0px;

}

  1. foot a[href ^="https://"] {
   padding-right: 5px;
   padding-left: 5px;

}

  1. foot p {
   font-size: 0.5em;
   text-align: center;

}


.page-heading { 

   width: 100%;
   background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
   background: -moz-linear-gradient(left, #fa1e64,#2b00f7);
   background: -webkit-linear-gradient(left, #fa1e64,#2b00f7);
   background: linear-gradient(to right, #fa1e64,#2b00f7);
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   text-align: center;
   margin-top: -10px;
   text-transform: uppercase;

}

.page-heading h3 { 

   color: white;
   font-size: 10vw;
   font-weight: bolder;
   font-family: "Avenir",sans-serif;
   margin: 0;
   padding-top: 60px;
   padding-bottom: 50px;

}

  1. bodyContent .page-heading h3 {
   margin: 30px;

}

/*.page-heading h3::before { 

   content: "[";
   font-size: 15vw;

}

.page-heading h3::after { 

   content: "]";
   font-size: 15vw;

}*/


.team-member { 

   border-bottom: 1px solid #cccccc;
   margin-bottom: 15px;
   text-align: center;
   margin-top: 5px;

}

.team-member img { 

   width:100%;
   max-width: 250px;
   margin-left: auto;
   margin-right:auto;
   display: block;

}

.team-member h2{ 

   font-size: 1em;
   margin-bottom: 0;
   text-transform: none;
   font-weight: 600;

}


  1. bodyContent .team-member h3 {
   margin-bottom: 15px;
   padding-bottom: 0;

}


  1. bodyContent .advisor h2 {
   margin-top: 0;
   padding-top: 0;

}

.team-member h3 { 

   font-size: 0.8em;
   margin-top: 0;
   padding-top: 0px;
   font-weight: 200;

}

  1. bodyContent h2 {
   margin-bottom: 10px;
   padding-bottom: 0px;
   border-bottom: 1px solid;

}

  1. bodyContent h5 {
   margin-bottom: -80px;

}

  1. support {
   text-align: center;

}

.sponsor-logo img{ 

   width: 100%;
   max-width: 200px;
   display: block;
   margin-left: auto;
   margin-right: auto;
   border-bottom: 1px solid #cccccc;
   padding: 0;

}

.sponsor-logo img:hover{ 

   border-bottom: 1px solid #4776E6;

}

.section-spacer { 

   width: 100%;
   max-width: 720px;
   margin-left: auto;
   margin-right: auto;
   display: block;
   height: 15px;
   background-color: #2b00f7;
   /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
   background: -moz-linear-gradient(left, #fa1e64,#2b00f7);
   background: -webkit-linear-gradient(left, #fa1e64,#2b00f7);
   background: linear-gradient(to right, #fa1e64,#2b00f7);*/
   margin-top: 80px;
   clear: both;
   display: none;

}

  1. references {
   border-top: 1px solid #cccccc;
   font-size: 0.7em;

}

  1. references h2 {
   border: none;

} .references { 

   padding-left: 0px;
   border: none;
   margin-top: 15px;

}

@media (max-width: 768px) { 

   .quote-left, .quote-right {
       width: 100%;
       margin-left: auto;
       margin-right: auto;
       clear: both;
       padding: 15px 0;
       float: none;
       border: none;
   }
   .image-left, .image-right {
       margin-left: -15px;
       margin-right: -15px;
       width: 100%;
       width: calc(100% + 30px);
       float:none;
   }

   h2 {
       font-size: 2em;
   }

}


.algorithm>ol { 

   border: none;
   padding-top: 15px;
   margin-top: 10px;
   margin-bottom: 15px;
   text-align: left;
   margin-left: 0;

}

.algorithm>ol>li { 

   text-align: left;
   padding-left: 50px;
   position: relative;
   margin-bottom: 40px;

}

.algorithm>h3 { 

   padding-top: 0px;
   margin-top: -31px;
   margin-left: 30px;
   margin-right:30px;
   background-color: white;
   display: inline-block;
   text-transform: none;
   padding-left: 30px;
   padding-right: 15px;
   color: #fa1e64;
   font-weight: 700;
   font-size: 2em;

}

.algorithm { 

   border: 15px solid #fa1e64;
   margin-top: 30px;
   margin-bottom: 30px;
   margin-left: -30px;
   margin-right: -30px;
   padding-left: 30px;
   padding-right: 30px;
   text-align: center;

}

.algorithm ol li::before { 

   content: counter(step-counter);
   font-size: 4em;
   font-family: "Avenir",sans-serif;
   font-weight: 700;
   color: #2b00f7;
   display: block;
   position: absolute;
   left:0;
   top: 50%;
   transform: translateY(-50%);

}

.image.lightbox { 

   position: fixed;
   top: 66px;
   bottom: 0px;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: #2b00f7;
   /*background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fa1e64),color-stop(100%, #2b00f7));
   background: -moz-linear-gradient(left, #fa1e64,#2b00f7);
   background: -webkit-linear-gradient(left, #fa1e64,#2b00f7);
   background: linear-gradient(to right, #fa1e64,#2b00f7);*/
   z-index: 10000000;
   float: none;

}

.image.lightbox>img { 

   width: auto;
   max-height: 60%;
   max-width: 90%;
   opacity: 1;
   margin: auto;
   display: block;
   margin-top: 15px;

}

.image.lightbox>p { 

   color: white;
   background: none;
   -webkit-text-fill-color: white;

}

.interview-response { 

   color: #777;
   padding-left: 15px;

}

.definition { 

   text-decoration: none;
   border-bottom: 1px dotted #00B9E7;
   color: black;

}

.definition:hover, .definition:focus { 

   text-decoration: none;
   color: #00B9E7

}

.popover { 

   background-image: url(Ox_bluedots.jpg);
   background-size: 3px 21px;
   background-repeat: repeat;
   border-radius: 0;
   margin: 0;
   padding: 0;

}

.popover-title { 

   background-color: #00B9E7;
   border-radius: 0;
   color: white;
   padding-bottom: 30px;
   width: 100%;
   font-size: 2em;

}

.popover-content { 

   background-color: white;
   margin-left: 10px;
   margin-right: 10px;
   margin-top: -30px;
   font-family: "Avenir", sans-serif;
   font-size: 1em;

}

.popover.right>.arrow::after{ 

   border-right-color: #00B9E7;

}

.popover.bottom>.arrow::after { 

   border-bottom-color: #00B9E7;

}

.popover.left>.arrow::after { 

   border-left-color: #00B9E7;

}

  1. notebook-key-button {
   position: fixed;
   right: 25%;
   bottom: 0;
   background-color: #2800D7;
   margin-bottom: 15px;
   height: 35px;

}

  1. notebook-key-button.affix-bottom {
   position: absolute;
   right:0;
   bottom:0;
   margin-right: 0;

}

  1. notebook-key-button.active {
   background-color: #14006C;

}

  1. notebook-key-button h3 {
   font-size: 15px;
   margin-top: 10px;
   margin-bottom: 10px;
   padding: 0;
   padding-right: 25px;
   padding-left: 25px;
   display: block;
   color: white;
   font-weight: 200;

}

  1. notebook-key {
   color: white;
   background-color: #14006C;
   position: fixed;
   width: 500px;
   height: 70vh;
   z-index: 1000000;
   right: 25%;
   bottom: 50px;
   margin-bottom: 5px;
   overflow: auto;
   display: none;

}

  1. notebook-key.active {
   display: block;

}

  1. notebook-key h2 {
   color: white;
   margin: 0;
   padding-top: 10px;
   padding-right: 90px;
   border-bottom: 2px solid white;
   display: inline-block;
   font-size: 1.5em;
   font-weight: 800;
   margin-bottom: 15px;

}

  1. notebook-key p {
   margin-bottom: 5px;
   font-size: 0.8em;
   color: #6488FF;

}

.next-section-btn { }

.info-container { 

   height: 200px;
   border: 2px solid #cccccc;
   margin-bottom: 200px;

}

@media (max-width: 992px) { 

   .contents-sidebar {
       display: none;
   }

   #notebook-key-button {
       right: 15px;
       bottom: 0px;
   }

   #notebook-key-button.affix-bottom {
       right:15px;
   }

   #notebook-key {
       right:0px;
   }

}

@media (max-width: 480px) { 

   #notebook-key {
       top: 67.3px;
       right: 0px;
       left: 0px;
       width: 100vw;
       border-radius: 0;
       bottom: 50px;
       height: auto;
   }

}

@media (min-width: 1225px) { 

   .image-left, .quote-left {
       width: 33vw;
       margin-left: -50px;
   }

   .image-right, .quote-right {
       width: 33vw;
       margin-right: -50px;
   }

   .image.image-right.lightbox, .image.image-left.lightbox {
       margin: 0;
   }

   .quote-left, .quote-right {
       max-width: 200px;
   }

}

@media (min-width: 1500px) { 

   .image-left, .quote-left {
       margin-left: -50px;
   }
   .image-right, .quote-right {
       margin-right: -50px;
   }
   .image.image-right.lightbox, .image.image-left.lightbox {
       margin: 0;
   }
   .quote-left, .quote-right {
       max-width: 200px;
   }

}