Difference between revisions of "Team:Birkbeck/Test"

Line 1: Line 1:
−
<!-- Declare that you are going to use html code instead of wiki code -->
+
<!--[if lte IE 8]>
−
<html>
+
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
 +
<![endif]-->
 +
<!--[if gt IE 8]><!-->
 +
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
 +
<!--<![endif]-->
  
−
<script>
+
<style>
−
(function (window, document) {
+
.custom-wrapper {
−
var menu = document.getElementById('menu'),
+
    background-color: #ffd390;
−
     WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';
+
    margin-bottom: 1em;
 +
    -webkit-font-smoothing: antialiased;
 +
    height: 2.1em;
 +
     overflow: hidden;
 +
    -webkit-transition: height 0.5s;
 +
    -moz-transition: height 0.5s;
 +
    -ms-transition: height 0.5s;
 +
    transition: height 0.5s;
 +
}
  
−
function toggleHorizontal() {
+
.custom-wrapper.open {
−
    [].forEach.call(
+
     height: 14em;
−
        document.getElementById('menu').querySelectorAll('.custom-can-transform'),
+
}
−
        function(el){
+
−
            el.classList.toggle('pure-menu-horizontal');
+
−
        }
+
−
     );
+
−
};
+
  
−
function toggleMenu() {
+
.custom-menu-3 {
−
    // set timeout so that the panel has a chance to roll up
+
     text-align: right;
−
    // before the menu switches states
+
}
−
    if (menu.classList.contains('open')) {
+
−
        setTimeout(toggleHorizontal, 500);
+
−
     }
+
−
    else {
+
−
        toggleHorizontal();
+
−
    }
+
−
    menu.classList.toggle('open');
+
−
    document.getElementById('toggle').classList.toggle('x');
+
−
};
+
  
−
function closeMenu() {
+
.custom-toggle {
−
     if (menu.classList.contains('open')) {
+
     width: 34px;
−
        toggleMenu();
+
    height: 34px;
−
     }
+
     display: block;
 +
    position: absolute;
 +
    top: 0;
 +
    right: 0;
 +
    display: none;
 
}
 
}
  
−
document.getElementById('toggle').addEventListener('click', function (e) {
+
.custom-toggle .bar {
−
     toggleMenu();
+
     background-color: #777;
−
});
+
    display: block;
 +
    width: 20px;
 +
    height: 2px;
 +
    border-radius: 100px;
 +
    position: absolute;
 +
    top: 18px;
 +
    right: 7px;
 +
    -webkit-transition: all 0.5s;
 +
    -moz-transition: all 0.5s;
 +
    -ms-transition: all 0.5s;
 +
    transition: all 0.5s;
 +
}
  
−
window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu);
+
.custom-toggle .bar:first-child {
−
})(this, this.document);
+
    -webkit-transform: translateY(-6px);
 +
    -moz-transform: translateY(-6px);
 +
    -ms-transform: translateY(-6px);
 +
    transform: translateY(-6px);
 +
}
 +
 
 +
.custom-toggle.x .bar {
 +
    -webkit-transform: rotate(45deg);
 +
    -moz-transform: rotate(45deg);
 +
    -ms-transform: rotate(45deg);
 +
    transform: rotate(45deg);
 +
}
 +
 
 +
.custom-toggle.x .bar:first-child {
 +
    -webkit-transform: rotate(-45deg);
 +
    -moz-transform: rotate(-45deg);
 +
    -ms-transform: rotate(-45deg);
 +
    transform: rotate(-45deg);
 +
}
 +
 
 +
@media (max-width: 47.999em) {
  
−
</script>
+
    .custom-menu-3 {
−
<!-- Start of CSS-->
+
        text-align: left;
−
<!--[if lte IE 8]>
+
    }
−
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css">
+
 
−
<![endif]-->
+
    .custom-toggle {
−
<!--[if gt IE 8]><!-->
+
        display: block;
−
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">
+
    }
−
<!--<![endif]-->
+
 
 +
}
 +
