Difference between revisions of "Team:DTU-Denmark/description"

Line 1: Line 1:
−
{{Team:DTU-Denmark/header.html}} <!-- DON'T TOUCH!!! -->
+
/* Overview
 +
1. Body
 +
2. Masthead settings
 +
3. Content left column
 +
4. Sidebar right column
 +
5. windowsize responsive
 +
6. Attribution page
 +
7. Team member page
 +
8. Notebook
 +
9. Masterhead mainpages
 +
10. Modal Pictures
 +
11. Panel
 +
12. References
 +
*/
  
−
<html lang="en">
+
/****
−
<head>
+
1. BODY
−
    <title>Bootstrap Example</title>
+
*****/
−
    <meta charset="utf-8">
+
body {
−
     <meta name="viewport" content="width=device-width, initial-scale=1">
+
     overflow-x: hidden; /*prevent sidescroll on narrow devices*/
−
</head>
+
}
  
 +
/*
 +
.MYbody {
 +
    position: fixed;
 +
    overflow-x: hidden;
 +
    overflow-y: scroll;
 +
}
 +
*/
  
−
<!-- BODY -->
+
a:hover, a:visited, a:link, a:active
−
<body data-spy="scroll" data-target="#scrollspy" data-offset="90">
+
{
−
<div class="MYbody">
+
    text-decoration: none !important;
 +
}
  
−
<div class="masthead">
+
a,
−
    <div class="container-fluid">
+
a:visited {
−
        <div class="row">
+
    color: #555;
−
            <div class="col-md-12 thumbnail" style="background-image:url(https://static.igem.org/mediawiki/2016/5/56/T--DTU-Denmark--project-header.jpg)"> <!-- EDIT style url (this should lead to an image) -->
+
}
  
−
                <div class="caption">
+
a:hover,
−
                    <div class="col-md-5 col-sm-5 col-xs-12 title"> <!-- the approximate max number of characters ~ 400 --> <!-- EDIT -->
+
a:focus {
−
                        <h1>TITLE<p class="lead">leader under the title, short introduction. Ubique moderatius efficiantur eum et, dico oporteat recusabo ius cu, pro id modus sadipscing. Maluisset patrioque eum ad, mel eius doctus accommodare eu, minimum deleniti repudiandae mel ea. Noster nostrud diceret sea no. Eos an nullam molestiae signiferumque, vel ne laudem ignota oblique. Duo te luptatum percipitur signiferumque, at dicunt iriure dolorem his.</p></h1>
+
     color: #990000;
−
                    </div>
+
}
−
                    <div class="col-md-2 col-sm-2 hidden-xs space"></div>
+
−
                    <div class="col-md-5 col-sm-5 hidden-xs intro"> <!-- will be hidden on phones, duplicate the text to blockquote down below first section header, to show it there, when it dissapear-->
+
−
                        <blockquote class="blockquote-reverse"> <!-- EDIT -->
+
−
                            <p>Quote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
−
                            <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+
−
                        </blockquote>     
+
−
                    </div>
+
−
                </div>
+
−
            </div>
+
−
        </div> <!-- /row -->
+
−
        <div class="border"></div>
+
−
     </div>
+
−
</div> <!-- /masthead-->
+
  
−
<br>
+
/***********
−
<!-- Content -->
+
2. MASTHEAD
−
<div class="container">
+
************/
−
<div class="row"> <!--Must sorround both content and sidebar-->
+
.masthead { /*control height*/
−
     <div class="col-md-9 col-sm-10 colLeft"> <!-- LEFT -->
+
     height: 300px;
−
        <div><a class="anchor" id="section-1"></a>
+
}
−
        <h2 class="h2">Section 1</h2>
+
 
−
           
+
.masthead .caption { /*control shadowing*/
−
            <blockquote class="visible-xs"> <!-- quote from masterhead duplicate -->
+
    width:100%;
−
                <p>Quote Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+
    height: 300px;
−
                <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
+
    bottom: .0rem;
−
            </blockquote>
+
    position: absolute;
−
           
+
    background:#000;
−
            <p>Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
+
    background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
−
            </p><p>
+
    background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
−
            Paragraph
+
    background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
−
            </p><p>
+
    background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
−
            Paragraph
+
}
−
            </p>
+
 
−
        </div> <!-- /overview-->
+
.masthead .thumbnail {
 +
    height: 300px;
 +
    width: 100%;
 +
    background-size: cover;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    border: 0 none;
 +
    box-shadow: none;
 +
    margin:0;
 +
    padding:0;
 +
}
 
          
 
          
−
        <div><a class="anchor" id="section-2"></a>
