Difference between revisions of "Template:Copenhagen-Header"

 
(296 intermediate revisions by 2 users not shown)
Line 12: Line 12:
 
     <!-- Theme CSS -->
 
     <!-- Theme CSS -->
 
     <style>
 
     <style>
a:link {
+
 
     color: #1d9b6c;  
+
  /***************************************************** DEFAULT WIKI SETTINGS  ****************************************************/
     background-color: transparent;  
+
/* Clear the default wiki settings */
 +
#home_logo, #sideMenu { display:none; }
 +
#sideMenu, #top_title, .patrollink  {display:none;}
 +
#content { width:100%; padding:0px;  margin-top:-7px; margin-left:0px;}
 +
body {background-color:white; }
 +
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
 
 +
 
 +
  /***************************************************** CUSTOM WIKI SETTINGS  ****************************************************/
 +
 
 +
#bodyContent a[href ^="https://"], .link-https {
 +
    padding-right: 16px;
 +
     color: white; !important!
 +
}
 +
 
 +
a:hover {
 +
     color: white;
 +
    text-decoration: underline;
 +
}
 +
 
 +
a {
 +
    color: white;
 
     text-decoration: none;
 
     text-decoration: none;
 +
}
 +
 +
#bodyContent a[href ^="http://"], #bodyContent a[href ^="gopher://"] {
 +
    text-decoration: underline;
 +
}
 +
 +
#bodyContent a[href ^="https://"], .link-https {
 +
    padding-right: 16px;
 +
    color: white;
 
}
 
}
  
 
a:visited {
 
a:visited {
     color: #1d9b6c;
+
     color: white;
    background-color: transparent;
+
text-decoration: underline;
    text-decoration: none;
+
 
}
 
}
    #bars_item {display: none; }
 
    #home_logo, #sideMenu { display:none; }
 
    #sideMenu, #top_title, .patrollink  {display:none;}
 
    #HQ_page p {
 
      text-align: center;
 
      font-family: Tahoma, Geneva, sans-serif;
 
      font-size: 17px;
 
    }
 
    #page-top { height: 100% ; }
 
    .mw-content-ltr { height: 100%; }
 
    #bodyContent { height: 100%; }
 
    #HQ_page {
 
      height: 100%;
 
    }
 
    #HQ_page h1 {
 
      font-size: 100px;
 
      font-family: Tahoma, Geneva, sans-serif;
 
    }
 
    #content {
 
      width:100%;
 
      height: 100%;
 
      padding: 0px; 
 
      margin-top:-30px;
 
      margin-left:0px;
 
      background-color: black;
 
      color: white;
 
      font-family: Tahoma, Geneva, sans-serif;
 
    }
 
    #globalWrapper{ height: 100%; }
 
    body { background-color: black; height: 100%; }
 
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 
  
    #top_menu_14 {
+
b, strong {
      height: 12px;
+
     font-weight: 900;
      color: white;
+
font-size: 16px;  
      background: black;
+
}
     }
+
    #top_menu_under {
+
      height: 12px;
+
      background: black;
+
    }
+
  
    #top_menu_inside {
+
#HQ_page h1, h2, h3, h4, h5 {
      border-left: 0px;
+
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      border-right: 0px;
+
}
      width: 100%;
+
    }
+
  
  li.has_submenu a {
+
#HQ_page li {
    color: grey;
+
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
  }
+
    text-align: justify;
     html {
+
    font-weight: 300;
      width: 100%;
+
font-size: 15px;  
      height: 100%;
+
}
    }
+
 
    h1,
+
#HQ_page p {
    h2,
+
     font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    h3,
+
    text-align: justify;
    h4,
+
    font-weight: 300;
    h5,
+
font-size: 15px;
    h6 {
+
}
      margin: 0 0 35px;
+
 
      text-transform: uppercase;
+
body,
      font-family: Tahoma, Geneva, sans-serif;
+
html {
      font-weight: 700;
+
    width: 100%;
      letter-spacing: 1px;
+
    height: 100%;
 +
}
 +
 
 +
body,
 +
h1,
 +
h2,
 +
h3,
 +
h4,
 +
h5,
 +
h6{
 +
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 +
    font-weight: 800;
 +
color: white;
 +
}
 +
 
 +
 
 +
#HQ_page p {
 +
color: white;
 +
}
 +
 
 +
element.style ul{
 +
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 +
    font-weight: 700;
 +
color: white;
 +
}
 +
 
 +
.topnav {
 +
padding-top: 15px;
 +
    font-size: 14px;
 +
    min-height:60px;
 +
background-color: #141414;
 +
}
 +
 
 +
.lead {
 +
    font-size: 20px;
 +
    font-weight: 400;
 +
}
 +
 
 +
.intro-header {
 +
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
 +
    padding-bottom: 50px;
 +
    text-align: center;
 +
    color: #141414;
 +
    background: url(../img/intro-bg.jpg) no-repeat center center;
 +
    background-size: cover;
 +
}
 +
 
 +
.intro-header2 {
 +
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
 +
    padding-bottom: 50px;
 +
    text-align: center;
 +
    color: #141414;
 +
    background: url(../img/intro2-bg.jpg) no-repeat center center;
 +
    background-size: cover;
 +
}
 +
 
 +
.intro-header3 {
 +
padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
 +
    padding-bottom: 50px;
 +
    text-align: center;
 +
    color: #083F54;
 +
    background-image: url("https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png");
 +
    background-repeat;
 +
}
 +
 
 +