</style>
 +
<div class="custom-wrapper pure-g" id="menu">
 +
    <div class="pure-u-1 pure-u-md-1-3">
 +
        <div class="pure-menu">
 +
            <a href="#" class="pure-menu-heading custom-brand">Brand</a>
 +
            <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
 +
        </div>
 +
    </div>
 +
    <div class="pure-u-1 pure-u-md-1-3">
 +
        <div class="pure-menu pure-menu-horizontal custom-can-transform">
 +
            <ul class="pure-menu-list">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
 +
            </ul>
 +
        </div>
 +
    </div>
 +
    <div class="pure-u-1 pure-u-md-1-3">
 +
        <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
 +
            <ul class="pure-menu-list">
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
 +
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
 +
            </ul>
 +
        </div>
 +
    </div>
 +
</div>
 
<script>
 
<script>
 
(function (window, document) {
 
(function (window, document) {
Line 91: Line 151:
  
 
</script>
 
</script>
−
<style type="text/css">
 
−
 
−
/* PAGE LAYOUT */
 
−
 
−
/* Change Background color*/
 
−
body {
 
−
background-color: #fff;
 
−
}
 
−
                       
 
−
                        #content {
 
−
                                position: relative;
 
−
                                width:  99.5%;
 
−
                                margin: 0 auto;
 
−
                                padding: 0px;
 
−
                               
 
−
                                background: white;
 
−
                                color: black;
 
−
                                /*border-left: 1px solid #444444;
 
−
                                border-right: 1px solid #444444;*/
 
−
                                line-height: 1.5em;
 
−
                                z-index: 2;
 
−
}
 
−
 
−
/* Creates a container that will wrap all of the content inside your wiki pages. */
 
−
#mainContainer { 
 
−
width: 100%;
 
−
overflow:hidden;
 
−
/*float:left;*/
 
−
/*margin-left:20px;*/
 
−
margin-bottom: 10px;
 
−
background-color: #fff;
 
−
border-bottom: 14px solid #565656;
 
−
/*border-right: 2px solid #565656;
 
−
border-left: 2px solid #565656;*/
 
−
border-top: 2px solid #565656;
 
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
−
}
 
−
 
−
/* Creates the container for the menu */
 
−
#menuContainer  {
 
−
float:left;
 
−
width: 314px;
 
−
padding: 20px 0px;
 
−
border-top: 14px solid #565656;
 
−
background-color: #E8E8E9;
 
−
}
 
−
                        .firstHeading {
 
−
                                display: none;
 
−
                        }
 
−
 
−
/* Creates the container for the content */
 
−
#contentContainer {
 
−
padding-top:20px;
 
−
padding-right:10px;
 
−
margin-bottom: 20px;
 
−
width: 80%;
 
−
padding-left: 20px;
 
−
float: left;
 
−
background-color: #fff;
 
−
border-top: 14px solid #565656;
 
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
−
}
 
−
 
−
/*Set up height place holder for the banner*/
 
−
#bannerContainer {
 
−
height:200px;
 
−
margin:auto;
 
−
text-align:center;
 
−
color: #24B694;
 
−
}
 
−
 
−
/*VISUAL STYLE (TABLES, FONTS, LINKS, IMAGES, UL) */
 
−
 
−
/*Change the styling of text for everything inside main container*/
 
−
#mainContainer p {
 
−
font-size: 13px;
 
−
color: #000000;
 
−
}
 
−
 
−
/*This changes the color and font family */
 
−
#contentContainer h1, h2, h3, h4, h5, h6 {
 
−
color: #565656;
 
−
border-bottom: none;
 
−
font-weight: bold;
 
−
font-family: "Trebuchet MS", Helvetica, sans-serif;
 
−
margin-top:10px;
 
−
}
 
−
 
−
/*Style of the links - links are different inside the menu */
 
−
#contentContainer a {
 