+
.masthead .caption > div {
−
        <h2 class="h2">Project Description</h2>
+
    margin-top: 2em;
−
        <h3 class="h3">Background</h3>
+
}
−
            <p>
+
−
In Denmark today, less than half the waste produced is recycled,
+
−
which means that more than 3.5 million tons get burned off each year.  
+
−
We have abundant waste streams from the industry such as glycerol from
+
−
biodiesel production, byproducts from rapeseed production, used cooking
+
−
oil and ordinary household waste.
+
−
</p>
+
−
<p>
+
−
Cell factories are becoming an increasing factor in the industry today,
+
−
where different microorganisms are utilized to produce various compounds
+
−
from therapeutics, organic acids, food additives etc. Currently however,
+
−
the sustainability of these industrial processes is limited by the narrow
+
−
substrate range of the organisms used. The most common feeds in use are
+
−
simple carbohydrates such as glucose produced by enzymatic hydrolysis from
+
−
edible plants such as maize, rice and wheat.
+
−
</p>
+
−
<p>
+
−
It is widely established that the dimorphic yeast <i>Yarrowia lipolytica</i>
+
−
grows well on a broad range of substrates such as alcohols, fatty acids,
+
−
glycerol as well as on simple sugars in complex mixtures, whereas the
+
−
conventional and widely used yeast <i>Saccharomyces cerevisiae</i> only
+
−
grows well on a very limited amount of substrates such as glucose.
+
−
Furthermore, the protein modification and secretion systems of <i>Y. lipolytica</i>
+
−
gives rise to a higher potential as a cell factory for production of a
+
−
variety of therapeutics, food additives etc. Both of the species are fast growing,
+
−
which contributes to the final efficiency as cell factories.
+
−
</p>
+
−
<p>
+
−
Nonetheless, <i>Y. lipolytica</i> has not been applied in industry as widely
+
−
as <i>S. cerevisiae</i> due to lack of tools for genetic engineering and as
+
−
genetic manipulation has been tedious and time consuming.
+
−
</p>
+
−
        <h3 class="h3">Aim</h3>
+
−
            <p>
+
−
This project aims to develop the chassis for a versatile and efficient cell factory
+
−
that can transform abundant waste streams into valuable products.
+
−
            </p>
+
  
−
<h3 class="h3">Methods</h3>
+
.masthead .caption h1 {
−
<ol>
+
    margin-top: -.0em;
−
<li>Substrate screening</li>
+
    padding-top: -.0em;
−
<p>
+
}
−
To confirm the ability of <i>Y. lipolytica</i> for efficient utilization of an impure mixture of compounds, various waste streams will be investigated as a substrate. We chose mixtures of fats, present in biodiesel waste or vegetation waters from rapeseed oil production, as well as sugars, which are present in molasses or brewery waste. In order to demonstrate the versatility of  <i>Y. lipolytica</i>, we are going even further and ferment homogenized household waste.
+
−
</p>
+
  
−
<li>Product</li>
+
.masthead .caption h1,
−
<p>
+
.masthead .caption p {
−
As a proof of concept we aim to demonstrate the production of both an extracellular heterologous protein and an engineered metabolite, and show how a valuable product can be produced by our cell factory utilizing waste streams.
+
    color: #fff;
−
We will implement a codon optimized version of the human proinsulin gene along with a native <i>Y. lipolytica</i> promoter and secretion signal into <i>Y. lipolytica</i>.
+
}
−
Using an already constructed plasmid with <i>S. cerevisiae</i> optimized genes from the bacterium <i>Erwinia uredovora</i> encoding four enzymes, we will implement the biosynthesis pathway of beta-carotene in <i>Y. lipolytica</i> by using the <a href="http://parts.igem.org/Part:BBa_K152005"> K152005 biobrick</a>.
+
−
</p>
+
  
−
<li>Molecular toolbox</li>
+
.masthead .title h1,
−
<p>
+
.masthead .title h1 > p{
−
This project tries to solve the lack of the well-proven tools for <i>Y. lipolytica</i>. We will develop a standardized genetic toolbox, including CRISPR/Cas9-mediated genome editing. The molecular toolbox will bring new opportunities such as an introduction of new pathways, adjusting waste utilization and targeting genetic manipulations.  
+
    text-transform: uppercase;
−
</p>
+
    text-align: justify;
−
</ol>
+
    float: left;
 +
}
  
−
        </div>
+
.masthead .title h1 > p {
−
       
+
    border-top: 1px solid;
−
        <div><a class="anchor" id="section-3"></a>
+
    padding-top: .3em;
−
        <h2 class="h2">Reference tryout</h2>
+
}
−
            <p>
