/* Body animation when left panel is opened */
    body.ps-active {
      -webkit-transform: translateX(260px);
      -ms-transform: translateX(260px);
      transform: translateX(260px);
    }

    /* Body animation when right panel is opened */
    body.ps-active-right {
      -webkit-transform: translateX(-260px);
      -ms-transform: translateX(-260px);
      transform: translateX(-260px);
    }

    /* Panel styles */
    .panel {
      position: fixed;
      top: 0;
      width: 220px;
      height: 100%;
      padding: 20px;
      background-color: #333;
      color: #fff;
      box-shadow: inset 0 0 5px 5px #222;
    }

    #left-panel {
      left: 0;

      /* Hide panel on the left of the page. When this panel is opened the
      class .ps-active will be apllied to body, and it's X translation will
      reveal the panel. */
      -webkit-transform: translateX(-260px);
      -ms-transform: translateX(-260px);
      transform: translateX(-260px);
    }

    #right-panel {
      right: 0;

      /* Hide panel on the right of the page. When this panel is opened the
      class .ps-active-right will be apllied to body, and it's X translation
      will reveal the panel. */
      -webkit-transform: translateX(260px);
      -ms-transform: translateX(260px);
      transform: translateX(260px);
    }

    /* Page style */
    h1, h2 {
      margin-top: 0;
    }

    p {
      color: #ccc;
      line-height: 1.5;
    }

    #page {
      width: 940px;
      height: 400px;
      padding: 20px;
      margin: 0 auto;
      background: white;
    }