−
font-weight: bold;
 
−
color: #23b593;
 
−
}
 
−
 
−
  /* Styling links on hover- links are different inside the menu */
 
−
#contentContainer a:hover {
 
−
color: #59bf92;
 
−
}
 
−
 
−
/*Change the styling of tables */
 
−
        #contentContainer table {
 
−
    border: 1px solid #565656;
 
−
    border-collapse: collapse;
 
−
    width: 90%
 
−
    margin: auto;
 
−
    margin-bottom: 15px;
 
−
    margin-top: 15px;
 
−
    margin-right: 10px;
 
−
    margin-left: 10px;
 
−
    }
 
−
 
−
/*Change the styling of table cells*/
 
−
    #contentContainer  td {
 
−
    padding: 10px;
 
−
    border: 1px solid #565656;
 
−
    border-collapse: collapse;
 
−
    vertical-align: text-top;
 
−
    }
 
−
 
−
/*Change the styling of table headers */
 
−
    #contentContainer th {
 
−
    background-color: #E8E8E9;
 
−
    padding: 10px;
 
−
    border: 1px solid #565656;
 
−
    border-collapse: collapse;
 
−
    vertical-align: text-top;
 
−
    }
 
−
 
−
 
−
 
−
/*MENU STYLING */
 
−
 
−
/*Styling for the links in the menu */
 
−
<!--/*#menuContainer a {
 
−
color: #565656;
 
−
text-decoration:none;
 
−
font-weight: bold;
 
−
}
 
−
 
−
/* Sets the style for lists inside menuContainer  */
 
−
<!--/*#menuContainer ul {
 
−
list-style: none;
 
−
margin-left:0px;
 
−
}
 
−
 
−
/*Styles the list items to become menu buttons */
 
−
<!--/*#menuContainer ul li {
 
−
text-align: center;
 
−
display: block;
 
−
width: 100%;
 
−
height:30px;
 
−
padding-top:10px;
 
−
}
 
−
 
−
/*For the menu buttons, changes the color when hovering*/
 
−
<!--/*#menuContainer li:hover {
 
−
color:  #FFF;
 
−
background-color: #ffd390;
 
−
}
 
−
 
−
/*Submenus are not displayed as default*/
 
−
<!--/*#menuContainer li ul {
 
−
display: none;
 
−
padding-top:15px;
 
−
margin-left: -19px;
 
−
}
 
−
 
−
/*Submenus are displayed when hovering the menu button */
 
−
<!--/*#menuContainer li:hover ul {
 
−
/*display: inline-block; */
 
−
<!--/*display: block;
 
−
position: absolute;
 
−
float:right;
 
−
margin-left: 134px;
 
−
margin-top:-42px;
 
−
}
 
−
 
−
/*Style the submenu buttons*/
 
−
<!--/*#menuContainer li ul li{
 
−
background-color: #59BF92;
 
−
padding-left:20px;
 
−
padding-right:20px;
 
−
height:30px;
 
−
padding-top:10px;
 
−
margin-top:-2px;
 
−
color: #565656;
 
−
width: 150px;
 
−
}
 
−
*/
 
−
                .custom-wrapper {
 
−
                background-color: #d4f1fa;
 
−
                margin-bottom: 1em;
 
−
                -webkit-font-smoothing: antialiased;
 
−
                height: 2.1em;
 
−
                overflow: hidden;
 
−
                -webkit-transition: height 0.5s;
 
−
                -moz-transition: height 0.5s;
 
−
                -ms-transition: height 0.5s;
 
−
                transition: height 0.5s;
 
−
            }
 
−
 
−
                .custom-wrapper.open {
 
−
                height: 100%;
 
−
            }
 
−
 
−
                .custom-menu-3 {
 
−
                text-align: center;
 
−
            }
 
−
 
−
                .custom-toggle {
 
−
                width: 34px;
 
−
                height: 34px;
 
−
                display: block;
 
−
                position: absolute;
 
−
                top: 0;
 
−
                right: 0;
 
−
                display: none;
 
−
            }
 