+
 
−
            Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit. Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
+
.masthead .intro blockquote {
−
            </p><p>
+
    position: absolute;
−
            Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.<sup><a href="#references">2,3</a></sup> Has ut facer debitis, quo eu agam purto. In eum justo aeterno. Sea ut atqui efficiantur, mandamus deseruisse at est, erat natum cum eu. Quot numquam in vel. Salutatus euripidis moderatius qui ex, eu tempor volumus vituperatoribus has, ius ea ullum facer corrumpit.
+
    margin-top: 30px;
−
           
+
}
−
        </div>
+
 
−
       
+
.masthead .intro blockquote p {
−
        <div class="ref-sec"><a class="anchor" id="references"></a>
+
    text-align: right !important;
−
        <h2 class="h2">References</h2>
+
}
−
            <ol>
+
 
−
                <li>reference 1</li>
+
.masthead .intro blockquote small {
−
                <li>reference 2</li>
+
    color: #fff;
−
            </ol>
+
}
−
        </div>
+
 
−
     </div> <!-- /LEFT -->
+
/******************
 +
3. CONTENT LEFT COLUMN
 +
******************/
 +
.colLeft blockquote {
 +
    border-left-color: #990000;
 +
}
 +
 
 +
.colLeft a.anchor:target,
 +
.colLeft div.anchor:target { /*Ensure that internal links will have the correct setoff, below the fixed header*/
 +
    display: block;
 +
    top: -125px;
 +
    position: relative;
 +
    visibility: hidden;
 +
}
 +
 
 +
.colLeft .h2 {
 +
    border-bottom-width: 2px;
 +
    font-weight: 500;
 +
margin-top: .5em;
 +
padding-top: .5em;
 +
}
 +
 
 +
.colLeft .h3 {
 +
    border-bottom-width: 1px;
 +
    font-weight: 500;
 +
margin-bottom: 0.4em;
 +
}
 +
#bodyContent h3 {
 +
margin-bottom: 0.5em;
 +
}
 +
 
 +
.colLeft .h2,
 +
.colLeft .h3 {
 +
    padding-bottom: 0.2em;
 +
    border-bottom-style: solid;
 +
    border-bottom-color: #990000;
 +
clear: both;
 +
}
 +
/* grid layout for achievements, notebook, and parts page */
 +
.grid-row {
 +
    clear:both;
 +
}
 +
 
 +
/*******************
 +
4. SIDEBAR RIGHT COLUMN
 +
********************/
 +
@media screen and (max-width: 1000px){
 +
    .colRight {
 +
    padding-left: 0px !important;
 +
    }
 +
}
 +
 
 +
#sidebar {
 +
    margin-top: 20px;
 +
    padding-top: 18px;
 +
    padding-bottom: 5px;
 +
    padding-left: 5px;
 +
    padding-right: 5px;
 +
    border-radius: 5px;
 +
}
 +
 
 +
#sidebar {
 +
    margin-left: 0px;
 +
}
 +
 
 +
 
 +
#sidebar.nav li a {
 +
    color: #999;
 +
    font-size: .9em;
 +
     padding-top: 0.3em;
 +
    padding-bottom: .3em;
 +
    background-color: transparent;
 +
    text-transform: uppercase;
 +
    border-left-width: 3px;
 +
    border-left-style: solid;
 +
    border-left-color: #fff;
 
      
 
      
 +
}
 +
 +
#sidebar.nav li a:active,
 +
#sidebar.nav li a:hover,
 +
#sidebar.nav li a:focus,
 +
#sidebar.nav li a.nav-active:hover {
 +
    background-color: transparent;
 +
    list-style: circle;
 +
    border-left-width: 3px;
 +
    border-left-style: solid;
 +
    border-left-color: #990000;
 +
}
 +
 +
#sidebar.nav li a.nav-active {
 +
    color:black;
 +
    border-left-width: 3px;
 +
    border-left-style: solid;
 +
    border-left-color: #750000;
 +
}
 +
 +
/* Undo the affixed behavior in mobile views */
 +
 +
 +
/* Apply the affixed behavior */
 +
/* affix-top: The affix-top class should be inline to the page. */
 +
#sidebar.affix-top {
 +
    width:200px;
 +
/* for reference - no additional styling */
 +
}
 +
 +
/* affix: The affix class should be fixed to the page. */
 +
#sidebar.affix {
 +
    position: fixed;
 +
    top: 125px;      /* same as body padding or outer navbar height */
 +
    width: 200px;  /* stop it from growing - anyone know how to fix this? */
 +
}
 +
 +
