/*
==================================================================
    File Name: Responsive SCSS
==================================================================
*/

@media (max-width: 750px){

  // BOARD WRAP
  #boardWrap {

    // Container
    .x-container {
      .controller {
        background-position: 0 -167px !important;
        &.prev-page {
          margin-left: -370px;
        }
        &.next-page {
          margin-right: -370px;
        }
      }
    }

  }

}

@media (max-width: 1025px){

  body {
    min-width: 100%;
  }

  // BOARD WRAP
  #boardWrap {
    padding-right: 0;

    .x-sidebar {
      width: 0;
      border-left: 5px solid #ccc;
      @include shadow(-2px 0 10px rgba(#000, .5));

      .responsive-toggle {
        left: -42px;
      }

      .sidebar-inner {
        position: relative;
        overflow: hidden;
      }

      &.active {
        .sidebar-inner {
          overflow: inherit;
        }
      }
    }

    .x-footer {
      padding-right: 0;
    }

    .x-container {
      padding: 10px;

      .scrollbar {
        .iframe {
          overflow-y: auto;
          overflow-x: hidden !important;
          iframe {
            overflow: hidden !important;
          }
        }
      }

      .controller {
        &.prev-page {
          left: 30px;
          margin-left: 0;
          margin-right: 0;
        }
        &.next-page {
          margin-left: 0;
          margin-right: 0px;
          right: 30px;
        }
      }
    }
  }

}

@media (max-width: 480px){
  body {
    min-width: 780px;
  }
}

html.mobile, html.touch, html.tablet {
  .x-sidebar {
    .responsive-toggle {
      left: -42px;
    }
  }
}

@media (max-height: 800px){
  #boardWrap {
    padding-top: 40px;
    padding-bottom: 35px;

    // header
    .x-header {
      height: 40px;

      .book-title {
        font-size: 19px;
        line-height: 40px;
      }
      .fRight {
        margin-top: -8px;
      }
    }

    // sidebar
    .x-sidebar {
      padding-top: 40px;
      .bottom {
        height: 35px;
        .page-number {
          font-size: 15px;
          line-height: 38px;
        }
        .page-loader {
          margin-top: 16px;
        }
        .page-percent {
          line-height: 40px;
        }
      }
    }

    // footer
    .x-footer {
      height: 35px;
      .pagination {
        height: 35px;
        margin: 0;
        background: none;
        margin-top: 0;
        .g-sb {
          margin-top: 4px;
        }
      }
    }

    // container
    .x-container {
      padding-top: 5px;
      padding-bottom: 0;
    }
  }
}