Difference between revisions of "Template:Team:DTU-Denmark/index.html"

Line 1: Line 1:
−
<html>
+
<!--CSS template bootstrap, source: https://getbootstrap.com/-->
 +
{{Team:DTU-Denmark/main.css}}
 +
<!--CSS theme template bootstrap-->
 +
{{Team:DTU-Denmark/main-theme.css}}
 +
<!--JavaScript and jQuery template bootstrap-->
 +
{{Team:DTU-Denmark/javascript.js}}
  
−
<style>
+
<!-- Mobile navigation css, source: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/ -->
−
/* Default sheet */
+
{{Team:DTU-Denmark/mobile-nav.css}}
−
/* General Demo Style */
+
<!-- Mobile navigation js -->
−
/*@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
+
{{Team:DTU-Denmark/mobile-nav.js}}
 +
<!-- Modernizr addon for mobile navigation -->
 +
{{Team:DTU-Denmark/modernizr.js}}
  
−
@font-face {
+
<!-- Hover -->
−
font-family: 'fontawesome';
+
{{Team:DTU-Denmark/hover.js}}
−
src:url('../fonts/fontawesome.eot');
+
<!-- Navigation -->
−
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
+
{{Team:DTU-Denmark/nav.js}} <!-- Add to subbar visibility when hovering-->
−
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
+
−
url('../fonts/fontawesome.woff') format('woff'),
+
−
url('../fonts/fontawesome.ttf') format('truetype');
+
−
font-weight: normal;
+
−
font-style: normal;
+
−
}*/
+
  
−
body, html { font-size: 100%; padding: 0; margin: 0;}
 
  
−
/* Reset */
+
<html lang="en">
−
*,
+
−
*:after,
+
−
*:before {
+
−
-webkit-box-sizing: border-box;
+
−
-moz-box-sizing: border-box;
+
−
box-sizing: border-box;
+
−
}
+
  
−
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
+
<head>
−
.clearfix:before,
+
    <title>New HTML template for the wiki</title>
−
.clearfix:after {
+
    <!-- This tells the browser that your page is responsive, from iGEM wiki -->
−
content: " ";
+
<meta name="viewport" content="width=device-width, initial-scale=1">
−
display: table;
+
   
−
}
+
        <style type="text/css">
 +
            /* Wiki default settings */
  
−
.clearfix:after {
+
            #sideMenu, #top_title, .logo_2016 {display:none;}
−
clear: both;
+
            #content{ width: 100%; margin: 0; padding: 0;}
−
}
+
  
−
body {
+
            /* Navigation CSS */
−
font-family: 'Lato', Calibri, Arial, sans-serif;
+
−
color: #b1aea6;
+
−
background: #fffcf5;
+
−
min-height: 800px;
+
−
}
+
  
−
a {
+
            #top-section {
−
color: #ccc;
+
                border: 0 none;
−
text-decoration: none;
+
                height: 14px;
−
}
+
                z-index: 100;
 +
                top: 0;
 +
                position: fixed;
 +
                width: 975px;
 +
                left: 50%;
 +
                margin-left: -487px;
 +
            }
  
−
a:hover {
+
            #globalWrapper, #content {
−
color: #fff;
+
                width: 100%;
−
}
+
                height: 100%;
 +
                border: 0px;
 +
                background-color: transparent;
 +
                margin: 0px;
 +
                padding: 0px;
 +
                font-size: 100%;
 +
                z-index:0;
 +
            }
  
−
.main,
+
            li {
−
.container > header {
+
                margin:0px;
−
width: 100%;
+
            }
−
margin: 0 auto;
+
           
−
padding: 0 1.875em 3.125em 1.875em;
+
            /*Text of top nav*/
−
}
+
            #headerWrapper a,
 +
            #headerWrapper a:hover,
 +
            #headerWrapper a:visited,
 +
            #headerWrapper a:active {
 +
                text-decoration:none;
 +
                color:black;
 +
            }
 +
           
 +
            /*Dimensions and look of top nav*/
 +
            #headerWrapper {
 +
                position:fixed;
 +
                top:0px;
 +
                height: 75px;
 +
                width:100%;
 +
                background-color:#ffffff;
 +
                /*background-color: rgba(0, 0, 0, 0);*/
 +
                z-index:30;
 +
            }
 +
           
 +
           
 +
            /*Text of sub nav*/
 +
            #sub-navigation-wrapper a,
 +
            #sub-navigation-wrapper a:hover,
 +
            #sub-navigation-wrapper a:visited,
 +
            #sub-navigation-wrapper a:active {
 +
                text-decoration:none;
 +
                color:white;
 +
            }
 +
           
 +
            /*Dimensions and look of sub nav*/
 +
            #sub-navigation-wrapper {
 +
                clear:both;
 +
                position:relative;
 +
                background-color: #990000;
 +
                color: white;
 +
                width:100%;
 +
                height: 30px;
 +
                padding-top: 7px;
 +
                -webkit-box-shadow: 0px 7px 5px -3px rgba(50, 50, 50, 0.75);
 +
                -moz-box-shadow:    0px 7px 5px -3px rgba(50, 50, 50, 0.75);
 +
                box-shadow:        0px 7px 5px -3px rgba(50, 50, 50, 0.75);
 +
            }
 +
           
 +
            #Topnav {
 +
                width:100%;
 +
                margin: auto;
 +
            }
  
