.crop-holder {
  direction: ltr;
  text-align: left;
}
/* Selection Border */
.crop-vline,
.crop-hline {
  background: #ffffff url("../i/crop.gif");
  font-size: 0;
  position: absolute;
}
.crop-vline {
  height: 100%;
  width: 1px !important;
}
.crop-vline.right {
  right: 0;
}
.crop-hline {
  height: 1px !important;
  width: 100%;
}
.crop-hline.bottom {
  bottom: 0;
}
/* Invisible click targets */
.crop-tracker {
  height: 100%;
  width: 100%;
  z-index: 300;
  /* "turn off" link highlight */
  -webkit-tap-highlight-color: transparent;
  /* disable callout, image save panel */
  -webkit-touch-callout: none;
  /* disable cut copy paste */
  -webkit-user-select: none;
}
body.ie .crop-tracker {
  font-size: 1000px;
  cursor: move;
  display: block;
  overflow: hidden;
}
body.ie .crop-tracker:before {
  border: 10050px solid transparent;
  content: "\20";
  display: block;
}
/* Selection Handles */
.crop-handle {
  background-color: rgba(136, 186, 217, 0.8);
  border: 1px #fafafa solid;
  width: 12px;
  height: 12px;
  z-index: 300;
}
.crop-handle:before {
  content: "\20";
  height: 24px;
  left: -8px;
  position: absolute;
  width: 24px;
  top: -8px;
}
body.ie .crop-handle {
  background: #fff;
}
body.ie .crop-handle:before {
  border: 6px solid #88bad9;
  display: block;
  content: "\20";
  height: 0;
  left: 0;
  overflow: hidden;
  top: 0;
  width: 0;
}
.crop-handle.ord-n {
  left: 50%;
  margin-left: -6px;
  margin-top: -6px;
  top: 0;
}
.crop-handle.ord-s {
  bottom: 0;
  left: 50%;
  margin-bottom: -6px;
  margin-left: -6px;
}
.crop-handle.ord-e {
  margin-right: -6px;
  margin-top: -6px;
  right: 0;
  top: 50%;
}
.crop-handle.ord-w {
  left: 0;
  margin-left: -6px;
  margin-top: -6px;
  top: 50%;
}
.crop-handle.ord-nw {
  left: 0;
  margin-left: -6px;
  margin-top: -6px;
  top: 0;
}
.crop-handle.ord-ne {
  margin-right: -6px;
  margin-top: -6px;
  right: 0;
  top: 0;
}
.crop-handle.ord-se {
  bottom: 0;
  margin-bottom: -6px;
  margin-right: -6px;
  right: 0;
}
.crop-handle.ord-sw {
  bottom: 0;
  left: 0;
  margin-bottom: -6px;
  margin-left: -6px;
}
/* Dragbars */
.crop-dragbar.ord-n,
.crop-dragbar.ord-s {
  height: 7px;
  width: 100%;
}
.crop-dragbar.ord-e,
.crop-dragbar.ord-w {
  height: 100%;
  width: 7px;
}
.crop-dragbar.ord-n {
  margin-top: -32px;
}
.crop-dragbar.ord-s {
  bottom: 0;
  margin-bottom: -32px;
}
.crop-dragbar.ord-e {
  margin-right: -32px;
  right: 0;
}
.crop-dragbar.ord-w {
  margin-left: -32px;
}
/* The "crop-light" class/extension */
.crop-light .crop-vline,
.crop-light .crop-hline {
  background: #ffffff;
  filter: alpha(opacity=70) !important;
  opacity: .70!important;
}
.crop-light .crop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #000000;
  border-color: #ffffff;
  border-radius: 3px;
}
/* The "crop-dark" class/extension */
.crop-dark .crop-vline,
.crop-dark .crop-hline {
  background: #000000;
  filter: alpha(opacity=70) !important;
  opacity: 0.7 !important;
}
.crop-dark .crop-handle {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  background-color: #ffffff;
  border-color: #000000;
  border-radius: 3px;
}
/* Simple macro to turn off the antlines */
.solid-line .crop-vline,
.solid-line .crop-hline {
  background: #ffffff;
}
/* Fix for twitter bootstrap et al. */
.crop-holder img,
img.crop-preview {
  max-width: none;
}
/*Crop Controls*/
.crop-controls {
  height: 100%;
  width: 100%;
  position: absolute;
}
body.ie .crop-controls {
  /* font-size: 1000px; */
  /*overflow:hidden;*/
}
.ord-n {
  position: absolute;
  cursor: n-resize;
}
.ord-e {
  position: absolute;
  cursor: e-resize;
}
.ord-s {
  position: absolute;
  cursor: s-resize;
}
.ord-w {
  position: absolute;
  cursor: w-resize;
}
.ord-nw {
  position: absolute;
  cursor: nw-resize;
  /*background-color:yellow;*/
}
.ord-ne {
  position: absolute;
  cursor: ne-resize;
  /*background-color:yellow;*/
}
.ord-sw {
  position: absolute;
  cursor: sw-resize;
  /*background-color:yellow;*/
}
.ord-se {
  position: absolute;
  cursor: se-resize;
  /*background-color:yellow;*/
}
#viewer.rotate90 .ord-ne {
  cursor: se-resize;
}
#viewer.rotate90 .ord-se {
  cursor: sw-resize;
}
#viewer.rotate90 .ord-sw {
  cursor: nw-resize;
}
#viewer.rotate90 .ord-nw {
  cursor: ne-resize;
}
#viewer.rotate180 .ord-ne {
  cursor: sw-resize;
}
#viewer.rotate180 .ord-se {
  cursor: nw-resize;
}
#viewer.rotate180 .ord-sw {
  cursor: ne-resize;
}
#viewer.rotate180 .ord-nw {
  cursor: se-resize;
}
#viewer.rotate270 .ord-ne {
  cursor: nw-resize;
}
#viewer.rotate270 .ord-se {
  cursor: ne-resize;
}
#viewer.rotate270 .ord-sw {
  cursor: se-resize;
}
#viewer.rotate270 .ord-nw {
  cursor: sw-resize;
}
/* Mask Collection */
.mask-element {
  background-color: rgba(0, 0, 0, 0.65);
}
body.ie .mask-element:before {
  cursor: move;
  border: 10050px solid transparent;
  content: "\20";
  display: block;
  overflow: hidden;
}
/* !Media queries for responsive design
--------------------------------------------- */
/* !--- iPad Landscape --- */
@media screen and (max-width: 1024px) {
  .touch .crop-handle {
    background-color: rgba(136, 186, 217, 0.8);
    border: 1px #fafafa solid;
    -moz-border-radius: 32px;
    -webkit-border-radius: 32px;
    border-radius: 32px;
    width: 32px;
    height: 32px;
    font-size: 1px;
    z-index: 300;
  }
  .tablet .crop-handle.ord-n {
    margin-left: -16px;
    margin-top: -16px;
  }
  .tablet .crop-handle.ord-s {
    margin-bottom: -16px;
    margin-left: -16px;
  }
  .tablet .crop-handle.ord-e {
    margin-right: -16px;
    margin-top: -16px;
  }
  .tablet .crop-handle.ord-w {
    margin-left: -16px;
    margin-top: -16px;
  }
  .tablet .crop-handle.ord-nw {
    margin-left: -16px;
    margin-top: -16px;
  }
  .tablet .crop-handle.ord-ne {
    margin-right: -16px;
    margin-top: -16px;
  }
  .tablet .crop-handle.ord-se {
    margin-bottom: -16px;
    margin-right: -16px;
  }
  .tablet .crop-handle.ord-sw {
    margin-bottom: -16px;
    margin-left: -16px;
  }
}