−
 
−
                .custom-toggle .bar {
 
−
                background-color: #777;
 
−
                display: block;
 
−
                width: 20px;
 
−
                height: 2px;
 
−
                border-radius: 100px;
 
−
                position: absolute;
 
−
                top: 18px;
 
−
                right: 7px;
 
−
                -webkit-transition: all 0.5s;
 
−
                -moz-transition: all 0.5s;
 
−
                -ms-transition: all 0.5s;
 
−
                transition: all 0.5s;
 
−
            }
 
−
 
−
                .custom-toggle .bar:first-child {
 
−
                -webkit-transform: translateY(-6px);
 
−
                -moz-transform: translateY(-6px);
 
−
                -ms-transform: translateY(-6px);
 
−
                transform: translateY(-6px);
 
−
            }
 
−
 
−
                .custom-toggle.x .bar {
 
−
                -webkit-transform: rotate(45deg);
 
−
                -moz-transform: rotate(45deg);
 
−
                -ms-transform: rotate(45deg);
 
−
                transform: rotate(45deg);
 
−
            }
 
−
 
−
                .custom-toggle.x .bar:first-child {
 
−
                -webkit-transform: rotate(-45deg);
 
−
                -moz-transform: rotate(-45deg);
 
−
                -ms-transform: rotate(-45deg);
 
−
                transform: rotate(-45deg);
 
−
            }
 
−
 
−
                @media (max-width: 47.999em) {
 
−
 
−
                .custom-menu-1 {
 
−
                text-align: center;
 
−
            }
 
−
 
−
                .custom-toggle {
 
−
                display: block;
 
−
            }
 
−
 
−
}
 
−
 
−
/*CLASSES */
 
−
 
−
/*Clear class for all the pages, adds spacing too*/
 
−
.clear{
 
−
clear:both;
 
−
height: 10px;
 
−
}
 
−
 
−
 
−
/* highlight box for special messages */
 
−
    .highlightBox {
 
−
    width:400px;
 
−
    margin:auto;
 
−
    background-color: #E8E8E9;
 
−
margin-bottom: 15px;
 
−
margin-top: 15px;
 
−
padding: 15px;
 
−
padding-top: 5px;
 
−
    }
 
−
 
−
 
−
</style>
 
−
<!-- End of CSS -->
 
−
 
−
<!-- Start of the template html elements. -->
 
−
<div id="mainContainer"><!--The closing tag for mainContainer should be placed at the bottom of each content page.-->
 
−
 
−
 
−
<div id="bannerContainer">
 
−
<br><br>
 
−
<h2> Add a banner to your wiki! </h2>
 
−
 
−
<p>You can make the image 980px  by  200px</p>
 
−
<p> Remember to call the file: "<i>Team_Birkbeck_banner.jpg</i>" </p>
 
−
</div>
 
−
 
−
<!-- Start of menu -->
 
−
<div class="custom-wrapper pure-g" id="menu">
 
−
    <!--/*<div class="pure-u-1 pure-u-md-1-3">*/-->
 
−
      <!--/* <div class="pure-menu">*/-->
 
−
            <!--/*<a href="#" class="pure-menu-heading custom-brand">Brand</a>
 
−
            <a href="#" class="custom-toggle" id="toggle"><s class="bar"></s><s class="bar"></s></a>
 
−
        </div>
 
−
    </div>*/-->
 
−
    <div class="pure-u-1 pure-u-md-1-3">
 
−
        <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
 
−
            <ul class="pure-menu-list">
 
−
<a href="https://2015.igem.org/Team:Birkbeck" class="pure-menu-heading custom-brand">HOME</a></li>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Team" class="pure-menu-heading custom-brand">TEAM</a></li>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Description">PROJECT</a></li>
 