.intro-header4 {
 +
    padding-top: 50px;
 +
    padding-bottom: 50px;
 +
    /* text-align: center; */
 +
    color: white;
 +
    background-image: url(https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png);
 +
    font-family: Helvetica;
 +
    font-weight: 200;
 +
    font-size: 12px;
 +
}
 +
 
 +
.intro-message {
 +
    position: relative;
 +
padding-top: 20%;
 +
    padding-bottom: 20%;
 +
}
 +
 
 +
.intro-message2 {
 +
    position: relative;
 +
color: black;
 +
}
 +
 
 +
.intro-message > h1 {
 +
    margin: 0;
 +
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
 +
    font-size: 5em;
 +
}
 +
 
 +
.intro-divider {
 +
    width: 400px;
 +
    border-top: 1px solid #fff1cd;
 +
    border-bottom: 1px solid rgba(0,0,0,0.2);
 +
}
 +
 
 +
.intro-message > h3 {
 +
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
 +
}
 +
 
 +
@media(max-width:767px) {
 +
    .intro-message {
 +
        padding-bottom: 15%;
 
     }
 
     }
     p {
+
 
      margin: 0 0 25px;
+
     .intro-message > h1 {
      font-size: 18px;
+
         font-size: 3em;
      line-height: 1.5;
+
    }
+
    @media (min-width: 768px) {
+
      p {
+
        margin: 0 0 35px;
+
         font-size: 20px;
+
        line-height: 1.6;
+
      }
+
    }
+
    a {
+
      color: #42DCA3;
+
      -webkit-transition: all 0.2s ease-in-out;
+
      -moz-transition: all 0.2s ease-in-out;
+
      transition: all 0.2s ease-in-out;
+
    }
+
    a:hover,
+
    a:focus {
+
      text-decoration: none;
+
      color: #1d9b6c;
+
    }
+
    .light {
+
      font-weight: 400;
+
    }
+
    .navbar-custom {
+
      margin-top:12px;
+
      margin-bottom: 0;
+
      border-bottom: 0px solid rgba(255, 255, 255, 0.3);
+
      text-transform: uppercase;
+
      font-family: Tahoma, Geneva, sans-serif;
+
      background-color: black;
+
    }
+
    .navbar-custom .navbar-toggle {
+
      color: white;
+
      background-color: rgba(255, 255, 255, 0.2);
+
      font-size: 12px;
+
    }
+
    .navbar-custom .navbar-toggle:focus,
+
    .navbar-custom .navbar-toggle:active {
+
      outline: none;
+
    }
+
    .navbar-custom .navbar-brand {
+
      font-weight: 700;
+
    }
+
    .navbar-custom .navbar-brand img {
+
      height: 40px;
+
    }
+
    .navbar-custom .navbar-brand:focus {
+
      outline: none;
+
    }
+
    .navbar-custom a {
+
      color: black;
+
    }
+
    .navbar-custom .nav li a {
+
      -webkit-transition: background 0.3s ease-in-out;
+
      -moz-transition: background 0.3s ease-in-out;
+
      transition: background 0.3s ease-in-out;
+
    }
+
    .navbar-custom .nav li a:hover {
+
      color: rgba(255, 255, 255, 0.8);
+
      outline: none;
+
      background-color: transparent;
+
    }
+
    .navbar-custom .nav li a:focus,
+
    .navbar-custom .nav li a:active {
+
      outline: none;
+
      background-color: transparent;
+
    }
+
    .navbar-custom .nav li.active {
+
      outline: none;
+
    }
+
    .navbar-custom .nav li.active a {
+
      background-color: rgba(255, 255, 255, 0.3);
+
    }
+
    .navbar-custom .nav li.active a:hover {
+
      color: white;
+
 
     }
 
     }
  
     @media (min-width: 768px) {
+
     ul.intro-social-buttons > li {
      .navbar-custom {
+
         display: block;
         padding: 20px 0;
+
         margin-bottom: 20px;
         border-bottom: none;
+
        letter-spacing: 1px;
+
        background: transparent;
+
        -webkit-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
+
        -moz-transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
+
        transition: background 0.5s ease-in-out, padding 0.5s ease-in-out;
+
      }
+
}
+
    @media (min-width: 768px) {
+
      .myintro {
+
        height: 100%;
+
 
         padding: 0;
 
         padding: 0;
      }
 
      .myintro .myintro-body .brand-heading {
 
        font-size: 100px;
 
      }
 
      .myintro .myintro-body .myintro-text {
 
        font-size: 26px;
 
      }
 
 
     }
 
     }
    .btn-circle {
+
 
      width: 70px;
+
     ul.intro-social-buttons > li:last-child {
      height: 70px;
+
         margin-bottom: 0;
      margin-top: 15px;
+
      padding: 7px 16px;
+
      border: 2px solid black;
+
      border-radius: 100% !important;
+
      font-size: 40px;
+
      color: black;
+
      background: transparent;
+
      -webkit-transition: background 0.3s ease-in-out;
+
      -moz-transition: background 0.3s ease-in-out;
+
      transition: background 0.3s ease-in-out;
+
    }
+
    #downarrow img {
+
      border: 2px solid black;
+
      padding: 10px 10px;
+
      border-radius: 100% !important;
+
      height: 55px;
+
      display: block;
+
      margin: auto;
+
    }
+
     .btn-circle:hover,
+
    .btn-circle:focus {
+
      outline: none;
+
      color: white;
+
      background: rgba(255, 255, 255, 0.1);
+
    }