−
.main {
+
            /*Dimensions and placement of logo*/
−
max-width: 69em;
+
            #logo {
−
padding-top: 2em;
+
                float: left;
−
}
+
                width: 20%;
 +
                height: 75px;
 +
                padding-top: 15px; /* control that it is below the iGEM topbar*/
 +
                margin-bottom: 0px;
 +
            }
 +
           
 +
            #logo div {
 +
                float: left;
 +
            }
 +
           
 +
            #logo img.BioBuilders{
 +
                width: 110px;
 +
                background: white;
 +
                margin-top: 2px;
 +
                margin-bottom: 2px;
 +
                padding-right: 20px;
 +
                border-top: 0px;
 +
                border-right: -30px;
 +
                border-color: white;
 +
            }       
 +
           
 +
            #navigation {
 +
                float: right;
 +
                font-size: 0.93em;
 +
                font-weight: 200;
 +
                width: 80%;
 +
            }
  
−
.column {
+
            #navigation ul{
−
float: left;
+
                float: right;
−
width: 50%;
+
                max-margin-right: 20px;
−
padding: 0 2em;
+
                margin-bottom: 0px;
−
min-height: 300px;
+
            }
−
min-width: 320px;
+
−
position: relative;
+
−
}
+
  
−
.column:nth-child(2) {
+
            #navigation a{
−
min-height: 400px;
+
                padding-left:8px;
−
box-shadow: -1px 0 0 rgba(0,0,0,0.1);
+
            }
−
background: url(../images/clickhere.png) 90px 0 no-repeat;
+
−
}
+
  
−
.column:last-child:before {
+
            #sub-navigation {
−
content: '';
+
                width:960px;
−
position: absolute;
+
                text-align: left;
−
height: 7px;
+
                font-size: 0.9em;
−
background: #ceccc6;
+
                margin:auto;
−
top: 100px;
+
                font-weight:200;
−
left: 10px;
+
            }
−
}
+
  
−
.column p {
+
            #sub-navigation ul {
−
font-weight: 300;
+
                display: inline;
−
font-size: 2em;
+
                float:left;
−
padding: 0;
+
                margin-right:10px;
−
margin: 0;
+
            }
−
text-align: right;
+
−
line-height: 1.5;
+
−
}
+
  
−
.container > header {
+
            /* This makes the "-" seperators between the subnavigation elements */
−
padding: 2.875em 1.875em 2.875em;
+
            #sub-navigation li:before{
−
text-align: center;
+
                content:"-";
−
background: rgba(0,0,0,0.01);
+
                padding-right:10px;
−
}
+
                color:white;
 +
            }
  
−
.container > header h1 {
+
            /*These next four elements make space between the "-" and the list elements*/
−
font-size: 2.625em;
+
            #sub-navigation li li:before{
−
line-height: 1.3;
+
                content:" ";
−
margin: 0;
+
                padding-right:5px;
−
color: #89867e;
+
                color:white;
−
font-weight: 300;
+
            }
−
}
+
  
−
.container > header span {
+
            #sub-navigation li:first-child:before{
−
display: block;
+
                content:"";
−
font-size: 60%;
+
            }
−
color: #ceccc6;
+
−
padding: 0 0 0.6em 0.1em;
+
−
}
+
  
−
/* Header Style */
+
            #sub-navigation li li:first-child:before{
−
.codrops-top {
+
                content:" ";
−
background: #fff;
+
            }
−
background: rgba(255, 255, 255, 0.95);
+
−
text-transform: uppercase;
+
−
position: relative;
+
−
font-size: 0.68em;
+
−
box-shadow: 1px 0px 2px rgba(0,0,0,0.2);
+
−
line-height: 2.2;
+
−
}
+
  
−
.codrops-top a {
+
            #sub-navigation li.active-item > a{
−
padding: 0 1em;
+
                font-weight: bold;
−
letter-spacing: 0.1em;
+
                border-top:2px solid;
−
color: #333;
+
            }
−
display: inline-block;
+
−
}
+
  
−
.codrops-top a:hover {
+
            /*#sub-navigation ul ul {
−
background: rgba(255,255,255,0.99);
+
                display: none;
−
color: #000;
+
            }*/
−
}
+
  
−
.codrops-top span.right {
+
            #sub-navigation li.current ul {
−
float: right;
+
                display: inline;
−
}
+
            }
  
−
.codrops-top span.right a {
+
            #sub-navigation ul ul {
−
float: left;
+
                color:white;
−
display: block;
+
                padding-left:0px;
−
}
+
            }
  
−
/* Demo Buttons Style */
+
            #sub-navigation li {
−
.codrops-demos {
+
                display: inline;
−
padding-top: 1em;
+
                float: left;
−
font-size: 0.9em;
+
                padding-left: 10px;
−
}
+
            }
  
−
.codrops-demos a {
+
            #sub-navigation li li{
−
display: inline-block;
+
                display: inline;
−
margin: 0.5em;
+
                float: left;
−
padding: 0.7em 1.1em;
+
                padding-left: 5px;
−
border: 3px solid #b1aea6;
+
                font-style: italic;
−
color: #b1aea6;
+
            }
−
font-weight: 700;
+
−
}
+
  
−
.codrops-demos a:hover,
+
            #navigation ul li {
−
.codrops-demos a.current-demo,
+
                display: inline;
−
.codrops-demos a.current-demo:hover {
+
                float:left;
−
border-color: #89867e;
+
            }
−
color: #89867e;
+
−
}
+
  
