/*
 * smenu.css - Simple navigation menu
 * 
 * based on ideas and code from
 * http://learn.shayhowe.com/advanced-html-css/complex-selectors/
 * https://webdesignerhut.com/pure-css-off-canvas-navigation-menu/
 * 
 * Copyright 2017 Tamas Meszaros <mt+github@webit.hu>
 * This file licensed under Mozilla Public License v2.0 http://mozilla.org/MPL/2.0/
 */

#smenu {
  display: block;
  width: 300px;
  min-height: 100%;
  top: 0;
  z-index: 9999;
  position:fixed;
  background: #34495e;
  color: #fff;
  -webkit-transition: left 2s;
  transition: left 2s;
}

#smenu .menu-toggle {
  position: absolute;
  top: 25px;
  height: 24px;
  width: 30px;
  cursor: pointer;
  left: 305px;
}

#smenu span {
  display: block;
  font-size: 22px;
  margin: 20px 10px;
}

#smenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#smenu ul li {
  font-size:19px;
  border-bottom: 1px solid #2c3e50;
}

#smenu ul li a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color:#fff;
}

#smenu ul ul li {
  background-color: #2c3e50;
}

#smenu ul li form,
#smenu ul li a:hover,
#smenu ul ul li a {
  padding: 10px 10px 10px 30px;
}

#smenu ul ul li a:hover {
  padding: 10px 10px 10px 60px;
}

#smenu ul li a,
#smenu ul li a:hover,
#smenu ul ul li a,
#smenu ul ul li a:hover {
  -webkit-transition: padding 0.5s; /* Safari 3.1 to 6.0 */
  transition: padding 0.5s;
}


/* Hiding menu-toggle and dropdown* checkboxes */
#smenu-toggle,
input[id^="dropdown"],
ul[class^="dropdown"] {
  display: none;
}

/* Pushing the Menu off the canvas */
#smenu {
  left: -300px; /* must be the same as the width of the menu */
}

/* Showing the menu then the Checkbox is checked */
#smenu-toggle:checked + #smenu {
  left: 0;
  -webkit-transition: left 1s; /* Safari 3.1 to 6.0 */
  transition: left 1s;
}

/* showing dropdown menus if their parent is checked */
input[id^="dropdown"]:checked + ul[class^="dropdown"] {
  height: auto;
  display: block;
}

/* our favourite hamburger icon */
label[for="smenu-toggle"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='24px' viewBox='0 0 30 24' enable-background='new 0 0 30 24' xml:space='preserve'><rect width='30' height='4' fill='lightblue' /><rect y='20' width='30' height='4' fill='lightblue'/><rect y='10' width='30' height='4' fill='lightblue'/></svg>");
  background-size: contain;
}