Difference between revisions of "Team:DTU-Denmark"

Line 1: Line 1:
−
{{Team:DTU-Denmark/header.html}} <!-- Header template  -->
+
/* 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>
+
/****
 +
1. BODY
 +
*****/
 +
body {
 +
    overflow-x: hidden; /*prevent sidescroll on narrow devices*/
 +
}
  
−
<head>
+
/*
−
<!--Hovereffect stylesheet costumized from: https://miketricking.github.io/dist/#-->
+
.MYbody {
−
<link rel="stylesheet" href="https://2016.igem.org/Team:DTU-Denmark/hovereffect?action=raw&ctype=text/css">
+
    position: fixed;
 +
    overflow-x: hidden;
 +
    overflow-y: scroll;
 +
}
 +
*/
  
−
<style>
+
.MYbody p {
−
.p {
+
font-size: 1.5em;
−
font-family: Georgia, serif !important;
+
 
}
 
}
  
−
</style>
+
a:hover, a:visited, a:link, a:active
−
</head>
+
{
 +
    text-decoration: none !important;
 +
}
  
 +
a,
 +
a:visited {
 +
    color: #555;
 +
}
  
−
<br>
+
a:hover,
−
<br>
+
a:focus {
−
<br>
+
    color: #990000;
 +
}
  
 +
/***********
 +
2. MASTHEAD
 +
************/
 +
.masthead { /*control height*/
 +
    height: 300px;
 +
}
  
−
<body class="container-fluid">
+
.masthead .caption { /*control shadowing*/
−
<div class="container">
+
    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);
 +
}
  
−
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <!-- implement along with hovereffect stylesheet -->
+
.masthead .thumbnail {
−
     <div class="hovereffect" onclick="void(0)">
+
     height: 300px;
−
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/1/13/T--DTU-Denmark--graininflask_sq.jpg">
+
    width: 100%;
−
        <div class="overlay">
+
    background-size: cover;
−
          <h2>The <strong>problem</strong></h2>
+
    background-position: center;
−
<p><strong>
+
    background-repeat: no-repeat;
−
The current state of industrial biotechnology means that the vast majority biorefineries rely on edible substrates such as corn, wheat or sugar canes. This has sparked the food vs. fuel debate, leading to the fundamental question: “Should we use our edible crops to feed the growing human population, or use it to provide sustainable chemicals for the industrialised world?”. A better question might be: “Why are we not doing both?”. The limiting factor of the current processes, is a lack of molecular tools that has limited us to the use of a small number of organisms with narrow substrate ranges. Even though efforts have been made to expand the substrate range of many conventional cell factories, such as Escherichia coli and Saccharomyces cerevisiae, the task has proven difficult and we have yet to see real impact from these efforts.
+
    border: 0 none;
−
</strong></p>
+
     box-shadow: none;
−
        </div>
+
     margin:0;
−
     </div>
+
    padding:0;
−
</div>
+
}
−
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
+
−
     <div class="hovereffect" onclick="void(0)">
+
−
        <img class="img-responsive" src="https://static.igem.org/mediawiki/2016/9/9d/T--DTU-Denmark--solution_sq.jpg">
+
 
          
 
          
−
        <div class="overlay">
+
.masthead .caption > div {
−
        <h2>The <strong>solution</strong></h2>
+
     margin-top: 2em;
−
     
+
}
−
        <p><strong>
+
−
        The development of new technologies such as CRISPR and Next-generation sequencing has dramatically reduced the effort required to genetically modify non-model organisms, and is effectively breaking down the barrier between model and non-model organism. Therefore we though: “Why force a model organisms to grow on non-conventional substrates, when we can start of with an organism that already grows on a broad range of substrates?”. See our proposed solution by scrolling down.
+
−
        </strong></p>
+
−
        </div>
+
−
     </div>
+
−
</div>
+
−
</div>
+
  
−
<script>
+
.masthead .caption h1 {
−
// For Demo purposes only (show hover effect on mobile devices)
+
    margin-top: -.0em;
−
[].slice.call( document.querySelectorAll('.content a') ).forEach( function(el) {
+
    padding-top: -.0em;
−
el.onclick = function() { return false; }
+
}
−
} );
+
−
</script>
+
  
−
<h1>This is heading 1</h1>
+
.masthead .caption h1,
 +
.masthead .caption p {
 +
    color: #fff;
 +
}
  