−
@media screen and (max-width: 46.0625em) {
+
            .nav-item {
 +
                display: block;
 +
                background-size: 32px;
 +
                float: left;
 +
                /*width:80px;*/
 +
                background-position: center 15px ;
 +
                background-repeat: no-repeat;
 +
                line-height: 61px;
 +
                text-align:center;
 +
                padding-top: 10px;
 +
                padding-right:10px;
 +
                padding-left:10px;
 +
                text-transform: uppercase;
 +
            }
 +
            .carousel-indicators {
 +
                text-align:center;
 +
            }
 +
            .team {
 +
                background-image: url();
 +
            }
  
−
.main {
+
            .project {
−
padding: 0;
+
                background-image: url();
−
}
+
            }
  
−
.column {
+
            .results {
−
width: 100%;
+
                background-image: url();
−
min-width: auto;
+
            }
−
min-height: auto;
+
−
padding: 3em 2em;  
+
−
}
+
  
−
.column p {
+
            .outreach {
−
text-align: left;
+
                background-image: url();
−
font-size: 1.5em;
+
            }
−
}
+
            #Topnav a:hover{
 +
                background-color: #990000;
 +
                color: white;
 +
            }
  
−
.column:nth-child(2) {
+
            #Topnav a.active{
−
box-shadow: 0 -1px 0 rgba(0,0,0,0.1);
+
                background-color: #990000;
−
background-position: 90px 3em;
+
                color: white;
−
}
+
            }
−
}
+
  
−
/* Component styles */
+
            #sub-navigation > ul {
 +
                display:none;
 +
            }
  
−
/*@font-face {
+
            body{
−
font-family: 'icomoon';
+
                padding-top: 120px;
−
src:url('../fonts/icomoon.eot');
+
            }
−
src:url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),
+
−
url('../fonts/icomoon.woff') format('woff'),
+
−
url('../fonts/icomoon.ttf') format('truetype'),
+
−
url('../fonts/icomoon.svg#icomoon') format('svg');
+
−
font-weight: normal;
+
−
font-style: normal;
+
−
}*/
+
  
−
/* Common styles of menus */
+
            .anchor{
 +
                display: block;
 +
                height: 120px; /*same height as Topnav+subnav*/
 +
                margin-top: -120px; /*same height as Topnav+subnav*/
 +
                visibility: hidden;
 +
            }
  
−
.dl-menuwrapper {
+
            #mobile-navigation {
−
width: 100%;
+
                display:none;
−
max-width: 991px;
+
            }
−
position: fixed; /* position the hamburger menu at the right*/
+
           
−
    right: 0;
+
            /*#dl-menu {
−
top: 20px; /**/
+
                display: none;
−
-webkit-perspective: 1000px;
+
            }
−
perspective: 1000px;
+
           
−
-webkit-perspective-origin: 50% 200%;
+
            .dl-menuwrapper {
−
perspective-origin: 50% 200%;
+
                display: none;
−
}
+
            }*/
 +
           
 +
            /*.slicknav_menu {
 +
                display:none;
 +
            }*/
 +
           
 +
            /*Control that the mobile navigation is shown when screen size is below 991px in width*/
 +
            @media screen and (max-width: 991px) {
 +
               
 +
                /*.slicknav_menu {
 +
                    display:block;
 +
                }*/
 +
                /*#dl-menu {
 +
                    display: block;
 +
                }
 +
                .dl-menuwrapper {
 +
                    display: block;
 +
                }*/
 +
               
 +
                #mobile-navigation {
 +
                    display: block;
 +
                    top: 0px;
 +
                }
 +
               
 +
            }
 +
           
 +
           
 +
            /*For TU delft facebook and twitter logos*/
 +
            div#afixLeft{
 +
                width:50px;
 +
                position:fixed;
 +
                bottom:10%;
 +
                left:0;
 +
                z-index:11;
 +
            }
  
−
.dl-menuwrapper:first-child {
+
            div#afixRight{
−
margin-right: 100px;
+
                width:50px;
−
}
+
                position:fixed;
 +
                bottom:10%;
 +
                right:0;
 +
                z-index:11;
 +
            }
 +
                       
 +
    </style>
 +
    <script>
 +
        // Source: http://tympanus.net/codrops/2013/04/19/responsive-multi-level-menu/
 +
        //The plugin for calling the dl-menu, aka the mobile_nav.
 +
        $(document).ready(initiateDLmenu);
 +
       
 +
        $(function initiateDLmenu() {
 +
            $( '#dl-menu' ).dlmenu({
 +
animationClasses : {
 +
                        classin : 'dl-animate-in-2',
 +
                        classout : 'dl-animate-out-2'
 +
                    }
 +
});
 +
            $( '#dl-menu' ).hide();
 +
            $('.dl-menuwrapper').addClass('hidden-md');
 +
            $('.dl-menuwrapper').addClass('hidden-lg');
 +
});
 +
    </script>
 +
    <!--
 +
    <script>
 +
        //Source: http://slicknav.com/
 +
        $(document).ready(initiateMobileView);
  
−
.dl-menuwrapper button {
+
        function initiateMobileView() {
−
background: #990000;
+
            //$('#sidr').sidr();
−
border: none;
+
            $('#mobile-navigation').slicknav({
−
width: 48px;
+
                label:'',
−
height: 45px;
+
                closeOnClick:true,
−
text-indent: -900em;
+
                allowParentLinks:true,
−
overflow: hidden;
+
                prependTo:'#slick-navigation'
−
position: relative;
+
            });
−
    float:left;
+
            $('#mobile-navigation').hide();
−
cursor: pointer;
+
            $('.slicknav_menu').addClass('hidden-md');
−
outline: none;
+
            $('.slicknav_menu').addClass('hidden-lg');
−
}
+
            $('.thumbinner').each(function() {
 +
                $(this).width($(this).width() + 6);
 +
            });
 +
        }
 +
    </script>
 +
    -->
 +