+
    .btn-circle i.animated {
+
      -webkit-transition-property: -webkit-transform;
+
      -webkit-transition-duration: 1s;
+
      -moz-transition-property: -moz-transform;
+
      -moz-transition-duration: 1s;
+
    }
+
    .btn-circle:hover i.animated {
+
      -webkit-animation-name: pulse;
+
      -moz-animation-name: pulse;
+
      -webkit-animation-duration: 1.5s;
+
      -moz-animation-duration: 1.5s;
+
      -webkit-animation-iteration-count: infinite;
+
      -moz-animation-iteration-count: infinite;
+
      -webkit-animation-timing-function: linear;
+
      -moz-animation-timing-function: linear;
+
    }
+
    @-webkit-keyframes pulse {
+
      0% {
+
         -webkit-transform: scale(1);
+
        transform: scale(1);
+
      }
+
      50% {
+
        -webkit-transform: scale(1.2);
+
        transform: scale(1.2);
+
      }
+
      100% {
+
        -webkit-transform: scale(1);
+
        transform: scale(1);
+
      }
+
    }
+
    @-moz-keyframes pulse {
+
      0% {
+
        -moz-transform: scale(1);
+
        transform: scale(1);
+
      }
+
      50% {
+
        -moz-transform: scale(1.2);
+
        transform: scale(1.2);
+
      }
+
      100% {
+
        -moz-transform: scale(1);
+
        transform: scale(1);
+
      }
+
    }
+
    .content-section {
+
      padding-top: 250px;
+
      padding-bottom: 250px;
+
      height: auto;
+
      min-height: 100% !important;
+
 
     }
 
     }
  
     #map {
+
     .intro-divider {
      width: 100%;
+
         width: 100%;
      height: 200px;
+
      margin-top: 100px;
+
    }
+
    @media (min-width: 767px) {
+
      .content-section {
+
         height: auto;
+
        padding-top: 250px;
+
        padding-bottom: 250px;
+
        min-height: 100% !mportant;
+
      }
+
    }
+
    .btn {
+
      text-transform: uppercase;
+
      font-family: Tahoma, Geneva, sans-serif;
+
      font-weight: 400;
+
      -webkit-transition: all 0.3s ease-in-out;
+
      -moz-transition: all 0.3s ease-in-out;
+
      transition: all 0.3s ease-in-out;
+
      border-radius: 0;
+
    }
+
    .btn-default {
+
      border: 1px solid #42DCA3;
+
      color: #42DCA3;
+
      background-color: transparent;
+
    }
+
    .btn-default:hover,
+
    .btn-default:focus {
+
      border: 1px solid #42DCA3;
+
      outline: none;
+
      color: black;
+
      background-color: #42DCA3;
+
 
     }
 
     }
 +
}
 +
 +
.network-name {
 +
    text-transform: uppercase;
 +
    font-size: 14px;
 +
    font-weight: 400;
 +
    letter-spacing: 2px;
 +
}
 +
 +
.content-section-a {
 +
border: url("https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png");
 +
    padding: 30px 0;
 +
    background-color: #083F54;
 +
margin: 30px;
 +
}
 +
 +
.content-section-b {
 +
border: url("https://static.igem.org/mediawiki/2017/3/3e/UCopenhagen_Wallpaper1_narrow.png");
 +
    padding: 30px 0;
 +
background-color: #055A3A;
 +
margin: 30px;
 +
}
 +
 +
.section-heading {
 +
    margin-bottom: 30px;
 +
}
 +
 +
.section-heading-spacer {
 +
    float: left;
 +
    width: 200px;
 +
    border-top: 3px solid #fff1cd;
 +
}
 +
 +
.section-heading-spacer2 {
 +
    float: center;
 +
    width: 200px;
 +
    border-top: 3px solid #fff1cd;
 +
}
 +
 +
.banner {
 +
    padding: 100px 0;
 +
    color: #f8f8f8;
 +
    background: url(../img/intro2-bg.jpg) no-repeat center center;
 +
    background-size: cover;
 +
}
 +
 +
.banner h2 {
 +
    margin: 0;
 +
    text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
 +
    font-size: 3em;
 +
}
 +
 +
.banner ul {
 +
    margin-bottom: 0;
 +
}
 +
 +
.banner-social-buttons {
 +
    float: right;
 +
    margin-top: 0;
 +
}
 +
 +
@media(max-width:1199px) {
 
     ul.banner-social-buttons {
 
     ul.banner-social-buttons {
      margin-top: 0;
+
        float: left;
 +
        margin-top: 35px;
 
     }
 
     }
    @media (max-width: 1199px) {
+
}
      ul.banner-social-buttons {
+
 
         margin-top: 15px;
+
@media(max-width:767px) {
      }
+
    .banner h2 {
 +
         margin: 0;
 +
        text-shadow: 2px 2px 3px rgba(0,0,0,0.6);
 +
        font-size: 3em;
 
     }
 
     }
     @media (max-width: 767px) {
+
 
      ul.banner-social-buttons li {
+
     ul.banner-social-buttons > li {
 
         display: block;
 
         display: block;
 
         margin-bottom: 20px;
 
         margin-bottom: 20px;
 
         padding: 0;
 
         padding: 0;
      }
+
    }
      ul.banner-social-buttons li:last-child {
+
 
 +
    ul.banner-social-buttons > li:last-child {
 
         margin-bottom: 0;
 
         margin-bottom: 0;
      }
 
    }
 
    footer {
 
      padding: 50px 0;
 
    }
 
    footer p {
 
      margin: 0;
 
    }
 
    ::-moz-selection {
 
      text-shadow: none;
 
      background: #fcfcfc;
 
      background: rgba(255, 255, 255, 0.2);
 
    }
 
    ::selection {
 
      text-shadow: none;
 
      background: #fcfcfc;
 
      background: rgba(255, 255, 255, 0.2);
 
    }
 
    img::selection {
 
      background: transparent;
 
    }
 
    img::-moz-selection {
 
      background: transparent;
 
    }
 
    body {
 
      webkit-tap-highlight-color: rgba(255, 255, 255, 0.2);
 
 
     }
 
     }
 +
}
  
 +