/* affix bottom: The affix-bottom class should be positioned absolute. */
 +
#sidebar.affix-bottom {
 +
    position: absolute;
 +
    width: 200px;
 +
}
 
      
 
      
 +
 +
/********************
 +
5. WINDOWSIZE RESPONSIVE
 +
********************/
 +
/*Fixes dissapear reappear of sidebar when scrolling on iPad */
 +
#sidebar *:not(html) {
 +
    -webkit-transform: translate3d(0, 0, 0);
 +
}
 +
 +
@media screen and (max-width: 900px) {
 +
 +
    div.colLeft {
 +
        width: 100%;
 +
    }
 +
 +
    #sidebar {
 +
        position: fixed;
 +
        top: 70px !important;
 +
        width: 200px;  /* stop it from growing - anyone know how to fix this? */
 +
        z-index: 200;
 +
        background-color: white;
 +
        border-color: #790000;
 +
        border-style: solid;
 +
        border-width: 3px;
 +
    }
 +
 +
    #sidebar.affix-bottom,
 +
    #sidebar.affix-top {
 +
        position: fixed;
 +
    }
 
      
 
      
−
     <!-- RIGHT-->
+
     #scrollspy {
−
     <div class="col-md-3 col-sm-2 colRight" id="scrollspy">
+
        display: none;
−
        <ul class="nav" id="sidebar">
+
    }
−
            <li><a href="#section-1">Section 1</a></li>
+
}
−
            <li><a href="#section-2">Section 2</a></li>
+
 
−
            <li><a href="#section-3">Section 3</a></li>
+
/***************
−
            <li><a href="#references">References</a></li>
+
6. ATTRIBUTION PAGE
−
           
+
****************/
−
         </ul>
+
 
−
     </div> <!-- /RIGHT -->
+
.sponsor-image {
 +
    width: 100%;
 +
    margin-bottom: 40px;
 +
}
 +
 
 +
/***************
 +
7. TEAM MEMBER PAGE
 +
****************/
 +
       
 +
.student {
 +
    margin-bottom: 3em;
 +
}
 +
       
 +
.student img {
 +
    margin-top: 1.5em;
 +
}
 +
 
 +
/********
 +
8. NOTEBOOK
 +
********/
 +
 
 +
/* Timeline */
 +
#timeline .timeline-item:after,
 +
#timeline .timeline-item:before {
 +
    content: '';
 +
    display: block;
 +
    width: 100%;
 +
    clear: both;
 +
}
 +
#timeline {
 +
    width: 100%;
 +
    margin: 30px auto;
 +
    position: relative;
 +
    padding: 0 10px;
 +
     -webkit-transition: all 0.4s ease;
 +
    -moz-transition: all 0.4s ease;
 +
    -ms-transition: all 0.4s ease;
 +
    transition: all 0.4s ease;
 +
}
 +
#timeline:before {
 +
    content: "";
 +
    width: 3px;
 +
    height: 100%;
 +
    background: #EFEFEF;
 +
    left: 50%;
 +
    top: 0;
 +
    position: absolute;
 +
}
 +
#timeline:after {
 +
    content: "";
 +
    clear: both;
 +
    display: table;
 +
    width: 100%;
 +
}
 +
#timeline .timeline-item {
 +
    margin-bottom: 50px;
 +
    position: relative;
 +
}
 +
#timeline .timeline-item .timeline-icon {
 +
    background: #EFEFEF;
 +
    width: 50px;
 +
    height: 50px; 
 +
    position: absolute;
 +
    top: 0;
 +
    left: 50%;
 +
    overflow: hidden;
 +
    margin-left: -23px;
 +
    border-radius: 100%;
 +
}
 +
 
 +
#timeline .timeline-item .timeline-icon span.star {
 +
    position: relative;
 +
    top: 28%;
 +
    left: 28%;
 +
    color: #6C7A89;
 +
    font-size: x-large;
 +
}
 +
 
 +
#timeline .timeline-item .timeline-content {
 +
    width: 45%;
 +
    background: #EFEFEF;
 +
    padding: 20px;
 +
}
 +
#timeline .timeline-item .timeline-content h2 {
 +
    padding: 15px;
 +
    color: #141414;
 +
    margin:-20px -20px 5px -20px;
 +
    font-weight: 300;
 +
    font-size:21px;
 +
}
 +
#timeline .timeline-item .timeline-content:before {
 +
    content: '';
 +
    position: absolute;
 +
    left: 45%;
 +
    top: 20px;
 +
    width: 0;
 +
    height: 0;
 +
    border-top: 7px solid transparent;
 +
    border-bottom: 7px solid transparent;
 +
    border-left: 7px solid #f1f1f1;
 +
}
 +
