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

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">
+
#globalWrapper, #content h5.h5 {
−
<head>
+
        font-size: 15px !important;
−
    <!-- Edited by Isabella 7-9-16 14:30 in sidebar - remove xs-hidden from sidebar -->
+
}
−
    <!-- Edited by Isabella 26-9-16-14:22 fix white space above picture, do not edit the spaces between things this create unintentional space-->
+
−
    <title>Bootstrap Example</title>
+
−
    <meta charset="utf-8">
+
−
    <meta name="viewport" content="width=device-width, initial-scale=1">
+
−
</head>
+
  
  
−
<!-- BODY -->
+
#globalWrapper, #content p {
−
<body data-spy="scroll" data-target="#scrollspy" data-offset="90">
+
    font-size: 14px !important;
−
<div class="MYbody">
+
}
  
−
<div class="masthead">
+
#globalWrapper, #content figcaption.figure-caption {
−
     <div class="container-fluid">
+
     font-size: 13px !important;
−
        <div class="row">
+
    padding-bottom: 1em;
−
            <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) -->
+
    text-align: justify;
 +
}
  
−
                <div class="caption">
+
/*
−
                    <div class="col-md-5 col-sm-5 col-xs-12 title"> <!-- the approximate max number of characters ~ 400 --> <!-- EDIT -->
+
.MathJax span {
−
                        <h1>Safety<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>
+
    border-color:#fff !important;
−
                    </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 -->
+
1. BODY
−
                            <p>Safety is something that happens between your ears, not something you hold in your hands</p>
+
*****/
−
                            <small>Jeff Cooper<cite title="Source Title"></cite></small>
+
body {
−
                        </blockquote>     
+
    overflow-x: hidden; /*prevent sidescroll on narrow devices*/
−
                    </div>
+
}
−
                </div>
+
−
            </div>
+
−
        </div> <!-- /row -->
+
−
        <div class="border"></div>
+
−
    </div>
+
−
</div> <!-- /masthead-->
+
  
−
<br>
+
/*
−
<!-- Content -->
+
.MYbody {
−
<div class="container">
+
    position: fixed;
−
<div class="row"> <!--Must sorround both content and sidebar-->
+
    overflow-x: hidden;
−
     <div class="col-md-9 col-sm-10 colLeft"> <!-- LEFT -->
+
     overflow-y: scroll;
−
        <div><a class="anchor" id="section-1"></a>
+
}
−
        <h2 class="h2">Precautionary work</h2>
+
*/
−
           
+
−
            <blockquote class="visible-xs"> <!-- quote from masterhead duplicate -->
+
−
                <p>Safety is something that happens between your ears, not something you hold in your hands</p>
+
−
                <small>Jeff Cooper<cite title="Source Title"></cite></small>
+
−
            </blockquote>
+
−
           
+
−
<p>To minimize the risks while working on the iGEM project we choose the chassis organism Yarrowia lipolytica which is generally regarded as safe (GRAS) and non-pathogenic to humans. Aside from that we worked with the Escherichia coli DH5 alpha laboratory strain which does not pose a threat to healthy humans.  We also did some growth experiment with  Saccharomyces cerevisiae, another GRAS organism. </p>
+
  
−
<p>In our choice of genetic material we considered the risks the origin organism could pose. We only used genes from safe sources such as Xanthophyllomyces dendrorhous, Renilla reinformis and the human gene for pre-insulin codon optimised with our own codon-optimization tool for Y. lipolityca.</p>
+
a:hover, a:visited, a:link, a:active
 +
{
 +
    text-decoration: none !important;
 +
}
  
−
+
a,
−
+
a:visited {
−
+
    color: #555;
−
        </div> <!-- /overview-->
+
}
 +
 
 +
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;
 +
}
 
          
 
          
−
        <div><a class="anchor" id="section-2"></a>
+
.masthead .caption > div {
−
        <h2 class="h2">Laboratory safety measures</h2>
+
    margin-top: 2em;
−
          <p>All work with genetically modified organisms (GMOs) were performed in class 1 GMO laboratories following the required procedures. This include amongst others wearing laboratory coats, gloves and goggles, disinfecting surfaces, tools etc. with ethanol and autoclaving all vaste, used tools and discarded cultures. We used laf-benches whenever possible to avoid the fire hazard of gas flames when performing sterile work. The Hamilton robot used as fermentation platform was decontaminated before and after each use with UV light.</p>
+
}
  