</head> <!-- -->
  
−
.dl-menuwrapper button:hover,
+
<header>
−
.dl-menuwrapper button.dl-active,
+
   
−
.dl-menuwrapper ul {
+
    <!-- Mobile navigation -->
−
background: #750000;
+
   
−
}
+
    <div id="mobile-navigation">
 +
    <div id="dl-menu" class="dl-menuwrapper">
 +
            <div class="container-fluid demo-2"> <!--Not certain if needed-->
 +
                <button class="dl-trigger">Open Menu</button>
 +
                        <ul class="dl-menu">
 +
                            <li>
 +
                                <a href="#">Achievements</a>
 +
                                    <ul class="dl-submenu">
 +
                                        <li><a href="#">Medal Requirements</a></li>
 +
                                    </ul>
 +
                            </li>
  
−
.dl-menuwrapper button:after {
+
                            <li><a href="#">Project</a>
−
content: '';
+
                                <ul class="dl-submenu">
−
position: absolute;
+
                                    <li><a href="#" class="sub-nav-item">Description</a></li>
−
width: 68%;
+
                                    <li><a href="#" class="sub-nav-item">Toolbox</a></li>
−
height: 5px;
+
                                    <li><a href="#" class="sub-nav-item">Substrates</a></li>
−
background: #fff;
+
                                    <li><a href="#" class="sub-nav-item">Production</a></li>
−
top: 10px;
+
                                    <li><a href="#" class="sub-nav-item">References</a></li> 
−
left: 16%;
+
                                </ul>
−
box-shadow:
+
                            </li>
−
0 10px 0 #fff,
+
−
0 20px 0 #fff;
+
−
}
+
  
−
.dl-menuwrapper ul {
+
                            <li><a href="#">Parts</a>
−
padding: 0;
+
                                <ul class="dl-submenu">
−
list-style: none;
+
                                    <li><a href="#" class="sub-nav-item">Overview</a></li>
−
-webkit-transform-style: preserve-3d;
+
                                    <li><a href="#" class="sub-nav-item">Parts</a></li>
−
transform-style: preserve-3d;
+
                                    <li><a href="#" class="sub-nav-item">Part Collection</a></li>
−
}
+
                                </ul>
 +
                            </li>
 +
                       
 +
                            <li><a href="#">Notebook</a>
 +
                                <ul class="dl-submenu">
 +
                                    <li><a href="#" class="sub-nav-item">Work Space</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Safety</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Day Notes</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Protocols</a></li>
 +
                                </ul>
 +
                            </li>
  
−
.dl-menuwrapper li {
+
                            <li><a href="#">Hardware</a>
−
position: relative;
+
                                <ul class="dl-submenu">
−
}
+
                                    <li><a href="#" class="sub-nav-item">Overview</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Measuring Growth</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">The Spectrometer</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Design and Integration</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">DIY Manuals</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Protocols</a></li>
 +
                                </ul>
 +
                            </li>
  
−
.dl-menuwrapper li a {
+
                            <li><a href="#">Modeling</a>
−
display: block;
+
                                <ul class="dl-submenu">
−
position: relative;
+
                                    <li><a href="#" class="sub-nav-item">Overview</a></li>
−
padding: 15px 20px;
+
                                    <li><a href="#" class="sub-nav-item">Metabolic Modeling</a></li>
−
font-size: 16px;
+
                                </ul>
−
line-height: 20px;
+
                            </li>
−
font-weight: 300;
+
                           
−
color: #fff;
+
                            <li><a href="#">Practices</a>
−
outline: none;
+
                                <ul class="dl-submenu">
−
}
+
                                    <li><a href="#" class="sub-nav-item">Overview</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Regulations</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Ethics</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Experts' Opinions</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">iGEM Community</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Outreach</a></li>
 +
                                </ul>
 +
                            </li>
 +
                                 
 +
                            <li><a href="#">Collaboration</a>
 +
                                <ul class="dl-submenu">
 +
                                    <li><a href="#" class="sub-nav-item">Overview</a></li>
 +
                                    <li><a href="#">Sharing CRISPR</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">DTU BioBrick Tutorial</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Cooperations</a></li>
 +
                                </ul> 
 +
                            </li>
 +
                           
 +
                            <li><a href="#">Attributions</a>
 +
                                <ul class="dl-submenu">
 +
                                    <li><a href="#" class="sub-nav-item">Team Members</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Advisors</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Team Work Attributions</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Media</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Sponsors</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Acknowledgements</a></li>
 +
                                </ul>
 +
                            </li>
 +
                           
 +
                            <li><a href="#">Interlab</a>
 +
                                <ul class="dl-submenu">
 +
                                    <li><a href="#" class="sub-nav-item">Results</a></li>
 +
                                    <li><a href="#" class="sub-nav-item">Protocols</a></li>
 +
                                </ul>
 +
                            </li>     
 +
                        </ul>
 +
                </div><!-- /dl-menuwrapper -->
 +
        </div>
 +
   
 +
    </div><!-- /Mobile navigation -->
  
−
.no-touch .dl-menuwrapper li a:hover {
+
    <!-- Computer navigation -->
−
background: rgba(255,248,213,0.1);
+
    <div id="headerWrapper" class="hidden-xs hidden-sm">
−
}
+
        <!-- Top navigation bar -->
 +
        <div id="Topnav">
 +
            <div id="logo">
 +
                <a href="https://2016.igem.org/Team:DTU-Denmark">
 +
                    <img class="BioBuilders" src="https://static.igem.org/mediawiki/2016/0/08/DTU-Denmark-Logo-150x80.png" alt="DTU-Denmark Logo">
 +
                </a>
 +
               
 +
               
 +
                <!--<div class=col2> Social media logos and links
 +
                    <div class="row1">
 +
                        <p>FOLLOW US</p>
 +
                    </div>
  