#timeline .timeline-item .timeline-content.right {
 +
    float: right;
 +
}
 +
#timeline .timeline-item .timeline-content.right:before {
 +
    content: '';
 +
    right: 45%;
 +
    left: inherit;
 +
    border-left: 0;
 +
    border-right: 7px solid #f1f1f1;
 +
}
 +
 
 +
@media screen and (max-width: 768px) {
 +
    #timeline {
 +
        margin: 30px;
 +
        padding: 0px;
 +
        width: 90%;
 +
    }
 +
    #timeline:before {
 +
        left: 0;
 +
    }
 +
    #timeline .timeline-item .timeline-content {
 +
        width: 90%;
 +
        float: right; 
 +
    }
 +
    #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
 +
        left: 10%;
 +
        margin-left: -6px;
 +
        border-left: 0;
 +
        border-right: 7px solid #f1f1f1;
 +
    }
 +
    #timeline .timeline-item .timeline-icon {
 +
        left: 0;
 +
    }
 +
}
 +
 
 +
   
 +
/* Labels */
 +
#timeline .label-main {
 +
    background-color: #6C7A89;
 +
    color:#FFF;
 +
    font-size:14px;
 +
    margin-left:-30px;
 +
    border-radius:0;
 +
    font-weight:400;
 +
}
 +
#full-schedule .label-main {
 +
    background-color: #6C7A89;
 +
    color:#FFF;font-size:14px;
 +
    margin-left:0px;
 +
    border-radius:0;
 +
    font-weight:400;
 +
}
 +
 
 +
/***********
 +
9. MASTHEAD
 +
************/
 +
.masthead-main { /*control height*/
 +
    height: 200px;
 +
}
 +
 
 +
.masthead-main .caption { /*control shadowing*/
 +
    width:100%;
 +
    height: 200px;
 +
    bottom: .0rem;
 +
    position: absolute;
 +
    background:#000;
 +
    background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
 +
    background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
 +
    background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
 +
    background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);
 +
}
 +
 
 +
.masthead-main .thumbnail {
 +
    height: 200px;
 +
    width: 100%;
 +
    background-size: cover;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    border: 0 none;
 +
    box-shadow: none;
 +
    margin:0;
 +
    padding:0;
 +
}
 +
 
 +
.masthead-main h1.title {
 +
    text-transform: uppercase;
 +
    text-align: justify;
 +
color: white;
 +
}
 +
 
 +
/***********
 +
10. MODAL PICTURES
 +
************/
 +
 
 +
.modal-img {
 +
cursor: pointer;
 +
}
 +
 
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 1; /* Sit on top */
 +
    padding-top: 100px; /* Location of the box */
 +
    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.9); /* Black w/ opacity */
 +
}
 +
 
 +
/* Modal Content (Image) */
 +
.modal-content {
 +
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 700px;
 +
}
 +
 
 +
/* Caption of Modal Image (Image Text) - Same Width as the Image */
 +
#caption {
 +
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 700px;
 +
    text-align: center;
 +
    color: #ccc;
 +
    padding: 10px 0;
 +
    height: 150px;
 +
}
 +
 
 +
/* Add Animation - Zoom in the Modal */
 +
.modal-content, #caption {
 +
    -webkit-animation-name: zoom;
 +
    -webkit-animation-duration: 0.6s;
 +
    animation-name: zoom;
 +
    animation-duration: 0.6s;
 +
}
 +
 
 +
@-webkit-keyframes zoom {
 +
    from {-webkit-transform:scale(0)}
 +
    to {-webkit-transform:scale(1)}
 +
}
 +
 
 +
@keyframes zoom {
 +
    from {transform:scale(0)}
 +
    to {transform:scale(1)}
 +
}
 +
 
 +
/* The Close Button */
 +
.close {
 +
    position: absolute;
 +
    top: 15px;
 +
    right: 35px;
 +
    color: #f1f1f1;
 +
    font-size: 40px;
 +
    font-weight: bold;
 +
    transition: 0.3s;
 +
}
 +
 
 +
.close:hover,
 +
.close:focus {
 +
    color: #bbb;
 +
    text-decoration: none;
 +
    cursor: pointer;
 +
}
 +
 
 +
/* 100% Image Width on Smaller Screens */
 +
@media only screen and (max-width: 700px){
 +
    .modal-content {
 +
         width: 100%;
 +
     }
 +
}
 +
 
 +
/****
 +
11. PANEL
 +
****/
 +
 
 +