footer {
 +
    padding: 50px 0;
 +
    background-color: #f8f8f8;
 +
}
  
 +
p.copyright {
 +
    margin: 15px 0 0;
 +
}
  
 +
/* Dropdown Button */
 +
.dropbtn {
 +
    background-color: #141414;
 +
    color: white;
 +
    padding: 16px;
 +
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 +
    font-size: 14px;
 +
    border: none;
 +
    cursor: pointer;
 +
}
  
 +
/* The container <div> - needed to position the dropdown content */
 +
.dropdown {
 +
    position: relative;
 +
    display: inline-block;
 +
}
  
 +
/* Dropdown Content (Hidden by Default) */
 +
.dropdown-content {
 +
    display: none;
 +
    position: absolute;
 +
    background-color: #779DAB;
 +
    min-width: 160px;
 +
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
 +
    z-index: 1;
 +
}
  
 +
/* Links inside the dropdown */
 +
.dropdown-content a {
 +
    color: white;
 +
    padding: 12px 16px;
 +
    text-decoration: none;
 +
    display: block;
 +
}
  
 +
/* Change color of dropdown links on hover */
 +
.dropdown-content a:hover {background-color: #B7CBD3}
  
 +
/* Show the dropdown menu on hover */
 +
.dropdown:hover .dropdown-content {
 +
    display: block;
 +
}
  
 +
/* Change the background color of the dropdown button when the dropdown content is shown */
 +
.dropdown:hover .dropbtn {
 +
    background-color: #083F54;
 +
    color: white;
 +
}
 +
 +
.home {
 +
    padding-top: 50px; /* If you're making other pages, make sure there is 50px of padding to make sure the navbar doesn't overlap content! */
 +
    padding-bottom: 50px;
 +
    text-align: center;
 +
    color: #141414;
 +
}
 +
 +
#df-header {
 +
    background: transparent!important;
 +
    overflow: hidden;
 +
}
 +
 +
#df-bg {
 +
    background: transparent;
 +
}
 +
 +
#bg-video {
 +
    background: url('https://static.igem.org/mediawiki/2017/d/dc/UCopenhagen_bg.mp4') no-repeat;
 +
    background-size: initial;
 +
    position: fixed;
 +
    z-index: -1;
 +
    left: 50%;
 +
    max-width: 100%;
 +
    width: auto;
 +
    height: auto;
 +
    z-index: -100;
 +
    transform: translateX(-50%)
 +
}
 +
 +
.thumbnails img {
 +
height: 80px;
 +
border: 4px solid #555;
 +
padding: 1px;
 +
margin: 0 10px 10px 0;
 +
}
 +
 +
.thumbnails img:hover {
 +
border: 4px solid #00ccff;
 +
cursor:pointer;
 +
}
 +
 +
.map-responsive{
 +
    margin-top: 50px;
 +
    overflow:hidden;
 +
    padding-bottom:56.25%;
 +
    position:relative;
 +
    height:450px;
 +
}
 +
 +
.map-responsive iframe{
 +
    left:0;
 +
    top:0;
 +
    height:100%;
 +
    width:100%;
 +
    position:absolute;
 +
}
 +
 +
.logo-navigation{
 +
    float: right;
 +
margin: -10px 5px;   
 +
}
 +
 +
.img-responsive{
 +
    align-content: center;
 +
    width:600px;
 +
    height:300px;
 +
}
 +
 +
.img-responsive1{
 +
align-content: center;
 +
    width:300px;
 +
    height:495px;
 +
}
 +
 +
.img-responsive2{
 +
align-content: center;
 +
  width:400px;
 +
    height:400px;
 +
transform: rotate(90deg);
 +
}
 +
 +
.img-responsive3{
 +
    width:500px;
 +
    height:350px;
 +
}
 +
 +
.img-responsive4{
 +
    width:325px;
 +
    height:490px;
 +
}
 +
 +