−
.dl-menuwrapper li.dl-back > a {
+
                    <div class="row2">                   
−
padding-left: 30px;
+
                        <div class="col2-1">
−
background: rgba(0,0,0,0.1);
+
                            <a href="https://www.facebook.com/dtubiobuilders">
−
}
+
                                <img class="SocialMedia" src="https://static.igem.org/mediawiki/2016/6/6c/T--DTU-Denmark--FB_logo_60px.png" alt="Facebook link">
 +
                            </a>
 +
                        </div>
 +
                        <div class="col2-2">
 +
                            <a href="https://twitter.com/igem_dtu">
 +
                                <img class="SocialMedia" src="https://static.igem.org/mediawiki/2016/d/db/T--DTU-Denmark--Twitter-logo_60px.png" alt="Twitter link">
 +
                            </a>
 +
                        </div>
 +
                    </div>
 +
                </div>-->
 +
               
 +
            </div>
 +
           
 +
            <div id="navigation">
 +
                <ul id="nav-items">
 +
                    <li><a href="#" class="achievements nav-item" id="achievements"><strong>Achievements</strong></a></li>
 +
                    <li><a href="#" class="project nav-item" id="project"><strong>Project</strong></a></li>
 +
                    <li><a href="#" class="results nav-item" id="parts"><strong>Parts</strong></a></li>
 +
                    <li><a href="#" class="notebook nav-item" id="notebook"><strong>Notebook</strong></a></li>
 +
                    <li><a href="#" class="hardware nav-item" id="hardware"><strong>Hardware</strong></a></li>
 +
                    <li><a href="#" class="modeling nav-item" id="modeling"><strong>Modeling</strong></a></li>
 +
                    <li><a href="#" class="practices nav-item" id="practices"><strong>Practices</strong></a></li>
 +
                    <li><a href="#" class="collaborations nav-item" id="collaborations"><strong>Collaboration</strong></a></li>
 +
                    <li><a href="#" class="attributions nav-item" id="attributions"><strong>Attributions</strong></a></li>
 +
                    <li><a href="#" class="interlab nav-item" id="interlab"><strong>InterLab</strong></a></li>
 +
                </ul>
 +
            </div>
 +
        </div> <!--/ Top navigation bar -->
 +
       
 +
       
 +
        <!-- Sub navigation bar -->
 +
        <div id="sub-navigation-wrapper">
 +
            <div id="sub-navigation">
 +
               
 +
                <ul id="achievements-sub">
 +
                  <li><a href="#" class="sub-nav-item">Medal Requirements</a></li>
 +
                </ul>
 +
               
 +
                <ul id="project-sub">
 +
                    <li><a href="#" class="sub-nav-item">Description</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Toolbox</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Substrates</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Production</a></li>
 +
                    <li><a href="#" class="sub-nav-item">References</a></li> 
 +
                </ul>
 +
               
 +
                <ul id="parts-sub">
 +
                    <li><a href="#" class="sub-nav-item">Overview</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Parts</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Part Collection</a></li>
 +
                </ul>
 +
               
 +
                <ul id="notebook-sub">
 +
                    <li><a href="#" class="sub-nav-item">Work Space</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Safety</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Day Notes</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Protocols</a></li>
 +
                </ul>
 +
               
 +
                <ul id="hardware-sub">
 +
                    <li><a href="#" class="sub-nav-item">Overview</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Measuring Growth</a></li>
 +
                    <li><a href="#" class="sub-nav-item">The Spectrometer</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Design and Integration</a></li>
 +
                    <li><a href="#" class="sub-nav-item">DIY Manuals</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Protocols</a></li>
 +
                </ul>
 +
               
 +
                <ul id="modeling-sub">
 +
                    <li><a href="#" class="sub-nav-item">Overview</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Metabolic Modeling</a></li>
 +
                </ul>
 +
               
 +
                <ul id="practices-sub">
 +
                    <li><a href="#" class="sub-nav-item">Overview</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Regulations</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Ethics</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Experts' Opinions</a></li>
 +
                    <li><a href="#" class="sub-nav-item">iGEM Community</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Outreach</a></li>
 +
                </ul>
 +
               
 +
                <ul id="collaborations-sub">
 +
                    <li><a href="#" class="sub-nav-item">Overview</a></li>
 +
                    <li><a href="#">Sharing CRISPR</a></li>
 +
                    <li><a href="#" class="sub-nav-item">DTU BioBrick Tutorial</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Cooperations</a></li>
 +
                </ul>
 +
               
 +
                <ul id="attributions-sub">
 +
                    <li><a href="#" class="sub-nav-item">Team Members</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Advisors</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Team Work Attributions</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Media</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Sponsors</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Acknowledgements</a></li>
 +
                </ul>
 +
               
 +
                <ul id="interlab-sub">
 +
                    <li><a href="#" class="sub-nav-item">Results</a></li>
 +
                    <li><a href="#" class="sub-nav-item">Protocols</a></li>
 +
                </ul>
 +
               
 +
            </div>
 +
        </div>
 +
    </div>
 +
   
 +
    <!--/ Computer navigation -->
  
−
.dl-menuwrapper li.dl-back:after,
 