.panel div.panel-heading {
 +
background-color: #990000
 +
}
 +
 
 +
.panel h4.panel-title {
 +
color: #fff;
 +
}
 +
 
 +
.panel h4.panel-title:hover,
 +
.panel h4.panel-title:focus {
 +
font-weight: 400;
 +
text-decoration: none;
 +
}
 +
 
 +
/*********
 +
REFERENCES
 +
*********/
  
−
</div> <!-- /.row -->
+
div.ref-sec h2.h2 {
−
</div> <!-- /CONTENT-->   
+
padding-bottom: 0em;
−
</div> <!-- /BODY-->
+
    border-bottom-style: none;
 +
padding-top: .2em;
 +
margin-top: 1em;
 +
border-top-style: solid;
 +
border-top-color: #990000;
 +
clear: both;
 +
}
  
−
</body>
+
div.ref-sec li:before {
 +
font-size: 12px !important;
 +
color: #990000;
 +
}
  
−
<!--script for functionality of sidebar, DON'T TOUCH!!! -->
+
div.ref-sec li {
−
<script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/sidebar-js?action=raw&ctype=text/javascript"></script>
+
font-size: 12px !important;
−
</html>
+
color: black;
 +
}
  
−
<!-- DON'T TOUCH!!! -->
+
div.ref-sec ol {
−
{{Team:DTU-Denmark/footer}}
+
list-style: none;
 +
margin-left: 0px;
 +
}
 +
div.ref-sec li {
 +
counter-increment: item;
 +
margin-bottom: 2px;
 +
}
 +
div.ref-sec li:before {
 +
margin-right: 10px;
 +
content: counter(item)".";
 +
color: #990000;
 +
width: 1.2em;
 +
text-align: center;
 +
display: inline-block;
 +
}

Revision as of 09:48, 17 October 2016

/* Overview 1. Body 2. Masthead settings 3. Content left column 4. Sidebar right column 5. windowsize responsive 6. Attribution page 7. Team member page 8. Notebook 9. Masterhead mainpages 10. Modal Pictures 11. Panel 12. References

  • /

/**** 1. BODY

          • /

body { 

   overflow-x: hidden; /*prevent sidescroll on narrow devices*/

}

/* .MYbody { 

   position: fixed;
   overflow-x: hidden;
   overflow-y: scroll;

}

  • /

a:hover, a:visited, a:link, a:active { 

   text-decoration: none !important;

}

a, a:visited { 

   color: #555;

}

a:hover, a:focus { 

   color: #990000;

}

/*********** 2. MASTHEAD

                        • /

.masthead { /*control height*/ 

   height: 300px;

}

.masthead .caption { /*control shadowing*/ 

   width:100%;
   height: 300px;
   bottom: .0rem;
   position: absolute;
   background:#000;
   background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);

}

.masthead .thumbnail { 

   height: 300px;
   width: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border: 0 none;
   box-shadow: none;
   margin:0;
   padding:0;

}

.masthead .caption > div { 

   margin-top: 2em;

}

.masthead .caption h1 { 

   margin-top: -.0em;
   padding-top: -.0em;

}

.masthead .caption h1, .masthead .caption p { 

   color: #fff;

}

.masthead .title h1, .masthead .title h1 > p{ 

   text-transform: uppercase;
   text-align: justify;
   float: left;

}

.masthead .title h1 > p { 

   border-top: 1px solid;
   padding-top: .3em;

}

.masthead .intro blockquote { 

   position: absolute;
   margin-top: 30px;

}

.masthead .intro blockquote p { 

   text-align: right !important;

}

.masthead .intro blockquote small { 

   color: #fff;

}

/****************** 3. CONTENT LEFT COLUMN

                                    • /

.colLeft blockquote { 

   border-left-color: #990000;

}

.colLeft a.anchor:target, .colLeft div.anchor:target { /*Ensure that internal links will have the correct setoff, below the fixed header*/ 

   display: block;
   top: -125px;
   position: relative;
   visibility: hidden;

}

.colLeft .h2 { 

   border-bottom-width: 2px;
   font-weight: 500;

margin-top: .5em; padding-top: .5em; }

.colLeft .h3 { 

   border-bottom-width: 1px;
   font-weight: 500;

margin-bottom: 0.4em; }

  1. bodyContent h3 {

margin-bottom: 0.5em; }

.colLeft .h2, .colLeft .h3 { 

   padding-bottom: 0.2em;
   border-bottom-style: solid;
   border-bottom-color: #990000;

clear: both; } /* grid layout for achievements, notebook, and parts page */ .grid-row { 

   clear:both;

}