.img-responsive5{
 +
    width:350px;
 +
    height:400px;
 +
 +
 +
.img-responsive6{
 +
    width:400px;
 +
    height:325px;
 +
}
 +
 +
.img-responsive7{
 +
    width:100% !important;
 +
}
 +
 +
.arrow-wrap {
 +
  position:absolute;
 +
  z-index:1;
 +
  left:50%;
 +
  top:-5em;
 +
  margin-left:-5em;
 +
  background:#111;
 +
  width:10em;
 +
  height:10em;
 +
  padding:4em 2em;
 +
  border-radius:50%;
 +
  font-size:0.5em;
 +
  display:block;
 +
}
 +
 +
.arrow {
 +
  float:left;
 +
  position:relative;
 +
  width: 0px;
 +
  height: 0px;
 +
  border-style: solid;
 +
  border-width: 3em 3em 0 3em;
 +
  border-color: white transparent transparent transparent;
 +
  -webkit-transform:rotate(360deg)
 +
}
 +
 +
.arrow:after {
 +
  content:'';
 +
  position:absolute;
 +
  top:-3.2em;
 +
  left:-3em;
 +
  width: 0px;
 +
  height: 0px;
 +
  border-style: solid;
 +
  border-width: 3em 3em 0 3em;
 +
  border-color: #111 transparent transparent transparent;
 +
  -webkit-transform:rotate(360deg)
 +
}
  
    .scrollnav-custom {
+
  .scrollnav-custom {
 
       margin-bottom: 0;
 
       margin-bottom: 0;
 
       border-bottom: 0px solid rgba(255, 255, 255, 0.3);
 
       border-bottom: 0px solid rgba(255, 255, 255, 0.3);
       font-family: Tahoma, Geneva, sans-serif
+
       font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 
       background-color: black;
 
       background-color: black;
 
     }
 
     }
Line 375: Line 508:
 
     }
 
     }
 
     .scrollnav-custom .scrollnav-brand {
 
     .scrollnav-custom .scrollnav-brand {
       font-weight: 700;
+
       font-weight: 800;
 
     }
 
     }
 
     .scrollnav-custom .scrollnav-brand img {
 
     .scrollnav-custom .scrollnav-brand img {
       height: 40px;
+
       height: 30px;
 
     }
 
     }
 
     .scrollnav-custom .scrollnav-brand:focus {
 
     .scrollnav-custom .scrollnav-brand:focus {
Line 410: Line 543:
 
       color: white;
 
       color: white;
 
     }
 
     }
 +
 
     @media (min-width: 768px) {
 
     @media (min-width: 768px) {
 
       .scrollnav-custom {
 
       .scrollnav-custom {
 
         padding: 0;
 
         padding: 0;
        letter-spacing: 1px;
+
         background: #141414;
         background: black;
+
         border-bottom: 0px solid rgba(255, 255, 255, 0.3);
         border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
 +
    min-height:30px;
 +
 
 
       }
 
       }
 
     }
 
     }
    .navbar-brand img {
+
 
      height: 100%;
+
/* Three columns side by side */
     }
+
.column {
     .sponsor-section {
+
    float: left;
      background-color: white;
+
    width: 33.3%;
      color: black;
+
     margin-bottom: 16px;
 +
    padding: 0 8px;
 +
}
 +
 
 +
/* Display the columns below each other instead of side by side on small screens */
 +
@media (max-width: 650px) {
 +
     .column {
 +
        width: 100%;
 +
        display: block;
 +
background-color: white;
 
     }
 
     }
 +
}
  
 +
/* Add some shadows to create a card effect */
 +
.card {
 +
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
 +
    background-color: white;
 +
}
  
 +
/* Some left and right padding inside the container */
 +
.container{
 +
    padding: 0 16px;
 +
}
  
 +
/* Clear floats */
 +
.container::after, .row::after {
 +
    content: "";
 +
    clear: both;
 +
    display: table;
 +
}
  
 +
.title {
 +
    color: #838383;
 +
}
  
    .dropdown-li {
+
.button {
    padding-top: 11px;
+
    border: none;
    padding-bottom: 15px;
+
    outline: 0;
            margin-left: 10px;
+
    display: inline-block;
            margin-right: 10px;
+
    padding: 8px;
     }
+
    color: black;
 +
    background-color: #141414;
 +
    text-align: center;
 +
     cursor: pointer;
 +
    width: 33.3%;
 +
}
  
    .navbar-custom .nav li a:hover{
+
.button:hover {
      cursor: pointer;
+
    background-color: #555;
    }
+
}
  
    .navbar-right .dropdown-menu {
+
#HQ_page .button {
      right: auto;
+
    min-width: 25%;
      position-left: 0px;
+
    max-width: 28%;
      position-right: 0px;
+
    border: 3px solid #f58631;
      margin-left: 0px;
+
    color: #f58631;
     }
+
    background-color: #FFF;
 +
    height: 30px;
 +
    font-size: 15px;
 +
    text-align: center;
 +
    border-radius: 5p;
 +
    padding: 0px 5px 0px 5px;
 +
    margin: auto;
 +
    -webkit-transition: background 0.2s linear;
 +
     -moz-transition: background 0.2s linear;
 +
    -ms-transition: background 0.2s linear;
 +
    -o-transition: background 0.2s linear;
 +
    transition: background 0.2s linear;
 +
}
  
    .dropdown-menu {
+
.team-img {
      background-color: black;
+
width:400px;
      border-radius: 0px;
+
    height:400px;
    }
+
}
  
     .dropdown-a {
+
#globalWrapper {
      color: white !important;
+
     position: relative;
     }
+
font-size: 100%;
 +
    width: 100%;
 +
    margin: 0;
 +
    padding: 0;
 +
    padding-bottom: 10px;
 +
}
 +
 
 +
.navbar-default {
 +
    background-color: #141414;
 +
    border-color: #141414;
 +
}
 +
 
 +
#bodyContent a[href ^="https://"], .link-https {
 +
    padding-right: 16px;
 +
background: white;
 +
    color: #333;
 +
}
 +
 
 +
.carousel-inner>.item>a>img, .carousel-inner>.item>img, .img-responsive, .thumbnail a>img, .thumbnail>img {
 +
    display: block;
 +
    max-width: 100%;
 +
    height: auto;
 +
}
 +
 
 +
#HQ_page td {
 +
    padding: 10px;
 +
    border: 1px solid #ccc;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    background-color: white;
 +
    font-family: Helvetica;
 +
    font-weight: 300;
 +
}
 +
 
 +
