Difference between revisions of "Team:DTU-Denmark/content-css"

(Created page with " body { overflow-x: hidden; →‎prevent sidescroll on narrow devices: } #MYbody { position: fixed; overflow-...")
 
 
(170 intermediate revisions by 3 users not shown)
Line 1: Line 1:
−
         body {
+
/* Overview
−
            overflow-x: hidden; /*prevent sidescroll on narrow devices*/
+
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
 +
13. Notebook
 +
14. Footer
 +
*/
 +
 
 +
#globalWrapper, #content h5.h5 {
 +
         font-size: 15px !important;
 +
}
 +
 
 +
 
 +
#globalWrapper, #content p {
 +
    font-size: 14px !important;
 +
}
 +
 
 +
#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;
 +
}
 
          
 
          
−
        #MYbody {
+
.masthead .caption > div {
−
            position: fixed;
+
    margin-top: 2em;
−
            overflow-x: hidden;
+
}
−
            overflow-y: scroll;
+
 
−
        }
+
.masthead .caption h1 {
−
       
+
    margin-top: -.0em;
−
        a,
+
    padding-top: -.0em;
−
        a:visited {
+
}
−
            color: #555;
+
 
−
        }
+
.masthead .caption h1,
−
       
+
.masthead .caption p {
−
        a:hover,
+
    color: #fff;
−
        a:focus {
+
}
−
            color: #990000;
+
 
−
        }
+
.masthead .title h1 {
 +
    text-align: left;
 +
    text-transform: uppercase;
 +
}
 +
 
 +
.masthead .title h1,
 +
.masthead .title h1 > p{
 +
    float: left;
 +
}
 +
 
 +
.masthead .title h1 > p {
 +
    border-top: 1px solid;
 +
    padding-top: .3em;
 +
    text-align: justify;
 +
    text-transform: none;
 +
}
 +
 
 +
.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;
 +
    text-align: left:
 +
}
 +
/* grid layout for achievements, notebook, and parts page */
 +
.grid-row {
 +
    clear:both;
 +
}
 +
 
 +
.colLeft ul {
 +
    list-style: none;
 +
    padding:0;
 +
    margin-top:.5em;
 +
    margin-left: 0;
 +
    margin-right: 0;
 +
    margin-bottom: 1em;
 +
   
 +
}
 +
 
 +
.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;
 
          
 
          
−
        /*Masthead settings*/
+
}
−
        .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);
+
−
        }
+
−
       
+
−
        @media screen and (max-width: 767px) {
+
−
            .masthead .caption {
+
−
                width:100%;
+
−
                height: 300px;
+
−
                bottom: .0rem;
+
−
                position: absolute;
+
−
                background:#000;
+
−
                background: -webkit-linear-gradient(left, #000, rgba(0, 0, 0, 0));
+
−
                background: -moz-linear-gradient(left, #000, rgba(0, 0, 0, 0));
+
−
                background: -o-linear-gradient(left, #000, rgba(0, 0, 0, 0));
+
−
                background: linear-gradient(to right, #000, rgba(0, 0, 0, 0));
+
−
            }
+
−
        }
+
−
       
+
−
        .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;
+
−
        }
+
−
       
+
−
        /*Content settings 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;
+
−
        }
+
−
       
+
−
        .colLeft .h2,
+
−
        .colLeft .h3 {
+
−
            padding-bottom: 0.2em;
+
−
           
+
−
            border-bottom-style: solid;
+
−
            border-bottom-color: #990000;   
+
−
        }
+
−
       
+
−
        /*sidebar setting right columns*/
+
−
        @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;
+
−
        }
+
−
       
+
−
        @media screen and (max-width: 900px) {
+
−
            #sidebar,
+
−
            .colRight {
+
−
                display: none;
+
−
            }
+
−
        }
+
−
       
+
−
        #sidebar {
+
−
            margin-left: 0px;
+
−
        }
+
  
 +
#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
 +
****************/
 
          
 
          
−
        #sidebar.nav li a {
+
.student {
−
            color: #999;
+
    margin-bottom: 3em;
−
            font-size: .9em;
+
border-bottom: 1px;
−
            padding-top: 0.3em;
+
border-bottom-style: solid;
−
            padding-bottom: .3em;
+
border-bottom-color: #990000;
−
            background-color: transparent;
+
}
−
            text-transform: uppercase;
+
−
            border-left-width: 3px;
+
−
            border-left-style: solid;
+
−
            border-left-color: #fff;
+
−
           
+
−
        }