−
<p>In our work with hazardous substances we took extra safety measures and worked with utmost caution. We used laf-benches and powerful suction in the experiments performed with 2-Mercaptoethanol (BME). SYBR-Safe was always handled with gloves and caution. Containers with liquid nitrogen were only opened and cooling conducted in well ventilated rooms.  
+
.masthead .caption h1 {
−
</p>
+
    margin-top: -.0em;
−
         
+
    padding-top: -.0em;
−
         </div>
+
}
 +
 
 +
.masthead .caption h1,
 +
.masthead .caption p {
 +
    color: #fff;
 +
}
 +
 
 +
.masthead .title h1 {
 +
    text-align: left;
 +
}
 +
 
 +
.masthead .title h1,
 +
.masthead .title h1 > p{
 +
    text-transform: uppercase;
 +
    float: left;
 +
}
 +
 
 +
.masthead .title h1 > p {
 +
    border-top: 1px solid;
 +
    padding-top: .3em;
 +
    text-align: justify
 +
}
 +
 
 +
.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;
 +
}
 +
 
 +
#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;
 +
}
 +
 
 +
.colLeft ul {
 +
    list-style: none;
 +
    padding:0;
 +
    margin:0;
 +
}
 +
 
 +
.colLeft li {
 +
    padding-left: 1em;
 +
    text-indent: -.7em;
 +
}
 +
 
 +
.colLeft ul li:before {
 +
    content: "• ";
 +
    color: #990000;
 +
}
 +
 
 +
 
 +
/*******************
 +
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.nav.affix-top {
 +
    margin-top: 2em;
 +
    padding-top: .5em;
 +
}
 +
 
 +
#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;
 +
    text-align: left;
 +
   
 +
}
 +
 
 +
#sidebar li:before {
 +
    content:none;
 +
}
 +
 
 +
#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;
 +
border-bottom: 1px;
 +
border-bottom-style: solid;
 +
border-bottom-color: #990000;
 +
}
 
          
 
          
−
     </div> <!-- /LEFT -->
+
.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: #888;
 +
    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;
 +
    }
 +
}
 +
 
 
      
 
      
−
     <!-- RIGHT-->
+
/* Labels */
−
     <div class="col-md-3 col-sm-2 colRight" id="scrollspy">
+
#timeline .label-main {
−
        <ul class="nav" id="sidebar">
+
     background-color: #990000;
−
            <li><a href="#section-1">Precautionary work</a></li>
+
    color:#fff;
−
            <li><a href="#section-2">Laboratory safety measures</a></li>
+
    font-size:14px;
−
        </ul>
+
    margin-left:-30px;
−
     </div> <!-- /RIGHT -->
+
     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;
 +
}
  
−
</div> <!-- /.row -->
+
/***********
−
</div> <!-- /CONTENT-->   
+
9. MASTHEAD - mainpages
−
</div> <!-- /BODY-->
+
************/
 +
.masthead-main { /*control height*/
 +
    height: 200px;
 +
}
  
−
</body>
+
.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);
 +
}
  
−
<!--script for functionality of sidebar, DON'T TOUCH!!! -->
+
.masthead-main .thumbnail {
−
<script type="text/javascript" src="https://2016.igem.org/Team:DTU-Denmark/sidebar-js?action=raw&ctype=text/javascript"></script>
+
    height: 200px;
−
</html>
+
    width: 100%;
 +
    background-size: cover;
 +
    background-position: center;
 +
    background-repeat: no-repeat;
 +
    border: 0 none;
 +
    box-shadow: none;
 +
    margin:0;
 +
    padding:0;
 +
}
  
−
<!-- DON'T TOUCH!!! -->
+
.masthead-main h1.title {
−
{{Team:DTU-Denmark/footer}}
+
    text-transform: uppercase;
 +
    text-align: justify;
 +
color: white;
 +
padding-left: 1em;
 +
}
 +
 
 +
/***********
 +
10. MODAL PICTURES
 +
************/
 +
 
 +
 
 +
img.enlarge:hover,
 +
img.enlarge:focus {
 +
cursor: pointer;
 +
    align-content: center;
 +
}
 +
 
 +
/* The Modal (background) */
 +
.modal {
 +
    display: none; /* Hidden by default */
 +
    position: fixed; /* Stay in place */
 +
    z-index: 100; /* 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:hover,
 +
.modal:focus {
 +
cursor: pointer;
 +
}
 +
 
 +
/* Modal Content (Image) */
 +
.modal-content {
 +
    margin: auto;
 +
    display: block;
 +
    width: 80%;
 +
    max-width: 1200px;
 +
}
 +
 
 +
.modal-content:hover,
 +
.modal-content:focus {
 +
cursor: default;
 +
}
 +
 
 +
/* Caption of Modal Image (Image Text) - Same Width as the Image */
 +
#caption {
 +
    margin: auto;
 +
    display: block;
 +
    width: 100%;
 +
    max-width: 1200px;
 +
    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;
 +
    z-index: 100;
 +
}
 +
 
 +