#HQ_page th {
 +
    background-color: #f2f2f2;
 +
    padding: 10px;
 +
    color: black;
 +
    border: 1px solid #ccc;
 +
    border-collapse: collapse;
 +
    vertical-align: text-top;
 +
    font-family: Helvetica;
 +
    font-weight: 501;
 +
}
 +
 
 +
button, input, select, textarea {
 +
    font-family: Helvetica;
 +
    font-size: inherit;
 +
    background-color: black;
 +
    line-height: inherit;
 +
}
 +
 
 +
caption {
 +
    padding-top: 8px;
 +
    padding-bottom: 8px;
 +
    color: white;
 +
    text-align: left;
 +
}
 +
 
 +
/** LIGHTBOX MARKUP **/
 +
 
 +
.lightbox {
 +
/** Default lightbox to hidden */
 +
display: none;
 +
 
 +
/** Position and style */
 +
position: fixed;
 +
z-index: 999;
 +
width: 100%;
 +
height: 100%;
 +
text-align: center;
 +
top: 0;
 +
left: 0;
 +
background: rgba(0,0,0,0.8);
 +
}
 +
 
 +
.lightbox img {
 +
/** Pad the lightbox image */
 +
max-width: 90%;
 +
max-height: 80%;
 +
margin-top: 5%;
 +
}
 +
 
 +
.lightbox:target {
 +
/** Remove default browser outline */
 +
outline: none;
 +
 
 +
/** Unhide lightbox **/
 +
display: block;
 +
}
 +
 
 +
.fblogo {
 +
    display: inline-block;
 +
    margin-left: auto;
 +
    margin-right: auto;
 +
    height: 200px;
 +
}
 +
 
 +
#images{
 +
    text-align:center;
 +
}
 +
 
 +
.nav-pills>li.active>a, .nav-pills>li.active>a:focus, .nav-pills>li.active>a:hover {
 +
    color: #fff;
 +
    background-color: #083F54;
 +
}
 +
 
 +
#sidebar {
 +
  width: 190px;
 +
  position: fixed;
 +
  margin-right: 410px;
 +
}
 +
 
 +
      .ui-widget {
 +
            border: 1px solid black;
 +
 
 +
        }
 +
 
 +
        .ui-tooltip, .arrow:after {
 +
            background: white;
 +
            border: 1px solid white;
 +
        }
 +
        .ui-tooltip {
 +
            padding: 10px 20px;
 +
            color: black;
 +
            border-radius: 2px;
 +
            font: bold 14px "Helvetica Neue", Sans-Serif;
 +
            text-transform: uppercase;
 +
            box-shadow: 0 0 1px black;
 +
            border: 1px solid white !important;
 +
        }
 +
        .arrow {
 +
            width: 70px;
 +
            height: 16px;
 +
            overflow: hidden;
 +
            position: absolute;
 +
            left: 50%;
 +
            margin-left: -35px;
 +
            bottom: -17px;
 +
        }
 +
        .arrow.top {
 +
            top: -17px;
 +
            bottom: auto;
 +
        }
 +
        .arrow.left {
 +
            left: 20%;
 +
        }
 +
        .arrow:after {
 +
            content: "";
 +
            position: absolute;
 +
            left: 20px;
 +
            top: -20px;
 +
            width: 25px;
 +
            height: 25px;
 +
            box-shadow: 0 0 1px black;
 +
            -webkit-transform: rotate(45deg);
 +
            -moz-transform: rotate(45deg);
 +
            -ms-transform: rotate(45deg);
 +
            -o-transform: rotate(45deg);
 +
            transform: rotate(45deg);
 +
        }
 +
        .arrow.top:after {
 +
            bottom: -20px;
 +
            top: auto;
 +
        }
 +
        .hidden {
 +
            visibility: hidden;
 +
        }
 +
 
 +
        .fireTip {
 +
            margin-left: 0px;
 +
        }
 +
 
 +
.cart {
 +
     overflow:hidden;
 +
    padding:10px 3px;
 +
    background: yellow;
 +
}
  
    .nav .open > a {
 
      background: transparent;
 
    }
 
 
     </style>
 
     </style>
  
 +
<!-- Theme JavaScript -->
 +
 +
<script>
 +
// jQuery to collapse the navbar on scroll
 +
function collapseNavbar() {
 +
    if ($(".navbar").offset().top > 50) {
 +
        $(".navbar-fixed-top").addClass("top-nav-collapse");
 +
        $(".navbar-custom a").css("color", "white");
 +
        $(".navbar-fixed-bottom").show();
 +
    } else {
 +
        $(".navbar-fixed-top").removeClass("top-nav-collapse");
 +
        $(".navbar-custom a").css("color", "black");
 +
        $(".navbar-fixed-bottom").hide();
 +
    }
 +
}
 +
 +
$(window).scroll(collapseNavbar);
 +
$(document).ready(collapseNavbar);
 +
 +
// jQuery for page scrolling feature - requires jQuery Easing plugin
 +
$(function() {
 +
    $('a.page-scroll').bind('click', function(event) {
 +
        var $anchor = $(this);
 +
        $('html, body').stop().animate({
 +
            scrollTop: $($anchor.attr('href')).offset().top
 +
        }, 1500, 'easeInOutExpo');
 +
        event.preventDefault();
 +
    });
 +
});
 +
 +
// Closes the Responsive Menu on Menu Item Click
 +
$('.navbar-collapse ul li a').click(function() {
 +
    $(".navbar-collapse").collapse('hide');
 +
});
 +
 +
