/* ------------------------------------------------------------ {{{ {{{2 */
  html, body {
    margin: 0;
    height: 99%;
    background: #afafaf;
  }
  /* ------------------------------------------------------------ */
  #cancan {
    width: 95%;
    height: 90%;
    display: block;
    margin: 0 auto;
  }
  /* hide GUI close button */
  .close-button {
    display: none;
  }
  /* ------------------------------------------------------------ */
  #colortype {
    display: none;
  }
  #pnote {
    float: right;
    padding-right: 100px;
  }
  #file-upload {
    cursor: pointer;
  }
  #drop_zone {
    padding-left: 100px;
  }
  #pnote, #drop_zone {
    font: 13px 'Lucida Grande', sans-serif;
  }
  /* ------------------------------------------------------------ */
  #pantoneselector {
    display: none;
    width: 575px;
    height: 90%;
    right: 0;
  }
  #pantoneselector, #pantoneselector iframe {
    position: absolute;
    top: 0;
  }
  #pantoneselector iframe {
    top: 75px;
    width: 100%;
    height: 100%;
  }
  /* ------------------------------------------------------------ */
  #closePS {
    position: absolute;
    display: none;
    top: 65px;
    right: 0;
  }
  .close {
    position: absolute;
    right: 32px;
    top: 32px;
    width: 32px;
    height: 32px;
    opacity: 0.3;
  }
  .close:hover {
    opacity: 1;
  }
  .close:before, .close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 33px;
    width: 2px;
    background-color: #333;
  }
  .close:before {
    transform: rotate(45deg);
  }
  .close:after {
    transform: rotate(-45deg);
  }
  /* ------------------------------------------------------------ */
  #renderDownload, #renderCancel {
    display: none;
    margin-left: 30px;
    background: #feb;
    border: 2px solid black;
    padding: 2px 4px;
    cursor: pointer;
  }
  #DesignBox .DesignBtn {
    background-color: #0e3d5e;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 90%;
    margin-bottom:10px;
    font-size: 17px;
    border-radius: 21px;
  }
  #DesignBox .DesignBtn { opacity: 0.8; }
  #DesignPopup {
    display: none;
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #0e3d5eaa;
    overflow: hidden;
    z-index: 100;
    top: 0;
    left: 0;
  }
  #DesignBox {
    position: fixed;
    top: 90px;
    left: 35%;
    border: 3px solid #f1f1f1;
  }
  @media only screen and (min-height: 700px) {
    #DesignBox {
      top: 25%;
    }
  }
  #DesignBox {
    background-color: #fff;
    z-index: 9;
    transition: all 0.3s ease-out;
    animation: fadein 0.3s ease-out;
  }
  #DesignBox > img {
    width: 300px;
  }
  #DesignBox > h3 {
    text-align: center;
    padding-bottom: 10px;
  }
  #DesignBox {
    z-index: 100;
    padding: 6px;
  }
  #DesignBox > img, {
    padding: 5px;
    margin-bottom: 7px;
  }
  /* ------------------------------------------------------------ }}}2 }}} */