−
.dl-menuwrapper li > a:not(:only-child):after {
 
−
position: absolute;
 
−
top: 0;
 
−
line-height: 50px;
 
−
font-family: 'icomoon';
 
−
speak: none;
 
−
-webkit-font-smoothing: antialiased;
 
−
content: "\e000";
 
−
}
 
  
−
.dl-menuwrapper li.dl-back:after {
+
</header>
−
left: 10px;
+
−
color: rgba(212,204,198,0.3);
+
−
-webkit-transform: rotate(180deg);
+
−
transform: rotate(180deg);
+
−
}
+
  
−
.dl-menuwrapper li > a:after {
+
<body>
−
right: 10px;
+
−
color: rgba(0,0,0,0.15);
+
−
}
+
  
−
.dl-menuwrapper .dl-menu {
+
</body>
−
margin: 5px 0 0 0;
+
−
position: absolute;
+
−
width: 100%;
+
−
opacity: 0;
+
−
pointer-events: none;
+
−
-webkit-transform: translateY(10px);
+
−
transform: translateY(10px);
+
−
-webkit-backface-visibility: hidden;
+
−
backface-visibility: hidden;
+
−
}
+
  
−
.dl-menuwrapper .dl-menu.dl-menu-toggle {
+
<footer>
−
transition: all 0.3s ease;
+
   
−
}
+
</footer>
  
−
.dl-menuwrapper .dl-menu.dl-menuopen {
+
<!--<script>
−
opacity: 1;
+
var jumboHeight = $('.jumbotron#cover').outerHeight();
−
pointer-events: auto;
+
−
-webkit-transform: translateY(0px);
+
−
transform: translateY(0px);
+
−
}
+
  
−
/* Hide the inner submenus */
+
function parallax() {
−
.dl-menuwrapper li .dl-submenu {
+
  var scrolled = $(window).scrollTop();
−
display: none;
+
  $('.bg').css('height', (jumboHeight - scrolled) + 'px');
 
}
 
}
  
−
/*
+
$(window).scroll(function(e) {
−
When a submenu is openend, we will hide all li siblings.
+
  parallax();
−
For that we give a class to the parent menu called "dl-subview".
+
});
−
We also hide the submenu link.
+
−
The opened submenu will get the class "dl-subviewopen".
+
−
All this is done for any sub-level being entered.
+
−
*/
+
−
.dl-menu.dl-subview li,
+
−
.dl-menu.dl-subview li.dl-subviewopen > a,
+
−
.dl-menu.dl-subview li.dl-subview > a {
+
−
display: none;
+
−
}
+
  
−
.dl-menu.dl-subview li.dl-subview,
+
</script>
−
.dl-menu.dl-subview li.dl-subview .dl-submenu,
+
<script>
−
.dl-menu.dl-subview li.dl-subviewopen,
+
function centerModal() {
−
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu,
+
    $(this).css('display', 'block');
−
.dl-menu.dl-subview li.dl-subviewopen > .dl-submenu > li {
+
    var $dialog = $(this).find(".modal-dialog");
−
display: block;
+
    var offset = ($(window).height() - $dialog.height()) / 2;
 +
    // Center modal vertically in window
 +
    $dialog.css("margin-top", offset);
 
}
 
}
  
−
/* Dynamically added submenu outside of the menu context */
+
$('.modal').on('show.bs.modal', centerModal);
−
.dl-menuwrapper > .dl-submenu {
+
$(window).on("resize", function () {
−
position: absolute;
+
    $('.modal:visible').each(centerModal);
−
width: 100%;
+
});
−
top: 50px;
+
</script>-->
−
left: 0;
+
−
margin: 0;
+
−
}
+
−
 
+
−
/* Animation classes for moving out and in */
+
−
 
