/* hide the Off Canvas menu items on larger screens */
#menubar { display: none; }
#menu-btn { display: none; }
#off-canvas-menu { display: none; }
#static-menu { display: inline; }

/* for narrow screens (<= 768px width), thin screens (<= 550px height), or iPad Portrait/Landscape or smaller */
@media only screen and (max-width: 768px), 
       only screen and (max-height: 550px), 
       only screen and (max-width: 1024px) and (max-height: 768px), 
       only screen and (max-width: 768px) and (max-height: 1024px) {

  /* hide the top menu items, display the Home page title and menu button instead */
  #off-canvas-page {
    position: relative;
    top: 30px;
    padding:  0 1em;
    background: #fafafa;
  }
  
  #off-canvas-content {
    clear: both;
    padding-top: 5px;
  }
  
  #menubar {
    display: inline;
    position: fixed;
    top: 0px;
    left: 0px;
    text-align:left;
    padding: 0.5em 0 0 1em;
    width: 100%;
    height: 2em;
    z-index: 10;
    background-color: #fafafa;
    border-bottom-style: solid;
    border-color: #b5b3b3;
    border-width: 1px;
  }
  
  #menu-btn {
    display: inline;
    padding: 15px;   /* make the button bigger for an easier tap-target */
    margin: -15px 0 0 -15px;
  }
  
  #home-btn {
    position: relative;
    float: right;
    top: -2px;
    right: 33px;
    height: 30px;
    width: auto;
    padding: 15px;   /* make the button bigger for an easier tap-target */
    margin: -15px -15px 0 0;
  }
  
  /* static menu for full screen is hidden when using offCanvasMenu */
  #static-menu { display: none; }
  
  #off-canvas-menu { display: inline; }

  /* nav is off screen, setup transitions */
  nav {
    width: 14.5em;
    position: absolute;
    left: -14.5em;
    top: -6px;
    height: 100%;
    background-color: #b5b3b3;
    font-size: 1.0em;
    font-weight: 500;
  }
  
  nav ul {
    padding: 0;
    width: 90%;
  }
  
  /* menu items are displayed vertically */
  nav ul li {
    text-align: left;
    list-style-type: none;
    text-decoration: none;
    display: block;
    float: left;
    margin: 0;
    padding: 7px 0 7px 20px;
    font-size: 1.1em;
    background: #777;
    color: #ffffff;
    line-height: 1.5em;
    border-bottom-style: none;
    border-color: #b5b3b3;
    border-width: 1px;
    width: 100%;
    -moz-border-bottom-right-radius: 0px;
    -webkit-border-bottom-right-radius: 0px;
    border-bottom-right-radius: 0px;
  
    -moz-box-shadow: none;
    -webkit-box-shadow:  none;
    box-shadow: none;
  }
  nav ul li:hover {
    background: #888;
  }
  nav ul li a p { 
    color: #ffffff; 
    width: 100%;
  }
  
  a.open-panel {
    display: inline;
  }
  
  .openNav #off-canvas-page {
      left: 0;
      -webkit-transform: translate3d(14.5em, 0px, 0);
      -moz-transform: translate3d(14.5em, 0px, 0);
      -ms-transform: translate3d(14.5em, 0px, 0);
      -o-transform: translate3d(14.5em, 0px, 0);
      transform: translate3d(14.5em, 0px, 0);
      -webkit-transition: -webkit-transform 500ms ease;
      -moz-transition: -moz-transform 500ms ease;
      -o-transition: -o-transform 500ms ease;
      transition: transform 500ms ease;
  }
  
  /* When the panel is closed, transition the page back to the left */
  #off-canvas-page {
      left: 0;
      -webkit-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
      -webkit-transition: -webkit-transform 500ms ease;
      -moz-transition: -moz-transform 500ms ease;
      -o-transition: -o-transform 500ms ease;
      transition: transform 500ms ease;
  }
}