+
 
          
 
          
−
        #sidebar.nav li a:active,
+
.student img {
−
        #sidebar.nav li a:hover,
+
    margin-top: 1.5em;
−
        #sidebar.nav li a:focus {
+
}
−
            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;
+
8. NOTEBOOK
−
        }
+
********/
−
       
+
−
        /* Undo the affixed behavior in mobile views */
+
−
        #sidebar.affix {
+
−
            position: static;
+
−
        }
+
  
−
        /* Apply the affixed behavior in large views */
+
/* Timeline */
−
        @media screen and (min-width: 767px) {
+
#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%;
 +
}
  
−
            /* affix-top: The affix-top class should be inline to the page. */
+
#timeline .timeline-item .timeline-icon span.star {
−
            #sidebar.affix-top {
+
    position: relative;
−
                width:200px;
+
    top: 28%;
−
            /* for reference - no additional styling */
+
    left: 28%;
−
            }
+
    color: #888;
−
           
+
    font-size: x-large;
−
            /* 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. */
+
#timeline .timeline-item .timeline-content {
−
            #sidebar.affix-bottom {
+
    width: 45%;
−
                position: absolute;
+
    background: #EFEFEF;
−
                width: 200px;
+
    padding: 20px;
−
            }
+
}
−
           
+
 
−
         }
+
#timeline .timeline-item .timeline-content p{
 +
    font-size: 12px;
 +
}
 +
 
 +
#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: #990000;
 +
    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 - 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 */
 +
#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;
 +
}
 +
 
 +
 
 +
/*******
 +
13. NOTEBOOK
 +
*******/
 +
.notebook h5 {
 +
    color: #999;
 +
    font-weight: 600;
 +
}
 +
.notebook h4 {
 +
    color: #999;
 +
    font-weight: 600;
 +
}
 
          
 
          
−
        /*Fixes dissapear reappear of sidebar when scrolling on iPad */
+
.notebook .grid-row:after {
−
         #sidebar *:not(html) {  
+
    padding-bottom: 1em;
−
            -webkit-transform: translate3d(0, 0, 0);
+
    margin-bottom: 5em;
−
        }
+
}
 +
   
 +
img.lvltwo {
 +
    /*width: 100px;*/
 +
    height: 100px;
 +
}
 +
          
 +
img.lvlthree {
 +
    /*width: 60px;*/
 +
    height: 60px;
 +
}
 +
 
 +
/*********
 +
14. Footer
 +
*********/
 +
 
 +
footer#footer {
 +
    margin-top: 50px;
 +
}

Latest revision as of 02:36, 20 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 13. Notebook 14. Footer

  • /
  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;
   text-transform: uppercase;

}

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

   float: left;

}

.masthead .title h1 > p { 

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

}

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

   text-align: left:

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

   clear:both;

}

.colLeft ul { 

   list-style: none;
   padding:0;
   margin-top:.5em;
   margin-left: 0;
   margin-right: 0;
   margin-bottom: 1em;

}

.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 p{ 
   font-size: 12px;

}

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


/******* 13. NOTEBOOK

              • /

.notebook h5 { 

   color: #999;
   font-weight: 600;

} .notebook h4 { 

   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;

}

/********* 14. Footer

                  • /

footer#footer { 

   margin-top: 50px;

}