/* 
Mobile menu styling
Created on 23.04.2014 by Neil Kelsey
Please only use this stylesheet for mobile menu styling
*/
/* Start of structure styling */
/*****     Start of universal styling - used on mobile screen sizes and everything larger     *****/
/* This is an IE11 fix for the postion of the mobile menu as IE11 doesn't listen to 'position:fixed' */
  @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    body.active-sidebar .drawer-wrap
    {  
      right:0px!important;
    }
    a:focus, .sidebar-button:focus
    {
      position: relative;
      z-index: 9;
    }
  }
/*****     End of universal styling used on mobile screen sizes and everything larger     *****/

/*****     Styling for mobile     *****/
 
@media all and (max-width: 767px) {
    #menu-primary-navigation li.document-library
    {
        margin:0 0 0 5px!important;
    }
    nav ul
    {
        position: static;
    }
    .navbar-nav
    {
          float:none!important;
          margin:0;
    }
    .navbar-default
    {
      border:none;
      background: 
            #fff;
    }
    .invisible
    {
          display:none!important;
    }
    .navbar-default .navbar-collapse, .navbar-default .navbar-form
    {
          border:none;
    }
        label.mobile-nav-toggle-label
        {
              display:inline;
        }
    .hidden
    {
          display:none;
    }
    body
    {
          margin:0!important;
    }
    #siteWrapper
    {
          position: relative;
    }
    #siteWrapper
    {
          background-color: #fff;
    }
    #header
    {
          padding: 0 20px;
          background-color: #212121;
          position: relative;
    }
    .header-inner
    {
          padding: 20px 0;
    }
    a.sidebar-button .mobile-nav-toggle-label
    {
          width: 10%;
          position: absolute;
          top: 11px;
          right: 9px;
          cursor: pointer;
          width: 22px;
          height: 22px;
    }
  .mobile-nav-toggle-label .top-bar,
  .mobile-nav-toggle-label .middle-bar,
  .mobile-nav-toggle-label .bottom-bar {
    width: 22px;
    height: 2px;
    background-color: #482a87;
    -webkit-transition: -webkit-transform .15s 0s ease-in-out, top .15s .15s ease-in-out;
    -moz-transition: -moz-transform .15s 0s ease-in-out, top .15s .15s ease-in-out;
    -ms-transition: -ms-transform .15s 0s ease-in-out, top .15s .15s ease-in-out;
    -o-transition: -o-transform .15s 0s ease-in-out, top .15s .15s ease-in-out;
    transition: transform .15s 0s ease-in-out, top .15s .15s ease-in-out;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -o-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    position: absolute;
    top: 0;
    right: 0;
  }
  
  .mobile-nav-toggle-label .middle-bar {
    -webkit-transition: opacity 0s .15s linear;
    -moz-transition: opacity 0s .15s linear;
    -ms-transition: opacity 0s .15s linear;
    -o-transition: opacity 0s .15s linear;
    transition: opacity 0s .15s linear;
    top: 7px;
  }
  
  .mobile-nav-toggle-label .bottom-bar {
    top: 14px;
  }
  .fix-header-nav .mobile-nav-toggle-label.fixed-nav-toggle-label {
    visibility: visible;
    opacity: 1;
  }
  #siteWrapper {
    height: 99.9%;
    width: 100%;
    z-index:0;
    -webkit-transition: -webkit-transform .14s ease-in-out;
    -moz-transition: -moz-transform .14s ease-in-out;
    -ms-transition: -ms-transform .14s ease-in-out;
    -o-transition: -o-transform .14s ease-in-out;
    transition: transform .14s ease-in-out;
  }
  
  #mobileNavWrapper input.search
  {
    width:163px;
    margin:39px 4px 0 20px;
    padding:10px 10px 10px 35px;
    background-position: 11px 11px;
  }
 
  #mobileNavWrapper input#searchsubmit-mobile
  {
    color:#FFF;
    padding:9px;
    margin:0!important;
    background: #482a87;
  }
    /*****     Position the menu button     *****/
  .js .drawer-wrap {  
    width: 270px; 
    z-index: 2; 
    position: fixed;
    right:-270px;
  }
  body.active-sidebar #siteWrapper {
    position: fixed;
    z-index:1;
    height: 100%;
    -webkit-transform: translate3d(-270px, 0, 0);
    -moz-transform: translate3d(-270px, 0, 0);
    -ms-transform: translate3d(-270px, 0, 0);
    -o-transform: translate3d(-270px, 0, 0);
    transform: translate3d(-270px, 0, 0);
  }
    
  body.active-sidebar #siteWrapper .mobile-nav-toggle-label .top-bar,
  body.active-sidebar #siteWrapper .mobile-nav-toggle-label .bottom-bar {
    -webkit-transition: top .15s .15s ease-in-out, -webkit-transform .15s .3s ease-in-out;
    -moz-transition: top .15s .15s ease-in-out, -moz-transform .15s .3s ease-in-out;
    -ms-transition: top .15s .15s ease-in-out, -ms-transform .15s .3s ease-in-out;
    -o-transition: top .15s .15s ease-in-out, -o-transform .15s .3 ease-in-out;
    transition: top .15s .15s ease-in-out, transform .15s .3s ease-in-out;
  }
  
  body.active-sidebar #siteWrapper .mobile-nav-toggle-label .top-bar {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 7px;
  }
  body.active-sidebar #siteWrapper .mobile-nav-toggle-label .middle-bar {
    opacity: 0;
  }
  
  body.active-sidebar #siteWrapper .mobile-nav-toggle-label .bottom-bar {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 7px;
  }
  .sidebar-button
  {
    position: relative;
    top: 9px;
    right:-4px;
    float: right;
    padding:18px 20px 19px 21px;
  }
    button.sidebar-button {background: transparent none repeat scroll 0% 0%; border: medium none;}

  /*****     When the menu is closed this hides the links from the tab index     *****/
  .js .drawer-wrap a, .js .drawer-wrap input#q-mobile, .js .drawer-wrap input#searchsubmit-mobile
  { 
    display:none;
  }
  /*****     Adds the links back in when the sidebar menu is open     *****/
  .active-sidebar .drawer-wrap a
  { 
    display:block;
  }
  .active-sidebar .drawer-wrap input#q-mobile, .active-sidebar .drawer-wrap input#searchsubmit-mobile
  { 
    display:inline-block;
  }
  .drawer-wrap, .content-wrap
  {
    height: 100%;
    background: #d3d3d3;
  }
}
  