+
−
.dl-menu.dl-animate-out-1 {
+
−
-webkit-animation: MenuAnimOut1 0.4s;
+
−
animation: MenuAnimOut1 0.4s;
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-out-2 {
+
−
-webkit-animation: MenuAnimOut2 0.3s ease-in-out;
+
−
animation: MenuAnimOut2 0.3s ease-in-out;
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-out-3 {
+
−
-webkit-animation: MenuAnimOut3 0.4s ease;
+
−
animation: MenuAnimOut3 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-out-4 {
+
−
-webkit-animation: MenuAnimOut4 0.4s ease;
+
−
animation: MenuAnimOut4 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-out-5 {
+
−
-webkit-animation: MenuAnimOut5 0.4s ease;
+
−
animation: MenuAnimOut5 0.4s ease;
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimOut1 {
+
−
0% { }
+
−
50% {
+
−
-webkit-transform: translateZ(-250px) rotateY(30deg);
+
−
}
+
−
75% {
+
−
-webkit-transform: translateZ(-372.5px) rotateY(15deg);
+
−
opacity: .5;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(-500px) rotateY(0deg);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimOut2 {
+
−
0% { }
+
−
100% {
+
−
-webkit-transform: translateX(-100%);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimOut3 {
+
−
0% { }
+
−
100% {
+
−
-webkit-transform: translateZ(300px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimOut4 {
+
−
0% { }
+
−
100% {
+
−
-webkit-transform: translateZ(-300px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimOut5 {
+
−
0% { }
+
−
100% {
+
−
-webkit-transform: translateY(40%);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimOut1 {
+
−
0% { }
+
−
50% {
+
−
-webkit-transform: translateZ(-250px) rotateY(30deg);
+
−
transform: translateZ(-250px) rotateY(30deg);
+
−
}
+
−
75% {
+
−
-webkit-transform: translateZ(-372.5px) rotateY(15deg);
+
−
transform: translateZ(-372.5px) rotateY(15deg);
+
−
opacity: .5;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(-500px) rotateY(0deg);
+
−
transform: translateZ(-500px) rotateY(0deg);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimOut2 {
+
−
0% { }
+
−
100% {
+
−
-webkit-transform: translateX(-100%);
+
−
transform: translateX(-100%);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimOut3 {
+
−
0% { }
+
−
100% {
+
−
-webkit-transform: translateZ(300px);
+
−
transform: translateZ(300px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimOut4 {
+
−
0% { }
+
−
100% {
+
−
-webkit-transform: translateZ(-300px);
+
−
transform: translateZ(-300px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimOut5 {
+
−
0% { }
+
−
100% {
+
−
-webkit-transform: translateY(40%);
+
−
transform: translateY(40%);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-in-1 {
+
−
-webkit-animation: MenuAnimIn1 0.3s;
+
−
animation: MenuAnimIn1 0.3s;
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-in-2 {
+
−
-webkit-animation: MenuAnimIn2 0.3s ease-in-out;
+
−
animation: MenuAnimIn2 0.3s ease-in-out;
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-in-3 {
+
−
-webkit-animation: MenuAnimIn3 0.4s ease;
+
−
animation: MenuAnimIn3 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-in-4 {
+
−
-webkit-animation: MenuAnimIn4 0.4s ease;
+
−
animation: MenuAnimIn4 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menu.dl-animate-in-5 {
+
−
-webkit-animation: MenuAnimIn5 0.4s ease;
+
−
animation: MenuAnimIn5 0.4s ease;
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimIn1 {
+
−
0% {
+
−
-webkit-transform: translateZ(-500px) rotateY(0deg);
+
−
opacity: 0;
+
−
}
+
−
20% {
+
−
-webkit-transform: translateZ(-250px) rotateY(30deg);
+
−
opacity: 0.5;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px) rotateY(0deg);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimIn2 {
+
−
0% {
+
−
-webkit-transform: translateX(-100%);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimIn3 {
+
−
0% {
+
−
-webkit-transform: translateZ(300px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimIn4 {
+
−
0% {
+
−
-webkit-transform: translateZ(-300px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes MenuAnimIn5 {
+
−
0% {
+
−
-webkit-transform: translateY(40%);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateY(0);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimIn1 {
+
−
0% {
+
−
-webkit-transform: translateZ(-500px) rotateY(0deg);
+
−
transform: translateZ(-500px) rotateY(0deg);
+
−
opacity: 0;
+
−
}
+
−
20% {
+
−
-webkit-transform: translateZ(-250px) rotateY(30deg);
+
−
transform: translateZ(-250px) rotateY(30deg);
+
−
opacity: 0.5;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px) rotateY(0deg);
+
−
transform: translateZ(0px) rotateY(0deg);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimIn2 {
+
−
0% {
+
−
-webkit-transform: translateX(-100%);
+
−
transform: translateX(-100%);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(0px);
+
−
transform: translateX(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimIn3 {
+
−
0% {
+
−
-webkit-transform: translateZ(300px);
+
−
transform: translateZ(300px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px);
+
−
transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimIn4 {
+
−
0% {
+
−
-webkit-transform: translateZ(-300px);
+
−
transform: translateZ(-300px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px);
+
−
transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes MenuAnimIn5 {
+
−
0% {
+
−
-webkit-transform: translateY(40%);
+
−
transform: translateY(40%);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateY(0);
+
−
transform: translateY(0);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-in-1 {
+
−
-webkit-animation: SubMenuAnimIn1 0.4s ease;
+
−
animation: SubMenuAnimIn1 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-in-2 {
+
−
-webkit-animation: SubMenuAnimIn2 0.3s ease-in-out;
+
−
animation: SubMenuAnimIn2 0.3s ease-in-out;
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-in-3 {
+
−
-webkit-animation: SubMenuAnimIn3 0.4s ease;
+
−
animation: SubMenuAnimIn3 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-in-4 {
+
−
-webkit-animation: SubMenuAnimIn4 0.4s ease;
+
−
animation: SubMenuAnimIn4 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-in-5 {
+
−
-webkit-animation: SubMenuAnimIn5 0.4s ease;
+
−
animation: SubMenuAnimIn5 0.4s ease;
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimIn1 {
+
−
0% {
+
−
-webkit-transform: translateX(50%);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimIn2 {
+
−
0% {
+
−
-webkit-transform: translateX(100%);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimIn3 {
+
−
0% {
+
−
-webkit-transform: translateZ(-300px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimIn4 {
+
−
0% {
+
−
-webkit-transform: translateZ(300px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimIn5 {
+
−
0% {
+
−
-webkit-transform: translateZ(-200px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimIn1 {
+
−
0% {
+
−
-webkit-transform: translateX(50%);
+
−
transform: translateX(50%);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(0px);
+
−
transform: translateX(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimIn2 {
+
−
0% {
+
−
-webkit-transform: translateX(100%);
+
−
transform: translateX(100%);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(0px);
+
−
transform: translateX(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimIn3 {
+
−
0% {
+
−
-webkit-transform: translateZ(-300px);
+
−
transform: translateZ(-300px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px);
+
−
transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimIn4 {
+
−
0% {
+
−
-webkit-transform: translateZ(300px);
+
−
transform: translateZ(300px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0px);
+
−
transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimIn5 {
+
−
0% {
+
−
-webkit-transform: translateZ(-200px);
+
−
transform: translateZ(-200px);
+
−
opacity: 0;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(0);
+
−
transform: translateZ(0);
+
−
opacity: 1;
+
−
}
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-out-1 {
+
−
-webkit-animation: SubMenuAnimOut1 0.4s ease;
+
−
animation: SubMenuAnimOut1 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-out-2 {
+
−
-webkit-animation: SubMenuAnimOut2 0.3s ease-in-out;
+
−
animation: SubMenuAnimOut2 0.3s ease-in-out;
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-out-3 {
+
−
-webkit-animation: SubMenuAnimOut3 0.4s ease;
+
−
animation: SubMenuAnimOut3 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-out-4 {
+
−
-webkit-animation: SubMenuAnimOut4 0.4s ease;
+
−
animation: SubMenuAnimOut4 0.4s ease;
+
−
}
+
−
 
+
−
.dl-menuwrapper > .dl-submenu.dl-animate-out-5 {
+
−
-webkit-animation: SubMenuAnimOut5 0.4s ease;
+
−
animation: SubMenuAnimOut5 0.4s ease;
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimOut1 {
+
−
0% {
+
−
-webkit-transform: translateX(0%);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(50%);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimOut2 {
+
−
0% {
+
−
-webkit-transform: translateX(0%);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(100%);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimOut3 {
+
−
0% {
+
−
-webkit-transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(-300px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimOut4 {
+
−
0% {
+
−
-webkit-transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(300px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@-webkit-keyframes SubMenuAnimOut5 {
+
−
0% {
+
−
-webkit-transform: translateZ(0);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(-200px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimOut1 {
+
−
0% {
+
−
-webkit-transform: translateX(0%);
+
−
transform: translateX(0%);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(50%);
+
−
transform: translateX(50%);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimOut2 {
+
−
0% {
+
−
-webkit-transform: translateX(0%);
+
−
transform: translateX(0%);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateX(100%);
+
−
transform: translateX(100%);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimOut3 {
+
−
0% {
+
−
-webkit-transform: translateZ(0px);
+
−
transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(-300px);
+
−
transform: translateZ(-300px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimOut4 {
+
−
0% {
+
−
-webkit-transform: translateZ(0px);
+
−
transform: translateZ(0px);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(300px);
+
−
transform: translateZ(300px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
@keyframes SubMenuAnimOut5 {
+
−
0% {
+
−
-webkit-transform: translateZ(0);
+
−
transform: translateZ(0);
+
−
opacity: 1;
+
−
}
+
−
100% {
+
−
-webkit-transform: translateZ(-200px);
+
−
transform: translateZ(-200px);
+
−
opacity: 0;
+
−
}
+
−
}
+
−
 
+
−
/* No JS Fallback */
+
−
.no-js .dl-menuwrapper .dl-menu {
+
−
position: relative;
+
−
opacity: 1;
+
−
-webkit-transform: none;
+
−
transform: none;
+
−
}
+
−
 
+
−
.no-js .dl-menuwrapper li .dl-submenu {
+
−
display: block;
+
−
}
+
−
 
+
−
.no-js .dl-menuwrapper li.dl-back {
+
−
display: none;
+
−
}
+
−
 
+
−
.no-js .dl-menuwrapper li > a:not(:only-child) {
+
−
background: rgba(0,0,0,0.1);
+
−
}
+
−
 
+
−
.no-js .dl-menuwrapper li > a:not(:only-child):after {
+
−
content: '';
+
−
}
+
−
 
+
−
/* Colors for demos */
+
−
 
+
−
/* Demo 1 */
+
−
.demo-1 .dl-menuwrapper button {
+
−
background: #c62860;
+
−
}
+
−
 
+
−
.demo-1 .dl-menuwrapper button:hover,
+
−
.demo-1 .dl-menuwrapper button.dl-active,
+
−
.demo-1 .dl-menuwrapper ul {
+
−
background: #9e1847;
+
−
}
+
−
 
+
−
/* Demo 2 */
+
−
.demo-2 .dl-menuwrapper button {
+
−
background: #990000;
+
−
}
+
−
 
+
−
.demo-2 .dl-menuwrapper button:hover,
+
−
.demo-2 .dl-menuwrapper button.dl-active,
+
−
.demo-2 .dl-menuwrapper ul {
+
−
background: #990000;
+
−
}
+
−
 
+
−
/* Demo 3 */
+
−
.demo-3 .dl-menuwrapper button {
+
−
background: #08cbc4;
+
−
}
+
−
 
+
−
.demo-3 .dl-menuwrapper button:hover,
+
−
.demo-3 .dl-menuwrapper button.dl-active,
+
−
.demo-3 .dl-menuwrapper ul {
+
−
background: #00b4ae;
+
−
}
+
−
 
+
−
/* Demo 4 */
+
−
.demo-4 .dl-menuwrapper button {
+
−
background: #90b912;
+
−
}
+
−
 
+
−
.demo-4 .dl-menuwrapper button:hover,
+
−
.demo-4 .dl-menuwrapper button.dl-active,
+
−
.demo-4 .dl-menuwrapper ul {
+
−
background: #79a002;
+
−
}
+
−
 
+
−
/* Demo 5 */
+
−
.demo-5 .dl-menuwrapper button {
+
−
background: #744783;
+
−
}
+
−
 
+
−
.demo-5 .dl-menuwrapper button:hover,
+
−
.demo-5 .dl-menuwrapper button.dl-active,
+
−
.demo-5 .dl-menuwrapper ul {
+
−
background: #643771;
+
−
}
+
−
 
+
−
</style>
+
−
 
+
 
</html>
 
</html>

Revision as of 10:23, 27 July 2016


New HTML template for the wiki