function showhide(id) {
 +
      var e = document.getElementById(id);
 +
      e.style.display = (e.style.display == 'block') ? 'none' : 'block';
 +
    }
 +
 +
$(function() {
 +
 +
    var $sidebar  = $("#sidebar"),
 +
        $window    = $(window),
 +
        offset    = $sidebar.offset(),
 +
        topPadding = 15;
 +
 +
    $window.scroll(function() {
 +
        if ($window.scrollTop() > offset.top) {
 +
            $sidebar.stop().animate({
 +
                marginTop: $window.scrollTop() - offset.top + topPadding
 +
            });
 +
        } else {
 +
            $sidebar.stop().animate({
 +
                marginTop: 0
 +
            });
 +
        }
 +
    });
 +
   
 +
});
 +
$(window).load(function() {
 +
$('li.notebook').addClass('active');
 +
$('li.n_over').addClass('active');
 +
 +
$(".affix").css("width", $("#parent").width());
 +
});
 +
 +
$(window).scroll(function() {
 +
$(".affix").css("width", $("#parent").width());
 +
});
 +
 +
$(window).resize(function() {
 +
$(".affix").css("width", $("#parent").width());
 +
});
 +
 +
 +
$(function() {
 +
            $( document ).tooltip({
 +
                items: "input",
 +
                content: function() {
 +
                    return $('.myPopover').html();
 +
                },
 +
                position: {
 +
                    my: "center bottom-20",
 +
                    at: "center top",
 +
                    using: function( position, feedback ) {
 +
                        $( this ).css( position );
 +
                        $( "<div>" )
 +
                                .addClass( "arrow" )
 +
                                .addClass( feedback.vertical )
 +
                                .addClass( feedback.horizontal )
 +
                                .appendTo( this );
 +
                    }
 +
                }
 +
            });
 +
 +
            $('.fireTip').click(function () {
 +
                if(!$(this).hasClass('open')) {
 +
                    $('#age').trigger('mouseover');
 +
                    $(this).addClass('open');
 +
                } else {
 +
                    $('#age').trigger('mouseout');
 +
                    $(this).removeClass('open');
 +
                }
 +
 +
            })
 +
 +
        });
 +
 +
$(document).ready(function(){
 +
$("#masterclass-popover").popover({
 +
    html : true,
 +
placement: 'bottom',
 +
    title: $("#masterclass-popover-head").html(),
 +
    content: $("#masterclass-popover-content").html()
 +
    });
 +
 +
$("small.download-notice a").click(function(e) {
 +
    e.preventDefault();
 +
});
 +
});
 +
 +
$(document).on("click", ".tooltip", function() {
 +
    $(this).tooltip(
 +
        {
 +
            items: ".tooltip",
 +
            content: function(){
 +
                return $(this).data('description');
 +
            },
 +
            close: function( event, ui ) {
 +
                var me = this;
 +
                ui.tooltip.hover(
 +
                    function () {
 +
                        $(this).stop(true).fadeTo(400, 1);
 +
                    },
 +
                    function () {
 +
                        $(this).fadeOut("400", function(){
 +
                            $(this).remove();
 +
                        });
 +
                    }
 +
                );
 +
                ui.tooltip.on("remove", function(){
 +
                    $(me).tooltip("destroy");
 +
                });
 +
          },
 +
        }
 +
    );
 +
    $(this).tooltip("open");
 +
});
 +
 +
</script>
  
 
<!-- Navigation -->
 
<!-- Navigation -->
<nav class="navbar navbar-custom navbar-fixed-top" role="navigation">
+
    <nav class="navbar navbar-default navbar-fixed-top topnav" role="navigation">
    <div class="container">
+
        <div class="container topnav">
        <div class="navbar-header">
+
            <!-- Brand and toggle get grouped for better mobile display -->
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-main-collapse">
+
            <div class="navbar-header">
                Menu <i class="fa fa-bars"></i>
+
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            </button>
+
                    <span class="sr-only">Toggle navigation</span>
            <a class="navbar-brand page-scroll" href="https://2017.igem.org/Team:UCopenhagen">
+
                    <span class="icon-bar"></span>
                 inCell
+
                    <span class="icon-bar"></span>
             </a>
