/**
 * Body CSS
 */

 html,
 body {
   height: 100%;
   background-color: #eee;
 }

 html,
 body,
 input,
 textarea,
 button {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
 }


 /**
  * Layout CSS
  */

 #header {
   position: fixed;
   top: 0;
   right: 0;
   left: 0;
   z-index: 2;
   transition: left 0.2s;
 }

 #sidedrawer {
   position: fixed;
   top: 0;
   bottom: 0;
   width: 200px;
   left: -200px;
   overflow: auto;
   z-index: 2;
   background-color: #fff;
   transition: transform 0.2s;
 }

 #content-wrapper {
   min-height: 100%;
   overflow-x: hidden;
   margin-left: 0px;
   transition: margin-left 0.2s;

   /* sticky bottom */
   box-sizing: border-box;
   margin-bottom: -160px;
   padding-bottom: 160px;
 }

 #footer {
   box-sizing: border-box;
   height: 160px;
   margin-left: 0px;
   transition: margin-left 0.2s;
 }

 @media (min-width: 768px) {
   #header {
     left: 200px;
   }

   #sidedrawer {
     transform: translate(200px);
   }

   #content-wrapper {
     margin-left: 200px;
   }

   #footer {
     margin-left: 200px;
   }

   body.hide-sidedrawer #header {
     left: 0;
   }

   body.hide-sidedrawer #sidedrawer {
     transform: translate(0px);
   }

   body.hide-sidedrawer #content-wrapper {
     margin-left: 0;
   }

   body.hide-sidedrawer #footer {
     margin-left: 0;
   }
 }


 /**
  * Toggle Sidedrawer
  */
 #sidedrawer.active {
   transform: translate(200px);
 }


 /**
  * Header CSS
  */

 .sidedrawer-toggle {
   color: #fff;
   cursor: pointer;
   font-size: 20px;
   line-height: 20px;
   margin-right: 10px;
 }

 .sidedrawer-toggle:hover {
   color: #fff;
   text-decoration: none;
 }


 /**
  * Sidedrawer CSS
  */

 #sidedrawer-brand {
   padding-left: 20px;
 }

 #sidedrawer ul {
   list-style: none;
 }

 #sidedrawer > ul {
   padding-left: 0px;
 }

 #sidedrawer > ul > li:first-child {
   padding-top: 15px;
 }

 #sidedrawer strong {
   display: block;
   padding: 15px 22px;
   cursor: pointer;
 }

 #sidedrawer strong:hover {
   background-color: #E0E0E0;
 }

 #sidedrawer strong + ul > li {
   padding: 6px 0px;
 }


 /**
  * Footer CSS
  */

 #footer {
   background-color: #0288D1;
   color: #fff;
 }

 #footer a {
   color: #fff;
   text-decoration: underline;
 }