/******************* 4. SIDEBAR RIGHT COLUMN

                                        • /

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

   .colRight {
   padding-left: 0px !important;
   }

}

  1. sidebar {
   margin-top: 20px;
   padding-top: 18px;
   padding-bottom: 5px;
   padding-left: 5px;
   padding-right: 5px;
   border-radius: 5px;

}

  1. sidebar {
   margin-left: 0px;

}


  1. sidebar.nav li a {
   color: #999;
   font-size: .9em;
   padding-top: 0.3em;
   padding-bottom: .3em;
   background-color: transparent;
   text-transform: uppercase;
   border-left-width: 3px;
   border-left-style: solid;
   border-left-color: #fff;

}

  1. sidebar.nav li a:active,
  2. sidebar.nav li a:hover,
  3. sidebar.nav li a:focus,
  4. sidebar.nav li a.nav-active:hover {
   background-color: transparent;
   list-style: circle;
   border-left-width: 3px;
   border-left-style: solid;
   border-left-color: #990000;

}

  1. sidebar.nav li a.nav-active {
   color:black;
   border-left-width: 3px;
   border-left-style: solid;
   border-left-color: #750000;

}

/* Undo the affixed behavior in mobile views */


/* Apply the affixed behavior */ /* affix-top: The affix-top class should be inline to the page. */

  1. sidebar.affix-top {
   width:200px;

/* for reference - no additional styling */ }

/* affix: The affix class should be fixed to the page. */

  1. sidebar.affix {
   position: fixed;
   top: 125px;      /* same as body padding or outer navbar height */
   width: 200px;   /* stop it from growing - anyone know how to fix this? */

}

/* affix bottom: The affix-bottom class should be positioned absolute. */

  1. sidebar.affix-bottom {
   position: absolute;
   width: 200px;

}


/******************** 5. WINDOWSIZE RESPONSIVE

                                        • /

/*Fixes dissapear reappear of sidebar when scrolling on iPad */

  1. sidebar *:not(html) { 
   -webkit-transform: translate3d(0, 0, 0);

}

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

   div.colLeft {
       width: 100%;
   }

   #sidebar {
       position: fixed;
       top: 70px !important; 
       width: 200px;   /* stop it from growing - anyone know how to fix this? */
       z-index: 200;
       background-color: white;
       border-color: #790000;
       border-style: solid;
       border-width: 3px;
   }

   #sidebar.affix-bottom,
   #sidebar.affix-top {
       position: fixed;
   }
   
   #scrollspy {
       display: none;
   }

}

/*************** 6. ATTRIBUTION PAGE

                                • /

.sponsor-image { 

   width: 100%;
   margin-bottom: 40px;

}

/*************** 7. TEAM MEMBER PAGE

                                • /

.student { 

   margin-bottom: 3em;

}

.student img { 

   margin-top: 1.5em;

}

/******** 8. NOTEBOOK

                • /

/* Timeline */

  1. timeline .timeline-item:after,
  2. timeline .timeline-item:before {
   content: ;
   display: block;
   width: 100%;
   clear: both;

}

  1. timeline {
   width: 100%;
   margin: 30px auto;
   position: relative;
   padding: 0 10px;
   -webkit-transition: all 0.4s ease;
   -moz-transition: all 0.4s ease;
   -ms-transition: all 0.4s ease;
   transition: all 0.4s ease;

}

  1. timeline:before {
   content: "";
   width: 3px;
   height: 100%;
   background: #EFEFEF;
   left: 50%;
   top: 0; 
   position: absolute;

}

  1. timeline:after {
   content: "";
   clear: both;
   display: table;
   width: 100%;

}

  1. timeline .timeline-item {
   margin-bottom: 50px;
   position: relative;

}

  1. timeline .timeline-item .timeline-icon {
   background: #EFEFEF;
   width: 50px;
   height: 50px;  
   position: absolute;
   top: 0;
   left: 50%;
   overflow: hidden;
   margin-left: -23px;
   border-radius: 100%;

}

  1. timeline .timeline-item .timeline-icon span.star {
   position: relative;
   top: 28%;
   left: 28%;
   color: #6C7A89;
   font-size: x-large;

}

  1. timeline .timeline-item .timeline-content {
   width: 45%;
   background: #EFEFEF;
   padding: 20px;

}

  1. timeline .timeline-item .timeline-content h2 {
   padding: 15px;
   color: #141414;
   margin:-20px -20px 5px -20px;
   font-weight: 300;
   font-size:21px;

}

  1. timeline .timeline-item .timeline-content:before {
   content: ;
   position: absolute;
   left: 45%;
   top: 20px; 
   width: 0;
   height: 0;
   border-top: 7px solid transparent;
   border-bottom: 7px solid transparent; 
   border-left: 7px solid #f1f1f1;

}

  1. timeline .timeline-item .timeline-content.right {
   float: right;

}

  1. timeline .timeline-item .timeline-content.right:before {
   content: ;
   right: 45%;
   left: inherit;
   border-left: 0;
   border-right: 7px solid #f1f1f1;

}

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

   #timeline {
       margin: 30px;
       padding: 0px;
       width: 90%;
   }
   #timeline:before {
       left: 0;
   }
   #timeline .timeline-item .timeline-content {
       width: 90%;
       float: right;  
   }
   #timeline .timeline-item .timeline-content:before, #timeline .timeline-item .timeline-content.right:before {
       left: 10%;
       margin-left: -6px;
       border-left: 0;
       border-right: 7px solid #f1f1f1;
   }
   #timeline .timeline-item .timeline-icon {
       left: 0;
   }

}