/*****     Styling for everything larger then mobile     *****/
@media all and (min-width: 767px) {
  /*****     Hide (burger icon) menu button on everything larger then mobile     *****/
  .sidebar-button {
    display: none;
  }
            
}
/* End of structure styling */
/* End of document */
 








/*****     Temporary styles during switch over process - remove everything under this line after first site publish     *****
/* 
Mobile menu styling
Created on 23.04.2014 by Neil Kelsey
Please only use this stylesheet for mobile menu styling
*/
/* Start of structure styling */
 
 @media (max-width: 767px) and (min-width: 0px)
{
 
        #sidecarNav
    {
              position: fixed;
              width: 270px;
              z-index: 9999;
              top: 0;
              right: -270px;
              bottom: 0;
              height: 100%;
              overflow: auto;
              background-color: #D3D3D3;
        }
      .mobile-nav-toggle-label
    {
            width: 10%;
            position: absolute;
            right:20px;
            top:20px;
            cursor: pointer;
            width: 22px;
            height: 22px;
      }
        button .mobile-nav-toggle-label
    {
            right:10px;
            top:10px;
    }
  
  #mobileNavToggle:checked ~ #siteWrapper {
    position: fixed;
    z-index:-1;
    height: 100%;
    -webkit-transform: translate3d(-270px, 0, 0);
    -moz-transform: translate3d(-270px, 0, 0);
    -ms-transform: translate3d(-270px, 0, 0);
    -o-transform: translate3d(-270px, 0, 0);
    transform: translate3d(-270px, 0, 0);
  }
    
  #mobileNavToggle:checked ~ #siteWrapper .mobile-nav-toggle-label .top-bar,
  #mobileNavToggle:checked ~ #siteWrapper .mobile-nav-toggle-label .bottom-bar {
    -webkit-transition: top .15s .15s ease-in-out, -webkit-transform .15s .3s ease-in-out;
    -moz-transition: top .15s .15s ease-in-out, -moz-transform .15s .3s ease-in-out;
    -ms-transition: top .15s .15s ease-in-out, -ms-transform .15s .3s ease-in-out;
    -o-transition: top .15s .15s ease-in-out, -o-transform .15s .3 ease-in-out;
    transition: top .15s .15s ease-in-out, transform .15s .3s ease-in-out;
  }
  
  #mobileNavToggle:checked ~ #siteWrapper .mobile-nav-toggle-label .top-bar {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 7px;
  }
  #mobileNavToggle:checked ~ #siteWrapper .mobile-nav-toggle-label .middle-bar {
    opacity: 0;
  }
  
  #mobileNavToggle:checked ~ #siteWrapper .mobile-nav-toggle-label .bottom-bar {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -o-transform: rotate(-45deg);
    transform: rotate(-45deg);
    top: 7px;
  }
}
/* End of structure styling */
/* End of document */