|
|
| Line 1: |
Line 1: |
| − | <html lang="en">
| |
| − |
| |
| − | <meta charset="utf-8">
| |
| − | <meta http-equiv="X-UA-Compatible" content="IE=edge">
| |
| − | <meta name="viewport" content="width=device-width, initial-scale=1">
| |
| − | <meta name="description" content="UCPH - iGEM">
| |
| − | <meta name="author" content="InCell">
| |
| − |
| |
| − | <!-- Bootstrap Core CSS -->
| |
| − | <link href="https://2017.igem.org/wiki/index.php?title=Template:BOKU-Vienna-bootstrap.css&action=raw&ctype=text/css" rel="stylesheet"/>
| |
| − |
| |
| − | <!-- Theme CSS -->
| |
| − | <style>
| |
| − | a:link {
| |
| − | color: #1d9b6c;
| |
| − | background-color: transparent;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | a:visited {
| |
| − | color: #1d9b6c;
| |
| − | background-color: transparent;
| |
| − | 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: #E8DBD7;
| |
| − | font-family: Tahoma, Geneva, sans-serif;
| |
| − | }
| |
| − | #globalWrapper{ height: 100%; }
| |
| − | body { background-color: #2A9D8F; height: 100%; }
| |
| − | #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
| |
| − |
| |
| − | #top_menu_14 {
| |
| − | height: 12px;
| |
| − | color: #E9C46A;
| |
| − | background: #264653;
| |
| − | }
| |
| − | #top_menu_under {
| |
| − | height: 12px;
| |
| − | background: black;
| |
| − | }
| |
| − |
| |
| − | #top_menu_inside {
| |
| − | border-left: 0px;
| |
| − | border-right: 0px;
| |
| − | width: 100%;
| |
| − | }
| |
| − |
| |
| − | li.has_submenu a {
| |
| − | color: grey;
| |
| − | }
| |
| − | html {
| |
| − | width: 100%;
| |
| − | height: 100%;
| |
| − | }
| |
| − | h1,
| |
| − | h2,
| |
| − | h3,
| |
| − | h4,
| |
| − | h5,
| |
| − | h6 {
| |
| − | margin: 0 0 35px;
| |
| − | text-transform: uppercase;
| |
| − | font-family: Tahoma, Geneva, sans-serif;
| |
| − | font-weight: 700;
| |
| − | letter-spacing: 1px;
| |
| − | }
| |
| − | p {
| |
| − | margin: 0 0 25px;
| |
| − | font-size: 18px;
| |
| − | 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) {
| |
| − | .navbar-custom {
| |
| − | padding: 20px 0;
| |
| − | 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;
| |
| − | }
| |
| − | .navbar-custom.top-nav-collapse {
| |
| − | padding: 0;
| |
| − | background: black;
| |
| − | border-bottom: 0px solid rgba(255, 255, 255, 0.3);
| |
| − | }
| |
| − | }
| |
| − | @media (min-width: 768px) {
| |
| − | .myintro {
| |
| − | height: 100%;
| |
| − | padding: 0;
| |
| − | }
| |
| − | .myintro .myintro-body .brand-heading {
| |
| − | font-size: 100px;
| |
| − | }
| |
| − | .myintro .myintro-body .myintro-text {
| |
| − | font-size: 26px;
| |
| − | }
| |
| − | }
| |
| − | .btn-circle {
| |
| − | width: 70px;
| |
| − | height: 70px;
| |
| − | 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 {
| |
| − | 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;
| |
| − | }
| |
| − | ul.banner-social-buttons {
| |
| − | margin-top: 0;
| |
| − | }
| |
| − | @media (max-width: 1199px) {
| |
| − | ul.banner-social-buttons {
| |
| − | margin-top: 15px;
| |
| − | }
| |
| − | }
| |
| − | @media (max-width: 767px) {
| |
| − | ul.banner-social-buttons li {
| |
| − | display: block;
| |
| − | margin-bottom: 20px;
| |
| − | padding: 0;
| |
| − | }
| |
| − | ul.banner-social-buttons li:last-child {
| |
| − | 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);
| |
| − | }
| |
| − |
| |
| − |
| |
| − |
| |
| − | .scrollnav-custom {
| |
| − | margin-bottom: 0;
| |
| − | border-bottom: 0px solid rgba(255, 255, 255, 0.3);
| |
| − | font-family: Tahoma, Geneva, sans-serif
| |
| − | background-color: black;
| |
| − | }
| |
| − | .scrollnav-custom .scrollnav-toggle {
| |
| − | color: white;
| |
| − | background-color: rgba(255, 255, 255, 0.2);
| |
| − | font-size: 12px;
| |
| − | }
| |
| − | .scrollnav-custom .scrollnav-toggle:focus,
| |
| − | .scrollnav-custom .scrollnav-toggle:active {
| |
| − | outline: none;
| |
| − | }
| |
| − | .scrollnav-custom .scrollnav-brand {
| |
| − | font-weight: 700;
| |
| − | }
| |
| − | .scrollnav-custom .scrollnav-brand img {
| |
| − | height: 40px;
| |
| − | }
| |
| − | .scrollnav-custom .scrollnav-brand:focus {
| |
| − | outline: none;
| |
| − | }
| |
| − | .scrollnav-custom a {
| |
| − | color: white;
| |
| − | }
| |
| − | .scrollnav-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;
| |
| − | }
| |
| − | .scrollnav-custom .nav li a:hover {
| |
| − | color: rgba(255, 255, 255, 0.8);
| |
| − | outline: none;
| |
| − | background-color: transparent;
| |
| − | }
| |
| − | .scrollnav-custom .nav li a:focus,
| |
| − | .scrollnav-custom .nav li a:active {
| |
| − | outline: none;
| |
| − | background-color: transparent;
| |
| − | }
| |
| − | .scrollnav-custom .nav li.active {
| |
| − | outline: none;
| |
| − | }
| |
| − | .scrollnav-custom .nav li.active a {
| |
| − | background-color: rgba(255, 255, 255, 0.3);
| |
| − | }
| |
| − | .scrollnav-custom .nav li.active a:hover {
| |
| − | color: white;
| |
| − | }
| |
| − | @media (min-width: 768px) {
| |
| − | .scrollnav-custom {
| |
| − | padding: 0;
| |
| − | letter-spacing: 1px;
| |
| − | background: black;
| |
| − | border-bottom: 1px solid rgba(255, 255, 255, 0.3);
| |
| − | }
| |
| − | }
| |
| − | .navbar-brand img {
| |
| − | height: 100%;
| |
| − | }
| |
| − | .sponsor-section {
| |
| − | background-color: white;
| |
| − | color: black;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .dropdown-li {
| |
| − | padding-top: 11px;
| |
| − | padding-bottom: 15px;
| |
| − | margin-left: 10px;
| |
| − | margin-right: 10px;
| |
| − | }
| |
| − |
| |
| − | .navbar-custom .nav li a:hover{
| |
| − | cursor: pointer;
| |
| − | }
| |
| − |
| |
| − | .navbar-right .dropdown-menu {
| |
| − | right: auto;
| |
| − | position-left: 0px;
| |
| − | position-right: 0px;
| |
| − | margin-left: 0px;
| |
| − | }
| |
| − |
| |
| − | .dropdown-menu {
| |
| − | background-color: black;
| |
| − | border-radius: 0px;
| |
| − | }
| |
| − |
| |
| − | .dropdown-a {
| |
| − | color: white !important;
| |
| − | }
| |
| − |
| |
| − | .nav .open > a {
| |
| − | background: transparent;
| |
| − | }
| |
| − | </style>
| |
| − |
| |
| − |
| |
| − |
| |
| − | <body>
| |
| − | <nav class="menu">
| |
| − |
| |
| − | <ul id="rmenu">
| |
| − | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam"> HOME</a>
| |
| − |
| |
| − | </li>
| |
| − | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/team">TEAM</a>
| |
| − | <div class="sub-content">
| |
| − | <div class="sub-drop">
| |
| − | <ul>
| |
| − | <li><a href="https://2017.igem.org/Team:Amsterdam/team" class="sub-item">The Team</a></li>
| |
| − | <li><a href="#" class="sub-item">Team Attribution</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </li>
| |
| − | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Project">PROJECT</a>
| |
| − | <div class="sub-content">
| |
| − | <div class="sub-drop">
| |
| − | <ul>
| |
| − |
| |
| − |
| |
| − | <li><a href="https://2017.igem.org/Team:Amsterdam/Project" class="sub-item">The Project</a></li>
| |
| − | <li><a href="#" class="sub-item">Modeling</a>
| |
| − | <ul id="subx-menu">
| |
| − | <li><a href="#" class="subx-item">Genetic stability</a></li>
| |
| − | <li><a href="#" class="subx-item">Glyoxylate Shunt</a></li>
| |
| − | <li><a href="#" class="subx-item">Biosensor</a></li>
| |
| − | <li><a href="#" class="subx-item">Transporter</a></li>
| |
| − | </ul>
| |
| − |
| |
| − | </li>
| |
| − |
| |
| − |
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − |
| |
| − | </li>
| |
| − | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/News">NEWS</a>
| |
| − | <div class="sub-content">
| |
| − | <div class="sub-drop">
| |
| − | <ul>
| |
| − | <li><a href="https://2017.igem.org/Team:Amsterdam/News" class="sub-item">The news</a></li>
| |
| − | <li><a href="#" class="sub-item">Newsletters</a></li>
| |
| − | <li><a href="#" class="sub-item">Online articles</a></li>
| |
| − | <li><a href="#" class="sub-item">Magazines</a></li>
| |
| − | <li><a href="#" class="sub-item">Platforms</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div> </li>
| |
| − | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Outreach">OUTREACH</a> </li>
| |
| − | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Sponsors">SPONSORS</a> </li>
| |
| − | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Laporatory">LABORATORY</a>
| |
| − | <div class="sub-content">
| |
| − | <div class="sub-drop">
| |
| − | <ul>
| |
| − | <li><a href="#" class="sub-item">Parts</a></li>
| |
| − | <li><a href="#" class="sub-item">Labjournal</a></li>
| |
| − | <li><a href="#" class="sub-item">Protocols</a></li>
| |
| − | </ul>
| |
| − | </div>
| |
| − | </div>
| |
| − | </li>
| |
| − | <li> <a class="menu-item" href="https://2017.igem.org/Team:Amsterdam/Achievements">ACHIEVEMENTS</a> </li>
| |
| − | <li> <a class="menu-item" href="#">SAFETY</a> </li>
| |
| − |
| |
| − |
| |
| − |
| |
| − | </ul>
| |
| − | </nav>
| |
| − |
| |
| − |
| |
| − | </body>
| |
| − |
| |
| − | /*.....................................*/
| |
| − |
| |
| − | .menu {
| |
| − | position: fixed;
| |
| − | left: 0;
| |
| − | top: 0;
| |
| − | border-top: 0;
| |
| − | z-index: 100;
| |
| − | box-shadow: -1px 15px 1px rgba(0,0,0,0.3);
| |
| − | width: 100%;
| |
| − | background-color: #333;
| |
| − | color: white;
| |
| − | height: 60px;
| |
| − | }
| |
| − | .myimg {
| |
| − | width: 100px;
| |
| − | float: left;
| |
| − | height: 30px;
| |
| − | padding: 15px 30px;
| |
| − | }
| |
| − | .menu #logo {
| |
| − | float: left;
| |
| − | height: 30px;
| |
| − | padding: 15px 30px;
| |
| − | font-size: 1.2em;
| |
| − | line-height: 30px;
| |
| − | display: none;
| |
| − | }
| |
| − | .menu > ul {
| |
| − | margin: 0;
| |
| − | padding: 0;
| |
| − | float: left;
| |
| − | list-style-type: none;
| |
| − | }
| |
| − |
| |
| − | .menu > ul > li {
| |
| − | overflow: hidden;
| |
| − | float: left;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .menu-item {
| |
| − | display: inline-block;
| |
| − | padding: 15px 10px;
| |
| − | height: 30px;
| |
| − | line-height: 30px;
| |
| − | color: #fff;
| |
| − | text-decoration: none;
| |
| − | }
| |
| − |
| |
| − | .menu-item:hover {
| |
| − |
| |
| − | background-color: #ff0055;
| |
| − | }
| |
| − |
| |
| | /*................STYLING SUB.....................*/ | | /*................STYLING SUB.....................*/ |
| | | | |
position: absolute;
top: 100%;
overflow: hidden;
background-color: #333;
max-height: 0;
}
ul#subx-menu {
position: absolute;
top: 36px;
left: 99px;
background-color: #333;
overflow: hidden;
max-width: 0;
}
.sub-drop ul li:hover > ul#subx-menu {
max-width: 400px;
transition: max-width 0.5s ease-in;
-webkit-transition: max-height 0.3s ease-in;
-moz-transition: max-height 0.3s ease-in;
}
.menu ul li:hover .sub-drop ul{
visibility: visible;
opacity: 1;
transition: visibility 0s, opacity 0.3s ease-in;
}
.menu ul li:hover .sub-content {
max-height: 400px;
overflow: visible;
transition: max-height 0.3s ease-in;
-webkit-transition: max-height 0.3s ease-in;
-moz-transition: max-height 0.3s ease-in;
}