−
            <!--/*<ul>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Description" class="pure-menu-heading custom-brand">Description</li></a>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Experiments" class="pure-menu-heading custom-brand">Experiments & Protocols</li></a>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Results" class="pure-menu-heading custom-brand">Results</li></a>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Design" class="pure-menu-heading custom-brand">Design</li></a>
 
−
</li>
 
−
</li></a>*/-->
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Parts">PARTS</a></li>
 
−
                <!--/*<ul>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Parts" class="pure-menu-heading custom-brand">Team Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Basic_Part" class="pure-menu-heading custom-brand">Basic Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Composite_Part" class="pure-menu-heading custom-brand">Composite Parts</li></a>
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/Part_Collection" class="pure-menu-heading custom-brand">Part Collection</li></a>
 
−
</li></a>*/-->
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Notebook" class="pure-menu-heading custom-brand">NOTEBOOK</a></li>
 
−
</ul>
 
−
        </div>
 
−
    </div>
 
−
 
−
 
−
<div class="pure-u-1 pure-u-md-1-3">
 
−
        <div class="pure-menu pure-menu-horizontal custom-can-transform">
 
−
            <ul class="pure-menu-list">
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/Attributions" class="pure-menu-heading custom-brand">ATTRIBUTIONS</a></li>
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/Collaborations" class="pure-menu-heading custom-brand">COLLABORATIONS</a></li>
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/Practices" class="pure-menu-heading custom-brand">HUMAN PRACTICES</a></li>
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/Safety" class="pure-menu-heading custom-brand">SAFETY</a></li>
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/Modeling" class="pure-menu-heading custom-brand">MODELING</a></li>
 
−
</ul>
 
−
</div>
 
−
</div>
 
−
 
−
<!-- Something is possibly wrong here! -->
 
−
 
−
    <div class="pure-u-1 pure-u-md-1-3">
 
−
        <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
 
−
            <ul class="pure-menu-list">
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/Measurement" class="pure-menu-heading custom-brand">MEASUREMENT</a></li>
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/Software" class="pure-menu-heading custom-brand">SOFTWARE</a></li>
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/Entrepreneurship" class="pure-menu-heading custom-brand">ENTREPRENEURSHIP</a></li>
 
−
<li class="pure-menu-item"><a href="https://2015.igem.org/Team:Birkbeck/InterLab Study" class="pure-menu-heading custom-brand">INTERLAB STUDY</a></li>
 
−
                </ul>
 
−
            </div>
 
−
        </div>
 
−
</div>
 
−
 
−
                <!--/*<li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
 
−
            </ul>
 
−
        </div>
 
−
    </div>
 
−
    <div class="pure-u-1 pure-u-md-1-3">
 
−
        <div class="pure-menu pure-menu-horizontal custom-menu-3 custom-can-transform">
 
−
            <ul class="pure-menu-list">
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">Yahoo</a></li>
 
−
                <li class="pure-menu-item"><a href="#" class="pure-menu-link">W3C</a></li>
 
−
            </ul>
 
−
        </div>
 
−
    </div>
 
−
</div>*/-->
 
−
 
−
<!--/*<div id="menuContainer">*/-->
 
−
 
−
<!-- This list is your menu, every list item is a menu button and nested listed become submenu buttons -->
 
