/** 
 ** 
 ** Based on Chris Coyier "Off Canvas Menu with CSS :target" - http://css-tricks.com/off-canvas-menu-with-css-target/
 ** 
 **/
* {
  box-sizing: border-box;
}

@import url(http://weloveiconfonts.com/api/?family=entypo);

/* entypo */
[class*="entypo-"]:before {
  font-family: 'entypo', sans-serif;
}


html, body { min-height: 100%; }
a { text-decoration: none; }

$main_nav_h: 65px;

.main-header {
  color: white; background: #4C4C4C; 
  height: $main_nav_h; padding: 12px 5px 5px 70px;
  position: fixed; width: 100%; left: 0;
  a {
    position: absolute; left: 20px; top: 7px;
    color: white;
    font-size: 32px;
  }
  h1 { font-size: 1em; font-weight: normal; }
}

.page-wrap {
  float: right; width: 100%;
  transition: width 0.4s ease;
}

.main-nav {
  position: fixed; top: $main_nav_h; width: 0; height: 100%;
  background: #272727;
  overflow-y: auto;
  transition: width 0.4s ease;
  .icon { display: inline-block; padding-right: .5em; }
  a {
    display: block;
    color: white; white-space:nowrap;
    margin-left: -3.5em;
    padding: 15px; border-top: 1px solid #484848; border-bottom: 1px solid #2E2E2E;
    transition: margin 0.5s ease;
    &:hover, &:focus {
      background: #7AB800;
    }
  }
}

.content {
  padding: 90px 20px 20px 20px;
}

.close-menu {
  display: none;
}

#main-nav:target {
  width: 20%;
  a { margin-left: 0; }
}
#main-nav:target ~ .page-wrap {
  width: 80%;
}
#main-nav:target ~ .main-header {
  .open-menu {
     display: none; 
  }
  .close-menu {
     display: block;
  }
}