+
                    <span class="icon-bar"></span>
 +
                </button>
 +
               
 +
                <a class="navbar-brand topnav" href="https://2017.igem.org/Team:UCopenhagen">
 +
                 <img class="logo-navigation" border="0" alt="inCell-logo" src="https://static.igem.org/mediawiki/2017/f/f2/UCopenhagen_logo.png" width="120" height="120" alt="">
 +
                </a>
 +
             </div>
 +
            <!-- Collect the nav links, forms, and other content for toggling -->
 +
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
 +
                <ul class="nav navbar-nav navbar-right">
 +
                    <li>
 +
                        <div class="dropdown">
 +
                            <a href="https://2017.igem.org/Team:UCopenhagen/Project"><button class="dropbtn">Project</button></a>
 +
                            <div class="dropdown-content">
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Project">Project description</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Interdependency">Interdependency</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Number-Control">Number control</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Protein-Import">Protein import</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Results">Results</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Parts">Parts</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Model">Modelling</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/InterLab">Interlab</a>
 +
                            </div>
 +
                        </div>
 +
                    </li>
 +
                    <li>
 +
                        <div class="dropdown">
 +
                            <a href="https://2017.igem.org/Team:UCopenhagen/Safety"><button class="dropbtn">Safety & Labnotes</button></a>
 +
                            <div class="dropdown-content">
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Safety">Safety</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Notebook">Notebook</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Protocols">Protocols</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Improve">Improve</a>
 +
                            </div>
 +
                        </div>
 +
                    </li>
 +
                    <li>
 +
                        <div class="dropdown">
 +
                            <a href="https://2017.igem.org/Team:UCopenhagen/Team"><button class="dropbtn">People</button></a>
 +
                            <div class="dropdown-content">
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Team">Team</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Attributions">Attributions</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/Collaborations">Collaborations</a>
 +
                            </div>
 +
                        </div>
 +
                    </li>
 +
                    <li>
 +
                        <div class="dropdown">
 +
                            <a href="https://2017.igem.org/Team:UCopenhagen/HP"><button class="dropbtn">Human Practices</button></a>
 +
                            <div class="dropdown-content">
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/HP/Silver">Overview</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/HP/Ethics">Ethics</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/HP/Gold_Integrated">Integrated</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/HP/Events">Events</a>
 +
                                <a href="https://2017.igem.org/Team:UCopenhagen/HP/Media">Media</a>
 +
                            </div>
 +
                        </div>
 +
                    </li>
 +
                </ul>
 +
            </div>
 +
            <!-- /.navbar-collapse -->
 
         </div>
 
         </div>
 +
        <!-- /.container -->
 +
    </nav>
  
        <!-- Collect the nav links, forms, and other content for toggling -->
 
        <div class="collapse navbar-collapse navbar-right navbar-main-collapse">
 
            <ul class="nav navbar-nav">
 
                <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
 
                <li class="hidden">
 
                    <a href="#page-top"></a>
 
                </li>
 
                <li class="dropdown-li">
 
                    <div class="dropdown">
 
                      <a onclick="window.location.href='https://2017.igem.org/Team:UCopenhagen/Project'" class="dropdown-toggle" type="button" id="dropdown2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 
                        Project                       
 
                      </a>
 
                      <ul class="dropdown-menu" aria-labelledby="dropdown2">
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Project/Interdependence" class="dropdown-a"> Interdependence </a>
 
                        </li>
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Project/Number-control" class="dropdown-a">Number control</a>
 
                        </li>
 
<li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Project/Protein-import" class="dropdown-a">Protein Import</a>
 
                        </li>
 
<li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Results" class="dropdown-a">Results</a>
 
                        </li>
 
<li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Parts" class="dropdown-a">Parts</a>
 
                        </li>
 
<li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Model" class="dropdown-a">Modelling</a>
 
                        </li>
 
                      </ul>
 
                    </div>
 
                </li>
 
                <li class="dropdown-li">
 
                    <div class="dropdown">
 
                      <a onclick="window.location.href='https://2017.igem.org/Team:UCopenhagen/Safety'" class="dropdown-toggle" type="button" id="dropdown3" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 
                        Safety                       
 
                      </a>
 
                      <ul class="dropdown-menu" aria-labelledby="dropdown3">
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Notebook" class="dropdown-a">Notebook</a>
 
                        </li>
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Protocols" class="dropdown-a">Protocols</a>
 
                        </li>
 
                      </ul>
 
                    </div>
 
                </li>
 
                <li class="dropdown-li">
 
                    <div class="dropdown">
 
                      <a onclick="window.location.href='https://2017.igem.org/Team:UCopenhagen/Team'" class="dropdown-toggle" type="button" id="dropdown4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 
                        Team                       
 
                      </a>
 
                      <ul class="dropdown-menu" aria-labelledby="dropdown4">
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Attributions" class="dropdown-a">Attributions</a>
 
                        </li>
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Collaborations" class="dropdown-a">Collaborations</a>
 
                        </li>
 
                      </ul>
 
                    </div>
 
                </li>
 
                <li class="dropdown-li">
 
                    <div class="dropdown">
 
                      <a onclick="window.location.href='https://2017.igem.org/Team:UCopenhagen/HP'" class="dropdown-toggle" type="button" id="dropdown1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 
                        Human Practices                       
 
                      </a>
 
                      <ul class="dropdown-menu" aria-labelledby="dropdown1">
 
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Ethics">Ethics</a>
 
                        </li>
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Social-media" class="dropdown-a">Social Media</a>
 
                        </li>
 
<li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Events" class="dropdown-a">Events</a>
 
                        </li>
 
<li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Podcast" class="dropdown-a">Podcast</a>
 
                        </li>
 
                      </ul>
 
                    </div>
 
                </li>
 
       
 
                <li class="dropdown-li">
 
                    <div class="dropdown">
 
                      <a class="dropdown-toggle" type="button" id="dropdown6" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
 
                        Future Plans                       
 
                      </a>
 
                      <ul class="dropdown-menu" aria-labelledby="dropdown6">
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Additional-work" class="dropdown-a">Additional work needed</a>
 
                        </li>
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Limitations" class="dropdown-a">Limitations</a>
 
                        </li>
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Ethical-concerns" class="dropdown-a">Ethical concerns</a>
 
                        </li>
 
                        <li>
 
                          <a href="https://2017.igem.org/Team:UCopenhagen/Final-words" class="dropdown-a">Final words</a>
 
                        </li>
 
                 
 
                      </ul>
 
                    </div>
 
                </li>
 
             
 
            </ul>
 
        </div>
 
        <!-- /.navbar-collapse -->
 
    </div>
 
    <!-- /.container -->
 
</nav>
 
 
</html>
 
</html>

Latest revision as of 03:57, 2 November 2017