−
<p>
+
.masthead .title h1,
−
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eget ornare orci. Etiam sodales molestie felis quis condimentum. Aliquam vel sem fringilla, egestas justo sit amet, tincidunt augue. Nam maximus arcu sit amet eros rutrum commodo. Quisque fermentum dapibus tristique. Fusce eu neque euismod, commodo arcu maximus, rutrum magna. Proin eget cursus dui, eu bibendum lacus. Sed ac accumsan mi. Mauris at pulvinar turpis. Nulla bibendum nec felis ut fringilla. Morbi ac faucibus ex. Ut eleifend libero non rhoncus tristique. Mauris vel ornare massa. In congue, tellus semper condimentum porta, turpis tortor porta est, ac blandit elit velit vitae ex. Cras in lectus ligula. Praesent tincidunt dui et libero commodo, vitae cursus elit finibus.
+
.masthead .title h1 > p{
−
</p>
+
    text-transform: uppercase;
−
<p>
+
    text-align: justify;
−
Maecenas porta vitae turpis vel lacinia. Phasellus nisl urna, auctor at placerat ac, faucibus sed ligula. Phasellus arcu nunc, elementum eget pellentesque eget, dignissim vel erat. Nullam augue urna, viverra facilisis aliquet eu, dapibus id ex. Vivamus at ipsum congue, imperdiet libero et, pretium velit. Cras vel finibus erat, ac aliquet felis. Sed congue tellus vel justo cursus, id eleifend massa scelerisque. Donec pharetra ipsum sed neque aliquet, non accumsan velit pharetra. Quisque egestas condimentum tellus id blandit. Praesent in sollicitudin turpis. Proin efficitur ut est vitae sodales. Fusce tristique, diam at pulvinar feugiat, magna dolor fringilla arcu, vel semper massa elit vel nunc. Vivamus dapibus congue odio ut varius. Nullam nunc neque, scelerisque at turpis faucibus, elementum hendrerit mi. Fusce tristique dapibus lectus quis dapibus.
+
    float: left;
−
</p>
+
}
−
<p>
+
−
Cras eget faucibus odio. Aenean pharetra elit ut metus tristique, eget blandit lorem tincidunt. Integer quis justo ac dolor accumsan lobortis vitae sit amet enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eros lectus, feugiat sodales fermentum quis, mattis congue velit. Aenean tempor dolor vitae nisl dignissim, sit amet aliquet neque malesuada. Nullam in neque eu tortor egestas tincidunt. Fusce suscipit odio posuere nisl hendrerit volutpat. Curabitur ornare mauris ac magna viverra hendrerit. Nulla facilisi. Quisque venenatis vitae elit consequat posuere. Cras non turpis maximus, volutpat massa dignissim, fermentum augue. Sed venenatis diam eu lacus cursus pulvinar. Maecenas urna turpis, venenatis eget nunc fringilla, dignissim luctus purus. Sed faucibus arcu a lacus condimentum blandit.
+
−
</p>
+
  
−
<h1>Explore our project</h1>
+
.masthead .title h1 > p {
 +
    border-top: 1px solid;
 +
    padding-top: .3em;
 +
}
  
−
<!--Thumbnail grid-->
+
.masthead .intro blockquote {
 +
    position: absolute;
 +
    margin-top: 30px;
 +
}
  
 +
.masthead .intro blockquote p {
 +
    text-align: right !important;
 +
}
  
−
 
+
.masthead .intro blockquote small {
−
</body>
+
    color: #fff;
−
</html>
+
}
−
{{Team:DTU-Denmark/footer}}
+
 
 +
/******************
 +
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;
 +
}
 +
 
 +
.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;
 +
    }
 +
   
 +
    #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 */
 +
#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.ref-sec h2.h2 {
 +
padding-bottom: 0.2em;
 +
    border-bottom-style: none;
 +
    border-bottom-color: #fff;
 +
padding-top: 1em;
 +
border-top-style: solid;
 +
border-bottom-color: #990000;
 +
clear: both;
 +
}
 +
 
 +
div.ref-sec ol {
 +
font-size: 1.1em;
 +
color: #990000;
 +
}
 +
 
 +
div.ref-sec li {
 +
font-size: 1.1em;
 +
}

Revision as of 08:29, 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;

}

  • /

.MYbody p { font-size: 1.5em; }

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;

}

.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: 0.2em; 

   border-bottom-style: none;
   border-bottom-color: #fff;

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

div.ref-sec ol { font-size: 1.1em; color: #990000; }

div.ref-sec li { font-size: 1.1em; }