.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;
 +
    font-weight: 600;
 +
}
 +
 
 +
.panel h4.panel-title:hover,
 +
.panel h4.panel-title:focus {
 +
font-weight: 600;
 +
text-decoration: none;
 +
}
 +
 
 +
/*********
 +
12. REFERENCES
 +
*********/
 +
 
 +
div#ref-sec {
 +
        padding-bottom: 40px;
 +
}
 +
 
 +
div#ref-sec h2.h2 {
 +
padding-bottom: 0em;
 +
    border-bottom-style: none;
 +
padding-top: .2em;
 +
margin-top: 1.2em;
 +
border-top-style: solid;
 +
border-top-color: #990000;
 +
clear: both;
 +
}
 +
 
 +
div#ref-sec ol li:before {
 +
font-size: 12px !important;
 +
color: #990000;
 +
}
 +
 
 +
div#ref-sec ol li {
 +
font-size: 12px !important;
 +
color: black;
 +
}
 +
 
 +
div#ref-sec ol {
 +
list-style: none;
 +
margin-left: 0px;
 +
}
 +
div#ref-sec ol li {
 +
counter-increment: item;
 +
margin-bottom: 2px;
 +
}
 +
div#ref-sec ol li:before {
 +
margin-right: 10px;
 +
content: counter(item)".";
 +
color: #990000;
 +
width: 1.2em;
 +
text-align: center;
 +
display: inline-block;
 +
}
 +
 
 +
/*******
 +
13. NOTEBOOK
 +
*******/
 +
.notebook h5 {
 +
    color: #999;
 +
    font-weight: 600;
 +
}
 +
       
 +
.notebook .grid-row:after {
 +
    padding-bottom: 1em;
 +
    margin-bottom: 5em;
 +
}
 +
   
 +
img.lvltwo {
 +
    /*width: 100px;*/
 +
    height: 100px;
 +
}
 +
       
 +
img.lvlthree {
 +
    /*width: 60px;*/
 +
    height: 60px;
 +
}

Revision as of 11:37, 19 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. globalWrapper, #content h5.h5 {
       font-size: 15px !important;

}


  1. globalWrapper, #content p {
   font-size: 14px !important;

}

  1. globalWrapper, #content figcaption.figure-caption {
   font-size: 13px !important;
   padding-bottom: 1em;
   text-align: justify;

}

/* .MathJax span { 

   border-color:#fff !important;

}

  • /

/**** 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 { 

   text-align: left;

}

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

   text-transform: uppercase;
   float: left;

}

.masthead .title h1 > p { 

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

}

.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;

}

.colLeft ul { 

   list-style: none;
   padding:0;
   margin:0;

}

.colLeft li { 

   padding-left: 1em; 
   text-indent: -.7em;

}

.colLeft ul li:before { 

   content: "• ";
   color: #990000;

}


/******************* 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.nav.affix-top {
   margin-top: 2em;
   padding-top: .5em;

}

  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;
   text-align: left;

}

  1. sidebar li:before {
   content:none;

}

  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;

border-bottom: 1px; border-bottom-style: solid; border-bottom-color: #990000; }

.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: #888;
   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: #990000;
   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 - mainpages

                        • /

.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; padding-left: 1em; }

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

                        • /


img.enlarge:hover, img.enlarge:focus { cursor: pointer; 

   align-content: center;

}

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

   display: none; /* Hidden by default */
   position: fixed; /* Stay in place */
   z-index: 100; /* 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:hover, .modal:focus { cursor: pointer; }

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

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

}

.modal-content:hover, .modal-content:focus { cursor: default; }

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

  1. caption {
   margin: auto;
   display: block;
   width: 100%;
   max-width: 1200px;
   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;
   z-index: 100;

}

.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; 

   font-weight: 600;

}

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

/********* 12. REFERENCES

                  • /

div#ref-sec { 

       padding-bottom: 40px;

}

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

   border-bottom-style: none;

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

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

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

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

div#ref-sec ol li {

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

}
div#ref-sec ol li:before {

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

}

/******* 13. NOTEBOOK

              • /

.notebook h5 { 

   color: #999;
   font-weight: 600;

}

.notebook .grid-row:after { 

   padding-bottom: 1em;
   margin-bottom: 5em;

}

img.lvltwo { 

   /*width: 100px;*/
   height: 100px;

}

img.lvlthree { 

   /*width: 60px;*/
   height: 60px;

}