−
<!--/*<ul>
 
−
<a href="https://2015.igem.org/Team:Birkbeck"><li>HOME</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Team"><li>TEAM</li></a>
 
−
 
−
<a href="#"><li>PROJECT
 
−
            <ul>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Description"><li>Description</li></a>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Experiments"><li>Experiments &amp; Protocols</li></a> 
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Results"><li>Results</li></a> 
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Design"><li>Design</li></a>
 
−
</ul>
 
−
</li></a>
 
−
 
−
<a href="#"><li>PARTS
 
−
            <ul>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Parts"><li>Team Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Basic_Part"><li>Basic Parts</li></a> 
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Composite_Part"><li>Composite Parts</li></a>
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Part_Collection"><li>Part Collection</li></a> 
 
−
</ul>
 
−
</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Notebook"><li>NOTEBOOK</li></a>
 
−
     
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Attributions"><li>ATTRIBUTIONS</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Collaborations"><li>COLLABORATIONS</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Practices"><li>HUMAN PRACTICES</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Safety"><li>SAFETY</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Modeling"><li>MODELING</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Measurement"><li>MEASUREMENT</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Software"><li>SOFTWARE</li></a>
 
−
 
−
<a href="https://2015.igem.org/Team:Birkbeck/Entrepreneurship"><li>ENTREPRENEURSHIP</li></a>
 
−
                                        <a href="https://2015.igem.org/Team:Birkbeck/InterLab Study"><li>INTERLAB STUDY</li></a>
 
−
</ul>
 
−
</div>*/-->
 
−
<!-- End of menu  -->
 
−
 
−
<!-- Start of content -->
 
−
<div id="contentContainer"> <!--The closing tag for contentContainer should be placed at the bottom of each content page.-->
 
−
</html>
 

Revision as of 10:02, 22 July 2015

   <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

<style> .custom-wrapper { 

   background-color: #ffd390;
   margin-bottom: 1em;
   -webkit-font-smoothing: antialiased;
   height: 2.1em;
   overflow: hidden;
   -webkit-transition: height 0.5s;
   -moz-transition: height 0.5s;
   -ms-transition: height 0.5s;
   transition: height 0.5s;

}

.custom-wrapper.open { 

   height: 14em;

}

.custom-menu-3 { 

   text-align: right;

}

.custom-toggle { 

   width: 34px;
   height: 34px;
   display: block;
   position: absolute;
   top: 0;
   right: 0;
   display: none;

}

.custom-toggle .bar { 

   background-color: #777;
   display: block;
   width: 20px;
   height: 2px;
   border-radius: 100px;
   position: absolute;
   top: 18px;
   right: 7px;
   -webkit-transition: all 0.5s;
   -moz-transition: all 0.5s;
   -ms-transition: all 0.5s;
   transition: all 0.5s;

}

.custom-toggle .bar:first-child { 

   -webkit-transform: translateY(-6px);
   -moz-transform: translateY(-6px);
   -ms-transform: translateY(-6px);
   transform: translateY(-6px);

}

.custom-toggle.x .bar { 

   -webkit-transform: rotate(45deg);
   -moz-transform: rotate(45deg);
   -ms-transform: rotate(45deg);
   transform: rotate(45deg);

}

.custom-toggle.x .bar:first-child { 

   -webkit-transform: rotate(-45deg);
   -moz-transform: rotate(-45deg);
   -ms-transform: rotate(-45deg);
   transform: rotate(-45deg);

}

@media (max-width: 47.999em) { 

   .custom-menu-3 {
       text-align: left;
   }

   .custom-toggle {
       display: block;
   }

} </style>

<script> (function (window, document) { var menu = document.getElementById('menu'), 

   WINDOW_CHANGE_EVENT = ('onorientationchange' in window) ? 'orientationchange':'resize';

function toggleHorizontal() { 

   [].forEach.call(
       document.getElementById('menu').querySelectorAll('.custom-can-transform'),
       function(el){
           el.classList.toggle('pure-menu-horizontal');
       }
   );

};

function toggleMenu() { 

   // set timeout so that the panel has a chance to roll up
   // before the menu switches states
   if (menu.classList.contains('open')) {
       setTimeout(toggleHorizontal, 500);
   }
   else {
       toggleHorizontal();
   }
   menu.classList.toggle('open');
   document.getElementById('toggle').classList.toggle('x');

};

function closeMenu() { 

   if (menu.classList.contains('open')) {
       toggleMenu();
   }

}

document.getElementById('toggle').addEventListener('click', function (e) { 

   toggleMenu();

});

window.addEventListener(WINDOW_CHANGE_EVENT, closeMenu); })(this, this.document);

</script>