/* Labels */

  1. timeline .label-main {
   background-color: #6C7A89;
   color:#FFF;
   font-size:14px;
   margin-left:-30px;
   border-radius:0;
   font-weight:400;

}

  1. full-schedule .label-main {
   background-color: #6C7A89;
   color:#FFF;font-size:14px;
   margin-left:0px;
   border-radius:0;
   font-weight:400;

}

/*********** 9. MASTHEAD

                        • /

.masthead-main { /*control height*/ 

   height: 200px;

}

.masthead-main .caption { /*control shadowing*/ 

   width:100%;
   height: 200px;
   bottom: .0rem;
   position: absolute;
   background:#000;
   background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0), #000);
   background: linear-gradient(to right, #000, rgba(0, 0, 0, 0), #000);

}

.masthead-main .thumbnail { 

   height: 200px;
   width: 100%;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border: 0 none;
   box-shadow: none;
   margin:0;
   padding:0;

}

.masthead-main h1.title { 

   text-transform: uppercase;
   text-align: justify;

color: white; }

/*********** 10. MODAL PICTURES

                        • /

.modal-img { cursor: pointer; }

/* The Modal (background) */ .modal { 

   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 1; /* Sit on top */
   padding-top: 100px; /* Location of the box */
   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.9); /* Black w/ opacity */

}

/* Modal Content (Image) */ .modal-content { 

   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;

}

/* Caption of Modal Image (Image Text) - Same Width as the Image */

  1. caption {
   margin: auto;
   display: block;
   width: 80%;
   max-width: 700px;
   text-align: center;
   color: #ccc;
   padding: 10px 0;
   height: 150px;

}

/* Add Animation - Zoom in the Modal */ .modal-content, #caption { 

   -webkit-animation-name: zoom;
   -webkit-animation-duration: 0.6s;
   animation-name: zoom;
   animation-duration: 0.6s;

}

@-webkit-keyframes zoom { 

   from {-webkit-transform:scale(0)} 
   to {-webkit-transform:scale(1)}

}

@keyframes zoom { 

   from {transform:scale(0)} 
   to {transform:scale(1)}

}

/* The Close Button */ .close { 

   position: absolute;
   top: 15px;
   right: 35px;
   color: #f1f1f1;
   font-size: 40px;
   font-weight: bold;
   transition: 0.3s;

}

.close:hover, .close:focus { 

   color: #bbb;
   text-decoration: none;
   cursor: pointer;

}

/* 100% Image Width on Smaller Screens */ @media only screen and (max-width: 700px){ 

   .modal-content {
       width: 100%;
   }

}

/**** 11. PANEL

        • /

.panel div.panel-heading { background-color: #990000 }

.panel h4.panel-title { color: #fff; }

.panel h4.panel-title:hover, .panel h4.panel-title:focus { font-weight: 400; text-decoration: none; }

/********* REFERENCES

                  • /

div.ref-sec h2.h2 { padding-bottom: 0em; 

   border-bottom-style: none;

padding-top: .2em; margin-top: 1em; border-top-style: solid; border-top-color: #990000; clear: both; }

div.ref-sec li:before { font-size: 12px !important; color: #990000; }

div.ref-sec li { font-size: 12px !important; color: black; }

div.ref-sec ol { list-style: none; margin-left: 0px; } 

div.ref-sec li {

counter-increment: item; margin-bottom: 2px; 

}
div.ref-sec li:before {

margin-right: 10px; content: counter(item)"."; color: #990000; width: 1.2em; text-align: center; display: inline-block; 

}